feat: add RTL support to OrgMembersPanel (#332)

Author: userquin

app/components/OrgMembersPanel.vue

@@ -294,7 +294,7 @@ watch(lastExecutionTime, () => {
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b border-border">
       <h2 id="members-heading" class="font-mono text-sm font-medium flex items-center gap-2">
-        <span class="i-carbon-user-multiple w-4 h-4 text-fg-muted" aria-hidden="true" />
+        <span class="i-carbon:user-multiple w-4 h-4 text-fg-muted" aria-hidden="true" />
         {{ $t('org.members.title') }}
         <span v-if="memberList.length > 0" class="text-fg-muted">({{ memberList.length }})</span>
       </h2>
@@ -306,7 +306,7 @@ watch(lastExecutionTime, () => {
         @click="refreshData"
       >
         <span
-          class="i-carbon-renew block w-4 h-4"
+          class="i-carbon:renew block w-4 h-4"
           :class="{ 'motion-safe:animate-spin': isLoading || isLoadingTeams }"
           aria-hidden="true"
         />
@@ -317,7 +317,7 @@ watch(lastExecutionTime, () => {
     <div class="flex flex-wrap items-center gap-2 p-3 border-b border-border bg-bg">
       <div class="flex-1 min-w-[150px] relative">
         <span
-          class="absolute left-2 top-1/2 -translate-y-1/2 i-carbon-search w-3.5 h-3.5 text-fg-subtle"
+          class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-carbon:search w-3.5 h-3.5 text-fg-subtle"
           aria-hidden="true"
         />
         <label for="members-search" class="sr-only">{{ $t('org.members.filter_label') }}</label>
@@ -328,7 +328,7 @@ watch(lastExecutionTime, () => {
           name="members-search"
           :placeholder="$t('org.members.filter_placeholder')"
           v-bind="noCorrect"
-          class="w-full pl-7 pr-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          class="w-full ps-7 pe-2 py-1.5 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         />
       </div>
       <div
@@ -395,7 +395,7 @@ watch(lastExecutionTime, () => {
     <!-- Loading state -->
     <div v-if="isLoading && memberList.length === 0" class="p-8 text-center">
       <span
-        class="i-carbon-rotate-180 block w-5 h-5 text-fg-muted animate-spin mx-auto"
+        class="i-carbon:rotate-180 block w-5 h-5 text-fg-muted animate-spin mx-auto"
         aria-hidden="true"
       />
       <p class="font-mono text-sm text-fg-muted mt-2">{{ $t('org.members.loading') }}</p>
@@ -474,12 +474,12 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.remove_from_org', { name: member.name })"
               @click="handleRemoveMember(member.name)"
             >
-              <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
+              <span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </div>
         <!-- Team badges -->
-        <div v-if="member.teams.length > 0" class="flex flex-wrap gap-1 pl-0">
+        <div v-if="member.teams.length > 0" class="flex flex-wrap gap-1 ps-0">
           <button
             v-for="team in member.teams"
             :key="team"
@@ -553,7 +553,7 @@ watch(lastExecutionTime, () => {
               :aria-label="$t('org.members.cancel_add')"
               @click="showAddMember = false"
             >
-              <span class="i-carbon-close block w-4 h-4" aria-hidden="true" />
+              <span class="i-carbon:close block w-4 h-4" aria-hidden="true" />
             </button>
           </div>
         </form>