From c3aaa42060ecf27b0c937a4e5ca8be6f45b12332 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 00:32:47 +0100
Subject: [PATCH 01/91] fix: invalid link attribute

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

diff --git a/app/components/Tag/Link.vue b/app/components/Tag/Link.vue
index 48a1aba5c..ed36f342c 100644
--- a/app/components/Tag/Link.vue
+++ b/app/components/Tag/Link.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NuxtLinkProps } from '#app'
 
-const { current, ...props } = defineProps<
+const { current, disabled, ...props } = defineProps<
   {
     /** Disabled links will be displayed as plain text */
     disabled?: boolean

From 6c271b3ead8b77c959745d1bbe160d320a98ae93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 02:08:21 +0100
Subject: [PATCH 02/91] fix: cleanup component

---
 app/components/Tag/Link.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/components/Tag/Link.vue b/app/components/Tag/Link.vue
index ed36f342c..1c70fa10f 100644
--- a/app/components/Tag/Link.vue
+++ b/app/components/Tag/Link.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NuxtLinkProps } from '#app'
 
-const { current, disabled, ...props } = defineProps<
+const props = defineProps<
   {
     /** Disabled links will be displayed as plain text */
     disabled?: boolean
@@ -25,12 +25,11 @@ const { current, disabled, ...props } = defineProps<
   <NuxtLink
     v-else
     class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-    :class="{
-      'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)': !current,
-      'bg-fg text-bg border-fg hover:(text-text-bg/50)': current,
-      'opacity-50 cursor-not-allowed': disabled,
-    }"
-    v-bind="props"
+    :class="
+      current
+        ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'
+        : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)'
+    "
   >
     <slot />
   </NuxtLink>

From 59b5c3c7b42a2c239377250e9c1db3f72a9ea3f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 01:13:31 +0100
Subject: [PATCH 03/91] refactor: extract reusable button component

