feat(selector): add search adornment slots to Selector & MultiSelector

[freddymeta]

What

Adds searchStartContent / searchEndContent slots to Selector and MultiSelector for decorative adornments beside the dropdown search input (only in hasSearch mode) — most commonly a leading search/magnifier Icon.

<Selector hasSearch searchStartContent={<Icon icon="search" size="sm" />} … />

Why

The search input had no adornment slot, so a leading magnifier could only be a CSS pseudo-element (::before with an inline-SVG mask) — which can't be a real icon component and can't carry a handler. This is the composition-friendly fix: pass a real <Icon>.

How (accessibility)

The adornments render inside the search row wrapped aria-hidden and are non-interactive, so:

• the search input keeps its role="combobox", focus, and keyboard behavior (unchanged),
• the adornments never surface as extra controls inside the listbox.

The search wrapper becomes a flex row; the input fills the remaining space. Interactive clear-style affordances still belong on the value via onChange — these slots are decorative and deliberately not wired to the search query.

Scope

Part of the EPS-on-Astryx upstreaming (paired with the theme-target PR). This is the piece that genuinely needed component API rather than a theme hook. A full renderSearch override was considered but rejected — it would let a consumer break the combobox/aria-activedescendant contract the component carefully maintains; adornment slots give the needed flexibility (the magnifier) without that risk.

Testing

• Selector 79 + MultiSelector 74 = 153 tests pass, incl. new ones: both slots render aria-hidden beside the input (both components) and don't render without hasSearch.
• typecheck:docs, check-sync, sync-exports --check, changeset check, eslint — all green.

Non-breaking; default appearance unchanged (no adornments unless provided).

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Jul 31, 2026 1:30pm

[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	1365	-
Complexity	N/A	Very High (153)	-

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

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

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}

[freddymeta]

Closing in favor of #4596.

The driving use case here — a decorative leading magnifier in the search input — is covered by the selector-search / selector-search-input theme targets added in #4596: a theme can draw the magnifier via a ::before on the search wrapper (defineTheme), app-wide, without adding component props.

Since these adornment slots were scoped as decorative/non-interactive/aria-hidden, a theme target fully serves the need and avoids adding four new props (searchStartContent/searchEndContent across both Selector and MultiSelector). If a genuinely interactive search adornment is needed later, that can be a single, scoped prop at that point.