Merge remote-tracking branch 'origin/main' into feat/profile-page

Author: danielroe

.github/workflows/chromatic.yml

@@ -17,14 +17,14 @@ jobs:
   chromatic:
     name: 📚 Chromatic
     runs-on: ubuntu-24.04-arm
-    if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository }}
 
     steps:
       - name: ☑️ Checkout
         uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.ref || github.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
@@ -38,10 +38,8 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 🧪 Run Chromatic Visual Tests
+      - name: 🧪 Run Chromatic Visual and Accessibility Tests
         uses: chromaui/action@a8ce9c58f59be5cc7090cadfc8f130fb08fcf0c3 # v15.1.0
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
         env:
           CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
           CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }}

app/assets/logos/sponsors/index.ts

@@ -2,20 +2,24 @@ import LogoVercel from './vercel.svg'
 import LogoVercelLight from './vercel-light.svg'
 import LogoVoidZero from './void-zero.svg'
 import LogoVoidZeroLight from './void-zero-light.svg'
+import LogoVlt from './vlt.svg'
+import LogoVltLight from './vlt-light.svg'
 
 // The list is used on the about page. To add, simply upload the logos nearby and add an entry here. Prefer SVGs.
 // For logo src, specify a string or object with the light and dark theme variants.
 // Prefer original assets from partner sites to keep their brand identity.
 //
 // If there are no original assets and the logo is not universal, you can add only the dark theme variant
 // and specify 'auto' for the light one - this will grayscale the logo and invert it in light mode.