---
 app/components/Button/Base.vue       | 31 ++++++++++++++++++++++++
 app/components/Button/Link.vue       | 35 ++++++++++++++++++++++++++++
 app/components/ColumnPicker.vue      |  7 +++---
 app/pages/@[org].vue                 |  2 +-
 app/pages/package-code/[...path].vue | 16 ++++++-------
 app/pages/package/[...package].vue   |  2 +-
 app/pages/~[username]/index.vue      |  2 +-
 app/pages/~[username]/orgs.vue       |  8 ++++---
 8 files changed, 85 insertions(+), 18 deletions(-)
 create mode 100644 app/components/Button/Base.vue
 create mode 100644 app/components/Button/Link.vue

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
new file mode 100644
index 000000000..919082a5e
--- /dev/null
+++ b/app/components/Button/Base.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  disabled?: boolean
+  /**
+   * type should never be used, because this will always be a button.
+   *
+   * If you want a link use `TagLink` instead.
+   *  */
+  type?: never
+}>()
+
+const el = ref<HTMLButtonElement | null>(null)
+
+defineExpose({
+  focus: () => el.value?.focus(),
+})
+</script>
+
+<template>
+  <button
+    ref="el"
+    class="btn"
+    :class="{
+      'opacity-50 cursor-not-allowed': disabled,
+    }"
+    type="button"
+    :disabled="disabled ? true : undefined"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/app/components/Button/Link.vue b/app/components/Button/Link.vue
new file mode 100644
index 000000000..50626fd68
--- /dev/null
+++ b/app/components/Button/Link.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NuxtLinkProps } from '#app'
+
+const props = defineProps<
+  {
+    /** Disabled links will be displayed as plain text */
+    disabled?: boolean
+    /**
+     * `type` should never be used, because this will always be a link.
+     *
+     * If you want a button use `TagButton` instead.
+     * */
+    type?: never
+  } &
+    /** This makes sure the link always has either `to` or `href` */
+    (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
+    NuxtLinkProps
+>()
+</script>
+
+<template>
+  <!-- This is only a placeholder implementation yet. It will probably need some additional styling, but note: A disabled link is just text. -->
+  <span v-if="disabled" class="opacity-50"><slot /></span>
+  <NuxtLink
+    v-else
+    class="btn"
+    :class="
+      {
+        'opacity-50 cursor-not-allowed': disabled,
+      }
+    "
+  >
+    <slot />
+  </NuxtLink>
+</template>
diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index 6b8c8ea14..37c64e256 100644
--- a/app/components/ColumnPicker.vue
+++ b/app/components/ColumnPicker.vue
@@ -65,10 +65,9 @@ function handleReset() {
 
 <template>
   <div class="relative">
-    <button
+    <ButtonBase
       ref="buttonRef"
-      type="button"
-      class="btn-ghost inline-flex items-center gap-1.5 px-3 py-1.5 border border-border rounded-md hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+      class="inline-flex items-center gap-1.5 px-3 py-1.5 border border-border rounded-md hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       :aria-controls="menuId"
@@ -76,7 +75,7 @@ function handleReset() {
     >
       <span class="i-carbon-column w-4 h-4" aria-hidden="true" />
       <span class="font-mono text-sm">{{ $t('filters.columns.title') }}</span>
-    </button>
+    </ButtonBase>
 
     <Transition name="dropdown">
       <div
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index b4b79fa88..4b9f86b24 100644
--- a/app/pages/@[org].vue
+++ b/app/pages/@[org].vue
@@ -234,7 +234,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
+      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
     </div>
 
     <!-- Empty state -->
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index 9ef07ae6a..2338432bd 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -359,7 +359,7 @@ defineOgImageComponent('Default', {
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
-      <NuxtLink :to="packageRoute()" class="btn">{{ $t('code.go_to_package') }}</NuxtLink>
+      <ButtonLink :to="packageRoute()">{{ $t('code.go_to_package') }}</ButtonLink>
     </div>
 
     <!-- Loading state -->
@@ -371,7 +371,7 @@ defineOgImageComponent('Default', {
     <!-- Error state -->
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
-      <NuxtLink :to="packageRoute(version)" class="btn">{{ $t('code.back_to_package') }}</NuxtLink>
+      <ButtonLink :to="packageRoute(version)">{{ $t('code.back_to_package') }}</ButtonLink>
     </div>
 
     <!-- Main content: file tree + file viewer -->
@@ -472,15 +472,15 @@ defineOgImageComponent('Default', {
           <p class="text-fg-subtle text-sm mb-4">
             {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
           </p>
-          <a
+          <ButtonLink
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
-            class="btn inline-flex items-center gap-2"
+            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
             <span class="i-carbon:launch w-4 h-4" />
-          </a>
+          </ButtonLink>
         </div>
 
         <!-- Loading file content -->
@@ -526,15 +526,15 @@ defineOgImageComponent('Default', {
           <div class="i-carbon:warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
-          <a
+          <ButtonLink
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
-            class="btn inline-flex items-center gap-2"
+            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
             <span class="i-carbon:launch w-4 h-4" />
-          </a>
+          </ButtonLink>
         </div>
 
         <!-- Directory listing (when no file selected or viewing a directory) -->
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 108bb5fc8..d48ed343c 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -1151,7 +1151,7 @@ defineOgImageComponent('Package', {
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
+      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
     </div>
   </main>
 </template>
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 7139d5cda..545d51c98 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -224,7 +224,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
+      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
     </div>
 
     <!-- Package list -->
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 5cad2bba4..7d355e595 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -81,6 +81,8 @@ async function loadOrgs() {
   }
 }
 
+error.value = $t('header.orgs_dropdown.error')
+
 // Load on mount and when connection status changes
 watch(isOwnProfile, loadOrgs, { immediate: true })
 
@@ -154,9 +156,9 @@ defineOgImageComponent('Default', {
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
         <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
-        <NuxtLink :to="`/~${npmUser}/orgs`" class="btn mt-4">{{
+        <ButtonLink :to="`/~${npmUser}/orgs`" class="mt-4">{{
           $t('user.orgs_page.view_your_orgs')
-        }}</NuxtLink>
+        }}</ButtonLink>
       </div>
 
       <!-- Loading state -->
@@ -165,7 +167,7 @@ defineOgImageComponent('Default', {
       <!-- Error state -->
       <div v-else-if="error" role="alert" class="py-12 text-center">
         <p class="text-fg-muted mb-4">{{ error }}</p>
-        <button type="button" class="btn" @click="loadOrgs">{{ $t('common.try_again') }}</button>
+        <ButtonBase @click="loadOrgs">{{ $t('common.try_again') }}</ButtonBase>
       </div>
 
       <!-- Empty state -->

From a2872d6b92a3b0dd14f59c49a1006e1461c1f04c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 01:16:17 +0100
Subject: [PATCH 04/91] refactor: remove uno btn shortcut

---
 app/components/Button/Base.vue |  2 +-
 app/components/Button/Link.vue |  2 +-
 uno.config.ts                  | 10 ----------
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 919082a5e..4f3a8b01e 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -19,7 +19,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="btn"
+    class="inline-flex items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md bg-transparent text-fg transition-all duration-200 hover:(bg-fg hover:text-bg border-fg) focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)"
     :class="{
       'opacity-50 cursor-not-allowed': disabled,
     }"
diff --git a/app/components/Button/Link.vue b/app/components/Button/Link.vue
index 50626fd68..3001f4e01 100644
--- a/app/components/Button/Link.vue
+++ b/app/components/Button/Link.vue
@@ -23,7 +23,7 @@ const props = defineProps<
   <span v-if="disabled" class="opacity-50"><slot /></span>
   <NuxtLink
     v-else
-    class="btn"
+    class="inline-flex items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md bg-transparent text-fg transition-all duration-200 hover:(bg-fg hover:text-bg border-fg) focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)"
     :class="
       {
         'opacity-50 cursor-not-allowed': disabled,
diff --git a/uno.config.ts b/uno.config.ts
index f49fd3ab0..04e5ccce6 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -125,16 +125,6 @@ export default defineConfig({
     // Focus states - subtle but accessible
     ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/10 ring-offset-2)'],
 
-    // Buttons
-    [
-      'btn',
-      'inline-flex items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md bg-transparent text-fg transition-all duration-200 hover:(bg-fg hover:text-bg border-fg) focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)',
-    ],
-    [
-      'btn-ghost',
-      'inline-flex items-center justify-center px-3 py-1.5 font-mono text-sm text-fg-muted bg-transparent transition-all duration-200 hover:text-fg focus-ring',
-    ],
-
     // Links
     [
       'link',

From 77c6267a48d7727e4b8d48588344d2d39415f15a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 01:19:19 +0100
Subject: [PATCH 05/91] test: add button tests

---
 test/nuxt/a11y.spec.ts | 50 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 44af085b0..2a1b7a9e5 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -63,6 +63,8 @@ import {
   AppHeader,
   BaseCard,
   BuildEnvironment,
+  ButtonBase,
+  ButtonLink,
   CallToAction,
   CodeDirectoryListing,
   CodeFileTree,
@@ -281,6 +283,25 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('ButtonBase', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(ButtonBase, {
+        slots: { default: 'Button content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for disabled state', async () => {
+      const component = await mountSuspended(ButtonBase, {
+        props: { disabled: true },
+        slots: { default: 'Button content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('TagLink', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TagLink, {
@@ -310,6 +331,35 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('ButtonLink', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(ButtonLink, {
+        props: { href: 'http://example.com' },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it("should have no accessibility violations when it's the current link", async () => {
+      const component = await mountSuspended(ButtonLink, {
+        props: { href: 'http://example.com', current: true },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations when disabled (plain text)', async () => {
+      const component = await mountSuspended(ButtonLink, {
+        props: { href: 'http://example.com', disabled: true },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('TagRadioButton', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TagRadioButton, {

From 45b86a7f2c09b5dfb8d41c5a4653889acc6a7c72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 01:29:57 +0100
Subject: [PATCH 06/91] refactor: change search button to new component

---
 app/components/Button/Base.vue | 35 ++++++++++++++++++++--------------
 app/pages/index.vue            |  7 ++-----
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 4f3a8b01e..c382bb639 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-const props = defineProps<{
-  disabled?: boolean
-  /**
-   * type should never be used, because this will always be a button.
-   *
-   * If you want a link use `TagLink` instead.
-   *  */
-  type?: never
-}>()
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    type?: 'button' | 'submit'
+    variant?: 'primary' | 'secondary'
+  }>(),
+  {
+    type: 'button',
+    variant: 'secondary',
+  },
+)
 
 const el = ref<HTMLButtonElement | null>(null)
 
@@ -19,11 +21,16 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="inline-flex items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md bg-transparent text-fg transition-all duration-200 hover:(bg-fg hover:text-bg border-fg) focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)"
-    :class="{
-      'opacity-50 cursor-not-allowed': disabled,
-    }"
-    type="button"
+    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)"
+    :class="[
+      variant === 'primary'
+        ? 'text-bg bg-fg hover:bg-fg/90'
+        : 'bg-transparent text-fg hover:(bg-fg hover:text-bg border-fg)',
+      {
+        'opacity-50 cursor-not-allowed': disabled,
+      },
+    ]"
+    :type="props.type"
     :disabled="disabled ? true : undefined"
   >
     <slot />
diff --git a/app/pages/index.vue b/app/pages/index.vue
index de689018b..bdde8f3d7 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -111,13 +111,10 @@ defineOgImageComponent('Default', {
                   @input="handleInput"
                 />
 
-                <button
-                  type="submit"
-                  class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-                >
+                <ButtonBase type="submit" variant="primary" class="absolute inset-ie-2">
                   <span class="i-carbon:search align-middle w-4 h-4" aria-hidden="true"></span>
                   {{ $t('search.button') }}
-                </button>
+                </ButtonBase>
               </div>
             </div>
           </form>

From dfba6b67441ab0a443cf4e6a4294a0e50bf24ef8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 01:46:59 +0100
Subject: [PATCH 07/91] fix(style): disabled button

---
 app/components/Button/Base.vue | 9 +++------
 app/components/Tag/Button.vue  | 9 +++------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index c382bb639..e3c8be2fb 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -21,14 +21,11 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)"
+    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed)"
     :class="[
       variant === 'primary'
-        ? 'text-bg bg-fg hover:bg-fg/90'
-        : 'bg-transparent text-fg hover:(bg-fg hover:text-bg border-fg)',
-      {
-        'opacity-50 cursor-not-allowed': disabled,
-      },
+        ? 'text-bg bg-fg hover:enabled:(bg-fg/90)'
+        : 'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)',
     ]"
     :type="props.type"
     :disabled="disabled ? true : undefined"
diff --git a/app/components/Tag/Button.vue b/app/components/Tag/Button.vue
index 855799311..6cac3734c 100644
--- a/app/components/Tag/Button.vue
+++ b/app/components/Tag/Button.vue
@@ -13,14 +13,11 @@ const props = defineProps<{
 
 <template>
   <button
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1 disabled:(opacity-50 cursor-not-allowed)"
     :class="[
       pressed
-        ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'
-        : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)',
-      {
-        'opacity-50 cursor-not-allowed': disabled,
-      },
+        ? 'bg-fg text-bg border-fg hover:enabled:(text-text-bg/50)'
+        : 'bg-bg-muted text-fg-muted border-border hover:enabled:(text-fg border-border-hover)',
     ]"
     type="button"
     :disabled="disabled ? true : undefined"

From 05a4cfa57303af509a131044d2ea36911f63a7aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 01:52:48 +0100
Subject: [PATCH 08/91] refactor: use button component for connector and social
 buttons

---
 app/components/Header/AuthModal.client.vue | 23 ++++++++--------------
 app/components/Header/ConnectorModal.vue   |  7 ++++---
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
index 32f83f372..71c54f35b 100644
--- a/app/components/Header/AuthModal.client.vue
+++ b/app/components/Header/AuthModal.client.vue
@@ -96,24 +96,17 @@ async function handleLogin() {
         </details>
       </div>
 
-      <button
-        type="submit"
-        :disabled="!handleInput.trim()"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-      >
+      <ButtonBase type="submit" variant="primary" :disabled="!handleInput.trim()" class="w-full">
         {{ $t('auth.modal.connect') }}
-      </button>
-      <button
-        type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-        @click="handleCreateAccount"
-      >
+      </ButtonBase>
+      <ButtonBase type="button" variant="primary" class="w-full" @click="handleCreateAccount">
         {{ $t('auth.modal.create_account') }}
-      </button>
+      </ButtonBase>
       <hr />
-      <button
+      <ButtonBase
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
+        variant="primary"
+        class="w-full flex items-center justify-center gap-2"
         @click="handleBlueskySignIn"
       >
         {{ $t('auth.modal.connect_bluesky') }}
@@ -123,7 +116,7 @@ async function handleLogin() {
             d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
           ></path>
         </svg>
-      </button>
+      </ButtonBase>
     </form>
   </Modal>
 </template>
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index c87febd4b..e16000825 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -219,13 +219,14 @@ function handleDisconnect() {
         </p>
       </div>
 
-      <button
+      <ButtonBase
         type="submit"
+        variant="primary"
         :disabled="!tokenInput.trim() || isConnecting"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full"
       >
         {{ isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect') }}
-      </button>
+      </ButtonBase>
     </form>
   </Modal>
 </template>

From 949c0b952e7221ae993955b252ce92be12413ac5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 01:58:28 +0100
Subject: [PATCH 09/91] refactor: use button component for modal close button

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

diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 333de3294..d4d505011 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -34,14 +34,14 @@ defineExpose({
         <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
           {{ modalTitle }}
         </h2>
-        <button
+        <ButtonBase
           type="button"
           class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
         >
           <span class="i-carbon-close w-5 h-5" aria-hidden="true" />
-        </button>
+        </ButtonBase>
       </div>
       <!-- Modal body content -->
       <slot />

From c926dce2e10b164ebe7f933f1014d9796013fdb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 02:16:25 +0100
Subject: [PATCH 10/91] style: remove default button and link style

---
 app/assets/main.css            | 34 ++-----------------------
 app/components/Button/Base.vue |  2 +-
 app/components/Button/Link.vue | 46 ++++++++++++++++++----------------
 app/components/Tag/Button.vue  |  2 +-
 app/components/Tag/Link.vue    |  2 +-
 5 files changed, 30 insertions(+), 56 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index db6eea27a..6b6fea614 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -154,7 +154,8 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
+  scroll-padding-top: 5rem;
+  /* Offset for fixed header - otherwise anchor headers are cutted */
 }
 
 /*
@@ -179,42 +180,11 @@ body {
   line-height: 1.6;
 }
 
-/* Default link styling for accessibility on dark background */
-a {
-  color: var(--fg);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-color: var(--fg-subtle);
-  transition:
-    color 0.2s ease,
-    text-decoration-color 0.2s ease;
-}
-
-a:hover {
-  color: var(--accent);
-  text-decoration-color: var(--accent);
-}
-
-a:focus-visible {
-  outline: 2px solid var(--border);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
 /* Reset dd margin (browser default is margin-left: 40px) */
 dd {
   margin: 0;
 }
 
-/* Reset button styles */
-button {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font: inherit;
-  padding: 0;
-}
-
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index e3c8be2fb..86e699757 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -21,7 +21,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed)"
+    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed)"
     :class="[
       variant === 'primary'
         ? 'text-bg bg-fg hover:enabled:(bg-fg/90)'
diff --git a/app/components/Button/Link.vue b/app/components/Button/Link.vue
index 3001f4e01..ebda3023e 100644
--- a/app/components/Button/Link.vue
+++ b/app/components/Button/Link.vue
@@ -1,21 +1,25 @@
 <script setup lang="ts">
 import type { NuxtLinkProps } from '#app'
 
-const props = defineProps<
-  {
-    /** Disabled links will be displayed as plain text */
-    disabled?: boolean
-    /**
-     * `type` should never be used, because this will always be a link.
-     *
-     * If you want a button use `TagButton` instead.
-     * */
-    type?: never
-  } &
-    /** This makes sure the link always has either `to` or `href` */
-    (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
-    NuxtLinkProps
->()
+const props = withDefaults(
+  defineProps<
+    {
+      /** Disabled links will be displayed as plain text */
+      disabled?: boolean
+      /**
+       * `type` should never be used, because this will always be a link.
+       *
+       * If you want a button use `TagButton` instead.
+       * */
+      type?: never
+      variant?: 'primary' | 'secondary'
+    } &
+      /** This makes sure the link always has either `to` or `href` */
+      (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
+      NuxtLinkProps
+  >(),
+  { variant: 'secondary' },
+)
 </script>
 
 <template>
@@ -23,12 +27,12 @@ const props = defineProps<
   <span v-if="disabled" class="opacity-50"><slot /></span>
   <NuxtLink
     v-else
-    class="inline-flex items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md bg-transparent text-fg transition-all duration-200 hover:(bg-fg hover:text-bg border-fg) focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)"
-    :class="
-      {
-        'opacity-50 cursor-not-allowed': disabled,
-      }
-    "
+    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200"
+    :class="[
+      variant === 'primary'
+        ? 'text-bg bg-fg hover:enabled:(bg-fg/90)'
+        : 'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)',
+    ]"
   >
     <slot />
   </NuxtLink>
diff --git a/app/components/Tag/Button.vue b/app/components/Tag/Button.vue
index 6cac3734c..a34703851 100644
--- a/app/components/Tag/Button.vue
+++ b/app/components/Tag/Button.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
 
 <template>
   <button
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1 disabled:(opacity-50 cursor-not-allowed)"
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 disabled:(opacity-50 cursor-not-allowed)"
     :class="[
       pressed
         ? 'bg-fg text-bg border-fg hover:enabled:(text-text-bg/50)'
diff --git a/app/components/Tag/Link.vue b/app/components/Tag/Link.vue
index 1c70fa10f..3dbb4445e 100644
--- a/app/components/Tag/Link.vue
+++ b/app/components/Tag/Link.vue
@@ -24,7 +24,7 @@ const props = defineProps<
   <span v-if="disabled" class="opacity-50"><slot /></span>
   <NuxtLink
     v-else
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    class="inline-flex gap-x-1 items-center justify-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200"
     :class="
       current
         ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'

From 2e093dbb3be084f19657490d4005e285d0c893c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 02:30:02 +0100
Subject: [PATCH 11/91] refactor: move pressed style to css

---
 app/components/Filter/Panel.vue     | 2 +-
 app/components/Package/Card.vue     | 2 +-
 app/components/Package/TableRow.vue | 2 +-
 app/components/Tag/Button.vue       | 9 +--------
 4 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 3ad7e07a0..5d7b0312c 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -310,7 +310,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             <TagButton
               v-for="keyword in displayedKeywords"
               :key="keyword"
-              :pressed="filters.keywords.includes(keyword)"
+              :aria-pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index d8781e6bf..d459256be 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -166,7 +166,7 @@ const pkgDescription = useMarkdown(() => ({
         v-for="keyword in result.package.keywords.slice(0, 5)"
         class="pointer-events-auto"
         :key="keyword"
-        :pressed="props.filters?.keywords.includes(keyword)"
+        :aria-pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"
         @click.stop="emit('clickKeyword', keyword)"
       >
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index cf4ea0ea4..b0f1d2f3a 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -129,7 +129,7 @@ const allMaintainersText = computed(() => {
         <TagButton
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
-          :pressed="props.filters?.keywords.includes(keyword)"
+          :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
           :class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
diff --git a/app/components/Tag/Button.vue b/app/components/Tag/Button.vue
index a34703851..a1d473924 100644
--- a/app/components/Tag/Button.vue
+++ b/app/components/Tag/Button.vue
@@ -7,21 +7,14 @@ const props = defineProps<{
    * If you want a link use `TagLink` instead.
    *  */
   type?: never
-  pressed?: boolean
 }>()
 </script>
 
 <template>
   <button
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 disabled:(opacity-50 cursor-not-allowed)"
-    :class="[
-      pressed
-        ? 'bg-fg text-bg border-fg hover:enabled:(text-text-bg/50)'
-        : 'bg-bg-muted text-fg-muted border-border hover:enabled:(text-fg border-border-hover)',
-    ]"
+    class="inline-flex items-center px-2 py-0.5 bg-bg-muted text-fg-muted border-border hover:enabled:(text-fg border-border-hover) text-xs font-mono border rounded transition-colors duration-200 disabled:(opacity-50 cursor-not-allowed) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-text-bg/50))"
     type="button"
     :disabled="disabled ? true : undefined"
-    :aria-pressed="pressed"
   >
     <slot />
   </button>

From c907c0ae1c8cb91bae78bb2d4718715d0b566587 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 02:43:05 +0100
Subject: [PATCH 12/91] refactor: merge button and tag button

---
 app/components/Button/Base.vue      | 16 +++++++++-------
 app/components/Filter/Panel.vue     |  5 +++--
 app/components/Package/Card.vue     |  5 +++--
 app/components/Package/TableRow.vue |  5 +++--
 app/components/Tag/Button.vue       | 21 ---------------------
 5 files changed, 18 insertions(+), 34 deletions(-)
 delete mode 100644 app/components/Tag/Button.vue

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 86e699757..0e826794d 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -3,7 +3,7 @@ const props = withDefaults(
   defineProps<{
     disabled?: boolean
     type?: 'button' | 'submit'
-    variant?: 'primary' | 'secondary'
+    variant?: 'primary' | 'secondary' | 'tag'
   }>(),
   {
     type: 'button',
@@ -21,12 +21,14 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed)"
-    :class="[
-      variant === 'primary'
-        ? 'text-bg bg-fg hover:enabled:(bg-fg/90)'
-        : 'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)',
-    ]"
+    class="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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
+    :class="{
+      'text-sm px-4 py-2': variant !== 'tag',
+      'text-xs px-2 py-0.5': variant === 'tag',
+      'bg-bg-muted text-fg-muted hover:enabled:(text-fg border-border-hover)': variant === 'tag',
+      'text-bg bg-fg hover:enabled:(bg-fg/90)': variant === 'primary',
+      'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)': variant === 'secondary',
+    }"
     :type="props.type"
     :disabled="disabled ? true : undefined"
   >
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 5d7b0312c..a824dcd28 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -307,14 +307,15 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.keywords') }}
           </legend>
           <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
-            <TagButton
+            <ButtonBase
               v-for="keyword in displayedKeywords"
               :key="keyword"
+              variant="tag"
               :aria-pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}
-            </TagButton>
+            </ButtonBase>
             <button
               v-if="hasMoreKeywords"
               type="button"
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index d459256be..266e33fa6 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -162,16 +162,17 @@ const pkgDescription = useMarkdown(() => ({
       :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
     >
-      <TagButton
+      <ButtonBase
         v-for="keyword in result.package.keywords.slice(0, 5)"
         class="pointer-events-auto"
+        variant="tag"
         :key="keyword"
         :aria-pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"
         @click.stop="emit('clickKeyword', keyword)"
       >
         {{ keyword }}
-      </TagButton>
+      </ButtonBase>
       <span
         v-if="result.package.keywords.length > 5"
         class="text-fg-subtle text-xs pointer-events-auto"
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index b0f1d2f3a..f61b81f2e 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -126,16 +126,17 @@ const allMaintainersText = computed(() => {
         class="flex flex-wrap gap-1 justify-end"
         :aria-label="$t('package.card.keywords')"
       >
-        <TagButton
+        <ButtonBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
+          variant="tag"
           :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
           :class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
         >
           {{ keyword }}
-        </TagButton>
+        </ButtonBase>
         <span
           v-if="pkg.keywords.length > 3"
           class="text-fg-subtle text-xs"
diff --git a/app/components/Tag/Button.vue b/app/components/Tag/Button.vue
deleted file mode 100644
index a1d473924..000000000
--- a/app/components/Tag/Button.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  disabled?: boolean
-  /**
-   * type should never be used, because this will always be a button.
-   *
-   * If you want a link use `TagLink` instead.
-   *  */
-  type?: never
-}>()
-</script>
-
-<template>
-  <button
-    class="inline-flex items-center px-2 py-0.5 bg-bg-muted text-fg-muted border-border hover:enabled:(text-fg border-border-hover) text-xs font-mono border rounded transition-colors duration-200 disabled:(opacity-50 cursor-not-allowed) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-text-bg/50))"
-    type="button"
-    :disabled="disabled ? true : undefined"
-  >
-    <slot />
-  </button>
-</template>

From a2c3ff44f5db58b2b6fd7a611ad7f4d51e864cec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 02:51:04 +0100
Subject: [PATCH 13/91] refactor: merge button and tag link

---
 app/components/Button/Link.vue      | 30 ++++++++++++++++--------
 app/components/Package/Keywords.vue |  4 ++--
 app/components/Tag/Link.vue         | 36 -----------------------------
 3 files changed, 23 insertions(+), 47 deletions(-)
 delete mode 100644 app/components/Tag/Link.vue

diff --git a/app/components/Button/Link.vue b/app/components/Button/Link.vue
index ebda3023e..d9f5c3103 100644
--- a/app/components/Button/Link.vue
+++ b/app/components/Button/Link.vue
@@ -12,7 +12,7 @@ const props = withDefaults(
        * If you want a button use `TagButton` instead.
        * */
       type?: never
-      variant?: 'primary' | 'secondary'
+      variant?: 'primary' | 'secondary' | 'tag'
     } &
       /** This makes sure the link always has either `to` or `href` */
       (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
@@ -23,16 +23,28 @@ const props = withDefaults(
 </script>
 
 <template>
-  <!-- This is only a placeholder implementation yet. It will probably need some additional styling, but note: A disabled link is just text. -->
-  <span v-if="disabled" class="opacity-50"><slot /></span>
+  <span
+    v-if="disabled"
+    class="opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md"
+    :class="{
+      'text-sm px-4 py-2': variant !== 'tag',
+      'text-xs px-2 py-0.5': variant === 'tag',
+      'bg-bg-muted text-fg-muted': variant === 'tag',
+      'text-bg bg-fg': variant === 'primary',
+      'bg-transparent text-fg': variant === 'secondary',
+    }"
+    ><slot
+  /></span>
   <NuxtLink
     v-else
-    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200"
-    :class="[
-      variant === 'primary'
-        ? 'text-bg bg-fg hover:enabled:(bg-fg/90)'
-        : 'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)',
-    ]"
+    class="cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
+    :class="{
+      'text-sm px-4 py-2': variant !== 'tag',
+      'text-xs px-2 py-0.5': variant === 'tag',
+      'bg-bg-muted text-fg-muted hover:(text-fg border-border-hover)': variant === 'tag',
+      'text-bg bg-fg hover:(bg-fg/90)': variant === 'primary',
+      'bg-transparent text-fg hover:(bg-fg text-bg border-fg)': variant === 'secondary',
+    }"
   >
     <slot />
   </NuxtLink>
diff --git a/app/components/Package/Keywords.vue b/app/components/Package/Keywords.vue
index 4ce868cb5..2c313685d 100644
--- a/app/components/Package/Keywords.vue
+++ b/app/components/Package/Keywords.vue
@@ -7,9 +7,9 @@ defineProps<{
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
     <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
-        <TagLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
+        <ButtonLink variant="tag" :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
           {{ keyword }}
-        </TagLink>
+        </ButtonLink>
       </li>
     </ul>
   </CollapsibleSection>
diff --git a/app/components/Tag/Link.vue b/app/components/Tag/Link.vue
deleted file mode 100644
index 3dbb4445e..000000000
--- a/app/components/Tag/Link.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { NuxtLinkProps } from '#app'
-
-const props = defineProps<
-  {
-    /** Disabled links will be displayed as plain text */
-    disabled?: boolean
-    /**
-     * `type` should never be used, because this will always be a link.
-     *
-     * If you want a button use `TagButton` instead.
-     * */
-    type?: never
-    current?: boolean
-  } &
-    /** This makes sure the link always has either `to` or `href` */
-    (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
-    NuxtLinkProps
->()
-</script>
-
-<template>
-  <!-- This is only a placeholder implementation yet. It will probably need some additional styling, but note: A disabled link is just text. -->
-  <span v-if="disabled" class="opacity-50"><slot /></span>
-  <NuxtLink
-    v-else
-    class="inline-flex gap-x-1 items-center justify-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200"
-    :class="
-      current
-        ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'
-        : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)'
-    "
-  >
-    <slot />
-  </NuxtLink>
-</template>

From 1c0a1598f0a0295179ce750588f457fb571d9c78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 02:53:33 +0100
Subject: [PATCH 14/91] style: improve disabled design

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

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 0e826794d..97d7ac3fb 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -21,7 +21,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
+    class="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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
     :class="{
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
diff --git a/app/components/Button/Link.vue b/app/components/Button/Link.vue
index d9f5c3103..cc3e93d35 100644
--- a/app/components/Button/Link.vue
+++ b/app/components/Button/Link.vue
@@ -25,7 +25,7 @@ const props = withDefaults(
 <template>
   <span
     v-if="disabled"
-    class="opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md"
+    class="opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md"
     :class="{
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',

From 585aa63dd296d47d5a7e3bda754348c763d98d60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 03:20:02 +0100
Subject: [PATCH 15/91] fix: link

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

diff --git a/app/components/Button/Link.vue b/app/components/Button/Link.vue
index cc3e93d35..6ba3f48be 100644
--- a/app/components/Button/Link.vue
+++ b/app/components/Button/Link.vue
@@ -45,6 +45,8 @@ const props = withDefaults(
       'text-bg bg-fg hover:(bg-fg/90)': variant === 'primary',
       'bg-transparent text-fg hover:(bg-fg text-bg border-fg)': variant === 'secondary',
     }"
+    :to="to"
+    :href="href"
   >
     <slot />
   </NuxtLink>

From 83ae495fc0640bffcfacd04f63a52bed9bff54f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 03:22:38 +0100
Subject: [PATCH 16/91] style: sync links and static tags

---
 app/components/Package/MetricsBadges.vue | 42 +++++++-----------------
 app/components/Tag/Static.vue            | 10 ++++--
 2 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 56673a686..bdeab106d 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NuxtLink } from '#components'
+import { ButtonLink, TagStatic } from '#components'
 
 const props = defineProps<{
   packageName: string
@@ -56,62 +56,42 @@ const typesHref = computed(() => {
     <!-- TypeScript types badge -->
     <li v-if="!props.isBinary">
       <TooltipApp :text="typesTooltip">
-        <component
-          :is="typesHref ? NuxtLink : 'span'"
-          :to="typesHref"
-          :tabindex="!typesHref ? 0 : undefined"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
-          :class="[
-            hasTypes
-              ? 'text-fg-muted bg-bg-muted border border-border'
-              : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
-            typesHref
-              ? 'hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50'
-              : '',
-          ]"
-        >
+        <ButtonLink v-if="typesHref" variant="tag" :to="typesHref">
+          <span class="w-3 h-3 i-carbon-checkmark" aria-hidden="true" />
+          {{ $t('package.metrics.types_label') }}
+        </ButtonLink>
+        <TagStatic v-else :variant="hasTypes ? 'default' : 'disabled'" :tabindex="0">
           <span
             class="w-3 h-3"
             :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
             aria-hidden="true"
           />
           {{ $t('package.metrics.types_label') }}
-        </component>
+        </TagStatic>
       </TooltipApp>
     </li>
 
     <!-- ESM badge (show with X if missing) -->
     <li>
       <TooltipApp :text="hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')">
-        <span
-          tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200"
-          :class="
-            hasEsm
-              ? 'text-fg-muted bg-bg-muted border border-border'
-              : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
-          "
-        >
+        <TagStatic tabindex="0" :variant="hasEsm ? 'default' : 'disabled'">
           <span
             class="w-3 h-3"
             :class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
             aria-hidden="true"
           />
           ESM
-        </span>
+        </TagStatic>
       </TooltipApp>
     </li>
 
     <!-- CJS badge (only show if present) -->
     <li v-if="hasCjs">
       <TooltipApp :text="$t('package.metrics.cjs')">
-        <span
-          tabindex="0"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200"
-        >
+        <TagStatic tabindex="0">
           <span class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
           CJS
-        </span>
+        </TagStatic>
       </TooltipApp>
     </li>
   </ul>
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index 352e9d8bc..3e8a38d5d 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ as?: string | Component }>(), { as: 'span' })
+const props = withDefaults(
+  defineProps<{ as?: string | Component; variant?: 'disabled' | 'default' }>(),
+  { as: 'span', variant: 'default' },
+)
 </script>
 
 <template>
   <component
     :is="as"
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded"
+    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="{ 'opacity-40': variant === 'disabled' }"
   >
-    <slot />
+    <slot />!
   </component>
 </template>

From 037638abeef04ee61d1dbddb5f0e592a49851741 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 03:24:49 +0100
Subject: [PATCH 17/91] chore: move link to own folder

---
 app/components/{Button/Link.vue => Link/Base.vue} |  0
 app/components/Package/Keywords.vue               |  4 ++--
 app/components/Package/MetricsBadges.vue          |  6 +++---
 app/pages/@[org].vue                              |  2 +-
 app/pages/package-code/[...path].vue              | 12 ++++++------
 app/pages/package/[...package].vue                |  2 +-
 app/pages/~[username]/index.vue                   |  2 +-
 app/pages/~[username]/orgs.vue                    |  4 ++--
 test/nuxt/a11y.spec.ts                            | 10 +++++-----
 9 files changed, 21 insertions(+), 21 deletions(-)
 rename app/components/{Button/Link.vue => Link/Base.vue} (100%)

diff --git a/app/components/Button/Link.vue b/app/components/Link/Base.vue
similarity index 100%
rename from app/components/Button/Link.vue
rename to app/components/Link/Base.vue
diff --git a/app/components/Package/Keywords.vue b/app/components/Package/Keywords.vue
index 2c313685d..1f762b0c3 100644
--- a/app/components/Package/Keywords.vue
+++ b/app/components/Package/Keywords.vue
@@ -7,9 +7,9 @@ defineProps<{
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
     <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
-        <ButtonLink variant="tag" :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
+        <LinkBase variant="tag" :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
           {{ keyword }}
-        </ButtonLink>
+        </LinkBase>
       </li>
     </ul>
   </CollapsibleSection>
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index bdeab106d..e2b1ef6bc 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ButtonLink, TagStatic } from '#components'
+import { LinkBase, TagStatic } from '#components'
 
 const props = defineProps<{
   packageName: string
@@ -56,10 +56,10 @@ const typesHref = computed(() => {
     <!-- TypeScript types badge -->
     <li v-if="!props.isBinary">
       <TooltipApp :text="typesTooltip">
-        <ButtonLink v-if="typesHref" variant="tag" :to="typesHref">
+        <LinkBase v-if="typesHref" variant="tag" :to="typesHref">
           <span class="w-3 h-3 i-carbon-checkmark" aria-hidden="true" />
           {{ $t('package.metrics.types_label') }}
-        </ButtonLink>
+        </LinkBase>
         <TagStatic v-else :variant="hasTypes ? 'default' : 'disabled'" :tabindex="0">
           <span
             class="w-3 h-3"
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index 4b9f86b24..b397e716d 100644
--- a/app/pages/@[org].vue
+++ b/app/pages/@[org].vue
@@ -234,7 +234,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
+      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
 
     <!-- Empty state -->
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index 2338432bd..929e41519 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -359,7 +359,7 @@ defineOgImageComponent('Default', {
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
-      <ButtonLink :to="packageRoute()">{{ $t('code.go_to_package') }}</ButtonLink>
+      <LinkBase :to="packageRoute()">{{ $t('code.go_to_package') }}</LinkBase>
     </div>
 
     <!-- Loading state -->
@@ -371,7 +371,7 @@ defineOgImageComponent('Default', {
     <!-- Error state -->
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
-      <ButtonLink :to="packageRoute(version)">{{ $t('code.back_to_package') }}</ButtonLink>
+      <LinkBase :to="packageRoute(version)">{{ $t('code.back_to_package') }}</LinkBase>
     </div>
 
     <!-- Main content: file tree + file viewer -->
@@ -472,7 +472,7 @@ defineOgImageComponent('Default', {
           <p class="text-fg-subtle text-sm mb-4">
             {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
           </p>
-          <ButtonLink
+          <LinkBase
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
@@ -480,7 +480,7 @@ defineOgImageComponent('Default', {
           >
             {{ $t('code.view_raw') }}
             <span class="i-carbon:launch w-4 h-4" />
-          </ButtonLink>
+          </LinkBase>
         </div>
 
         <!-- Loading file content -->
@@ -526,7 +526,7 @@ defineOgImageComponent('Default', {
           <div class="i-carbon:warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
-          <ButtonLink
+          <LinkBase
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
@@ -534,7 +534,7 @@ defineOgImageComponent('Default', {
           >
             {{ $t('code.view_raw') }}
             <span class="i-carbon:launch w-4 h-4" />
-          </ButtonLink>
+          </LinkBase>
         </div>
 
         <!-- Directory listing (when no file selected or viewing a directory) -->
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index d48ed343c..3c41700a9 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -1151,7 +1151,7 @@ defineOgImageComponent('Package', {
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
+      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
   </main>
 </template>
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 545d51c98..867151ec0 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -224,7 +224,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
+      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
 
     <!-- Package list -->
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 7d355e595..f070fd86e 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -156,9 +156,9 @@ defineOgImageComponent('Default', {
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
         <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
-        <ButtonLink :to="`/~${npmUser}/orgs`" class="mt-4">{{
+        <LinkBase :to="`/~${npmUser}/orgs`" class="mt-4">{{
           $t('user.orgs_page.view_your_orgs')
-        }}</ButtonLink>
+        }}</LinkBase>
       </div>
 
       <!-- Loading state -->
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 2a1b7a9e5..5cf32a880 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -64,7 +64,7 @@ import {
   BaseCard,
   BuildEnvironment,
   ButtonBase,
-  ButtonLink,
+  LinkBase,
   CallToAction,
   CodeDirectoryListing,
   CodeFileTree,
@@ -331,9 +331,9 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('ButtonLink', () => {
+  describe('LinkBase', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(ButtonLink, {
+      const component = await mountSuspended(LinkBase, {
         props: { href: 'http://example.com' },
         slots: { default: 'Button link content' },
       })
@@ -342,7 +342,7 @@ describe('component accessibility audits', () => {
     })
 
     it("should have no accessibility violations when it's the current link", async () => {
-      const component = await mountSuspended(ButtonLink, {
+      const component = await mountSuspended(LinkBase, {
         props: { href: 'http://example.com', current: true },
         slots: { default: 'Button link content' },
       })
@@ -351,7 +351,7 @@ describe('component accessibility audits', () => {
     })
 
     it('should have no accessibility violations when disabled (plain text)', async () => {
-      const component = await mountSuspended(ButtonLink, {
+      const component = await mountSuspended(LinkBase, {
         props: { href: 'http://example.com', disabled: true },
         slots: { default: 'Button link content' },
       })

From 15bf1e3e292cd0d8eebcfaa80d1abb129f4b9e89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Wed, 4 Feb 2026 03:27:53 +0100
Subject: [PATCH 18/91] refactor: rename link variants

---
 app/components/Link/Base.vue         | 12 ++++++------
 app/pages/@[org].vue                 |  2 +-
 app/pages/package-code/[...path].vue | 10 ++++++++--
 app/pages/package/[...package].vue   |  2 +-
 app/pages/~[username]/index.vue      |  2 +-
 app/pages/~[username]/orgs.vue       |  2 +-
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 6ba3f48be..28506c01e 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -12,13 +12,13 @@ const props = withDefaults(
        * If you want a button use `TagButton` instead.
        * */
       type?: never
-      variant?: 'primary' | 'secondary' | 'tag'
+      variant?: 'button-primary' | 'button-secondary' | 'tag'
     } &
       /** This makes sure the link always has either `to` or `href` */
       (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
       NuxtLinkProps
   >(),
-  { variant: 'secondary' },
+  { variant: 'button-secondary' },
 )
 </script>
 
@@ -30,8 +30,8 @@ const props = withDefaults(
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
       'bg-bg-muted text-fg-muted': variant === 'tag',
-      'text-bg bg-fg': variant === 'primary',
-      'bg-transparent text-fg': variant === 'secondary',
+      'text-bg bg-fg': variant === 'button-primary',
+      'bg-transparent text-fg': variant === 'button-secondary',
     }"
     ><slot
   /></span>
@@ -42,8 +42,8 @@ const props = withDefaults(
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
       'bg-bg-muted text-fg-muted hover:(text-fg border-border-hover)': variant === 'tag',
-      'text-bg bg-fg hover:(bg-fg/90)': variant === 'primary',
-      'bg-transparent text-fg hover:(bg-fg text-bg border-fg)': variant === 'secondary',
+      'text-bg bg-fg hover:(bg-fg/90)': variant === 'button-primary',
+      'bg-transparent text-fg hover:(bg-fg text-bg border-fg)': variant === 'button-secondary',
     }"
     :to="to"
     :href="href"
diff --git a/app/pages/@[org].vue b/app/pages/@[org].vue
index b397e716d..4ec8b7d99 100644
--- a/app/pages/@[org].vue
+++ b/app/pages/@[org].vue
@@ -234,7 +234,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
+      <LinkBase variant="button-secondary" to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
 
     <!-- Empty state -->
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index 929e41519..f37452e65 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -359,7 +359,9 @@ defineOgImageComponent('Default', {
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
-      <LinkBase :to="packageRoute()">{{ $t('code.go_to_package') }}</LinkBase>
+      <LinkBase variant="button-secondary" :to="packageRoute()">{{
+        $t('code.go_to_package')
+      }}</LinkBase>
     </div>
 
     <!-- Loading state -->
@@ -371,7 +373,9 @@ defineOgImageComponent('Default', {
     <!-- Error state -->
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
-      <LinkBase :to="packageRoute(version)">{{ $t('code.back_to_package') }}</LinkBase>
+      <LinkBase variant="button-secondary" :to="packageRoute(version)">{{
+        $t('code.back_to_package')
+      }}</LinkBase>
     </div>
 
     <!-- Main content: file tree + file viewer -->
@@ -473,6 +477,7 @@ defineOgImageComponent('Default', {
             {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
           </p>
           <LinkBase
+            variant="button-secondary"
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
@@ -527,6 +532,7 @@ defineOgImageComponent('Default', {
           <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
           <LinkBase
+            variant="button-secondary"
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 3c41700a9..8c22f2511 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -1151,7 +1151,7 @@ defineOgImageComponent('Package', {
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
+      <LinkBase variant="button-secondary" to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
   </main>
 </template>
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 867151ec0..53369754b 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -224,7 +224,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
+      <LinkBase variant="button-secondary" to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
 
     <!-- Package list -->
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index f070fd86e..cb50663b7 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -156,7 +156,7 @@ defineOgImageComponent('Default', {
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
         <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
-        <LinkBase :to="`/~${npmUser}/orgs`" class="mt-4">{{
+        <LinkBase variant="button-secondary" :to="`/~${npmUser}/orgs`" class="mt-4">{{
           $t('user.orgs_page.view_your_orgs')
         }}</LinkBase>
       </div>

From 205c937806586f823865d99c7d6f03a918c26435 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Thu, 5 Feb 2026 14:41:49 +0100
Subject: [PATCH 19/91] refactor: replace links with component

---
 app/app.vue                                  | 14 +---
 app/components/AppFooter.vue                 | 46 +++----------
 app/components/AppHeader.vue                 | 27 ++++----
 app/components/Header/AccountMenu.client.vue |  4 +-
 app/components/Link/Base.vue                 | 16 +++--
 app/pages/about.vue                          | 68 ++++++--------------
 app/pages/index.vue                          |  8 +--
 uno.config.ts                                |  5 --
 8 files changed, 64 insertions(+), 124 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index e8103f513..258c433a3 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -117,7 +117,9 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <NuxtPwaAssets />
-    <a href="#main-content" class="skip-link font-mono">{{ $t('common.skip_link') }}</a>
+    <LinkBase href="#main-content" variant="button-primary" class="skip-link">{{
+      $t('common.skip_link')
+    }}</LinkBase>
 
     <AppHeader :show-logo="!isHomepage" />
 
@@ -136,19 +138,9 @@ if (import.meta.client) {
 .skip-link {
   position: fixed;
   top: -100%;
-  inset-inline-start: 0;
-  padding: 0.5rem 1rem;
-  background: var(--fg);
-  color: var(--bg);
-  font-size: 0.875rem;
   z-index: 100;
-  transition: top 0.2s ease;
 }
 
-.skip-link:hover {
-  color: var(--bg);
-  text-decoration: underline;
-}
 .skip-link:focus {
   top: 0;
 }
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 80565e73d..1bf7e1cf1 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -15,51 +15,25 @@ const isHome = computed(() => route.name === 'index')
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6">
-          <NuxtLink to="/about" class="link-subtle font-mono text-xs flex items-center">
+          <LinkBase to="/about">
             {{ $t('footer.about') }}
-          </NuxtLink>
-          <NuxtLink
-            to="/privacy"
-            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1 lowercase"
-          >
-            {{ $t('privacy_policy.title') }}
-          </NuxtLink>
-          <a
-            href="https://docs.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase href="https://docs.npmx.dev" target="_blank" rel="noopener noreferrer">
             {{ $t('footer.docs') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
-          <a
-            href="https://repo.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase href="https://repo.npmx.dev" target="_blank" rel="noopener noreferrer">
             {{ $t('footer.source') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
-          <a
-            href="https://social.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase href="https://social.npmx.dev" target="_blank" rel="noopener noreferrer">
             {{ $t('footer.social') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
-          <a
-            href="https://chat.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase href="https://chat.npmx.dev" target="_blank" rel="noopener noreferrer">
             {{ $t('footer.chat') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
+          </LinkBase>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 05ebffb81..62156087a 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -151,34 +151,36 @@ onKeyStroke(
       <!-- End: Desktop nav items + Mobile menu button -->
       <div class="flex-shrink-0 flex items-center gap-0.5 sm:gap-2">
         <!-- Desktop: Compare link -->
-        <NuxtLink
+        <LinkBase
+          variant="button-secondary"
           to="/compare"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
+          class="inline-flex items-center gap-2"
           aria-keyshortcuts="c"
         >
           {{ $t('nav.compare') }}
           <kbd
-            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded no-underline"
             aria-hidden="true"
           >
             c
           </kbd>
-        </NuxtLink>
+        </LinkBase>
 
         <!-- Desktop: Settings link -->
-        <NuxtLink
+        <LinkBase
+          variant="button-secondary"
           to="/settings"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
+          class="inline-flex items-center gap-2"
           aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}
           <kbd
-            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded no-underline"
             aria-hidden="true"
           >
             ,
           </kbd>
-        </NuxtLink>
+        </LinkBase>
 
         <!-- Desktop: Account menu -->
         <div class="hidden sm:block">
@@ -186,14 +188,15 @@ onKeyStroke(
         </div>
 
         <!-- Mobile: Menu button (always visible, click to open menu) -->
-        <button
+        <ButtonBase
           type="button"
-          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
+          class="sm:hidden flex"
           :aria-label="$t('nav.open_menu')"
-          @click="showMobileMenu = true"
+          :aria-expanded="showMobileMenu"
+          @click="showMobileMenu = !showMobileMenu"
         >
           <span class="w-6 h-6 inline-block i-carbon:menu" aria-hidden="true" />
-        </button>
+        </ButtonBase>
       </div>
     </nav>
 
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 82c0fde1c..823a6e17e 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -57,7 +57,7 @@ function openAuthModal() {
 
 <template>
   <div ref="accountMenuRef" class="relative flex min-w-24 justify-end">
-    <button
+    <ButtonBase
       type="button"
       class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-accent/70"
       :aria-expanded="isOpen"
@@ -126,7 +126,7 @@ function openAuthModal() {
       >
         {{ operationCount }}
       </span>
-    </button>
+    </ButtonBase>
 
     <!-- Dropdown menu -->
     <Transition
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 28506c01e..ba47c167e 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -12,22 +12,23 @@ const props = withDefaults(
        * If you want a button use `TagButton` instead.
        * */
       type?: never
-      variant?: 'button-primary' | 'button-secondary' | 'tag'
+      variant?: 'button-primary' | 'button-secondary' | 'tag' | 'link'
     } &
       /** This makes sure the link always has either `to` or `href` */
       (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
       NuxtLinkProps
   >(),
-  { variant: 'button-secondary' },
+  { variant: 'link' },
 )
 </script>
 
 <template>
   <span
     v-if="disabled"
-    class="opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md"
     :class="{
-      'text-sm px-4 py-2': variant !== 'tag',
+      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
+        variant !== 'link',
+      'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
       'text-xs px-2 py-0.5': variant === 'tag',
       'bg-bg-muted text-fg-muted': variant === 'tag',
       'text-bg bg-fg': variant === 'button-primary',
@@ -37,9 +38,12 @@ const props = withDefaults(
   /></span>
   <NuxtLink
     v-else
-    class="cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
     :class="{
-      'text-sm px-4 py-2': variant !== 'tag',
+      'text-fg underline-offset-4 underline decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
+        variant === 'link',
+      'gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+        variant !== 'link',
+      'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
       'text-xs px-2 py-0.5': variant === 'tag',
       'bg-bg-muted text-fg-muted hover:(text-fg border-border-hover)': variant === 'tag',
       'text-bg bg-fg hover:(bg-fg/90)': variant === 'button-primary',
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 221f2287f..d8c36723f 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -74,12 +74,8 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 <strong class="text-fg">{{ $t('about.what_we_are.better_ux_dx') }}</strong>
               </template>
               <template #jsr>
-                <a
-                  href="https://jsr.io/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="link text-fg"
-                  >JSR</a
+                <LinkBase href="https://jsr.io/" target="_blank" rel="noopener noreferrer"
+                  >JSR</LinkBase
                 >
               </template>
             </i18n-t>
@@ -112,58 +108,34 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 >
                   <template #already>{{ $t('about.what_we_are_not.words.already') }}</template>
                   <template #people>
-                    <a
-                      :href="pmLinks.npm"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.people') }}</a
-                    >
+                    <LinkBase :href="pmLinks.npm" target="_blank" rel="noopener noreferrer">{{
+                      $t('about.what_we_are_not.words.people')
+                    }}</LinkBase>
                   </template>
                   <template #building>
-                    <a
-                      :href="pmLinks.pnpm"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.building') }}</a
-                    >
+                    <LinkBase :href="pmLinks.pnpm" target="_blank" rel="noopener noreferrer">{{
+                      $t('about.what_we_are_not.words.building')
+                    }}</LinkBase>
                   </template>
                   <template #really>
-                    <a
-                      :href="pmLinks.yarn"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.really') }}</a
-                    >
+                    <LinkBase :href="pmLinks.yarn" target="_blank" rel="noopener noreferrer">{{
+                      $t('about.what_we_are_not.words.really')
+                    }}</LinkBase>
                   </template>
                   <template #cool>
-                    <a
-                      :href="pmLinks.bun"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.cool') }}</a
-                    >
+                    <LinkBase :href="pmLinks.bun" target="_blank" rel="noopener noreferrer">{{
+                      $t('about.what_we_are_not.words.cool')
+                    }}</LinkBase>
                   </template>
                   <template #package>
-                    <a
-                      :href="pmLinks.deno"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.package') }}</a
-                    >
+                    <LinkBase :href="pmLinks.deno" target="_blank" rel="noopener noreferrer">{{
+                      $t('about.what_we_are_not.words.package')
+                    }}</LinkBase>
                   </template>
                   <template #managers>
-                    <a
-                      :href="pmLinks.vlt"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.managers') }}</a
-                    >
+                    <LinkBase :href="pmLinks.vlt" target="_blank" rel="noopener noreferrer">{{
+                      $t('about.what_we_are_not.words.managers')
+                    }}</LinkBase>
                   </template>
                 </i18n-t>
               </span>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 12cc879b7..596b4c477 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -98,7 +98,7 @@ defineOgImageComponent('Default', {
 
                 <ButtonBase type="submit" variant="primary" class="absolute inset-ie-2">
                   <span class="i-carbon:search align-middle w-4 h-4" aria-hidden="true"></span>
-                  
+
                   <span class="sr-only sm:not-sr-only">
                     {{ $t('search.button') }}
                   </span>
@@ -118,15 +118,15 @@ defineOgImageComponent('Default', {
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
           <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
-            <NuxtLink
+            <LinkBase
               :to="{ name: 'package', params: { package: [framework.package] } }"
-              class="link-subtle font-mono text-sm inline-flex items-center gap-2 group"
+              class="inline-flex items-center gap-2 group"
             >
               <span
                 class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
               />
               {{ framework.name }}
-            </NuxtLink>
+            </LinkBase>
           </li>
         </ul>
       </nav>
diff --git a/uno.config.ts b/uno.config.ts
index 34ec5b7ce..a7a529e72 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -126,11 +126,6 @@ export default defineConfig({
     // Focus states - subtle but accessible
     ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/50 ring-offset-2)'],
 
-    // Links
-    [
-      'link',
-      'text-fg underline-offset-4 decoration-border hover:(decoration-fg underline) transition-colors duration-200 focus-ring',
-    ],
     ['link-subtle', 'text-fg-muted hover:text-fg transition-colors duration-200 focus-ring'],
 
     // badges

From 4974d56c628662f8dd1d0253cb1a914a8c2002f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Thu, 5 Feb 2026 15:02:42 +0100
Subject: [PATCH 20/91] fix: remove exclamation mark accidentally added

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

diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index 3e8a38d5d..e1afe90f1 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -11,6 +11,6 @@ const props = withDefaults(
     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="{ 'opacity-40': variant === 'disabled' }"
   >
-    <slot />!
+    <slot />
   </component>
 </template>

From 80bcd90392cf25a97ea6217ddf4897712fb7ac80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 02:52:57 +0100
Subject: [PATCH 21/91] refactor: replace (almost) all links on package page

---
 app/components/Link/Base.vue       |   4 +-
 app/pages/package/[...package].vue | 168 ++++++++++++++---------------
 2 files changed, 83 insertions(+), 89 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index ba47c167e..6cda7467a 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -39,9 +39,9 @@ const props = withDefaults(
   <NuxtLink
     v-else
     :class="{
-      'text-fg underline-offset-4 underline decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
+      'text-fg underline-offset-4 underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
         variant === 'link',
-      'gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+      'gap-x-1 inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant !== 'link',
       'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
       'text-xs px-2 py-0.5': variant === 'tag',
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index b9589d982..cf3a20eb6 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -13,7 +13,6 @@ import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
 import { formatBytes } from '~/utils/formatters'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
-import { NuxtLink } from '#components'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
@@ -516,13 +515,9 @@ onKeyStroke(
               class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
               :title="pkg.name"
             >
-              <NuxtLink
-                v-if="orgName"
-                :to="{ name: 'org', params: { org: orgName } }"
-                class="text-fg-muted hover:text-fg transition-colors duration-200"
-              >
+              <LinkBase v-if="orgName" :to="{ name: 'org', params: { org: orgName } }">
                 @{{ orgName }}
-              </NuxtLink>
+              </LinkBase>
               <span v-if="orgName">/</span>
               <span :class="{ 'text-fg-muted': orgName }">
                 {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
@@ -557,11 +552,11 @@ onKeyStroke(
               <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </template>
 
-            <NuxtLink
+            <LinkBase
               v-if="requestedVersion && resolvedVersion !== requestedVersion"
               :to="`/package/${pkg.name}/v/${resolvedVersion}`"
               :title="$t('package.view_permalink')"
-              >{{ resolvedVersion }}</NuxtLink
+              >{{ resolvedVersion }}</LinkBase
             >
             <span v-else>v{{ resolvedVersion }}</span>
 
@@ -576,13 +571,13 @@ onKeyStroke(
                 "
                 position="bottom"
               >
-                <a
+                <LinkBase
+                  variant="tag"
                   href="#provenance"
                   :aria-label="$t('package.provenance_section.view_more_details')"
-                  class="inline-flex items-center justify-center gap-1.5 text-fg-muted hover:text-emerald-500 transition-colors duration-200 min-w-6 min-h-6"
                 >
                   <span class="i-lucide-shield-check w-3.5 h-3.5 shrink-0" aria-hidden="true" />
-                </a>
+                </LinkBase>
               </TooltipApp>
             </template>
             <span
@@ -610,16 +605,16 @@ onKeyStroke(
                 "
                 position="bottom"
               >
-                <button
+                <ButtonBase
                   @click="likeAction"
-                  type="button"
+                  variant="tag"
                   :title="
                     likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
-                  class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
                   :aria-label="
                     likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
+                  :aria-pressed="likesData?.userHasLiked"
                 >
                   <span
                     :class="
@@ -633,7 +628,7 @@ onKeyStroke(
                   <span>{{
                     formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 })
                   }}</span>
-                </button>
+                </ButtonBase>
               </TooltipApp>
               <template #fallback>
                 <div
@@ -654,49 +649,49 @@ onKeyStroke(
             :aria-label="$t('package.navigation')"
             class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
           >
-            <NuxtLink
+            <LinkBase
+              variant="button-secondary"
               v-if="docsLink"
               :to="docsLink"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border inline-flex items-center gap-1.5"
               aria-keyshortcuts="d"
             >
               <span class="i-carbon:document w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.docs') }}
               <kbd
-                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
+                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
                 aria-hidden="true"
               >
                 d
               </kbd>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
+              variant="button-secondary"
               :to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border inline-flex items-center gap-1.5"
               aria-keyshortcuts="."
             >
               <span class="i-carbon:code w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.code') }}
               <kbd
-                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
+                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
                 aria-hidden="true"
               >
                 .
               </kbd>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
+              variant="button-secondary"
               :to="{ path: '/compare', query: { packages: pkg.name } }"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border inline-flex items-center gap-1.5"
               aria-keyshortcuts="c"
             >
               <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.compare') }}
               <kbd
-                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
+                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
                 aria-hidden="true"
               >
                 c
               </kbd>
-            </NuxtLink>
+            </LinkBase>
           </nav>
         </div>
       </header>
@@ -715,127 +710,124 @@ onKeyStroke(
           </div>
 
           <!-- External links -->
-          <ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3">
+          <ul class="flex flex-wrap items-center gap-1 sm:gap-2 list-none m-0 p-0 mt-3">
             <li v-if="repositoryUrl">
-              <a
+              <LinkBase
+                variant="button-secondary"
                 :href="repositoryUrl"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="w-4 h-4" :class="repoProviderIcon" aria-hidden="true" />
                 <span v-if="repoRef">
                   {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
                 </span>
                 <span v-else>{{ $t('package.links.repo') }}</span>
-              </a>
+              </LinkBase>
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
-              <a
+              <LinkBase
+                variant="button-secondary"
                 :href="starsLink"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="w-4 h-4 i-carbon:star" aria-hidden="true" />
                 {{ formatCompactNumber(stars, { decimals: 1 }) }}
-              </a>
+              </LinkBase>
             </li>
             <li v-if="forks && forksLink">
-              <a
+              <LinkBase
+                variant="button-secondary"
                 :href="forksLink"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon:fork w-4 h-4" aria-hidden="true" />
                 {{ formatCompactNumber(forks, { decimals: 1 }) }}
-              </a>
+              </LinkBase>
             </li>
             <li v-if="homepageUrl">
-              <a
+              <LinkBase
+                variant="button-secondary"
                 :href="homepageUrl"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon:link w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.homepage') }}
-              </a>
+              </LinkBase>
             </li>
             <li v-if="displayVersion?.bugs?.url">
-              <a
+              <LinkBase
+                variant="button-secondary"
                 :href="displayVersion.bugs.url"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon:warning w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.issues') }}
-              </a>
+              </LinkBase>
             </li>
             <li>
-              <a
+              <LinkBase
+                variant="button-secondary"
                 :href="`https://www.npmjs.com/package/${pkg.name}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
                 :title="$t('common.view_on_npm')"
               >
                 <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
                 npm
-              </a>
+              </LinkBase>
             </li>
             <li v-if="jsrInfo?.exists && jsrInfo.url">
-              <a
+              <LinkBase
+                variant="button-secondary"
                 :href="jsrInfo.url"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
                 :title="$t('badges.jsr.title')"
               >
                 <span class="i-simple-icons:jsr w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.jsr') }}
-              </a>
+              </LinkBase>
             </li>
             <li v-if="fundingUrl">
-              <a
+              <LinkBase
+                variant="button-secondary"
                 :href="fundingUrl"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon:favorite w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.fund') }}
-              </a>
+              </LinkBase>
             </li>
             <!-- Mobile-only: Docs + Code + Compare links -->
             <li v-if="docsLink && displayVersion" class="sm:hidden">
-              <NuxtLink
-                :to="docsLink"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
+              <LinkBase variant="button-secondary" :to="docsLink">
                 <span class="i-carbon:document w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.docs') }}
-              </NuxtLink>
+              </LinkBase>
             </li>
             <li v-if="resolvedVersion" class="sm:hidden">
-              <NuxtLink
+              <LinkBase
+                variant="button-secondary"
                 :to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon:code w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.code') }}
-              </NuxtLink>
+              </LinkBase>
             </li>
             <li class="sm:hidden">
-              <NuxtLink
+              <LinkBase
+                variant="button-secondary"
                 :to="{ path: '/compare', query: { packages: pkg.name } }"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
                 <span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.compare') }}
-              </NuxtLink>
+              </LinkBase>
             </li>
           </ul>
         </div>
@@ -905,29 +897,31 @@ onKeyStroke(
                 </ClientOnly>
               </template>
 
-              <a
-                v-if="getDependencyCount(displayVersion) > 0"
-                :href="`https://npmgraph.js.org/?q=${pkg.name}`"
-                target="_blank"
-                rel="noopener noreferrer"
-                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.stats.view_dependency_graph')"
-              >
-                <span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
-                <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
-              </a>
-
-              <a
-                v-if="getDependencyCount(displayVersion) > 0"
-                :href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
-                target="_blank"
-                rel="noopener noreferrer"
-                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.stats.inspect_dependency_tree')"
-              >
-                <span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />
-                <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
-              </a>
+              <div class="flex items-center gap-1">
+                <LinkBase
+                  variant="tag"
+                  v-if="getDependencyCount(displayVersion) > 0"
+                  :href="`https://npmgraph.js.org/?q=${pkg.name}`"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  :title="$t('package.stats.view_dependency_graph')"
+                >
+                  <span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
+                  <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
+                </LinkBase>
+
+                <LinkBase
+                  variant="tag"
+                  v-if="getDependencyCount(displayVersion) > 0"
+                  :href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  :title="$t('package.stats.inspect_dependency_tree')"
+                >
+                  <span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />
+                  <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
+                </LinkBase>
+              </div>
             </dd>
           </div>
 

From 260be921125084b44ad20278a9487b2d09740a5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 03:10:12 +0100
Subject: [PATCH 22/91] feat: unifyied keyshort cut system

---
 app/components/AppHeader.vue       | 17 +++--------------
 app/components/Button/Base.vue     | 22 ++++++++++++++++++----
 app/components/Link/Base.vue       | 22 +++++++++++++++++++---
 app/pages/package/[...package].vue | 30 ++++--------------------------
 4 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 62156087a..13a7b24d9 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { LinkBase } from '#components'
 import { isEditableElement } from '~/utils/input'
 
 withDefaults(
@@ -155,15 +156,9 @@ onKeyStroke(
           variant="button-secondary"
           to="/compare"
           class="inline-flex items-center gap-2"
-          aria-keyshortcuts="c"
+          keyshortcut="c"
         >
           {{ $t('nav.compare') }}
-          <kbd
-            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded no-underline"
-            aria-hidden="true"
-          >
-            c
-          </kbd>
         </LinkBase>
 
         <!-- Desktop: Settings link -->
@@ -171,15 +166,9 @@ onKeyStroke(
           variant="button-secondary"
           to="/settings"
           class="inline-flex items-center gap-2"
-          aria-keyshortcuts=","
+          keyshortcut=","
         >
           {{ $t('nav.settings') }}
-          <kbd
-            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded no-underline"
-            aria-hidden="true"
-          >
-            ,
-          </kbd>
         </LinkBase>
 
         <!-- Desktop: Account menu -->
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 97d7ac3fb..c9a805dd9 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    disabled?: boolean
-    type?: 'button' | 'submit'
-    variant?: 'primary' | 'secondary' | 'tag'
+    'disabled'?: boolean
+    'type'?: 'button' | 'submit'
+    'variant'?: 'primary' | 'secondary' | 'tag'
+    'keyshortcut'?: string
+
+    /**
+     * Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
+     */
+    'aria-keyshortcuts'?: never
   }>(),
   {
     type: 'button',
@@ -21,7 +27,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
+    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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
     :class="{
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
@@ -31,7 +37,15 @@ defineExpose({
     }"
     :type="props.type"
     :disabled="disabled ? true : undefined"
+    :aria-keyshortcuts="keyshortcut"
   >
     <slot />
+    <kbd
+      v-if="keyshortcut"
+      class="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>
   </button>
 </template>
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 6cda7467a..652641c05 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -5,14 +5,21 @@ const props = withDefaults(
   defineProps<
     {
       /** Disabled links will be displayed as plain text */
-      disabled?: boolean
+      'disabled'?: boolean
       /**
        * `type` should never be used, because this will always be a link.
        *
        * If you want a button use `TagButton` instead.
        * */
-      type?: never
-      variant?: 'button-primary' | 'button-secondary' | 'tag' | 'link'
+      'type'?: never
+      'variant'?: 'button-primary' | 'button-secondary' | 'tag' | 'link'
+
+      'keyshortcut'?: string
+
+      /**
+       * Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
+       */
+      'aria-keyshortcuts'?: never
     } &
       /** This makes sure the link always has either `to` or `href` */
       (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
@@ -38,6 +45,7 @@ const props = withDefaults(
   /></span>
   <NuxtLink
     v-else
+    class="group"
     :class="{
       'text-fg underline-offset-4 underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
         variant === 'link',
@@ -51,7 +59,15 @@ const props = withDefaults(
     }"
     :to="to"
     :href="href"
+    :aria-keyshortcuts="keyshortcut"
   >
     <slot />
+    <kbd
+      v-if="keyshortcut"
+      class="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>
   </NuxtLink>
 </template>
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 6fde1b4af..2e6b20042 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -16,6 +16,7 @@ import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
+import { LinkBase } from '#components'
 
 definePageMeta({
   name: 'package',
@@ -649,48 +650,25 @@ onKeyStroke(
             :aria-label="$t('package.navigation')"
             class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
           >
-            <LinkBase
-              variant="button-secondary"
-              v-if="docsLink"
-              :to="docsLink"
-              aria-keyshortcuts="d"
-            >
+            <LinkBase variant="button-secondary" v-if="docsLink" :to="docsLink" keyshortcut="d">
               <span class="i-carbon:document w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.docs') }}
-              <kbd
-                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
-                aria-hidden="true"
-              >
-                d
-              </kbd>
             </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
-              aria-keyshortcuts="."
+              keyshortcut="."
             >
               <span class="i-carbon:code w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.code') }}
-              <kbd
-                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
-                aria-hidden="true"
-              >
-                .
-              </kbd>
             </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="{ path: '/compare', query: { packages: pkg.name } }"
-              aria-keyshortcuts="c"
+              keyshortcut="c"
             >
               <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.compare') }}
-              <kbd
-                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
-                aria-hidden="true"
-              >
-                c
-              </kbd>
             </LinkBase>
           </nav>
         </div>

From 2278aa1625b4ba8d55918bcf45548d6fbc1a44df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 03:31:12 +0100
Subject: [PATCH 23/91] feat: unifyied icon system

---
 app/components/Button/Base.vue           |  7 +++
 app/components/Link/Base.vue             |  7 +++
 app/components/Package/MetricsBadges.vue | 64 ++++++++++++------------
 app/components/Tag/Static.vue            |  8 ++-
 app/pages/index.vue                      |  9 ++--
 app/pages/package/[...package].vue       | 45 +++++++++--------
 6 files changed, 82 insertions(+), 58 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index c9a805dd9..e391310c9 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -10,6 +10,8 @@ const props = withDefaults(
      * Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
      */
     'aria-keyshortcuts'?: never
+
+    'classicon'?: string
   }>(),
   {
     type: 'button',
@@ -39,6 +41,11 @@ defineExpose({
     :disabled="disabled ? true : undefined"
     :aria-keyshortcuts="keyshortcut"
   >
+    <span
+      v-if="classicon"
+      :class="[variant === 'tag' ? 'size-3' : 'size-4', classicon]"
+      aria-hidden="true"
+    />
     <slot />
     <kbd
       v-if="keyshortcut"
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 652641c05..802434fec 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -20,6 +20,8 @@ const props = withDefaults(
        * Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
        */
       'aria-keyshortcuts'?: never
+
+      'classicon'?: string
     } &
       /** This makes sure the link always has either `to` or `href` */
       (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
@@ -61,6 +63,11 @@ const props = withDefaults(
     :href="href"
     :aria-keyshortcuts="keyshortcut"
   >
+    <span
+      v-if="classicon"
+      :class="[variant === 'tag' ? 'size-3' : 'size-4', classicon]"
+      aria-hidden="true"
+    />
     <slot />
     <kbd
       v-if="keyshortcut"
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 2d97580e4..d325c92d9 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -58,22 +58,21 @@ const typesHref = computed(() => {
     <!-- TypeScript types badge -->
     <li v-if="!props.isBinary" class="contents">
       <TooltipApp :text="typesTooltip">
-        <LinkBase v-if="typesHref" variant="tag" :to="typesHref">
-          <span class="w-3 h-3 i-carbon-checkmark" aria-hidden="true" />
+        <LinkBase v-if="typesHref" variant="tag" :to="typesHref" classicon="i-carbon-checkmark">
           {{ $t('package.metrics.types_label') }}
         </LinkBase>
-        <TagStatic v-else :variant="hasTypes ? 'default' : 'disabled'" :tabindex="0">
-          <span
-            v-if="isLoading"
-            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
-            aria-hidden="true"
-          />
-          <span
-            v-else
-            class="w-3 h-3"
-            :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
-            aria-hidden="true"
-          />
+        <TagStatic
+          v-else
+          :variant="hasTypes && !isLoading ? 'default' : 'disabled'"
+          :tabindex="0"
+          :classicon="
+            isLoading
+              ? 'i-carbon-circle-dash motion-safe:animate-spin'
+              : hasTypes
+                ? 'i-carbon-checkmark'
+                : 'i-carbon-close'
+          "
+        >
           {{ $t('package.metrics.types_label') }}
         </TagStatic>
       </TooltipApp>
@@ -84,18 +83,17 @@ const typesHref = computed(() => {
       <TooltipApp
         :text="isLoading ? '' : hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
       >
-        <TagStatic tabindex="0" :variant="hasEsm && !isLoading ? 'default' : 'disabled'">
-          <span
-            v-if="isLoading"
-            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
-            aria-hidden="true"
-          />
-          <span
-            v-else
-            class="w-3 h-3"
-            :class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
-            aria-hidden="true"
-          />
+        <TagStatic
+          tabindex="0"
+          :variant="hasEsm && !isLoading ? 'default' : 'disabled'"
+          :classicon="
+            isLoading
+              ? 'i-carbon-circle-dash motion-safe:animate-spin'
+              : hasEsm
+                ? 'i-carbon-checkmark'
+                : 'i-carbon-close'
+          "
+        >
           ESM
         </TagStatic>
       </TooltipApp>
@@ -104,13 +102,13 @@ const typesHref = computed(() => {
     <!-- CJS badge -->
     <li v-if="isLoading || hasCjs" class="contents">
       <TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')">
-        <TagStatic tabindex="0" :variant="isLoading ? 'disabled' : 'default'">
-          <span
-            v-if="isLoading"
-            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
-            aria-hidden="true"
-          />
-          <span v-else class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
+        <TagStatic
+          tabindex="0"
+          :variant="isLoading ? 'disabled' : 'default'"
+          :classicon="
+            isLoading ? 'i-carbon-circle-dash motion-safe:animate-spin' : 'i-carbon-checkmark'
+          "
+        >
           CJS
         </TagStatic>
       </TooltipApp>
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index e1afe90f1..aba6a2ed9 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 const props = withDefaults(
-  defineProps<{ as?: string | Component; variant?: 'disabled' | 'default' }>(),
+  defineProps<{
+    as?: string | Component
+    variant?: 'disabled' | 'default'
+
+    classicon?: string
+  }>(),
   { as: 'span', variant: 'default' },
 )
 </script>
@@ -11,6 +16,7 @@ const props = withDefaults(
     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="{ 'opacity-40': variant === 'disabled' }"
   >
+    <span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
     <slot />
   </component>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 596b4c477..78a272f69 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -96,9 +96,12 @@ defineOgImageComponent('Default', {
                   @input="handleInput"
                 />
 
-                <ButtonBase type="submit" variant="primary" class="absolute inset-ie-2">
-                  <span class="i-carbon:search align-middle w-4 h-4" aria-hidden="true"></span>
-
+                <ButtonBase
+                  type="submit"
+                  variant="primary"
+                  class="absolute inset-ie-2"
+                  classicon="i-carbon:search"
+                >
                   <span class="sr-only sm:not-sr-only">
                     {{ $t('search.button') }}
                   </span>
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 2e6b20042..138a682dd 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -576,9 +576,8 @@ onKeyStroke(
                   variant="tag"
                   href="#provenance"
                   :aria-label="$t('package.provenance_section.view_more_details')"
-                >
-                  <span class="i-lucide-shield-check w-3.5 h-3.5 shrink-0" aria-hidden="true" />
-                </LinkBase>
+                  classicon="i-lucide-shield-check"
+                />
               </TooltipApp>
             </template>
             <span
@@ -650,24 +649,29 @@ onKeyStroke(
             :aria-label="$t('package.navigation')"
             class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
           >
-            <LinkBase variant="button-secondary" v-if="docsLink" :to="docsLink" keyshortcut="d">
-              <span class="i-carbon:document w-3 h-3" aria-hidden="true" />
+            <LinkBase
+              variant="button-secondary"
+              v-if="docsLink"
+              :to="docsLink"
+              keyshortcut="d"
+              classicon="i-carbon:document"
+            >
               {{ $t('package.links.docs') }}
             </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
               keyshortcut="."
+              classicon="i-carbon:code"
             >
-              <span class="i-carbon:code w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.code') }}
             </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="{ path: '/compare', query: { packages: pkg.name } }"
               keyshortcut="c"
+              classicon="i-carbon:compare"
             >
-              <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.compare') }}
             </LinkBase>
           </nav>
@@ -695,8 +699,8 @@ onKeyStroke(
                 :href="repositoryUrl"
                 target="_blank"
                 rel="noopener noreferrer"
+                :classicon="repoProviderIcon"
               >
-                <span class="w-4 h-4" :class="repoProviderIcon" aria-hidden="true" />
                 <span v-if="repoRef">
                   {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
                 </span>
@@ -709,8 +713,8 @@ onKeyStroke(
                 :href="starsLink"
                 target="_blank"
                 rel="noopener noreferrer"
+                classicon="i-carbon:star"
               >
-                <span class="w-4 h-4 i-carbon:star" aria-hidden="true" />
                 {{ formatCompactNumber(stars, { decimals: 1 }) }}
               </LinkBase>
             </li>
@@ -720,8 +724,8 @@ onKeyStroke(
                 :href="forksLink"
                 target="_blank"
                 rel="noopener noreferrer"
+                classicon="i-carbon:fork"
               >
-                <span class="i-carbon:fork w-4 h-4" aria-hidden="true" />
                 {{ formatCompactNumber(forks, { decimals: 1 }) }}
               </LinkBase>
             </li>
@@ -731,8 +735,8 @@ onKeyStroke(
                 :href="homepageUrl"
                 target="_blank"
                 rel="noopener noreferrer"
+                classicon="i-carbon:link"
               >
-                <span class="i-carbon:link w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.homepage') }}
               </LinkBase>
             </li>
@@ -742,8 +746,8 @@ onKeyStroke(
                 :href="displayVersion.bugs.url"
                 target="_blank"
                 rel="noopener noreferrer"
+                classicon="i-carbon:warning"
               >
-                <span class="i-carbon:warning w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.issues') }}
               </LinkBase>
             </li>
@@ -754,8 +758,8 @@ onKeyStroke(
                 target="_blank"
                 rel="noopener noreferrer"
                 :title="$t('common.view_on_npm')"
+                classicon="i-carbon:logo-npm"
               >
-                <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
                 npm
               </LinkBase>
             </li>
@@ -766,8 +770,8 @@ onKeyStroke(
                 target="_blank"
                 rel="noopener noreferrer"
                 :title="$t('badges.jsr.title')"
+                classicon="i-simple-icons:jsr"
               >
-                <span class="i-simple-icons:jsr w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.jsr') }}
               </LinkBase>
             </li>
@@ -777,15 +781,14 @@ onKeyStroke(
                 :href="fundingUrl"
                 target="_blank"
                 rel="noopener noreferrer"
+                classicon="i-carbon:favorite"
               >
-                <span class="i-carbon:favorite w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.fund') }}
               </LinkBase>
             </li>
             <!-- Mobile-only: Docs + Code + Compare links -->
             <li v-if="docsLink && displayVersion" class="sm:hidden">
-              <LinkBase variant="button-secondary" :to="docsLink">
-                <span class="i-carbon:document w-4 h-4" aria-hidden="true" />
+              <LinkBase variant="button-secondary" :to="docsLink" classicon="i-carbon:document">
                 {{ $t('package.links.docs') }}
               </LinkBase>
             </li>
@@ -793,8 +796,8 @@ onKeyStroke(
               <LinkBase
                 variant="button-secondary"
                 :to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
+                classicon="i-carbon:code"
               >
-                <span class="i-carbon:code w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.code') }}
               </LinkBase>
             </li>
@@ -802,8 +805,8 @@ onKeyStroke(
               <LinkBase
                 variant="button-secondary"
                 :to="{ path: '/compare', query: { packages: pkg.name } }"
+                classicon="i-carbon:compare"
               >
-                <span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.compare') }}
               </LinkBase>
             </li>
@@ -883,8 +886,8 @@ onKeyStroke(
                   target="_blank"
                   rel="noopener noreferrer"
                   :title="$t('package.stats.view_dependency_graph')"
+                  classicon="i-carbon:network-3"
                 >
-                  <span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
                   <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
                 </LinkBase>
 
@@ -895,8 +898,8 @@ onKeyStroke(
                   target="_blank"
                   rel="noopener noreferrer"
                   :title="$t('package.stats.inspect_dependency_tree')"
+                  classicon="i-carbon:tree-view"
                 >
-                  <span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />
                   <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
                 </LinkBase>
               </div>

From 886c60ea313b26e6ce1542644dcaf57b1ec77528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 03:36:14 +0100
Subject: [PATCH 24/91] feat: automatically show external link icon

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

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 1bf7e1cf1..0f64319eb 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -20,19 +20,15 @@ const isHome = computed(() => route.name === 'index')
           </LinkBase>
           <LinkBase href="https://docs.npmx.dev" target="_blank" rel="noopener noreferrer">
             {{ $t('footer.docs') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </LinkBase>
           <LinkBase href="https://repo.npmx.dev" target="_blank" rel="noopener noreferrer">
             {{ $t('footer.source') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </LinkBase>
           <LinkBase href="https://social.npmx.dev" target="_blank" rel="noopener noreferrer">
             {{ $t('footer.social') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </LinkBase>
           <LinkBase href="https://chat.npmx.dev" target="_blank" rel="noopener noreferrer">
             {{ $t('footer.chat') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </LinkBase>
         </div>
       </div>
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 802434fec..0848bb54d 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -47,11 +47,11 @@ const props = withDefaults(
   /></span>
   <NuxtLink
     v-else
-    class="group"
+    class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
       'text-fg underline-offset-4 underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
         variant === 'link',
-      'gap-x-1 inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+      'gap-x-1 font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant !== 'link',
       'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
       'text-xs px-2 py-0.5': variant === 'tag',
@@ -69,6 +69,8 @@ const props = withDefaults(
       aria-hidden="true"
     />
     <slot />
+    <!-- automatically show icon indicating external link -->
+    <span v-if="href" class="i-carbon:launch rtl-flip w-3 h-3 opacity-50" aria-hidden="true" />
     <kbd
       v-if="keyshortcut"
       class="inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"

From b070507c9c722803461688fc77bc1395df005f4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 03:44:44 +0100
Subject: [PATCH 25/91] feat: add button group

---
 app/components/Button/Group.vue    | 7 +++++++
 app/pages/package/[...package].vue | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 app/components/Button/Group.vue

diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
new file mode 100644
index 000000000..3af927c71
--- /dev/null
+++ b/app/components/Button/Group.vue
@@ -0,0 +1,7 @@
+<template>
+  <nav
+    class="flex items-center shrink-0 ms-auto [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none"
+  >
+    <slot />
+  </nav>
+</template>
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 138a682dd..18596b799 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -644,10 +644,10 @@ onKeyStroke(
           </div>
 
           <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
-          <nav
+          <ButtonGroup
             v-if="resolvedVersion"
             :aria-label="$t('package.navigation')"
-            class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
+            class="hidden sm:flex"
           >
             <LinkBase
               variant="button-secondary"
@@ -674,7 +674,7 @@ onKeyStroke(
             >
               {{ $t('package.links.compare') }}
             </LinkBase>
-          </nav>
+          </ButtonGroup>
         </div>
       </header>
 

From bf06a1e6f7e1cb5190c72ccb2bce1f2cf899b7cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 03:57:34 +0100
Subject: [PATCH 26/91] feat: automatically open all external links in new
 window

---
 app/components/AppFooter.vue         |  8 ++--
 app/components/Link/Base.vue         | 12 ++++++
 app/pages/about.vue                  | 16 ++++----
 app/pages/package-code/[...path].vue |  6 ---
 app/pages/package/[...package].vue   | 55 ++++------------------------
 5 files changed, 30 insertions(+), 67 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 0f64319eb..5ec73499e 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -18,16 +18,16 @@ const isHome = computed(() => route.name === 'index')
           <LinkBase to="/about">
             {{ $t('footer.about') }}
           </LinkBase>
-          <LinkBase href="https://docs.npmx.dev" target="_blank" rel="noopener noreferrer">
+          <LinkBase href="https://docs.npmx.dev">
             {{ $t('footer.docs') }}
           </LinkBase>
-          <LinkBase href="https://repo.npmx.dev" target="_blank" rel="noopener noreferrer">
+          <LinkBase href="https://repo.npmx.dev">
             {{ $t('footer.source') }}
           </LinkBase>
-          <LinkBase href="https://social.npmx.dev" target="_blank" rel="noopener noreferrer">
+          <LinkBase href="https://social.npmx.dev">
             {{ $t('footer.social') }}
           </LinkBase>
-          <LinkBase href="https://chat.npmx.dev" target="_blank" rel="noopener noreferrer">
+          <LinkBase href="https://chat.npmx.dev">
             {{ $t('footer.chat') }}
           </LinkBase>
         </div>
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 0848bb54d..02e6c08bc 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -21,6 +21,16 @@ const props = withDefaults(
        */
       'aria-keyshortcuts'?: never
 
+      /**
+       * Don't use this directly. This will automatically be set to `_blank` if `href` for external links.
+       */
+      'target'?: never
+
+      /**
+       * Don't use this directly. This will automatically be set to `_blank` if `href` for external links.
+       */
+      'rel'?: never
+
       'classicon'?: string
     } &
       /** This makes sure the link always has either `to` or `href` */
@@ -62,6 +72,8 @@ const props = withDefaults(
     :to="to"
     :href="href"
     :aria-keyshortcuts="keyshortcut"
+    :target="href ? '_blank' : undefined"
+    :rel="href ? 'noopener noreferrer' : undefined"
   >
     <span
       v-if="classicon"
diff --git a/app/pages/about.vue b/app/pages/about.vue
index d8c36723f..36f95ccd8 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -74,9 +74,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 <strong class="text-fg">{{ $t('about.what_we_are.better_ux_dx') }}</strong>
               </template>
               <template #jsr>
-                <LinkBase href="https://jsr.io/" target="_blank" rel="noopener noreferrer"
-                  >JSR</LinkBase
-                >
+                <LinkBase href="https://jsr.io/">JSR</LinkBase>
               </template>
             </i18n-t>
           </p>
@@ -108,32 +106,32 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 >
                   <template #already>{{ $t('about.what_we_are_not.words.already') }}</template>
                   <template #people>
-                    <LinkBase :href="pmLinks.npm" target="_blank" rel="noopener noreferrer">{{
+                    <LinkBase :href="pmLinks.npm">{{
                       $t('about.what_we_are_not.words.people')
                     }}</LinkBase>
                   </template>
                   <template #building>
-                    <LinkBase :href="pmLinks.pnpm" target="_blank" rel="noopener noreferrer">{{
+                    <LinkBase :href="pmLinks.pnpm">{{
                       $t('about.what_we_are_not.words.building')
                     }}</LinkBase>
                   </template>
                   <template #really>
-                    <LinkBase :href="pmLinks.yarn" target="_blank" rel="noopener noreferrer">{{
+                    <LinkBase :href="pmLinks.yarn">{{
                       $t('about.what_we_are_not.words.really')
                     }}</LinkBase>
                   </template>
                   <template #cool>
-                    <LinkBase :href="pmLinks.bun" target="_blank" rel="noopener noreferrer">{{
+                    <LinkBase :href="pmLinks.bun">{{
                       $t('about.what_we_are_not.words.cool')
                     }}</LinkBase>
                   </template>
                   <template #package>
-                    <LinkBase :href="pmLinks.deno" target="_blank" rel="noopener noreferrer">{{
+                    <LinkBase :href="pmLinks.deno">{{
                       $t('about.what_we_are_not.words.package')
                     }}</LinkBase>
                   </template>
                   <template #managers>
-                    <LinkBase :href="pmLinks.vlt" target="_blank" rel="noopener noreferrer">{{
+                    <LinkBase :href="pmLinks.vlt">{{
                       $t('about.what_we_are_not.words.managers')
                     }}</LinkBase>
                   </template>
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index 1ed20fdba..b64b32f81 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -493,12 +493,9 @@ defineOgImageComponent('Default', {
           <LinkBase
             variant="button-secondary"
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-            target="_blank"
-            rel="noopener noreferrer"
             class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
-            <span class="i-carbon:launch w-4 h-4" />
           </LinkBase>
         </div>
 
@@ -548,12 +545,9 @@ defineOgImageComponent('Default', {
           <LinkBase
             variant="button-secondary"
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-            target="_blank"
-            rel="noopener noreferrer"
             class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
-            <span class="i-carbon:launch w-4 h-4" />
           </LinkBase>
         </div>
 
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 18596b799..815b64f60 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -697,8 +697,6 @@ onKeyStroke(
               <LinkBase
                 variant="button-secondary"
                 :href="repositoryUrl"
-                target="_blank"
-                rel="noopener noreferrer"
                 :classicon="repoProviderIcon"
               >
                 <span v-if="repoRef">
@@ -708,35 +706,17 @@ onKeyStroke(
               </LinkBase>
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
-              <LinkBase
-                variant="button-secondary"
-                :href="starsLink"
-                target="_blank"
-                rel="noopener noreferrer"
-                classicon="i-carbon:star"
-              >
+              <LinkBase variant="button-secondary" :href="starsLink" classicon="i-carbon:star">
                 {{ formatCompactNumber(stars, { decimals: 1 }) }}
               </LinkBase>
             </li>
             <li v-if="forks && forksLink">
-              <LinkBase
-                variant="button-secondary"
-                :href="forksLink"
-                target="_blank"
-                rel="noopener noreferrer"
-                classicon="i-carbon:fork"
-              >
+              <LinkBase variant="button-secondary" :href="forksLink" classicon="i-carbon:fork">
                 {{ formatCompactNumber(forks, { decimals: 1 }) }}
               </LinkBase>
             </li>
             <li v-if="homepageUrl">
-              <LinkBase
-                variant="button-secondary"
-                :href="homepageUrl"
-                target="_blank"
-                rel="noopener noreferrer"
-                classicon="i-carbon:link"
-              >
+              <LinkBase variant="button-secondary" :href="homepageUrl" classicon="i-carbon:link">
                 {{ $t('package.links.homepage') }}
               </LinkBase>
             </li>
@@ -744,8 +724,6 @@ onKeyStroke(
               <LinkBase
                 variant="button-secondary"
                 :href="displayVersion.bugs.url"
-                target="_blank"
-                rel="noopener noreferrer"
                 classicon="i-carbon:warning"
               >
                 {{ $t('package.links.issues') }}
@@ -755,8 +733,6 @@ onKeyStroke(
               <LinkBase
                 variant="button-secondary"
                 :href="`https://www.npmjs.com/package/${pkg.name}`"
-                target="_blank"
-                rel="noopener noreferrer"
                 :title="$t('common.view_on_npm')"
                 classicon="i-carbon:logo-npm"
               >
@@ -767,8 +743,6 @@ onKeyStroke(
               <LinkBase
                 variant="button-secondary"
                 :href="jsrInfo.url"
-                target="_blank"
-                rel="noopener noreferrer"
                 :title="$t('badges.jsr.title')"
                 classicon="i-simple-icons:jsr"
               >
@@ -776,13 +750,7 @@ onKeyStroke(
               </LinkBase>
             </li>
             <li v-if="fundingUrl">
-              <LinkBase
-                variant="button-secondary"
-                :href="fundingUrl"
-                target="_blank"
-                rel="noopener noreferrer"
-                classicon="i-carbon:favorite"
-              >
+              <LinkBase variant="button-secondary" :href="fundingUrl" classicon="i-carbon:favorite">
                 {{ $t('package.links.fund') }}
               </LinkBase>
             </li>
@@ -883,8 +851,6 @@ onKeyStroke(
                   variant="tag"
                   v-if="getDependencyCount(displayVersion) > 0"
                   :href="`https://npmgraph.js.org/?q=${pkg.name}`"
-                  target="_blank"
-                  rel="noopener noreferrer"
                   :title="$t('package.stats.view_dependency_graph')"
                   classicon="i-carbon:network-3"
                 >
@@ -895,8 +861,6 @@ onKeyStroke(
                   variant="tag"
                   v-if="getDependencyCount(displayVersion) > 0"
                   :href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
-                  target="_blank"
-                  rel="noopener noreferrer"
                   :title="$t('package.stats.inspect_dependency_tree')"
                   classicon="i-carbon:tree-view"
                 >
@@ -1122,14 +1086,9 @@ onKeyStroke(
         <Readme v-if="readmeData?.html" :html="readmeData.html" />
         <p v-else class="text-fg-subtle italic">
           {{ $t('package.readme.no_readme') }}
-          <a
-            v-if="repositoryUrl"
-            :href="repositoryUrl"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link"
-            >{{ $t('package.readme.view_on_github') }}</a
-          >
+          <a v-if="repositoryUrl" :href="repositoryUrl" class="link">{{
+            $t('package.readme.view_on_github')
+          }}</a>
         </p>
 
         <section

From 7b860d14207cee7de0a5d9a4689cf9042c5652f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 04:19:53 +0100
Subject: [PATCH 27/91] fix: layout

---
 app/pages/package/[...package].vue | 55 ++++++++++++++++--------------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 815b64f60..b9049f4a4 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -818,35 +818,38 @@ onKeyStroke(
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">
               {{ $t('package.stats.deps') }}
             </dt>
-            <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
-              <!-- Direct deps (muted) -->
-              <span class="text-fg-muted">{{ getDependencyCount(displayVersion) }}</span>
+            <dd class="font-mono text-sm text-fg">
+              <span class="flex items-center justify-start gap-2">
+                <!-- Direct deps (muted) -->
+                <span class="text-fg-muted">{{ getDependencyCount(displayVersion) }}</span>
 
-              <!-- Separator and total transitive deps -->
-              <template v-if="getDependencyCount(displayVersion) !== totalDepsCount">
-                <span class="text-fg-subtle mx-1">/</span>
+                <!-- Separator and total transitive deps -->
+                <template v-if="getDependencyCount(displayVersion) !== totalDepsCount">
+                  <span class="text-fg-subtle mx-1">/</span>
 
-                <ClientOnly>
-                  <span
-                    v-if="
-                      vulnTreeStatus === 'pending' || (installSizeStatus === 'pending' && !vulnTree)
-                    "
-                    class="inline-flex items-center gap-1 text-fg-subtle"
-                  >
+                  <ClientOnly>
                     <span
-                      class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
-                      aria-hidden="true"
-                    />
-                  </span>
-                  <span v-else-if="totalDepsCount !== null">{{ totalDepsCount }}</span>
-                  <span v-else class="text-fg-subtle">-</span>
-                  <template #fallback>
-                    <span class="text-fg-subtle">-</span>
-                  </template>
-                </ClientOnly>
-              </template>
+                      v-if="
+                        vulnTreeStatus === 'pending' ||
+                        (installSizeStatus === 'pending' && !vulnTree)
+                      "
+                      class="inline-flex items-center gap-1 text-fg-subtle"
+                    >
+                      <span
+                        class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span v-else-if="totalDepsCount !== null">{{ totalDepsCount }}</span>
+                    <span v-else class="text-fg-subtle">-</span>
+                    <template #fallback>
+                      <span class="text-fg-subtle">-</span>
+                    </template>
+                  </ClientOnly>
+                </template>
+              </span>
 
-              <div class="flex items-center gap-1">
+              <span class="flex items-center gap-1">
                 <LinkBase
                   variant="tag"
                   v-if="getDependencyCount(displayVersion) > 0"
@@ -866,7 +869,7 @@ onKeyStroke(
                 >
                   <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
                 </LinkBase>
-              </div>
+              </span>
             </dd>
           </div>
 

From 1bfa878a047af7d2361977ad2c0061d568d13709 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 04:37:10 +0100
Subject: [PATCH 28/91] refactor: use design components for package sidebar

---
 app/components/Link/Base.vue                  |   2 +-
 app/components/Package/Dependencies.vue       |  60 ++++------
 app/components/Package/InstallScripts.vue     |   4 +-
 app/components/Package/Maintainers.vue        |  37 +++---
 app/components/Package/Versions.vue           | 110 ++++++------------
 .../Package/WeeklyDownloadStats.vue           |   6 +-
 6 files changed, 83 insertions(+), 136 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 02e6c08bc..c6fbeb5a1 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -59,7 +59,7 @@ const props = withDefaults(
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'text-fg underline-offset-4 underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
+      'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
         variant === 'link',
       'gap-x-1 font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant !== 'link',
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 965a67712..41a56ac65 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -81,12 +81,9 @@ const sortedOptionalDependencies = computed(() => {
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <NuxtLink
-            :to="{ name: 'package', params: { package: dep.split('/') } }"
-            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
-          >
+          <LinkBase :to="{ name: 'package', params: { package: dep.split('/') } }">
             {{ dep }}
-          </NuxtLink>
+          </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]">
             <span
               v-if="outdatedDeps[dep]"
@@ -97,7 +94,7 @@ const sortedOptionalDependencies = computed(() => {
             >
               <span class="i-carbon:warning-alt w-3 h-3" />
             </span>
-            <NuxtLink
+            <LinkBase
               v-if="getVulnerableDepInfo(dep)"
               :to="{
                 name: 'package',
@@ -106,11 +103,11 @@ const sortedOptionalDependencies = computed(() => {
               class="shrink-0"
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
+              iconclass="i-carbon:security"
             >
-              <span class="i-carbon:security w-3 h-3" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
               v-if="getDeprecatedDepInfo(dep)"
               :to="{
                 name: 'package',
@@ -118,21 +115,21 @@ const sortedOptionalDependencies = computed(() => {
               }"
               class="shrink-0 text-purple-500"
               :title="getDeprecatedDepInfo(dep)!.message"
+              iconclass="i-carbon:warning-hex"
             >
-              <span class="i-carbon-warning-hex w-3 h-3" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
               :to="{
                 name: 'package',
                 params: { package: [...dep.split('/'), 'v', version] },
               }"
-              class="font-mono text-xs text-end truncate"
+              class="truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version"
             >
               {{ version }}
-            </NuxtLink>
+            </LinkBase>
             <span v-if="outdatedDeps[dep]" class="sr-only">
               ({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
             </span>
@@ -173,33 +170,29 @@ const sortedOptionalDependencies = computed(() => {
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
           <div class="flex items-center gap-1 min-w-0 flex-1">
-            <NuxtLink
+            <LinkBase
               :to="{
                 name: 'package',
                 params: { package: peer.name.split('/') },
               }"
-              class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
+              class="truncate"
             >
               {{ peer.name }}
-            </NuxtLink>
-            <span
-              v-if="peer.optional"
-              class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
-              :title="$t('package.dependencies.optional')"
-            >
+            </LinkBase>
+            <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
               {{ $t('package.dependencies.optional') }}
-            </span>
+            </TagStatic>
           </div>
-          <NuxtLink
+          <LinkBase
             :to="{
               name: 'package',
               params: { package: [...peer.name.split('/'), 'v', peer.version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] truncate"
+            class="truncate"
             :title="peer.version"
           >
             {{ peer.version }}
-          </NuxtLink>
+          </LinkBase>
         </li>
       </ul>
       <button
@@ -238,28 +231,25 @@ const sortedOptionalDependencies = computed(() => {
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <NuxtLink
-            :to="{ name: 'package', params: { package: dep.split('/') } }"
-            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
-          >
+          <LinkBase :to="{ name: 'package', params: { package: dep.split('/') } }" class="truncate">
             {{ dep }}
-          </NuxtLink>
-          <NuxtLink
+          </LinkBase>
+          <LinkBase
             :to="{
               name: 'package',
               params: { package: [...dep.split('/'), 'v', version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
+            class="truncate"
             :title="version"
           >
             {{ version }}
-          </NuxtLink>
+          </LinkBase>
         </li>
       </ul>
       <button
         v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
+        class="mt-2 truncate"
         @click="optionalDepsExpanded = true"
       >
         {{
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index dde493782..492a202da 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -72,12 +72,12 @@ const isExpanded = shallowRef(false)
           :key="dep"
           class="flex items-center justify-between py-0.5 text-sm gap-2"
         >
-          <NuxtLink
+          <LinkBase
             :to="{ name: 'package', params: { package: dep.split('/') } }"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}
-          </NuxtLink>
+          </LinkBase>
           <span class="flex items-center gap-1">
             <span
               v-if="
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index 2ef84d492..b222eab80 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -183,7 +183,7 @@ watch(
         class="flex items-center justify-between gap-2"
       >
         <div class="flex items-center gap-2 min-w-0">
-          <NuxtLink
+          <LinkBase
             v-if="maintainer.name"
             :to="{
               name: '~username',
@@ -192,7 +192,7 @@ watch(
             class="link-subtle font-mono text-sm shrink-0"
           >
             ~{{ maintainer.name }}
-          </NuxtLink>
+          </LinkBase>
           <span v-else class="font-mono text-sm text-fg-muted">{{ maintainer.email }}</span>
 
           <!-- Access source badges -->
@@ -214,10 +214,10 @@ watch(
         </div>
 
         <!-- Remove button (only when can manage and not self) -->
-        <button
+        <ButtonBase
           v-if="canManageOwners && maintainer.name && maintainer.name !== npmUser"
           type="button"
-          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-accent/70"
+          class="hover:text-red-400"
           :aria-label="
             $t('package.maintainers.remove_owner', {
               name: maintainer.name,
@@ -226,15 +226,13 @@ watch(
           @click="handleRemoveOwner(maintainer.name)"
         >
           <span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
-        </button>
+        </ButtonBase>
       </li>
     </ul>
 
     <!-- Show more/less toggle (only when not managing and there are hidden maintainers) -->
-    <button
+    <ButtonBase
       v-if="!canManageOwners && hiddenMaintainersCount > 0"
-      type="button"
-      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
       @click="showAllMaintainers = !showAllMaintainers"
     >
       {{
@@ -244,7 +242,7 @@ watch(
               count: hiddenMaintainersCount,
             })
       }}
-    </button>
+    </ButtonBase>
 
     <!-- Add owner form (only when can manage) -->
     <div v-if="canManageOwners" class="mt-3">
@@ -262,31 +260,24 @@ watch(
             v-bind="noCorrect"
             class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
           />
-          <button
-            type="submit"
-            :disabled="!newOwnerUsername.trim() || isAdding"
-            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
-          >
+          <ButtonBase type="submit" :disabled="!newOwnerUsername.trim() || isAdding">
             {{ isAdding ? '…' : $t('package.maintainers.add_button') }}
-          </button>
-          <button
-            type="button"
-            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
+          </ButtonBase>
+          <ButtonBase
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
-          >
-            <span class="i-carbon-close w-4 h-4" aria-hidden="true" />
-          </button>
+            iconclass="i-carbon-close"
+          />
         </form>
       </div>
-      <button
+      <ButtonBase
         v-else
         type="button"
         class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
         @click="showAddOwner = true"
       >
         {{ $t('package.maintainers.add_owner') }}
-      </button>
+      </ButtonBase>
     </div>
   </CollapsibleSection>
 </template>
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 9461da3d8..e114ebc45 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -307,16 +307,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
     id="versions"
   >
     <template #actions>
-      <a
+      <LinkBase
+        variant="button-secondary"
         :href="`https://majors.nullvoxpopuli.com/q?packages=${packageName}`"
-        target="_blank"
-        rel="noopener noreferrer"
-        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.community_distribution')"
+        classicon="i-carbon:load-balancer-network"
       >
-        <span class="i-carbon:load-balancer-network w-3.5 h-3.5" aria-hidden="true" />
         <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
-      </a>
+      </LinkBase>
     </template>
     <div class="space-y-0.5 min-w-0">
       <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
@@ -360,13 +358,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
             <div class="overflow-hidden">
               <div>
-                <NuxtLink
+                <LinkBase
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent"
+                  class="text-sm"
                   :class="
-                    row.primaryVersion.deprecated
-                      ? 'text-red-400 hover:text-red-300'
-                      : 'text-fg-muted hover:text-fg'
+                    row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                   "
                   :title="
                     row.primaryVersion.deprecated
@@ -375,14 +371,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
                         })
                       : row.primaryVersion.version
                   "
+                  :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
                 >
-                  <span
-                    v-if="row.primaryVersion.deprecated"
-                    class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
-                    aria-hidden="true"
-                  />
                   {{ row.primaryVersion.version }}
-                </NuxtLink>
+                </LinkBase>
               </div>
               <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
                 <span
@@ -421,27 +413,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
         >
           <div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
             <div class="flex items-center justify-between gap-2">
-              <NuxtLink
+              <LinkBase
                 :to="versionRoute(v.version)"
-                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
-                :class="
-                  v.deprecated
-                    ? 'text-red-400 hover:text-red-300'
-                    : 'text-fg-subtle hover:text-fg-muted'
-                "
+                class="text-xs truncate"
+                :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                 :title="
                   v.deprecated
                     ? $t('package.versions.deprecated_title', { version: v.version })
                     : v.version
                 "
+                :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
               >
-                <span
-                  v-if="v.deprecated"
-                  class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                  aria-hidden="true"
-                />
                 {{ v.version }}
-              </NuxtLink>
+              </LinkBase>
               <div class="flex items-center gap-2 shrink-0">
                 <DateTime
                   v-if="v.time"
@@ -524,13 +508,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <!-- Hidden tag rows (overflow from visible tags) -->
           <div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
             <div class="flex items-center justify-between gap-2">
-              <NuxtLink
+              <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                class="text-xs truncate"
                 :class="
-                  row.primaryVersion.deprecated
-                    ? 'text-red-400 hover:text-red-300'
-                    : 'text-fg-muted hover:text-fg'
+                  row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                 "
                 :title="
                   row.primaryVersion.deprecated
@@ -539,14 +521,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       })
                     : row.primaryVersion.version
                 "
+                :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
               >
-                <span
-                  v-if="row.primaryVersion.deprecated"
-                  class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                  aria-hidden="true"
-                />
                 {{ row.primaryVersion.version }}
-              </NuxtLink>
+              </LinkBase>
               <div class="flex items-center gap-2 shrink-0 pe-2">
                 <DateTime
                   v-if="row.primaryVersion.time"
@@ -599,14 +577,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
                         aria-hidden="true"
                       />
                     </button>
-                    <NuxtLink
+                    <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="text-xs truncate"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
-                          : 'text-fg-muted hover:text-fg'
+                          : undefined
                       "
                       :title="
                         group.versions[0]?.deprecated
@@ -615,14 +593,12 @@ function getTagVersions(tag: string): VersionDisplay[] {
                             })
                           : group.versions[0]?.version
                       "
+                      :classicon="
+                        group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
+                      "
                     >
-                      <span
-                        v-if="group.versions[0]?.deprecated"
-                        class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                        aria-hidden="true"
-                      />
                       {{ group.versions[0]?.version }}
-                    </NuxtLink>
+                    </LinkBase>
                   </div>
                   <div class="flex items-center gap-2 shrink-0 pe-2">
                     <DateTime
@@ -660,14 +636,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <div class="flex items-center justify-between gap-2">
                   <div class="flex items-center gap-2 min-w-0">
                     <span class="w-4 shrink-0" />
-                    <NuxtLink
+                    <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="text-xs truncate"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
-                          : 'text-fg-muted hover:text-fg'
+                          : undefined
                       "
                       :title="
                         group.versions[0]?.deprecated
@@ -676,14 +652,12 @@ function getTagVersions(tag: string): VersionDisplay[] {
                             })
                           : group.versions[0]?.version
                       "
+                      :classicon="
+                        group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
+                      "
                     >
-                      <span
-                        v-if="group.versions[0]?.deprecated"
-                        class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                        aria-hidden="true"
-                      />
                       {{ group.versions[0]?.version }}
-                    </NuxtLink>
+                    </LinkBase>
                   </div>
                   <div class="flex items-center gap-2 shrink-0 pe-2">
                     <DateTime
@@ -720,27 +694,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
               >
                 <div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
                   <div class="flex items-center justify-between gap-2">
-                    <NuxtLink
+                    <LinkBase
                       :to="versionRoute(v.version)"
-                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
-                      :class="
-                        v.deprecated
-                          ? 'text-red-400 hover:text-red-300'
-                          : 'text-fg-subtle hover:text-fg-muted'
-                      "
+                      class="text-xs truncate"
+                      :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                       :title="
                         v.deprecated
                           ? $t('package.versions.deprecated_title', { version: v.version })
                           : v.version
                       "
+                      :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
                     >
-                      <span
-                        v-if="v.deprecated"
-                        class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                        aria-hidden="true"
-                      />
                       {{ v.version }}
-                    </NuxtLink>
+                    </LinkBase>
                     <div class="flex items-center gap-2 shrink-0 pe-2">
                       <DateTime
                         v-if="v.time"
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 67a797e78..df6d819f2 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -200,15 +200,15 @@ const config = computed(() => {
   <div class="space-y-8">
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
-        <button
+        <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"
         >
-          <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />
           <span class="sr-only">{{ $t('package.downloads.analyze') }}</span>
-        </button>
+        </ButtonBase>
       </template>
 
       <div class="w-full overflow-hidden">

From 930a25e3703d6ef4534eaeb711d45bc5b706c709 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 04:38:27 +0100
Subject: [PATCH 29/91] refactor: use design components in footer build infos

---
 app/components/BuildEnvironment.vue | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/app/components/BuildEnvironment.vue b/app/components/BuildEnvironment.vue
index 6482f2bb9..0483627ef 100644
--- a/app/components/BuildEnvironment.vue
+++ b/app/components/BuildEnvironment.vue
@@ -17,27 +17,19 @@ const buildInfo = useAppConfig().buildInfo
       <NuxtTime :datetime="buildInfo.time" :locale="locale" relative />
     </i18n-t>
     <span>&middot;</span>
-    <NuxtLink
+    <LinkBase
       v-if="buildInfo.env === 'release'"
-      external
       :href="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
-      target="_blank"
-      class="hover:text-fg transition-colors"
     >
       v{{ buildInfo.version }}
-    </NuxtLink>
+    </LinkBase>
     <span v-else class="tracking-wider">{{ buildInfo.env }}</span>
 
     <template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
       <span>&middot;</span>
-      <NuxtLink
-        external
-        :href="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`"
-        target="_blank"
-        class="hover:text-fg transition-colors"
-      >
+      <LinkBase :href="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`">
         {{ buildInfo.shortCommit }}
-      </NuxtLink>
+      </LinkBase>
     </template>
   </div>
 </template>

From 1a8ba38f700d69d0a16c1224c5b1ba48f3c2784b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 04:48:12 +0100
Subject: [PATCH 30/91] style: use accent colors for button and links

---
 app/components/AppHeader.vue                 | 5 ++---
 app/components/Button/Base.vue               | 6 +++---
 app/components/Header/AccountMenu.client.vue | 1 -
 app/components/Link/Base.vue                 | 8 ++++----
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 13a7b24d9..8cf600be8 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -183,9 +183,8 @@ onKeyStroke(
           :aria-label="$t('nav.open_menu')"
           :aria-expanded="showMobileMenu"
           @click="showMobileMenu = !showMobileMenu"
-        >
-          <span class="w-6 h-6 inline-block i-carbon:menu" aria-hidden="true" />
-        </ButtonBase>
+          iconclass="i-carbon:menu"
+        />
       </div>
     </nav>
 
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index e391310c9..44d8b7c7c 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -33,9 +33,9 @@ defineExpose({
     :class="{
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-bg-muted text-fg-muted hover:enabled:(text-fg border-border-hover)': variant === 'tag',
-      'text-bg bg-fg hover:enabled:(bg-fg/90)': variant === 'primary',
-      'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)': variant === 'secondary',
+      'bg-transparent text-fg hover:enabled:(bg-accent/30 border-fg)':
+        variant === 'tag' || variant === 'secondary',
+      'text-bg bg-accent hover:enabled:(bg-accent/50)': variant === 'primary',
     }"
     :type="props.type"
     :disabled="disabled ? true : undefined"
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index b13b73dea..46ad71383 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -59,7 +59,6 @@ function openAuthModal() {
   <div ref="accountMenuRef" class="relative flex min-w-24 justify-end">
     <ButtonBase
       type="button"
-      class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-accent/70"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index c6fbeb5a1..dccd88cd5 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -59,15 +59,15 @@ const props = withDefaults(
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
+      'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-accent) transition-colors duration-200':
         variant === 'link',
       'gap-x-1 font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant !== 'link',
       'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
       'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-bg-muted text-fg-muted hover:(text-fg border-border-hover)': variant === 'tag',
-      'text-bg bg-fg hover:(bg-fg/90)': variant === 'button-primary',
-      'bg-transparent text-fg hover:(bg-fg text-bg border-fg)': variant === 'button-secondary',
+      'bg-transparent text-fg hover:(bg-accent/30 border-fg)':
+        variant === 'tag' || variant === 'button-secondary',
+      'text-bg bg-fg hover:(bg-accent/90)': variant === 'button-primary',
     }"
     :to="to"
     :href="href"

From a53e8656316952d67d2bee6608b39de9daeae745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 04:51:00 +0100
Subject: [PATCH 31/91] style: re-add unified focus style

---
 app/assets/main.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/assets/main.css b/app/assets/main.css
index 267f1c794..8d2fc03c2 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -181,6 +181,12 @@ body {
   line-height: 1.6;
 }
 
+*:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 /* Reset dd margin (browser default is margin-left: 40px) */
 dd {
   margin: 0;

From f0cc773f67ddacad5e1f52ac009306b020811ec7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 04:52:54 +0100
Subject: [PATCH 32/91] style: improve focus style

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

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 44d8b7c7c..e6ad62f5e 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -33,9 +33,10 @@ defineExpose({
     :class="{
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-transparent text-fg hover:enabled:(bg-accent/30 border-fg)':
+      'bg-transparent text-fg hover:enabled:(bg-accent/30 border-fg) focus-visible:enabled:(bg-accent/30 border-fg)':
         variant === 'tag' || variant === 'secondary',
-      'text-bg bg-accent hover:enabled:(bg-accent/50)': variant === 'primary',
+      'text-bg bg-accent hover:enabled:(bg-accent/50) focus-visible:enabled:(bg-accent/50)':
+        variant === 'primary',
     }"
     :type="props.type"
     :disabled="disabled ? true : undefined"
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index dccd88cd5..57892dd87 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -59,15 +59,16 @@ const props = withDefaults(
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-accent) transition-colors duration-200':
+      'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-colors duration-200':
         variant === 'link',
       'gap-x-1 font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant !== 'link',
       'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
       'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-transparent text-fg hover:(bg-accent/30 border-fg)':
+      'bg-transparent text-fg hover:(bg-accent/30 border-fg) focus-visible:(bg-accent/30 border-fg)':
         variant === 'tag' || variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-accent/90)': variant === 'button-primary',
+      'text-bg bg-fg hover:(bg-accent/90) focus-visible:(bg-accent/90)':
+        variant === 'button-primary',
     }"
     :to="to"
     :href="href"

From 1a73f88661e2a8dc03325ed832d1b4f8e6188544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 05:18:02 +0100
Subject: [PATCH 33/91] style: make buttons and links look clickable

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

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index e6ad62f5e..8600564ca 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -29,13 +29,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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
+    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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50)) bg-gradient-to-t dark:bg-gradient-to-b"
     :class="{
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-transparent text-fg hover:enabled:(bg-accent/30 border-fg) focus-visible:enabled:(bg-accent/30 border-fg)':
+      'from-fg/10 via-transparent to-transparent text-fg hover:enabled:(bg-accent/20 border-accent) focus-visible:enabled:(bg-accent/20 border-accent)':
         variant === 'tag' || variant === 'secondary',
-      'text-bg bg-accent hover:enabled:(bg-accent/50) focus-visible:enabled:(bg-accent/50)':
+      'text-black from-accent via-accent to-accent/30 hover:enabled:(bg-accent/50) focus-visible:enabled:(bg-accent/50)':
         variant === 'primary',
     }"
     :type="props.type"
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 57892dd87..53a3648d0 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -61,13 +61,13 @@ const props = withDefaults(
     :class="{
       'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-colors duration-200':
         variant === 'link',
-      'gap-x-1 font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+      'font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:(text-bg/50)) bg-gradient-to-t dark:bg-gradient-to-b':
         variant !== 'link',
       'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
       'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-transparent text-fg hover:(bg-accent/30 border-fg) focus-visible:(bg-accent/30 border-fg)':
+      'from-fg/10 via-transparent to-transparent text-fg hover:(bg-accent/20 border-accent) focus-visible:(bg-accent/20 border-accent)':
         variant === 'tag' || variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-accent/90) focus-visible:(bg-accent/90)':
+      'text-black from-accent via-accent to-accent/30 hover:(bg-accent/50) focus-visible:(bg-accent/50)':
         variant === 'button-primary',
     }"
     :to="to"

From bc47aeeb6c8b7c6e0dfe59d4e2378f94b4277c68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 05:30:26 +0100
Subject: [PATCH 34/91] fix: minor fixes

---
 app/components/AppHeader.vue | 14 ++------------
 app/pages/index.vue          |  2 +-
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 8cf600be8..043089038 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -152,22 +152,12 @@ onKeyStroke(
       <!-- End: Desktop nav items + Mobile menu button -->
       <div class="flex-shrink-0 flex items-center gap-0.5 sm:gap-2">
         <!-- Desktop: Compare link -->
-        <LinkBase
-          variant="button-secondary"
-          to="/compare"
-          class="inline-flex items-center gap-2"
-          keyshortcut="c"
-        >
+        <LinkBase variant="button-secondary" to="/compare" keyshortcut="c">
           {{ $t('nav.compare') }}
         </LinkBase>
 
         <!-- Desktop: Settings link -->
-        <LinkBase
-          variant="button-secondary"
-          to="/settings"
-          class="inline-flex items-center gap-2"
-          keyshortcut=","
-        >
+        <LinkBase variant="button-secondary" to="/settings" keyshortcut=",">
           {{ $t('nav.settings') }}
         </LinkBase>
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 78a272f69..a36a9710a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -123,7 +123,7 @@ defineOgImageComponent('Default', {
           <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
             <LinkBase
               :to="{ name: 'package', params: { package: [framework.package] } }"
-              class="inline-flex items-center gap-2 group"
+              class="gap-2"
             >
               <span
                 class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"

From b52eec5c99aaa284e2442672b154d5b4fe6c2fb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 05:30:38 +0100
Subject: [PATCH 35/91] fix: l-to-r

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

diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index 3af927c71..1ea6a808c 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="flex items-center shrink-0 ms-auto [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none"
+    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"
   >
     <slot />
   </nav>

From f65280b9c76ce529902cf6fa2704cfab53d66741 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 05:42:08 +0100
Subject: [PATCH 36/91] feat: add automatic anchor link design

---
 app/components/Link/Base.vue       | 30 ++++++++++++++++++++++++++----
 app/pages/package/[...package].vue | 22 ++++------------------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 53a3648d0..7cceb4e77 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -39,6 +39,17 @@ const props = withDefaults(
   >(),
   { variant: 'link' },
 )
+
+const isLinkExternal = computed(
+  () =>
+    !!props.href &&
+    typeof props.href === 'string' &&
+    !props.href.startsWith('/') &&
+    !props.href.startsWith('#'),
+)
+const isLinkAnchor = computed(
+  () => !!props.href && typeof props.href === 'string' && props.href.startsWith('#'),
+)
 </script>
 
 <template>
@@ -59,7 +70,9 @@ const props = withDefaults(
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-colors duration-200':
+      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/50':
+        !isLinkAnchor && variant === 'link',
+      'text-fg hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-colors duration-200':
         variant === 'link',
       'font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:(text-bg/50)) bg-gradient-to-t dark:bg-gradient-to-b':
         variant !== 'link',
@@ -73,8 +86,8 @@ const props = withDefaults(
     :to="to"
     :href="href"
     :aria-keyshortcuts="keyshortcut"
-    :target="href ? '_blank' : undefined"
-    :rel="href ? 'noopener noreferrer' : undefined"
+    :target="isLinkExternal ? '_blank' : undefined"
+    :rel="isLinkExternal ? 'noopener noreferrer' : undefined"
   >
     <span
       v-if="classicon"
@@ -83,7 +96,16 @@ const props = withDefaults(
     />
     <slot />
     <!-- automatically show icon indicating external link -->
-    <span v-if="href" class="i-carbon:launch rtl-flip w-3 h-3 opacity-50" aria-hidden="true" />
+    <span
+      v-if="isLinkExternal"
+      class="i-carbon:launch rtl-flip w-3 h-3 opacity-50"
+      aria-hidden="true"
+    />
+    <span
+      v-else-if="isLinkAnchor && variant === 'link'"
+      class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+      aria-hidden="true"
+    />
     <kbd
       v-if="keyshortcut"
       class="inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 34418a2b7..3a2907010 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -1011,16 +1011,9 @@ onKeyStroke(
             id="get-started-heading"
             class="group text-xs text-fg-subtle uppercase tracking-wider"
           >
-            <a
-              href="#get-started"
-              class="inline-flex items-center gap-1.5 py-1 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-            >
+            <LinkBase href="#get-started">
               {{ $t('package.get_started.title') }}
-              <span
-                class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                aria-hidden="true"
-              />
-            </a>
+            </LinkBase>
           </h2>
           <!-- Package manager dropdown -->
           <PackageManagerSelect />
@@ -1064,16 +1057,9 @@ onKeyStroke(
       <section id="readme" class="area-readme min-w-0 scroll-mt-20">
         <div class="flex flex-wrap items-center justify-between mb-3 px-1">
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
-            <a
-              href="#readme"
-              class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline mt-1"
-            >
+            <LinkBase href="#readme">
               {{ $t('package.readme.title') }}
-              <span
-                class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                aria-hidden="true"
-              />
-            </a>
+            </LinkBase>
           </h2>
           <ClientOnly>
             <ReadmeTocDropdown

From 858a8ab1b7e5cfe58c52012e4137c5c42a73ff0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:02:23 +0100
Subject: [PATCH 37/91] test: update tests

---
 test/nuxt/a11y.spec.ts | 58 ++++++++++++++++--------------------------
 1 file changed, 22 insertions(+), 36 deletions(-)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 34c404aba..21427c326 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -142,8 +142,6 @@ import {
   SettingsBgThemePicker,
   SettingsToggle,
   TagStatic,
-  TagButton,
-  TagLink,
   TagRadioButton,
   TerminalExecute,
   TerminalInstall,
@@ -292,46 +290,36 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('TagButton', () => {
+  describe('ButtonBase', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(TagButton, {
-        slots: { default: 'Tag content' },
-      })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-
-    it('should have no accessibility violations when pressed', async () => {
-      const component = await mountSuspended(TagButton, {
-        props: { pressed: true },
-        slots: { default: 'Tag content' },
+      const component = await mountSuspended(ButtonBase, {
+        slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations for disabled state', async () => {
-      const component = await mountSuspended(TagButton, {
+      const component = await mountSuspended(ButtonBase, {
         props: { disabled: true },
-        slots: { default: 'Tag content' },
+        slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
-  })
 
-  describe('ButtonBase', () => {
-    it('should have no accessibility violations', async () => {
+    it('should have no accessibility violations as primary button', async () => {
       const component = await mountSuspended(ButtonBase, {
+        props: { disabled: true, variant: 'primary' },
         slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations for disabled state', async () => {
+    it('should have no accessibility violations as tag', async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { disabled: true },
+        props: { disabled: true, variant: 'tag' },
         slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
@@ -339,57 +327,55 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('TagLink', () => {
+  describe('LinkBase', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(TagLink, {
+      const component = await mountSuspended(LinkBase, {
         props: { href: 'http://example.com' },
-        slots: { default: 'Tag content' },
+        slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
     it("should have no accessibility violations when it's the current link", async () => {
-      const component = await mountSuspended(TagLink, {
+      const component = await mountSuspended(LinkBase, {
         props: { href: 'http://example.com', current: true },
-        slots: { default: 'Tag content' },
+        slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations when disabled (plain text)', async () => {
-      const component = await mountSuspended(TagLink, {
+      const component = await mountSuspended(LinkBase, {
         props: { href: 'http://example.com', disabled: true },
-        slots: { default: 'Tag content' },
+        slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
-  })
 
-  describe('LinkBase', () => {
-    it('should have no accessibility violations', async () => {
+    it('should have no accessibility violations as secondary button', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { href: 'http://example.com' },
+        props: { href: 'http://example.com', disabled: true, variant: 'button-secondary' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
-    it("should have no accessibility violations when it's the current link", async () => {
+    it('should have no accessibility violations as primary button', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { href: 'http://example.com', current: true },
+        props: { href: 'http://example.com', disabled: true, variant: 'button-primary' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations when disabled (plain text)', async () => {
+    it('should have no accessibility violations as tag', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { href: 'http://example.com', disabled: true },
+        props: { href: 'http://example.com', disabled: true, variant: 'tag' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)

From 314998f96ac8b8117bb4e2f0d948041c0b3eaccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:05:36 +0100
Subject: [PATCH 38/91] fix: issue with types

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

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 7cceb4e77..97dfdb438 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -32,10 +32,10 @@ const props = withDefaults(
       'rel'?: never
 
       'classicon'?: string
-    } &
-      /** This makes sure the link always has either `to` or `href` */
-      (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
-      NuxtLinkProps
+
+      'to'?: NuxtLinkProps['to']
+      'href'?: NuxtLinkProps['href']
+    } & NuxtLinkProps
   >(),
   { variant: 'link' },
 )

From 392797e68bdde3ee7bd58f844fbe2757761c8e43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:06:32 +0100
Subject: [PATCH 39/91] fix: remove unnecessary border radius declaration

---
 app/assets/main.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 8d2fc03c2..3717f74c0 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -184,7 +184,6 @@ body {
 *:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
-  border-radius: 2px;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */

From f4cfdee21cf6854e0b0781ae88b983a58ac92e63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:07:01 +0100
Subject: [PATCH 40/91] fix: typo

---
 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 8600564ca..f5668bdb4 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -7,7 +7,7 @@ const props = withDefaults(
     'keyshortcut'?: string
 
     /**
-     * Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
+     * Don't use this directly, use `keyshortcut` instead. Correctly HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
      */
     'aria-keyshortcuts'?: never
 
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 97dfdb438..6ac9d5770 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -17,7 +17,7 @@ const props = withDefaults(
       'keyshortcut'?: string
 
       /**
-       * Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
+       * Don't use this directly, use `keyshortcut` instead. Correctly HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
        */
       'aria-keyshortcuts'?: never
 

From 41ed66a364a37b897fe3edb8f94ea27cec970cef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:08:05 +0100
Subject: [PATCH 41/91] fix: update buton

---
 app/components/ColumnPicker.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index 404f1927d..25f212885 100644
--- a/app/components/ColumnPicker.vue
+++ b/app/components/ColumnPicker.vue
@@ -71,14 +71,13 @@ function handleReset() {
   <div class="relative">
     <ButtonBase
       ref="buttonRef"
-      class="inline-flex items-center gap-1.5 px-3 py-1.5 border border-border rounded-md hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       :aria-controls="menuId"
       @click.stop="isOpen = !isOpen"
+      classicon="i-carbon-column"
     >
-      <span class="i-carbon-column w-4 h-4" aria-hidden="true" />
-      <span class="font-mono text-sm">{{ $t('filters.columns.title') }}</span>
+      {{ $t('filters.columns.title') }}
     </ButtonBase>
 
     <Transition name="dropdown">

From 95ef5d7069a650c53c8bd6c93000a5e81b62edcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:08:56 +0100
Subject: [PATCH 42/91] refactor: update button

---
 app/components/ColumnPicker.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index 25f212885..3abe7ee71 100644
--- a/app/components/ColumnPicker.vue
+++ b/app/components/ColumnPicker.vue
@@ -134,13 +134,9 @@ function handleReset() {
           </div>
 
           <div class="border-t border-border py-1">
-            <button
-              type="button"
-              class="w-full px-3 py-2 text-start text-sm font-mono text-fg-muted hover:bg-bg-muted hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
-              @click="handleReset"
-            >
+            <ButtonBase @click="handleReset">
               {{ $t('filters.columns.reset') }}
-            </button>
+            </ButtonBase>
           </div>
         </div>
       </div>

From 3654cd482a38f78e3558518be0659c9c054cf837 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:09:57 +0100
Subject: [PATCH 43/91] fix: remove stale reference

---
 app/components/Link/Base.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 6ac9d5770..97b9cf005 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -8,8 +8,6 @@ const props = withDefaults(
       'disabled'?: boolean
       /**
        * `type` should never be used, because this will always be a link.
-       *
-       * If you want a button use `TagButton` instead.
        * */
       'type'?: never
       'variant'?: 'button-primary' | 'button-secondary' | 'tag' | 'link'

From 1d2d1ba018322fa267f112d889f746d94dda3f58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:15:42 +0100
Subject: [PATCH 44/91] refactor: streamline link props and change how external
 links are recognized

---
 app/app.vue                          |  2 +-
 app/components/AppFooter.vue         |  8 ++++----
 app/components/BuildEnvironment.vue  |  4 ++--
 app/components/Link/Base.vue         | 16 +++++++++-------
 app/components/Package/Versions.vue  |  2 +-
 app/pages/about.vue                  | 14 +++++++-------
 app/pages/package-code/[...path].vue |  4 ++--
 app/pages/package/[...package].vue   | 26 +++++++++++++-------------
 test/nuxt/a11y.spec.ts               | 12 ++++++------
 9 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 8e85ccfcc..d5d23ab1b 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -121,7 +121,7 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <NuxtPwaAssets />
-    <LinkBase href="#main-content" variant="button-primary" class="skip-link">{{
+    <LinkBase to="#main-content" variant="button-primary" class="skip-link">{{
       $t('common.skip_link')
     }}</LinkBase>
 
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 5ec73499e..346c33ef6 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -18,16 +18,16 @@ const isHome = computed(() => route.name === 'index')
           <LinkBase to="/about">
             {{ $t('footer.about') }}
           </LinkBase>
-          <LinkBase href="https://docs.npmx.dev">
+          <LinkBase to="https://docs.npmx.dev">
             {{ $t('footer.docs') }}
           </LinkBase>
-          <LinkBase href="https://repo.npmx.dev">
+          <LinkBase to="https://repo.npmx.dev">
             {{ $t('footer.source') }}
           </LinkBase>
-          <LinkBase href="https://social.npmx.dev">
+          <LinkBase to="https://social.npmx.dev">
             {{ $t('footer.social') }}
           </LinkBase>
-          <LinkBase href="https://chat.npmx.dev">
+          <LinkBase to="https://chat.npmx.dev">
             {{ $t('footer.chat') }}
           </LinkBase>
         </div>
diff --git a/app/components/BuildEnvironment.vue b/app/components/BuildEnvironment.vue
index 0483627ef..1ca80c517 100644
--- a/app/components/BuildEnvironment.vue
+++ b/app/components/BuildEnvironment.vue
@@ -19,7 +19,7 @@ const buildInfo = useAppConfig().buildInfo
     <span>&middot;</span>
     <LinkBase
       v-if="buildInfo.env === 'release'"
-      :href="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
+      :to="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
     >
       v{{ buildInfo.version }}
     </LinkBase>
@@ -27,7 +27,7 @@ const buildInfo = useAppConfig().buildInfo
 
     <template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
       <span>&middot;</span>
-      <LinkBase :href="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`">
+      <LinkBase :to="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`">
         {{ buildInfo.shortCommit }}
       </LinkBase>
     </template>
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 97b9cf005..d5a9bded6 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -32,7 +32,9 @@ const props = withDefaults(
       'classicon'?: string
 
       'to'?: NuxtLinkProps['to']
-      'href'?: NuxtLinkProps['href']
+
+      /** always use `to` instead of `href` */
+      'href'?: never
     } & NuxtLinkProps
   >(),
   { variant: 'link' },
@@ -40,13 +42,12 @@ const props = withDefaults(
 
 const isLinkExternal = computed(
   () =>
-    !!props.href &&
-    typeof props.href === 'string' &&
-    !props.href.startsWith('/') &&
-    !props.href.startsWith('#'),
+    !!props.to &&
+    typeof props.to === 'string' &&
+    (props.to.startsWith('http:') || props.to.startsWith('https:') || props.to.startsWith('//')),
 )
 const isLinkAnchor = computed(
-  () => !!props.href && typeof props.href === 'string' && props.href.startsWith('#'),
+  () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
 )
 </script>
 
@@ -82,7 +83,8 @@ const isLinkAnchor = computed(
         variant === 'button-primary',
     }"
     :to="to"
-    :href="href"
+    :href="to"
+    :external="isLinkExternal"
     :aria-keyshortcuts="keyshortcut"
     :target="isLinkExternal ? '_blank' : undefined"
     :rel="isLinkExternal ? 'noopener noreferrer' : undefined"
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index e114ebc45..cb0e7cd56 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -309,7 +309,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
     <template #actions>
       <LinkBase
         variant="button-secondary"
-        :href="`https://majors.nullvoxpopuli.com/q?packages=${packageName}`"
+        :to="`https://majors.nullvoxpopuli.com/q?packages=${packageName}`"
         :title="$t('package.downloads.community_distribution')"
         classicon="i-carbon:load-balancer-network"
       >
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 36f95ccd8..21435aab3 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -74,7 +74,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 <strong class="text-fg">{{ $t('about.what_we_are.better_ux_dx') }}</strong>
               </template>
               <template #jsr>
-                <LinkBase href="https://jsr.io/">JSR</LinkBase>
+                <LinkBase to="https://jsr.io/">JSR</LinkBase>
               </template>
             </i18n-t>
           </p>
@@ -106,32 +106,32 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
                 >
                   <template #already>{{ $t('about.what_we_are_not.words.already') }}</template>
                   <template #people>
-                    <LinkBase :href="pmLinks.npm">{{
+                    <LinkBase :to="pmLinks.npm">{{
                       $t('about.what_we_are_not.words.people')
                     }}</LinkBase>
                   </template>
                   <template #building>
-                    <LinkBase :href="pmLinks.pnpm">{{
+                    <LinkBase :to="pmLinks.pnpm">{{
                       $t('about.what_we_are_not.words.building')
                     }}</LinkBase>
                   </template>
                   <template #really>
-                    <LinkBase :href="pmLinks.yarn">{{
+                    <LinkBase :to="pmLinks.yarn">{{
                       $t('about.what_we_are_not.words.really')
                     }}</LinkBase>
                   </template>
                   <template #cool>
-                    <LinkBase :href="pmLinks.bun">{{
+                    <LinkBase :to="pmLinks.bun">{{
                       $t('about.what_we_are_not.words.cool')
                     }}</LinkBase>
                   </template>
                   <template #package>
-                    <LinkBase :href="pmLinks.deno">{{
+                    <LinkBase :to="pmLinks.deno">{{
                       $t('about.what_we_are_not.words.package')
                     }}</LinkBase>
                   </template>
                   <template #managers>
-                    <LinkBase :href="pmLinks.vlt">{{
+                    <LinkBase :to="pmLinks.vlt">{{
                       $t('about.what_we_are_not.words.managers')
                     }}</LinkBase>
                   </template>
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index b64b32f81..893c1d3d1 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -492,7 +492,7 @@ defineOgImageComponent('Default', {
           </p>
           <LinkBase
             variant="button-secondary"
-            :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
@@ -544,7 +544,7 @@ defineOgImageComponent('Default', {
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
           <LinkBase
             variant="button-secondary"
-            :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index 3a2907010..d364ae80f 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -574,7 +574,7 @@ onKeyStroke(
               >
                 <LinkBase
                   variant="tag"
-                  href="#provenance"
+                  to="#provenance"
                   :aria-label="$t('package.provenance_section.view_more_details')"
                   classicon="i-lucide-shield-check"
                 />
@@ -696,7 +696,7 @@ onKeyStroke(
             <li v-if="repositoryUrl">
               <LinkBase
                 variant="button-secondary"
-                :href="repositoryUrl"
+                :to="repositoryUrl"
                 :classicon="repoProviderIcon"
               >
                 <span v-if="repoRef">
@@ -706,24 +706,24 @@ onKeyStroke(
               </LinkBase>
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
-              <LinkBase variant="button-secondary" :href="starsLink" classicon="i-carbon:star">
+              <LinkBase variant="button-secondary" :to="starsLink" classicon="i-carbon:star">
                 {{ formatCompactNumber(stars, { decimals: 1 }) }}
               </LinkBase>
             </li>
             <li v-if="forks && forksLink">
-              <LinkBase variant="button-secondary" :href="forksLink" classicon="i-carbon:fork">
+              <LinkBase variant="button-secondary" :to="forksLink" classicon="i-carbon:fork">
                 {{ formatCompactNumber(forks, { decimals: 1 }) }}
               </LinkBase>
             </li>
             <li v-if="homepageUrl">
-              <LinkBase variant="button-secondary" :href="homepageUrl" classicon="i-carbon:link">
+              <LinkBase variant="button-secondary" :to="homepageUrl" classicon="i-carbon:link">
                 {{ $t('package.links.homepage') }}
               </LinkBase>
             </li>
             <li v-if="displayVersion?.bugs?.url">
               <LinkBase
                 variant="button-secondary"
-                :href="displayVersion.bugs.url"
+                :to="displayVersion.bugs.url"
                 classicon="i-carbon:warning"
               >
                 {{ $t('package.links.issues') }}
@@ -732,7 +732,7 @@ onKeyStroke(
             <li>
               <LinkBase
                 variant="button-secondary"
-                :href="`https://www.npmjs.com/package/${pkg.name}`"
+                :to="`https://www.npmjs.com/package/${pkg.name}`"
                 :title="$t('common.view_on_npm')"
                 classicon="i-carbon:logo-npm"
               >
@@ -742,7 +742,7 @@ onKeyStroke(
             <li v-if="jsrInfo?.exists && jsrInfo.url">
               <LinkBase
                 variant="button-secondary"
-                :href="jsrInfo.url"
+                :to="jsrInfo.url"
                 :title="$t('badges.jsr.title')"
                 classicon="i-simple-icons:jsr"
               >
@@ -750,7 +750,7 @@ onKeyStroke(
               </LinkBase>
             </li>
             <li v-if="fundingUrl">
-              <LinkBase variant="button-secondary" :href="fundingUrl" classicon="i-carbon:favorite">
+              <LinkBase variant="button-secondary" :to="fundingUrl" classicon="i-carbon:favorite">
                 {{ $t('package.links.fund') }}
               </LinkBase>
             </li>
@@ -853,7 +853,7 @@ onKeyStroke(
                 <LinkBase
                   variant="tag"
                   v-if="getDependencyCount(displayVersion) > 0"
-                  :href="`https://npmgraph.js.org/?q=${pkg.name}`"
+                  :to="`https://npmgraph.js.org/?q=${pkg.name}`"
                   :title="$t('package.stats.view_dependency_graph')"
                   classicon="i-carbon:network-3"
                 >
@@ -863,7 +863,7 @@ onKeyStroke(
                 <LinkBase
                   variant="tag"
                   v-if="getDependencyCount(displayVersion) > 0"
-                  :href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+                  :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                   :title="$t('package.stats.inspect_dependency_tree')"
                   classicon="i-carbon:tree-view"
                 >
@@ -1011,7 +1011,7 @@ onKeyStroke(
             id="get-started-heading"
             class="group text-xs text-fg-subtle uppercase tracking-wider"
           >
-            <LinkBase href="#get-started">
+            <LinkBase to="#get-started">
               {{ $t('package.get_started.title') }}
             </LinkBase>
           </h2>
@@ -1057,7 +1057,7 @@ onKeyStroke(
       <section id="readme" class="area-readme min-w-0 scroll-mt-20">
         <div class="flex flex-wrap items-center justify-between mb-3 px-1">
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
-            <LinkBase href="#readme">
+            <LinkBase to="#readme">
               {{ $t('package.readme.title') }}
             </LinkBase>
           </h2>
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 21427c326..8e4d2a2d5 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -330,7 +330,7 @@ describe('component accessibility audits', () => {
   describe('LinkBase', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { href: 'http://example.com' },
+        props: { to: 'http://example.com' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
@@ -339,7 +339,7 @@ describe('component accessibility audits', () => {
 
     it("should have no accessibility violations when it's the current link", async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { href: 'http://example.com', current: true },
+        props: { to: 'http://example.com', current: true },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
@@ -348,7 +348,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations when disabled (plain text)', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { href: 'http://example.com', disabled: true },
+        props: { to: 'http://example.com', disabled: true },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
@@ -357,7 +357,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations as secondary button', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { href: 'http://example.com', disabled: true, variant: 'button-secondary' },
+        props: { to: 'http://example.com', disabled: true, variant: 'button-secondary' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
@@ -366,7 +366,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations as primary button', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { href: 'http://example.com', disabled: true, variant: 'button-primary' },
+        props: { to: 'http://example.com', disabled: true, variant: 'button-primary' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
@@ -375,7 +375,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations as tag', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { href: 'http://example.com', disabled: true, variant: 'tag' },
+        props: { to: 'http://example.com', disabled: true, variant: 'tag' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)

From 8992ed528d421f81b10f7ca7eb4ada5cf52c17f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:17:44 +0100
Subject: [PATCH 45/91] fix: prop name

---
 app/components/AppHeader.vue            | 2 +-
 app/components/Package/Dependencies.vue | 4 ++--
 app/components/Package/Maintainers.vue  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 043089038..8ced7b309 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -173,7 +173,7 @@ onKeyStroke(
           :aria-label="$t('nav.open_menu')"
           :aria-expanded="showMobileMenu"
           @click="showMobileMenu = !showMobileMenu"
-          iconclass="i-carbon:menu"
+          classicon="i-carbon:menu"
         />
       </div>
     </nav>
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 41a56ac65..f18a415c1 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -103,7 +103,7 @@ const sortedOptionalDependencies = computed(() => {
               class="shrink-0"
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
-              iconclass="i-carbon:security"
+              classicon="i-carbon:security"
             >
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
             </LinkBase>
@@ -115,7 +115,7 @@ const sortedOptionalDependencies = computed(() => {
               }"
               class="shrink-0 text-purple-500"
               :title="getDeprecatedDepInfo(dep)!.message"
-              iconclass="i-carbon:warning-hex"
+              classicon="i-carbon:warning-hex"
             >
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </LinkBase>
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index b222eab80..68a5f1d75 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -266,7 +266,7 @@ watch(
           <ButtonBase
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
-            iconclass="i-carbon-close"
+            classicon="i-carbon-close"
           />
         </form>
       </div>

From e70ef85f8aea0ab31b5a3c2e1894df3bca68f7c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:18:27 +0100
Subject: [PATCH 46/91] fix: remove unnecessary class

---
 app/components/Package/Maintainers.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index 68a5f1d75..5c7928cec 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -270,12 +270,7 @@ watch(
           />
         </form>
       </div>
-      <ButtonBase
-        v-else
-        type="button"
-        class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
-        @click="showAddOwner = true"
-      >
+      <ButtonBase v-else type="button" @click="showAddOwner = true">
         {{ $t('package.maintainers.add_owner') }}
       </ButtonBase>
     </div>

From ff7a8b6d88625b2a4716d994f54c84e3c5a1eb64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:29:48 +0100
Subject: [PATCH 47/91] fix: app header menu on mobile

---
 app/components/AppHeader.vue | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 8ced7b309..c6b7e8c00 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -150,7 +150,7 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="flex-shrink-0 flex items-center gap-0.5 sm:gap-2">
+      <div class="hidden sm:flex flex-shrink-0 items-center gap-0.5 sm:gap-2">
         <!-- Desktop: Compare link -->
         <LinkBase variant="button-secondary" to="/compare" keyshortcut="c">
           {{ $t('nav.compare') }}
@@ -161,21 +161,18 @@ onKeyStroke(
           {{ $t('nav.settings') }}
         </LinkBase>
 
-        <!-- Desktop: Account menu -->
-        <div class="hidden sm:block">
-          <HeaderAccountMenu />
-        </div>
-
-        <!-- Mobile: Menu button (always visible, click to open menu) -->
-        <ButtonBase
-          type="button"
-          class="sm:hidden flex"
-          :aria-label="$t('nav.open_menu')"
-          :aria-expanded="showMobileMenu"
-          @click="showMobileMenu = !showMobileMenu"
-          classicon="i-carbon:menu"
-        />
+        <HeaderAccountMenu />
       </div>
+
+      <!-- Mobile: Menu button (always visible, click to open menu) -->
+      <ButtonBase
+        type="button"
+        class="sm:hidden flex"
+        :aria-label="$t('nav.open_menu')"
+        :aria-expanded="showMobileMenu"
+        @click="showMobileMenu = !showMobileMenu"
+        classicon="i-carbon:menu"
+      />
     </nav>
 
     <!-- Mobile menu -->

From 5d23f56fef7a4489d0043fa405ed9549592a6521 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 06:33:15 +0100
Subject: [PATCH 48/91] style: move menu to button group

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

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index c6b7e8c00..a43416eb7 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -150,7 +150,7 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="hidden sm:flex flex-shrink-0 items-center gap-0.5 sm:gap-2">
+      <ButtonGroup class="hidden sm:flex flex-shrink-0">
         <!-- Desktop: Compare link -->
         <LinkBase variant="button-secondary" to="/compare" keyshortcut="c">
           {{ $t('nav.compare') }}
@@ -162,7 +162,7 @@ onKeyStroke(
         </LinkBase>
 
         <HeaderAccountMenu />
-      </div>
+      </ButtonGroup>
 
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 46ad71383..2fe4ca2bf 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -62,6 +62,7 @@ function openAuthModal() {
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
+      class="rounded-s-none border-s-0"
     >
       <!-- Stacked avatars when connected -->
       <div

From 50486b5f40d1c058c83ea640289c18f276092d0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 10:11:10 +0100
Subject: [PATCH 49/91] test: ignore button group for a11y tests

---
 test/unit/a11y-component-coverage.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 42502bc41..0cc0e40e5 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -43,6 +43,7 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'UserCombobox.vue': 'Unused component - intended for future admin features',
   'SkeletonBlock.vue': 'Already covered indirectly via other component tests',
   'SkeletonInline.vue': 'Already covered indirectly via other component tests',
+  'Button/Group.vue': "Wrapper component, tests wouldn't make much sense here",
 }
 
 /**

From 45fdd7155a143897792fcee48b6eb27e8956687b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 10:25:36 +0100
Subject: [PATCH 50/91] fix: wrong element type

---
 app/components/AppHeader.vue    |  2 +-
 app/components/Button/Group.vue | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index a43416eb7..7bd4d98f1 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -150,7 +150,7 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <ButtonGroup class="hidden sm:flex flex-shrink-0">
+      <ButtonGroup as="div" class="hidden sm:flex flex-shrink-0">
         <!-- Desktop: Compare link -->
         <LinkBase variant="button-secondary" to="/compare" keyshortcut="c">
           {{ $t('nav.compare') }}
diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index 1ea6a808c..166e7b403 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -1,7 +1,14 @@
+<script setup lang="ts">
+const props = defineProps<{
+  as?: string | Component
+}>()
+</script>
+
 <template>
-  <nav
+  <component
+    :is="props.as || 'nav'"
     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"
   >
     <slot />
-  </nav>
+  </component>
 </template>

From edc4e21d393362c94ee8acf386df4b30d4c19c96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 12:53:32 +0100
Subject: [PATCH 51/91] refactoring

Co-authored-by: Robin <robin.kehl@singular-it.de>
---
 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 f5668bdb4..65fa78ab4 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -19,7 +19,7 @@ const props = withDefaults(
   },
 )
 
-const el = ref<HTMLButtonElement | null>(null)
+const el = useTemplateRef('el')
 
 defineExpose({
   focus: () => el.value?.focus(),

From 54b044bc3ba6e8dad5937152fa1d1669b504cbb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 13:14:32 +0100
Subject: [PATCH 52/91] style: change package links back to link style

---
 app/pages/package/[[org]]/[name].vue | 32 ++++++++++------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 5ec2de0df..06d29d65c 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -692,13 +692,9 @@ onKeyStroke(
           </div>
 
           <!-- External links -->
-          <ul class="flex flex-wrap items-center gap-1 sm:gap-2 list-none m-0 p-0 mt-3">
+          <ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3">
             <li v-if="repositoryUrl">
-              <LinkBase
-                variant="button-secondary"
-                :to="repositoryUrl"
-                :classicon="repoProviderIcon"
-              >
+              <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
                 <span v-if="repoRef">
                   {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
                 </span>
@@ -706,32 +702,27 @@ onKeyStroke(
               </LinkBase>
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
-              <LinkBase variant="button-secondary" :to="starsLink" classicon="i-carbon:star">
+              <LinkBase :to="starsLink" classicon="i-carbon:star">
                 {{ formatCompactNumber(stars, { decimals: 1 }) }}
               </LinkBase>
             </li>
             <li v-if="forks && forksLink">
-              <LinkBase variant="button-secondary" :to="forksLink" classicon="i-carbon:fork">
+              <LinkBase :to="forksLink" classicon="i-carbon:fork">
                 {{ formatCompactNumber(forks, { decimals: 1 }) }}
               </LinkBase>
             </li>
             <li v-if="homepageUrl">
-              <LinkBase variant="button-secondary" :to="homepageUrl" classicon="i-carbon:link">
+              <LinkBase :to="homepageUrl" classicon="i-carbon:link">
                 {{ $t('package.links.homepage') }}
               </LinkBase>
             </li>
             <li v-if="displayVersion?.bugs?.url">
-              <LinkBase
-                variant="button-secondary"
-                :to="displayVersion.bugs.url"
-                classicon="i-carbon:warning"
-              >
+              <LinkBase :to="displayVersion.bugs.url" classicon="i-carbon:warning">
                 {{ $t('package.links.issues') }}
               </LinkBase>
             </li>
             <li>
               <LinkBase
-                variant="button-secondary"
                 :to="`https://www.npmjs.com/package/${pkg.name}`"
                 :title="$t('common.view_on_npm')"
                 classicon="i-carbon:logo-npm"
@@ -741,7 +732,6 @@ onKeyStroke(
             </li>
             <li v-if="jsrInfo?.exists && jsrInfo.url">
               <LinkBase
-                variant="button-secondary"
                 :to="jsrInfo.url"
                 :title="$t('badges.jsr.title')"
                 classicon="i-simple-icons:jsr"
@@ -750,19 +740,18 @@ onKeyStroke(
               </LinkBase>
             </li>
             <li v-if="fundingUrl">
-              <LinkBase variant="button-secondary" :to="fundingUrl" classicon="i-carbon:favorite">
+              <LinkBase :to="fundingUrl" classicon="i-carbon:favorite">
                 {{ $t('package.links.fund') }}
               </LinkBase>
             </li>
             <!-- Mobile-only: Docs + Code + Compare links -->
             <li v-if="docsLink && displayVersion" class="sm:hidden">
-              <LinkBase variant="button-secondary" :to="docsLink" classicon="i-carbon:document">
+              <LinkBase :to="docsLink" classicon="i-carbon:document">
                 {{ $t('package.links.docs') }}
               </LinkBase>
             </li>
             <li v-if="resolvedVersion" class="sm:hidden">
               <LinkBase
-                variant="button-secondary"
                 :to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }"
                 classicon="i-carbon:code"
               >
@@ -771,7 +760,6 @@ onKeyStroke(
             </li>
             <li class="sm:hidden">
               <LinkBase
-                variant="button-secondary"
                 :to="{ name: 'compare', query: { packages: pkg.name } }"
                 classicon="i-carbon:compare"
               >
@@ -1189,7 +1177,9 @@ onKeyStroke(
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{ $t('common.go_back_home') }}</LinkBase>
+      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
+        $t('common.go_back_home')
+      }}</LinkBase>
     </div>
   </main>
 </template>

From e84b59c430079798ac920ebd93d642bd9317279b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 13:18:57 +0100
Subject: [PATCH 53/91] test: fix copy-paste error with test props

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 test/nuxt/a11y.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index b6747cfff..5bd100b2f 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -310,7 +310,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations as primary button', async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { disabled: true, variant: 'primary' },
+        props: { variant: 'primary' },
         slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
@@ -319,7 +319,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations as tag', async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { disabled: true, variant: 'tag' },
+        props: { variant: 'tag' },
         slots: { default: 'Button content' },
       })
       const results = await runAxe(component)

From e96ae1a6ae57a2168aa5501825b9e6dc12dfcc16 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 6 Feb 2026 12:19:54 +0000
Subject: [PATCH 54/91] [autofix.ci] apply automated fixes

---
 app/components/Package/Dependencies.vue | 11 ++---------
 app/pages/index.vue                     |  5 +----
 app/pages/org/[org].vue                 |  4 +++-
 app/pages/package-code/[...path].vue    |  4 ----
 app/pages/~[username]/index.vue         |  4 +++-
 app/pages/~[username]/orgs.vue          |  3 ++-
 6 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index e9b80c152..6ccf43a6c 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -161,10 +161,7 @@ const sortedOptionalDependencies = computed(() => {
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
           <div class="flex items-center gap-1 min-w-0 flex-1">
-            <LinkBase
-              :to="packageRoute(peer.name)"
-              class="truncate"
-            >
+            <LinkBase :to="packageRoute(peer.name)" class="truncate">
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -219,11 +216,7 @@ const sortedOptionalDependencies = computed(() => {
           <LinkBase :to="packageRoute(dep)" class="truncate">
             {{ dep }}
           </LinkBase>
-          <LinkBase
-            :to="packageRoute(dep, version)"
-            class="truncate"
-            :title="version"
-          >
+          <LinkBase :to="packageRoute(dep, version)" class="truncate" :title="version">
             {{ version }}
           </LinkBase>
         </li>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 35521d0d1..87323a933 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -121,10 +121,7 @@ defineOgImageComponent('Default', {
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
           <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
-            <LinkBase
-              :to="packageRoute(framework.package)"
-              class="gap-2"
-            >
+            <LinkBase :to="packageRoute(framework.package)" class="gap-2">
               <span
                 class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
               />
diff --git a/app/pages/org/[org].vue b/app/pages/org/[org].vue
index c56340423..08739fd43 100644
--- a/app/pages/org/[org].vue
+++ b/app/pages/org/[org].vue
@@ -244,7 +244,9 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{ $t('common.go_back_home') }}</LinkBase>
+      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
+        $t('common.go_back_home')
+      }}</LinkBase>
     </div>
 
     <!-- Empty state -->
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index 7a255cfe3..b9d4885dd 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -371,9 +371,7 @@ defineOgImageComponent('Default', {
     <div v-if="!version" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
       <LinkBase variant="button-secondary" :to="packageRoute(packageName)">{{
-       
         $t('code.go_to_package')
-     
       }}</LinkBase>
     </div>
 
@@ -387,9 +385,7 @@ defineOgImageComponent('Default', {
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
       <LinkBase variant="button-secondary" :to="packageRoute(packageName, version)">{{
-       
         $t('code.back_to_package')
-     
       }}</LinkBase>
     </div>
 
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 27cd363b0..c4cab4920 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -228,7 +228,9 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{ $t('common.go_back_home') }}</LinkBase>
+      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
+        $t('common.go_back_home')
+      }}</LinkBase>
     </div>
 
     <!-- Package list -->
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index c29fd52ba..06c7f6ad2 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -160,7 +160,8 @@ defineOgImageComponent('Default', {
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
         <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
-        <LinkBase variant="button-secondary"
+        <LinkBase
+          variant="button-secondary"
           :to="{ name: '~username-orgs', params: { username: npmUser! } }"
           class="mt-4"
           >{{ $t('user.orgs_page.view_your_orgs') }}</LinkBase

From 7ea5e19f5e32080d88fdac7d8caa8cb61cdb3d14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 13:21:10 +0100
Subject: [PATCH 55/91] fix: footer links

---
 app/components/AppFooter.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 315746d04..8f53430a0 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -15,9 +15,12 @@ const isHome = computed(() => route.name === 'index')
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6">
-          <LinkBase :to="{ name: 'privacy' }">
+          <LinkBase :to="{ name: 'about' }">
             {{ $t('footer.about') }}
           </LinkBase>
+          <LinkBase :to="{ name: 'privacy' }">
+            {{ $t('privacy_policy.title') }}
+          </LinkBase>
           <LinkBase to="https://docs.npmx.dev">
             {{ $t('footer.docs') }}
           </LinkBase>

From 952a695192297416ae1cfd738648b6e6c011e27e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 13:30:42 +0100
Subject: [PATCH 56/91] docs: add comment explaining explicit attr

---
 app/components/Button/Base.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 65fa78ab4..927c6a8b9 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -39,7 +39,15 @@ defineExpose({
         variant === 'primary',
     }"
     :type="props.type"
-    :disabled="disabled ? true : undefined"
+    :disabled="
+      /**
+       * Unfortunately Vue _sometimes_ doesn't handle `disabled` correct,
+       * resulting in an invalid `disabled=false` attribute in the final HTML.
+       *
+       * This fixes this.
+       */
+      disabled ? true : undefined
+    "
     :aria-keyshortcuts="keyshortcut"
   >
     <span

From 042f46864c3a4e61095f5b8eca02063d5466b0fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 13:32:35 +0100
Subject: [PATCH 57/91] refactor: rename tag variant

---
 app/components/Package/MetricsBadges.vue | 6 +++---
 app/components/Tag/Static.vue            | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index d325c92d9..1f547ef17 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -63,7 +63,7 @@ const typesHref = computed(() => {
         </LinkBase>
         <TagStatic
           v-else
-          :variant="hasTypes && !isLoading ? 'default' : 'disabled'"
+          :variant="hasTypes && !isLoading ? 'default' : 'ghost'"
           :tabindex="0"
           :classicon="
             isLoading
@@ -85,7 +85,7 @@ const typesHref = computed(() => {
       >
         <TagStatic
           tabindex="0"
-          :variant="hasEsm && !isLoading ? 'default' : 'disabled'"
+          :variant="hasEsm && !isLoading ? 'default' : 'ghost'"
           :classicon="
             isLoading
               ? 'i-carbon-circle-dash motion-safe:animate-spin'
@@ -104,7 +104,7 @@ const typesHref = computed(() => {
       <TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')">
         <TagStatic
           tabindex="0"
-          :variant="isLoading ? 'disabled' : 'default'"
+          :variant="isLoading ? 'ghost' : 'default'"
           :classicon="
             isLoading ? 'i-carbon-circle-dash motion-safe:animate-spin' : 'i-carbon-checkmark'
           "
diff --git a/app/components/Tag/Static.vue b/app/components/Tag/Static.vue
index aba6a2ed9..a1eb9eb9d 100644
--- a/app/components/Tag/Static.vue
+++ b/app/components/Tag/Static.vue
@@ -2,7 +2,7 @@
 const props = withDefaults(
   defineProps<{
     as?: string | Component
-    variant?: 'disabled' | 'default'
+    variant?: 'ghost' | 'default'
 
     classicon?: string
   }>(),
@@ -14,7 +14,7 @@ const props = withDefaults(
   <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="{ 'opacity-40': variant === 'disabled' }"
+    :class="{ 'opacity-40': variant === 'ghost' }"
   >
     <span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
     <slot />

From c8420d252cd469ae40cb5b3bb7fbe4060dde1ce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 13:47:55 +0100
Subject: [PATCH 58/91] refactor: change props for buttons and links

---
 app/components/Button/Base.vue           | 12 ++++----
 app/components/Filter/Panel.vue          |  2 +-
 app/components/Link/Base.vue             | 35 ++++++++++++++----------
 app/components/Package/Card.vue          |  2 +-
 app/components/Package/Keywords.vue      |  6 +++-
 app/components/Package/MetricsBadges.vue |  8 +++++-
 app/components/Package/TableRow.vue      |  2 +-
 app/pages/package/[[org]]/[name].vue     | 11 +++++---
 test/nuxt/a11y.spec.ts                   | 13 ++++++---
 9 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 927c6a8b9..accc4ca73 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -3,7 +3,8 @@ const props = withDefaults(
   defineProps<{
     'disabled'?: boolean
     'type'?: 'button' | 'submit'
-    'variant'?: 'primary' | 'secondary' | 'tag'
+    'variant'?: 'primary' | 'secondary'
+    'size'?: 'small' | 'medium'
     'keyshortcut'?: string
 
     /**
@@ -16,6 +17,7 @@ const props = withDefaults(
   {
     type: 'button',
     variant: 'secondary',
+    size: 'medium',
   },
 )
 
@@ -31,10 +33,10 @@ defineExpose({
     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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50)) bg-gradient-to-t dark:bg-gradient-to-b"
     :class="{
-      'text-sm px-4 py-2': variant !== 'tag',
-      'text-xs px-2 py-0.5': variant === 'tag',
+      'text-sm px-4 py-2': size === 'medium',
+      'text-xs px-2 py-0.5': size === 'small',
       'from-fg/10 via-transparent to-transparent text-fg hover:enabled:(bg-accent/20 border-accent) focus-visible:enabled:(bg-accent/20 border-accent)':
-        variant === 'tag' || variant === 'secondary',
+        variant === 'secondary',
       'text-black from-accent via-accent to-accent/30 hover:enabled:(bg-accent/50) focus-visible:enabled:(bg-accent/50)':
         variant === 'primary',
     }"
@@ -52,7 +54,7 @@ defineExpose({
   >
     <span
       v-if="classicon"
-      :class="[variant === 'tag' ? 'size-3' : 'size-4', classicon]"
+      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
       aria-hidden="true"
     />
     <slot />
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index a824dcd28..3d3a1bdb1 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -310,7 +310,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             <ButtonBase
               v-for="keyword in displayedKeywords"
               :key="keyword"
-              variant="tag"
+              size="small"
               :aria-pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index d5a9bded6..f246ec636 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -10,7 +10,8 @@ const props = withDefaults(
        * `type` should never be used, because this will always be a link.
        * */
       'type'?: never
-      'variant'?: 'button-primary' | 'button-secondary' | 'tag' | 'link'
+      'variant'?: 'button-primary' | 'button-secondary' | 'link'
+      'size'?: 'small' | 'medium'
 
       'keyshortcut'?: string
 
@@ -37,7 +38,7 @@ const props = withDefaults(
       'href'?: never
     } & NuxtLinkProps
   >(),
-  { variant: 'link' },
+  { variant: 'link', size: 'medium' },
 )
 
 const isLinkExternal = computed(
@@ -49,6 +50,12 @@ const isLinkExternal = computed(
 const isLinkAnchor = computed(
   () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
 )
+
+/** size is only applicable for button like links */
+const isLink = computed(() => props.variant === 'link')
+const isButton = computed(() => props.variant !== 'link')
+const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
+const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
 </script>
 
 <template>
@@ -56,10 +63,9 @@ const isLinkAnchor = computed(
     v-if="disabled"
     :class="{
       'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
-        variant !== 'link',
-      'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
-      'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-bg-muted text-fg-muted': variant === 'tag',
+        isButton,
+      'text-sm px-4 py-2': isButtonMedium,
+      'text-xs px-2 py-0.5': isButtonSmall,
       'text-bg bg-fg': variant === 'button-primary',
       'bg-transparent text-fg': variant === 'button-secondary',
     }"
@@ -69,16 +75,15 @@ const isLinkAnchor = computed(
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/50':
-        !isLinkAnchor && variant === 'link',
+      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/50': !isLinkAnchor && isLink,
       'text-fg hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-colors duration-200':
-        variant === 'link',
+        isLink,
       'font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:(text-bg/50)) bg-gradient-to-t dark:bg-gradient-to-b':
-        variant !== 'link',
-      'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
-      'text-xs px-2 py-0.5': variant === 'tag',
+        isButton,
+      'text-sm px-4 py-2': isButtonMedium,
+      'text-xs px-2 py-0.5': isButtonSmall,
       'from-fg/10 via-transparent to-transparent text-fg hover:(bg-accent/20 border-accent) focus-visible:(bg-accent/20 border-accent)':
-        variant === 'tag' || variant === 'button-secondary',
+        variant === 'button-secondary',
       'text-black from-accent via-accent to-accent/30 hover:(bg-accent/50) focus-visible:(bg-accent/50)':
         variant === 'button-primary',
     }"
@@ -91,7 +96,7 @@ const isLinkAnchor = computed(
   >
     <span
       v-if="classicon"
-      :class="[variant === 'tag' ? 'size-3' : 'size-4', classicon]"
+      :class="[isButtonSmall ? 'size-3' : 'size-4', classicon]"
       aria-hidden="true"
     />
     <slot />
@@ -102,7 +107,7 @@ const isLinkAnchor = computed(
       aria-hidden="true"
     />
     <span
-      v-else-if="isLinkAnchor && variant === 'link'"
+      v-else-if="isLinkAnchor && isLink"
       class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
       aria-hidden="true"
     />
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 4ab94e537..330792716 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -165,7 +165,7 @@ const pkgDescription = useMarkdown(() => ({
       <ButtonBase
         v-for="keyword in result.package.keywords.slice(0, 5)"
         class="pointer-events-auto"
-        variant="tag"
+        size="small"
         :key="keyword"
         :aria-pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"
diff --git a/app/components/Package/Keywords.vue b/app/components/Package/Keywords.vue
index e73dc1e02..2328d0edb 100644
--- a/app/components/Package/Keywords.vue
+++ b/app/components/Package/Keywords.vue
@@ -7,7 +7,11 @@ defineProps<{
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
     <ul class="flex flex-wrap gap-1.5 list-none m-0 p-1">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
-        <LinkBase variant="tag" :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
+        <LinkBase
+          variant="button-secondary"
+          size="small"
+          :to="{ name: 'search', query: { q: `keywords:${keyword}` } }"
+        >
           {{ keyword }}
         </LinkBase>
       </li>
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 1f547ef17..356047315 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -58,7 +58,13 @@ const typesHref = computed(() => {
     <!-- TypeScript types badge -->
     <li v-if="!props.isBinary" class="contents">
       <TooltipApp :text="typesTooltip">
-        <LinkBase v-if="typesHref" variant="tag" :to="typesHref" classicon="i-carbon-checkmark">
+        <LinkBase
+          v-if="typesHref"
+          variant="button-secondary"
+          size="small"
+          :to="typesHref"
+          classicon="i-carbon-checkmark"
+        >
           {{ $t('package.metrics.types_label') }}
         </LinkBase>
         <TagStatic
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 86c271992..9d60a45e8 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -132,7 +132,7 @@ const allMaintainersText = computed(() => {
         <ButtonBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
-          variant="tag"
+          size="small"
           :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 06d29d65c..a9c57a0f2 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -573,7 +573,8 @@ onKeyStroke(
                 position="bottom"
               >
                 <LinkBase
-                  variant="tag"
+                  variant="button-secondary"
+                  size="small"
                   to="#provenance"
                   :aria-label="$t('package.provenance_section.view_more_details')"
                   classicon="i-lucide-shield-check"
@@ -607,7 +608,7 @@ onKeyStroke(
               >
                 <ButtonBase
                   @click="likeAction"
-                  variant="tag"
+                  size="small"
                   :title="
                     likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
@@ -839,7 +840,8 @@ onKeyStroke(
 
               <span class="flex items-center gap-1">
                 <LinkBase
-                  variant="tag"
+                  variant="button-secondary"
+                  size="small"
                   v-if="getDependencyCount(displayVersion) > 0"
                   :to="`https://npmgraph.js.org/?q=${pkg.name}`"
                   :title="$t('package.stats.view_dependency_graph')"
@@ -849,7 +851,8 @@ onKeyStroke(
                 </LinkBase>
 
                 <LinkBase
-                  variant="tag"
+                  variant="button-secondary"
+                  size="small"
                   v-if="getDependencyCount(displayVersion) > 0"
                   :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                   :title="$t('package.stats.inspect_dependency_tree')"
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 5bd100b2f..3ed499dab 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -317,9 +317,9 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations as tag', async () => {
+    it('should have no accessibility violations with size small', async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { variant: 'tag' },
+        props: { size: 'small' },
         slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
@@ -373,9 +373,14 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations as tag', async () => {
+    it('should have no accessibility violations as small button', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', disabled: true, variant: 'tag' },
+        props: {
+          to: 'http://example.com',
+          disabled: true,
+          variant: 'button-secondary',
+          size: 'small',
+        },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)

From 1fade1ee3a342c24ab491cdcbbf52148176c21e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 13:56:34 +0100
Subject: [PATCH 59/91] feat: remove non-working aria-current styling

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

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index f246ec636..abec440b8 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -78,7 +78,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/50': !isLinkAnchor && isLink,
       'text-fg hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-colors duration-200':
         isLink,
-      'font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:(text-bg/50)) bg-gradient-to-t dark:bg-gradient-to-b':
+      'font-mono border border-border rounded-md transition-all duration-200 bg-gradient-to-t dark:bg-gradient-to-b':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,

From bed8f81a00cb4f82ad847d61e572343496c9e3cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 13:59:23 +0100
Subject: [PATCH 60/91] docs: update comment

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 app/components/Link/Base.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index abec440b8..ccc7a6dd3 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -21,12 +21,12 @@ const props = withDefaults(
       'aria-keyshortcuts'?: never
 
       /**
-       * Don't use this directly. This will automatically be set to `_blank` if `href` for external links.
+       * Don't use this directly. This will automatically be set to `_blank` for external links passed via `to`.
        */
       'target'?: never
 
       /**
-       * Don't use this directly. This will automatically be set to `_blank` if `href` for external links.
+       * Don't use this directly. This will automatically be set for external links passed via `to`.
        */
       'rel'?: never
 

From c0967c9622c2b6419e542e90af16ed1a7d52191d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 14:18:28 +0100
Subject: [PATCH 61/91] style: remove highlight border from buttons

---
 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 accc4ca73..8e3045f86 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -35,7 +35,7 @@ defineExpose({
     :class="{
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
-      'from-fg/10 via-transparent to-transparent text-fg hover:enabled:(bg-accent/20 border-accent) focus-visible:enabled:(bg-accent/20 border-accent)':
+      'from-fg/10 via-transparent to-transparent text-fg hover:enabled:(bg-accent/20) focus-visible:enabled:(bg-accent/20)':
         variant === 'secondary',
       'text-black from-accent via-accent to-accent/30 hover:enabled:(bg-accent/50) focus-visible:enabled:(bg-accent/50)':
         variant === 'primary',
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index ccc7a6dd3..959748a18 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -82,7 +82,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
-      'from-fg/10 via-transparent to-transparent text-fg hover:(bg-accent/20 border-accent) focus-visible:(bg-accent/20 border-accent)':
+      'from-fg/10 via-transparent to-transparent text-fg hover:(bg-accent/20) focus-visible:(bg-accent/20)':
         variant === 'button-secondary',
       'text-black from-accent via-accent to-accent/30 hover:(bg-accent/50) focus-visible:(bg-accent/50)':
         variant === 'button-primary',

From f5689dd97732eac0a9a6eef74d6418c59bca274f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 14:22:23 +0100
Subject: [PATCH 62/91] style: remove accent from links and buttons

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

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 8e3045f86..41004a714 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -31,13 +31,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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50)) bg-gradient-to-t dark:bg-gradient-to-b"
+    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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
     :class="{
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
-      'from-fg/10 via-transparent to-transparent text-fg hover:enabled:(bg-accent/20) focus-visible:enabled:(bg-accent/20)':
+      'bg-transparent text-fg hover:enabled:(bg-fg/30) focus-visible:enabled:(bg-fg/30)':
         variant === 'secondary',
-      'text-black from-accent via-accent to-accent/30 hover:enabled:(bg-accent/50) focus-visible:enabled:(bg-accent/50)':
+      'text-black bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50)':
         variant === 'primary',
     }"
     :type="props.type"
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 959748a18..e35624699 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -76,16 +76,14 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/50': !isLinkAnchor && isLink,
-      'text-fg hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-colors duration-200':
+      'text-fg hover:(no-underline text-fg/50) focus-visible:(no-underline text-fg/50) transition-colors duration-200':
         isLink,
-      'font-mono border border-border rounded-md transition-all duration-200 bg-gradient-to-t dark:bg-gradient-to-b':
-        isButton,
+      '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,
-      'from-fg/10 via-transparent to-transparent text-fg hover:(bg-accent/20) focus-visible:(bg-accent/20)':
+      'bg-transparent text-fg hover:(bg-fg/30) focus-visible:(bg-fg/30)':
         variant === 'button-secondary',
-      'text-black from-accent via-accent to-accent/30 hover:(bg-accent/50) focus-visible:(bg-accent/50)':
-        variant === 'button-primary',
+      'text-black bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
     }"
     :to="to"
     :href="to"

From 77903fc1f0cc411ddc079d29e8e7015fccd5c007 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 16:50:39 +0100
Subject: [PATCH 63/91] fix: firefox bug

---
 app/assets/main.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 3717f74c0..e9d3d1fec 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -181,9 +181,13 @@ body {
   line-height: 1.6;
 }
 
-*:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
+*: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 note be. */
+  outline: 2px solid var(--accent) !important;
+  outline-offset: 2px !important;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */

From 2fce723df4f1cd6a098ff114b517dcca9b4dd79a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 19:57:24 +0100
Subject: [PATCH 64/91] refactor: simplify query

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/assets/main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index e9d3d1fec..3f24487f6 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -181,7 +181,7 @@ body {
   line-height: 1.6;
 }
 
-*:focus-visible,
+:focus-visible,
 :-moz-focusring {
   /* weird Firefox behavior makes it necessary to add `!important` 
   or otherwise the selector would need to be more specific,

From 62c88fca7ec0f97ea72ad06c86828f0196147476 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 21:10:06 +0100
Subject: [PATCH 65/91] refactor: change default element for button group

---
 app/components/AppHeader.vue         | 2 +-
 app/components/Button/Group.vue      | 2 +-
 app/pages/package/[[org]]/[name].vue | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 74822272b..c3f947833 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -150,7 +150,7 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <ButtonGroup as="div" class="hidden sm:flex flex-shrink-0">
+      <ButtonGroup class="hidden sm:flex flex-shrink-0">
         <!-- Desktop: Compare link -->
         <LinkBase variant="button-secondary" :to="{ name: 'compare' }" keyshortcut="c">
           {{ $t('nav.compare') }}
diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue
index 166e7b403..f84d8653d 100644
--- a/app/components/Button/Group.vue
+++ b/app/components/Button/Group.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
 
 <template>
   <component
-    :is="props.as || 'nav'"
+    :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"
   >
     <slot />
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 118222710..2568ded49 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -649,6 +649,7 @@ onKeyStroke(
           <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
           <ButtonGroup
             v-if="resolvedVersion"
+            as="div"
             :aria-label="$t('package.navigation')"
             class="hidden sm:flex"
           >

From 3a13fbfa8b799e6a0193bf432173d86c07ab55a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 21:12:16 +0100
Subject: [PATCH 66/91] docs: rephrase comment

---
 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 41004a714..aa84c6caf 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -8,7 +8,7 @@ const props = withDefaults(
     'keyshortcut'?: string
 
     /**
-     * Don't use this directly, use `keyshortcut` instead. Correctly HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
+     * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
      */
     'aria-keyshortcuts'?: never
 
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index e35624699..6f848cb40 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -16,7 +16,7 @@ const props = withDefaults(
       'keyshortcut'?: string
 
       /**
-       * Don't use this directly, use `keyshortcut` instead. Correctly HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
+       * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
        */
       'aria-keyshortcuts'?: never
 

From 899516f500c74ec7f1e6102d60d9d8ab79210b5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 21:14:49 +0100
Subject: [PATCH 67/91] fix: primary button in light mode

---
 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 aa84c6caf..1a8f600a6 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -37,7 +37,7 @@ defineExpose({
       'text-xs px-2 py-0.5': size === 'small',
       'bg-transparent text-fg hover:enabled:(bg-fg/30) focus-visible:enabled:(bg-fg/30)':
         variant === 'secondary',
-      'text-black bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50)':
+      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50)':
         variant === 'primary',
     }"
     :type="props.type"
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 6f848cb40..269e6f424 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -83,7 +83,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
       'text-xs px-2 py-0.5': isButtonSmall,
       'bg-transparent text-fg hover:(bg-fg/30) focus-visible:(bg-fg/30)':
         variant === 'button-secondary',
-      'text-black bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
+      'text-bg bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
     }"
     :to="to"
     :href="to"

From 917d2d47733cf951443a9680ee9e3ea841414f20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 21:19:09 +0100
Subject: [PATCH 68/91] fix: wrong element type

---
 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 2568ded49..c554e70e5 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -649,7 +649,7 @@ onKeyStroke(
           <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
           <ButtonGroup
             v-if="resolvedVersion"
-            as="div"
+            as="nav"
             :aria-label="$t('package.navigation')"
             class="hidden sm:flex"
           >

From a827403045fb6a7f46d3f17c2a65292455e202d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 22:15:11 +0100
Subject: [PATCH 69/91] WIP

---
 app/pages/package/[[org]]/[name].vue | 14 ++++++++------
 i18n/locales/de-DE.json              |  2 +-
 lunaria/files/de-DE.json             |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index c554e70e5..3f80ee908 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -912,9 +912,10 @@ onKeyStroke(
           <!-- Vulnerabilities count -->
           <ClientOnly>
             <div class="space-y-1 sm:col-span-2">
-              <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-                {{ $t('package.stats.vulns') }}
-              </dt>
+              <dt
+                class="text-xs text-fg-subtle uppercase tracking-wider"
+                v-html="$t('package.stats.vulns')"
+              ></dt>
               <dd class="font-mono text-sm text-fg">
                 <span
                   v-if="vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'"
@@ -937,9 +938,10 @@ onKeyStroke(
             </div>
             <template #fallback>
               <div class="space-y-1 sm:col-span-2">
-                <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-                  {{ $t('package.stats.vulns') }}
-                </dt>
+                <dt
+                  class="text-xs text-fg-subtle uppercase tracking-wider"
+                  v-html="$t('package.stats.vulns')"
+                ></dt>
                 <dd class="font-mono text-sm text-fg-subtle">-</dd>
               </div>
             </template>
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index 1a66ed171..8a3d86f38 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -152,7 +152,7 @@
       "license": "Lizenz",
       "deps": "Abhängigkeiten",
       "install_size": "Installationsgröße",
-      "vulns": "Sicherheitslücken",
+      "vulns": "Sicherheits&shy;lücken&nbsp;verfügungs&shy;gesetz",
       "published": "Veröffentlicht",
       "published_tooltip": "Datum, an dem {package}{'@'}{version} veröffentlicht wurde",
       "skills": "Fähigkeiten",
diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
index 1a66ed171..8a3d86f38 100644
--- a/lunaria/files/de-DE.json
+++ b/lunaria/files/de-DE.json
@@ -152,7 +152,7 @@
       "license": "Lizenz",
       "deps": "Abhängigkeiten",
       "install_size": "Installationsgröße",
-      "vulns": "Sicherheitslücken",
+      "vulns": "Sicherheits&shy;lücken&nbsp;verfügungs&shy;gesetz",
       "published": "Veröffentlicht",
       "published_tooltip": "Datum, an dem {package}{'@'}{version} veröffentlicht wurde",
       "skills": "Fähigkeiten",

From 0bceba2a3a9de9d2b94376a8a9fb7dd59649f062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 23:01:58 +0100
Subject: [PATCH 70/91] Revert "WIP"

This reverts commit a827403045fb6a7f46d3f17c2a65292455e202d8.
---
 app/pages/package/[[org]]/[name].vue | 14 ++++++--------
 i18n/locales/de-DE.json              |  2 +-
 lunaria/files/de-DE.json             |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index c4efd1683..58af0cf0a 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -918,10 +918,9 @@ onKeyStroke(
           <!-- Vulnerabilities count -->
           <ClientOnly>
             <div class="space-y-1 sm:col-span-2">
-              <dt
-                class="text-xs text-fg-subtle uppercase tracking-wider"
-                v-html="$t('package.stats.vulns')"
-              ></dt>
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+                {{ $t('package.stats.vulns') }}
+              </dt>
               <dd class="font-mono text-sm text-fg">
                 <span
                   v-if="vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'"
@@ -944,10 +943,9 @@ onKeyStroke(
             </div>
             <template #fallback>
               <div class="space-y-1 sm:col-span-2">
-                <dt
-                  class="text-xs text-fg-subtle uppercase tracking-wider"
-                  v-html="$t('package.stats.vulns')"
-                ></dt>
+                <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+                  {{ $t('package.stats.vulns') }}
+                </dt>
                 <dd class="font-mono text-sm text-fg-subtle">-</dd>
               </div>
             </template>
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index 15da26c32..683be5cb6 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -152,7 +152,7 @@
       "license": "Lizenz",
       "deps": "Abhängigkeiten",
       "install_size": "Installationsgröße",
-      "vulns": "Sicherheits&shy;lücken&nbsp;verfügungs&shy;gesetz",
+      "vulns": "Sicherheitslücken",
       "published": "Veröffentlicht",
       "published_tooltip": "Datum, an dem {package}{'@'}{version} veröffentlicht wurde",
       "skills": "Fähigkeiten",
diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
index 15da26c32..683be5cb6 100644
--- a/lunaria/files/de-DE.json
+++ b/lunaria/files/de-DE.json
@@ -152,7 +152,7 @@
       "license": "Lizenz",
       "deps": "Abhängigkeiten",
       "install_size": "Installationsgröße",
-      "vulns": "Sicherheits&shy;lücken&nbsp;verfügungs&shy;gesetz",
+      "vulns": "Sicherheitslücken",
       "published": "Veröffentlicht",
       "published_tooltip": "Datum, an dem {package}{'@'}{version} veröffentlicht wurde",
       "skills": "Fähigkeiten",

From 3255a0616849885c9fd20d7ead84a6c8294f8f63 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Fri, 6 Feb 2026 22:03:05 +0000
Subject: [PATCH 71/91] [autofix.ci] apply automated fixes

---
 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 58af0cf0a..a6d4d4a69 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1061,7 +1061,7 @@ onKeyStroke(
               {{ $t('package.readme.title') }}
             </LinkBase>
           </h2>
-           <ClientOnly>
+          <ClientOnly>
             <div class="flex items-center gap-2">
               <!-- Copy readme as Markdown button -->
               <TooltipApp

From bcc1a2d870edea9cb9bca3ecd64ddf7bb15252de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 23:42:28 +0100
Subject: [PATCH 72/91] style: make links mono font again

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

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 269e6f424..ea3222fba 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -76,7 +76,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/50': !isLinkAnchor && isLink,
-      'text-fg hover:(no-underline text-fg/50) focus-visible:(no-underline text-fg/50) transition-colors duration-200':
+      'font-mono text-fg hover:(no-underline text-fg/50) focus-visible:(no-underline text-fg/50) transition-colors duration-200':
         isLink,
       'font-mono border border-border rounded-md transition-all duration-200': isButton,
       'text-sm px-4 py-2': isButtonMedium,

From 4901f0107416266a8508829c7990285c8b1915d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 23:43:15 +0100
Subject: [PATCH 73/91] style: mute link underline more

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

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index ea3222fba..7764b3184 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 !
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/50': !isLinkAnchor && isLink,
+      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
       'font-mono text-fg hover:(no-underline text-fg/50) focus-visible:(no-underline text-fg/50) transition-colors duration-200':
         isLink,
       'font-mono border border-border rounded-md transition-all duration-200': isButton,

From 702bbe9410344591f73dfe10623589358fbdf932 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 23:45:16 +0100
Subject: [PATCH 74/91] style: reduce font size in footer

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

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index fee097ca3..83491bf70 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -14,7 +14,7 @@ const isHome = computed(() => route.name === 'index')
           <BuildEnvironment v-if="!isHome" footer />
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
-        <div class="hidden sm:flex items-center gap-6 min-h-11">
+        <div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
           <LinkBase :to="{ name: 'about' }">
             {{ $t('footer.about') }}
           </LinkBase>

From 0d4680686b46d39afdcbf98314cf13def98d61f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 23:51:49 +0100
Subject: [PATCH 75/91] style: use accent color for link hover

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

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 7764b3184..80e13127e 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -76,7 +76,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
-      'font-mono text-fg hover:(no-underline text-fg/50) focus-visible:(no-underline text-fg/50) transition-colors duration-200':
+      'font-mono text-fg hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-color duration-200':
         isLink,
       'font-mono border border-border rounded-md transition-all duration-200': isButton,
       'text-sm px-4 py-2': isButtonMedium,

From 07127ebae2633b9a5c8ca3a6daae7b740d6c9874 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 23:57:00 +0100
Subject: [PATCH 76/91] refactor: use button icon for like button

---
 app/pages/package/[[org]]/[name].vue | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index a6d4d4a69..ad877f77c 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -624,19 +624,13 @@ onKeyStroke(
                     likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
                   :aria-pressed="likesData?.userHasLiked"
+                  :classicon="
+                    likesData?.userHasLiked
+                      ? 'i-lucide-heart-minus text-red-500'
+                      : 'i-lucide-heart-plus'
+                  "
                 >
-                  <span
-                    :class="
-                      likesData?.userHasLiked
-                        ? 'i-lucide-heart-minus text-red-500'
-                        : 'i-lucide-heart-plus'
-                    "
-                    class="w-4 h-4"
-                    aria-hidden="true"
-                  />
-                  <span>{{
-                    formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 })
-                  }}</span>
+                  {{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}
                 </ButtonBase>
               </TooltipApp>
               <template #fallback>

From c1352d2b49bf05963a85cda50e6d0ee65dfcbf63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 6 Feb 2026 23:59:26 +0100
Subject: [PATCH 77/91] style: remove external link indicator from links that
 already have an icon

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

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 80e13127e..61a14df6e 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -100,7 +100,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     <slot />
     <!-- automatically show icon indicating external link -->
     <span
-      v-if="isLinkExternal"
+      v-if="isLinkExternal && !classicon"
       class="i-carbon:launch rtl-flip w-3 h-3 opacity-50"
       aria-hidden="true"
     />

From ea5c9fa109697b57371db75af54bc9e971b80fdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 00:03:48 +0100
Subject: [PATCH 78/91] style: make deps info fit on single line

---
 app/pages/package/[[org]]/[name].vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index ad877f77c..1cb806a99 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -17,6 +17,7 @@ import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
 import { LinkBase } from '#components'
+import { isTemplateExpression } from 'typescript'
 
 defineOgImageComponent('Package', {
   name: () => packageName.value,
@@ -810,14 +811,14 @@ onKeyStroke(
             <dt class="text-xs text-fg-subtle uppercase tracking-wider">
               {{ $t('package.stats.deps') }}
             </dt>
-            <dd class="font-mono text-sm text-fg">
-              <span class="flex items-center justify-start gap-2">
+            <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
+              <span class="flex items-center gap-1">
                 <!-- Direct deps (muted) -->
                 <span class="text-fg-muted">{{ getDependencyCount(displayVersion) }}</span>
 
                 <!-- Separator and total transitive deps -->
                 <template v-if="getDependencyCount(displayVersion) !== totalDepsCount">
-                  <span class="text-fg-subtle mx-1">/</span>
+                  <span class="text-fg-subtle">/</span>
 
                   <ClientOnly>
                     <span
@@ -840,8 +841,7 @@ onKeyStroke(
                   </ClientOnly>
                 </template>
               </span>
-
-              <span class="flex items-center gap-1">
+              <ButtonGroup>
                 <LinkBase
                   variant="button-secondary"
                   size="small"
@@ -863,7 +863,7 @@ onKeyStroke(
                 >
                   <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
                 </LinkBase>
-              </span>
+              </ButtonGroup>
             </dd>
           </div>
 

From a05c470ab15d32abd121f706b3ede15d8d2fa195 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 00:06:56 +0100
Subject: [PATCH 79/91] style: temporarily re-add button cursor pointer, for
 legacy buttons

---
 app/assets/main.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/assets/main.css b/app/assets/main.css
index 945ce35eb..a733a58ac 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -200,6 +200,11 @@ dd {
   margin: 0;
 }
 
+/* Reset button styles */
+button {
+  cursor: pointer;
+}
+
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);

From 0f9d174a200b2661fec1171b658779ba2003afa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 00:09:03 +0100
Subject: [PATCH 80/91] fix: fix close button for modal

---
 app/components/Modal.client.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
index 4438f7001..6659b29ad 100644
--- a/app/components/Modal.client.vue
+++ b/app/components/Modal.client.vue
@@ -55,12 +55,10 @@ defineExpose({
         </h2>
         <ButtonBase
           type="button"
-          class="text-fg-subtle w-8 h-8 p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
-        >
-          <span class="i-carbon-close w-5 h-5" aria-hidden="true" />
-        </ButtonBase>
+          classicon="i-carbon-close"
+        />
       </div>
       <!-- Modal body content -->
       <slot />

From 06d4847fa13cec9d4368c08075336e4c2396c240 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 00:49:23 +0100
Subject: [PATCH 81/91] style: dont hide underline on hover

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

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 61a14df6e..1d9738408 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -76,7 +76,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
-      'font-mono text-fg hover:(no-underline text-accent) focus-visible:(no-underline text-accent) transition-color duration-200':
+      '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,

From cd9513966eed6ae6bdb0390b172f8542d23cad23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 00:54:03 +0100
Subject: [PATCH 82/91] style: reduce hover button contrast

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

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index 1d9738408..b105d3281 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/30) focus-visible:(bg-fg/30)':
+      'bg-transparent text-fg hover:(bg-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',
     }"

From 1ae2a621c45fa61e7ca6228b55d186ec5950b760 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 01:06:16 +0100
Subject: [PATCH 83/91] docs: fix typo

---
 app/assets/main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index a733a58ac..290b71d3d 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -190,7 +190,7 @@ body {
 :-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 note be. */
+  which it explicitly should not be. */
   outline: 2px solid var(--accent) !important;
   outline-offset: 2px !important;
 }

From e45e548a155f2cc69fcf7d8a438e788d4cd3d33f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 01:06:56 +0100
Subject: [PATCH 84/91] fix: remove unused import

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

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 09a75b77f..3a5dacc58 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -17,7 +17,6 @@ import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
 import { LinkBase } from '#components'
-import { isTemplateExpression } from 'typescript'
 
 defineOgImageComponent('Package', {
   name: () => packageName.value,

From 4765ef1a8f45a9994970dbaf4a26e8861b5eb44c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 01:09:41 +0100
Subject: [PATCH 85/91] style: add spacing around keyboard shortcut

---
 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 9c07be56f..982e6af63 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -60,7 +60,7 @@ defineExpose({
     <slot />
     <kbd
       v-if="keyshortcut"
-      class="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 text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ keyshortcut }}
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index b105d3281..d487bf4e6 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -111,7 +111,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     />
     <kbd
       v-if="keyshortcut"
-      class="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 text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ keyshortcut }}

From ecc87a33fe5257102db9852437ad7bb44e5be84d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 01:14:12 +0100
Subject: [PATCH 86/91] style: revert menu back to old design while using new
 components

---
 app/components/AppHeader.vue                 | 18 ++++++++++++++----
 app/components/Header/AccountMenu.client.vue |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index f808e5caf..01390c82e 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -151,19 +151,29 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <ButtonGroup class="hidden sm:flex flex-shrink-0">
+      <div class="hidden sm:flex flex-shrink-0">
         <!-- Desktop: Compare link -->
-        <LinkBase variant="button-secondary" :to="{ name: 'compare' }" keyshortcut="c">
+        <LinkBase
+          class="border-none"
+          variant="button-secondary"
+          :to="{ name: 'compare' }"
+          keyshortcut="c"
+        >
           {{ $t('nav.compare') }}
         </LinkBase>
 
         <!-- Desktop: Settings link -->
-        <LinkBase variant="button-secondary" :to="{ name: 'settings' }" keyshortcut=",">
+        <LinkBase
+          class="border-none"
+          variant="button-secondary"
+          :to="{ name: 'settings' }"
+          keyshortcut=","
+        >
           {{ $t('nav.settings') }}
         </LinkBase>
 
         <HeaderAccountMenu />
-      </ButtonGroup>
+      </div>
 
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 8812b2ec5..470fd4cd2 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -62,7 +62,7 @@ function openAuthModal() {
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
-      class="rounded-s-none border-s-0"
+      class="border-none"
     >
       <!-- Stacked avatars when connected -->
       <div

From 4ceb40e3979d867551afa78d051a61f12dd4069e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 01:15:53 +0100
Subject: [PATCH 87/91] fix: improve conditional rendering

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

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 3a5dacc58..127c31787 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -857,11 +857,10 @@ onKeyStroke(
                   </ClientOnly>
                 </template>
               </span>
-              <ButtonGroup>
+              <ButtonGroup v-if="getDependencyCount(displayVersion) > 0">
                 <LinkBase
                   variant="button-secondary"
                   size="small"
-                  v-if="getDependencyCount(displayVersion) > 0"
                   :to="`https://npmgraph.js.org/?q=${pkg.name}`"
                   :title="$t('package.stats.view_dependency_graph')"
                   classicon="i-carbon:network-3"
@@ -872,7 +871,6 @@ onKeyStroke(
                 <LinkBase
                   variant="button-secondary"
                   size="small"
-                  v-if="getDependencyCount(displayVersion) > 0"
                   :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                   :title="$t('package.stats.inspect_dependency_tree')"
                   classicon="i-carbon:tree-view"

From b323b78fbbdb92179301b3c076be79957847109a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Sat, 7 Feb 2026 01:31:38 +0100
Subject: [PATCH 88/91] fix: replace new button

---
 app/components/Button/Base.vue       |  6 +++---
 app/pages/package/[[org]]/[name].vue | 16 ++++------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 982e6af63..5a0a39af1 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -31,13 +31,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) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
+    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="{
       '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)':
+      '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))':
         variant === 'secondary',
-      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50)':
+      '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',
     }"
     :type="props.type"
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 127c31787..14b101cb2 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1077,24 +1077,16 @@ onKeyStroke(
                 :text="$t('package.readme.copy_as_markdown')"
                 position="bottom"
               >
-                <button
-                  type="button"
+                <ButtonBase
                   @click="copyReadme()"
-                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 inline-flex items-center gap-1.5"
-                  :class="
-                    copiedReadme ? 'text-accent bg-accent/10' : 'text-fg-subtle bg-bg hover:text-fg'
-                  "
+                  :aria-pressed="copiedReadme"
                   :aria-label="
                     copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
                   "
+                  :classicon="copiedReadme ? 'i-carbon:checkmark' : 'i-simple-icons:markdown'"
                 >
-                  <span
-                    :class="copiedReadme ? 'i-carbon:checkmark' : 'i-simple-icons:markdown'"
-                    class="size-3"
-                    aria-hidden="true"
-                  />
                   {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
-                </button>
+                </ButtonBase>
               </TooltipApp>
               <ReadmeTocDropdown
                 v-if="readmeData?.toc && readmeData.toc.length > 1"

From 58b0831dffb0f918225a0946f3a649a69ecf5be2 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 7 Feb 2026 10:15:23 +0000
Subject: [PATCH 89/91] chore: fix comment location

---
 app/assets/main.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 290b71d3d..2ed934ff8 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -159,8 +159,8 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  scroll-padding-top: 5rem;
   /* Offset for fixed header - otherwise anchor headers are cutted */
+  scroll-padding-top: 5rem;
   scrollbar-gutter: stable;
 }
 

From 19bfe20e8f420e3bb5722a02d2452282b9f29ac6 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 7 Feb 2026 10:19:50 +0000
Subject: [PATCH 90/91] fix: remove nuxtlink default values

---
 app/components/Link/Base.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index d487bf4e6..2c4521e24 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -86,11 +86,8 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
       'text-bg bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
     }"
     :to="to"
-    :href="to"
-    :external="isLinkExternal"
     :aria-keyshortcuts="keyshortcut"
     :target="isLinkExternal ? '_blank' : undefined"
-    :rel="isLinkExternal ? 'noopener noreferrer' : undefined"
   >
     <span
       v-if="classicon"

From e153b083018a75b83412fc48d67660b45faeedd8 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 7 Feb 2026 10:34:27 +0000
Subject: [PATCH 91/91] fix: update font size of links

---
 app/pages/index.vue                  | 2 +-
 app/pages/package/[[org]]/[name].vue | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index ae9ce1b01..88395fee5 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -121,7 +121,7 @@ defineOgImageComponent('Default', {
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
           <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
-            <LinkBase :to="packageRoute(framework.package)" class="gap-2">
+            <LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm">
               <span
                 class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
               />
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 14b101cb2..7d0f735b5 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -713,7 +713,9 @@ onKeyStroke(
           </div>
 
           <!-- External links -->
-          <ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3">
+          <ul
+            class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm"
+          >
             <li v-if="repositoryUrl">
               <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
                 <span v-if="repoRef">
@@ -1070,7 +1072,7 @@ onKeyStroke(
             </LinkBase>
           </h2>
           <ClientOnly>
-            <div class="flex items-center gap-2">
+            <div class="flex gap-2">
               <!-- Copy readme as Markdown button -->
               <TooltipApp
                 v-if="readmeData?.md"
@@ -1145,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)])"
+          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"
         >
           <!-- Team access controls (for scoped packages when connected) -->
           <ClientOnly>