Merge branch 'main' into footer-tagline-baseline-and-text-balancing

Author: serhalp

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/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/composables/useNpmRegistry.ts

@@ -287,7 +287,7 @@ export function useNpmSearch(
   let lastSearch: NpmSearchResponse | undefined = undefined
 
   const asyncData = useLazyAsyncData(
-    `search:incremental:${toValue(query)}`,
+    () => `search:incremental:${toValue(query)}`,
     async () => {
       const q = toValue(query)
       if (!q.trim()) {

app/pages/about.vue

@@ -213,7 +213,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
               class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
             >
               <div class="flex items-center gap-2">
-                <span class="i-carbon-logo-github w-5 h-5 text-fg" aria-hidden="true" />
+                <span class="i-carbon:logo-github w-5 h-5 text-fg" aria-hidden="true" />
                 <span class="font-medium text-fg">{{
                   $t('about.get_involved.contribute.title')
                 }}</span>
@@ -225,7 +225,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
               >
                 {{ $t('about.get_involved.contribute.cta') }}
-                <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" />
               </span>
             </a>
 
@@ -237,7 +237,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
               class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
             >
               <div class="flex items-center gap-2">
-                <span class="i-carbon-chat w-5 h-5 text-fg" aria-hidden="true" />
+                <span class="i-carbon:chat w-5 h-5 text-fg" aria-hidden="true" />
                 <span class="font-medium text-fg">{{
                   $t('about.get_involved.community.title')
                 }}</span>
@@ -249,7 +249,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
               >
                 {{ $t('about.get_involved.community.cta') }}
-                <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" />
               </span>
             </a>
 
@@ -261,7 +261,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
               class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
             >
               <div class="flex items-center gap-2">
-                <span class="i-simple-icons-bluesky w-5 h-5 text-fg" aria-hidden="true" />
+                <span class="i-simple-icons:bluesky w-5 h-5 text-fg" aria-hidden="true" />
                 <span class="font-medium text-fg">{{ $t('about.get_involved.follow.title') }}</span>
               </div>
               <p class="text-sm text-fg-muted leading-relaxed">
@@ -271,7 +271,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
               >
                 {{ $t('about.get_involved.follow.cta') }}
-                <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" />
               </span>
             </a>
           </div>
@@ -283,7 +283,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
           to="/"
           class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
         >
-          <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
           {{ $t('about.back_home') }}
         </NuxtLink>
       </footer>

app/pages/index.vue

@@ -63,7 +63,7 @@ defineOgImageComponent('Default')
 
             <div class="search-box relative flex items-center">
               <span
-                class="absolute left-4 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 group-focus-within:text-accent z-1"
+                class="absolute inset-is-4 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 group-focus-within:text-accent z-1"
               >
                 /
               </span>
@@ -77,13 +77,13 @@ defineOgImageComponent('Default')
                 :placeholder="$t('search.placeholder')"
                 v-bind="noCorrect"
                 autofocus
-                class="w-full bg-bg-subtle border border-border rounded-lg pl-8 pr-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                 @input="handleSearch"
               />
 
               <button
                 type="submit"
-                class="absolute right-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
               >
                 {{ $t('search.button') }}
               </button>