Merge branch 'main' into ui/fix-dropdown-alignment

Author: danielroe

.github/workflows/autofix.yml

@@ -32,6 +32,9 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
+      - name: 🎨 Check for non-RTL CSS classes
+        run: pnpm rtl:check
+
       - name: 🌐 Compare translations
         run: pnpm i18n:check
 

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "i18n-ally.localesPaths": ["./i18n/locales"],
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "nested",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

app/assets/main.css

@@ -5,17 +5,18 @@
   box-sizing: border-box;
 }
 
+:root:not([data-theme='light']),
 :root[data-theme='dark'] {
   /* background colors */
-  --bg: var(--bg-color, oklch(0.145 0 0));
-  --bg-subtle: var(--bg-subtle-color, oklch(0.178 0 0));
-  --bg-muted: var(--bg-muted-color, oklch(0.218 0 0));
-  --bg-elevated: var(--bg-elevated-color, oklch(0.252 0 0));
+  --bg: var(--bg-color, oklch(0.171 0 0));
+  --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
+  --bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
+  --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
 
   /* text colors */
-  --fg: oklch(0.985 0 0);
-  --fg-muted: oklch(0.709 0 0);
-  --fg-subtle: oklch(0.633 0 0);
+  --fg: oklch(0.982 0 0);
+  --fg-muted: oklch(0.749 0 0);
+  --fg-subtle: oklch(0.673 0 0);
 
   /* border, separator colors */
   --border: oklch(0.269 0 0);
@@ -44,24 +45,24 @@
 }
 
 :root[data-theme='dark'][data-bg-theme='slate'] {
-  --bg: oklch(0.129 0.012 264.695);
-  --bg-subtle: oklch(0.159 0.022 262.421);
-  --bg-muted: oklch(0.204 0.033 261.234);
-  --bg-elevated: oklch(0.259 0.041 260.031);
+  --bg: oklch(0.151 0.018 264.695);
+  --bg-subtle: oklch(0.179 0.015 262.421);
+  --bg-muted: oklch(0.214 0.018 261.234);
+  --bg-elevated: oklch(0.259 0.021 260.031);
 }
 
 :root[data-theme='dark'][data-bg-theme='zinc'] {
-  --bg: oklch(0.141 0.005 285.823);
-  --bg-subtle: oklch(0.168 0.005 285.894);
-  --bg-muted: oklch(0.209 0.005 285.929);
+  --bg: oklch(0.158 0.005 285.823);
+  --bg-subtle: oklch(0.188 0.005 285.894);
+  --bg-muted: oklch(0.219 0.005 285.929);
   --bg-elevated: oklch(0.256 0.006 286.033);
 }
 
 :root[data-theme='dark'][data-bg-theme='stone'] {
-  --bg: oklch(0.147 0.004 49.25);
-  --bg-subtle: oklch(0.178 0.004 49.321);
-  --bg-muted: oklch(0.218 0.004 49.386);
-  --bg-elevated: oklch(0.252 0.007 34.298);
+  --bg: oklch(0.164 0.004 89.25);
+  --bg-subtle: oklch(0.198 0.008 89.321);
+  --bg-muted: oklch(0.228 0.015 89.386);
+  --bg-elevated: oklch(0.252 0.018 84.298);
 }
 
 :root[data-theme='dark'][data-bg-theme='black'] {
@@ -74,12 +75,12 @@
 :root[data-theme='light'] {
   --bg: var(--bg-color, oklch(1 0 0));
   --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
-  --bg-muted: var(--bg-muted-color, oklch(0.955 0 0));
-  --bg-elevated: var(--bg-elevated-color, oklch(0.94 0 0));
+  --bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
+  --bg-elevated: var(--bg-elevated-color, oklch(0.94 0.002 287.29));
 
-  --fg: oklch(0.145 0 0);
-  --fg-muted: oklch(0.439 0 0);
-  --fg-subtle: oklch(0.52 0 0);
+  --fg: oklch(0.146 0 0);
+  --fg-muted: oklch(0.398 0 0);
+  --fg-subtle: oklch(0.48 0 0);
 
   --border: oklch(0.8514 0 0);
   --border-subtle: oklch(0.922 0 0);
@@ -105,9 +106,9 @@
 
 :root[data-theme='light'][data-bg-theme='slate'] {
   --bg: oklch(1 0 0);
-  --bg-subtle: oklch(0.982 0.006 264.62);
-  --bg-muted: oklch(0.96 0.041 261.234);
-  --bg-elevated: oklch(0.943 0.013 255.52);
+  --bg-subtle: oklch(0.982 0.008 269.62);
+  --bg-muted: oklch(0.96 0.008 261.234);
+  --bg-elevated: oklch(0.943 0.012 255.52);
 }
 
 :root[data-theme='light'][data-bg-theme='zinc'] {
@@ -119,9 +120,13 @@
 
 :root[data-theme='light'][data-bg-theme='stone'] {
   --bg: oklch(1 0 0);
-  --bg-subtle: oklch(0.979 0.005 48.762);
-  --bg-muted: oklch(0.958 0.005 48.743);
-  --bg-elevated: oklch(0.943 0.005 48.731);
+  --bg-subtle: oklch(0.979 0.004 88.762);
+  --bg-muted: oklch(0.958 0.005 88.743);
+  --bg-elevated: oklch(0.943 0.005 88.731);
+}
+
+:root[data-theme='light'][data-bg-theme='black'] {
+  --bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
 }
 
 @media (prefers-contrast: more) {

app/components/AppFooter.vue

@@ -20,7 +20,7 @@ const isHome = computed(() => route.name === 'index')
           </NuxtLink>
           <NuxtLink
             :to="{ name: 'privacy' }"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1 lowercase"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('privacy_policy.title') }}
           </NuxtLink>

app/components/AppHeader.vue

@@ -85,10 +85,11 @@ onKeyStroke(
 </script>
 
 <template>
-  <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
+  <header class="sticky top-0 z-50 border-b border-border">
+    <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container min-h-14 flex items-center gap-2"
+      class="relative container min-h-14 flex items-center gap-2 z-1"
       :class="isOnHomePage ? 'justify-end' : 'justify-between'"
     >
       <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->

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/Filter/Chips.vue

@@ -14,14 +14,14 @@ const emit = defineEmits<{
 <template>
   <div v-if="chips.length > 0" class="flex flex-wrap items-center gap-2">
     <TransitionGroup name="chip">
-      <TagStatic v-for="chip in chips" :key="chip.id" class="gap-1">
+      <TagStatic v-for="chip in chips" :key="chip.id" class="gap-2 pe-1">
         <span class="text-fg-subtle text-xs">{{ chip.label }}:</span>
         <span class="max-w-32 truncate">{{
           Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
         }}</span>
         <button
           type="button"
-          class="flex items-center ms-0.5 hover:text-fg rounded-full p-0.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+          class="flex items-center p-1 -m-1 hover:text-fg rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
           :aria-label="$t('filters.remove_filter', { label: chip.label })"
           @click="emit('remove', chip)"
         >
@@ -33,7 +33,7 @@ const emit = defineEmits<{
     <button
       v-if="chips.length > 1"
       type="button"
-      class="text-sm text-fg-subtle hover:text-fg underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2"
+      class="text-sm p-0.5 text-fg-muted hover:text-fg underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2"
       @click="emit('clearAll')"
     >
       {{ $t('filters.clear_all') }}

app/components/Filter/Panel.vue

@@ -228,7 +228,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             :value="filters.text"
             :placeholder="searchPlaceholder"
             autocomplete="off"
-            class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)"
+            class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
             @input="handleTextInput"
           />
         </div>