feat: add RTL support to PackageVulnerabilityTree (#351)

Author: userquin

app/components/PackageVulnerabilityTree.vue

@@ -39,15 +39,15 @@ const summaryText = computed(() => {
 // Styling for each depth level - using accessible colors for both themes
 const depthStyles = {
   root: {
-    bg: 'bg-amber-500/5 border-l-2 border-l-amber-600',
+    bg: 'bg-amber-500/5 border-is-2 border-is-amber-600',
     text: 'text-fg',
   },
   direct: {
-    bg: 'bg-amber-500/5 border-l-2 border-l-amber-500',
+    bg: 'bg-amber-500/5 border-is-2 border-is-amber-500',
     text: 'text-fg-muted',
   },
   transitive: {
-    bg: 'bg-amber-500/5 border-l-2 border-l-amber-400',
+    bg: 'bg-amber-500/5 border-is-2 border-is-amber-400',
     text: 'text-fg-muted',
   },
 } as const
@@ -72,13 +72,13 @@ function getDepthStyle(depth: string | undefined) {
       <!-- Header -->
       <button
         type="button"
-        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
+        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-start transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
         :aria-expanded="isExpanded"
         aria-controls="vuln-tree-details"
         @click="isExpanded = !isExpanded"
       >
         <div class="flex items-center gap-2 min-w-0">
-          <span class="i-carbon-warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
+          <span class="i-carbon:warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
             {{
               $t(
@@ -96,7 +96,7 @@ function getDepthStyle(depth: string | undefined) {
         <div class="flex items-center gap-2 shrink-0">
           <span class="text-xs opacity-80 hidden sm:inline">{{ summaryText }}</span>
           <span
-            class="i-carbon-chevron-down w-4 h-4 transition-transform duration-200"
+            class="i-carbon:chevron-down w-4 h-4 transition-transform duration-200"
             :class="{ 'rotate-180': isExpanded }"
             aria-hidden="true"
           />
@@ -181,7 +181,7 @@ function getDepthStyle(depth: string | undefined) {
           v-if="vulnTree!.failedQueries"
           class="px-4 py-2 text-xs text-fg-subtle border-t border-border flex items-center gap-2"
         >
-          <span class="i-carbon-warning w-3 h-3" aria-hidden="true" />
+          <span class="i-carbon:warning w-3 h-3" aria-hidden="true" />
           <span>{{ $t('package.vulnerabilities.packages_failed', vulnTree!.failedQueries) }}</span>
         </div>
       </div>
@@ -196,7 +196,7 @@ function getDepthStyle(depth: string | undefined) {
   <section v-else-if="status === 'error'" aria-labelledby="vuln-tree-error">
     <div class="rounded-lg border border-border bg-bg-subtle px-4 py-3">
       <div class="flex items-center gap-2">
-        <span class="i-carbon-warning w-4 h-4 text-fg-subtle" aria-hidden="true" />
+        <span class="i-carbon:warning w-4 h-4 text-fg-subtle" aria-hidden="true" />
         <span class="text-sm text-fg-muted">
           {{ $t('package.vulnerabilities.scan_failed') }}
         </span>