From ed0d7b6ecf9b29ac70b3d758bd26c5b5e767e474 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Thu, 29 Jan 2026 22:40:15 -0500
Subject: [PATCH 01/10] feat: add package manager select dropdown

This replaces the tab list so it's extra clear to the user what
package manager they've selected. It also lets use use it in the
connector modal to be explicit on the package manager choice.
---
 app/components/ConnectorModal.vue       |  34 +++---
 app/components/PackageManagerSelect.vue | 150 ++++++++++++++++++++++++
 app/pages/[...package].vue              |   6 +
 test/nuxt/components.spec.ts            |   9 ++
 4 files changed, 184 insertions(+), 15 deletions(-)
 create mode 100644 app/components/PackageManagerSelect.vue

diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
index 7807110c..bad8a6b8 100644
--- a/app/components/ConnectorModal.vue
+++ b/app/components/ConnectorModal.vue
@@ -125,21 +125,25 @@ watch(open, isOpen => {
               >
                 <span class="text-fg-subtle">$</span>
                 <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
-                <button
-                  type="button"
-                  :aria-label="
-                    copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
-                  "
-                  class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                  @click="copyCommand"
-                >
-                  <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-                  <span
-                    v-else
-                    class="i-carbon:checkmark block w-5 h-5 text-green-500"
-                    aria-hidden="true"
-                  />
-                </button>
+                <div class="ml-auto flex items-center gap-2">
+                  <PackageManagerSelect />
+
+                  <button
+                    type="button"
+                    :aria-label="
+                      copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
+                    "
+                    class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                    @click="copyCommand"
+                  >
+                    <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
+                    <span
+                      v-else
+                      class="i-carbon:checkmark block w-5 h-5 text-green-500"
+                      aria-hidden="true"
+                    />
+                  </button>
+                </div>
               </div>
 
               <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
diff --git a/app/components/PackageManagerSelect.vue b/app/components/PackageManagerSelect.vue
new file mode 100644
index 00000000..933b6eb0
--- /dev/null
+++ b/app/components/PackageManagerSelect.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+
+const selectedPM = useSelectedPackageManager()
+
+const listRef = useTemplateRef('listRef')
+const triggerRef = useTemplateRef('triggerRef')
+const isOpen = shallowRef(false)
+const highlightedIndex = shallowRef(-1)
+
+// Generate unique ID for accessibility
+const inputId = useId()
+const listboxId = `${inputId}-listbox`
+
+const pm = computed(() => {
+  return packageManagers.find(p => p.id === selectedPM.value) ?? packageManagers[0]
+})
+
+function toggle() {
+  if (isOpen.value) {
+    close()
+  } else {
+    isOpen.value = true
+    highlightedIndex.value = packageManagers.findIndex(pm => pm.id === selectedPM.value)
+  }
+}
+
+function close() {
+  isOpen.value = false
+  highlightedIndex.value = -1
+}
+
+function select(id: PackageManagerId) {
+  selectedPM.value = id
+  close()
+  triggerRef.value?.focus()
+}
+
+// Check for reduced motion preference
+const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+onClickOutside(listRef, close, { ignore: [triggerRef] })
+function handleKeydown(event: KeyboardEvent) {
+  if (!isOpen.value) return
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      highlightedIndex.value = (highlightedIndex.value + 1) % packageManagers.length
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      highlightedIndex.value =
+        highlightedIndex.value <= 0 ? packageManagers.length - 1 : highlightedIndex.value - 1
+      break
+    case 'Enter': {
+      event.preventDefault()
+      const pm = packageManagers[highlightedIndex.value]
+      if (pm) {
+        select(pm.id)
+      }
+      break
+    }
+    case 'Escape':
+      close()
+      triggerRef.value?.focus()
+      break
+  }
+}
+</script>
+
+<template>
+  <div class="relative">
+    <button
+      ref="triggerRef"
+      type="button"
+      class="inline-flex items-center gap-1 px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      :aria-label="$t('settings.package_manager')"
+      :aria-controls="listboxId"
+      @click="toggle"
+      @keydown="handleKeydown"
+    >
+      <ClientOnly>
+        <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
+        <span>{{ pm.label }}</span>
+        <template #fallback>
+          <span class="inline-block h-3 w-3 i-simple-icons:npm" aria-hidden="true" />
+          <span>npm</span>
+        </template>
+      </ClientOnly>
+      <span
+        class="i-carbon-chevron-down w-3 h-3"
+        :class="[
+          { 'rotate-180': isOpen },
+          prefersReducedMotion ? '' : 'transition-transform duration-200',
+        ]"
+        aria-hidden="true"
+      />
+    </button>
+
+    <!-- Dropdown menu -->
+    <Transition
+      :enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
+      :enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"
+      enter-to-class="opacity-100"
+      :leave-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-100'"
+      leave-from-class="opacity-100"
+      :leave-to-class="prefersReducedMotion ? '' : 'opacity-0'"
+    >
+      <ul
+        v-if="isOpen"
+        :id="listboxId"
+        ref="listRef"
+        role="listbox"
+        :aria-activedescendant="
+          highlightedIndex >= 0
+            ? `${listboxId}-${packageManagers[highlightedIndex]?.id}`
+            : undefined
+        "
+        :aria-label="$t('settings.package_manager')"
+        class="absolute right-0 top-full mt-1 min-w-28 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden py-1"
+      >
+        <li
+          v-for="(pm, index) in packageManagers"
+          :id="`${listboxId}-${pm.id}`"
+          :key="pm.id"
+          role="option"
+          :aria-selected="selectedPM === pm.id"
+          class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs cursor-pointer transition-colors duration-150"
+          :class="[
+            selectedPM === pm.id ? 'text-fg' : 'text-fg-subtle',
+            highlightedIndex === index ? 'bg-bg-subtle' : 'hover:bg-bg-subtle',
+          ]"
+          @click="select(pm.id)"
+          @mouseenter="highlightedIndex = index"
+        >
+          <span class="inline-block h-3 w-3 shrink-0" :class="pm.icon" aria-hidden="true" />
+          <span>{{ pm.label }}</span>
+          <span
+            v-if="selectedPM === pm.id"
+            class="i-carbon-checkmark w-3 h-3 text-accent ml-auto shrink-0"
+            aria-hidden="true"
+          />
+        </li>
+      </ul>
+    </Transition>
+  </div>
+</template>
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 0be15840..db73a43a 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -800,6 +800,7 @@ function handleClick(event: MouseEvent) {
           </h2>
           <!-- Package manager tabs -->
           <PackageManagerTabs />
+          <PackageManagerSelect />
         </div>
         <div
           role="tabpanel"
@@ -834,6 +835,7 @@ function handleClick(event: MouseEvent) {
           </h2>
           <!-- Package manager tabs -->
           <PackageManagerTabs />
+          <PackageManagerSelect />
         </div>
         <div
           role="tabpanel"
@@ -1071,18 +1073,22 @@ function handleClick(event: MouseEvent) {
   grid-area: header;
   overflow-x: hidden;
 }
+
 .area-install {
   grid-area: install;
   overflow-x: hidden;
 }
+
 .area-vulns {
   grid-area: vulns;
   overflow-x: hidden;
 }
+
 .area-readme {
   grid-area: readme;
   overflow-x: hidden;
 }
+
 .area-sidebar {
   grid-area: sidebar;
 }
diff --git a/test/nuxt/components.spec.ts b/test/nuxt/components.spec.ts
index 7d47dd49..677887a1 100644
--- a/test/nuxt/components.spec.ts
+++ b/test/nuxt/components.spec.ts
@@ -95,6 +95,7 @@ import ViewModeToggle from '~/components/ViewModeToggle.vue'
 import PackageVulnerabilityTree from '~/components/PackageVulnerabilityTree.vue'
 import PackageDeprecatedTree from '~/components/PackageDeprecatedTree.vue'
 import DependencyPathPopup from '~/components/DependencyPathPopup.vue'
+import PackageManagerSelect from '~/components/PackageManagerSelect.vue'
 
 describe('component accessibility audits', () => {
   describe('DateTime', () => {
@@ -1293,4 +1294,12 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
+
+  describe('PackageManagerSelect', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(PackageManagerSelect)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
 })

From 41bd452ed006ea69c75052c4b4e7b59d9caafd66 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 08:01:57 -0500
Subject: [PATCH 02/10] fix: clean up css classes for better rtl support

---
 app/components/ConnectorModal.vue       | 2 +-
 app/components/PackageManagerSelect.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/ConnectorModal.vue b/app/components/ConnectorModal.vue
index bad8a6b8..22add063 100644
--- a/app/components/ConnectorModal.vue
+++ b/app/components/ConnectorModal.vue
@@ -125,7 +125,7 @@ watch(open, isOpen => {
               >
                 <span class="text-fg-subtle">$</span>
                 <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
-                <div class="ml-auto flex items-center gap-2">
+                <div class="ms-auto flex items-center gap-2">
                   <PackageManagerSelect />
 
                   <button
diff --git a/app/components/PackageManagerSelect.vue b/app/components/PackageManagerSelect.vue
index 933b6eb0..18120eac 100644
--- a/app/components/PackageManagerSelect.vue
+++ b/app/components/PackageManagerSelect.vue
@@ -91,7 +91,7 @@ function handleKeydown(event: KeyboardEvent) {
         </template>
       </ClientOnly>
       <span
-        class="i-carbon-chevron-down w-3 h-3"
+        class="i-carbon:chevron-down w-3 h-3"
         :class="[
           { 'rotate-180': isOpen },
           prefersReducedMotion ? '' : 'transition-transform duration-200',
@@ -120,7 +120,7 @@ function handleKeydown(event: KeyboardEvent) {
             : undefined
         "
         :aria-label="$t('settings.package_manager')"
-        class="absolute right-0 top-full mt-1 min-w-28 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden py-1"
+        class="absolute inset-ie-0 top-full mt-1 min-w-28 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1"
       >
         <li
           v-for="(pm, index) in packageManagers"
@@ -140,7 +140,7 @@ function handleKeydown(event: KeyboardEvent) {
           <span>{{ pm.label }}</span>
           <span
             v-if="selectedPM === pm.id"
-            class="i-carbon-checkmark w-3 h-3 text-accent ml-auto shrink-0"
+            class="i-carbon:checkmark w-3 h-3 text-accent ms-auto shrink-0"
             aria-hidden="true"
           />
         </li>

From 669e64e88bace3589aa536260a5ee48f8dfc404e Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 17:18:54 -0500
Subject: [PATCH 03/10] fix: fix some styling

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

diff --git a/app/components/PackageManagerSelect.vue b/app/components/PackageManagerSelect.vue
index 18120eac..cd5daaa2 100644
--- a/app/components/PackageManagerSelect.vue
+++ b/app/components/PackageManagerSelect.vue
@@ -74,7 +74,7 @@ function handleKeydown(event: KeyboardEvent) {
     <button
       ref="triggerRef"
       type="button"
-      class="inline-flex items-center gap-1 px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+      class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 hover:text-fg"
       :aria-expanded="isOpen"
       aria-haspopup="listbox"
       :aria-label="$t('settings.package_manager')"
@@ -120,7 +120,7 @@ function handleKeydown(event: KeyboardEvent) {
             : undefined
         "
         :aria-label="$t('settings.package_manager')"
-        class="absolute inset-ie-0 top-full mt-1 min-w-28 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1"
+        class="absolute inset-ie-0 top-full mt-1 bg-bg-elevated border border-border rounded-md shadow-lg z-50 py-1"
       >
         <li
           v-for="(pm, index) in packageManagers"
@@ -136,11 +136,11 @@ function handleKeydown(event: KeyboardEvent) {
           @click="select(pm.id)"
           @mouseenter="highlightedIndex = index"
         >
-          <span class="inline-block h-3 w-3 shrink-0" :class="pm.icon" aria-hidden="true" />
+          <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
           <span>{{ pm.label }}</span>
           <span
             v-if="selectedPM === pm.id"
-            class="i-carbon:checkmark w-3 h-3 text-accent ms-auto shrink-0"
+            class="i-carbon:checkmark w-3 h-3 text-accent ms-auto"
             aria-hidden="true"
           />
         </li>

From 3353778942ea27c486c927d99f23b8d8f413c306 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 17:41:08 -0500
Subject: [PATCH 04/10] feat: use teleport to fix popover clipping for short
 install terminal

---
 app/components/PackageManagerSelect.vue | 88 +++++++++++++++----------
 1 file changed, 54 insertions(+), 34 deletions(-)

diff --git a/app/components/PackageManagerSelect.vue b/app/components/PackageManagerSelect.vue
index cd5daaa2..1da95780 100644
--- a/app/components/PackageManagerSelect.vue
+++ b/app/components/PackageManagerSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useEventListener } from '@vueuse/core'
 
 const selectedPM = useSelectedPackageManager()
 
@@ -8,6 +8,18 @@ const triggerRef = useTemplateRef('triggerRef')
 const isOpen = shallowRef(false)
 const highlightedIndex = shallowRef(-1)
 
+const dropdownPosition = shallowRef<{ top: number; left: number } | null>(null)
+
+function getDropdownStyle(): Record<string, string> {
+  if (!dropdownPosition.value) return {}
+  return {
+    top: `${dropdownPosition.value.top}px`,
+    left: `${dropdownPosition.value.left}px`,
+  }
+}
+
+useEventListener('scroll', close, true)
+
 // Generate unique ID for accessibility
 const inputId = useId()
 const listboxId = `${inputId}-listbox`
@@ -20,6 +32,13 @@ function toggle() {
   if (isOpen.value) {
     close()
   } else {
+    if (triggerRef.value) {
+      const rect = triggerRef.value.getBoundingClientRect()
+      dropdownPosition.value = {
+        top: rect.bottom + 4,
+        left: rect.left,
+      }
+    }
     isOpen.value = true
     highlightedIndex.value = packageManagers.findIndex(pm => pm.id === selectedPM.value)
   }
@@ -70,37 +89,37 @@ function handleKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <div class="relative">
-    <button
-      ref="triggerRef"
-      type="button"
-      class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 hover:text-fg"
-      :aria-expanded="isOpen"
-      aria-haspopup="listbox"
-      :aria-label="$t('settings.package_manager')"
-      :aria-controls="listboxId"
-      @click="toggle"
-      @keydown="handleKeydown"
-    >
-      <ClientOnly>
-        <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
-        <span>{{ pm.label }}</span>
-        <template #fallback>
-          <span class="inline-block h-3 w-3 i-simple-icons:npm" aria-hidden="true" />
-          <span>npm</span>
-        </template>
-      </ClientOnly>
-      <span
-        class="i-carbon:chevron-down w-3 h-3"
-        :class="[
-          { 'rotate-180': isOpen },
-          prefersReducedMotion ? '' : 'transition-transform duration-200',
-        ]"
-        aria-hidden="true"
-      />
-    </button>
+  <button
+    ref="triggerRef"
+    type="button"
+    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 hover:text-fg"
+    :aria-expanded="isOpen"
+    aria-haspopup="listbox"
+    :aria-label="$t('settings.package_manager')"
+    :aria-controls="listboxId"
+    @click="toggle"
+    @keydown="handleKeydown"
+  >
+    <ClientOnly>
+      <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
+      <span>{{ pm.label }}</span>
+      <template #fallback>
+        <span class="inline-block h-3 w-3 i-simple-icons:npm" aria-hidden="true" />
+        <span>npm</span>
+      </template>
+    </ClientOnly>
+    <span
+      class="i-carbon:chevron-down w-3 h-3"
+      :class="[
+        { 'rotate-180': isOpen },
+        prefersReducedMotion ? '' : 'transition-transform duration-200',
+      ]"
+      aria-hidden="true"
+    />
+  </button>
 
-    <!-- Dropdown menu -->
+  <!-- Dropdown menu (teleported to body to avoid clipping) -->
+  <Teleport to="body">
     <Transition
       :enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
       :enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"
@@ -120,7 +139,8 @@ function handleKeydown(event: KeyboardEvent) {
             : undefined
         "
         :aria-label="$t('settings.package_manager')"
-        class="absolute inset-ie-0 top-full mt-1 bg-bg-elevated border border-border rounded-md shadow-lg z-50 py-1"
+        :style="getDropdownStyle()"
+        class="fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50"
       >
         <li
           v-for="(pm, index) in packageManagers"
@@ -131,7 +151,7 @@ function handleKeydown(event: KeyboardEvent) {
           class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs cursor-pointer transition-colors duration-150"
           :class="[
             selectedPM === pm.id ? 'text-fg' : 'text-fg-subtle',
-            highlightedIndex === index ? 'bg-bg-subtle' : 'hover:bg-bg-subtle',
+            highlightedIndex === index ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
           ]"
           @click="select(pm.id)"
           @mouseenter="highlightedIndex = index"
@@ -146,5 +166,5 @@ function handleKeydown(event: KeyboardEvent) {
         </li>
       </ul>
     </Transition>
-  </div>
+  </Teleport>
 </template>

From a4c97242f8997482d33a8c0a310345e803160730 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 17:47:31 -0500
Subject: [PATCH 05/10] fix: remove client only rendering (matches current
 package manager tabs)

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

diff --git a/app/components/PackageManagerSelect.vue b/app/components/PackageManagerSelect.vue
index 1da95780..327bebb7 100644
--- a/app/components/PackageManagerSelect.vue
+++ b/app/components/PackageManagerSelect.vue
@@ -100,14 +100,8 @@ function handleKeydown(event: KeyboardEvent) {
     @click="toggle"
     @keydown="handleKeydown"
   >
-    <ClientOnly>
-      <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
-      <span>{{ pm.label }}</span>
-      <template #fallback>
-        <span class="inline-block h-3 w-3 i-simple-icons:npm" aria-hidden="true" />
-        <span>npm</span>
-      </template>
-    </ClientOnly>
+    <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
+    <span>{{ pm.label }}</span>
     <span
       class="i-carbon:chevron-down w-3 h-3"
       :class="[

From 394fed17782412b78393230a38747266b032425b Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 17:48:58 -0500
Subject: [PATCH 06/10] feat: remove packageManagerTabs

---
 app/components/PackageManagerTabs.vue | 97 ---------------------------
 app/pages/[...package].vue            |  6 +-
 2 files changed, 2 insertions(+), 101 deletions(-)
 delete mode 100644 app/components/PackageManagerTabs.vue

diff --git a/app/components/PackageManagerTabs.vue b/app/components/PackageManagerTabs.vue
deleted file mode 100644
index 57812bec..00000000
--- a/app/components/PackageManagerTabs.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-const selectedPM = useSelectedPackageManager()
-
-const tablistNavigationKeys = new Set(['ArrowRight', 'ArrowLeft', 'Home', 'End'])
-
-function onTabListKeydown(event: KeyboardEvent) {
-  if (!tablistNavigationKeys.has(event.key)) return
-  const tablist = event.currentTarget as HTMLElement | null
-  if (!tablist) return
-
-  const tabs = Array.from(tablist.querySelectorAll<HTMLElement>('[role="tab"]'))
-  const count = Math.min(tabs.length, packageManagers.length)
-  if (!count) return
-
-  event.preventDefault()
-
-  let activeIndex = packageManagers.findIndex(pm => pm.id === selectedPM.value)
-  if (activeIndex < 0) activeIndex = 0
-
-  let nextIndex = activeIndex
-  if (event.key === 'ArrowRight') nextIndex = (activeIndex + 1) % count
-  if (event.key === 'ArrowLeft') nextIndex = (activeIndex - 1 + count) % count
-  if (event.key === 'Home') nextIndex = 0
-  if (event.key === 'End') nextIndex = count - 1
-
-  const nextTab = tabs[nextIndex]
-  const nextId = packageManagers[nextIndex]?.id
-  if (nextId && nextId !== selectedPM.value) {
-    selectedPM.value = nextId
-  }
-
-  nextTick(() => nextTab?.focus())
-}
-</script>
-
-<template>
-  <div
-    class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
-    role="tablist"
-    :aria-label="$t('package.get_started.pm_label')"
-    @keydown="onTabListKeydown"
-  >
-    <button
-      v-for="pm in packageManagers"
-      :key="pm.id"
-      :id="`pm-tab-${pm.id}`"
-      role="tab"
-      :data-pm-tab="pm.id"
-      :aria-selected="selectedPM === pm.id"
-      :aria-controls="`pm-panel-${pm.id}`"
-      :tabindex="selectedPM === pm.id ? 0 : -1"
-      type="button"
-      class="pm-tab px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5 hover:text-fg"
-      @click="selectedPM = pm.id"
-    >
-      <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
-      {{ pm.label }}
-    </button>
-  </div>
-</template>
-
-<style>
-/*
- * Package manager tab styling based on data-pm attribute on <html>.
- * Selected tab gets highlighted background and border.
- */
-
-[data-pm-tab] {
-  --pm-tab-bg: transparent;
-  --pm-tab-border: transparent;
-  --pm-tab-shadow: none;
-  background: var(--pm-tab-bg);
-  border-color: var(--pm-tab-border);
-  box-shadow: var(--pm-tab-shadow);
-  color: var(--fg-subtle);
-}
-
-:root[data-pm='npm'] [data-pm-tab='npm'],
-:root[data-pm='pnpm'] [data-pm-tab='pnpm'],
-:root[data-pm='yarn'] [data-pm-tab='yarn'],
-:root[data-pm='bun'] [data-pm-tab='bun'],
-:root[data-pm='deno'] [data-pm-tab='deno'],
-:root[data-pm='vlt'] [data-pm-tab='vlt'] {
-  --pm-tab-bg: var(--bg);
-  --pm-tab-border: var(--border);
-  --pm-tab-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  color: var(--fg);
-}
-
-/* Fallback: when no data-pm is set, npm is selected by default */
-:root:not([data-pm]) [data-pm-tab='npm'] {
-  --pm-tab-bg: var(--bg);
-  --pm-tab-border: var(--border);
-  --pm-tab-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  color: var(--fg);
-}
-</style>
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index db73a43a..4ce162e1 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -798,8 +798,7 @@ function handleClick(event: MouseEvent) {
           <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
             {{ $t('package.run.title') }}
           </h2>
-          <!-- Package manager tabs -->
-          <PackageManagerTabs />
+          <!-- Package manager dropdown -->
           <PackageManagerSelect />
         </div>
         <div
@@ -833,8 +832,7 @@ function handleClick(event: MouseEvent) {
               />
             </a>
           </h2>
-          <!-- Package manager tabs -->
-          <PackageManagerTabs />
+          <!-- Package manager dropdown -->
           <PackageManagerSelect />
         </div>
         <div

From 03f725402d3964204c9275d196ea9b90904f1411 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 17:59:02 -0500
Subject: [PATCH 07/10] fix: focus ring clipping in the install area

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

diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index 4ce162e1..7c1d95f4 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -1074,7 +1074,6 @@ function handleClick(event: MouseEvent) {
 
 .area-install {
   grid-area: install;
-  overflow-x: hidden;
 }
 
 .area-vulns {

From 2e663a08e1c0e7a6ca0ef54d1aeb1bf1062119e3 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 18:12:07 -0500
Subject: [PATCH 08/10] fix: update aria label

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

diff --git a/app/components/PackageManagerSelect.vue b/app/components/PackageManagerSelect.vue
index 327bebb7..1936f777 100644
--- a/app/components/PackageManagerSelect.vue
+++ b/app/components/PackageManagerSelect.vue
@@ -95,7 +95,7 @@ function handleKeydown(event: KeyboardEvent) {
     class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
-    :aria-label="$t('settings.package_manager')"
+    :aria-label="$t('package.get_started.pm_label')"
     :aria-controls="listboxId"
     @click="toggle"
     @keydown="handleKeydown"
@@ -132,7 +132,7 @@ function handleKeydown(event: KeyboardEvent) {
             ? `${listboxId}-${packageManagers[highlightedIndex]?.id}`
             : undefined
         "
-        :aria-label="$t('settings.package_manager')"
+        :aria-label="$t('package.get_started.pm_label')"
         :style="getDropdownStyle()"
         class="fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50"
       >

From ee7e2de5e31555e933e55eeb0815b8f18d3658b0 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 18:37:35 -0500
Subject: [PATCH 09/10] fix: prevent flicker on hard refresh

---
 app/components/PackageManagerSelect.vue | 40 +++++++++++++++++++++----
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/app/components/PackageManagerSelect.vue b/app/components/PackageManagerSelect.vue
index 1936f777..8a9bc4df 100644
--- a/app/components/PackageManagerSelect.vue
+++ b/app/components/PackageManagerSelect.vue
@@ -24,10 +24,6 @@ useEventListener('scroll', close, true)
 const inputId = useId()
 const listboxId = `${inputId}-listbox`
 
-const pm = computed(() => {
-  return packageManagers.find(p => p.id === selectedPM.value) ?? packageManagers[0]
-})
-
 function toggle() {
   if (isOpen.value) {
     close()
@@ -100,8 +96,20 @@ function handleKeydown(event: KeyboardEvent) {
     @click="toggle"
     @keydown="handleKeydown"
   >
-    <span class="inline-block h-3 w-3" :class="pm.icon" aria-hidden="true" />
-    <span>{{ pm.label }}</span>
+    <template v-for="pmOption in packageManagers" :key="pmOption.id">
+      <span
+        class="inline-block h-3 w-3 pm-select-content"
+        :class="pmOption.icon"
+        :data-pm-select="pmOption.id"
+        aria-hidden="true"
+      />
+      <span
+        class="pm-select-content"
+        :data-pm-select="pmOption.id"
+        :aria-hidden="pmOption.id !== selectedPM"
+        >{{ pmOption.label }}</span
+      >
+    </template>
     <span
       class="i-carbon:chevron-down w-3 h-3"
       :class="[
@@ -162,3 +170,23 @@ function handleKeydown(event: KeyboardEvent) {
     </Transition>
   </Teleport>
 </template>
+
+<style>
+:root[data-pm] .pm-select-content {
+  display: none;
+}
+
+:root[data-pm='npm'] [data-pm-select='npm'],
+:root[data-pm='pnpm'] [data-pm-select='pnpm'],
+:root[data-pm='yarn'] [data-pm-select='yarn'],
+:root[data-pm='bun'] [data-pm-select='bun'],
+:root[data-pm='deno'] [data-pm-select='deno'],
+:root[data-pm='vlt'] [data-pm-select='vlt'] {
+  display: inline-block;
+}
+
+/* Fallback: when no data-pm is set, npm is selected by default */
+:root:not([data-pm]) .pm-select-content:not([data-pm-select='npm']) {
+  display: none;
+}
+</style>

From 5bd42124a49bfa019b6cb6b401db35ec479eec91 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Fri, 30 Jan 2026 20:01:04 -0500
Subject: [PATCH 10/10] fix: replace package manager tab spec with select

---
 tests/package-manager-select.spec.ts | 33 ++++++++++++++++++++++++++
 tests/package-manager-tabs.spec.ts   | 35 ----------------------------
 2 files changed, 33 insertions(+), 35 deletions(-)
 create mode 100644 tests/package-manager-select.spec.ts
 delete mode 100644 tests/package-manager-tabs.spec.ts

diff --git a/tests/package-manager-select.spec.ts b/tests/package-manager-select.spec.ts
new file mode 100644
index 00000000..e26d61eb
--- /dev/null
+++ b/tests/package-manager-select.spec.ts
@@ -0,0 +1,33 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+test.describe('Package Page', () => {
+  test('/vue → package manager select dropdown works', async ({ page, goto }) => {
+    await goto('/vue', { waitUntil: 'domcontentloaded' })
+
+    const packageManagerButton = page.locator('button[aria-haspopup="listbox"]').first()
+    await expect(packageManagerButton).toBeVisible()
+
+    // Open dropdown
+    await packageManagerButton.click()
+    const packageManagerDropdown = page.locator('[role="listbox"]')
+    await expect(packageManagerDropdown).toBeVisible()
+
+    // Arrow keys navigate the listbox
+    await packageManagerButton.press('ArrowDown')
+    const firstDescendant = await packageManagerDropdown.getAttribute('aria-activedescendant')
+    await packageManagerButton.press('ArrowDown')
+    const secondDescendant = await packageManagerDropdown.getAttribute('aria-activedescendant')
+    expect(secondDescendant).not.toBe(firstDescendant)
+
+    // Escape closes dropdown and returns focus
+    await packageManagerButton.press('Escape')
+    await expect(packageManagerDropdown).not.toBeVisible()
+    await expect(packageManagerButton).toBeFocused()
+
+    // Enter selects option and closes dropdown
+    await packageManagerButton.click()
+    await packageManagerButton.press('ArrowDown')
+    await packageManagerButton.press('Enter')
+    await expect(packageManagerDropdown).not.toBeVisible()
+  })
+})
diff --git a/tests/package-manager-tabs.spec.ts b/tests/package-manager-tabs.spec.ts
deleted file mode 100644
index ab25880b..00000000
--- a/tests/package-manager-tabs.spec.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { expect, test } from '@nuxt/test-utils/playwright'
-
-test.describe('Package Page', () => {
-  test('/vue → package manager tabs use roving tabindex', async ({ page, goto }) => {
-    await goto('/vue', { waitUntil: 'domcontentloaded' })
-
-    const tablist = page.locator('[role="tablist"]').first()
-    await expect(tablist).toBeVisible()
-
-    const tabs = tablist.locator('[role="tab"]')
-    const tabCount = await tabs.count()
-    expect(tabCount).toBeGreaterThan(1)
-
-    const firstTab = tabs.first()
-    await firstTab.focus()
-    await expect(firstTab).toBeFocused()
-
-    await page.keyboard.press('ArrowRight')
-
-    const secondTab = tabs.nth(1)
-    await expect(secondTab).toBeFocused()
-    await expect(secondTab).toHaveAttribute('aria-selected', 'true')
-    await expect(secondTab).toHaveAttribute('tabindex', '0')
-    await expect(firstTab).toHaveAttribute('tabindex', '-1')
-
-    const tabpanel = page.locator('[role="tabpanel"]').first()
-    const controls = await secondTab.getAttribute('aria-controls')
-    const panelId = await tabpanel.getAttribute('id')
-    expect(controls).toBe(panelId)
-
-    const labelledBy = await tabpanel.getAttribute('aria-labelledby')
-    const tabId = await secondTab.getAttribute('id')
-    expect(labelledBy).toBe(tabId)
-  })
-})