Merge remote-tracking branch 'upstream/main' into fix-a11y-extract-btn-component

Author: essenmitsosse

app/components/Compare/ComparisonGrid.vue

@@ -2,8 +2,8 @@
 import type { ModuleReplacement } from 'module-replacements'
 
 export interface ComparisonGridColumn {
-  /** Display text (e.g. "lodash@4.17.21") */
-  header: string
+  name: string
+  version?: string
   /** Module replacement data for this package (if available) */
   replacement?: ModuleReplacement | null
 }
@@ -38,18 +38,14 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
         <div class="comparison-label" />
 
         <!-- Package columns -->
-        <div
-          v-for="col in columns"
-          :key="col.header"
-          class="comparison-cell comparison-cell-header"
-        >
+        <div v-for="col in columns" :key="col.name" class="comparison-cell comparison-cell-header">
           <span class="inline-flex items-center gap-1.5 truncate">
             <NuxtLink
-              :to="packageRoute(col.header)"
+              :to="packageRoute(col.name, col.version)"
               class="link-subtle font-mono text-sm font-medium text-fg truncate"
-              :title="col.header"
+              :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
-              {{ col.header }}
+              {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
             </NuxtLink>
             <TooltipApp v-if="col.replacement" :text="getReplacementTooltip(col)" position="bottom">
               <span

app/components/Compare/FacetCard.vue

@@ -131,7 +131,9 @@ function getShortName(header: string): string {
                 :datetime="value.display"
                 date-style="medium"
               />
-              <template v-else>{{ value.display }}</template>
+              <template v-else>
+                <span dir="auto">{{ value.display }}</span>
+              </template>
             </span>
           </template>
         </span>

app/components/Compare/FacetRow.vue

@@ -135,7 +135,9 @@ function isCellLoading(index: number): boolean {
           >
             <!-- Date values use DateTime component for i18n and user settings -->
             <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
-            <template v-else>{{ value.display }}</template>
+            <template v-else>
+              <span dir="auto">{{ value.display }}</span>
+            </template>
           </span>
         </TooltipApp>
         <span
@@ -146,7 +148,9 @@ function isCellLoading(index: number): boolean {
         >
           <!-- Date values use DateTime component for i18n and user settings -->
           <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
-          <template v-else>{{ value.display }}</template>
+          <template v-else>
+            <span dir="auto">{{ value.display }}</span>
+          </template>
         </span>
       </template>
     </div>

app/components/Header/ConnectorModal.vue

@@ -108,6 +108,7 @@ function handleDisconnect() {
 
       <div
         class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
+        dir="ltr"
       >
         <span class="text-fg-subtle">$</span>
         <span class="text-fg-subtle ms-2">pnpm npmx-connector</span>

app/components/OgImage/Default.vue

@@ -8,7 +8,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   primaryColor: '#60a5fa',
   title: 'npmx',
-  description: 'A better browser for the **npm registry**',
+  description: 'a fast, modern browser for the **npm registry**',
 })
 </script>
 

app/components/Package/Card.vue

@@ -48,6 +48,7 @@ const pkgDescription = useMarkdown(() => ({
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"
+          dir="ltr"
           >{{ result.package.name }}</NuxtLink
         >
         <span

app/components/Package/Compatibility.vue

@@ -48,7 +48,7 @@ const sortedEngines = computed(() => {
           />
           {{ getName(engine) }}
         </dt>
-        <dd class="font-mono text-sm text-fg text-end" :title="version">
+        <dd class="font-mono text-sm text-fg text-end" :title="version" dir="ltr">
           {{ version }}
         </dd>
       </div>

app/components/Package/Dependencies.vue

@@ -81,10 +81,10 @@ const sortedOptionalDependencies = computed(() => {
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)">
+          <LinkBase :to="packageRoute(dep)" dir="ltr">
             {{ dep }}
           </LinkBase>
-          <span class="flex items-center gap-1 max-w-[40%]">
+          <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
             <span
               v-if="outdatedDeps[dep]"
               class="shrink-0"
@@ -161,7 +161,7 @@ const sortedOptionalDependencies = computed(() => {
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
           <div class="flex items-center gap-1 min-w-0 flex-1">
-            <LinkBase :to="packageRoute(peer.name)" class="truncate">
+            <LinkBase :to="packageRoute(peer.name)" class="truncate" dir="ltr">
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -172,6 +172,7 @@ const sortedOptionalDependencies = computed(() => {
             :to="packageRoute(peer.name, peer.version)"
             class="truncate"
             :title="peer.version"
+            dir="ltr"
           >
             {{ peer.version }}
           </LinkBase>
@@ -213,10 +214,10 @@ const sortedOptionalDependencies = computed(() => {
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="truncate">
+          <LinkBase :to="packageRoute(dep)" class="truncate" dir="ltr">
             {{ dep }}
           </LinkBase>
-          <LinkBase :to="packageRoute(dep, version)" class="truncate" :title="version">
+          <LinkBase :to="packageRoute(dep, version)" class="truncate" :title="version" dir="ltr">
             {{ version }}
           </LinkBase>
         </li>

app/components/Package/Maintainers.vue

@@ -190,10 +190,13 @@ watch(
               params: { username: maintainer.name },
             }"
             class="link-subtle font-mono text-sm shrink-0"
+            dir="ltr"
           >
             ~{{ maintainer.name }}
           </LinkBase>
-          <span v-else class="font-mono text-sm text-fg-muted">{{ maintainer.email }}</span>
+          <span v-else class="font-mono text-sm text-fg-muted" dir="ltr">{{
+            maintainer.email
+          }}</span>
 
           <!-- Access source badges -->
           <span

app/components/Package/TableRow.vue

@@ -53,14 +53,15 @@ const allMaintainersText = computed(() => {
       <NuxtLink
         :to="packageUrl"
         class="font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
+        dir="ltr"
       >
         {{ pkg.name }}
       </NuxtLink>
     </td>
 
     <!-- Version -->
     <td v-if="isColumnVisible('version')" class="py-2 px-3 font-mono text-xs text-fg-subtle">
-      {{ pkg.version }}
+      <span dir="ltr">{{ pkg.version }}</span>
     </td>
 
     <!-- Description -->