From dc1b9194ca72ef8b3d76358ba724e24cb6a5f786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 17:55:17 +0100
Subject: [PATCH 01/16] refactor: make radio button its own component

---
 app/components/Filter/Panel.vue    | 15 ++++---
 app/components/Radio/Base.vue      | 65 ++++++++++++++++++++++++++++++
 app/components/Tag/RadioButton.vue | 45 ---------------------
 test/nuxt/a11y.spec.ts             | 10 ++---
 4 files changed, 79 insertions(+), 56 deletions(-)
 create mode 100644 app/components/Radio/Base.vue
 delete mode 100644 app/components/Tag/RadioButton.vue

diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 788403ad3..88fb97b24 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -261,16 +261,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.weekly_downloads')"
           >
-            <TagRadioButton
+            <RadioBase
               v-for="range in DOWNLOAD_RANGES"
               :key="range.value"
               :model-value="filters.downloadRange"
               :value="range.value"
               @update:modelValue="emit('update:downloadRange', $event as DownloadRange)"
               name="range"
+              size="small"
             >
               {{ getDownloadRangeLabelKey(range.value) }}
-            </TagRadioButton>
+            </RadioBase>
           </div>
         </fieldset>
 
@@ -284,16 +285,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             role="radiogroup"
             :aria-label="$t('filters.updated_within')"
           >
-            <TagRadioButton
+            <RadioBase
               v-for="option in UPDATED_WITHIN_OPTIONS"
               :key="option.value"
               :model-value="filters.updatedWithin"
               :value="option.value"
               name="updatedWithin"
               @update:modelValue="emit('update:updatedWithin', $event as UpdatedWithin)"
+              size="small"
             >
               {{ getUpdatedWithinLabelKey(option.value) }}
-            </TagRadioButton>
+            </RadioBase>
           </div>
         </fieldset>
 
@@ -306,16 +308,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             </span>
           </legend>
           <div class="flex flex-wrap gap-2" role="radiogroup" :aria-label="$t('filters.security')">
-            <TagRadioButton
+            <RadioBase
               v-for="security in SECURITY_FILTER_VALUES"
               :key="security"
               disabled
               :model-value="filters.security"
               :value="security"
               name="security"
+              size="small"
             >
               {{ getSecurityLabelKey(security) }}
-            </TagRadioButton>
+            </RadioBase>
           </div>
         </fieldset>
 
