feat: add RTL support to PackageVersions (#350)

Author: userquin

app/components/PackageVersions.vue

@@ -318,7 +318,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
       >
         {{ $t('package.versions.title') }}
         <span
-          class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+          class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
           aria-hidden="true"
         />
       </a>
@@ -343,15 +343,15 @@ function getTagVersions(tag: string): VersionDisplay[] {
           >
             <span
               v-if="loadingTags.has(row.tag)"
-              class="i-carbon-rotate-180 w-3 h-3 motion-safe:animate-spin"
+              class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
               data-testid="loading-spinner"
               aria-hidden="true"
             />
             <span
               v-else
-              class="w-3 h-3 transition-transform duration-200"
+              class="w-3 h-3 transition-transform duration-200 rtl-flip"
               :class="
-                expandedTags.has(row.tag) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'
+                expandedTags.has(row.tag) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'
               "
               aria-hidden="true"
             />
@@ -412,7 +412,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
         <!-- Expanded versions -->
         <div
           v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
-          class="ml-4 pl-2 border-l border-border space-y-0.5"
+          class="ms-4 ps-2 border-is border-border space-y-0.5"
         >
           <div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
             <div class="flex items-center justify-between gap-2">
@@ -470,7 +470,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <div class="pt-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
+          class="flex items-center gap-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
             otherVersionsExpanded
@@ -484,14 +484,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
           >
             <span
               v-if="otherVersionsLoading"
-              class="i-carbon-rotate-180 w-3 h-3 motion-safe:animate-spin"
+              class="i-carbon:rotate-180 w-3 h-3 motion-safe:animate-spin"
               data-testid="loading-spinner"
               aria-hidden="true"
             />
             <span
               v-else
-              class="w-3 h-3 transition-transform duration-200"
-              :class="otherVersionsExpanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
+              class="w-3 h-3 transition-transform duration-200 rtl-flip"
+              :class="otherVersionsExpanded ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
               aria-hidden="true"
             />
           </span>
@@ -504,7 +504,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
         </button>
 
         <!-- Expanded other versions -->
-        <div v-if="otherVersionsExpanded" class="ml-4 pl-2 border-l border-border space-y-0.5">
+        <div v-if="otherVersionsExpanded" class="ms-4 ps-2 border-is border-border space-y-0.5">
           <!-- Hidden tag rows (overflow from visible tags) -->
           <div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
             <div class="flex items-center justify-between gap-2">
@@ -568,11 +568,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       @click="toggleMajorGroup(group.groupKey)"
                     >
                       <span
-                        class="w-3 h-3 transition-transform duration-200"
+                        class="w-3 h-3 transition-transform duration-200 rtl-flip"
                         :class="
                           expandedMajorGroups.has(group.groupKey)
-                            ? 'i-carbon-chevron-down'
-                            : 'i-carbon-chevron-right'
+                            ? 'i-carbon:chevron-down'
+                            : 'i-carbon:chevron-right'
                         "
                         aria-hidden="true"
                       />
@@ -616,7 +616,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 </div>
                 <div
                   v-if="group.versions[0]?.tags?.length"
-                  class="flex items-center gap-1 ml-5 flex-wrap"
+                  class="flex items-center gap-1 ms-5 flex-wrap"
                 >
                   <span
                     v-for="tag in group.versions[0].tags"
@@ -670,7 +670,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     />
                   </div>
                 </div>
-                <div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
+                <div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ms-5">
                   <span
                     v-for="tag in group.versions[0].tags"
                     :key="tag"
@@ -684,7 +684,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <!-- Version group versions -->
               <div
                 v-if="expandedMajorGroups.has(group.groupKey) && group.versions.length > 1"
-                class="ml-6 space-y-0.5"
+                class="ms-6 space-y-0.5"
               >
                 <div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
                   <div class="flex items-center justify-between gap-2">

test/nuxt/components/PackageVersions.spec.ts

@@ -943,7 +943,7 @@ describe('PackageVersions', () => {
       })
 
       // Find chevron icons inside buttons
-      const chevronIcons = component.findAll('button span.i-carbon-chevron-right')
+      const chevronIcons = component.findAll('button span.i-carbon\\:chevron-right')
       expect(chevronIcons.length).toBeGreaterThan(0)
       for (const icon of chevronIcons) {
         expect(icon.attributes('aria-hidden')).toBe('true')