From c76cc873fe1255e92308050cb368caf6dd8d6769 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sat, 7 Feb 2026 23:16:19 +0530
Subject: [PATCH 01/21] buttons & links style adjusted

---
 app/assets/main.css                          | 27 +++++++++++++++-----
 app/components/Button/Base.vue               |  7 +++--
 app/components/Button/Group.vue              |  2 +-
 app/components/CallToAction.vue              |  2 +-
 app/components/Header/AccountMenu.client.vue | 12 ++++++---
 app/components/Link/Base.vue                 |  5 ++--
 6 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 2ed934ff8..cc7604dc6 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -186,13 +186,28 @@ body {
   line-height: 1.6;
 }
 
-:focus-visible,
 :-moz-focusring {
-  /* weird Firefox behavior makes it necessary to add `!important` 
-  or otherwise the selector would need to be more specific,
-  which it explicitly should not be. */
-  outline: 2px solid var(--accent) !important;
-  outline-offset: 2px !important;
+  outline: auto;
+}
+
+a {
+  border-radius: 4px;
+}
+
+a:focus-visible,
+button:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+input:focus {
+  border: 1px solid var(--accent);
+}
+
+input[type='text']:focus-visible,
+input[type='search']:focus-visible {
+  outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 0dd928003..53039406d 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -32,14 +32,13 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer inline-flex gap-x-1.5 items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid [transition:all_200ms,border-radius_100ms] disabled:(opacity-40 cursor-not-allowed border-transparent) after:(content-[''] absolute inset-0 rounded-inherit pointer-events-none)"
     :class="{
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(bg-fg text-bg/50))':
+      'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
         variant === 'secondary',
-      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
-        variant === 'primary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
     }"
     :type="props.type"
     :disabled="
diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index f84d8653d..5cdab1dff 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <component
     :is="props.as || 'div'"
-    class="flex items-center shrink-0 ms-auto [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
+    class="flex ms-auto rounded-2xl [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
   >
     <slot />
   </component>
diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
index 3e3f133ad..0ea77aec4 100644
--- a/app/components/CallToAction.vue
+++ b/app/components/CallToAction.vue
@@ -37,7 +37,7 @@ const socialLinks = computed(() => [
       <div
         v-for="link in socialLinks"
         :key="link.id"
-        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
+        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent"
       >
         <h3 class="z-1 flex gap-2">
           <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 470fd4cd2..eeb6602fb 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -225,10 +225,12 @@ function openAuthModal() {
               v-if="!isNpmConnected"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 group flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openConnectorModal"
             >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+              <span
+                class="w-8 h-8 rounded-full bg-bg-muted group-hover:bg-bg-subtle flex items-center justify-center"
+              >
                 <span
                   v-if="isNpmConnecting"
                   class="i-carbon-circle-dash w-4 h-4 text-yellow-500 animate-spin"
@@ -252,10 +254,12 @@ function openAuthModal() {
               v-if="!atprotoUser"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 group flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openAuthModal"
             >
-              <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+              <span
+                class="w-8 h-8 rounded-full bg-bg-muted group-hover:bg-bg-subtle flex items-center justify-center"
+              >
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <div class="flex-1 min-w-0">
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 2c4521e24..5d3de069a 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -81,7 +81,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
       'font-mono border border-border rounded-md transition-all duration-200': isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
-      'bg-transparent text-fg hover:(bg-fg/10) focus-visible:(bg-fg/10)':
+      'text-fg bg-transparent hover:(bg-fg/10 border-fg/10) focus-visible:(bg-fg/10)':
         variant === 'button-secondary',
       'text-bg bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
     }"
@@ -91,6 +91,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   >
     <span
       v-if="classicon"
+      class="text-fg"
       :class="[isButtonSmall ? 'size-3' : 'size-4', classicon]"
       aria-hidden="true"
     />
@@ -108,7 +109,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     />
     <kbd
       v-if="keyshortcut"
-      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs group-hover:text-accent bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ keyshortcut }}

From 9b7add1b33320d0db3ed4cf9a2769ca9ec089241 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 8 Feb 2026 15:11:38 +0530
Subject: [PATCH 02/21] some cleanup

---
 app/assets/main.css             | 11 -----------
 app/components/Button/Base.vue  |  2 +-
 app/components/Button/Group.vue |  2 +-
 app/components/Link/Base.vue    |  7 ++++---
 4 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index cc7604dc6..e6d2c99dc 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -190,17 +190,6 @@ body {
   outline: auto;
 }
 
-a {
-  border-radius: 4px;
-}
-
-a:focus-visible,
-button:focus-visible,
-select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
 input:focus {
   border: 1px solid var(--accent);
 }
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 53039406d..76e0aa5e5 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -32,7 +32,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer inline-flex gap-x-1.5 items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid [transition:all_200ms,border-radius_100ms] disabled:(opacity-40 cursor-not-allowed border-transparent) after:(content-[''] absolute inset-0 rounded-inherit pointer-events-none)"
+    class="group cursor-pointer inline-flex gap-x-1.5 items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid [transition:background-color,color,border,outline_200ms,border-radius_100ms] focus-visible:(outline-2 outline-accent outline-offset-2) after:(content-[''] absolute inset-0 rounded-inherit) disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index 5cdab1dff..538be838b 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <component
     :is="props.as || 'div'"
-    class="flex ms-auto rounded-2xl [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
+    class="flex [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
   >
     <slot />
   </component>
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 5d3de069a..58873d867 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -69,11 +69,12 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
       'text-bg bg-fg': variant === 'button-primary',
       'bg-transparent text-fg': variant === 'button-secondary',
     }"
-    ><slot
-  /></span>
+  >
+    <slot />
+  </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center"
+    class="group inline-flex gap-x-1 items-center justify-center rounded-sm focus-visible:(outline-2 outline-accent)"
     :class="{
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
       'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':

From 881330fbb8d52ad6c51d4272cb49f2f8111c9699 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 8 Feb 2026 16:47:34 +0530
Subject: [PATCH 03/21] =?UTF-8?q?few=20more=20tweaks=20=F0=9F=98=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/main.css                           |  5 +++
 app/components/Button/Base.vue                | 44 +++++++++++--------
 app/components/Link/Base.vue                  | 30 +++++++------
 app/components/Settings/AccentColorPicker.vue |  2 +-
 app/components/Settings/BgThemePicker.vue     |  2 +-
 app/components/Settings/Toggle.client.vue     |  2 +-
 app/pages/settings.vue                        | 16 +++----
 7 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index e6d2c99dc..5803d0a5b 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -199,6 +199,11 @@ input[type='search']:focus-visible {
   outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
 }
 