diff --git a/app/components/Radio/Base.vue b/app/components/Radio/Base.vue
new file mode 100644
index 000000000..124a9d374
--- /dev/null
+++ b/app/components/Radio/Base.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const model = defineModel<string>()
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    size?: 'small' | 'medium'
+    hideRadio?: boolean
+    value: string
+
+    /**
+     * type should never be used, because this will always be a radio button.
+     *
+     * If you want a link use `TagLink` instead.
+     *  */
+    type?: never
+
+    /** Shouldn't try to set `checked` explicitly, is handled internally */
+    checked?: never
+  }>(),
+  {
+    size: 'medium',
+  },
+)
+
+const el = useTemplateRef('el')
+
+defineExpose({
+  focus: () => el.value?.focus(),
+  getBoundingClientRect: () => el.value?.getBoundingClientRect(),
+})
+
+const uid = useId()
+const internalId = `${model.value}-${uid}`
+const checked = computed(() => model.value === props.value)
+
+/** Todo: This shouldn't be necessary, but using v-model on `input type=radio` doesn't work as expected in Vue */
+const onChange = () => {
+  model.value = props.value
+}
+</script>
+
+<template>
+  <div>
+    <input
+      type="radio"
+      :id="internalId"
+      :value="props.value"
+      :checked="checked"
+      :disabled="props.disabled ? true : undefined"
+      @change="onChange"
+      class="peer sr-only"
+    />
+    <label
+      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
+      :class="{
+        'text-sm px-4 py-2': size === 'medium',
+        'text-xs px-2 py-0.5': size === 'small',
+      }"
+      :htmlFor="internalId"
+    >
+      <slot />
+    </label>
+  </div>
+</template>
diff --git a/app/components/Tag/RadioButton.vue b/app/components/Tag/RadioButton.vue
deleted file mode 100644
index aa3778cbd..000000000
--- a/app/components/Tag/RadioButton.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-const model = defineModel<string>()
-
-const props = defineProps<{
-  disabled?: boolean
-  /**
-   * type should never be used, because this will always be a radio button.
-   *
-   * If you want a link use `TagLink` instead.
-   *  */
-  type?: never
-
-  /** Shouldn't try to set `checked` explicitly, is handled internally */
-  checked?: never
-  value: string
-}>()
-
-const uid = useId()
-const internalId = `${model.value}-${uid}`
-const checked = computed(() => model.value === props.value)
-/** Todo: This shouldn't be necessary, but using v-model on `input type=radio` doesn't work as expected in Vue */
-const onChange = () => {
-  model.value = props.value
-}
-</script>
-
-<template>
-  <div>
-    <input
-      type="radio"
-      :id="internalId"
-      :value="props.value"
-      :checked="checked"
-      :disabled="props.disabled ? true : undefined"
-      @change="onChange"
-      class="peer sr-only"
-    />
-    <label
-      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
-      :htmlFor="internalId"
-    >
-      <slot />
-    </label>
-  </div>
-</template>
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 23ffb915a..e3077dd76 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -183,7 +183,7 @@ import {
   SettingsBgThemePicker,
   SettingsToggle,
   TagStatic,
-  TagRadioButton,
+  RadioBase,
   TerminalExecute,
   TerminalInstall,
   TooltipAnnounce,
@@ -430,9 +430,9 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('TagRadioButton', () => {
+  describe('RadioBase', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(TagRadioButton, {
+      const component = await mountSuspended(RadioBase, {
         props: { value: 'option1', modelValue: 'option2' },
         slots: { default: 'Tag content' },
       })
@@ -441,7 +441,7 @@ describe('component accessibility audits', () => {
     })
 
     it('should have no accessibility violations when checked', async () => {
-      const component = await mountSuspended(TagRadioButton, {
+      const component = await mountSuspended(RadioBase, {
         props: { value: 'option1', modelValue: 'option1' },
         slots: { default: 'Tag content' },
       })
@@ -450,7 +450,7 @@ describe('component accessibility audits', () => {
     })
 
     it('should have no accessibility violations when disabled', async () => {
-      const component = await mountSuspended(TagRadioButton, {
+      const component = await mountSuspended(RadioBase, {
         props: { value: 'option1', modelValue: 'option2', disabled: true },
         slots: { default: 'Tag content' },
       })

From c6f6e8ed7dc9dd8c1891a45ede036c349b10a549 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 18:02:39 +0100
Subject: [PATCH 02/16] style: show radio button on radio button

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

diff --git a/app/components/Radio/Base.vue b/app/components/Radio/Base.vue
index 124a9d374..a32201e7d 100644
--- a/app/components/Radio/Base.vue
+++ b/app/components/Radio/Base.vue
@@ -52,7 +52,7 @@ const onChange = () => {
       class="peer sr-only"
     />
     <label
-      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
+      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none) before:content-[''] before:inline-block before:w-3 before:h-3 before:rounded-full before:bg-transparent before:border before:border-current before:me-2 peer-checked:before:bg-accent peer-checked:before:border-transparent peer-disabled:before:border-current/50 before:transition-colors before:duration-200"
       :class="{
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',

From 017817853275e4dd86b1c9e391dd9b184e4244f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 18:09:13 +0100
Subject: [PATCH 03/16] style: move focus to radio itself

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

diff --git a/app/components/Radio/Base.vue b/app/components/Radio/Base.vue
index a32201e7d..5f4a1f214 100644
--- a/app/components/Radio/Base.vue
+++ b/app/components/Radio/Base.vue
@@ -52,7 +52,7 @@ const onChange = () => {
       class="peer sr-only"
     />
     <label
-      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none) before:content-[''] before:inline-block before:w-3 before:h-3 before:rounded-full before:bg-transparent before:border before:border-current before:me-2 peer-checked:before:bg-accent peer-checked:before:border-transparent peer-disabled:before:border-current/50 before:transition-colors before:duration-200"
+      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 peer-focus-visible:(before:outline-2 before:outline-accent/70 before:outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none) before:content-[''] before:inline-block before:w-3 before:h-3 before:rounded-full before:bg-transparent before:border before:border-current before:me-2 peer-checked:before:bg-accent peer-checked:before:border-transparent peer-disabled:before:border-current/50 before:transition-colors before:duration-200"
       :class="{
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',

From 41bb43ae523257b39d05c60fd0049c985ae9806f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 19:08:22 +0100
Subject: [PATCH 04/16] refactor: add proper checkbox component

---
 app/components/Checkbox/Base.vue | 54 ++++++++++++++++++++++++++++++++
 app/components/Filter/Panel.vue  |  9 +++---
 2 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 app/components/Checkbox/Base.vue

diff --git a/app/components/Checkbox/Base.vue b/app/components/Checkbox/Base.vue
new file mode 100644
index 000000000..074a464d0
--- /dev/null
+++ b/app/components/Checkbox/Base.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const model = defineModel<boolean>()
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    size?: 'small' | 'medium'
+    hideRadio?: boolean
+    value: string
+
+    /**
+     * type should never be used, because this will always be a radio button.
+     *
+     * If you want a link use `TagLink` instead.
+     *  */
+    type?: never
+  }>(),
+  {
+    size: 'medium',
+  },
+)
+
+const el = useTemplateRef('el')
+
+defineExpose({
+  focus: () => el.value?.focus(),
+  getBoundingClientRect: () => el.value?.getBoundingClientRect(),
+})
+
+const uid = useId()
+const internalId = `checkbox-${uid}`
+</script>
+
+<template>
+  <label
+    :htmlFor="internalId"
+    class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 border-none has-checked:(bg-fg text-bg border-fg hover:(text-bg/50)) has-disabled:(opacity-50 pointer-events-none)"
+    :class="{
+      'text-sm px-4 py-2': size === 'medium',
+      'text-xs px-2 py-0.5': size === 'small',
+    }"
+  >
+    <input
+      type="checkbox"
+      :value="props.value"
+      :checked="model"
+      :id="internalId"
+      :disabled="props.disabled ? true : undefined"
+      @change="$emit('update:modelValue', !model)"
+      class="size-[1em] bg-bg-muted border-border rounded disabled:opacity-50 me-2"
+    />
+    <slot />
+  </label>
+</template>
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 88fb97b24..2219d16de 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -328,15 +328,16 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.keywords') }}
           </legend>
           <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
-            <ButtonBase
+            <CheckboxBase
               v-for="keyword in displayedKeywords"
               :key="keyword"
               size="small"
-              :aria-pressed="filters.keywords.includes(keyword)"
-              @click="emit('toggleKeyword', keyword)"
+              :model-value="filters.keywords.includes(keyword)"
+              @update:modelValue="emit('toggleKeyword', keyword)"
+              :value="keyword"
             >
               {{ keyword }}
-            </ButtonBase>
+            </CheckboxBase>
             <button
               v-if="hasMoreKeywords"
               type="button"

From ffdebdefbd57ed1e657673ffb110ede0383158aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 19:12:30 +0100
Subject: [PATCH 05/16] refactor: use native checkbox

---
 app/components/Radio/Base.vue | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/components/Radio/Base.vue b/app/components/Radio/Base.vue
index 5f4a1f214..cb0f78163 100644
--- a/app/components/Radio/Base.vue
+++ b/app/components/Radio/Base.vue
@@ -41,7 +41,14 @@ const onChange = () => {
 </script>
 
 <template>
-  <div>
+  <label
+    class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 border-none has-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) has-disabled:(opacity-50 pointer-events-none) before:content-['']"
+    :class="{
+      'text-sm px-4 py-2': size === 'medium',
+      'text-xs px-2 py-0.5': size === 'small',
+    }"
+    :htmlFor="internalId"
+  >
     <input
       type="radio"
       :id="internalId"
@@ -49,17 +56,8 @@ const onChange = () => {
       :checked="checked"
       :disabled="props.disabled ? true : undefined"
       @change="onChange"
-      class="peer sr-only"
+      class="me-2"
     />
-    <label
-      class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 peer-focus-visible:(before:outline-2 before:outline-accent/70 before:outline-offset-2) border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none) before:content-[''] before:inline-block before:w-3 before:h-3 before:rounded-full before:bg-transparent before:border before:border-current before:me-2 peer-checked:before:bg-accent peer-checked:before:border-transparent peer-disabled:before:border-current/50 before:transition-colors before:duration-200"
-      :class="{
-        'text-sm px-4 py-2': size === 'medium',
-        'text-xs px-2 py-0.5': size === 'small',
-      }"
-      :htmlFor="internalId"
-    >
-      <slot />
-    </label>
-  </div>
+    <slot />
+  </label>
 </template>

From 7506836ef7e404a5002319af092b81072bceda33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 19:16:13 +0100
Subject: [PATCH 06/16] style: improve design of checkbox and radios

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

diff --git a/app/components/Checkbox/Base.vue b/app/components/Checkbox/Base.vue
index 074a464d0..aff75a902 100644
--- a/app/components/Checkbox/Base.vue
+++ b/app/components/Checkbox/Base.vue
@@ -34,7 +34,7 @@ const internalId = `checkbox-${uid}`
 <template>
   <label
     :htmlFor="internalId"
-    class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 border-none has-checked:(bg-fg text-bg border-fg hover:(text-bg/50)) has-disabled:(opacity-50 pointer-events-none)"
+    class="bg-bg-muted text-fg-muted hover:(text-fg bg-fg/10) inline-flex items-center font-mono rounded transition-colors duration-200 has-checked:(bg-fg/20 text-fg hover:(text-fg)) has-disabled:(opacity-50 pointer-events-none)"
     :class="{
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
diff --git a/app/components/Radio/Base.vue b/app/components/Radio/Base.vue
index cb0f78163..24a75dfe1 100644
--- a/app/components/Radio/Base.vue
+++ b/app/components/Radio/Base.vue
@@ -42,7 +42,7 @@ const onChange = () => {
 
 <template>
   <label
-    class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center font-mono border rounded transition-colors duration-200 border-none has-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) has-disabled:(opacity-50 pointer-events-none) before:content-['']"
+    class="bg-bg-muted text-fg-muted hover:(text-fg bg-fg/10) inline-flex items-center font-mono rounded transition-colors duration-200 has-checked:(bg-fg/20 text-fg hover:(text-fg)) has-disabled:(opacity-50 pointer-events-none) before:content-['']"
     :class="{
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',

From 17fe1116d0a118ffa34697377e03f9dfc9b2c967 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 19:28:34 +0100
Subject: [PATCH 07/16] refactor: use checkbox components

---
 app/components/Checkbox/Base.vue    |  2 +-
 app/components/Filter/Panel.vue     |  2 +-
 app/components/Package/Card.vue     | 11 ++++++-----
 app/components/Package/TableRow.vue | 10 +++++-----
 app/components/Radio/Base.vue       |  2 +-
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/components/Checkbox/Base.vue b/app/components/Checkbox/Base.vue
index aff75a902..acb9cd46f 100644
--- a/app/components/Checkbox/Base.vue
+++ b/app/components/Checkbox/Base.vue
@@ -47,7 +47,7 @@ const internalId = `checkbox-${uid}`
       :id="internalId"
       :disabled="props.disabled ? true : undefined"
       @change="$emit('update:modelValue', !model)"
-      class="size-[1em] bg-bg-muted border-border rounded disabled:opacity-50 me-2"
+      class="size-[1em] bg-bg-muted border-border rounded disabled:opacity-50 me-1"
     />
     <slot />
   </label>
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 2219d16de..205a5025c 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -332,7 +332,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               v-for="keyword in displayedKeywords"
               :key="keyword"
               size="small"
-              :model-value="filters.keywords.includes(keyword)"
+              :v-model="filters.keywords.includes(keyword)"
               @update:modelValue="emit('toggleKeyword', keyword)"
               :value="keyword"
             >
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 12d25268b..86f9f2977 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -167,16 +167,17 @@ const numberFormatter = useNumberFormatter()
       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"
     >
       <li v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword">
-        <ButtonBase
+        <CheckboxBase
           class="pointer-events-auto"
+          :key="keyword"
           size="small"
-          :aria-pressed="props.filters?.keywords.includes(keyword)"
+          :model-value="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
-          :data-result-index="index"
-          @click.stop="emit('clickKeyword', keyword)"
+          @update:modelValue="emit('clickKeyword', keyword)"
+          :value="keyword"
         >
           {{ keyword }}
-        </ButtonBase>
+        </CheckboxBase>
       </li>
       <li>
         <span
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 017d1b289..7b146fa2c 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -130,17 +130,17 @@ const allMaintainersText = computed(() => {
         class="relative z-10 flex flex-wrap gap-1 justify-end"
         :aria-label="$t('package.card.keywords')"
       >
-        <ButtonBase
+        <CheckboxBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
           size="small"
-          :aria-pressed="props.filters?.keywords.includes(keyword)"
+          :model-value="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) }"
+          @update:modelValue="emit('clickKeyword', keyword)"
+          :value="keyword"
         >
           {{ keyword }}
-        </ButtonBase>
+        </CheckboxBase>
         <span
           v-if="pkg.keywords.length > 3"
           class="text-fg-subtle text-xs"
diff --git a/app/components/Radio/Base.vue b/app/components/Radio/Base.vue
index 24a75dfe1..e0542d7a3 100644
--- a/app/components/Radio/Base.vue
+++ b/app/components/Radio/Base.vue
@@ -56,7 +56,7 @@ const onChange = () => {
       :checked="checked"
       :disabled="props.disabled ? true : undefined"
       @change="onChange"
-      class="me-2"
+      class="me-1"
     />
     <slot />
   </label>

From dc1a5a68f44e9e64e5e3a4aa8d95fef189c40000 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 19:35:57 +0100
Subject: [PATCH 08/16] refactor: use checkbox components

---
 app/components/ColumnPicker.vue | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
index 7dfe611c1..e2347c1be 100644
--- a/app/components/ColumnPicker.vue
+++ b/app/components/ColumnPicker.vue
@@ -101,20 +101,18 @@ function handleReset() {
             <label
               v-for="column in toggleableColumns"
               :key="column.id"
-              class="flex gap-2 items-center px-3 py-2 transition-colors duration-200"
-              :class="column.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-muted'"
+              class="flex gap-2 items-center px-3 py-2"
             >
-              <input
-                type="checkbox"
-                :checked="column.visible"
+              <CheckboxBase
+                :model-value="column.visible"
                 :disabled="column.disabled"
+                :value="column.id"
                 :aria-describedby="column.disabled ? `${column.id}-disabled-reason` : undefined"
-                class="w-4 h-4 accent-fg bg-bg-muted border-border rounded disabled:opacity-50"
-                @change="!column.disabled && emit('toggle', column.id)"
-              />
-              <span class="text-sm text-fg-muted font-mono flex-1">
+                class="w-full"
+                @update:modelValue="emit('toggle', column.id)"
+              >
                 {{ getColumnLabel(column.id) }}
-              </span>
+              </CheckboxBase>
               <TooltipApp
                 v-if="column.disabled"
                 :id="`${column.id}-disabled-reason`"
@@ -129,8 +127,8 @@ function handleReset() {
             </label>
           </div>
 
-          <div class="border-t border-border py-1">
-            <ButtonBase @click="handleReset">
+          <div class="border-t border-border p-1">
+            <ButtonBase @click="handleReset" class="w-full">
               {{ $t('filters.columns.reset') }}
             </ButtonBase>
           </div>

From d7837056d47829f5671709c2ebed9c3ad8deb16b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 19:44:44 +0100
Subject: [PATCH 09/16] refactor: use radio component

---
 .../Package/VersionDistribution.vue           | 35 ++++++-------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 7513f6e4b..f2dd99313 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -332,42 +332,29 @@ const endDate = computed(() => {
             {{ $t('package.versions.distribution_title') }}
           </label>
           <div
-            class="flex items-center bg-bg-subtle border border-border rounded-md"
+            class="flex gap-2 items-center"
             role="group"
             :aria-label="$t('package.versions.distribution_title')"
             tabindex="0"
             @keydown="handleGroupingKeydown"
           >
-            <button
-              type="button"
-              :class="[
-                'px-4 py-1.75 font-mono text-sm transition-colors rounded-s-md',
-                groupingMode === 'major'
-                  ? 'bg-accent text-bg font-medium'
-                  : 'text-fg-subtle hover:text-fg hover:bg-bg-subtle/50',
-              ]"
-              :aria-pressed="groupingMode === 'major'"
+            <RadioBase
+              :model-value="groupingMode"
+              :value="'major'"
               :disabled="pending"
-              tabindex="-1"
-              @click="groupingMode = 'major'"
+              @update:modelValue="groupingMode = 'major'"
             >
               {{ $t('package.versions.grouping_major') }}
-            </button>
-            <button
-              type="button"
-              :class="[
-                'px-4 py-1.75 font-mono text-sm transition-colors rounded-e-md border-is border-border',
-                groupingMode === 'minor'
-                  ? 'bg-accent text-bg font-medium'
-                  : 'text-fg-subtle hover:text-fg hover:bg-bg-subtle/50',
-              ]"
-              :aria-pressed="groupingMode === 'minor'"
+            </RadioBase>
+            <RadioBase
+              :model-value="groupingMode"
+              :value="'minor'"
               :disabled="pending"
-              tabindex="-1"
               @click="groupingMode = 'minor'"
+              @update:model-value="groupingMode = 'minor'"
             >
               {{ $t('package.versions.grouping_minor') }}
-            </button>
+            </RadioBase>
           </div>
         </div>
 

From 75298422927bccaa2cfabcab5ecbcbc39a18268a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 19:52:50 +0100
Subject: [PATCH 10/16] refactor: use checkbox component

---
 app/components/Compare/FacetSelector.vue | 25 +++++-------------------
 1 file changed, 5 insertions(+), 20 deletions(-)

diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index f8f39aee7..1c29411d9 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -61,36 +61,21 @@ function isCategoryNoneSelected(category: string): boolean {
       <!-- Facet buttons -->
       <div class="flex items-center gap-1.5 flex-wrap" role="group">
         <!-- TODO: These should be checkboxes -->
-        <ButtonBase
+        <CheckboxBase
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
           size="small"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
-          :aria-pressed="isFacetSelected(facet.id)"
-          :aria-label="facet.label"
-          class="gap-1 px-1.5 rounded transition-colors focus-visible:outline-accent/70"
-          :class="
-            facet.comingSoon
-              ? 'text-fg-subtle/50 bg-bg-subtle border-border-subtle cursor-not-allowed'
-              : isFacetSelected(facet.id)
-                ? 'text-fg-muted bg-bg-muted'
-                : 'text-fg-subtle bg-bg-subtle border-border-subtle hover:text-fg-muted hover:border-border'
-          "
-          @click="!facet.comingSoon && toggleFacet(facet.id)"
-          :classicon="
-            facet.comingSoon
-              ? undefined
-              : isFacetSelected(facet.id)
-                ? 'i-lucide:check'
-                : 'i-lucide:plus'
-          "
+          :model-value="isFacetSelected(facet.id)"
+          :value="facet.id"
+          @update:model-value="!facet.comingSoon && toggleFacet(facet.id)"
         >
           {{ facet.label }}
           <span v-if="facet.comingSoon" class="text-4xs"
             >({{ $t('compare.facets.coming_soon') }})</span
           >
-        </ButtonBase>
+        </CheckboxBase>
       </div>
     </div>
   </div>

From b417a404f8c631e68cd27cc56d6448c47f54f9b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 20:02:02 +0100
Subject: [PATCH 11/16] refactor: use checkbox component

---
 app/components/Checkbox/Base.vue         |  3 ++
 app/components/Compare/FacetSelector.vue | 44 +++++++-----------------
 app/pages/compare.vue                    | 35 ++++++-------------
 3 files changed, 27 insertions(+), 55 deletions(-)

diff --git a/app/components/Checkbox/Base.vue b/app/components/Checkbox/Base.vue
index acb9cd46f..0d8481469 100644
--- a/app/components/Checkbox/Base.vue
+++ b/app/components/Checkbox/Base.vue
@@ -8,6 +8,8 @@ const props = withDefaults(
     hideRadio?: boolean
     value: string
 
+    indeterminate?: boolean
+
     /**
      * type should never be used, because this will always be a radio button.
      *
@@ -47,6 +49,7 @@ const internalId = `checkbox-${uid}`
       :id="internalId"
       :disabled="props.disabled ? true : undefined"
       @change="$emit('update:modelValue', !model)"
+      :indeterminate="props.indeterminate"
       class="size-[1em] bg-bg-muted border-border rounded disabled:opacity-50 me-1"
     />
     <slot />
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index 1c29411d9..c69cb9ade 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -25,38 +25,20 @@ function isCategoryNoneSelected(category: string): boolean {
 </script>
 
 <template>
-  <div class="space-y-3" role="group" :aria-label="$t('compare.facets.group_label')">
+  <div class="space-y-6" role="group" :aria-label="$t('compare.facets.group_label')">
     <div v-for="category in categoryOrder" :key="category">
-      <!-- Category header with all/none buttons -->
-      <div class="flex items-center gap-2 mb-2">
-        <span class="text-3xs text-fg-subtle uppercase tracking-wider">
-          {{ getCategoryLabel(category) }}
-        </span>
-        <!-- TODO: These should be radios, since they are mutually exclusive, and currently this behavior is faked with buttons -->
-        <ButtonBase
-          :aria-label="
-            $t('compare.facets.select_category', { category: getCategoryLabel(category) })
-          "
-          :aria-pressed="isCategoryAllSelected(category)"
-          :disabled="isCategoryAllSelected(category)"
-          @click="selectCategory(category)"
-          size="small"
-        >
-          {{ $t('compare.facets.all') }}
-        </ButtonBase>
-        <span class="text-2xs text-fg-muted/40">/</span>
-        <ButtonBase
-          :aria-label="
-            $t('compare.facets.deselect_category', { category: getCategoryLabel(category) })
-          "
-          :aria-pressed="isCategoryNoneSelected(category)"
-          :disabled="isCategoryNoneSelected(category)"
-          @click="deselectCategory(category)"
-          size="small"
-        >
-          {{ $t('compare.facets.none') }}
-        </ButtonBase>
-      </div>
+      <CheckboxBase
+        :aria-label="$t('compare.facets.select_category', { category: getCategoryLabel(category) })"
+        :model-value="isCategoryAllSelected(category)"
+        :value="category"
+        @update:model-value="
+          isCategoryAllSelected(category) ? deselectCategory(category) : selectCategory(category)
+        "
+        :indeterminate="!isCategoryAllSelected(category) && !isCategoryNoneSelected(category)"
+        class="uppercase tracking-widest mb-2"
+      >
+        {{ getCategoryLabel(category) }}
+      </CheckboxBase>
 
       <!-- Facet buttons -->
       <div class="flex items-center gap-1.5 flex-wrap" role="group">
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index 9f7d7e5a7..5f6383413 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -164,30 +164,17 @@ useSeoMeta({
 
       <!-- Facet selector -->
       <section class="mb-8" aria-labelledby="facets-heading">
-        <div class="flex items-center gap-2 mb-3">
-          <h2 id="facets-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('compare.packages.section_facets') }}
-          </h2>
-          <ButtonBase
-            size="small"
-            :aria-pressed="isAllSelected"
-            :disabled="isAllSelected"
-            :aria-label="$t('compare.facets.select_all')"
-            @click="selectAll"
-          >
-            {{ $t('compare.facets.all') }}
-          </ButtonBase>
-          <span class="text-3xs text-fg-muted/40" aria-hidden="true">/</span>
-          <ButtonBase
-            size="small"
-            :aria-pressed="isNoneSelected"
-            :disabled="isNoneSelected"
-            :aria-label="$t('compare.facets.deselect_all')"
-            @click="deselectAll"
-          >
-            {{ $t('compare.facets.none') }}
-          </ButtonBase>
-        </div>
+        <CheckboxBase
+          :aria-label="$t('compare.facets.select_all')"
+          :model-value="isAllSelected"
+          value="'all'"
+          @update:model-value="isAllSelected ? deselectAll() : selectAll()"
+          :indeterminate="!isAllSelected && !isNoneSelected"
+          class="uppercase tracking-widest mb-2"
+        >
+          {{ $t('compare.packages.section_facets') }}
+        </CheckboxBase>
+
         <CompareFacetSelector />
       </section>
 

From 4c7926eb37cfc2ef6ced5418da3a3c09d945e53f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 20:09:15 +0100
Subject: [PATCH 12/16] feat: allow to adjust checkbox

---
 app/components/Checkbox/Base.vue         | 18 +++++++++++++++---
 app/components/Compare/FacetSelector.vue |  2 ++
 app/components/Filter/Panel.vue          |  2 ++
 app/components/Package/Card.vue          |  2 ++
 app/components/Package/TableRow.vue      |  2 ++
 5 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/components/Checkbox/Base.vue b/app/components/Checkbox/Base.vue
index 0d8481469..d415f1b5f 100644
--- a/app/components/Checkbox/Base.vue
+++ b/app/components/Checkbox/Base.vue
@@ -10,6 +10,10 @@ const props = withDefaults(
 
     indeterminate?: boolean
 
+    variant?: 'default' | 'tag'
+
+    hideCheckbox?: boolean
+
     /**
      * type should never be used, because this will always be a radio button.
      *
@@ -19,6 +23,7 @@ const props = withDefaults(
   }>(),
   {
     size: 'medium',
+    variant: 'default',
   },
 )
 
@@ -36,10 +41,16 @@ const internalId = `checkbox-${uid}`
 <template>
   <label
     :htmlFor="internalId"
-    class="bg-bg-muted text-fg-muted hover:(text-fg bg-fg/10) inline-flex items-center font-mono rounded transition-colors duration-200 has-checked:(bg-fg/20 text-fg hover:(text-fg)) has-disabled:(opacity-50 pointer-events-none)"
+    class="text-fg-muted hover:(text-fg) inline-flex items-center font-mono rounded transition-colors duration-200 has-checked:(hover:(text-fg)) has-disabled:(opacity-50 pointer-events-none)"
     :class="{
-      'text-sm px-4 py-2': size === 'medium',
-      'text-xs px-2 py-0.5': size === 'small',
+      'bg-bg-muted hover:(bg-fg/10)': variant === 'tag',
+      'has-checked:(bg-fg/20 text-fg)': variant === 'tag' && !hideCheckbox,
+      'has-checked:(bg-fg text-bg)': variant === 'tag' && hideCheckbox,
+      'has-checked:(text-fg)': variant !== 'tag',
+      'text-sm': size === 'medium',
+      'text-xs': size === 'small',
+      'px-4 py-2': size === 'medium' && variant === 'tag',
+      'px-2 py-0.5': size === 'small' && variant === 'tag',
     }"
   >
     <input
@@ -51,6 +62,7 @@ const internalId = `checkbox-${uid}`
       @change="$emit('update:modelValue', !model)"
       :indeterminate="props.indeterminate"
       class="size-[1em] bg-bg-muted border-border rounded disabled:opacity-50 me-1"
+      :class="{ 'sr-only': hideCheckbox }"
     />
     <slot />
   </label>
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index c69cb9ade..101ea87af 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -47,6 +47,8 @@ function isCategoryNoneSelected(category: string): boolean {
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
           size="small"
+          variant="tag"
+          hide-checkbox
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
           :model-value="isFacetSelected(facet.id)"
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 205a5025c..829c00976 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -332,6 +332,8 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               v-for="keyword in displayedKeywords"
               :key="keyword"
               size="small"
+              variant="tag"
+              hide-checkbox
               :v-model="filters.keywords.includes(keyword)"
               @update:modelValue="emit('toggleKeyword', keyword)"
               :value="keyword"
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 86f9f2977..a83e4c999 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -170,6 +170,8 @@ const numberFormatter = useNumberFormatter()
         <CheckboxBase
           class="pointer-events-auto"
           :key="keyword"
+          variant="tag"
+          hide-checkbox
           size="small"
           :model-value="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 7b146fa2c..e193d35a9 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -133,6 +133,8 @@ const allMaintainersText = computed(() => {
         <CheckboxBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
+          variant="tag"
+          hide-checkbox
           size="small"
           :model-value="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"

From 5b11121088a53985527064961a9a3c66ac29dc34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 20:13:05 +0100
Subject: [PATCH 13/16] style: remove background from radio buttons

---
 app/components/Filter/Panel.vue | 6 +++---
 app/components/Radio/Base.vue   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 829c00976..c8135b8eb 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -257,7 +257,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.weekly_downloads') }}
           </legend>
           <div
-            class="flex flex-wrap gap-2"
+            class="flex flex-wrap gap-8"
             role="radiogroup"
             :aria-label="$t('filters.weekly_downloads')"
           >
@@ -281,7 +281,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             {{ $t('filters.updated_within') }}
           </legend>
           <div
-            class="flex flex-wrap gap-2"
+            class="flex flex-wrap gap-8"
             role="radiogroup"
             :aria-label="$t('filters.updated_within')"
           >
@@ -307,7 +307,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               {{ $t('filters.columns.coming_soon') }}
             </span>
           </legend>
-          <div class="flex flex-wrap gap-2" role="radiogroup" :aria-label="$t('filters.security')">
+          <div class="flex flex-wrap gap-8" role="radiogroup" :aria-label="$t('filters.security')">
             <RadioBase
               v-for="security in SECURITY_FILTER_VALUES"
               :key="security"
diff --git a/app/components/Radio/Base.vue b/app/components/Radio/Base.vue
index e0542d7a3..46d3d33d8 100644
--- a/app/components/Radio/Base.vue
+++ b/app/components/Radio/Base.vue
@@ -42,10 +42,10 @@ const onChange = () => {
 
 <template>
   <label
-    class="bg-bg-muted text-fg-muted hover:(text-fg bg-fg/10) inline-flex items-center font-mono rounded transition-colors duration-200 has-checked:(bg-fg/20 text-fg hover:(text-fg)) has-disabled:(opacity-50 pointer-events-none) before:content-['']"
+    class="text-fg-muted hover:(text-fg) inline-flex items-center font-mono rounded transition-colors duration-200 has-checked:(text-fg hover:(text-fg)) has-disabled:(opacity-50 pointer-events-none) before:content-['']"
     :class="{
-      'text-sm px-4 py-2': size === 'medium',
-      'text-xs px-2 py-0.5': size === 'small',
+      'text-sm': size === 'medium',
+      'text-xs': size === 'small',
     }"
     :htmlFor="internalId"
   >

From 93cbebdabf2a0f3cc9076569d6c36537143a8d46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 20:16:08 +0100
Subject: [PATCH 14/16] refactor: use radio component

---
 app/components/Filter/Panel.vue | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index c8135b8eb..40a272912 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -216,27 +216,17 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
               {{ $t('filters.search') }}
             </label>
             <!-- Search scope toggle -->
-            <div
-              class="inline-flex rounded-md border border-border p-0.5 bg-bg"
-              role="group"
-              :aria-label="$t('filters.search_scope')"
-            >
-              <button
+            <div class="inline-flex gap-x-4" role="group" :aria-label="$t('filters.search_scope')">
+              <RadioBase
                 v-for="scope in SEARCH_SCOPE_VALUES"
                 :key="scope"
-                type="button"
-                class="px-2 py-0.5 text-xs font-mono rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-                :class="
-                  filters.searchScope === scope
-                    ? 'bg-bg-muted text-fg'
-                    : 'text-fg-muted hover:text-fg'
-                "
-                :aria-pressed="filters.searchScope === scope"
+                :value="scope"
+                :model-value="filters.searchScope"
                 :title="getScopeDescriptionKey(scope)"
-                @click="emit('update:searchScope', scope)"
+                @update:model-value="emit('update:searchScope', scope)"
               >
                 {{ getScopeLabelKey(scope) }}
-              </button>
+              </RadioBase>
             </div>
           </div>
           <InputBase

From 3d069963aeaaa6c4983b4d6e6dedf27be8b62262 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 20:18:40 +0100
Subject: [PATCH 15/16] refactor: use button component

---
 app/components/Filter/Chips.vue | 16 +++++-----------
 app/components/Filter/Panel.vue |  9 ++-------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/app/components/Filter/Chips.vue b/app/components/Filter/Chips.vue
index 6279da858..e426affcb 100644
--- a/app/components/Filter/Chips.vue
+++ b/app/components/Filter/Chips.vue
@@ -19,25 +19,19 @@ const emit = defineEmits<{
         <span class="max-w-32 truncate">{{
           Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
         }}</span>
-        <button
-          type="button"
-          class="flex items-center p-1 -m-1 hover:text-fg rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+        <ButtonBase
           :aria-label="$t('filters.remove_filter', { label: chip.label })"
+          size="small"
           @click="emit('remove', chip)"
         >
           <span class="i-lucide:x w-3 h-3" aria-hidden="true" />
-        </button>
+        </ButtonBase>
       </TagStatic>
     </TransitionGroup>
 
-    <button
-      v-if="chips.length > 1"
-      type="button"
-      class="text-sm p-0.5 text-fg-muted hover:text-fg underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2"
-      @click="emit('clearAll')"
-    >
+    <ButtonBase v-if="chips.length > 1" type="button" size="small" @click="emit('clearAll')">
       {{ $t('filters.clear_all') }}
-    </button>
+    </ButtonBase>
   </div>
 </template>
 
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 40a272912..611f4fa71 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -330,14 +330,9 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             >
               {{ keyword }}
             </CheckboxBase>
-            <button
-              v-if="hasMoreKeywords"
-              type="button"
-              class="text-xs text-fg-subtle self-center font-mono hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-              @click="showAllKeywords = true"
-            >
+            <ButtonBase v-if="hasMoreKeywords" size="small" @click="showAllKeywords = true">
               {{ $t('filters.more_keywords', { count: (availableKeywords?.length ?? 0) - 20 }) }}
-            </button>
+            </ButtonBase>
           </div>
         </fieldset>
       </div>

From b12e840c77b57ec2dee32828786eb557122b11b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 13 Feb 2026 20:29:55 +0100
Subject: [PATCH 16/16] style: version trends

---
 .../Package/VersionDistribution.vue           | 24 ++-----------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index f2dd99313..e00de239d 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -285,20 +285,6 @@ const xAxisLabels = computed(() => {
   return chartDataset.value.map(item => item.name)
 })
 
-// Handle keyboard navigation for semver group toggle
-function handleGroupingKeydown(event: KeyboardEvent) {
-  if (pending.value) return
-  if (event.key === 'Enter' || event.key === ' ') {
-    event.preventDefault()
-    // Toggle between major and minor
-    groupingMode.value = groupingMode.value === 'major' ? 'minor' : 'major'
-  } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-    event.preventDefault()
-    // Arrow keys also toggle
-    groupingMode.value = groupingMode.value === 'major' ? 'minor' : 'major'
-  }
-}
-
 // Calculate last week date range (matches npm's "last-week" API)
 const startDate = computed(() => {
   const today = new Date()
@@ -326,18 +312,12 @@ const endDate = computed(() => {
     :aria-busy="pending ? 'true' : 'false'"
   >
     <div class="w-full mb-4 flex flex-col gap-3">
-      <div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
+      <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 sm:items-start">
         <div class="flex flex-col gap-1 w-fit sm:shrink-0">
           <label class="text-3xs font-mono text-fg-subtle tracking-wide uppercase">
             {{ $t('package.versions.distribution_title') }}
           </label>
-          <div
-            class="flex gap-2 items-center"
-            role="group"
-            :aria-label="$t('package.versions.distribution_title')"
-            tabindex="0"
-            @keydown="handleGroupingKeydown"
-          >
+          <div class="flex flex-col">
             <RadioBase
               :model-value="groupingMode"
               :value="'major'"