fix: fix RTL comformity, fix lint/types, polish tests

Author: serhalp

app/components/compare/ComparisonGrid.vue

@@ -68,13 +68,13 @@ defineProps<{
   text-align: center;
 }
 
-/* First header cell rounded top-left */
+/* First header cell rounded top-start */
 .comparison-header > .comparison-cell-header:first-of-type {
-  border-top-left-radius: 0.5rem;
+  border-start-start-radius: 0.5rem;
 }
 
-/* Last header cell rounded top-right */
+/* Last header cell rounded top-end */
 .comparison-header > .comparison-cell-header:last-of-type {
-  border-top-right-radius: 0.5rem;
+  border-start-end-radius: 0.5rem;
 }
 </style>

app/components/compare/FacetSelector.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ComparisonFacet } from '#shared/types'
 import { FACET_INFO, FACETS_BY_CATEGORY, CATEGORY_ORDER } from '#shared/types/comparison'
 
 const { t } = useI18n()
@@ -18,7 +19,7 @@ const {
 const facetsByCategory = computed(() => {
   const result: Record<
     string,
-    { facet: string; info: (typeof FACET_INFO)[keyof typeof FACET_INFO] }[]
+    { facet: ComparisonFacet; info: (typeof FACET_INFO)[ComparisonFacet] }[]
   > = {}
   for (const category of CATEGORY_ORDER) {
     result[category] = FACETS_BY_CATEGORY[category].map(facet => ({
@@ -31,14 +32,14 @@ const facetsByCategory = computed(() => {
 
 // Check if all non-comingSoon facets in a category are selected
 function isCategoryAllSelected(category: string): boolean {
-  const facets = facetsByCategory.value[category]
+  const facets = facetsByCategory.value[category] ?? []
   const selectableFacets = facets.filter(f => !f.info.comingSoon)
   return selectableFacets.length > 0 && selectableFacets.every(f => isFacetSelected(f.facet))
 }
 
 // Check if no facets in a category are selected
 function isCategoryNoneSelected(category: string): boolean {
-  const facets = facetsByCategory.value[category]
+  const facets = facetsByCategory.value[category] ?? []
   const selectableFacets = facets.filter(f => !f.info.comingSoon)
   return selectableFacets.length > 0 && selectableFacets.every(f => !isFacetSelected(f.facet))
 }
@@ -114,7 +115,7 @@ function isCategoryNoneSelected(category: string): boolean {
           <span
             v-if="!info.comingSoon"
             class="w-3 h-3"
-            :class="isFacetSelected(facet) ? 'i-carbon-checkmark' : 'i-carbon-add'"
+            :class="isFacetSelected(facet) ? 'i-carbon:checkmark' : 'i-carbon:add'"
             aria-hidden="true"
           />
           {{ info.label }}

app/components/compare/MetricRow.vue

@@ -64,11 +64,11 @@ function getDiffIcon(diff?: DiffResult | null): string {
   if (!diff) return ''
   switch (diff.direction) {
     case 'increase':
-      return 'i-carbon-arrow-up'
+      return 'i-carbon:arrow-up'
     case 'decrease':
-      return 'i-carbon-arrow-down'
+      return 'i-carbon:arrow-down'
     case 'changed':
-      return 'i-carbon-arrows-horizontal'
+      return 'i-carbon:arrows-horizontal'
     default:
       return ''
   }
@@ -85,7 +85,7 @@ function getDiffIcon(diff?: DiffResult | null): string {
       <span class="text-xs text-fg-muted uppercase tracking-wider">{{ label }}</span>
       <span
         v-if="description"
-        class="i-carbon-information w-3 h-3 text-fg-subtle"
+        class="i-carbon:information w-3 h-3 text-fg-subtle"
         aria-hidden="true"
       />
     </div>
@@ -99,15 +99,15 @@ function getDiffIcon(diff?: DiffResult | null): string {
       <!-- Background bar for numeric values -->
       <div
         v-if="showBar && value && getBarWidth(value) > 0"
-        class="absolute inset-y-1 left-1 bg-fg/5 rounded-sm transition-all duration-300"
+        class="absolute inset-y-1 inset-is-1 bg-fg/5 rounded-sm transition-all duration-300"
         :style="{ width: `calc(${getBarWidth(value)}% - 8px)` }"
         aria-hidden="true"
       />
 
       <!-- Loading state -->
       <template v-if="loading">
         <span
-          class="i-carbon-circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
+          class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
           aria-hidden="true"
         />
       </template>

app/components/compare/PackageSelector.vue

@@ -102,16 +102,19 @@ function handleBlur() {
           :aria-label="t('compare.selector.remove_package', { package: pkg })"
           @click="removePackage(pkg)"
         >
-          <span class="i-carbon-close block w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-carbon:close block w-3.5 h-3.5" aria-hidden="true" />
         </button>
       </div>
     </div>
 
     <!-- Add package input -->
     <div v-if="packages.length < maxPackages" class="relative">
       <div class="relative">
-        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-fg-subtle" aria-hidden="true">
-          <span class="i-carbon-search w-4 h-4" />
+        <span
+          class="absolute inset-is-3 top-1/2 -translate-y-1/2 text-fg-subtle"
+          aria-hidden="true"
+        >
+          <span class="i-carbon:search w-4 h-4" />
         </span>
         <input
           v-model="inputValue"
@@ -121,7 +124,7 @@ function handleBlur() {
               ? t('compare.selector.search_first')
               : t('compare.selector.search_add')
           "
-          class="w-full bg-bg-subtle border border-border rounded-lg pl-10 pr-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:outline-none"
+          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:outline-none"
           aria-autocomplete="list"
           @focus="isInputFocused = true"
           @blur="handleBlur"
@@ -139,7 +142,7 @@ function handleBlur() {
       >
         <div
           v-if="isInputFocused && (filteredResults.length > 0 || isSearching)"
-          class="absolute top-full left-0 right-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
+          class="absolute top-full inset-x-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
         >
           <div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
             {{ t('compare.selector.searching') }}

app/composables/useFacetSelection.ts

@@ -92,7 +92,7 @@ export function useFacetSelection(queryParam = 'facets') {
 
   // Deselect all facets globally (keeps first facet to ensure at least one)
   function deselectAll(): void {
-    selectedFacets.value = [DEFAULT_FACETS[0]]
+    selectedFacets.value = [DEFAULT_FACETS[0] as ComparisonFacet]
   }
 
   // Check if all facets are selected

app/pages/[...package].vue

@@ -425,7 +425,7 @@ function handleClick(event: MouseEvent) {
               class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5"
               aria-keyshortcuts="c"
             >
-              <span class="i-carbon-compare w-3 h-3" aria-hidden="true" />
+              <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.compare') }}
               <kbd
                 class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
@@ -641,7 +641,7 @@ function handleClick(event: MouseEvent) {
                 :to="{ path: '/compare', query: { packages: pkg.name } }"
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
-                <span class="i-carbon-compare w-4 h-4" aria-hidden="true" />
+                <span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.compare') }}
               </NuxtLink>
             </li>

app/pages/compare.vue

@@ -137,7 +137,7 @@ useSeoMeta({
 
     <!-- Empty state -->
     <section v-else class="text-center py-16 border border-dashed border-border rounded-lg">
-      <div class="i-carbon-compare w-12 h-12 text-fg-subtle mx-auto mb-4" aria-hidden="true" />
+      <div class="i-carbon:compare w-12 h-12 text-fg-subtle mx-auto mb-4" aria-hidden="true" />
       <h2 class="font-mono text-lg text-fg-muted mb-2">{{ t('compare.packages.empty_title') }}</h2>
       <p class="text-sm text-fg-subtle max-w-md mx-auto">
         {{ t('compare.packages.empty_description') }}

test/nuxt/components/compare/FacetSelector.spec.ts

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import FacetSelector from '~/components/compare/FacetSelector.vue'
+import type { ComparisonFacet } from '../../../../shared/types/comparison'
 import { CATEGORY_ORDER, FACET_INFO, FACETS_BY_CATEGORY } from '../../../../shared/types/comparison'
 
 // Mock useFacetSelection
@@ -88,7 +89,7 @@ describe('FacetSelector', () => {
 
       const component = await mountSuspended(FacetSelector)
 
-      expect(component.find('.i-carbon-checkmark').exists()).toBe(true)
+      expect(component.find('.i-carbon\\:checkmark').exists()).toBe(true)
     })
 
     it('shows add icon for unselected facets', async () => {
@@ -97,7 +98,7 @@ describe('FacetSelector', () => {
 
       const component = await mountSuspended(FacetSelector)
 
-      expect(component.find('.i-carbon-add').exists()).toBe(true)
+      expect(component.find('.i-carbon\\:add').exists()).toBe(true)
     })
 
     it('applies aria-pressed for selected state', async () => {
@@ -147,8 +148,8 @@ describe('FacetSelector', () => {
       const comingSoonButton = buttons.find(b => b.text().includes('Total Dependencies'))
 
       // Should not have checkmark or add icon
-      expect(comingSoonButton?.find('.i-carbon-checkmark').exists()).toBe(false)
-      expect(comingSoonButton?.find('.i-carbon-add').exists()).toBe(false)
+      expect(comingSoonButton?.find('.i-carbon\\:checkmark').exists()).toBe(false)
+      expect(comingSoonButton?.find('.i-carbon\\:add').exists()).toBe(false)
     })
 
     it('does not call toggleFacet when comingSoon facet is clicked', async () => {
@@ -168,8 +169,8 @@ describe('FacetSelector', () => {
       const component = await mountSuspended(FacetSelector)
 
       // Find the first 'all' button (for performance category)
-      const allButtons = component.findAll('button').filter(b => b.text() === 'all')
-      await allButtons[0].trigger('click')
+      const allButton = component.findAll('button').find(b => b.text() === 'all')
+      await allButton!.trigger('click')
 
       expect(mockSelectCategory).toHaveBeenCalledWith('performance')
     })
@@ -178,8 +179,8 @@ describe('FacetSelector', () => {
       const component = await mountSuspended(FacetSelector)
 
       // Find the first 'none' button (for performance category)
-      const noneButtons = component.findAll('button').filter(b => b.text() === 'none')
-      await noneButtons[0].trigger('click')
+      const noneButton = component.findAll('button').find(b => b.text() === 'none')
+      await noneButton!.trigger('click')
 
       expect(mockDeselectCategory).toHaveBeenCalledWith('performance')
     })
@@ -190,13 +191,15 @@ describe('FacetSelector', () => {
         f => !FACET_INFO[f].comingSoon,
       )
       mockSelectedFacets.value = performanceFacets
-      mockIsFacetSelected.mockImplementation((f: string) => performanceFacets.includes(f))
+      mockIsFacetSelected.mockImplementation((f: string) =>
+        performanceFacets.includes(f as ComparisonFacet),
+      )
 
       const component = await mountSuspended(FacetSelector)
 
-      const allButtons = component.findAll('button').filter(b => b.text() === 'all')
+      const allButton = component.findAll('button').find(b => b.text() === 'all')
       // First all button (performance) should be disabled
-      expect(allButtons[0].attributes('disabled')).toBeDefined()
+      expect(allButton!.attributes('disabled')).toBeDefined()
     })
 
     it('disables none button when no facets in category are selected', async () => {
@@ -206,9 +209,9 @@ describe('FacetSelector', () => {
 
       const component = await mountSuspended(FacetSelector)
 
-      const noneButtons = component.findAll('button').filter(b => b.text() === 'none')
+      const noneButton = component.findAll('button').find(b => b.text() === 'none')
       // First none button (performance) should be disabled
-      expect(noneButtons[0].attributes('disabled')).toBeDefined()
+      expect(noneButton!.attributes('disabled')).toBeDefined()
     })
   })
 

test/nuxt/components/compare/MetricRow.spec.ts

@@ -251,7 +251,7 @@ describe('MetricRow', () => {
             { raw: 100, display: '100', status: 'neutral' },
             { raw: 100, display: '100', status: 'neutral' },
           ],
-          diffs: [null, { direction: 'same', display: '0%', favorable: null }],
+          diffs: [null, { direction: 'same', display: '0%', favorable: undefined }],
         },
       })
       expect(component.find('.i-carbon-arrow-up').exists()).toBe(false)