Toolbar: support responsive OverflowList composition

[ernestt]

Summary

This draft explores the small Core changes needed to make OverflowList a safe responsive strategy inside Toolbar. It is intentionally separate from #4818 so the integration can be reviewed on its own.

• Allow start and end action slots to shrink so a nested OverflowList receives a constrained width.
• Scope Toolbar roving focus to controls it owns, excluding inert measurement copies, popovers, menus, and nested composite widgets.
• Promote a clicked or programmatically focused toolbar control to the active roving tab stop.
• Let MoreMenu accept compound DropdownMenu children as an alternative to data items, which preserves checked state for formatting actions moved into overflow.
• Add API guidance and a resizable responsive Toolbar story with stateful formatting actions.

Why these changes are needed

OverflowList renders a hidden inert measurement copy of every child. Toolbar currently queries every descendant button, input, or tabindex, so it includes those copies in its roving order. Toolbar slots also keep their intrinsic width, which prevents OverflowList from observing the actual constrained space. Finally, data-only MoreMenu items cannot represent controlled checkbox actions without losing their component state model.

Scope and risk

• No changes to the OverflowList measurement algorithm.
• No RichTextEditor or Lexical-specific behavior.
• No ToggleButton sizing or Toolbar spacing changes.
• The MoreMenu API change is additive: existing items usage is unchanged.
• The focus change is covered at both hook and Toolbar integration levels.

Storybook

Core / Toolbar / Composition: Responsive Overflow

Use the width slider to force actions into MoreMenu, then toggle actions both inline and from the overflow menu to verify state continuity.

Validation

• 78 focused tests pass across Toolbar, MoreMenu, and useListFocus.
• Core TypeScript check passes.
• Changed source and story files pass ESLint and Prettier.
• Repository pre-commit checks pass, including SYNC, package boundaries, changesets, demo media, executable bits, and CLI structure.
• The full Storybook typecheck in a fresh worktree is currently limited by unbuilt theme, charts, and Vega workspace package outputs; after resolving the story-specific issue, it reports no Toolbar.stories.tsx errors.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
astryx	Ignored		Aug 10, 2026 5:08pm

[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

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

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	83	-
Complexity	N/A	Low (5)	-

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

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	285	-
Complexity	N/A	High (17)	-

Bundle Size Summary

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

Accessibility Audit

Status: 1 accessibility violation(s) found — 1 moderate.

Toolbar - 1 issue(s)

• 🟡 moderate: Ensure landmarks are unique
  • Rule: landmark-unique · Affects 1/14 stories · Learn more

---

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