Merge branch 'main' into baguette

Author: danielroe

app/components/PackagePlaygrounds.vue

@@ -7,15 +7,15 @@ const props = defineProps<{
 
 // Map provider id to icon class
 const providerIcons: Record<string, string> = {
-  'stackblitz': 'i-simple-icons-stackblitz',
-  'codesandbox': 'i-simple-icons-codesandbox',
-  'codepen': 'i-simple-icons-codepen',
-  'replit': 'i-simple-icons-replit',
-  'gitpod': 'i-simple-icons-gitpod',
-  'vue-playground': 'i-simple-icons-vuedotjs',
-  'nuxt-new': 'i-simple-icons-nuxtdotjs',
-  'vite-new': 'i-simple-icons-vite',
-  'jsfiddle': 'i-carbon-code',
+  'stackblitz': 'i-simple-icons:stackblitz',
+  'codesandbox': 'i-simple-icons:codesandbox',
+  'codepen': 'i-simple-icons:codepen',
+  'replit': 'i-simple-icons:replit',
+  'gitpod': 'i-simple-icons:gitpod',
+  'vue-playground': 'i-simple-icons:vuedotjs',
+  'nuxt-new': 'i-simple-icons:nuxtdotjs',
+  'vite-new': 'i-simple-icons:vite',
+  'jsfiddle': 'i-carbon:code',
 }
 
 // Map provider id to color class
@@ -32,7 +32,7 @@ const providerColors: Record<string, string> = {
 }
 
 function getIcon(provider: string): string {
-  return providerIcons[provider] || 'i-carbon-play'
+  return providerIcons[provider] || 'i-carbon:play'
 }
 
 function getColor(provider: string): string {
@@ -141,13 +141,13 @@ function focusMenuItem(index: number) {
         @keydown="handleKeydown"
       >
         <span class="flex items-center gap-2">
-          <span class="i-carbon-play w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
+          <span class="i-carbon:play w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
           <span class="text-fg-muted"
             >{{ $t('package.playgrounds.choose') }} ({{ links.length }})</span
           >
         </span>
         <span
-          class="i-carbon-chevron-down w-3 h-3 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none"
+          class="i-carbon:chevron-down w-3 h-3 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none"
           :class="{ 'rotate-180': isOpen }"
           aria-hidden="true"
         />
@@ -166,7 +166,7 @@ function focusMenuItem(index: number) {
           v-if="isOpen && hasMultipleLinks"
           ref="menuRef"
           role="menu"
-          class="absolute top-full left-0 right-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 overflow-visible"
+          class="absolute top-full inset-is-0 inset-ie-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 overflow-visible"
           @keydown="handleKeydown"
         >
           <AppTooltip v-for="link in links" :key="link.url" :text="link.providerName" class="block">

app/components/PackageSkeleton.vue

@@ -110,10 +110,10 @@
       </h2>
       <!-- code-block with relative positioning for copy button -->
       <div class="relative">
-        <div class="code-block pr-16">
+        <div class="code-block pe-16">
           <span class="skeleton inline-block h-5 w-52" />
         </div>
-        <span class="skeleton absolute top-3 right-3 h-6 w-12 rounded" />
+        <span class="skeleton absolute top-3 inset-ie-3 h-6 w-12 rounded" />
       </div>
     </section>
 

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>

app/components/PackageWeeklyDownloadStats.vue

@@ -178,18 +178,18 @@ const config = computed(() => {
           >
             {{ $t('package.downloads.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>
         </h2>
         <button
           type="button"
           @click="showModal = true"
-          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ml-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+          class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :title="$t('package.downloads.analyze')"
         >
-          <span class="i-carbon-data-analytics w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />
           <span class="sr-only">{{ $t('package.downloads.analyze') }}</span>
         </button>
       </div>
@@ -201,17 +201,17 @@ const config = computed(() => {
             <!-- Skeleton matching sparkline layout: title row + chart with data label -->
             <div class="min-h-[100px]">
               <!-- Title row: date range (24px height) -->
-              <div class="h-6 flex items-center pl-3">
+              <div class="h-6 flex items-center ps-3">
                 <span class="skeleton h-3 w-36" />
               </div>
               <!-- Chart area: data label left, sparkline right -->
               <div class="aspect-[500/80] flex items-center">
                 <!-- Data label (covers ~42% width) -->
-                <div class="w-[42%] flex items-center pl-0.5">
+                <div class="w-[42%] flex items-center ps-0.5">
                   <span class="skeleton h-7 w-24" />
                 </div>
                 <!-- Sparkline area (~58% width) -->
-                <div class="flex-1 flex items-end gap-0.5 h-4/5 pr-3">
+                <div class="flex-1 flex items-end gap-0.5 h-4/5 pe-3">
                   <span
                     v-for="i in 16"
                     :key="i"
@@ -245,7 +245,7 @@ const config = computed(() => {
           class="w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
           :aria-label="$t('common.close')"
         >
-          <span class="w-5 h-5 i-carbon-close" aria-hidden="true" />
+          <span class="w-5 h-5 i-carbon:close" aria-hidden="true" />
         </button>
       </div>
     </template>

app/components/UserCombobox.vue

@@ -205,7 +205,7 @@ const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
           aria-live="polite"
         >
           <span
-            class="i-carbon-information w-3 h-3 inline-block mr-1 align-middle"
+            class="i-carbon:information w-3 h-3 inline-block me-1 align-middle"
             aria-hidden="true"
           />
           {{

app/components/VersionSelector.vue

@@ -485,7 +485,7 @@ watch(
         latest
       </span>
       <span
-        class="i-carbon-chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none"
+        class="i-carbon:chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none"
         :class="{ 'rotate-180': isOpen }"
         aria-hidden="true"
       />
@@ -507,7 +507,7 @@ watch(
         :aria-activedescendant="
           focusedIndex >= 0 ? `version-${flatItems[focusedIndex]?.version?.version}` : undefined
         "
-        class="absolute top-full left-0 mt-2 min-w-[220px] bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
+        class="absolute top-full inset-is-0 mt-2 min-w-[220px] bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
         @keydown="handleListboxKeydown"
       >
         <!-- Version groups -->
@@ -541,13 +541,13 @@ watch(
             >
               <span
                 v-if="group.isLoading"
-                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"
                 aria-hidden="true"
               />
               <span
                 v-else
-                class="w-3 h-3 transition-transform duration-200"
-                :class="group.isExpanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
+                class="w-3 h-3 transition-transform duration-200 rtl-flip"
+                :class="group.isExpanded ? 'i:carbon:chevron-down' : 'i-carbon:chevron-right'"
                 aria-hidden="true"
               />
             </button>
@@ -582,7 +582,7 @@ watch(
           <!-- Expanded versions -->
           <div
             v-if="group.isExpanded && group.versions.length > 1"
-            class="ml-6 border-l border-border"
+            class="ms-6 border-is border-border"
           >
             <template v-for="(v, vIndex) in group.versions.slice(1)" :key="v.version">
               <NuxtLink
@@ -595,7 +595,7 @@ watch(
                   flatItems[focusedIndex]?.type === 'version' &&
                   flatItems[focusedIndex]?.version?.version === v.version
                 "
-                class="flex items-center justify-between gap-2 pl-4 pr-3 py-1.5 text-xs font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none"
+                class="flex items-center justify-between gap-2 ps-4 pe-3 py-1.5 text-xs font-mono hover:bg-bg-muted transition-[color,background-color] focus-visible:outline-none"
                 :class="[
                   v.isCurrent ? 'text-fg bg-bg-muted' : 'text-fg-subtle',
                   flatItems[focusedIndex]?.version?.version === v.version ? 'bg-bg-muted' : '',