Merge branch 'main' into app-footer-use-space-between

Author: knowler

app/assets/main.css

@@ -281,6 +281,9 @@ html.light .shiki span {
   white-space: pre;
   word-break: normal;
   overflow-wrap: normal;
+  /* Makes unicode and ascii art work properly */
+  line-height: 1.25;
+  display: inline-block;
 }
 
 .readme-content ul,

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/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/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/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">

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/ScrollToTop.vue

@@ -36,11 +36,11 @@ onMounted(() => {
   <button
     v-if="isActive && supportsScrollStateQueries"
     type="button"
-    class="scroll-to-top-css fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+    class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
     :aria-label="$t('common.scroll_to_top')"
     @click="scrollToTop"
   >
-    <span class="i-carbon-arrow-up w-5 h-5" aria-hidden="true" />
+    <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
   </button>
 
   <!-- JS fallback for browsers without scroll-state support -->
@@ -56,11 +56,11 @@ onMounted(() => {
     <button
       v-if="isActive && isMounted && isVisible"
       type="button"
-      class="fixed bottom-4 right-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
+      class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg md:hidden flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
       :aria-label="$t('common.scroll_to_top')"
       @click="scrollToTop"
     >
-      <span class="i-carbon-arrow-up w-5 h-5" aria-hidden="true" />
+      <span class="i-carbon:arrow-up w-5 h-5" aria-hidden="true" />
     </button>
   </Transition>
 </template>

app/components/SearchSuggestionCard.vue

@@ -77,7 +77,7 @@ const emit = defineEmits<{
       </div>
 
       <span
-        class="i-carbon-arrow-right w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
+        class="i-carbon:arrow-right rtl-flip w-4 h-4 text-fg-subtle group-hover:text-fg transition-colors shrink-0"
         aria-hidden="true"
       />
     </NuxtLink>