Merge branch 'main' into lino/add-module-replacements

Author: lino-levan

app/components/CodeDirectoryListing.vue

@@ -70,7 +70,7 @@ function formatBytes(bytes: number): string {
               :to="parentPath ? `${baseUrl}/${parentPath}` : baseUrl"
               class="flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
             >
-              <span class="i-carbon-folder w-4 h-4 text-yellow-600" />
+              <span class="i-carbon:folder w-4 h-4 text-yellow-600" />
               <span>..</span>
             </NuxtLink>
           </td>
@@ -91,13 +91,13 @@ function formatBytes(bytes: number): string {
             >
               <span
                 v-if="node.type === 'directory'"
-                class="i-carbon-folder w-4 h-4 text-yellow-600"
+                class="i-carbon:folder w-4 h-4 text-yellow-600"
               />
               <span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
               <span>{{ node.name }}</span>
             </NuxtLink>
           </td>
-          <td class="py-2 px-4 text-right font-mono text-xs text-fg-subtle">
+          <td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
             <span v-if="node.type === 'file' && node.size">
               {{ formatBytes(node.size) }}
             </span>

app/components/CodeFileTree.vue

@@ -39,21 +39,21 @@ watch(
       <template v-if="node.type === 'directory'">
         <button
           type="button"
-          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-left font-mono text-sm transition-colors hover:bg-bg-muted"
+          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-start font-mono text-sm transition-colors hover:bg-bg-muted"
           :class="isNodeActive(node) ? 'text-fg' : 'text-fg-muted'"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
         >
           <span
             class="w-4 h-4 shrink-0 transition-transform"
-            :class="[isExpanded(node.path) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right']"
+            :class="[isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right']"
           />
           <span
             class="w-4 h-4 shrink-0"
             :class="
               isExpanded(node.path)
-                ? 'i-carbon-folder-open text-yellow-500'
-                : 'i-carbon-folder text-yellow-600'
+                ? 'i-carbon:folder-open text-yellow-500'
+                : 'i-carbon:folder text-yellow-600'
             "
           />
           <span class="truncate">{{ node.name }}</span>

app/components/CodeMobileTreeDrawer.vue

@@ -27,11 +27,11 @@ watch(isOpen, open => (isLocked.value = open))
   <!-- Toggle button (mobile only) -->
   <button
     type="button"
-    class="md:hidden fixed bottom-4 right-4 z-40 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"
+    class="md:hidden fixed bottom-4 inset-ie-4 z-40 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('code.toggle_tree')"
     @click="isOpen = !isOpen"
   >
-    <span class="w-5 h-5" :class="isOpen ? 'i-carbon-close' : 'i-carbon-folder'" />
+    <span class="w-5 h-5" :class="isOpen ? 'i-carbon:close' : 'i-carbon:folder'" />
   </button>
 
   <!-- Backdrop -->
@@ -57,19 +57,20 @@ watch(isOpen, open => (isLocked.value = open))
   >
     <aside
       v-if="isOpen"
-      class="md:hidden fixed inset-y-0 left-0 z-50 w-72 bg-bg-subtle border-r border-border overflow-y-auto"
+      class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 bg-bg-subtle border-ie border-border overflow-y-auto"
     >
       <div
-        class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-between"
+        class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-start"
       >
         <span class="font-mono text-sm text-fg-muted">{{ $t('code.files_label') }}</span>
+        <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
         <button
           type="button"
           class="text-fg-muted hover:text-fg transition-colors"
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
         >
-          <span class="i-carbon-close w-5 h-5" />
+          <span class="i-carbon:close w-5 h-5" />
         </button>
       </div>
       <CodeFileTree :tree="tree" :current-path="currentPath" :base-url="baseUrl" />

app/components/CodeViewer.vue

@@ -58,7 +58,7 @@ watch(
   <div class="code-viewer flex min-h-full">
     <!-- Line numbers column -->
     <div
-      class="line-numbers shrink-0 bg-bg-subtle border-r border-border text-right select-none"
+      class="line-numbers shrink-0 bg-bg-subtle border-ie border-border text-end select-none"
       aria-hidden="true"
     >
       <a

app/components/ConnectorModal.vue

@@ -82,7 +82,7 @@ watch(open, isOpen => {
                 :aria-label="$t('common.close')"
                 @click="open = false"
               >
-                <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
+                <span class="i-carbon:close block w-5 h-5" aria-hidden="true" />
               </button>
             </div>
 
@@ -124,19 +124,19 @@ watch(open, isOpen => {
                 class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
               >
                 <span class="text-fg-subtle">$</span>
-                <span class="text-fg-subtle ml-2">{{ executeNpmxConnectorCommand }}</span>
+                <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
                 <button
                   type="button"
                   :aria-label="
                     copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
                   "
-                  class="ml-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                   @click="copyCommand"
                 >
-                  <span v-if="!copied" class="i-carbon-copy block w-5 h-5" aria-hidden="true" />
+                  <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
                   <span
                     v-else
-                    class="i-carbon-checkmark block w-5 h-5 text-green-500"
+                    class="i-carbon:checkmark block w-5 h-5 text-green-500"
                     aria-hidden="true"
                   />
                 </button>

app/components/ConnectorStatus.client.vue

@@ -75,7 +75,7 @@ const ariaLabel = computed(() => {
       <!-- Operation count badge (overlaid) -->
       <span
         v-if="isConnected && operationCount > 0"
-        class="absolute -top-0.5 -right-0.5 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
+        class="absolute -top-0.5 -inset-ie-0.5 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
         :class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
         aria-hidden="true"
       >
@@ -93,7 +93,7 @@ const ariaLabel = computed(() => {
       <div
         v-if="showTooltip"
         role="tooltip"
-        class="absolute right-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
+        class="absolute inset-ie-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
       >
         {{ tooltipText }}
       </div>

app/components/DateTime.vue

@@ -33,11 +33,20 @@ const { locale } = useI18n()
 
 const relativeDates = useRelativeDates()
 
+const dateFormatter = new Intl.DateTimeFormat(locale.value, {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  timeZoneName: 'short',
+})
+
 // Compute the title - always show full date for accessibility
 const titleValue = computed(() => {
   if (props.title) return props.title
-  if (typeof props.datetime === 'string') return props.datetime
-  return props.datetime.toISOString()
+  const date = typeof props.datetime === 'string' ? new Date(props.datetime) : props.datetime
+  return dateFormatter.format(date)
 })
 </script>
 

app/components/DependencyPathPopup.vue

@@ -71,7 +71,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >
-      <span class="i-carbon-tree-view w-3 h-3" aria-hidden="true" />
+      <span class="i-carbon:tree-view w-3 h-3" aria-hidden="true" />
       <span>{{ $t('package.vulnerabilities.path') }}</span>
     </button>
 
@@ -89,7 +89,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
           class="font-mono text-xs"
           :style="{ paddingLeft: `${idx * 12}px` }"
         >
-          <span v-if="idx > 0" class="text-fg-subtle mr-1">└─</span>
+          <span v-if="idx > 0" class="text-fg-subtle me-1">└─</span>
           <NuxtLink
             :to="{
               name: 'package',
@@ -107,7 +107,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
           >
             {{ pathItem }}
           </NuxtLink>
-          <span v-if="idx === path.length - 1" class="ml-1 text-amber-500">⚠</span>
+          <span v-if="idx === path.length - 1" class="ms-1 text-amber-500">⚠</span>
         </li>
       </ul>
     </div>

app/components/HeaderOrgsDropdown.vue

@@ -75,7 +75,7 @@ function handleKeydown(event: KeyboardEvent) {
       enter-from-class="opacity-0 translate-y-1"
       leave-to-class="opacity-0 translate-y-1"
     >
-      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-56 z-50">
+      <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-56 z-50">
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
             <span class="font-mono text-xs text-fg-subtle">{{
@@ -112,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
               {{ $t('header.orgs_dropdown.view_all') }}
-              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+              <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
         </div>

app/components/HeaderPackagesDropdown.vue

@@ -75,7 +75,7 @@ function handleKeydown(event: KeyboardEvent) {
       enter-from-class="opacity-0 translate-y-1"
       leave-to-class="opacity-0 translate-y-1"
     >
-      <div v-if="isOpen" class="absolute right-0 top-full pt-2 w-64 z-50">
+      <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-64 z-50">
         <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
           <div class="px-3 py-2 border-b border-border">
             <span class="font-mono text-xs text-fg-subtle">{{
@@ -112,7 +112,7 @@ function handleKeydown(event: KeyboardEvent) {
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >
               {{ $t('header.packages_dropdown.view_all') }}
-              <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+              <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </NuxtLink>
           </div>
         </div>