refactor: replace links and buttons for compare and code page

[essenmitsosse]

Additional work on top of #1071 that replaces links and buttons in the compare and code page with the new components.

For the code page this has the additional benefit of using the same hover styles for links/buttons as. Additionally it properly sets aria-current and aria-pressed in the tree view.

Adds automatic styling for current links.

Also changes the hover style for links as buttons.

Slightly adjusts the pressed style for buttons.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 9, 2026 0:45am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 9, 2026 0:45am
npmx-lunaria	Ignored		Feb 9, 2026 0:45am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR standardises interactive elements by replacing native buttons and NuxtLink with ButtonBase and LinkBase across multiple components. It renames keyboard-shortcut props from keyshortcut/aria-keyshortcuts to ariaKeyshortcuts, removes quoted string-literal prop declarations, and introduces noUnderline on LinkBase. Templates and bindings were updated to use ariaKeyshortcuts for ARIA attributes and visible shortcut text, and classicon for icon rendering. Changes appear across header, button, link, code explorer, compare components and several pages.

Possibly related PRs

• feat: extract button and link component, unify and improve design #1071: Renames/remaps keyboard shortcut props (keyshortcut → ariaKeyshortcuts / aria-keyshortcuts) and updates ButtonBase/LinkBase usages, touching the same components and prop changes.

Suggested reviewers

• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description is directly related to the changeset, detailing component replacements on compare and code pages with references to PR #1071.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

app/components/Compare/FacetSelector.vue (1)

64-93: Remove inline focus-visible styling from ButtonBase.

The class at line 72 includes focus-visible:outline-accent/70, which contradicts the project convention. Focus-visible styling for buttons is applied globally via main.css, so individual buttons should not use inline focus-visible utility classes.

♻️ Proposed fix

           :aria-label="facet.label"
-          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200 focus-visible:outline-accent/70"
+          class="inline-flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded border transition-colors duration-200"

Based on learnings: "In the npmx.dev project, focus-visible styling for buttons and selects is applied globally via main.css... individual buttons or selects in Vue components should not rely on inline focus-visible utility classes."

[codecov]

Codecov Report

❌ Patch coverage is 78.94737% with 4 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Button/Base.vue	50.00%	1 Missing ⚠️
app/components/Code/DirectoryListing.vue	83.33%	0 Missing and 1 partial ⚠️
app/components/Compare/ComparisonGrid.vue	0.00%	1 Missing ⚠️
app/components/Compare/PackageSelector.vue	66.66%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 1