[freddymeta]

The bug

Focusing the MultiSelector trigger renders two stacked accent rings: the field wrapper's :focus-within ring plus the inner trigger button's own :focus-visible outline. They overlap into a doubled border on the trigger.

Root cause

Bordered inputs render their focus ring once, via the shared field wrapper (inputWrapperStyles.base) — its border goes accent on :focus-within plus an inset accent box-shadow ring. The MultiSelector trigger container already composes that wrapper, but the inner trigger button also drew its own :focus-visible outline. That inner outline is the duplicate.

Selector was already migrated off this pattern (its trigger uses outline: 'none' and defers to the wrapper); MultiSelector was left on the pre-fix version.

The fix

Set the trigger button's outline to none and rely on the wrapper's single :focus-within ring — matching Selector, TextInput, and NumberInput. Dropped the now-unused outlineOffset that only existed for the removed outline.

-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: '0',
+    // The wrapper (inputWrapperStyles.base) renders the focus ring via
+    // :focus-within ... The button must not draw its own :focus-visible
+    // outline or the two stack into a doubled ring over the trigger.
+    outline: 'none',

Notes

• Keyboard focus is unchanged — a single, correct ring still shows on the focused trigger.
• Non-breaking — pure CSS.
• The MultiSelector clear button keeps its own :focus-visible outline (a separate control, unchanged), matching Selector.
• No unit test added: this is a pure CSS/visual fix that jsdom can't meaningfully assert (it doesn't compute rendered CSS). This mirrors the precedent set by the equivalent Selector fix (fix(core): remove doubled focus ring on Selector trigger #3088), which shipped with a changeset and no unit test. The existing focus/keyboard tests for MultiSelector still pass.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Jul 31, 2026 4:39am

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

MultiSelector _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	1339	-
Complexity	N/A	Very High (150)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.7KB	1.2KB

Accessibility Audit

Status: No accessibility violations detected.

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}