feat(Selector): add selector-option-row theme target on the option row

[freddymeta]

Summary

The Selector dropdown option row is a bare div[role="option"] carrying only StyleX hashes — it has no theme target. Consumers who want to restyle row padding or density have to reach it with a structural selector like div[role='listbox'] [role='option'], which is brittle and leaks across unrelated listboxes.

This adds selector-option-row on that row, mirroring the multi-selector-option target MultiSelector already exposes. It carries size plus selected / disabled state, so a theme can express "selected option at large" or adjust a given row density directly.

defineTheme({
  name: 'my-theme',
  components: {
    'selector-option-row': {
      base: { padding: 'var(--spacing-2)' },
      selected: { backgroundColor: 'var(--color-background-muted)' },
      'size:md': { padding: 'var(--spacing-2)' },
    },
  },
});

Why -option-row and not -option

selector-option is already taken: it's the public SelectorOption content primitive (the Item holding a row's icon/label/description), not the row container. MultiSelector has no equivalent content primitive, so it could use multi-selector-option for its row. Here the row and the content are distinct elements, so the row target is disambiguated as selector-option-row. State/size vocabulary matches multi-selector-option for cross-component consistency.

Motivating case: the row's padding is split across a base (--spacing-2, 8px) and a per-size override where the default md trims only the block axis to --spacing-1-5 (6px). Reaching that to normalize row density previously required a structural selector; now it's a first-class seam.

Test plan

• pnpm -F @astryxdesign/core test — Selector suite passes, plus three added tests: the target lands on every dropdown row with its data-size, reflects data-selected, and a defineTheme generation check proves a theme reaches the row + its states + per-size density.
• pnpm -F @astryxdesign/core build / typecheck — clean. astryx component Selector lists the new target.
• Docs (.doc.mjs theming targets) and a changeset are included. Purely additive — the class/attributes change nothing until a theme targets them.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 20, 2026 5:57am

[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

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

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

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

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

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

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

Drawer _{(@astryxdesign/lab)} · View in Storybook

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

ListInput _{(@astryxdesign/lab)} · View in Storybook

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

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB
@astryxdesign/lab	N/A	3.6KB	1.5KB

Accessibility Audit

Status: No accessibility violations detected.

---

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

[freddymeta]

Added test parity with multi-selector-option's row coverage: an unselected/enabled row carries neither data-selected nor data-disabled, a disabled option reflects data-disabled, and the target survives a renderOption override. Selector suite green (131).

One separate follow-up worth a maintainer's eye (not part of this PR): the md option row paints 6px block / 8px inline — itemSizeStyles.md overrides only paddingBlock to --spacing-1-5 while the base keeps --spacing-2 inline. If that asymmetry is unintended, it's worth symmetrizing the default upstream; this target just makes the row density themeable either way.

[cixzhang]

Thanks this is good. Checked in Chrome that a theme reaches the row, its states and its size — merging as is.

[Reviewed by Robohands]

[cixzhang]

Comment could be a line or two; the naming rationale already lives in the description.