+// The normalisingIndent is the Y-axis space to visually stabilize favicon-only logos with logotypes that contain long name.
 export const SPONSORS = [
   {
     name: 'Vercel',
     logo: {
       dark: LogoVercel,
       light: LogoVercelLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://vercel.com/',
   },
   {
@@ -24,6 +28,16 @@ export const SPONSORS = [
       dark: LogoVoidZero,
       light: LogoVoidZeroLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://voidzero.dev/',
   },
+  {
+    name: 'vlt',
+    logo: {
+      dark: LogoVlt,
+      light: LogoVltLight,
+    },
+    normalisingIndent: '0.25rem',
+    url: 'https://vlt.sh/',
+  },
 ]

app/assets/logos/sponsors/vlt-light.svg

@@ -11,30 +11,30 @@ const props = defineProps<{
 </script>
 <template>
   <div v-if="typeof src === 'string'">
-    <img :src="src" loading="lazy" height="36" class="w-auto block h-9" :alt="alt" />
+    <img :src="src" loading="lazy" height="36" class="w-auto block h-full" :alt="alt" />
   </div>
-  <div v-else-if="src.light === 'auto'">
+  <div v-else-if="src.light === 'auto'" class="h-full">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:invert light:grayscale h-9"
+      class="w-auto block light:invert light:grayscale h-full"
       :alt="alt"
     />
   </div>
-  <div v-else>
+  <div v-else class="h-full">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:hidden h-9"
+      class="w-auto block light:hidden h-full"
       :alt="alt"
     />
     <img
       :src="src.light"
       loading="lazy"
       height="36"
-      class="w-auto block hidden light:block h-9"
+      class="w-auto block hidden light:block h-full"
       :alt="alt"
     />
   </div>

app/assets/logos/sponsors/vlt.svg

@@ -2,6 +2,7 @@
 type BaseItem = {
   name: string
   url: string
+  normalisingIndent?: string
   logo:
     | string
     | {
@@ -21,14 +22,15 @@ const props = defineProps<{
 </script>
 
 <template>
-  <ul class="flex items-center flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
+  <ul class="flex flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
     <li v-for="item in list" :key="item.name">
       <a
         v-if="'logo' in item"
         :href="item.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="flex items-center justify-center h-full min-w-11 rounded-md hover:bg-fg/10 transition-colors p-1"
+        class="relative flex items-center justify-center h-14 min-w-14 rounded-md hover:bg-fg/10 transition-colors p-1"
+        :style="{ paddingBlock: item.normalisingIndent }"
         :aria-label="item.name"
       >
         <AboutLogoImg :src="item.logo" :alt="item.name" />
@@ -53,7 +55,8 @@ const props = defineProps<{
               :href="groupItem.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center justify-center h-full min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              class="relative flex items-center justify-center h-10 min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              :style="{ paddingBlock: groupItem.normalisingIndent }"
               :aria-label="groupItem.name"
             >
               <AboutLogoImg :src="groupItem.logo" :alt="groupItem.name" />

app/components/About/LogoImg.vue

@@ -39,7 +39,7 @@ export const Disabled: Story = {
 export const WithIcon: Story = {
   args: {
     default: 'Search',
-    classicon: 'i-carbon:search',
+    classicon: 'i-lucide:search',
     variant: 'secondary',
   },
 }

app/components/About/LogoList.vue

@@ -85,7 +85,7 @@ function handleReset() {
         v-if="isOpen"
         ref="menuRef"
         :id="menuId"
-        class="absolute top-full inset-ie-0 sm:inset-is-auto sm:inset-ie-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
+        class="absolute top-full inset-is-auto sm:inset-ie-0 mt-2 w-60 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
         role="group"
         :aria-label="$t('filters.columns.show')"
       >

app/components/Button/Base.stories.ts

@@ -183,18 +183,12 @@ watch(highlightedIndex, index => {
   }
 })
 
-const { start, stop } = useTimeoutFn(() => {
-  isInputFocused.value = false
-}, 200)
-
-function handleBlur() {
-  start()
-}
+const containerRef = useTemplateRef('containerRef')
 
-function handleFocus() {
-  stop()
-  isInputFocused.value = true
-}
+onClickOutside(containerRef, () => {
+  isInputFocused.value = false
+  highlightedIndex.value = -1
+})
 </script>
 
 <template>
@@ -226,7 +220,7 @@ function handleFocus() {
     </div>
 
     <!-- Add package input -->
-    <div v-if="packages.length < maxPackages" class="relative">
+    <div v-if="packages.length < maxPackages" ref="containerRef" class="relative">
       <div class="relative group flex items-center">
         <label for="package-search" class="sr-only">
           {{ $t('compare.selector.search_label') }}
@@ -249,8 +243,8 @@ function handleFocus() {
           size="medium"
           class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
-          @focus="handleFocus"
-          @blur="handleBlur"
+          ref="inputRef"
+          @focus="isInputFocused = true"
           @keydown="handleKeydown"
         />
       </div>

app/components/ColumnPicker.vue

@@ -157,11 +157,9 @@ function getSortKeyLabelKey(key: SortKey): string {
 
       <div class="flex-1" />
 
-      <div
-        class="flex flex-wrap items-center gap-3 sm:justify-end justify-between w-full sm:w-auto"
-      >
+      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
         <!-- Sort controls -->
-        <div class="flex items-center gap-1 shrink-0 order-1 sm:order-1">
+        <div class="flex items-center gap-1 shrink-0">
           <!-- Sort key dropdown -->
           <SelectField
             :label="$t('filters.sort.label')"
@@ -203,29 +201,15 @@ function getSortKeyLabelKey(key: SortKey): string {
         </div>
 
         <!-- View mode toggle - mobile (left side, row 2) -->
-        <div class="flex sm:hidden items-center gap-1 order-2">
-          <ViewModeToggle v-model="viewMode" />
-        </div>
-
-        <!-- Column picker - mobile (right side, row 2) -->
-        <ColumnPicker
-          v-if="viewMode === 'table'"
-          class="flex sm:hidden order-3"
-          :columns="columns"
-          @toggle="emit('toggleColumn', $event)"
-          @reset="emit('resetColumns')"
-        />
-
-        <!-- View mode toggle + Column picker - desktop (right side, row 1) -->
-        <div class="hidden sm:flex items-center gap-1 order-2">
-          <ViewModeToggle v-model="viewMode" />
-
+        <div class="flex flex-row-reverse sm:flex-row items-center gap-1">
           <ColumnPicker
             v-if="viewMode === 'table'"
             :columns="columns"
             @toggle="emit('toggleColumn', $event)"
             @reset="emit('resetColumns')"
           />
+
+          <ViewModeToggle v-model="viewMode" />
         </div>
       </div>
     </div>