+select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 /* Reset dd margin (browser default is margin-left: 40px) */
 dd {
   margin: 0;
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 76e0aa5e5..977683da6 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -32,14 +32,8 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer inline-flex gap-x-1.5 items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid [transition:background-color,color,border,outline_200ms,border-radius_100ms] focus-visible:(outline-2 outline-accent outline-offset-2) after:(content-[''] absolute inset-0 rounded-inherit) disabled:(opacity-40 cursor-not-allowed border-transparent)"
-    :class="{
-      'text-sm px-4 py-2': size === 'medium',
-      'text-xs px-2 py-0.5': size === 'small',
-      'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
-        variant === 'secondary',
-      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
-    }"
+    class="rounded-md outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
+    :class="$attrs.class"
     :type="props.type"
     :disabled="
       /**
@@ -53,17 +47,29 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      v-if="classicon"
-      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
-      aria-hidden="true"
-    />
-    <slot />
-    <kbd
-      v-if="keyshortcut"
-      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
-      aria-hidden="true"
+      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md [transition:border-radius_100ms]) active:after:rounded-4xl"
+      :class="{
+        'text-sm px-4 py-2': size === 'medium',
+        'text-xs px-2 py-0.5': size === 'small',
+        'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
+          variant === 'secondary',
+        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+        'opacity-40 cursor-not-allowed border-transparent': disabled,
+      }"
     >
-      {{ keyshortcut }}
-    </kbd>
+      <span
+        v-if="classicon"
+        :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
+        aria-hidden="true"
+      />
+      <slot />
+      <kbd
+        v-if="keyshortcut"
+        class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+        aria-hidden="true"
+      >
+        {{ keyshortcut }}
+      </kbd>
+    </span>
   </button>
 </template>
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 58873d867..83934374c 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -62,7 +62,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   <span
     v-if="disabled"
     :class="{
-      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
+      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border  border-red rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
@@ -74,18 +74,22 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center rounded-sm focus-visible:(outline-2 outline-accent)"
-    :class="{
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
-      'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
-        isLink,
-      'font-mono border border-border rounded-md transition-all duration-200': isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
-      'text-fg bg-transparent hover:(bg-fg/10 border-fg/10) focus-visible:(bg-fg/10)':
-        variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
-    }"
+    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent focus-visible:(outline-2 outline-accent)"
+    :class="[
+      {
+        'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
+          !isLinkAnchor && isLink,
+        'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+          isLink,
+        'font-mono border border-solid border-transparent rounded-md transition-all duration-200':
+          isButton,
+        'text-sm px-4 py-2': isButtonMedium,
+        'text-xs px-2 py-0.5': isButtonSmall,
+        'text-fg bg-transparent hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
+        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
+      },
+      $attrs.class,
+    ]"
     :to="to"
     :aria-keyshortcuts="keyshortcut"
     :target="isLinkExternal ? '_blank' : undefined"
diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
index ad650442a..6489e398b 100644
--- a/app/components/Settings/AccentColorPicker.vue
+++ b/app/components/Settings/AccentColorPicker.vue
@@ -17,7 +17,7 @@ onPrehydrate(el => {
 
 <template>
   <fieldset
-    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-2 outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
     <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
     <label
diff --git a/app/components/Settings/BgThemePicker.vue b/app/components/Settings/BgThemePicker.vue
index fa7bd90e6..44c6abcc3 100644
--- a/app/components/Settings/BgThemePicker.vue
+++ b/app/components/Settings/BgThemePicker.vue
@@ -15,7 +15,7 @@ onPrehydrate(el => {
 
 <template>
   <fieldset
-    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-2 outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
   >
     <legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
     <label
diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 4a5905e1e..913747ebd 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -23,7 +23,7 @@ const checked = defineModel<boolean>({
       {{ label }}
     </span>
     <span
-      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
+      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-2 outline-accent/70 outline-offset-2 outline-solid)"
       :class="
         checked
           ? 'bg-accent border-accent group-hover:bg-accent/80'
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 33e76be99..3971997d8 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -50,7 +50,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
             @click="router.back()"
             v-show="router.options.history.state.back !== null"
           >
@@ -162,7 +162,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 <select
                   id="language-select"
                   :value="locale"
-                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
+                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
                   @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
                 >
                   <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
@@ -190,15 +190,13 @@ const setLocale: typeof setNuxti18nLocale = locale => {
 
             <!-- Simple help link for source locale -->
             <template v-else>
-              <a
-                href="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-sm text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
+              <LinkBase
+                classicon="i-carbon:logo-github"
+                class="font-sans"
+                to="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
               >
-                <span class="i-carbon:logo-github w-4 h-4" aria-hidden="true" />
                 {{ $t('settings.help_translate') }}
-              </a>
+              </LinkBase>
             </template>
           </div>
         </section>

From 558bcad965b7e1eceede9f7074c7fda907d351ea Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 8 Feb 2026 16:57:17 +0530
Subject: [PATCH 04/21] fix: rounded on  focus-visible

---
 app/components/Button/Base.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 977683da6..fcc832fec 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -32,7 +32,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="rounded-md outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
+    class="rounded-md outline-none group"
     :class="$attrs.class"
     :type="props.type"
     :disabled="
@@ -47,7 +47,7 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md [transition:border-radius_100ms]) active:after:rounded-4xl"
+      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
       :class="{
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',

From 5bc5e5a629a875d6f384a82c1e0773c02942b95e Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 8 Feb 2026 17:05:58 +0530
Subject: [PATCH 05/21] =?UTF-8?q?for=20thasmo=20=F0=9F=AB=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/Button/Base.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index fcc832fec..89341a595 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -47,7 +47,7 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
+      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md hover:rounded-xl active:rounded-xl font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
       :class="{
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',

From 8fedbdd1c35ce6bc8d2f9b47be7c09c4b016df3b Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 8 Feb 2026 17:15:59 +0530
Subject: [PATCH 06/21] class as props

---
 app/components/Button/Base.vue | 8 +++++---
 app/components/Link/Base.vue   | 5 +++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 89341a595..8e6433f4a 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -4,6 +4,7 @@ const props = withDefaults(
     'disabled'?: boolean
     'type'?: 'button' | 'submit'
     'variant'?: 'primary' | 'secondary'
+    'class'?: string
     'size'?: 'small' | 'medium'
     'keyshortcut'?: string
 
@@ -33,7 +34,7 @@ defineExpose({
   <button
     ref="el"
     class="rounded-md outline-none group"
-    :class="$attrs.class"
+    :class="props.class"
     :type="props.type"
     :disabled="
       /**
@@ -47,13 +48,14 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md hover:rounded-xl active:rounded-xl font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
+      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
       :class="{
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',
         'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
           variant === 'secondary',
-        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+        'text-bg bg-fg border-fg hover:(bg-fg/80 rounded-xl) active:rounded-xl':
+          variant === 'primary',
         'opacity-40 cursor-not-allowed border-transparent': disabled,
       }"
     >
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 83934374c..b461c0f36 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -12,6 +12,7 @@ const props = withDefaults(
       'type'?: never
       'variant'?: 'button-primary' | 'button-secondary' | 'link'
       'size'?: 'small' | 'medium'
+      'class'?: string
 
       'keyshortcut'?: string
 
@@ -62,7 +63,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   <span
     v-if="disabled"
     :class="{
-      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border  border-red rounded-md':
+      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border  rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
@@ -88,7 +89,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
         'text-fg bg-transparent hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
         'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
       },
-      $attrs.class,
+      props.class,
     ]"
     :to="to"
     :aria-keyshortcuts="keyshortcut"

From 1a85202c84204f26bcb5a11ca7282a324f9e24c5 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 8 Feb 2026 17:36:55 +0530
Subject: [PATCH 07/21] on active scale down for feedback

---
 app/components/Button/Base.vue | 2 +-
 app/components/Link/Base.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 8e6433f4a..17604eed0 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -48,7 +48,7 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
+      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
       :class="{
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index b461c0f36..309605f99 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -75,7 +75,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent focus-visible:(outline-2 outline-accent)"
+    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
     :class="[
       {
         'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':

From dd19dda7d5ff26c452886bcf8fbf50f93dbed4c2 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 8 Feb 2026 18:00:21 +0530
Subject: [PATCH 08/21] border for secondary buttons

---
 app/components/AppHeader.vue   | 2 +-
 app/components/Button/Base.vue | 5 ++---
 app/components/Link/Base.vue   | 7 +++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 01390c82e..5437fefaf 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -151,7 +151,7 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="hidden sm:flex flex-shrink-0">
+      <div class="hidden sm:flex flex-shrink-0 space-x-0.5 md:space-x-2">
         <!-- Desktop: Compare link -->
         <LinkBase
           class="border-none"
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 17604eed0..534dd5425 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -48,12 +48,11 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
+      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
       :class="{
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',
-        'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
-          variant === 'secondary',
+        'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
         'text-bg bg-fg border-fg hover:(bg-fg/80 rounded-xl) active:rounded-xl':
           variant === 'primary',
         'opacity-40 cursor-not-allowed border-transparent': disabled,
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 309605f99..daaba153e 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -75,18 +75,17 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
+    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-offset-2 outline-accent)"
     :class="[
       {
         'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
           !isLinkAnchor && isLink,
         'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
           isLink,
-        'font-mono border border-solid border-transparent rounded-md transition-all duration-200':
-          isButton,
+        'border border-solid border-border rounded-md transition-all duration-200': isButton,
         'text-sm px-4 py-2': isButtonMedium,
         'text-xs px-2 py-0.5': isButtonSmall,
-        'text-fg bg-transparent hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
+        'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
         'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
       },
       props.class,

From af5b9772ec221470f8727e452613b4f17edaf1a6 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Sun, 8 Feb 2026 23:03:48 +0530
Subject: [PATCH 09/21] missing & clipping outlines

---
 app/assets/main.css                      | 4 ++++
 app/components/AppHeader.vue             | 4 ++--
 app/components/Button/Base.vue           | 3 +--
 app/components/Button/Group.vue          | 2 +-
 app/components/CollapsibleSection.vue    | 2 +-
 app/components/Header/SearchBox.vue      | 5 +++--
 app/components/LicenseDisplay.vue        | 2 +-
 app/components/Link/Base.vue             | 9 +++++----
 app/components/Package/ManagerSelect.vue | 2 +-
 app/components/Package/Versions.vue      | 6 +++---
 app/components/Tag/Static.vue            | 2 +-
 app/components/Terminal/Install.vue      | 2 +-
 app/pages/package/[[org]]/[name].vue     | 2 +-
 13 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 5803d0a5b..1d31cb53f 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -199,6 +199,10 @@ input[type='search']:focus-visible {
   outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
 }
 
+/* since we haven't migrated all focus-visible states
+we have to keep this otherwise users will get
+inconsistent default outlines */
+a:focus-visible,
 select:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 5437fefaf..396d9b104 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -97,7 +97,7 @@ onKeyStroke(
       <button
         v-if="!isSearchExpanded && !isOnHomePage"
         type="button"
-        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded"
+        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded focus-visible(outline-2 outline-accent)"
         :aria-label="$t('nav.tap_to_search')"
         @click="expandMobileSearch"
       >
@@ -111,7 +111,7 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded focus-visible:(outline-2 outline-accent)"
         >
           <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 534dd5425..2bc1bc062 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -53,8 +53,7 @@ defineExpose({
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',
         'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
-        'text-bg bg-fg border-fg hover:(bg-fg/80 rounded-xl) active:rounded-xl':
-          variant === 'primary',
+        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
         'opacity-40 cursor-not-allowed border-transparent': disabled,
       }"
     >
diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index 538be838b..88c86ece6 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <component
     :is="props.as || 'div'"
-    class="flex [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
+    class="flex [&>*]:rounded-e-none [&>*:last-child]:rounded-e-md [&>*]:rounded-s-none [&>*:first-child]:rounded-s-md [&>*:not(:first-child)]:border-s-0 [&>*:focus-visible]:relative [&>*:focus-visible]:z-10"
   >
     <slot />
   </component>
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index bf48c9eb0..f35cd594e 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -85,7 +85,7 @@ useHead({
         <button
           :id="buttonId"
           type="button"
-          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-accent/70 rounded"
+          class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:(outline-2 outline-offset-2 outline-accent) rounded"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
           :aria-label="ariaLabel"
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index b99fa79cb..dfbc6af70 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -109,7 +109,8 @@ defineExpose({ focus })
       <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
         <div class="search-box relative flex items-center">
           <span
-            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"
+            aria-hidden="true"
+            class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
           >
             /
           </span>
@@ -126,7 +127,7 @@ defineExpose({ focus })
             @focus="handleSearchFocus"
             @blur="handleSearchBlur"
           />
-          <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
+          <button type="submit" class="sr-only" tabindex="-1">{{ $t('search.button') }}</button>
         </div>
       </div>
     </form>
diff --git a/app/components/LicenseDisplay.vue b/app/components/LicenseDisplay.vue
index 512248c87..bc384d2f1 100644
--- a/app/components/LicenseDisplay.vue
+++ b/app/components/LicenseDisplay.vue
@@ -18,7 +18,7 @@ const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'lic
         :href="token.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="link-subtle"
+        class="focus-visible:(outline-2 outline-accent) rounded-sm"
         :title="$t('package.license.view_spdx')"
       >
         {{ token.value }}
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index daaba153e..86711b62b 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -63,7 +63,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   <span
     v-if="disabled"
     :class="{
-      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border  rounded-md':
+      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
@@ -75,14 +75,15 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-offset-2 outline-accent)"
+    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
     :class="[
       {
         'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
           !isLinkAnchor && isLink,
-        'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+        'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent outline-offset-2 text-accent) transition-colors duration-200':
           isLink,
-        'border border-solid border-border rounded-md transition-all duration-200': isButton,
+        'border border-solid border-border rounded-md transition-all duration-200 focus-visible:outline-offset-2':
+          isButton,
         'text-sm px-4 py-2': isButtonMedium,
         'text-xs px-2 py-0.5': isButtonSmall,
         'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index 34203cd35..a593c79f6 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -88,7 +88,7 @@ function handleKeydown(event: KeyboardEvent) {
   <button
     ref="triggerRef"
     type="button"
-    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
+    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:(outline-2 outline-accent outline-offset-2) hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.get_started.pm_label')"
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 7c753cf19..58b0bfb83 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -324,7 +324,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <button
             v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
             type="button"
-            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
+            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm focus-visible:(outline-2 outline-offset-2 outline-accent)"
             :aria-expanded="expandedTags.has(row.tag)"
             :aria-label="
               expandedTags.has(row.tag)
@@ -357,7 +357,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div>
                 <LinkBase
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="text-sm"
+                  class="text-sm focus-visible:outline-none"
                   :class="
                     row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                   "
@@ -465,7 +465,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <div class="p-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-start rounded-sm"
+          class="flex items-center gap-2 text-start rounded-sm focus-visible:(outline-2 outline-offset-2 outline-accent)"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
             otherVersionsExpanded
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index a1eb9eb9d..bfc8d209e 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
 <template>
   <component
     :is="as"
-    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
+    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5 focus-visible:(outline-2 outline-accent)"
     :class="{ 'opacity-40': variant === 'ghost' }"
   >
     <span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 5fe249ea0..80a52738a 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -123,7 +123,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           >
           <button
             type="button"
-            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+            class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-98 focus-visible:(opacity-100 outline-2 outline-accent) select-none"
             :aria-label="$t('package.get_started.copy_command')"
             @click.stop="copyInstallCommand"
           >
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index f84fc258d..e8ef680e9 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -542,7 +542,7 @@ onKeyStroke(
             <button
               type="button"
               @click="copyPkgName()"
-              class="copy-button absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
+              class="copy-button absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:(opacity-100 translate-y-0 pointer-events-auto) focus-visible:(outline-2 outline-accent pointer-events-auto translate-y-0 opacity-100)"
               :class="
                 copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border'
               "

From 49195a6ae20260eab66b644948a8ca10f7a127c3 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 9 Feb 2026 10:25:24 +0530
Subject: [PATCH 10/21] outlines in compare, readme, settings

---
 app/assets/main.css                         |  9 ---------
 app/components/CollapsibleSection.vue       |  2 +-
 app/components/Compare/FacetSelector.vue    |  2 +-
 app/components/Compare/PackageSelector.vue  |  2 +-
 app/components/PackageProvenanceSection.vue | 10 +++++-----
 app/components/Readme.vue                   |  7 +++++++
 app/pages/compare.vue                       |  2 +-
 app/pages/settings.vue                      |  4 ++--
 8 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 1d31cb53f..e6d2c99dc 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -199,15 +199,6 @@ input[type='search']:focus-visible {
   outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
 }
 
-/* since we haven't migrated all focus-visible states
-we have to keep this otherwise users will get
-inconsistent default outlines */
-a:focus-visible,
-select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
 /* Reset dd margin (browser default is margin-left: 40px) */
 dd {
   margin: 0;
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index f35cd594e..a90170ca4 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -106,7 +106,7 @@ useHead({
 
         <a
           :href="`#${id}`"
-          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+          class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline rounded-sm outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
         >
           <span v-if="icon" :class="icon" aria-hidden="true" />
           {{ title }}
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index a5f0f1fab..701423938 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -77,7 +77,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :disabled="facet.comingSoon"
           :aria-pressed="isFacetSelected(facet.id)"
           :aria-label="facet.label"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-accent/70"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:(outline-2 outline-accent outline-offset-2)"
           :class="
             facet.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
index d81fa964b..9803a7d0d 100644
--- a/app/components/Compare/PackageSelector.vue
+++ b/app/components/Compare/PackageSelector.vue
@@ -147,7 +147,7 @@ function handleBlur() {
               ? $t('compare.selector.search_first')
               : $t('compare.selector.search_add')
           "
-          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
+          class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent outline-transparent focus-visible:(outline-2 outline-accent/70)"
           aria-autocomplete="list"
           @focus="isInputFocused = true"
           @blur="handleBlur"
diff --git a/app/components/PackageProvenanceSection.vue b/app/components/PackageProvenanceSection.vue
index 27cbeb5ea..54855b655 100644
--- a/app/components/PackageProvenanceSection.vue
+++ b/app/components/PackageProvenanceSection.vue
@@ -11,7 +11,7 @@ defineProps<{
     <h2 id="provenance-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
       <a
         href="#provenance"
-        class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+        class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
       >
         {{ $t('package.provenance_section.title') }}
         <span
@@ -40,7 +40,7 @@ defineProps<{
           :href="details.buildSummaryUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="link text-sm text-fg-muted inline-flex"
+          class="link text-sm text-fg-muted inline-flex rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
         >
           {{ $t('package.provenance_section.view_build_summary') }}
         </a>
@@ -56,7 +56,7 @@ defineProps<{
               :href="details.sourceCommitUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="link font-mono text-sm block min-w-0 truncate"
+              class="link font-mono text-sm block min-w-0 truncate rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
               :title="details.sourceCommitSha ?? details.sourceCommitUrl"
             >
               {{
@@ -77,7 +77,7 @@ defineProps<{
               :href="details.buildFileUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="link font-mono text-sm block min-w-0 break-words"
+              class="link font-mono text-sm block min-w-0 break-words rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
               :title="details.buildFilePath ?? details.buildFileUrl"
             >
               {{ details.buildFilePath ?? details.buildFileUrl }}
@@ -94,7 +94,7 @@ defineProps<{
               :href="details.publicLedgerUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="link text-sm inline-flex"
+              class="link text-sm inline-flex rounded-sm focus-visible:(outline-2 outline-accent outline-offset-2)"
             >
               {{ $t('package.provenance_section.transparency_log_entry') }}
             </a>
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
index 38f76bee7..273659123 100644
--- a/app/components/Readme.vue
+++ b/app/components/Readme.vue
@@ -145,6 +145,13 @@ function handleClick(event: MouseEvent) {
   text-decoration-color: var(--accent);
 }
 
+.readme :deep(a:focus-visible),
+.readme :deep(button:focus-visible) {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 .readme :deep(code) {
   @apply font-mono;
   font-size: 0.875em;
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index b24a9ff61..c91793af2 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -116,7 +116,7 @@ useSeoMeta({
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
             @click="router.back()"
             v-show="router.options.history.state.back !== null"
           >
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 3971997d8..471c82b48 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -50,7 +50,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0 -mx-1.5 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
             @click="router.back()"
             v-show="router.options.history.state.back !== null"
           >
@@ -79,7 +79,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <select
                 id="theme-select"
                 :value="colorMode.preference"
-                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
+                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle focus-visible:(outline-2 outline-accent outline-offset-2)"
                 @change="
                   colorMode.preference = ($event.target as HTMLSelectElement).value as
                     | 'light'

From faabc73e2788a8942128790fbce387bae19ca37a Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 9 Feb 2026 10:29:10 +0530
Subject: [PATCH 11/21] remove class from props

---
 app/components/Button/Base.vue |  2 --
 app/components/Link/Base.vue   | 28 +++++++++++-----------------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 2bc1bc062..8dc368478 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -4,7 +4,6 @@ const props = withDefaults(
     'disabled'?: boolean
     'type'?: 'button' | 'submit'
     'variant'?: 'primary' | 'secondary'
-    'class'?: string
     'size'?: 'small' | 'medium'
     'keyshortcut'?: string
 
@@ -34,7 +33,6 @@ defineExpose({
   <button
     ref="el"
     class="rounded-md outline-none group"
-    :class="props.class"
     :type="props.type"
     :disabled="
       /**
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 86711b62b..b3fcde9a9 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -12,8 +12,6 @@ const props = withDefaults(
       'type'?: never
       'variant'?: 'button-primary' | 'button-secondary' | 'link'
       'size'?: 'small' | 'medium'
-      'class'?: string
-
       'keyshortcut'?: string
 
       /**
@@ -76,21 +74,17 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   <NuxtLink
     v-else
     class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
-    :class="[
-      {
-        'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
-          !isLinkAnchor && isLink,
-        'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent outline-offset-2 text-accent) transition-colors duration-200':
-          isLink,
-        'border border-solid border-border rounded-md transition-all duration-200 focus-visible:outline-offset-2':
-          isButton,
-        'text-sm px-4 py-2': isButtonMedium,
-        'text-xs px-2 py-0.5': isButtonSmall,
-        'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
-        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
-      },
-      props.class,
-    ]"
+    :class="{
+      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
+      'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent outline-offset-2 text-accent) transition-colors duration-200':
+        isLink,
+      'border border-solid border-border rounded-md transition-all duration-200 focus-visible:outline-offset-2':
+        isButton,
+      'text-sm px-4 py-2': isButtonMedium,
+      'text-xs px-2 py-0.5': isButtonSmall,
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
+    }"
     :to="to"
     :aria-keyshortcuts="keyshortcut"
     :target="isLinkExternal ? '_blank' : undefined"

From 67858b5ef8bec32d4cb34d10b964f6cddfbdd3ad Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 9 Feb 2026 10:38:00 +0530
Subject: [PATCH 12/21] upstream changes for button

---
 app/components/Button/Base.vue | 65 +++++++++++++++-------------------
 1 file changed, 29 insertions(+), 36 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 8dc368478..b588f067b 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    'disabled'?: boolean
-    'type'?: 'button' | 'submit'
-    'variant'?: 'primary' | 'secondary'
-    'size'?: 'small' | 'medium'
-    'keyshortcut'?: string
-
-    /**
-     * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
-     */
-    'aria-keyshortcuts'?: never
-
-    'classicon'?: string
+    disabled?: boolean
+    type?: 'button' | 'submit'
+    variant?: 'primary' | 'secondary'
+    size?: 'small' | 'medium'
+    classicon?: string
+    ariaKeyshortcuts?: string
+    block?: boolean
   }>(),
   {
     type: 'button',
@@ -32,7 +27,16 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="rounded-md outline-none group"
+    class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
+    :class="{
+      'inline-flex': !block,
+      'flex': block,
+      'text-sm px-4 py-2': size === 'medium',
+      'text-xs px-2 py-0.5': size === 'small',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+      'opacity-40 cursor-not-allowed border-transparent': disabled,
+    }"
     :type="props.type"
     :disabled="
       /**
@@ -43,31 +47,20 @@ defineExpose({
        */
       disabled ? true : undefined
     "
-    :aria-keyshortcuts="keyshortcut"
+    :aria-keyshortcuts="ariaKeyshortcuts"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
-      :class="{
-        'text-sm px-4 py-2': size === 'medium',
-        'text-xs px-2 py-0.5': size === 'small',
-        'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
-        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
-        'opacity-40 cursor-not-allowed border-transparent': disabled,
-      }"
+      v-if="classicon"
+      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
+      aria-hidden="true"
+    />
+    <slot />
+    <kbd
+      v-if="ariaKeyshortcuts"
+      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      aria-hidden="true"
     >
-      <span
-        v-if="classicon"
-        :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
-        aria-hidden="true"
-      />
-      <slot />
-      <kbd
-        v-if="keyshortcut"
-        class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
-        aria-hidden="true"
-      >
-        {{ keyshortcut }}
-      </kbd>
-    </span>
+      {{ ariaKeyshortcuts }}
+    </kbd>
   </button>
 </template>

From 24423829ad3ba444e079b6df627a17c8efba4af5 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 9 Feb 2026 11:22:36 +0530
Subject: [PATCH 13/21] global css cleanup

---
 app/assets/main.css                            | 9 ---------
 app/components/Package/Dependencies.vue        | 4 ++--
 app/components/Package/WeeklyDownloadStats.vue | 1 -
 app/pages/package/[[org]]/[name].vue           | 2 +-
 4 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index e6d2c99dc..6550f5170 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -190,15 +190,6 @@ body {
   outline: auto;
 }
 
-input:focus {
-  border: 1px solid var(--accent);
-}
-
-input[type='text']:focus-visible,
-input[type='search']:focus-visible {
-  outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
-}
-
 /* Reset dd margin (browser default is margin-left: 40px) */
 dd {
   margin: 0;
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index bbbeb9a5e..0d43b7087 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -75,7 +75,7 @@ const sortedOptionalDependencies = computed(() => {
       id="dependencies"
       :title="$t('package.dependencies.title', { count: sortedDependencies.length })"
     >
-      <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
+      <ul class="space-y-1 list-none m-0 px-1" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
@@ -133,7 +133,7 @@ const sortedOptionalDependencies = computed(() => {
       <button
         v-if="sortedDependencies.length > 10 && !depsExpanded"
         type="button"
-        class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
+        class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:(outline-2 outline-offset-2 outline-accent)"
         @click="depsExpanded = true"
       >
         {{
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 720b3213b..0b32c201c 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -214,7 +214,6 @@ const config = computed(() => {
         <ButtonBase
           type="button"
           @click="openChartModal"
-          class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
           :title="$t('package.downloads.analyze')"
           classicon="i-carbon:data-analytics"
         >
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index e8ef680e9..01a4cc4f2 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1147,7 +1147,7 @@ onKeyStroke(
       <div class="area-sidebar">
         <!-- Sidebar -->
         <div
-          class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)]) pt-1"
+          class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)]) pt-1 outline-none"
         >
           <!-- Team access controls (for scoped packages when connected) -->
           <ClientOnly>

From 5488d396d42dfeb6d0d78c1efa689d8ce9608e73 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 9 Feb 2026 12:21:11 +0530
Subject: [PATCH 14/21] fix: homepage layout shift

---
 app/components/AppHeader.vue                 | 12 +-----------
 app/components/Header/AccountMenu.client.vue |  3 +--
 app/components/Header/AccountMenu.server.vue |  4 ++--
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 14a7fcacb..2c847975b 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -252,17 +252,7 @@ onKeyStroke(
 
       <!-- End: Desktop nav items + Mobile menu button -->
       <div class="hidden sm:flex flex-shrink-0 space-x-0.5 md:space-x-2">
-        <!-- Desktop: Compare link -->
-        <LinkBase
-          class="border-none"
-          variant="button-secondary"
-          :to="{ name: 'compare' }"
-          keyshortcut="c"
-        >
-          {{ $t('nav.compare') }}
-        </LinkBase>
-
-        <!-- Desktop: Settings link -->
+        <!-- Desktop links -->
         <LinkBase
           v-for="link in desktopLinks"
           :key="link.name"
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 644299e31..7843aa390 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -62,7 +62,6 @@ function openAuthModal() {
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
-      class="border-none"
     >
       <!-- Stacked avatars when connected -->
       <div
@@ -106,7 +105,7 @@ function openAuthModal() {
       </div>
 
       <!-- "connect" text when not connected -->
-      <span v-if="!hasAnyConnection" class="font-mono text-sm">
+      <span v-if="!hasAnyConnection" class="font-sans text-sm">
         {{ $t('account_menu.connect') }}
       </span>
 
diff --git a/app/components/Header/AccountMenu.server.vue b/app/components/Header/AccountMenu.server.vue
index 608b6c13f..3d4107e87 100644
--- a/app/components/Header/AccountMenu.server.vue
+++ b/app/components/Header/AccountMenu.server.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="relative flex min-w-24 justify-end">
     <div
-      class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg border-none"
+      class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg border border-border"
     >
-      <span class="font-mono text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
+      <span class="font-sans text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
       <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
     </div>
   </div>

From f0443a07beda4cb5f398a83a39f050baeba9b49a Mon Sep 17 00:00:00 2001
From: Jaydip Sanghani <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 9 Feb 2026 13:20:08 +0530
Subject: [PATCH 15/21] removed redundant class

---
 app/pages/compare.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index ec669c1ed..10becef6f 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -117,7 +117,7 @@ useSeoMeta({
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
             @click="router.back()"
             v-if="canGoBack"
           >

From aa3d772759162b955c62f8b59a263da0ac0e492e Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Mon, 9 Feb 2026 18:05:54 +0530
Subject: [PATCH 16/21] fixes as per suggestions

---
 app/components/Button/Base.vue           | 2 +-
 app/components/Compare/FacetSelector.vue | 2 +-
 app/components/Link/Base.vue             | 4 ++--
 app/components/Package/ManagerSelect.vue | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 1b01a739b..65f0a567f 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -27,7 +27,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
+    class="group cursor-pointer gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2) disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index 692ad1925..9008a63d0 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -69,7 +69,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :disabled="facet.comingSoon"
           :aria-pressed="isFacetSelected(facet.id)"
           :aria-label="facet.label"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:(outline-2 outline-accent outline-offset-2)"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200"
           :class="
             facet.comingSoon
               ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index f4328b2b8..dafcfd3b9 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -75,14 +75,14 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
   </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
+    class="group cursor-pointer inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
     :class="{
       'flex': block,
       'inline-flex': !block,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
       'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent outline-offset-2 text-accent) transition-colors duration-200':
         isLink,
-      'border border-solid border-border rounded-md transition-all duration-200 focus-visible:outline-offset-2':
+      'justify-center border border-solid border-border rounded-md transition-all duration-200 focus-visible:outline-offset-2':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index e8c770735..0d6e81cc0 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -150,7 +150,7 @@ function handleKeydown(event: KeyboardEvent) {
           :key="pm.id"
           role="option"
           :aria-selected="selectedPM === pm.id"
-          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs transition-colors duration-150"
+          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs transition-color cursor-pointer duration-150"
           :class="[
             selectedPM === pm.id ? 'text-fg' : 'text-fg-subtle',
             highlightedIndex === index ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',

From dc748eda349f137b079501093f231b53c4732f0b Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Tue, 10 Feb 2026 11:50:55 +0530
Subject: [PATCH 17/21] styling fixes

---
 app/app.vue                          | 3 ++-
 app/components/AppFooter.vue         | 2 +-
 app/components/Button/Base.vue       | 4 ++--
 app/components/Button/Group.vue      | 2 +-
 app/components/Link/Base.vue         | 9 ++++-----
 app/components/Tag/Static.vue        | 2 +-
 app/pages/package/[[org]]/[name].vue | 8 +++-----
 7 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 2b0a58740..f1edafa6e 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -142,11 +142,12 @@ if (import.meta.client) {
 .skip-link {
   position: fixed;
   top: -100%;
+  left: 0.25rem;
   z-index: 100;
 }
 
 .skip-link:focus {
-  top: 0;
+  top: 0.25rem;
 }
 </style>
 
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index b4ab45568..c1dfd77cd 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -38,7 +38,7 @@ const showModal = () => modalRef.value?.showModal?.()
 
           <button
             type="button"
-            class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+            class="group cursor-pointer gap-x-1 items-center rounded-sm font-mono text-fg hover:decoration-accent outline-transparent active:scale-[0.98] underline underline-offset-[0.2rem] decoration-1 decoration-fg/30 outline-2 outline-transparent focus-visible:(outline-offset-2 outline-accent text-accent) transition-colors duration-200"
             @click.prevent="showModal"
             aria-haspopup="dialog"
           >
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 65f0a567f..80b13b9b2 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -27,14 +27,14 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2) disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-colors duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2) disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
-      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
       'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
       'opacity-40 cursor-not-allowed border-transparent': disabled,
     }"
     :type="props.type"
diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index 88c86ece6..c1d398efa 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <component
     :is="props.as || 'div'"
-    class="flex [&>*]:rounded-e-none [&>*:last-child]:rounded-e-md [&>*]:rounded-s-none [&>*:first-child]:rounded-s-md [&>*:not(:first-child)]:border-s-0 [&>*:focus-visible]:relative [&>*:focus-visible]:z-10"
+    class="inline-flex items-stretch [&>*:not(:first-child)]:(-ml-px rounded-is-none) [&>*:not(:last-child)]:rounded-ie-none [&>*:focus-visible]:(relative z-40)"
   >
     <slot />
   </component>
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index dafcfd3b9..2a9a91f96 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -75,19 +75,18 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
   </span>
   <NuxtLink
     v-else
-    class="group cursor-pointer inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
+    class="group cursor-pointer gap-x-1.5 items-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent) transition-colors duration-200"
     :class="{
       'flex': block,
       'inline-flex': !block,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
-      'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent outline-offset-2 text-accent) transition-colors duration-200':
+      'font-mono text-fg hover:(decoration-accent) focus-visible:(text-accent outline-offset-2)':
         isLink,
-      'justify-center border border-solid border-border rounded-md transition-all duration-200 focus-visible:outline-offset-2':
-        isButton,
+      'justify-center border border-solid border-border rounded-md  outline-offset-2': isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
-      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
       'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
     }"
     :to="to"
     :aria-keyshortcuts="ariaKeyshortcuts"
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index 93e687342..b12027641 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
 <template>
   <component
     :is="as"
-    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5 focus-visible:(outline-2 outline-accent)"
+    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5 outline-none"
     :class="{ 'opacity-40': variant === 'ghost' }"
   >
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 9ac936760..9019ef014 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -545,10 +545,8 @@ onKeyStroke(
             <button
               type="button"
               @click="copyPkgName()"
-              class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:(opacity-100 translate-y-0 pointer-events-auto) focus-visible:(outline-2 outline-accent pointer-events-auto translate-y-0 opacity-100)"
-              :class="
-                copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border'
-              "
+              class="absolute z-20 inset-is-0 top-full inline-flex items-center bg-bg gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:(opacity-100 translate-y-0 pointer-events-auto) focus-visible:(outline-2 outline-accent pointer-events-auto translate-y-0)"
+              :class="copiedPkgName ? 'text-accent bg-accent/10' : 'text-fg-muted border-border'"
               :aria-label="copiedPkgName ? $t('common.copied') : $t('package.copy_name')"
             >
               <span
@@ -610,7 +608,7 @@ onKeyStroke(
             v-if="resolvedVersion"
             as="nav"
             :aria-label="$t('package.navigation')"
-            class="hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-50% max-sm:-translate-x-50% max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md"
+            class="ms-auto flex max-sm:(fixed bottom-4 left-1/2 -translate-x-1/2 z-40 backdrop-blur-md)"
             :class="$style.packageNav"
           >
             <LinkBase

From 3c003920f5330fb3ad286f34f0de9f1121e57607 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Tue, 10 Feb 2026 11:55:11 +0530
Subject: [PATCH 18/21] use directional class

---
 app/pages/package/[[org]]/[name].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 9019ef014..f1339951e 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -608,7 +608,7 @@ onKeyStroke(
             v-if="resolvedVersion"
             as="nav"
             :aria-label="$t('package.navigation')"
-            class="ms-auto flex max-sm:(fixed bottom-4 left-1/2 -translate-x-1/2 z-40 backdrop-blur-md)"
+            class="ms-auto flex max-sm:(fixed bottom-4 inset-is-1/2 -translate-x-1/2 z-40 backdrop-blur-md)"
             :class="$style.packageNav"
           >
             <LinkBase

From e9b95274250ca31716774fb446da41173ea1c811 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Tue, 10 Feb 2026 12:21:16 +0530
Subject: [PATCH 19/21] fix: build issues

---
 app/components/AppFooter.vue                 | 2 +-
 app/components/Button/Group.vue              | 2 +-
 app/components/Header/AccountMenu.server.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index dcb5af100..6098ab03c 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -25,7 +25,7 @@ const showModal = () => modalRef.value?.showModal?.()
           </LinkBase>
           <button
             type="button"
-            class="group cursor-pointer gap-x-1 items-center rounded-sm font-mono text-fg hover:decoration-accent outline-transparent active:scale-[0.98] underline underline-offset-[0.2rem] decoration-1 decoration-fg/30 outline-2 outline-transparent focus-visible:(outline-offset-2 outline-accent text-accent) transition-colors duration-200"
+            class="group cursor-pointer gap-x-1 items-center rounded-sm font-mono text-fg hover:decoration-accent active:scale-[0.98] underline underline-offset-[0.2rem] decoration-1 decoration-fg/30 outline-2 outline-transparent focus-visible:(outline-offset-2 outline-accent text-accent) transition-colors duration-200"
             @click.prevent="showModal"
             aria-haspopup="dialog"
           >
diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index c1d398efa..1d9eea95b 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 <template>
   <component
     :is="props.as || 'div'"
-    class="inline-flex items-stretch [&>*:not(:first-child)]:(-ml-px rounded-is-none) [&>*:not(:last-child)]:rounded-ie-none [&>*:focus-visible]:(relative z-40)"
+    class="inline-flex items-stretch [&>*:not(:first-child)]:(-ms-px rounded-is-none) [&>*:not(:last-child)]:rounded-ie-none [&>*:focus-visible]:(relative z-40)"
   >
     <slot />
   </component>
diff --git a/app/components/Header/AccountMenu.server.vue b/app/components/Header/AccountMenu.server.vue
index 5972e6324..8a89ca003 100644
--- a/app/components/Header/AccountMenu.server.vue
+++ b/app/components/Header/AccountMenu.server.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative flex min-w-28 justify-end">
     <div
-      class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg border border-border"
+      class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg"
     >
       <span class="font-sans text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
       <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />

From 837c94b91c44d921526160fa2bbf36d440fda366 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Tue, 10 Feb 2026 12:39:43 +0530
Subject: [PATCH 20/21] remove borders from AppHeader

---
 app/components/AppHeader.vue                 |  2 +-
 app/components/Header/AccountMenu.client.vue |  5 +++--
 app/components/Header/AccountMenu.server.vue | 12 +++++-------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 2c847975b..3e420fa8b 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -256,7 +256,7 @@ onKeyStroke(
         <LinkBase
           v-for="link in desktopLinks"
           :key="link.name"
-          class="border-none"
+          class="border-0"
           variant="button-secondary"
           :to="link.to"
           :aria-keyshortcuts="link.keyshortcut"
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 8bce27c2d..3a4fdea8b 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -56,9 +56,10 @@ function openAuthModal() {
 </script>
 
 <template>
-  <div ref="accountMenuRef" class="relative flex min-w-28 justify-end">
+  <div ref="accountMenuRef">
     <ButtonBase
       type="button"
+      class="border-0"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
@@ -136,7 +137,7 @@ function openAuthModal() {
     >
       <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-72 z-50" role="menu">
         <div
-          class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/50 overflow-hidden px-1"
+          class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/10 overflow-hidden px-1"
         >
           <!-- Connected accounts section -->
           <div v-if="hasAnyConnection" class="py-1">
diff --git a/app/components/Header/AccountMenu.server.vue b/app/components/Header/AccountMenu.server.vue
index 8a89ca003..044f77166 100644
--- a/app/components/Header/AccountMenu.server.vue
+++ b/app/components/Header/AccountMenu.server.vue
@@ -1,10 +1,8 @@
 <template>
-  <div class="relative flex min-w-28 justify-end">
-    <div
-      class="inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md text-sm px-4 py-2 bg-transparent text-fg"
-    >
-      <span class="font-sans text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
-      <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
-    </div>
+  <div
+    class="inline-flex gap-x-1.5 items-center justify-center font-mono rounded-md text-sm px-4 py-2 bg-transparent text-fg"
+  >
+    <span class="font-sans text-sm text-fg-muted">{{ $t('account_menu.connect') }}</span>
+    <span class="i-carbon-chevron-down w-3 h-3 text-fg-muted" aria-hidden="true" />
   </div>
 </template>

From 9241f2aab66c951aaf52805111be5caacba633cf Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Tue, 10 Feb 2026 15:41:10 +0530
Subject: [PATCH 21/21] cleanup

---
 app/components/Header/SearchBox.vue |  2 +-
 app/components/Link/Base.vue        | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index 899b99722..a65b1a2d3 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -128,7 +128,7 @@ defineExpose({ focus })
             @blur="isSearchFocused = false"
             size="small"
           />
-          <button type="submit" class="sr-only" tabindex="-1">{{ $t('search.button') }}</button>
+          <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
         </div>
       </div>
     </form>
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 2a9a91f96..11a463614 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -79,14 +79,18 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
     :class="{
       'flex': block,
       'inline-flex': !block,
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
-      'font-mono text-fg hover:(decoration-accent) focus-visible:(text-accent outline-offset-2)':
+      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
+        !isLinkAnchor && isLink && !noUnderline,
+      'justify-start font-mono text-fg hover:(decoration-accent) focus-visible:(text-accent outline-offset-2)':
         isLink,
-      'justify-center border border-solid border-border rounded-md  outline-offset-2': isButton,
+      'justify-center font-mono border border-solid border-border rounded-md  outline-offset-2':
+        isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
-      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
-      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80) aria-[current=true]:(bg-fg/80)':
+        variant === 'button-primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10) aria-[current=true]:(bg-fg/10 border-fg/10)':
+        variant === 'button-secondary',
     }"
     :to="to"
     :aria-keyshortcuts="ariaKeyshortcuts"