Astryx 0.5.0 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

• Banner: the collapse axis moves onto one collapsible prop, and content can opt out of collapsing (#5255) Banner inferred its disclosure from its content: any children got a chevron in the header and were hidden until it was pressed. There was no way to show content without a toggle — the case a banner most often wants, a list of the three fields that failed validation — and defaultIsExpanded was the only knob, with no controlled mode.

  The whole axis is now one boolean | CollapsibleConfig prop, following the boolean-or-config convention SideNav.collapsible set, and backed by the shared useCollapsible hook rather than Banner's own state:

  <Banner status="error" title="3 fields need attention">…</Banner>  // unchanged: collapsible, starts closed
  <Banner collapsible={false}>…</Banner>                             // new: always visible, no toggle
  <Banner collapsible={{defaultIsOpen: true}}>…</Banner>             // replaces defaultIsExpanded
  <Banner collapsible={{isOpen, onOpenChange}}>…</Banner>            // new: controlled

  The default is unchanged — a banner that never mentioned defaultIsExpanded behaves exactly as it did. The breaking part is the prop itself: defaultIsExpanded is removed in favour of the config, which is a type error at every JSX call site that names it.

  Codemod: npx astryx upgrade --codemod banner-collapsible-content

  It rewrites defaultIsExpanded to collapsible={{defaultIsOpen: true}} and drops defaultIsExpanded={false}, which is now the default. Banners that never set the prop are left alone.

  One case the codemod and the compiler both miss: a spread. defaultIsExpanded inside a props object is out of the transform's scope. A props object in a typed position still fails to compile — but an inferred one that is spread, <Banner {...args} />, does not, because TypeScript does not excess-property-check a spread. The prop then falls through to the DOM and the banner quietly starts collapsed. Grep for defaultIsExpanded after running the codemod and migrate any spread sites by hand.

• Overlays share one dismissal stack, so a single Escape dismisses exactly one layer. Every overlay used to own its own Escape listener, which meant one press could close a popover and the Dialog hosting it, or a modal and the modal it was opened from. useLayerDismissal replaces that with a single stack: the stack owns one listener, routes each press to the top-most layer, and suppresses the browser's own close-watcher so nothing dismisses twice. A layer declares what it does with a press via escapeBehavior — close (default) or block, for a required Dialog that must swallow the press without closing so nothing behind it dismisses either. Fixes a Tooltip inside a Dialog closing the Dialog rather than the tip, and a HoverCard trigger swallowing Escape whenever it merely had focus. Dismissals the browser starts on its own — the Android back gesture, the platform close watcher — still close a Dialog, and follow the same top-most rule. An Escape that cancels an in-progress IME composition dismisses nothing: the stack claims that press so the browser raises no close request of its own, and a close request that arrives mid-composition anyway is declined, so a CJK user backing out of a half-formed character no longer loses the layer and everything typed into it. One behavior change worth knowing about if you listen for Escape yourself: the stack claims a press with preventDefault() but deliberately leaves propagation alone, so a keydown listener on window now sees an Escape that a focus-trapped layer used to stop — with defaultPrevented already true, which is how to tell the stack has acted on it. Top-most is resolved from React-tree nesting (which survives portals) rather than DOM containment alone. A layer's place in that order is keyed to the layer's identity rather than to each registration, so a prop change that re-registers it — a Dialog whose purpose flips while it is open — never promotes it above the layers opened over it. Controlled layers follow their control state: a controlled Tooltip or HoverCard stays on the stack and takes the press like any other layer, but answers it by calling onOpenChange(false) rather than hiding itself — whether it actually closes is the caller's update to make, exactly as it has always been for Dialog (#4881).

• Allow MultiSelector count labels to be customized (#4032)

• MultiSelector: rename the unreleased formatTriggerCount prop to formatValue and widen it to the whole trigger line. It now receives the selected items ({value, label}[], count available as .length) and formats the trigger for triggerDisplay="count" and "labels"; "badges" renders elements, so it is not used there. formatValue matches NumberInput and Slider, so the same idea has one name across the system. Defaults are unchanged when the prop is absent (#5377).

• Promote Stepper and Step from the canary-only Lab package to Core. The stable package now ships their existing horizontal/vertical layouts, separated and on-track indicators, semantic status, density, and non-linear navigation, plus Core documentation and rendered examples. The default aria-label is now localized. Advancing one step now animates the connector. Every connector the four layouts draw — the separated bars and the on-track segments alike — grows its accent fill out of the segment's leading edge instead of swapping a background color, so moving forward reads as progress travelling the track. That one gesture is the only thing that animates: going back, jumping forward by more than one step, and mounting mid-flow all apply at once, as does any change under prefers-reduced-motion. Retreats are deliberately instant — run in reverse the same transition ends on a shrinking stub of accent, and a remnant still on the track reads as unfinished where the identical curve growing forward reads as arrived — and multi-step jumps are instant because a jump is a navigation rather than a progression, so sweeping a front across the crossed segments only makes the user sit out a journey they asked to skip. Where one span is drawn by several segments (the on-track layouts split a span between two steps, three when a content slot sits between them) the segments take abutting slices of the span's time and run linearly, so the fill reads as one line growing at a constant speed rather than pieces lighting in turn.

  Five visual fixes land with the promotion. Horizontal steps now divide the track evenly instead of sizing to their own labels, so every progress segment is the same width regardless of how long a step is named. Number indicators shrink from 20px to 16px to match the check, ring, and custom-icon indicators, so a step swapping its number for a check as it completes no longer nudges the label beside it. A step description now occupies a 16px box rather than a 24px one — it previously inherited the page's line box instead of applying its own leading, which opened an 8px gap under the label. A step's content slot now starts flush with the label above it at every density: the slot renders outside the density-padded label area, so it was hanging one pad short of it. And a vertical on-track step carrying content keeps its connector unbroken — the content renders below the row that draws the line, so the track used to split open around any step with content (#5201).

• AspectRatio: emit ratio as a class-level declaration instead of a hard inline style, so the ratio can be overridden responsively: StyleX consumers pass an aspect-ratio rule via xstyle (including under @media/@container conditions), and plain-CSS/Tailwind consumers override aspect-ratio from their own unlayered rules, which beat the astryx-base cascade layer regardless of specificity. The mixed-gallery template's hero now switches 3:1 to 3:2 when the grid stacks with a one-line override on a single element, replacing the duplicated hero markup the fixed inline ratio previously forced (#3883, closes #2798)

• ChatMessageList: add an align prop for top-aligned message lists (#3933, closes #2572).

• DateTimeInput: new timeOptionInterval prop adds a dropdown of preset times to the time field, at a cadence of 5 | 10 | 15 | 30 | 60 minutes (60 gives the 12 AM - 11 PM list). The field becomes an APG combobox over a listbox: click or Alt+ArrowDown opens it, ArrowUp/ArrowDown move the active option, Enter picks, Escape closes, and typing moves the highlight to the closest option without filtering the list. min/max trim the options on the boundary date. Style the popup through the date-time-input-time-listbox and date-time-input-time-option theme targets. Opt-in and additive: with timeOptionInterval omitted the time field keeps exactly its current behavior and gains no combobox semantics, so existing getByRole('combobox') queries still resolve to the date input. With the list closed the arrow keys keep stepping by timeIncrement (#4837).

• Markdown: opt-in source ranges on parsed blocks parseMarkdown(source, {sourceRanges: true}) now gives every top-level block a range — {start, end}, the character offsets it occupies in the source that was passed in, with end exclusive — so a consumer holding that source can source.slice(range.start, range.end) for a block instead of reconstructing it from the node (or from the rendered DOM). Reconstruction is lossy in ways slicing is not: escapes, the exact emphasis and fence characters, heading depth beyond the clamp, and alignment all survive a slice unchanged.

  Off by default and absent unless asked for, so no existing node, snapshot or comparison changes.

  Two things the offsets get right that a naive implementation does not: link reference definitions are stripped before the block loop runs, and the ranges are reported against the string the caller passed rather than the stripped text; and parseMarkdownIncremental parses slices, so blocks report absolute offsets into the whole document as it streams — including a list whose halves arrived in separate chunks and were merged.

  A range covers a block's own lines verbatim, so slicing it and parsing the result gives the same node back.

  Blocks nested inside a list item or a blockquote carry no range: their children are parsed from text the parser reassembled with markers and > prefixes removed, so an offset into it would not address the document (#5290).

• Table: let useTableSelection opt out of the checked-row accent wash The selection plugin paints checked rows by writing backgroundColor straight onto each <tr> from its row ref callback. An inline style outranks anything StyleX can layer on, so a product that wanted the row background for its own meaning had no way to reclaim it short of forking the plugin.

  hasRowHighlight turns the wash off. It defaults to true, so existing tables are untouched. Only the background is dropped — aria-selected is still set and removed exactly as before, since that is the half of the state screen readers read.

  useTableSelection({...config, hasRowHighlight: false});
  ``` (#5310)

• TabList: a strip that switches panels in place can now say so with role="tablist", and it speaks the WAI-ARIA tabs pattern — role="tablist" on the strip, role="tab" and aria-selected on the tabs, and aria-controls pointing at the panel each tab opens, from a new panelId prop on Tab. There is no new prop for the switch: TabList declares role?: AriaRole and reads it, the way LayoutHeader, LayoutContent and LayoutPanel already declare and document theirs. The keyboard behaviour the pattern asks for was already there: arrows move between tabs, Tab leaves the strip. Under the asserted role the strip takes only the horizontal arrows, leaving ArrowUp and ArrowDown to scroll the page. role already reached the DOM through {...restProps}, so a caller could pass role="tablist" and get a tablist whose children were still <button>s with aria-current — invalid markup, no aria-selected, and no warning. Reading the role turns that silent breakage into the correct behaviour; declaring it is what puts it in the type, the prop table and the docs.

  Nothing changes for a caller who passes no role: the strip is the <nav> landmark with aria-current it has always been. Any other role still passes through to the element untouched.

  Two development warnings come with the asserted role, and only with it. A tab with an href is a false statement inside a tablist, so the href is ignored and the warning says so. And a tab that controls nothing gets asked for a panelId — either that or an aria-controls you wrote yourself satisfies it, and a hand-written one is never overwritten. aria-controls is emitted only when you supply the id: pointing at a panel that does not exist is an invalid attribute value, which is worse than saying nothing. A menu or any other non-tab in a tablist strip is invalid markup, and warns too. The mirror case warns as well: a panelId on a strip that is not a tablist has no panel relationship to state, and is dropped (#5349).

• TabList: a strip narrower than its tabs now scrolls instead of spilling out of its container. Every tab stays a tab — nothing is hidden behind a menu — the edges fade to show there is more, and pointers that can hover get arrow affordances; keyboard and screen-reader users reach every tab with the arrow keys, which scrolls the focused tab into view. The selected tab is scrolled back into view whenever it would be out of sight, including on mount and when the host changes value itself. The new overflow prop takes 'auto' (the default, which today always scrolls), 'scroll', or 'visible' to keep the old spill-out layout. Built on the existing useScrollOverflow hook, so there is no new measurement machinery and no Carousel in the tab strip — the documented Carousel recipe, which announced every tab as "slide N of M", is no longer needed and the stories now use the built-in behaviour. If you followed that recipe, nothing breaks: a Carousel still wrapping the tabs renders and behaves exactly as it did before, because its own scroll container absorbs the strip's, which then never overflows. Removing it is worth doing anyway — it drops the region/"slide N of M" wrapping from the accessibility tree, and the strip's own scrolling brings a tab that straddles the edge fully into view on focus, which the carousel does not (#5348).

• useTablePagination: with position='both' the two pagination <nav> landmarks now get distinct accessible names — "{label} (top)" above the table and "{label} (bottom)" below it (axe landmark-unique). Consumer-supplied label values are interpolated into both names; single-position labels are unchanged (#4692).

• Table useTableRowExpansion: the chevron gutter's column header now carries a visually hidden localized name ("Row expansion", key @astryx.tableRowExpansion.columnHeader) instead of an empty <th> (axe empty-table-header, WCAG 1.3.1 best practice). The gutter stays visually blank (#5383).

• Table useTableRowStatus: the status gutter's column header now carries a visually hidden localized name ("Row status", key @astryx.table.rowStatus.columnHeader) instead of an empty <th> (axe empty-table-header, WCAG 1.3.1 best practice). The gutter stays visually blank (#4693).

• BottomSheet: a standalone sheet no longer dismisses when a CJK user presses Escape to cancel an in-progress IME composition. The browser fires that keydown before compositionend, so an Escape handler reading a bare event.key misread the composition cancel as a dismissal command and closed the sheet — losing whatever had been typed into a purpose="form" field inside it. The handler now early-returns on isImeKeyEvent, the same guard Dialog and BottomSheetSwitcher already carry, and claims the key first so the browser raises no close request of its own (#5322).

• Breadcrumbs marks the current item with semibold weight, not colour alone. The current crumb was distinguished only by --color-text-primary against its siblings' --color-text-secondary, which fails WCAG 1.4.1 (use of colour) and leaves the current position invisible to anyone who cannot separate the two tones (#4605, closes #4421).

• ButtonGroup: arrow keys pressed inside a member's open menu stay with that menu. A DropdownMenu renders its menu inline inside the group, so ArrowLeft and ArrowRight used to bubble to the group and move focus onto a sibling button while the menu was still open. The group's elevation is also reflected as data-elevation now, so a theme can target it (#5355).

• ButtonGroup is a single tab stop. Its members now share one roving tab stop instead of taking one each, so a three-button group costs one Tab press rather than three. Arrow keys move between members along the orientation (flipped in RTL), Home/End jump to the ends, focus wraps, and disabled members are skipped. Two consequences worth knowing: a keyboard script or test that tabbed through a group member by member must use arrow keys now, and a member rendered as a link (href) joins the arrow order for the first time. (#5389)

• Calendar (and DateInput, DateRangeInput, DateTimeInput) now opens on a month inside the min/max window instead of on today With no focusDate and no selected value, the calendar opened on today's month even when min/max excluded it — a 2019 audit window or a booking window that opens next spring rendered a grid where every day was disabled, and the only way in was clicking the prev/next arrows once per month.

  The initial month is now today clamped into the window: today when it is inside, otherwise whichever bound is nearest. An explicit focusDate or a selected value still wins, so nothing changes for callers that already say where to look. With numberOfMonths={2} a past window lands max in the right-hand pane, so neither pane is entirely out of bounds (#5306).

• DateInput: clearing on touch no longer jumps the page to the top On the touch surface, tapping the clear (✕) threw the user to the top of the page. Clearing unmounts the clear button, and handleClear focused the field in that same task — on iOS Safari, focusing an element as the focused button is removed scrolls the whole document to 0. The focus handoff is now deferred past the unmount, which keeps the page where it was and still returns focus to the field.

  Measured on the iOS 26 simulator against the live docsite (DateInput — Clearable, page at scrollY 2055): synchronous focus → 0, deferred focus → 2055. preventScroll alone does not fix it; it is kept for the ordinary scroll-into-view nudge, which is unwanted for the same reason (#5350).

• Clamp standard Dialog width to dynamic viewport space with token gutters, add safe-area/fullscreen sizing and fade-only fullscreen motion updates, add opt-in adaptive Dialog/BottomSheet recipes, and add explicit presentation comparison stories (#5352).

• DropdownMenu: move the dropdown-menu-indicator-icon theme target onto the Icon element itself so a theme can restyle the submenu chevron's size and color directly. The loading branch no longer carries the target — its Spinner has its own astryx-spinner target, matching Selector, MultiSelector and ComplexSelector (#4743).

• Chat: a token in a message bubble now sits on the line the way it does in the composer. ChatTokenizedText wraps each token in the same inline-flex / vertical-align: middle box ChatComposerInput uses, so a chip stops lifting off the text the moment the message is sent. Follows #5324, which fixed the composer half (#5402).

• Chat: composer tokens no longer sit above surrounding text — vertical-align changed from baseline to middle, and ChatComposerTokenElement now uses a StyleX class instead of an inline style so consumers can override alignment without !important (#5324).

• useFocusTrap: Tab is only cancelled when focus is actually inside the trapped container. An open layer whose focus legitimately sits outside it — a listbox popup anchored to its own input, as in DateTimeInput, Typeahead, Selector and MultiSelector — no longer swallows Tab for the whole page, so keyboard users move to the next control on the first press. A trapped surface with no tabbable controls and focus on a tabIndex={-1} panel still keeps Tab inside it (#5397).

• mod hotkeys and Kbd resolve to Cmd on macOS again when client hints report a blank platform useHotkeys and Kbd both prefer navigator.userAgentData.platform and fall back to navigator.platform, but guarded the preference with 'platform' in uaData, which is true whenever the key exists at all. A build reporting platform: '' therefore committed to the client-hints branch and got false without ever reaching the fallback, so on macOS every mod combo listened for Ctrl and every <Kbd> drew Ctrl. Electron and other embedders that rewrite the app's user-agent identity ship exactly that. A blank platform is now treated as unknown and falls through (#5325).

• Markdown streaming: parseMarkdownIncremental no longer throws away its settled blocks while a code fence is open, or when a chunk happens to end on a newline — both re-parsed the whole document, so a long streamed response got slower the longer it grew. Blocks rebuilt across a streamed 500-paragraph document: 126,756 → 1,869 (#5407).

• Migrate core components from inline mergeRefs calls to stable useMergedRefs callbacks (#5267).

• PowerSearch now applies menuWidth to the initial field and search menu without letting it shrink below the input width. Value menus shown after selecting a field are unchanged. (#5237)

• PowerSearch: maxOperatorMenuItems now caps suggestions in string, string-list, and entity-list value typeaheads, including values inside nested filters (#5242).

• PowerSearch: the edit popover now fits narrow viewports — its 400px minimum width yields to the screen width, and the filter row wraps instead of overflowing when long translated operator labels don't fit. An editor anchored near the screen edge now stays on its own side at the width available there, wrapping internally, instead of flipping across the anchor to keep 400px (#4768).

• PowerSearch now groups fields in the browsing menu using each field's group value. Ungrouped fields appear first, while typed search results remain flat. (#5235)

• PowerSearch now shows up to 1,000 configured fields when the search box is empty, instead of stopping at 10. Typed searches still show 10 ranked results by default; use maxSearchResults to change only that limit. (#5233)

• Selector and MultiSelector no longer expose their {type: 'divider'} separators to assistive technology. role="listbox" only permits option/group children, but the divider previously rendered role="separator" as a direct child of the listbox (axe aria-required-children, impact critical). The divider is decorative and carries no information the options don't, so it's now hidden from the accessibility tree via aria-hidden, matching the pattern already used for section headings (#5107).

• Keep merged refs stable across Avatar, Button, SideNav, TabList, and TopNav (#5429).

• Add useMergedRefs and keep Text and Heading refs stable across rerenders (#5266).

• Table: a plugin can suppress a body cell's content, and grouped rows use it to keep synthetic group headers out of your cell renderers (#5363) useTableGroupedRows injects section-header rows into the flattened data, and BaseTable evaluates every column's renderCell against every row. A renderer that keys a lookup off a field — STATUS_META[item.status].dot — was therefore handed a row that is not yours and threw, blanking the page the moment grouping was switched on. The header Proxy answering unknown fields with '' only ever rescued a renderer that prints a field; '' fails a lookup exactly as undefined does.

  BodyCellRenderProps gains isContentSuppressed?: boolean. A plugin sets it in transformBodyCell for a row whose cells it is about to replace wholesale in transformBodyRow, and the table renders that cell empty without calling the column's renderer or the default one. It is decided per cell at render time against the final column list, so it also covers columns other plugins contributed — whatever order the plugins were listed in.

• TimeInput parses compact AM/PM values correctly (#4026)

• Typeahead: Tab out of the field now moves focus to the next control. The result list is dismissed on the Tab keydown rather than from the blur that press produces — hiding a top-layer popover during the focusout makes Chrome abandon the in-flight focus move and drop focus to <body>, so the press appeared to do nothing. Selector and MultiSelector already dismissed on the keydown (#5400).

• document missing API contract props across Button, Toast, ContextMenu, MoreMenu, Selector, Link, and Dialog (#4315, part of #4163)

• document missing props across complex components (MultiSelector, Tokenizer, PowerSearch, Typeahead, Layout, DropdownMenu, HoverCard, Tooltip, Link, Lightbox) (#4316, part of #4163)

• document the missing components prop on Markdown (#4319, part of #4163)

• document labelID and isGroupLabel props in Field (#4320, part of #4163)

• document missing props across structural components (CodeBlock, Toolbar) (#4317, part of #4163)

• Table: document the section components children mode requires Children mode stopped wrapping children in a <tbody> in #2098, but the docs still described the contract from before it. The children prop read "render TableRow/TableCell directly"; TableRow's own @example showed a row sitting in <Table> with no section around it; and TableHeader, TableBody, and TableFooter — public exports since that change — had no docs at all and were missing from Table's component list. A reader following the component's own documentation wrote <table><tr>, which is invalid HTML and mismatches on hydration.

  The three section components are now documented, listed on Table, and named in the children prop description, in a best practice, and in TableRow's example (#5278).

• align?: 'top' | 'bottom' (default 'bottom'). 'bottom' keeps the existing behavior: a flex spacer fills free space so a short conversation sits just above the composer. 'top' omits the spacer so messages start at the top and grow downward — better for log-style or document-style lists.
• Only changes the resting position of a non-full list. Once messages overflow the container the spacer collapses to zero in both modes, so ChatLayout auto-scroll-to-bottom behavior is unchanged.
• Spinner: the ring is drawn in SVG instead of <canvas>. The arc and track take their colours from the cascade (currentColor for shade="inherit"), so nothing resolves a colour in JS: a colour change after mount now repaints the ring instead of leaving it stale until it remounts, and mounting spinners no longer costs a getComputedStyle each. Rings are pinned to the document timeline's origin, so spinners mounted at different times turn in phase. No API, geometry or theme-target change (#5408).

• Banner: the collapse axis moves onto one collapsible prop, and content can opt out of collapsing (#5255) Banner inferred its disclosure from its content: any children got a chevron in the header and were hidden until it was pressed. There was no way to show content without a toggle — the case a banner most often wants, a list of the three fields that failed validation — and defaultIsExpanded was the only knob, with no controlled mode.

  The whole axis is now one boolean | CollapsibleConfig prop, following the boolean-or-config convention SideNav.collapsible set, and backed by the shared useCollapsible hook rather than Banner's own state:

  <Banner status="error" title="3 fields need attention">…</Banner>  // unchanged: collapsible, starts closed
  <Banner collapsible={false}>…</Banner>                             // new: always visible, no toggle
  <Banner collapsible={{defaultIsOpen: true}}>…</Banner>             // replaces defaultIsExpanded
  <Banner collapsible={{isOpen, onOpenChange}}>…</Banner>            // new: controlled

  The default is unchanged — a banner that never mentioned defaultIsExpanded behaves exactly as it did. The breaking part is the prop itself: defaultIsExpanded is removed in favour of the config, which is a type error at every JSX call site that names it.

  Codemod: npx astryx upgrade --codemod banner-collapsible-content

  It rewrites defaultIsExpanded to collapsible={{defaultIsOpen: true}} and drops defaultIsExpanded={false}, which is now the default. Banners that never set the prop are left alone.

  One case the codemod and the compiler both miss: a spread. defaultIsExpanded inside a props object is out of the transform's scope. A props object in a typed position still fails to compile — but an inferred one that is spread, <Banner {...args} />, does not, because TypeScript does not excess-property-check a spread. The prop then falls through to the DOM and the banner quietly starts collapsed. Grep for defaultIsExpanded after running the codemod and migrate any spread sites by hand.

• Promote Stepper and Step from the canary-only Lab package to Core. The stable package now ships their existing horizontal/vertical layouts, separated and on-track indicators, semantic status, density, and non-linear navigation, plus Core documentation and rendered examples. The default aria-label is now localized. Advancing one step now animates the connector. Every connector the four layouts draw — the separated bars and the on-track segments alike — grows its accent fill out of the segment's leading edge instead of swapping a background color, so moving forward reads as progress travelling the track. That one gesture is the only thing that animates: going back, jumping forward by more than one step, and mounting mid-flow all apply at once, as does any change under prefers-reduced-motion. Retreats are deliberately instant — run in reverse the same transition ends on a shrinking stub of accent, and a remnant still on the track reads as unfinished where the identical curve growing forward reads as arrived — and multi-step jumps are instant because a jump is a navigation rather than a progression, so sweeping a front across the crossed segments only makes the user sit out a journey they asked to skip. Where one span is drawn by several segments (the on-track layouts split a span between two steps, three when a content slot sits between them) the segments take abutting slices of the span's time and run linearly, so the fill reads as one line growing at a constant speed rather than pieces lighting in turn.

  Five visual fixes land with the promotion. Horizontal steps now divide the track evenly instead of sizing to their own labels, so every progress segment is the same width regardless of how long a step is named. Number indicators shrink from 20px to 16px to match the check, ring, and custom-icon indicators, so a step swapping its number for a check as it completes no longer nudges the label beside it. A step description now occupies a 16px box rather than a 24px one — it previously inherited the page's line box instead of applying its own leading, which opened an 8px gap under the label. A step's content slot now starts flush with the label above it at every density: the slot renders outside the density-padded label area, so it was hanging one pad short of it. And a vertical on-track step carrying content keeps its connector unbroken — the content renders below the row that draws the line, so the track used to split open around any step with content (#5201).

• AspectRatio: emit ratio as a class-level declaration instead of a hard inline style, so the ratio can be overridden responsively: StyleX consumers pass an aspect-ratio rule via xstyle (including under @media/@container conditions), and plain-CSS/Tailwind consumers override aspect-ratio from their own unlayered rules, which beat the astryx-base cascade layer regardless of specificity. The mixed-gallery template's hero now switches 3:1 to 3:2 when the grid stacks with a one-line override on a single element, replacing the duplicated hero markup the fixed inline ratio previously forced (#3883, closes #2798)
• CLI: astryx theme targets lists every component theming target — the defineTheme key, the class it paints, and the props and states it accepts — for one component or the whole system, with --json for lint and audit scripts. astryx theme --help now points at component overrides instead of reading as a build-tool menu. The listing and theme build's override validation share one enumeration of the component docs, so neither can drift from the components (#5115).

• neutral theme: darken the light-mode error red from #e33f4a to #c9303a so the filled Badge variant="error" label clears WCAG 2.1 AA. White on #e33f4a is 4.14:1 and the badge label is 12px/weight 500, so the 4.5:1 normal-text threshold applies rather than the 3:1 large-text allowance; #c9303a gives 5.29:1 while holding the hue (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189). StatusDot and the ProgressBar --color-error rebinding move with it — both are documented as tracking the badge fill so the dot and its badge read as one status language. Dark mode is untouched (dark text on #ff705d, 6.60:1). Adds scripts/check-badge-contrast.test.mjs, which resolves every theme's badge label/fill pair through light-dark(), var() indirection and alpha compositing, and holds all of them to 4.5:1 (#4446).

• Unified search and build now include components contributed by integrations, so a component registered through an integration is findable and buildable alongside the built-in set instead of silently missing from both (#5259).

• Table - Grouped page template: wrap the rows in TableBody The template rendered <TableRow> straight into <Table>, so the emitted DOM was <table><tr>. <table> cannot contain a row directly: the HTML parser inserts an implied <tbody> when it parses server-rendered markup and React does not when it renders on the client, so anyone who copied the template into an app as a server-rendered page inherited a hydration mismatch in their own app. Client-only the DOM is still invalid — nothing reparents the rows, so the table ends up with <tr> children and no <tbody> at all, and any CSS or query aimed at tbody silently misses.

  The rows now sit in <TableBody>, the same element the data-driven data={...} path renders, so styling, dividers, and column widths are unchanged (#5278).

• Public component theming vars are enumerable, and guarded against being documented but unsettable collectThemingVars joins collectThemingTargets as part of the one enumeration the theming surface is read from. Two guards ride on it: a documented public var no component reads compiles to a declaration that never applies, and a var the component writes inline outranks every cascade layer, so no theme can reach it. Both had shipped; neither is visible in the generated theme CSS the jsdom suites assert on (#5409).

• neutral theme: darken the light-mode error red from #e33f4a to #c9303a so the filled Badge variant="error" label clears WCAG 2.1 AA. White on #e33f4a is 4.14:1 and the badge label is 12px/weight 500, so the 4.5:1 normal-text threshold applies rather than the 3:1 large-text allowance; #c9303a gives 5.29:1 while holding the hue (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189). StatusDot and the ProgressBar --color-error rebinding move with it — both are documented as tracking the badge fill so the dot and its badge read as one status language. Dark mode is untouched (dark text on #ff705d, 6.60:1). Adds scripts/check-badge-contrast.test.mjs, which resolves every theme's badge label/fill pair through light-dark(), var() indirection and alpha compositing, and holds all of them to 4.5:1 (#4446).

Thanks to everyone who contributed to this release:

@AKnassa @andrskr @Astro-Han @athz @cixzhang @ernestt @freddymeta @gonzoblasco @HelloOjasMutreja @imdreamrunner @jiunshinn @Kevinjohn @lexs @nynexman4464 @rubyycheung

Full Changelog: https://github.com/facebook/astryx/compare/v0.4.7...v0.5.0

Astryx 0.4.7 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

• BottomSheet: a non-modal sheet now colours the iOS 26 Safari toolbar strip with its own surface instead of letting the page show through behind the address bar (#5342).

• BottomSheet: a tap inside the sheet is a tap, and the sheet leaves on an exit curve (#5326). Two defects, both of which read as "the sheet closes with no animation" — reported against the touch DateInput picker, which is a Bottom Sheet.

  A tap inside the sheet started a one-pixel drag. The sheet body carries the pull-to-dismiss handlers, and they promoted to a sheet drag on any downward movement. A finger is never still, so the pixel or two a tap drifts began a drag — and a live drag suppresses the panel's transition, correctly, because a dragged sheet must track the finger rather than lag it. The close that the tap triggered landed inside that window, so the sheet jumped to its closed position with no transition. Tapping the picker's Save button hit this every time; tapping the scrim never did, because the scrim is the dialog itself and arms no gesture. Promotion now needs 8px of travel — the conventional tap slop, well under what a deliberate pull covers in its first frames — in both the pointer and touch paths. The gesture's transition suppression is also scoped to a sheet that is open, so it cannot straddle an exit.

  The exit ran on the entrance's curve. --ease-standard is cubic-bezier(0.24, 1, 0.4, 1), a decelerate curve: it spends its speed immediately and coasts. Right for an entrance, wrong for an exit. Measured on device (iPhone, real Safari), a scrim tap put the sheet half off-screen in 59ms of the 410ms transition and 90% off in 163ms, with the dim gone before it — so the close was over before the eye could follow it. The closing state now carries an accelerating curve of its own, cubic-bezier(0.3, 0, 0.6, 0.6): away from rest, gathering speed, quickest as it leaves the screen, and moving within ~50ms so it reads as one departure rather than a hesitation and a snap. Only the curve changes — the exit keeps --duration-medium, the entrance's band, which is what keeps it legible under a theme that scales the motion scale down (neutral's medium is 300ms against the base 410ms).

  The scrim leaves with the sheet: while closing, the dim runs linear rather than the decelerate token. A fade covers no distance, so front-loading its progress just ends it early — the reasoning the touch date picker's surface swap already carries. BottomSheetSwitcher gets the same treatment when its flow closes; a handoff between two sheets is not a close and is unchanged.

• useListFocus no longer swallows Escape when no onEscape was supplied. The hook called preventDefault() on every Escape — a habit inherited from the arrow keys, which share the handler and need it to suppress page scroll — so a list with nothing to dismiss still marked the key handled, and a surrounding layer that defers to defaultPrevented (a focus trap, a native popover) never got its turn. Escape is now consumed only when an onEscape is passed. Arrow, Home and End handling is unchanged (#5346). Behaviour change: AvatarGroup, ButtonGroup, Outline, Pagination, SegmentedControl, TabList and Toolbar pass no onEscape, so an Escape pressed inside one of them now reaches the surrounding layer and can dismiss it — the point of the fix, but a host that counted on the key stopping there will notice. NavHeadingMenu does the same when it renders without a menu close handler. Menus and flyouts that do pass onEscape are unaffected. patch, not [breaking]: the swallowing was never a contract — the hook documented Escape only as "custom callback", and no component advertised consuming the key.

• TabList: the selected tab now carries aria-current="true" — ARIA's generic "current item within a set" — instead of aria-current="page". The strip is a <nav> and stays one, but it is used to switch views in place at least as often as it is used to navigate, and on those uses page asserted a page change that never happened. Assistive tech announced the selected tab as the current page even when nothing had navigated; it now announces it as the current item, which is true either way. A tab given an href still renders an anchor and still reads as a link — its current marker is just less specific than it was. No role changes and no new props. (#5347)

Thanks to everyone who contributed to this release:

@cixzhang @imdreamrunner

Full Changelog: https://github.com/facebook/astryx/compare/v0.4.6...v0.4.7

Astryx 0.4.6 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

• DateInput fits the pointer: a touch picker on a finger, the text field on a mouse (#5243)

  DateInput has always been a control for a mouse — a field you type into with a calendar in a popover beside it. On a phone or a tablet that is the wrong shape: the popover is a desktop calendar operated by thumb, and focusing the field summons a keyboard that covers the thing it is meant to fill in.

  The same component now renders a second surface where the primary pointer is a finger (pointer: coarse): a bottom sheet holding one month per screen, swiped sideways, with month and year wheels behind the header title for the far jumps swiping is bad at, arrows in the header corner for a single step, and every target floored at 44px. A day commits the moment it is tapped and leaves the sheet up, so a mistake can be corrected in place; Save closes the picker, and Reset puts it back to how it opened — no date, current month. The grid spills adjacent-month days, muted and unselectable, and the weekday header is three letters rather than two, both as the desktop calendar has them.

  The month and year wheels are one layer that fades in and out on top of the calendar. The calendar itself never fades — it is covered and uncovered, so the only thing moving is the thing arriving. The layer carries an opaque background of its own, which is what makes the fade uniform: it renders as a finished image and the fade applies to the image, rather than the wheels' translucent selection band compositing against a live grid on its own terms.

  Nothing changes at the call site. It is one component with two surfaces, not two components — same props, same values, no new import, no media query to write. Existing usage is untouched: with a mouse the rendered output is the control that was always there.

  The switch is the pointer alone, deliberately with no width bound. pointer means the PRIMARY device, so a touchscreen laptop reports fine and keeps the typable field (its keyboard is right there), while a narrowed desktop window is still a mouse. Adding a width test would only re-exclude tablets, which are the clearest case for a thumb picker.

  The public surface barely moves: six @astryx.dateInput.* catalog keys for the picker's header and footer, and nothing else. No new props, no new exports — DateInputProps is byte-identical at 25.

  Nothing else is published, on purpose. There is no export that forces a surface: the touch picker is reachable by being on a touch device, which is the only place it is worth looking at. The media query the switch runs on is an internal constant, not an export — six other core components write @media (pointer: coarse) inline rather than sharing one, and nothing has asked to ask the same question. The picker's two sizes (the 44px day cell, the 28px wheel row) are compile-time constants rather than theme variables — the day size is an accessibility floor, and a variable a theme can quietly lower is not a floor. And the sheet's header button is addressed by a data- attribute rather than a theme target, because nothing has asked to restyle it. Each of those is additive later and awkward to withdraw once shipped.

  The wheels also answer a mouse now. A wheel is a scroll container, so a finger pans it for free; a mouse got nothing, because browsers do not drag-scroll an overflow container — pressing and pulling on the one control shaped like a thing you spin did nothing at all. Dragging with a mouse works, and fixes a related bug on the way: BottomSheet begins its own drag from a pointerdown on its body and captures the pointer for it, so a click on a wheel row that wobbled more than a pixel or two used to select nothing.

• Export useLocale and useCollator for provider-backed formatting and comparison (#5194)

• RadioListItem: the radio-list-item row theme target now carries size, selected, and disabled state variants (matching multi-selector-option), so themes can style selected or disabled rows (#5143).

• RadioListItem: the radio-list-item theme target now rides the painting row element (converging with list-item), so a theme can style the row's hover background, padding, and border radius — previously it sat on a layout-only wrapper that painted nothing. The default (unthemed) row appearance is unchanged: it stays a bare surface with no row padding, radius, or hover/selected background (only the radio indicator tints on hover) (#5143).

• Section, Stack (with HStack / VStack) and Center accept a padding prop for each of the four edges — paddingBlockStart, paddingBlockEnd, paddingInlineStart and paddingInlineEnd — so an edge can take its own spacing step without an xstyle escape hatch. Section also gains the paddingInline axis prop it was missing, so all three components now expose the same seven-prop set (#5224). Each prop takes the same spacing scale as padding, and resolution is most-specific-wins, per edge:

  edge prop → axis prop (paddingInline / paddingBlock) → padding

  An edge prop changes its own edge and leaves the other three alone.

  <Section padding={6} paddingBlockStart={2}>…</Section>   // tight top, 24px elsewhere
  <Stack padding={4} paddingInlineEnd={0}>…</Stack>         // flush trailing edge

  The inline props are logical, so paddingInlineStart is the left edge in LTR and the right edge in RTL.

  On Section the matching --container-padding-* custom property moves with the prop, so bleed children (Table, Divider, a nested Section) keep compensating against the padding actually applied.

  Existing code is unaffected: padding, paddingInline and paddingBlock behave exactly as before, and their generated class output is unchanged.

• Selector: add the selector-option-row theme target on the dropdown option row, carrying size plus selected/disabled state — so a theme can restyle row padding and density directly (mirroring multi-selector-option), instead of reaching the bare role="option" element with a structural selector (#5179).

• MediaTheme: add mode="auto" and mode="off" (#5299) A theme is free to define --color-background-inverted as something that is not inverted — and a component that hardcodes mode="dark" then paints white text on pale grey at 1.25:1. The surface color is a runtime value and the mode was a compile-time guess, so no amount of care in the component could catch it.

  mode="auto" measures the surface the browser actually painted and applies whichever of the theme's own --color-on-dark / --color-on-light reads better on it. There is no threshold and no contrast target: it picks between the theme's two answers, so a theme that wants a soft pairing still gets one. Deciding a surface needs no media context stays an authoring choice — that is the new mode="off", which renders the same element without the media attribute so children never remount.

  When the backdrop is not knowable from CSS — during SSR, on the first client frame, and most often behind a background-image, whose pixels need sampling (see useImageMode) rather than a computed style — auto uses the new fallback prop instead of guessing.

  Toast now uses mode="auto", with its previous rule kept only as that fallback. Every stock Astryx surface renders exactly as before.

• Tooltip and HoverCard: tap to open where there is no hover (#5248) Hover is the one trigger a touch screen cannot express, and both components were answering that badly. Tooltip suppressed itself on any device reporting (hover: none), so its content — often the only label an icon button has — was simply unreachable on a phone. HoverCard did nothing at all: the mouseenter a tap synthesizes opened the card on every tap of its trigger, over the control the user was aiming at, with no gesture that closed it again.

  Both now take a touchTrigger prop, and what the trigger DOES decides the default. A trigger that performs an action — a button, a link, a form control — keeps its tap under auto: the layer stays shut, because the tap already has somewhere to go and a hint about a control the user just operated is noise. A trigger that performs no action — an info icon, an abbreviation, a truncated label — has nothing to lose, so the tap opens the layer, with no show delay (a tap is a decision, not the hover intent the delay exists to filter) and a tap outside to dismiss it. tap and none state the choice outright; tap is what an info icon rendered as a button wants, since it looks like an action to the DOM while revealing the layer is the only thing it does.

  Hover-capable devices are unaffected, hybrid ones included: the decision is made per interaction from the pointer type rather than once per device from a media query, so the same trigger opens on hover under a mouse and on tap under a finger. A stylus is a hover device by the same rule — a pen in detection range fires hover events with nothing in contact, so it opens the layer on hover, and only a pen that lands counts as a tap. Neither layer opens from the focus a tap leaves behind any more — the second way a tap could bury the control it activated, and on Tooltip it is the tapped text fields that were affected, since those match :focus-visible by design.

  [fix] InfoTip (lab): opts into touchTrigger="tap". Its trigger is a real button, so the auto rule would hand the tap to the control — but revealing the tooltip is that button's only purpose, and suppressing it left an InfoTip's content unreachable on a phone.

• Avatar: a status element now reports its own accessible label to the avatar through context, so wrapping AvatarStatusDot in a component of your own keeps the status in the avatar's accessible name ("Jane Doe, Online") instead of silently dropping it — the role="img" root prunes descendant semantics, so composing it in is the only route to assistive tech (WCAG 4.1.2). Reading label off a directly-passed element still works and still resolves on the first render. An interactive avatar (href/onClick) with no name/alt warns in development, and a status label no longer counts as the control's identity: "Online" reads as a legitimate name while saying nothing about where the link goes. Derived role/aria-label/aria-hidden now spread before the passthrough props, following Icon, so a consumer's own values win. No API change (#5034)

• AvatarGroup: four defects out of the component audit, three of them in AvatarGroupOverflow (#5055). The indicator was display: flex on a span, which is a block-level flex container, so the exported component rendered as a full-width bar instead of a circle anywhere outside an AvatarGroup: measured 1168px wide in a 1168px parent. It is inline-flex now; inside a group nothing changes, because a flex item is blockified either way.

  Its label font size was a bare size * 0.35, which computes 7px at xsm and 8.4px at sm. That is under the 12px legibility floor, and the effect is worse than the number suggests: the glyph stroke ends up thinner than a pixel, so it never reaches its own text colour. Decoded from a screenshot, the darkest pixel at xsm is #bebebe on a #f0f0f0 field, a contrast of 1.63:1 where 4.5:1 is required. The size now floors at the --text-supporting-size role token and scales proportionally above it, so md and larger are unchanged.

  The indicator also kept its negative overlap margin when it was the first child of a group, hanging 12px outside the group's own box. It now carries the same :not(:first-child) guard Avatar already had. And a negative count rendered the string +-3 and announced "-3 more"; since the documented shape for the prop is total - visibleCount, which goes negative whenever the list is shorter than the slice, it now clamps at zero.

  Docs: the guidance told readers to "set max to limit visible avatars", and there is no max prop. The API is compositional on purpose, so the consumer slices; the guidance now says that. The keyboard behaviour names the APG roving tabindex technique it implements, and size now says that the group's value wins over each child avatar's own size, including when the group leaves it at the default.

• Blockquote: the cite attribution renders as a bare <cite> instead of being wrapped in a <footer>, which was becoming a contentinfo document landmark. Also guards the slot with isRenderable, so cite={condition && author} no longer emits an empty <cite>, and wraps long unbroken words instead of overflowing (#5144).

• Bottom Sheet: float the grab handle so content sits closer to the top (#5222) The drag area above the sheet's content was a 48px row in the sheet's flex column, pushing everything below it down by its full height and reading as an empty band above the first line of content.

  The bar is now 24px and floats over the content: the scrolling area starts at the sheet's top edge and rides up under the pill, so a heading sits 24px closer to the top. The pill is 4px tall centered in the band, so it occupies only 10-14px from the edge — inside the top padding a content wrapper already provides — and a surface gradient behind it keeps it legible over whatever sits or scrolls beneath.

• BottomSheet: give the sheet one uniform edge against the scrim. Two things were wrong in dark mode. The sheet drew no edge of its own — surface and scrim sit a few RGB steps apart and the --shadow-high drop shadow is black on near-black, so the left and right edges were invisible (measured 1.16:1 boundary contrast in dark against 2.89:1 in light); it now carries a --border-width / --color-border hairline on its three scrim-facing edges, the same treatment MobileNav gives its scrim-facing edge. And under a theme that packs an inset ring into --shadow-high (every bundled theme adds one in dark mode) that ring was painted over by an opaque content wrapper such as Section, so it showed only in the gap below where the content ended and the side edges appeared to change width partway down; the scrolling body now paints the surface across the sheet's whole inner box, hiding the ring evenly (#5305).

• Breadcrumbs: button crumbs keep the link's vertical padding, the variant reaches the item theme targets, and interactive crumbs paint the shared focus ring (#5332)

• DateInput's touch calendar no longer rests between two months (#5319) Swiping the month calendar on iOS could leave it parked a couple of columns into a pane: the left of March and the right of April on screen at once, under one square Sun-to-Sat header, with the title still naming March. The grid was never skewed — the scrollport was simply at rest where no month begins.

  scroll-snap-type: mandatory is supposed to make that impossible, and on a static list it does. This list is virtualized: seven panes exist out of twelve hundred, and the panes ARE the snap areas, so every month the finger crosses mounts one and unmounts another while the fling is still running. iOS scrolls off the main thread — it picks a landing place from the snap points it knows about at that moment, and a React re-render that lands after the decision moves them. The scroller stops where a snap point used to be and nothing re-snaps it. Chrome never showed it because it snaps again after the mutation.

  The rest position is now corrected rather than trusted: once the gesture is genuinely over — touch released, the scroller quiet, AND its offset confirmed unchanged across a frame — a scroller that is off a pane boundary is moved to the nearest one. A scroller the browser snapped for itself is left alone, so nothing extra happens on Chrome, and sub-pixel drift on a fractional viewport is ignored.

  That last condition is what keeps the fix from becoming a worse bug than the one it fixes. A quiet period is not proof of rest: iOS runs its own snap animation for a few hundred milliseconds after the finger lifts and fires scroll events irregularly while it does, so a correction that trusts quiet alone can land mid-animation, round an offset still travelling toward next month back to the month it came from, and reverse the swipe.

• A disabled element answers the pointer with default, never an interactive cursor. Every cursor in core and lab carries ':is(:disabled,[aria-disabled="true"])': 'default', and the reset gives the same cursor to any disabled element that declares none — [aria-disabled] included, which previously got nothing. A lint rule and a Chromium sweep over every story keep it that way. Disabled elements sealed behind pointer-events: none are unchanged: the pointer never reaches them, so their cursor comes from an ancestor — which is why the guarantee is default rather than a distinct disabled cursor the library could only paint on some of them (#5323).

• Disabled elements no longer paint a hover state: every self-:hover in core and lab, and every :hover a theme authors, now carries the zero-specificity guard :hover:where(:not(:disabled,[aria-disabled="true"])), so existing overrides weigh exactly what they weighed before. A lint rule and a Chromium sweep over every story keep it that way (#5247).

• InputClearButton: the clear (✕) affordance now meets the WCAG 2.5.8 AA 24×24 minimum on touch. The shared button rendered a 20px glyph with a 20px tap target, so every input that clears through it — Typeahead, Tokenizer, FileInput and the rest of the family — was under the floor on a phone. An ::after overlay now expands the tappable region to 24×24, gated behind @media (pointer: coarse): on a fine pointer the overlay is not generated at all, because a mouse is precise enough, an unconditional overlay could overlap neighboring controls in dense desktop layouts, and an overlay covering the button would take hover away from the astryx-input-clear-icon theme target. The visual glyph is unchanged at every breakpoint, and the overlay stops at 24px so it stays clear of the 8px adornment gap and the input's own caret area (#4956).

• MobileNav: the drawer now slides in when it opens, instead of only sliding out when it closes. Two things were needed, and each is useless without the other. First, the dialog is display: none while closed, so the drawer's first rendered frame already holds the on-screen transform and a transition has no before-change value to run from — @starting-style supplies it, for the drawer's transform and for the ::backdrop's opacity. Second, the dialog clipped the off-screen drawer with overflow: hidden, which makes it a scroll container; a scroll container in the top layer whose subtree holds another scroller (the drawer's content area) does not paint a @starting-style entry transition for its descendants in Chromium — the transition ticks in the CSSOM while every painted frame shows the end value. overflow: clip clips identically without creating a scroll container. The drawer now slides in from its own edge (mirrored under RTL) and the scrim fades up, both on --duration-medium and both collapsing under prefers-reduced-motion, exactly as the close already did (#5218).

• NumberInput: the number-stepper column now tracks a themed padding and radius instead of assuming the defaults. Theming number-input padding left the steppers short of the field edges (a gap top and bottom), and a themed borderRadius rounded the field while the stepper corners kept the default radius. The wrapper's padding now goes through the shared container expansion, so it is picked up from any spelling a theme writes it in — padding: 14px 20px, paddingBlock, or a single paddingBlockStart — and both the wrapper and the column read the resulting per-side --astryx-number-input-padding-* tokens; an asymmetric paddingBlock: 4px 12px is cancelled correctly at each edge. A themed number-input borderRadius now also reaches --_field-radius, which the column's outer corners follow. Byte-identical by default, and inert for the no-stepper case and every other input (#5181).

• Stop the container padding system at every overlay boundary. Follow-up to #5209, which zeroed --container-padding-* on four overlay roots and closed the visible overflow in #5208 (#5231). Two gaps remained. The variables descendants ADD (--layout-padding-*, and a Section's propagated padding) still crossed the boundary, so an unpadded Section inside an overlay took the page's padding instead of the theme default — 40px where 16px was meant. And Lightbox, ContextMenu and HoverCard were never covered.

  The reset now lives in one place (overlayPaddingReset, exported from @astryxdesign/core/Layout) instead of being hand-copied per overlay, and moved onto the useLayer root, which covers every layer surface at once. Values descendants subtract are zeroed; values they add are cleared to initial so readers fall through to their own default rather than losing their padding.

  Section's padding propagation moved from the public --astryx-section-padding token to a private --_section-padding-propagated. The two carried different authority under one name — a theme's value versus one ancestor's — and an overlay could not drop the inherited one without blanking the theme's. Propagated values still win over the theme for nested sections, so behavior is unchanged. Themes are unaffected: --astryx-section-padding remains the public token and still reaches inside overlays.

• Theming: a physical paddingTop/paddingBottom now reaches the container padding expansion, so card, dialog, section and number-input track it the way they already track the logical spellings. A physical block longhand matched none of the padding property names the expansion recognizes, so it landed raw on the element while the component's internals kept reading the default — the NumberInput stepper column came up ~10px short of the field edges, and container bleed compensated by the wrong amount. Mixing spellings was worse than either alone: padding: '10px' plus paddingTop: '14px' published 10px in the tokens while the element painted 14px on top. padding-top and padding-bottom ARE the block edges in every horizontal writing mode, so this normalization assumes no direction. paddingLeft/paddingRight are deliberately unchanged: they are direction-relative — left is inline-start in LTR and inline-end in RTL — and the tokens are consumed by logical properties, so routing them would silently move the padding to the opposite edge under RTL. They keep their physical meaning, exactly as before (#5244).

• DateInput, DateTimeInput, DateRangeInput, and Calendar now format and parse dates using the ambient InternationalizationProvider locale instead of the host/browser locale. plainDateFormat (backing formatSharedDate) previously called Intl.DateTimeFormat(undefined, ...), and dateParser's day/month disambiguation heuristic for ambiguous numeric input (e.g. 3/4/2026) called Intl.DateTimeFormat() with no locale at all, so a tree wrapped in a non-English locale still formatted and parsed dates using the host locale (#5120).

• Use the InternationalizationProvider locale for sorting, formatting, and speech defaults (#5195)

• RadioListItem: the whole row is now a click target. Clicking the description — or the empty space in a row's hover area — selects the radio, matching CheckboxListItem. Previously only the radio and its label text responded, so the description and surrounding row were dead space. The row delegates surface clicks to the radio input (one tab stop per option preserved), and the radio keeps its accessible name via aria-label (#5143).

• Reset container padding custom properties on overlay elements (BottomSheet, Dialog, MobileNav, Popover) to prevent nested Section components from inheriting ancestor section padding (#5209).

• ResizeHandle: dragging the lower half of a tall handle works again. The invisible grab zone is stretched along the handle, but the offset that biases it onto the pill also carried the pill's own -50% centering shift — so the zone slid half the handle's length off the divider. On a full-height panel at 1440x900 the 16x900 hit box sat at y=-434, leaving everything below the pill's centre dead: a pointerdown on the visible grip's centre, or anywhere lower, started no drag at all. The dead region grew with the panel, and the same shift stranded the grab zone sideways on vertical handles. The bias now moves the zone along the pill's axis only (#5198).

• Opening a Dialog, BottomSheet, Lightbox, or MobileNav no longer shifts the page sideways when the browser has a classic scrollbar (#5219) Locking background scroll hides the document's scrollbar. Where that scrollbar takes layout space — Windows/Linux desktop, and macOS set to always show scroll bars — hiding it widened the layout viewport by its width (~15px), so the whole page reflowed sideways behind the overlay and back again on close.

  Both scroll locks now hold that gutter open with scrollbar-gutter: stable for the duration of the lock, which keeps position: fixed chrome (sticky headers, toast viewports) still as well as in-flow content. Pages with no space-taking scrollbar, and pages that already set scrollbar-gutter themselves, are left alone. Engines without scrollbar-gutter support fall back to padding the measured difference.

• SegmentedControl: keep item labels on a single line, truncating overflow with an ellipsis instead of wrapping to multiple lines (#5035)

• Selector: SelectorOptionData gains description, and the closed trigger now shows the selected option instead of just its label. The two-line option row SelectorOption draws was unreachable from the options prop — the data type carried only value/label/disabled/icon — so consumers kept a side map of descriptions keyed by value and re-rendered the row through renderOption. description now sits on the option data and DefaultOption forwards it. On the trigger, the selected option's own icon renders in the closed state (startIcon still wins when set, so a pinned field icon never doubles up), which retires the app-side startIcon={value === 'x' ? … : …} mirroring of state the component already knows. renderValue is the seam for drawing the selection yourself — the description included (#5202). [feat] Item: new layout prop — 'stacked' (default, unchanged) or 'inline', which keeps the description on the label's line with the description ellipsizing first. The inline row centers its two lines rather than sharing a baseline: two font sizes on one baseline make a line box taller than either line, which would push a fixed-height host off its size token. Every row built on Item gets the axis, SelectorOption included.

  [fix] Selector: the trigger is sized by padding rather than a fixed height, so it is the --size-element-* token for a one-line value (28/32/36) and exactly one text line taller for a two-line one (48/52/56). The token and a text line are both multiples of 4, so every trigger lands on the 4px rhythm and lines up with the Buttons and inputs beside it — and no prop chooses the height, the content does. It previously swapped the fixed height for a minimum whenever renderValue was passed, keyed on the prop being present rather than on the content needing the room: a one-line value measured 39px and a two-line one 58px at every size, so the size prop stopped affecting the trigger at all. Inside an InputGroup, where the group pins the row, the relaxed height did nothing and the content bled 4px through its own border. The group owns the row now and the trigger clamps its own value box to it, so nothing a caller draws can paint over the rows above and below: a SelectorOption folds onto one line and ellipsizes, and any other node is cut off at the row's edge. The trigger also stops asserting a height floor of its own there, so a control sized above its group — <InputGroup size="md"> around a size="lg" control — sits in the group's row instead of growing it. The trigger's line box is pinned to that same token rather than a ratio, so the coarse-pointer font bump — and any theme that changes --font-size-base — grows the glyphs without moving the control off its size token.

• Slider with orientation="vertical" now gets the same 24px touch hit area the horizontal one got: its track was still only 20px wide on coarse pointers, under the WCAG 2.5.8 AA minimum. The whole track is the tap target for both orientations — the fix that floored the horizontal track's block size did nothing for vertical, whose short axis is the inline one — so the inline size is now floored to 24px on touch, with the same @media (pointer: coarse) gate. The rail, fill, marks and thumb all center on the inline 50%, so nothing visible moves and desktop is untouched (#5173).

• @astryxdesign/core/theme/syntax is importable from a server component again: the presets are data, not client references (#5076). The subpath's barrel carried 'use client', and it is the only entry point for the syntax module. React therefore replaced every export with a client reference for a server importer — including dracula, oneLight, allSyntaxPresets, syntaxTokenDefaults and defineSyntaxTheme, none of which need a boundary. Reading a preset in a Next.js server module (deriving a code-block ground, emitting theme CSS at build time) got a proxy instead of data, so preset.tokens was undefined and the failure surfaced far from its cause — the same import under plain Node worked perfectly.

  The directive now sits only on SyntaxTheme.tsx, the provider that actually needs it, so SyntaxTheme and useSyntaxTheme keep their client boundary while the data exports resolve as data. No API change.

• An integration can contribute reference-doc topics: point docs at a root in astryx.integration.* and every {topic}.doc.{ts,mjs,js} under it is served by astryx docs, indexed by astryx search, and named in the agent-docs block, beside the built-in topics. A topic may also declare replaces: '<topic>' to take over an existing one (renaming it leaves the old name resolving as an alias) or extends: '<topic>' to merge onto one section by section. A name that collides without declaring either is an invalid_doc issue rather than a silent override, and validate-integration reports it. (#5311) Also fixes the agent-docs block's topic list, which scanned for \w+ and so silently dropped every hyphenated topic — getting-started, cli-integrations, browser-support, styling-libraries and working-with-ai were missing from every block ever written, and an agent cannot ask for a topic it was never told about.
• Five dashboard page templates: dashboard-cohort-funnel, dashboard-data, dashboard-executive-summary, dashboard-project-status and dashboard-service-monitoring. Each is a complete page — layout, realistic sample data, and the component choices that go with the shape of the data — so astryx template <name> gives you something to edit rather than a blank frame (#5245).

• component built the import specifier for an integration component by joining the package name and the component name, which assumes every component is exported from a subpath named after itself. Components are commonly grouped behind a single entry point named after the concept, so the suggested import pointed at a subpath the package does not export and did not resolve (#4810). The specifier is now resolved against the owning package's exports map, keyed on the directory the component's doc file sits in, and falls back to the package root when that directory is not an exported subpath. A specifier a doc file states for itself is also no longer overwritten.
• The upgrade codemod no longer collapses significant JSX whitespace when it renames an element tag. Renaming <OldName> next to text and a {expression} (e.g. hello {name} world) previously dropped the adjacent space (hello {name}world); element-tag renames are now spliced into the output so the surrounding JSX is left untouched (#5149).
• The XDS-prefix codemod no longer produces a file that will not compile. Dropping the prefix renames XDSButton to Button, but if the file already had a local binding called Button the rewrite collided with it and shadowed one of the two. The import is now aliased instead, so both survive and the file still typechecks (#5225).

Thanks to everyone who contributed to this release:

@cixzhang @ejhammond @ernestt @freddymeta @Geervan @HelloOjasMutreja @imdreamrunner @josephfarina @kentonquatman @nynexman4464 @rubyycheung

Full Changelog: https://github.com/facebook/astryx/compare/v0.4.5...v0.4.6

Astryx 0.4.5 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

• BottomSheet: snapPoints makes the drag-to-resize stops the host's choice. A stop is the sheet's visible height, written as a viewport fraction (0.5), a percentage ('50%'), or a px length ('320px') — matching height, where a bare number is also px and a string carries its unit. Fractions and percentages re-resolve when the viewport changes, so a sheet keeps the stop the user chose across a rotation, and swapping the points under a resting sheet re-anchors it the same way. A stop of a quarter of the sheet or less is a peek: it slides away rather than reflowing into a sliver, and thins the scrim. Taller stops are working surfaces, so they lay their content out and keep the scrim full — previously the shortest stop was always a peek, which would have thinned the backdrop of a half-height sheet (#5203). Behavior change, deliberate and not breaking: every sheet used to carry three built-in stops (14%, 50% and 92% of the viewport), so a drag could leave it resting somewhere the host never asked for. A sheet now opens and closes unless snapPoints says otherwise; pass snapPoints={[0.14, 0.5, 0.92]} to keep the old stops. No prop, type, or DOM output was removed or renamed, and swipe-to-dismiss, the height budgets, and mobile-keyboard accommodation are untouched.

• Astryx ships translations for 28 more locales. packages/core/locales/ went from en and fr-FR to 30 files — Arabic, Catalan, Chinese (Simplified and Traditional), Czech, Danish, Dutch, Finnish, German, Greek, Hebrew, Hungarian, Italian, Japanese, Korean, Norwegian, Polish, Portuguese (Brazil and Portugal), Romanian, Russian, Serbian, Spanish, Swedish, Turkish, Ukrainian, Vietnamese and Afrikaans — covering every @astryx.* message the components announce or display (#5185). Nothing changes unless you ask for it: InternationalizationProvider still defaults to English, and the catalogs are loaded through the existing ./locales/*.json export. An app that already passes a locale now gets translated component strings where it previously fell back to English.

  The catalogs come from Crowdin and are refreshed nightly (#5186), so a translation landing upstream reaches a release without anyone opening a PR by hand.

• DateRangeInput / Calendar: add maxRangeSpan and minRangeSpan to constrain the size of a selected range. Once a start date is picked, days outside the allowed window are disabled — e.g. maxRangeSpan={7} keeps the range within a 7-day window of the start (#5145).

• FormLayout: add defaultOptionality — set a form-wide default ('optional' or 'required') so only the exception carries a visible indicator. Under 'optional' only isRequired fields show one; under 'required' only isOptional fields do; a field that restates the default shows nothing. Under 'required' the unmarked fields also expose aria-required so screen readers match what sighted users see — resolved on aria-required only, never the native required attribute. Unset keeps today's per-field behavior (#4791).

• Add astryx-input-clear-button theme target on the shared clear button wrapper. Themes can now control the clear button's height and hover independently of other ghost buttons — for example suppressing the hover fill or matching a different element size scale (#5093).

• BottomSheet: a pull up from the scroll area now expands the sheet on iOS. Below the tallest detent, dragging up inside the content did nothing on a real device while the grab handle worked — the sheet took the gesture and then froze for the rest of the pull. iOS Safari raises PointerEvents for a finger under the same numeric id it puts in Touch.identifier, so the drag the touch path started was keyed to a live pointer: beginDrag captured that pointer, WebKit handed the capture straight back, and the lostpointercapture a millisecond later cancelled the drag. Touch-driven drags are now marked as such — they take no pointer capture, and lostpointercapture, pointercancel and pointermove for that same finger no longer cancel, end or double-drive them. Browsers that keep the two id spaces apart were never affected, which is why this only showed up on device (#5178).
• Calendar weekday headers now use compact CLDR stand-alone-short names for the selected locale, while preserving the existing Su / Mo / Tu English labels.
• Render generated id attributes on Markdown headings so Outline hash links scroll to their target. Heading slugs now come from parser helpers shared with parseOutlineFromMarkdown, and the components.heading override receives the generated id (#4765).
• StatusDot: pair each variant with a distinct built-in shape drawn from the system's semantic icon vocabulary — success a check, warning an exclamation, error a cross, neutral a ring, accent the plain filled dot — so status no longer relies on colour alone (WCAG 2.1 SC 1.4.1). The shapes mirror the marks Banner/FieldStatus render via defaultIcons, a different axis of consistency from AvatarStatusDot's presence shapes (the two share only the neutral ring, intentionally). The diagonal check and cross take a slightly heavier stroke so they stay crisp and distinct at 8px. Also adds an icon prop for API parity with AvatarStatusDot: a rendered icon replaces the built-in glyph, while booleans and empty renders are ignored so cond && <Icon /> stays safe. The built-in glyphs resolve through the icon registry under scoped statusdot:<variant> keys (the richtext:* precedent), so themes can reshape a variant's mark everywhere via defineTheme({icons}) / registerIcons — including marks for augmented custom variants — while overrides of the standard 24px semantic icons deliberately do not leak into the 8px field. Themes can also target the new stable astryx-statusdot-glyph class and its data-shape attribute — a stroked inline <svg> painted from the dot's currentColor (#4373).
• Table's row-expansion chevron now mirrors correctly under RTL. It previously rotated on expand with no RTL handling at all, so the directional glyph pointed the same way regardless of text direction, matching the pattern already used by TreeListItem's chevron (#5153).

Thanks to everyone who contributed to this release:

@athz @bhamodi @cixzhang @freddymeta @HelloOjasMutreja @imdreamrunner @jiunshinn @nynexman4464

Full Changelog: https://github.com/facebook/astryx/compare/v0.4.4...v0.4.5

Astryx 0.4.4 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

• Promote BottomSheet and BottomSheetSwitcher from the canary-only Lab package to Core. The stable package now includes their existing native-dialog, drag-detent, transition, and mobile-keyboard behavior, plus Core documentation and examples (#5080).

• astryx template --cdn writes a working no-build-step CDN starter page (#5068). A CDN starter is a template, so it joins the template family beside --skeleton rather than claiming a top-level command. It is a flag and not the positional astryx template cdn because the positional resolves against everything discoverAll() finds, where a cdn id would shadow a discovered template. cdn.template.html loads Astryx from jsDelivr and esm.sh with no bundler, no install and no build step, with every CDN URL pinned to the Astryx version you have installed — an unpinned CDN URL resolves to whatever is latest and is cached hard, so a page written today breaks tomorrow without being edited. An existing file is never clobbered; --overwrite replaces it, and --json returns the receipt.

  The annotations are the things that are load-bearing and silent when missing: ?external=react,react-dom (without it esm.sh bundles a second React and every hook throws Cannot read properties of null (reading 'useState')), react/jsx-runtime in the import map (the published bundle imports it; omitting it fails the page with Failed to resolve module specifier), and a font-family on body (nothing in the stylesheets sets a document font, so Button — which is font: inherit — otherwise renders its label in the browser's default serif).

  Three more lessons came out of building a real app on it. The page now <link>s the theme's webfont from Google Fonts, because the theme names Figtree and never loads it, so every viewer silently got the fallback stack (#5015 again). It imports the theme OBJECT and wraps in <Theme theme={neutralTheme} mode="system">, so light and dark follow the OS — the data-astryx-theme attribute alone scopes the stylesheet but cannot switch modes. And #root:empty carries a "Loading…" state, because ESM-from-CDN has real latency and a blank page reads as broken. Markup is htm, with a comment saying it is optional and createElement is the dependency-free alternative.

  A recipe that is only read is a recipe that is only assumed to work, so CI renders it: .github/scripts/cdn-template-smoke-test.mjs scaffolds the page with the real CLI and opens it in headless Chromium, failing on any console error, page error or failed request, and on a page that loads without rendering.

• DateTimeInput: expose date-time-input-toggle-icon (calendar glyph, with open/closed state) and date-time-input-clock-icon (leading time glyph) theme targets, so a theme can size and color the leading icons — matching the date-input-toggle-icon seam DateInput already offers (#5148).

• defineTheme: color.accent accepts a [light, dark] tuple (#2279) ColorScaleConfig.accent now takes either a single hex or a [light, dark] tuple, matching TokenValue. With a tuple, expandColorScale derives the light half of every generated light-dark() pair from the light seed's palettes and the dark half from the dark seed's, so each scheme gets a consistent derived palette (muted, on-accent, neutrals) instead of the tokens['--color-accent'] workaround that skips scale generation. Single-string configs are unchanged, token for token. Also documents the precedence between color and tokens for accent-derived values: tokens entries win token by token, the var(--color-accent) reference tokens follow a --color-accent override at runtime, and the baked --color-on-accent stays derived from the color.accent seed.

• Banner: endContent wraps to its own row on a narrow header instead of squeezing the title to one word per line (#5116).
• BottomSheet: a swipe that scrolls to the end of the sheet's content and keeps pulling now expands the sheet, instead of stopping dead at the last line. The handoff used to be decided once, when the finger landed: a gesture that started mid-content stayed a scroll for its whole life, so the natural motion — swipe up through the list, reach the bottom, keep pulling — never reached the sheet. Reaching the end of the content is now enough. The sheet is anchored at the point where the content ran out, so only the travel past it moves the sheet, and the pull is left to the content when the finger comes back down or when there is no taller detent to expand into (#5172).
• BottomSheet: an upward pull at the bottom of scrolled content no longer hijacks the gesture when the sheet is already fully expanded. It used to hand off to a sheet drag with nowhere to expand to, producing a rubber-band the release threw straight back, and — because the handoff swallows the rest of the gesture — leaving the content unscrollable until the finger lifted, so dragging back down collapsed the sheet instead of scrolling. The bottom edge now hands off only when a taller detent exists (#5161).
• BottomSheet: a sheet resting at a detent now follows the viewport. Its detents were resolved to pixels at gesture time and never revisited, so rotating the device or resizing the window left the sheet frozen at the old geometry — a half-height sheet covering three quarters of a shorter window, and a peek detent whose slide-down could exceed the new viewport entirely, leaving a modal dialog on screen with no sheet in it. Snap fractions are also read from the layout viewport now, so the mobile keyboard no longer moves the detents out from under the sheet it is measuring (#5159).
• BottomSheet keeps the page still when the mobile keyboard reveals a field the browser focused itself (#5158)
• Screen-reader announcements are now localizable. MultiSelector, Selector, Typeahead, FileInput, Tokenizer, and Lightbox spoke several live-region messages in hardcoded English — selection and result counts, file selections, token add/remove, and gallery position — so they stayed English under an InternationalizationProvider. They now resolve through the message catalog like the rest of the UI, and the counts use ICU plurals instead of appending an English "s", so locales with other plural rules read correctly (#4920).
• The editable text fields in Selector, MultiSelector, Typeahead, DateInput, DateTimeInput, TimeInput, and NumberInput no longer misinterpret the keydown that commits or cancels an IME composition (Korean/Japanese/Chinese input) as a command. Previously a composing Enter would select/toggle the highlighted option or commit a typed date, a composing Escape would exit Typeahead's edit mode, and a composing arrow would step a time or number value — all before the composition finished. Each field now lets the IME finish first, matching the guard already in place for BaseTypeahead and the Chat composer (#4908).
• MobileNav: keep the drawer rendered until the native dialog has actually closed (#4290) display was driven by the isOpen prop, which flips during the commit, while dialog.close() only ran afterwards from an effect — so every close called close() on a dialog that was already display: none but still open and still in the top layer, and an open modal dialog blocks the whole document whether or not it is rendered. Safari 26.1 never un-blocked it, leaving the page inert with no JavaScript error. display now takes part in the transition with transition-behavior: allow-discrete, including when React's <Activity mode="hidden"> hides the drawer inside AppShell, and the unmount close moves into its own effect so the deferred close is no longer cut off by its own cleanup. The close delay is derived from the hold in effect rather than assumed, because that hold is --duration-medium — a theme value, which the shipped y2k theme sets to exactly the 250ms the delay used to hard-code.
• Switch with isLabelHidden no longer reserves the label gap. The hidden label is sr-only, but its wrapper stayed a flex item, so the row still painted the 8px gap beside it: the field box measured 8px wider than the track it contains, and a hidden-label switch stopped 8px inside the edge every neighbouring control lined up on. The gap now collapses with the label, so the field is exactly as wide as the painted track — matching CheckboxInput, which already did this (#5112).
• Inputs (statusVariant="tooltip"): the focusable status button now opens its tooltip on hover inside TextArea, whose absolutely-positioned trailing slot is pointer-events: none. Keyboard focus already worked; pointer hover did not (#5147).

• Clear the mechanically fixable ESLint suppressions from the Bottom Sheet promotion: BottomSheet and BottomSheetSwitcher now use the React 19 context APIs (<Context> as provider, use()), the panel drops its duplicate body-element ref in favor of the one the gesture hook already tracks, and useSheetGestures reads prefers-reduced-motion through the shared useMediaQuery subscription so an open sheet follows a preference change (#5155).

• Remove the UMD bundle — it could not work with any React this package supports (#5068). dist/astryx.umd.js is no longer built or published, and with it go the unpkg and jsdelivr package fields, the ./astryx.umd.js export and the build:umd step.

  Nobody has a migration to make, because there was no working configuration to migrate from. The bundle binds Astryx to window.React and window.ReactDOM, and React 19 does not ship a build that defines them: "UMD builds removed: To load React 19 with a script tag, we recommend using an ESM-based CDN such as esm.sh." https://unpkg.com/react@19.2.0/umd/react.production.min.js is a 404 where 18.3.1 is a 200. Our peerDependencies are react >= 19.0.0, so every supported React is one without a global for the bundle to bind to — it documented a path that never had an entrance.

  If you were loading it with an older React anyway, load the same components as modules instead: an import map for react, react/jsx-runtime, react-dom, react-dom/client and @astryxdesign/core (pinned, with ?external=react,react-dom), then one <script type="module">. astryx template --cdn writes that page for you, pinned to your installed version and annotated; the recipe is also in the core README under "No build step (CDN)".

• isImeKeyEvent — the guard that stops an IME composition keystroke being read as a command — now lives at @astryxdesign/core/utils alongside the other pure helpers, with the reasoning for its two signals written down in one place. It stays exported from @astryxdesign/core/hooks for this release but is deprecated there: it is a plain predicate, not a hook, and that barrel is a 'use client' boundary, so importing it from hooks pulls a server-safe function onto a client path. Move imports to @astryxdesign/core/utils; the hooks re-export will be removed in an upcoming major (#4907).

• Promote BottomSheet and BottomSheetSwitcher from the canary-only Lab package to Core. The stable package now includes their existing native-dialog, drag-detent, transition, and mobile-keyboard behavior, plus Core documentation and examples (#5080).

• astryx template --cdn writes a working no-build-step CDN starter page (#5068). A CDN starter is a template, so it joins the template family beside --skeleton rather than claiming a top-level command. It is a flag and not the positional astryx template cdn because the positional resolves against everything discoverAll() finds, where a cdn id would shadow a discovered template. cdn.template.html loads Astryx from jsDelivr and esm.sh with no bundler, no install and no build step, with every CDN URL pinned to the Astryx version you have installed — an unpinned CDN URL resolves to whatever is latest and is cached hard, so a page written today breaks tomorrow without being edited. An existing file is never clobbered; --overwrite replaces it, and --json returns the receipt.

  The annotations are the things that are load-bearing and silent when missing: ?external=react,react-dom (without it esm.sh bundles a second React and every hook throws Cannot read properties of null (reading 'useState')), react/jsx-runtime in the import map (the published bundle imports it; omitting it fails the page with Failed to resolve module specifier), and a font-family on body (nothing in the stylesheets sets a document font, so Button — which is font: inherit — otherwise renders its label in the browser's default serif).

  Three more lessons came out of building a real app on it. The page now <link>s the theme's webfont from Google Fonts, because the theme names Figtree and never loads it, so every viewer silently got the fallback stack (#5015 again). It imports the theme OBJECT and wraps in <Theme theme={neutralTheme} mode="system">, so light and dark follow the OS — the data-astryx-theme attribute alone scopes the stylesheet but cannot switch modes. And #root:empty carries a "Loading…" state, because ESM-from-CDN has real latency and a blank page reads as broken. Markup is htm, with a comment saying it is optional and createElement is the dependency-free alternative.

  A recipe that is only read is a recipe that is only assumed to work, so CI renders it: .github/scripts/cdn-template-smoke-test.mjs scaffolds the page with the real CLI and opens it in headless Chromium, failing on any console error, page error or failed request, and on a page that loads without rendering.

• astryx theme build takes any number of theme files — astryx theme build themes/*.ts compiles them all in one process, so an app with several themes no longer hand-rolls a loop that re-enters the CLI once per theme. Outputs are byte-identical to the serial invocations; the run stops at the first failure and names the theme that failed. The CLI's Node floor (>=22.13) is now declared in engines, so a package manager can enforce it at install instead of the build failing later (#5121).

• defineTheme: color.accent accepts a [light, dark] tuple (#2279) ColorScaleConfig.accent now takes either a single hex or a [light, dark] tuple, matching TokenValue. With a tuple, expandColorScale derives the light half of every generated light-dark() pair from the light seed's palettes and the dark half from the dark seed's, so each scheme gets a consistent derived palette (muted, on-accent, neutrals) instead of the tokens['--color-accent'] workaround that skips scale generation. Single-string configs are unchanged, token for token. Also documents the precedence between color and tokens for accent-derived values: tokens entries win token by token, the var(--color-accent) reference tokens follow a --color-accent override at runtime, and the baked --color-on-accent stays derived from the color.accent seed.

• Bottom Sheet showcase block: the filter checkboxes are interactive again (#5157). CheckboxInput is fully controlled — value is required and the input only moves when the owner updates it. The showcase passed a literal value={false} with no onChange, so the three filters ("In stock", "On sale", "Free shipping") rendered but could never be toggled: on the docs site the first thing a reader tries in a Bottom Sheet does nothing, and anyone copying the block inherits three dead controls. Each filter now has its own useState and onChange, matching the checkbox wiring already used in the Bottom Sheet Switcher showcase.

• An integration whose manifest fails to load is no longer silent. A manifest that throws on import — the common case being one still calling a create* authoring factory, removed in 0.3.0 — contributes nothing, and the CLI treated that as if the package had never been configured: astryx discover answered No integrations configured. while astryx.config.mjs plainly configured one, and no command said a word. The only way to find out was to already suspect it and run validate-integration by name. Meta's internal @nest/xds-meta sat invisible to CLI discovery for a week that way, and the app team's conclusion was that the components did not exist (#5119). The load error now counts as an integration issue, so the existing one-line stderr nudge fires on component, template and upgrade, and discover — the command whose whole job is listing integrations — nudges too, as does search. discover also stops reporting configured: false for a project that configured an integration that failed to load; the empty state now distinguishes "you configured nothing" from "what you configured contributed nothing", which is the distinction meta.configured was introduced to carry.

  Nothing becomes fatal: the warning is best-effort, stderr-only, suppressed under --json, and never changes an exit code. Broken contributions are still skipped exactly as before.

Thanks to everyone who contributed to this release:

@AKnassa @cixzhang @freddymeta @imdreamrunner @jiunshinn @nynexman4464

Full Changelog: https://github.com/facebook/astryx/compare/v0.4.3...v0.4.4

Astryx 0.4.3 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

• New string utilities: characterCount, firstCharacter, and truncateCharacters — replacements for .length, .charAt(0), and slice-based truncation that measure and cut user-visible strings by whole characters, so an emoji, flag, or accented letter counts as one and never gets split. Built on Intl.Segmenter with a code-point fallback.
• ComplexSelector: support ghost toolbar triggers, leading icons, popup alignment, and an imperative handleRef (open/close/toggle/isOpen) for programmatic control.
• useContainerReveal: two ways to control the reveal without reaching into the hook's private custom properties. getContainerProps({hoverDelay}) gates the reveal on pointer dwell — the hover-intent idea Tooltip and HoverCard already have as delay — so a cursor sweeping down a list no longer lights up every row it grazes, and getContainerProps({forceState}) pins the container's trigger state when something else owns the interaction (a scroll, a drag, an open row menu). Per element, getContentRevealProps({forceVisibility}) pins how one child looks regardless of its container. Still CSS-only: no hover state in React, no re-render. Keyboard and touch are untouched — focus always reveals, forceState: 'inactive' and forceVisibility: 'hidden' both yield to :focus-within.

• Banner: a dismissed banner no longer drops focus, a custom status no longer loses its ARIA role, and the info banner paints again under the neutral theme. Dismissing unmounted the focused dismiss button, so focus landed on <body> and a keyboard user lost their place in the page. Banner now records where focus entered from and returns it there, the same handoff ToastViewport makes for a dismissed toast. Measured in Chromium: document.activeElement was BODY, and is now the control the user tabbed in from.

  BannerStatusMap is documented as augmentable, but all four status lookups were closed Record<BannerStatus, ...> maps. Adding the augmentation the docs show produced four TypeScript errors inside Banner.tsx itself, which a consumer cannot fix, and at runtime an unknown status resolved to undefined for its icon, its background and its ARIA role, so the banner stopped being a live region at all. The lookups are partial now: an unrecognized status renders with no status fill, no default glyph and role="status".

  A theme could not reach the banner's radius. --_banner-radius was declared in the doc file and in derivedVarRegistry.ts, but no rule read it, so a theme's borderRadius on the banner target expanded into a variable nothing consumed. The four card-silhouette radii read it now, falling back to --radius-container.

  Under @astryxdesign/theme-neutral the info banner had no background at all, light or dark: the override set background-color directly and forced --color-accent-muted to transparent, and a plain CSS property written by a theme lands in @layer astryx-theme, which StyleX's @layer priority4 outranks. Info now goes through --color-accent-muted like the other three statuses and like the stone theme already did.

  Also in this change: children={false} (the ordinary {cond && <ul/>} idiom) no longer produces an expand toggle that opens an empty box, and description="" no longer leaves an empty 20px row, both via isRenderable; a long unbroken word in the title or description no longer forces the page into horizontal scrolling at a 320px viewport, measured at document.scrollWidth 529px before; and the content area's bottom border uses logical border-block-end alongside its inline siblings.

• Count and cut text the way people read it: the TextArea character counter (and its over-limit state and screen-reader announcements) counts user-perceived characters — an emoji is 1, not 2; PowerSearch token truncation no longer cuts an emoji or accented letter in half; Table's auto-generated headers capitalize astral-plane letters correctly; Avatar's initials now use the shared character utilities.

• ComplexSelector: honor the sm, md, and lg element-height tokens exactly.

• TreeList's variant axis is themeable, and a new guard keeps every extensible axis honest. TreeListVariantMap invites theme packages to add variants — its own JSDoc shows the module augmentation — but themeProps('tree-list', {density}) never passed variant, so a custom variant type-checked, rendered, and produced no selector to style. It is passed now, and documented in the target's visualProps so astryx theme build stops calling it an unknown prop. packages/core/src/theme/extensibleAxes.test.ts is the third theming-drift guard, beside the ones covering targets and vars/derived. Those two check what a component renders against what it documents; neither looked at the open prop unions, which is why this went unnoticed. For every *Map that types a component prop, it now asserts the three places that have to agree: the interface is declared in the index a consumer augments (a re-export is invisible to both module augmentation and the CLI), the prop is reflected through themeProps, and it is documented as a visual prop. It reads the TypeScript AST rather than the type checker, and holds the map's OWNER accountable — a component forwarding actionVariant or statusVariant to the component that owns the map is not separately responsible for it.

  Registry maps that widen a set of NAMES rather than a visual prop (IndicatorMap, IndicatorFamilyMap) are out of scope by construction, not by allowlist: the guard only considers maps whose alias types a prop on a *Props interface.

• Security: reject javascript:, vbscript: and data:text/html URLs in the Markdown parser, so untrusted markdown can no longer produce an executable link href or image src; and fix escapeRegExp in ChatTokenizedText, whose character class closed early and left ] and \ unescaped, so token values containing them were injected raw into a RegExp

• extends now reaches the CSS. A theme that extended another built a stylesheet holding only the declarations it stated itself: the base's tokens, component overrides and surface rules were all absent, and because each theme is @scoped to its own data-astryx-theme value, loading the base's stylesheet alongside could not fill the gap either. Every consumer of an inheritance chain silently got stock geometry, elevation and type with a new palette painted over it (#5067). Nothing warned; the loss only showed up by diffing two generated stylesheets token by token. The cause was theme build shadowing its own inputs. It writes <name>.js next to <name>.ts, and the loader resolved a plain ./<name> specifier to that generated artifact before the source — so the second build of a family read the artifact, which carries no components and exports <name>Theme rather than whatever the source exports. A named import that missed became extends: undefined, and defineTheme treated an absent base as no base at all. The loader now resolves source extensions first, which is also the resolution the author's TypeScript sees, so the CSS a build emits matches the theme that type-checked.

  Three things behind it are fixed too, so the failure cannot come back by another route. defineTheme throws when extends is present but is not a theme, naming the likely cause, instead of inheriting nothing — the one behavior change here, and it turns a silent stylesheet into a build error. A theme's onDark/onLight surfaces and its __inputTokens are now inherited like its tokens and components were, so a child no longer reverts its base's inverted-surface customizations to the defaults or loses its [light, dark] tuples. And a built theme module now carries the resolved components and surfaces alongside its tokens, so extending one — the ./built subpath every shipped theme exposes — is no longer lossy. theme build also stopped hand-picking fields when it re-resolves a plain object theme file, which dropped extends, color and syntax on the way in.

  An extended theme is flat: everything it inherits is resolved into its own output, and its stylesheet stands alone. Measured on a 14-theme family (one base, 13 palettes extending it): each palette went from 25 custom properties and no component rules to the base's full 175 and 70, with its own colours still winning.

• The unloaded-font advisory is a notice, not a warning. A theme file cannot load a font — Astryx sets --font-family-* and loading is the app's job — so #5045's advisory fires on any theme naming a webfont, including a perfectly correct one. As a warning that made a clean build read as defective, and it put the shipped template permanently in violation of its own "compiles with no warnings" guard (#5079 had to allowlist the template's two font names in that assertion). The theme.build receipt now separates the two: warnings are defects the author should fix, notices are advisories about a correct theme. The font advisory moves to notices and to stdout with the rest of the build's progress; stderr stays for defects. The template guard is back to warnings being empty, and no longer needs to know which fonts the template names.

  Programmatic callers reading data.warnings for font advisories should read data.notices; the message text is unchanged.

• extends now reaches the CSS. A theme that extended another built a stylesheet holding only the declarations it stated itself: the base's tokens, component overrides and surface rules were all absent, and because each theme is @scoped to its own data-astryx-theme value, loading the base's stylesheet alongside could not fill the gap either. Every consumer of an inheritance chain silently got stock geometry, elevation and type with a new palette painted over it (#5067). Nothing warned; the loss only showed up by diffing two generated stylesheets token by token. The cause was theme build shadowing its own inputs. It writes <name>.js next to <name>.ts, and the loader resolved a plain ./<name> specifier to that generated artifact before the source — so the second build of a family read the artifact, which carries no components and exports <name>Theme rather than whatever the source exports. A named import that missed became extends: undefined, and defineTheme treated an absent base as no base at all. The loader now resolves source extensions first, which is also the resolution the author's TypeScript sees, so the CSS a build emits matches the theme that type-checked.

  Three things behind it are fixed too, so the failure cannot come back by another route. defineTheme throws when extends is present but is not a theme, naming the likely cause, instead of inheriting nothing — the one behavior change here, and it turns a silent stylesheet into a build error. A theme's onDark/onLight surfaces and its __inputTokens are now inherited like its tokens and components were, so a child no longer reverts its base's inverted-surface customizations to the defaults or loses its [light, dark] tuples. And a built theme module now carries the resolved components and surfaces alongside its tokens, so extending one — the ./built subpath every shipped theme exposes — is no longer lossy. theme build also stopped hand-picking fields when it re-resolves a plain object theme file, which dropped extends, color and syntax on the way in.

  An extended theme is flat: everything it inherits is resolved into its own output, and its stylesheet stands alone. Measured on a 14-theme family (one base, 13 palettes extending it): each palette went from 25 custom properties and no component rules to the base's full 175 and 70, with its own colours still winning.

• The /built entry now loads under Node ESM and externalized SSR (Vite --ssr, Remix / React Router v7): it imports ./icons.mjs instead of the extensionless ./icons Node cannot resolve.

• The /built entry now loads under Node ESM and externalized SSR (Vite --ssr, Remix / React Router v7): it imports ./icons.mjs instead of the extensionless ./icons Node cannot resolve.

• The /built entry now loads under Node ESM and externalized SSR (Vite --ssr, Remix / React Router v7): it imports ./icons.mjs instead of the extensionless ./icons Node cannot resolve.

• The /built entry now loads under Node ESM and externalized SSR (Vite --ssr, Remix / React Router v7): it imports ./icons.mjs instead of the extensionless ./icons Node cannot resolve.

• Banner: a dismissed banner no longer drops focus, a custom status no longer loses its ARIA role, and the info banner paints again under the neutral theme. Dismissing unmounted the focused dismiss button, so focus landed on <body> and a keyboard user lost their place in the page. Banner now records where focus entered from and returns it there, the same handoff ToastViewport makes for a dismissed toast. Measured in Chromium: document.activeElement was BODY, and is now the control the user tabbed in from.

  BannerStatusMap is documented as augmentable, but all four status lookups were closed Record<BannerStatus, ...> maps. Adding the augmentation the docs show produced four TypeScript errors inside Banner.tsx itself, which a consumer cannot fix, and at runtime an unknown status resolved to undefined for its icon, its background and its ARIA role, so the banner stopped being a live region at all. The lookups are partial now: an unrecognized status renders with no status fill, no default glyph and role="status".

  A theme could not reach the banner's radius. --_banner-radius was declared in the doc file and in derivedVarRegistry.ts, but no rule read it, so a theme's borderRadius on the banner target expanded into a variable nothing consumed. The four card-silhouette radii read it now, falling back to --radius-container.

  Under @astryxdesign/theme-neutral the info banner had no background at all, light or dark: the override set background-color directly and forced --color-accent-muted to transparent, and a plain CSS property written by a theme lands in @layer astryx-theme, which StyleX's @layer priority4 outranks. Info now goes through --color-accent-muted like the other three statuses and like the stone theme already did.

  Also in this change: children={false} (the ordinary {cond && <ul/>} idiom) no longer produces an expand toggle that opens an empty box, and description="" no longer leaves an empty 20px row, both via isRenderable; a long unbroken word in the title or description no longer forces the page into horizontal scrolling at a 320px viewport, measured at document.scrollWidth 529px before; and the content area's bottom border uses logical border-block-end alongside its inline siblings.

• The /built entry now loads under Node ESM and externalized SSR (Vite --ssr, Remix / React Router v7): it imports ./icons.mjs instead of the extensionless ./icons Node cannot resolve.

• The /built entry now loads under Node ESM and externalized SSR (Vite --ssr, Remix / React Router v7): it imports ./icons.mjs instead of the extensionless ./icons Node cannot resolve.

• The /built entry now loads under Node ESM and externalized SSR (Vite --ssr, Remix / React Router v7): it imports ./icons.mjs instead of the extensionless ./icons Node cannot resolve.

Thanks to everyone who contributed to this release:

@AKnassa @cixzhang @ernestt @Sunil56224972

Full Changelog: https://github.com/facebook/astryx/compare/v0.4.2...v0.4.3

Astryx 0.4.2 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

• AvatarGroup: expose size on the avatar-group-overflow theming target so themes can style the "+N" overflow chip per size (matching avatar-fallback); the default chip font is unchanged (#5046).

• Chat: ChatMessageBubble accepts a width prop (numbers are pixels, strings pass through, e.g. width="100%"), following the sizing convention on Card and other containers. When set it replaces the bubble's default max(80%, 280px) width cap; when unset nothing changes. Combined with variant="ghost", custom in-message content (an artifact card, attachment chips, a standalone ChatMessageMetadata) can now align with the bubble's text column at the full message-column width — previously the only workaround was hardcoding the bubble's private padding token at every call site. (#2574)

• astryx theme template writes an annotated theme template into your project (#5048). New sibling of theme add: where add starts you from a theme we ship, template starts you from a blank annotated one. astryx init --features theme calls the same leaf, so project setup writes it too — it previously printed a one-line hint and wrote nothing, which is the weakest form of the help a theme author needs, since the first problem is not knowing the command but not knowing what the theme surface contains. The file is theme.template.ts: every defineTheme field with a note on when to reach for it, the token families, the component override syntax, and the consumption steps (providing the theme, loading the fonts you name, building for SSR), each section naming the CLI command that prints its authoritative reference. An existing file is never clobbered.

  This came out of a vibe test (#5047): agents given an annotated template reached twice as far into the theme surface as agents given only the docs (17 component targets vs 8, and the only arm to use interaction states, custom variants and onDark), and shipped a third of the contrast defects.

  A template that lies is worse than no template, so its claims are machine-checked against live sources rather than trusted: scripts/check-theme-template.test.mjs fails when a defineTheme field is added and left undocumented, when a token family is missing from the inventory, when a CSS variable or component key it names does not exist, when it cites a docs topic that does not, or when a theme source drops its SYNC reference. theme build compiles it warning-free in CI, and the CLI typecheck now covers it.

• Avatar: put the avatar box on the element that carries the astryx-avatar theme target, so a theme rule on the documented size axis resizes the whole avatar instead of growing the wrapper around a fixed-size circle; treat a whitespace-only name or alt as absent, so it falls through to the default icon rather than rendering an empty plate behind a blank accessible name; warn through the shared useDevWarning hook rather than a bare console.warn in the render body; and replace the phantom <OnlineIndicator /> in the JSDoc example with the real AvatarStatusDot (#5030)

• CommandPaletteFooter: wire default keyboard-hint strings through useTranslator so they resolve from the locale catalog instead of being hardcoded English (#4506)

• context-menu component overrides now drive the menu's internal radius and padding vars. ContextMenu.doc.mjs has always documented derived entries mapping borderRadius → --_dropdown-menu-radius and padding → --_dropdown-menu-padding, but derivedVarRegistry had no context-menu key, so the mapping was dead: components: {'context-menu': {base: {borderRadius: '12px'}}} emitted border-radius alone and the menu kept reading its own var(--_dropdown-menu-radius). The registry entry now matches the doc, as it already does for dropdown-menu (#4783).

• useFocusTrap: a modal surface with no tabbable controls keeps its programmatic focus target instead of letting Tab escape into the page behind it. A dialog that places initial focus on a tabIndex={-1} heading or panel had nowhere to advance to, so Tab walked straight out of the trap. @astryxdesign/core/hooks also exports hasActiveFocusTrapEscape and isImeKeyEvent, which coordinate nested traps and skip IME composition keys (#5023).

• Heading's type is a documented theming target, and the docs stop teaching a CSS variable that does not exist (#5016). Heading reflects type as a theme selector — typography.scale generates heading: {'type:display-1' …} rules for it — but theming.targets listed only level and color, so astryx theme build warned Unknown prop "type" on component "heading" on every theme that sets a type scale, including the shipped neutralTheme. The drift guard missed it twice over: it read a conditional spread ({level, color, ...(type && {type})}) as an unknown bag, and it only checked a component against a doc file in its own directory, so Heading/ — documented from Text/Text.doc.mjs — was never checked at all. Both are fixed, which brings three more previously unchecked directories under the guard.

  Separately, the theme docs' component-override example set --button-press-scale, which no component defines: copying it produces CSS that silently never applies. It now sets a real public var, and the example no longer declares the same button key twice.

• DateTimeInput: the focused-and-empty time placeholder hints ("e.g., 2:30 PM" / "e.g., 14:30") now route through the i18n translator so they localize with the rest of the component. Adds @astryx.dateTimeInput.timeHint12h and @astryx.dateTimeInput.timeHint24h to the en catalog. The live-region "Invalid date" / "Invalid time" announcements this PR also covered landed first in #4363 and now reuse that PR's @astryx.dateInput.invalidDate and @astryx.timeInput.invalidTime keys. (#4546)

• Floating layers now declare their own body type instead of inheriting it. The layer container already set font-family; it now sets font-size and line-height from --text-body-size / --text-body-leading alongside it. A layer is hosted wherever its trigger sits, so any content that did not set its own size took the ambient one — the same Tooltip, Popover or HoverCard rendered at 13px from a caption and at 20px from a lede. Content that goes through Text, or sets a size itself (Tooltip's label, DropdownMenu items, NavMenu headings), is unaffected: those already declared their own and still win. Anything that was relying on inheriting a non-body size now renders at the body size and should set one explicitly (#5064).

• Added a @astryx.listInput.* catalog namespace to packages/core/locales/en.json so the lab ListInput component's action labels, empty state, reorder instructions, and live announcements can be translated. ListInput previously hardcoded every visible and assistive-technology-facing string (#4967).

• Layer: use an inert <template> marker to find each context layer's actual JSX position. Safe positions stay inline; positions inside a paragraph, link, button, inline formatting, or a structurally restricted container portal to the nearest safe ancestor. Corrective portals keep CSS custom properties inheriting from that nearby host while preserving direction and writing mode, and show() passes the trigger as the popover's invoker source. The new lazyMount option waits until opening to resolve and mount content; HoverCard uses it so rich content never enters an invalid paragraph during initial render and unmounts again when hidden. Other context layers keep their existing closed-content behavior (#5039).

• Two guards left failing on main by their own landings, so every PR since has been red through no fault of its own. #4963 gave Thumbnail's remove button a coarse-pointer hit-area var and did not document it, which the derived-var guard reads as an undocumented private var; the var is an inset on a ::after overlay, so it is documented as private and listed alongside the other vars no standard CSS property maps onto. #5026 moved borderDefaults into CoreTokenName — the landing the theme-template guard was explicitly waiting for (its comment says "when #5017 lands, this guard starts requiring the template to cover it") — so the template's token inventory now names --border-width.

• Menus that open on hover no longer close when you click them. A hover-opened menu is already open under the cursor by the time the pointer arrives, so the click that naturally follows was dismissing it — fixed for TopNavMegaMenu in #4555, and now shared: the hover→click guard lives in useMenuHover, so TopNavMenu, TopNavHeading, SideNavHeading and DropdownMenuSubMenu get it too, and TopNavMegaMenu runs on the shared machine instead of its own copy. Also from the consolidation: opening a menu moves focus into it synchronously rather than a frame later, closing one returns focus to its trigger instead of dropping it to the document, and keyboard activation always opens rather than toggling an open menu shut (#3121)

• SideNav: a hardening pass over the family, driven by the component audit. Accessibility, theming, passthrough and code-health defects across SideNavItem, SideNavHeading, SideNavSection, SideNavCollapseButton and the navItemStyles module the TopNav drawer modes share — the motion guards, the untranslated flyout name, the hand-rolled visually-hidden block, the dropped ...rest, the missing theming state, the uncleaned timers, and the hand-rolled hover intent, which is now the shared useMenuHover. Nav rows also adopt the shared focus outline from #4654, so a keyboard-focused row is ringed with the system's 2px --color-accent at 3px offset in every theme instead of falling through to the browser's own ring; in a split-action row the link and the chevron toggle are ringed individually, since they are separate tab stops. Three visual fixes came out of review. The collapsed submenu flyout was painting a second, square-cornered surface inside the popover's rounded one, and insetting its own content by 4px instead of standing off the rail — both gone, with the gap moved to the positioned layer where DropdownMenu keeps it. The selected row now survives forced-colors: active: it marked the current page with a 6% background tint, which forced colors flatten away entirely, and it now paints Highlight/HighlightText like ToggleButton and SegmentedControlItem. And the footer icon row comes out one size, with the collapse chevron centred rather than seated 2.42px high on a stray text baseline.

  Four changes are visible to a consumer. Hover on a collapsed item's flyout is now gated on (hover: hover) and only closes on mouseleave if hover opened it, and a click-to-dismiss no longer springs back open under a stationary pointer. The footer icon rows cascade a sm size through SizeContext, so an unsized Button passed to footerIcons now matches the built-in collapse button instead of rendering a size larger — pass an explicit size to opt out. SideNavCollapseButton takes a size, for placements outside the nav that have no row to inherit from. And SideNavCollapseButton takes the controlled collapsible config — the same {isCollapsed, onCollapsedChange} object handed to SideNav — which is how a button rendered outside the sidenav now stays in step with it. handleRef on both components is deprecated in its favour: the state the consumer already owns reaches the button through props, with no imperative handle in between.

• Slider: the thumb no longer overhangs the component's own box at min and max. It was centred on the container edge at either extreme, leaving half of it (10px) outside the control, where a tight container clipped it or it overlapped the next element. Thumb travel is now inset by half a thumb at each end — the geometry a native input[type=range] uses — and the fill, the marks and the pointer-to-value mapping share that inset, so the thumb also stays under the pointer that grabbed it instead of jumping by up to half its width. Vertical sliders and both thumbs of a range slider are fixed the same way (#5051).

• Interactive controls meet the WCAG 2.5.8 AA 24px minimum on touch. The Slider track (20px tall, and clickable along its whole length) floors its block size to 24px, Thumbnail's remove button grows its tappable area through a ::after overlay, and sm CheckboxInput, RadioListItem and Switch floor to a 24px target centred on the control. All of it is gated on @media (pointer: coarse), and only the invisible tappable area changes — rails, thumbs and glyphs stay exactly where they were, and fine-pointer rendering is untouched (#4963, #4964).

• Ten private (--_*) component theming vars are now documented in their owning component's theming.vars[]: --_avatar-group-overlap, --_card-elevation, --_card-ring, --_codeblock-gutter-width, --_item-label-color, --_item-description-color, --_tab-indicator-bottom, --_tree-indent (plus --_dropdown-menu-radius/--_dropdown-menu-padding, which Breadcrumbs sets on a child menu). They were declared in source and described nowhere, because the drift guard skipped the --_ prefix outright (#4783).

• astryx theme build warns when a theme names fonts it does not load. The resolved --font-family-* tokens and component-override fontFamily values are checked against CSS generics and known system families; anything else gets one warning per family in the receipt and, after the install instructions, the <link>/@font-face snippet to add. astryx docs typography gains a Loading Custom Fonts section (Google Fonts and self-hosted recipes, font-display: swap, real fallback stacks), and the theme docs' production-build section points at it (#5015).

• astryx theme template writes an annotated theme template into your project (#5048). New sibling of theme add: where add starts you from a theme we ship, template starts you from a blank annotated one. astryx init --features theme calls the same leaf, so project setup writes it too — it previously printed a one-line hint and wrote nothing, which is the weakest form of the help a theme author needs, since the first problem is not knowing the command but not knowing what the theme surface contains. The file is theme.template.ts: every defineTheme field with a note on when to reach for it, the token families, the component override syntax, and the consumption steps (providing the theme, loading the fonts you name, building for SSR), each section naming the CLI command that prints its authoritative reference. An existing file is never clobbered.

  This came out of a vibe test (#5047): agents given an annotated template reached twice as far into the theme surface as agents given only the docs (17 component targets vs 8, and the only arm to use interaction states, custom variants and onDark), and shipped a third of the contrast defects.

  A template that lies is worse than no template, so its claims are machine-checked against live sources rather than trusted: scripts/check-theme-template.test.mjs fails when a defineTheme field is added and left undocumented, when a token family is missing from the inventory, when a CSS variable or component key it names does not exist, when it cites a docs topic that does not, or when a theme source drops its SYNC reference. theme build compiles it warning-free in CI, and the CLI typecheck now covers it.

• Heading's type is a documented theming target, and the docs stop teaching a CSS variable that does not exist (#5016). Heading reflects type as a theme selector — typography.scale generates heading: {'type:display-1' …} rules for it — but theming.targets listed only level and color, so astryx theme build warned Unknown prop "type" on component "heading" on every theme that sets a type scale, including the shipped neutralTheme. The drift guard missed it twice over: it read a conditional spread ({level, color, ...(type && {type})}) as an unknown bag, and it only checked a component against a doc file in its own directory, so Heading/ — documented from Text/Text.doc.mjs — was never checked at all. Both are fixed, which brings three more previously unchecked directories under the guard.

  Separately, the theme docs' component-override example set --button-press-scale, which no component defines: copying it produces CSS that silently never applies. It now sets a real public var, and the example no longer declares the same button key twice.

• Two guards left failing on main by their own landings, so every PR since has been red through no fault of its own. #4963 gave Thumbnail's remove button a coarse-pointer hit-area var and did not document it, which the derived-var guard reads as an undocumented private var; the var is an inset on a ::after overlay, so it is documented as private and listed alongside the other vars no standard CSS property maps onto. #5026 moved borderDefaults into CoreTokenName — the landing the theme-template guard was explicitly waiting for (its comment says "when #5017 lands, this guard starts requiring the template to cover it") — so the template's token inventory now names --border-width.

• MobileNavToggle preview simulates a mobile AppShell instead of an empty stage: new playground.appShellMobile for components that render nothing without AppShell mobile context (#4983)

• --radius-none no longer overrides to 0.125rem. --radius-none and --radius-full are documented as always fixed (never scaled by a theme), matching @astryxdesign/core's own defaults — each of these themes' radius group bumps swept --radius-none along with it by mistake, the same bug fixed for theme-neutral in #4856. Anything opting out of rounding via --radius-none under these themes now renders with a true 0px radius again, instead of a silent 2px.

• --radius-none no longer overrides to 0.125rem. --radius-none and --radius-full are documented as always fixed (never scaled by a theme), matching @astryxdesign/core's own defaults — each of these themes' radius group bumps swept --radius-none along with it by mistake, the same bug fixed for theme-neutral in #4856. Anything opting out of rounding via --radius-none under these themes now renders with a true 0px radius again, instead of a silent 2px.

• --radius-none no longer overrides to 0.125rem. --radius-none and --radius-full are documented as always fixed (never scaled by a theme), matching @astryxdesign/core's own defaults — each of these themes' radius group bumps swept --radius-none along with it by mistake, the same bug fixed for theme-neutral in #4856. Anything opting out of rounding via --radius-none under these themes now renders with a true 0px radius again, instead of a silent 2px.

• --radius-none no longer overrides to 0.125rem. --radius-none and --radius-full are documented as always fixed (never scaled by a theme), matching @astryxdesign/core's own defaults — each of these themes' radius group bumps swept --radius-none along with it by mistake, the same bug fixed for theme-neutral in #4856. Anything opting out of rounding via --radius-none under these themes now renders with a true 0px radius again, instead of a silent 2px.

Thanks to everyone who contributed to this release:

@AKnassa @cixzhang @freddymeta @HelloOjasMutreja @imdreamrunner @is-jain @jiunshinn @rubyycheung

Full Changelog: https://github.com/facebook/astryx/compare/v0.4.1...v0.4.2

Astryx 0.4.1 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

• The keyboard focus ring is now a theme token. --focus-outline-width, --focus-outline-style, --focus-outline-color and --focus-outline-offset drive every ring in core and lab, so one override in a theme's tokens restyles focus system-wide; the color tracks --color-accent unless a theme sets it. The :focus-visible condition is not themeable, so a themed ring still cannot appear for pointer users (#4973). Every ring is now drawn from the shared focus-outline utility rather than written out per component, and a lint rule keeps it that way. Two corrections come with that: the rings that had drifted to a 2px offset (Slider, Switch, Lightbox, ProgressBar, and lab's InfoTip, Step and LogStream) now sit at the documented 3px, and the buttons inside a field — the Date, DateRange and DateTime calendar toggles, the DateRange presets, and the Selector and MultiSelector status buttons — draw the standard 2px ring instead of a 1px one.
• AspectRatio, Badge, Blockquote, Card, Center, Code, Grid, Section, Skeleton and VisuallyHidden no longer carry 'use client' (#823). Each was verified against its transitive import graph to use no React client API, no client-only dependency and no module-level mutable state, so they can now render in a React Server Component without forcing a client boundary. A new serverSafeComponents.test.ts derives the server-safe set from the import graph and fails if one of these components later gains a client dependency without restoring the directive — including the transitive case scripts/check-use-client.mjs cannot see. Not a breaking change: no prop, type or export changed, and 'use client' is inert outside an RSC bundler. Client consumers keep working identically, though bundlers may lay these modules out in different chunks now that they are no longer client entry points.
• Selector and MultiSelector: indicatorPosition places the selection indicator on either edge of the option row — start or end, logical, so it follows RTL. Defaults keep today's rendering (end for Selector's check, start for MultiSelector's checkbox); a start-positioned check reserves its column on every row so labels stay aligned (#4993).

• TimeInput: announce arrow-key time stepping via the polite live region (also in DateTimeInput), localize the "Invalid date"/"Invalid time" live-region messages through the i18n catalog, and use long timezone names in Timestamp's AT-facing aria-label while keeping the short form visible (#4363)

• Banner: the 'banner-icon' theme target now rides on the default status Icon itself instead of its layout wrapper, so theme component overrides ('banner-icon' + 'status:X') that set color actually reach the glyph. The Icon keeps its existing color variant (info still renders accent) and same-element rules in @layer astryx-theme win over it, so default rendering is unchanged. Contract note: '.astryx-banner-icon' now matches the icon element rather than the wrapper when the default icon renders; a theme that used the target for wrapper layout (margin, alignment) now styles the glyph instead. With a custom icon node the target stays on the layout-only wrapper, since core never injects props into consumer elements (#4166)

• CommandPalette: discard in-flight search responses when the palette closes (#3896) Closing the palette while a search was still in flight let the late response re-commit the abandoned query and results into the closed palette, which showed up as a ghost query on reopen. Closing now invalidates any pending request.

• FileInput: validation messages, default placeholder, drag hint, and file-selected announcements now go through the i18n translator instead of hardcoded English. DropdownMenuRadioGroup: consumer xstyle prop is composed into styles instead of being dropped (#4589).

• The popup theme targets added in #4991 sat on the wrong element. astryx-complex-selector-popup and astryx-multi-selector-popup were rendered on each component's own content box — the one with the padding and the scroll — while the element that paints the popup's background, radius and elevation is the surface usePopover creates one level above it. A theme reaching for those classes to restyle a popup got a rule that could not paint it. Both now land on the surface, so they do what they were documented to do. Selector gains the matching astryx-selector-popup, which its sibling MultiSelector had and it did not.

  New: every popup surface carries the shared astryx-popover-surface class, so a theme can style all of them at once, and usePopover accepts a surfaceTarget naming the surface for a component that wants its own target there. A component cannot do this for itself — the surface belongs to usePopover, so any class it renders itself lands inside.

• Selector's menu now clears the trigger by the standard --spacing-1 gap whenever it is not overlaying it — every explicit placement, and search mode. It was the only anchored menu in the system sitting flush against its anchor; DropdownMenu, MultiSelector, ComplexSelector, Popover, and Tooltip all use this clearance. The default selected-item overlay is unchanged: it owns its block geometry and is meant to sit on the trigger (#5003).

• Selector, MultiSelector: the dropdown panel's search field is now part of the panel instead of a bordered input dropped into it. The panel is already a bordered, elevated surface, so the nested TextInput drew a box inside a box; the row now renders a leading magnifier, a borderless input, and the shared clear (✕) button, with a full-bleed divider between it and the options — the same shape the command palette already uses. Focus is shown as an inset ring on the row, rounded to the panel's own corners. Section titles move from labeled dividers to plain secondary headings, matching DropdownMenu and CommandPaletteGroup, and MultiSelector no longer draws a rule under select-all. Behavior, keyboard handling, and accessible names are unchanged; MultiSelector's search row additionally stays put while the options scroll under it. New theme targets: astryx-selector-search, astryx-selector-section-heading, astryx-multi-selector-search, astryx-multi-selector-section-heading; anything that styled the dropdown search through astryx-text-input needs to move to those.

• TableRow: honor className and style on the <tr>. TableRowProps extends BaseProps, but both were spread before mergeProps() and then overwritten by the component's own StyleX classes, so a consumer's values silently had no effect. They are now merged through mergeProps() alongside the row's StyleX styles, the same way TableCell and TableHeaderCell already handle them, in both the in-Table and standalone rendering paths. The Astryx theme classes and striped/hover styling are unchanged (#4391).

• astryx theme build no longer warns Unknown prop for documented state override keys. Component docs declare state-driven selectors under theming.targets[].states (radio → checked/disabled, calendar-day → today/selected, …), but override validation only loaded visualProps, so the state syntax the Theming Infrastructure wiki documents — components: {radio: {checked: {...}}} — warned on every build. The CSS was always generated correctly; only the warning was wrong. 30 targets across core were affected (#4778).

Thanks to everyone who contributed to this release:

@AKnassa @arham766 @bhamodi @cixzhang @Eloitor @jiunshinn

Full Changelog: https://github.com/facebook/astryx/compare/v0.4.0...v0.4.1

Astryx 0.4.0 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

• DropdownMenu's two item modes are peers again. Compound mode gains a DropdownMenuDivider component (aliased as ContextMenuDivider and BreadcrumbMenuDivider), which the data path also renders, so {type: 'divider'} and <DropdownMenuDivider /> produce identical DOM, spacing, and theme target. Data mode gains endContent and description, so an items row can carry a shortcut hint or secondary text without dropping to compound mode. Its label widens from string to ReactNode, matching compound mode: the narrowing existed only because rows were keyed by label, and they no longer are (#4953). The bare names now belong to those components, so the data-mode option types take the Data suffix their sibling DropdownMenuItemData already carries: DropdownMenuDivider → DropdownMenuDividerData, ContextMenuDivider → ContextMenuDividerData, BreadcrumbMenuDivider → BreadcrumbMenuDividerData. TypeScript cannot re-export a value and a type under one name from a single barrel, so the rename is what makes the components exportable at all. Run astryx upgrade --apply to rewrite the type imports; a missed one fails at compile time rather than silently.
• Remove the dropdown-menu-radio-dot theme target. Menu radio rows draw the shared radio indicator now, so the dot is the indicator's dot: target radio-indicator-dot (the legacy radio-dot name still matches it too). The row's circle keeps its dropdown-menu-radio target, so only the dot moved. (#4890) Runtime themes are not validated — a theme keyed on the removed target keeps compiling and silently stops matching — so astryx upgrade now carries rename-dropdown-menu-radio-dot-target, which rewrites the key and the astryx-dropdown-menu-radio-dot class. The new target is app-wide rather than menu-only (there is no menu-only dot element left to address), so the codemod leaves a TODO at each site it rewrites.
• useTableRowExpansion is now a detail-panel plugin: it expands a full-width panel below a row via renderExpanded(item), and useTableRowExpansionState is removed. For hierarchical/tree tables (child rows that reuse the parent columns), migrate to useTableTreeData + useTableTreeState. See the migration example on the useTableRowExpansion docs. (#4609) Codemod: npx astryx upgrade --apply runs migrate-table-rowexpansion-to-tree, which rewrites tree-mode useTableRowExpansion call sites onto useTableTreeData + useTableTreeState.

• Avatar: the fallback surface (initials and default icon) is now a direct theme target via the stable astryx-avatar-fallback class. Theme its background, text color, font weight, and per-size font size through the avatar-fallback component key (e.g. components: { 'avatar-fallback': { base: { backgroundColor: '...' }, 'size:sm': { fontSize: '...' } } }), replacing the internal --_avatar-fallback-* derived vars. (#4716)

• CodeBlock: the built-in copy button is now a themeable ghost IconButton with a default "Copy code" tooltip, reachable via the stable astryx-codeblock-copy-button class (theme it through the codeblock-copy-button component key). Restyle or keep the copy control without turning it off and re-implementing it. The tooltip stays "Copy code" after copying — the copy→check icon flip is the confirmation. (#4867) [feat] New useClipboard hook (@astryxdesign/core/hooks): the shared copy-to-clipboard behavior — clipboard write, a transient isCopied flag with its reset timer, and an optional polite screen-reader announcement. CodeBlock and Timestamp now build their copy buttons on it; reach for it directly for copy affordances that are not a plain icon button.

• CodeBlock: add codeblock-header and codeblock-title theme targets on the header row and the title/language-label element. A theme can now restyle the header (e.g. padding) and the title (e.g. font size) directly, instead of reaching them through structural > div:first-child > div > span selectors that reverse-engineer the header layout. Both reflect the size/language(/container) visual props like the root. (#4943)

• DateInput, DateRangeInput, and DateTimeInput now accept a weekStartsOn prop that sets the first day of the week in the calendar popover (0 = Sunday … 6 = Saturday, or a three-letter day name like "mon"). It forwards to the underlying Calendar, whose default stays Sunday, so existing usage is unchanged. (#4745)

• Selector, MultiSelector and Typeahead expose their empty ("No results found") state as a themeable target (#4756, #4862) — astryx-selector-empty-state, astryx-multi-selector-empty-state and astryx-typeahead-empty-state. Themes can restyle the empty state without the fragile structural selectors consumers previously had to reach for. (The Selector search field is a TextInput, so its placeholder is reachable today via .astryx-text-input::placeholder; a Selector-scoped placeholder seam would require a TextInput change and is left as a possible follow-up.)

• EmptyState: add empty-state-title and empty-state-description theme targets on the title heading and the description. A theme can now restyle the title and description directly (e.g. font size, color, per variant) instead of reaching them through structural > div:has(> :is(h1..h6)) selectors that reverse-engineer which element is which. (#4942)

• Every clearable input now renders its clear (✕) affordance through the shared InputClearButton, so the glyph is themeable in one place via the astryx-input-clear-icon target instead of a per-component target or a fragile descendant selector. The component-specific astryx-{date-input,date-range-input,selector,multi-selector}-clear-icon targets still render for a deprecation window — migrate to input-clear-icon. The clear glyph is now a consistent secondary-color icon with a ghost-button hover affordance across the whole family. (#4876)

• The input family (TextInput, NumberInput, DateInput, DateRangeInput, DateTimeInput, TimeInput, TextArea, Tokenizer) now reflects its disabled state on the root theming target as data-disabled="disabled" plus a .disabled variant (only when disabled), so a theme can gate its own hover/border treatment on the disabled state — mirroring the existing status/size reflection — instead of relying on structural :has(input:disabled) CSS. This closes a documented theming gap for downstream consumers. (#4794)

• useLayer takes an offset for clearance from the anchor, derived from the resolved placement, and the layer wrappers stop hand-rolling it (#4803)

• DropdownMenu rows take two new options (#4953). DropdownMenuItem takes hasCloseOnSelect, so a plain action can report its result on the item instead of closing the menu. DropdownMenuItemData and DropdownMenuSection take an optional id, the row's stable React key for a menu whose items reorder or filter (also reaching MoreMenu, ContextMenu and Breadcrumbs, which share the type).

• DropdownMenuItem now accepts a variant prop ('default' | 'destructive'); 'destructive' renders the label, description, and icon in the error color for dangerous actions like Delete. The data-driven items API accepts the same variant field, and because ContextMenu shares the menu-item data shape, context-menu items get it too. Defaults to 'default', so existing menus are unchanged. (#4753)

• MultiSelector: dropdown option rows are themeable through a single (#4628) multi-selector-option target, carrying the row's size and its select-all, selected and disabled states — so a theme can express "selected option at large" or restyle just the Select All row. Row typography moved from the label span onto the row, so one override reaches both the fallback label and renderOption content; custom option content now inherits the row's font and disabled color.

• NumberInput: render a text-backed spinbutton that supports formatted display values, explicit wheel and keyboard stepping, and opt-in trailing increment/decrement buttons. Existing wheel stepping remains enabled by default and can now be disabled with isWheelEnabled={false} (#4896).

• ComplexSelector and MultiSelector: add astryx-complex-selector-popup and astryx-multi-selector-popup theme targets on the popup surface, so a theme can style the popup — background, border, radius, elevation, padding — through defineTheme instead of a structural selector or a fork. Both components already targeted their trigger but nothing in the popup, which is the part that has to match the rest of an app's menus. The target sits on the popup's content box rather than the layer element: useLayer zeroes the layer's borders, padding and background, so the content box is the surface that actually paints. Purely additive — default rendering is unchanged. (#4991)

• TextInput, TextArea, NumberInput: add isReadOnly. The value is shown at full opacity and still submits with the form, but cannot be edited — the "visible, locked, still sent" case that isDisabled deliberately does not cover, since disabled controls are excluded from submission. Read-only fields are not dimmed and stay in the tab order, matching the native readonly semantics they compile to; isDisabled takes precedence when both are set, and the clear button is hidden while read-only. The state is reflected on the root theming target as data-readonly="readonly", alongside the existing data-disabled, so a theme can paint it without structural :has(input:read-only) CSS. isReadOnly already existed on CheckboxInput, CheckboxList, and PowerSearch; the remaining text-ish inputs (DateInput, DateRangeInput, DateTimeInput, TimeInput, Tokenizer) do not have it yet. (#4816)

• Selector/MultiSelector: two additive theming seams (#4626, #4627). A selector-check theme target on the selected-row checkmark lets themes restyle or hide it (e.g. to compose their own selected indicator via renderOption) instead of relying on a structural sibling selector, and data-disabled now reflects on the trigger for theme-driven disabled styling. Rotation styles remain on the indicator-icon target. Default appearance is unchanged.

• Table: contextMenuActions now accept a variant: 'destructive' for dangerous row/column actions (e.g. Delete), rendered in the error color to match ContextMenu. (#4864)

• TextArea: theme the text inset by writing paddingInline on the textarea component key — it now drives the internal --_textarea-inline-padding var instead of landing on the wrapper. The wrapper stays flush (padding: 0), so the native resize grip keeps its true-corner position and the start icon, status, and character counter stay aligned to the text. Adds a replaces option to derived var entries for the general "map a property onto a var without emitting it on the class element" case. (#4793)

• Add themeable indicators — the componentized check, checkbox, and radio visuals. defineTheme({indicators: {check: RadioIndicator}}) replaces one by name, and every component drawing it follows. (#4712) Theme targets now follow the component-name convention: checkbox-indicator, radio-indicator, radio-indicator-dot. The old names (checkbox, radio, radio-dot) are still emitted on the same element, so existing themes keep working — migrate at your convenience; they go away in the next major.

  Migration: menu radios use those shared targets now. dropdown-menu-radio-dot is removed — target radio-indicator-dot; astryx upgrade rewrites it for you.

• TreeList: two additive changes. (1) A fully flat tree — one with no expandable items at all — now renders its rows flush instead of reserving an empty chevron-alignment column that nothing lines up under; any tree that has at least one expandable item keeps the same per-level alignment as before, so only fully flat trees change shape. (2) Adds a themeable --tree-list-row-gap for the inter-row gap, defaulting to a subtle 2px (var(--spacing-0-5)) separation — matching the inter-row gap List and DropdownMenu already ship — so this shifts the default spacing of every tree by that amount; set it on the tree-list target to widen or close it. The gap rides collapse-proof padding-block on the row wrapper (not the paintable tree-list-item target), and the connector guides span it automatically without overhanging the last row. (#4540)

• AlertDialog: correct the inline role and pin initial focus (#4887). The isInline preview path no longer renders role="alertdialog". That role promises a modal interruption — focus trap, inert page, explicit dismissal — and the inline path is an always-present, non-modal preview with none of it. It now renders role="group", keeping the title and description associated through aria-labelledby/aria-describedby.

  The cancel button now carries data-autofocus, so the documented "initial focus goes to the cancel button" behavior is pinned instead of depending on cancel happening to be the first focusable node in the footer. Docs now name and link the WAI-ARIA APG Alert Dialog pattern the component implements, and gain an anatomy section.

• AppShell: two a11y fixes to the shell chrome (#4944). The mobile top bar rendered for a sidenav-only layout is now a banner landmark, matching the header region of a layout that has a topNav. Previously the page's landmark structure changed depending on which nav slots it filled: a screen-reader user on a small viewport got no banner region at all. When a banner slot is present the existing header keeps the role, so there is still exactly one.

  The skip link now draws the shared Astryx focus ring instead of the browser default outline, so it follows --color-accent and matches every other focusable surface in a custom theme.

• Avatar: fallback initials no longer break for names containing emoji or other multi-codepoint characters. (#4750)

• ChatLayoutScrollButton: the default (label-less) state now renders as icon-only, with the translated "Scroll to bottom" string as the accessible name only. It was previously missing isIconOnly on its inner Button, so Button's default (visible-text) contract rendered the translation as clipped visible text inside the circular button instead. (#4854)

• Chat: the dictation and scroll buttons now carry their chat-dictation-button and chat-layout-scroll-button theme targets, and ChatSendButton no longer clobbers a consumer's className (#4634).

• ChatToolCalls: hover backgrounds on grouped call rows (2+ calls) now keep their full --radius-element rounding instead of getting clipped flat on the inline edges. groupContentInner — the overflow: hidden clip boundary the expand/collapse height animation needs — was missing the padding/negative-margin pair that absorbs the row-level hover-background overhang, so the overhang extended past the clip boundary and got cut off. Matches the ungrouped single-call row, which has no such wrapper to clip it. (#4858)

• ComplexSelector's popup now keeps its 4px clearance from the trigger when placement="above", matching placement="below" and Popover. The popup's margin was set on marginBlockStart only, which is correct for a popup opening downward but leaves zero clearance on the edge that matters when it opens upward. (#4861)

• ComplexSelector: the trigger's focus ring is now keyboard-only. It was drawn from :focus-within, which also matches a mouse click — open the popover with the mouse, dismiss it with the mouse, and the restored focus left a pointer user staring at a keyboard affordance. It now uses the shared :has(:focus-visible) ring, which also brings the outline to the documented 3px offset. (#4935)

• DateInput and DateTimeInput no longer steal focus when the open calendar is dismissed by clicking another control. Clicking the field to open the calendar, then clicking the time input (DateTimeInput) or any other element, kept yanking focus back to the date input because the popover's close handler always refocused it. It now restores focus only when the dismiss left focus detached (Escape, or a click on empty space), so a click that lands focus elsewhere is respected. (#4974)

• TextInput, TextArea, NumberInput: a disabled field is no longer submitted with the form when disabledMessage is set. Showing the reason tooltip requires swapping the native disabled attribute for aria-disabled + readOnly, so the message stays discoverable by pointer and keyboard — but read-only fields still serialize into FormData, and these three kept their name, so a locked field posted its value. They now withhold the name while disabled, matching CheckboxInput and Switch (which forward the name only when enabled) and the hidden-input carriers in Selector, MultiSelector, Slider, and Tokenizer (which mirror disabled). Adds form-participation coverage to all three so the guarantee is pinned. (#4811)

• DropdownMenu/MoreMenu: opening with a pointer no longer highlights the first item as if it were selected (#4477). Initial focus now follows the input modality: keyboard opens (Enter/Space/ArrowDown on the trigger) still focus the first enabled item per the APG menu-button pattern, while pointer opens focus the menu container itself so the first ArrowDown moves to item 1. Synthesized clicks (detail 0, e.g. screen reader activation) and programmatic controlled opens keep the first-item focus behavior. Covers data-driven items mode, compound mode, and MoreMenu, which share the open path.

• EmptyState: the rest spread sits before the contract role, so a consumer can no longer clobber the landmark role the component guarantees (#4826).

• Indicator: a falsy children no longer deletes the state mark. The busy idiom a host actually writes — children={isBusy && <Spinner/>} — passes false when it is not busy, and false is neither null nor caught by ??, so all three indicators took the children path, rendered nothing in it, and dropped the checkmark, the checkbox tick and the radio dot on every selected row. They now use isRenderable, so only children that actually render replace the mark. 0 still counts as content, since it renders the character "0". (#4913) CheckIndicator's children slot also reserves the glyph's box and carries its color, so swapping a Spinner in no longer shifts the row or loses the disabled shade.

  Fixes #4893.

• Consolidate general interactive focus outlines onto one definition — 2px --color-accent at 3px offset, matching Design Conventions. (#4654) Most general controls had drifted to a 2px offset; Button, Calendar, Dialog and Pagination were the ones still on spec. Their value wins, so a focus ring on the drifted components (Link, TabList, Token, TreeList, SegmentedControl, TopNav items) now sits 1px further from its control.

  Destructive buttons keep their error-colored ring, and --button-focus-offset is unchanged. Form and input focus treatments are out of scope.

• <Heading type="display-N"> now sizes correctly under every theme, matching Text's behavior. generateTypeScaleComponents() only emitted level:N-keyed CSS rules for heading, with no type:display-N counterpart — so as soon as a theme supplied typography.scale, the generated theme-layer CSS's level:N rule was the only one present and silently won regardless of type, discarding the prop. A theme with no typography config was unaffected, which made the bug look intermittent. (#4859)

• theme: color.contrast: 'high' now strengthens border tokens too — the emphasized border tone is pulled toward mid-scale (stronger against both light and dark surfaces) and the subtle hairline's alpha is doubled, so structural boundaries stay perceivable in high-contrast themes instead of only text/icons changing. (#4529)

• Icons render through <Icon> and carry their component's theme target (#4838). Styling-only wrappers around rotating icons are gone, and each rotation now sits on the icon element that already carries the component's theme target — so a theme reaches the glyph and its open/closed transform through one selector. No new theme targets: Selector, MultiSelector and ComplexSelector consolidate onto their existing *-indicator-icon targets, and the Table plugins and TreeList simply shed redundant wrapper elements.

  Where an RTL mirror sat on a separate parent element, it is folded into each state's transform (scaleX(-1) rotate(...)) so one element carries both. In the Table plugins that mirror was inert — transform does not apply to a non-replaced inline box — so RTL disclosure chevrons now mirror correctly where they silently did not before.

  Registry glyphs in SideNav, TopNav, Collapsible, TreeList and Breadcrumbs now render through <Icon> instead of useIcon() inside a hand-written <span>. Those spans were a weaker reimplementation of <Icon>, which already resolves the same glyph and renders a span carrying merged className/style/xstyle plus the astryx-icon theme target. The converted sites gain that target, and the node count is unchanged. useIcon() keeps its place for the cases that resolve a glyph without rendering it: MoreMenu and ChatSendButton pass the node as a default for a consumer-overridable prop, which <Icon> cannot express.

  Also adds the @astryx/no-wrapper-transform lint rule (warn) for <div>/<span> wrappers that exist to transform the icon inside them.

• Indicator: a caller can no longer un-hide or focus a decorative indicator (#4921, #4947). IndicatorProps now omits aria-hidden, role, aria-label, aria-labelledby and tabIndex — passing role or tabIndex is a compile error — and each indicator emits its own aria-hidden after {...rest}, so a forwarded one cannot win. Un-hiding an indicator had it announced next to the control that owns the accessible name, saying the same thing twice; a tab stop on one is a focusable node inside a hidden subtree, an axe aria-hidden-focus violation.

  Nothing is stripped: every other prop, including a forwarded aria-label, still reaches the DOM, where it is inert inside an aria-hidden subtree. Note that TypeScript exempts hyphenated JSX attributes from excess-property checking, so the type alone cannot reject aria-*; the attribute order is what enforces it. tabIndex is a plain identifier, so its omission stands on its own.

  Also corrects two doc claims: a replacement must render children when they will actually draw something (isRenderable, not children ?? mark), and "passing role is a compile error" holds for a literal attribute — a spread bypasses excess-property checking.

  Fixes #4918.

• A DropdownMenu item closes the menu on activation even when it carries no onClick, and a data-mode row that changes its own label keeps its identity instead of remounting and dropping focus (#4953)

• Fix mergeRefs cleanup so object refs are cleared and callback refs without cleanup functions still receive null when a merged ref returns cleanup (#4901).

• MoreMenu forwards placement and alignment to its DropdownMenu. Both were part of the underlying menu's API but were dropped on the floor by the wrapper, so an overflow menu — the one component whose job is a trailing-edge affordance — could not ask to be end-aligned; it only looked right when the layer happened to collision-flip. Defaults are unchanged: MoreMenu passes the props straight through, so DropdownMenu's 'below' / 'start' still apply. (#4952)

• Pagination: vertically center the prev/next caret icons. The RTL mirror wrapped each chevron in a display: contents span, which dropped the icon out of the button's flex-centering context so the glyph sat a few pixels high. The mirror transform now rides on the Icon directly via xstyle, so the icon stays a centered flex child and still flips under RTL — no wrapper element. (#4723)

• ProgressBar: a theme can size the target mark again without !important. The mark's width/height were plain StyleX declarations, so a progressbar-mark override only landed where @layer astryx-theme outranks the component atomics — in a source-build app that compiles StyleX without useCSSLayers the atomics are unlayered and beat every theme rule, leaving no way to resize the tick but an unlayered !important rule. The dimensions now travel as derived vars with no competing declaration, so the same defineTheme entry lands in either build. Theme authoring is unchanged; a mark's color is still a plain declaration and still depends on the layer order. (#4970)

• ProgressBar marks take their color from what they sit on: the fill variant's on-color inside the filled area, the emphasized divider color out on the track (#4741)

• CommandPalette, ComplexSelector and ContextMenu: a consumer's onClick/onMouseEnter is composed with the component's own handler instead of being overwritten by it, and {...props} no longer lands after the props the component must control (#4725).

• CheckboxInput, Switch: a required control that is disabled with a disabledMessage no longer blocks the whole form from submitting. Showing the reason tooltip swaps the native disabled attribute for aria-disabled, which leaves the control subject to constraint validation — so an unchecked required checkbox (or an off required switch) the user has been told they cannot touch made the form permanently unsubmittable, with the browser reporting a validation error against a control they had no way to satisfy. Both now detach from the form via form="" while focusable-disabled, matching a natively disabled control and the treatment RadioListItem already applied. Enabled controls are unaffected — a required, unchecked checkbox still blocks submission as it should. (#4815)

• useScrollLock: coordinate concurrent locks with a shared counter, so overlays closing out of order no longer unlock the body early or leave it stuck locked. (#4788)

• Selector: keep the selected option text aligned with the closed trigger across every menu position by measuring untransformed layout geometry during the popover entry animation. (#4802)

• Drop the shared trigger-icon wrapper in Selector, MultiSelector and ComplexSelector — each trigger icon is now the element that carries its own box, colour and theme target. (#4846) The wrapper set a 16px box and --color-icon-secondary on a span with no theme target of its own, shared by two different affordances: the status glyph and the disclosure chevron. <Icon> already provides both (size="sm" is the same 16px box, color="secondary" the same token), so the wrapper only stood between a theme and the icons — and made the two affordances share a node they never should have shared.

• Selector selects by typing, matching a native select (#3764) Typing a printable character on a focused, closed Selector now selects the matching option — tab to a state picker, press "C", get "CA" — instead of doing nothing until the menu is opened. Repeated presses cycle through options sharing a first letter, and spaces count as match characters ("new y" reaches "New York"). With the menu open, typing moves the highlight and Enter commits, as before. With hasSearch, typing on the closed trigger opens the popup and seeds the search input.

  Matching reuses the shared useTypeahead hook, so Selector behaves like the other collections (menus, listboxes). Because a match committed from the closed trigger changes the value without opening the popup or moving focus, the new selection is announced through useAnnounce.

  useCombobox no longer implements typeahead itself; callers that want it compose useTypeahead and run it ahead of the combobox key handler.

  Adopting the shared hook exposed two matching bugs in it, fixed here — so DropdownMenu, ContextMenu and NavHeadingMenu improve too. A single-character search now starts after the current item, as native <select> and the APG pattern do, instead of only advancing on a repeated press: pressing a letter that the focused item already begins with used to do nothing at all. And with nothing focused the search now genuinely starts at the top, rather than wrapping onto the last item first. Characters composed with Option/Alt (Option+a → "å") count as typeahead again, so accented labels stay reachable.

• SideNav: footer content now centers when the nav is collapsed, matching how children already centers. stickyBottomCollapsed (the collapsed-rail wrapper for footer) was missing alignItems: 'center', which its sibling scrollableCollapsed (the collapsed-rail wrapper for children) already had — so full-width footer content (e.g. an icon-only button) stretched to the collapsed rail's width instead of centering. (#4852)

• SideNav: the collapsed icon-only SideNavHeading trigger with a menu no longer omits its popover's anchor. The trigger's ref callback wasn't forwarding to usePopover's triggerRef, so the menu popover had no CSS anchor to position against and fell back to the viewport corner instead of opening next to the trigger. (#4850)

• Stepper: localize the "Optional" step affordance via the new @astryx.step.optional message key so it translates like the rest of the component. No visual change in English. (#4872)

• useStreamingText no longer renders a broken glyph (a lone surrogate, or a partial ZWJ emoji sequence) for one frame when its fixed-code-unit reveal cadence happens to land inside a surrogate pair or multi-codepoint emoji. The rendered slice now snaps back to the nearest grapheme cluster boundary via Intl.Segmenter (with a surrogate-pair-safe fallback where it's unavailable); the reveal cadence itself is unchanged. Also corrected the hook's doc comment, which inaccurately described the cadence as advancing on word/syntax boundaries — it always advanced by fixed code units. (#4866)

• TextArea: no longer reserves trailing space for the on-field status icon when statusVariant="detached". The detached variant surfaces its status glyph in the message box below the field and renders no on-field icon, so the reserved inset pushed the text in for an icon that never appeared. Trailing space is now reserved only when the spinner or on-field status icon actually renders. (#4940)

• TextArea: remove the duplicate wrapper padding so the text and native resize grip sit flush to the edge. The wrapper's padding: 0 shorthand was being overridden by the shared input-wrapper longhands, leaving the inset applied twice; it now zeroes with matching longhands. (#4813)

• TopNavMegaMenu: fix the hover-then-click flicker where clicking a nav item after hovering dismissed the mega menu. The trigger is registered as the native invoker for its popover="auto" panel and uses a Vercel-style hover→click guard, so the click that naturally follows a hover confirms and pins the panel open instead of toggling it shut. Native outside-click, Escape dismissal, and sibling-popover exclusivity are preserved. Click/keyboard opens are pinned (persist past mouse-leave); hover opens stay transient. Keyboard activation (Enter/Space) always opens and moves focus into the panel, while touch/click without a preceding hover toggles cleanly (#3121)

• TreeList typeahead now cycles through same-letter matches instead of stalling, and searches from the top when no treeitem is focused. (#4844)

• BaseTypeahead (and everything built on it — Typeahead, Tokenizer, PowerSearch's content-search field) no longer misinterprets the Enter keydown that commits an IME composition (Korean/Japanese/Chinese input) as "accept the highlighted suggestion". Previously that keydown both selected the highlighted result and cleared the input, so the still-composing syllable landed in the freshly-cleared field and became its own spurious second selection on the next Enter. Also guarded the Enter-to-save handler in PowerSearchEditPopover, which had the same gap when typing a CJK filter value. (#4860)

• useLongPress: cancel the pending long-press when a second finger joins mid-press. Previously onTouchStart and onTouchMove only checked touches.length on their own event, so a second finger arriving after a single-finger press had already started the timer (e.g. a pinch-to-zoom gesture) fell through the touches.length !== 1 guard without ever clearing it — onLongPress could still fire with the stale first-finger point mid-gesture. No API change. (#4735)

• useContainerReveal scopes the reveal by inheritance instead of a marker pool: no dev warnings on lists longer than six rows, and isEnabled now takes effect after mount (#4955)

• AppShell: the two worked examples of the mobileNav escape hatch passed title to MobileNav, which does not accept it: MobileNavProps omits the native title attribute and the drawer heading prop is header. Copying either example produced a type error and a drawer with no heading. Both now say header. The doc also gains an anatomy list and accessibility guidance covering the landmark structure AppShell owns. (#4944)
• AspectRatio: document the sizing contract and add the missing anatomy. The box takes its width from its container and derives its height from the ratio, so constraining only the height clamps it off ratio (pass width: 'auto' alongside) and a shrink-to-fit parent collapses it to zero width. Both are now in the component JSDoc and in bestPractices, along with the single-child expectation: with fit set, every direct child is stretched to fill the box. The image-gallery example block now uses var(--radius-element) instead of a raw 8. (#4984)
• StatusDot: document the builder's accessibility responsibilities in the usage dos and don'ts. A color-only dot is not fully accessible in isolation, so the guidance now says to use it as a binary present/absent signal, pair it with a label, carry the status as a shape via an icon, and — if neither fits — convey the status through an accessible alternative. (#4737)

• DropdownMenuItemData — the shape of one entry in a DropdownMenu / ContextMenu / MoreMenu items array — is now sourced from DropdownMenuItemProps (Pick) instead of restating icon, onClick, isDisabled, and variant by hand, and renderDropdownItems forwards the whole item to DropdownMenuItem rather than copying it field by field. The data and compound APIs describe the same item, so they can no longer drift — exposing another item prop to the data API is now one key in the Pick. The type is structurally identical to before (label is still narrowed to string, since the renderer keys rows by it) and rendering is unchanged. (#4809)
• Remove 15 <div>/<span> wrappers that existed only to style the single Astryx component inside them (Carousel, Lightbox, MobileNav, Pagination, Switch, TopNav, TopNavMegaMenu, Table row-expansion menu icon); the styles now sit on that component's own root via xstyle — or, for Pagination's page-size Selector, its documented width prop. No API change, but the rendered DOM has one fewer node at each site, so anything selecting on that structure is affected: patch, not [breaking], because the removed nodes were internal implementation with no documented contract, no theme target, and no stable class. Two rendering defects the wrappers were causing are fixed as a side effect: the Lightbox prev/next chevrons and the Pagination first/last chevrons were 2.5-3px off their button's vertical centre. (#4775)

• DropdownMenu's two item modes are peers again. Compound mode gains a DropdownMenuDivider component (aliased as ContextMenuDivider and BreadcrumbMenuDivider), which the data path also renders, so {type: 'divider'} and <DropdownMenuDivider /> produce identical DOM, spacing, and theme target. Data mode gains endContent and description, so an items row can carry a shortcut hint or secondary text without dropping to compound mode. Its label widens from string to ReactNode, matching compound mode: the narrowing existed only because rows were keyed by label, and they no longer are (#4953). The bare names now belong to those components, so the data-mode option types take the Data suffix their sibling DropdownMenuItemData already carries: DropdownMenuDivider → DropdownMenuDividerData, ContextMenuDivider → ContextMenuDividerData, BreadcrumbMenuDivider → BreadcrumbMenuDividerData. TypeScript cannot re-export a value and a type under one name from a single barrel, so the rename is what makes the components exportable at all. Run astryx upgrade --apply to rewrite the type imports; a missed one fails at compile time rather than silently.

• Add the migrate-table-rowexpansion-to-tree codemod (runs on astryx upgrade): rewrites the removed useTableRowExpansionState tree pattern to useTableTreeState + useTableTreeData. Detail-panel usage (renderExpanded) is left untouched. (#4884)

• Add a self-documenting layer to the CLI: typed, colocated .doc.mjs for every command, every @astryxdesign/cli/api function, and every authored schema (config, integration, codemod, the response envelope, and the doc-types themselves). Adds the FunctionDoc, SchemaDoc, CommandDoc, and EnumDoc authoring types with sealed parsers. (#4714) Every command's --help and its astryx manifest entry are now built from that command's colocated CommandDoc via a defineCommand converter, so the docs and the CLI can no longer describe different things. The migration is behavior-preserving: help text, command output, error paths, and exit codes are byte-identical.

  The CLI README's command, error-code, and response-type tables are now generated from the manifest and the EnumDocs, correcting real drift — the error-code table listed two codes that do not exist and omitted several that do, and the command table was missing blog, build, layout, and validate-integration.

  Kept honest by a drift harness (docs vs the live CLI), check:cli-structure (each doc-type and api/ leaf ships its full file set), and lint rules for the CLI's layering.

• Add themeable indicators — the componentized check, checkbox, and radio visuals. defineTheme({indicators: {check: RadioIndicator}}) replaces one by name, and every component drawing it follows. (#4712) Theme targets now follow the component-name convention: checkbox-indicator, radio-indicator, radio-indicator-dot. The old names (checkbox, radio, radio-dot) are still emitted on the same element, so existing themes keep working — migrate at your convenience; they go away in the next major.

  Migration: menu radios use those shared targets now. dropdown-menu-radio-dot is removed — target radio-indicator-dot; astryx upgrade rewrites it for you.

• The generated agent cheat sheet hardcoded a shell recommendation ("Full page → AppShell; sidebar nav → SideNav", "pick the shell (AppShell / Layout+LayoutPanel)"), which answers a question that depends on the app archetype and duplicates guidance astryx docs layout already maintains. The two layout rules now send agents to that doc instead, so shell choice, region budgets, and the responsive contract have one source of truth. (#4772) The rule cites the command rather than the docsite URL, in the block's established astryx <cmd> form that the header maps to the project's real invocation (pnpm exec astryx, npx @astryxdesign/cli, …). astryx docs reads the docs shipped inside the installed version, so an agent can't be shown an API that release doesn't have.

• The migrate-grid-minchildwidth-to-columns codemod bailed without changes when a <Grid> had both columns and minChildWidth, leaving the now-invalid minChildWidth prop in place and failing type-checking on 0.3.0. (#4792) When columns is a numeric literal, it now migrates losslessly to the 0.3.0 object form. This mirrors the old (0.2.0) Grid runtime, where minChildWidth dominated and the numeric columns capped the column count under auto-fit: <Grid columns={3} minChildWidth={280}> becomes <Grid columns={{minWidth: 280, max: 3, repeat: 'fit'}}>. Object or dynamic columns values remain a deliberate bail.

• The documented hook example referenced useToggle, which is not a hook in the design system — running it failed with ERR_UNKNOWN_HOOK. It now uses useFocusTrap. (#4742) This shipped in two places a consumer sees: astryx manifest --json, which agents read to learn the CLI, and the hook CommandDoc that feeds --help. Replaced in both.

• CLI internals: a true foundation/ bottom layer, and generated ./authoring types (#4736). foundation/ no longer imports api/, and ESLint now enforces that direction alongside the existing authoring/ and api/ rules. Two things were reaching upward: Project pulled template discovery out of api/template, whose adapter imported Project straight back, and both Project and integration-warnings imported validateLoadedIntegration from the validate-integration command. Neither was misplaced logic, just misplaced files — the adapter now lives at foundation/discovery/template-adapter.mjs and the validators at foundation/integrations/validate-contributions.mjs. To be precise: Project and the template adapter still import each other, so that module cycle remains, contained within foundation instead of spanning two layers. Behavior-preserving — the CLI's observable surface is byte-identical across 84 invocations.

  The published ./authoring type declarations are now generated from their JSDoc instead of hand-written, the same way ./api already works. The 13 hand-maintained .d.mts files are gone; scripts/sync-api-types.mjs emits both trees at prepack, stamped @generated. A hand-written declaration shadows the JSDoc in its .mjs, so it could disagree with the implementation and still compile — and both failure modes had shipped: a missing declaration made a strict consumer resolve that parser as any, and a stale parseDoc return union silently dropped SchemaDoc, CommandDoc and EnumDoc. Also fixes parseFunction, a bare re-export of parseHook that published HookDoc instead of the general FunctionDoc.

• Scaffolding a template that references demo video (e.g. LightboxVideo) no longer replaces the video source with the image placeholder data URI, which the generated <video> element couldn't play. stripTemplateAssetRefs() treated every demo-media reference as an image regardless of extension; video extensions (.mp4, .webm, .mov, .ogv) are now stripped to an empty src instead — there's no equivalent self-contained inline placeholder for video, so the scaffolded example is honest about needing the builder to supply their own file rather than pointing at something that can't play. (#4863)

• Stepper templates: the scaffolded Stepper blocks gain the a11y, theming and responsive-label hardening from the component audit, and their doc blocks match what they render (#4917).

• cli: add theme build --icons-specifier so the generated module's icon import can be fully specified (#4620) The generated theme module imports the icon registry rather than inlining it, because the registry holds React elements. astryx theme build scraped that specifier out of the TypeScript source and emitted it verbatim, so ./icons — valid TypeScript, invalid ESM — reached the generated .js. Every published theme's /built entry therefore failed to load in Node, including under Vite SSR and Next.js Pages Router, while bundlers papered over it by guessing the extension.

  No single extension is correct: the same source compiled by tsup lands at icons.mjs in a package with no "type" field and at icons.js in one with "type": "module", and the generator runs before the compile step that produces either. The caller knows; now it can say so. Without the flag the specifier is emitted unchanged, so the default no---out flow — where the neighbour is an uncompiled icons.tsx that only a bundler can resolve — is unaffected.

  The seven theme packages now declare --icons-specifier ./icons.mjs in their build scripts.

• The scaffolded login pages use Center's padding prop instead of a hand-written var(--spacing-6) style object (#4764).
• Self-host template demo imagery in the repo instead of streaming it (#3973) from the internal lookaside.facebook.com CDN.
• Template demo images are now committed under apps/docsite/public/template-assets/ and referenced by root-relative /template-assets/* paths (previously Meta-internal CDN URLs invisible to external contributors).
• stripTemplateAssetRefs still swaps these paths for the inline data: URI placeholder on scaffold, so generated projects render with zero setup and no network dependency — no image is ever copied into a scaffolded project.

• build: import node:fs statically so the Vite plugin's package discovery survives the ESM build (#4972) astryxStylex()'s config plugin discovered installed @astryxdesign/* packages with require('node:fs'). The ./vite export ships only an ESM bundle (dist/vite.mjs, esbuild format: 'esm'), where esbuild lowers require to a shim that throws Dynamic require of "node:fs" is not supported — always, since native require never exists under ESM. The surrounding try/catch swallowed the throw, so optimizeDeps.exclude silently fell back to ['@astryxdesign/core'] and every other installed Astryx package stayed eligible for Vite pre-bundling, which strips stylex.create/defineVars calls and causes runtime errors.

  The discovery now uses a static import fs from 'node:fs', which esbuild preserves as a real ESM import. A regression test compiles vite.ts with the same esbuild options as build.mjs and runs the discovery in a child node process, since in-process test runners provide a require shim that masks the bug.

• --radius-none no longer overrides to 0.25rem. --radius-none and --radius-full are documented as always fixed (never scaled by a theme), matching @astryxdesign/core's own defaults — this theme's radius group bump swept --radius-none along with it by mistake. Anything opting out of rounding via --radius-none under this theme now renders with a true 0px radius again, instead of a silent 4px. (#4856)

Thanks to everyone who contributed to this release:

@AKnassa @alex-js-ltd @athz @cixzhang @czarandy @ejhammond @ernestt @freddymeta @HelloOjasMutreja @humbertovirtudes @imdreamrunner @is-jain @jiunshinn @josephfarina

Full Changelog: https://github.com/facebook/astryx/compare/v0.3.0...v0.4.0

• DropdownMenuRadioGroup now takes a required label prop that names the group for assistive tech (applied as aria-label), replacing the previous optional aria-label/aria-labelledby passthrough -- rename aria-label="..." to label="..." (pass aria-labelledby via base props instead when a visible label already exists). This also covers the ContextMenu/Breadcrumb re-exports (ContextMenuRadioGroup, BreadcrumbMenuRadioGroup). Also fixes ContextMenu to close the menu on Tab per the APG menu pattern.
• Core — the authoring surfaces move to @astryxdesign/cli/authoring. @astryxdesign/core/authoring (createIntegration/createPageTemplate/createBlockTemplate/createComponentDoc/createFunctionDoc/createDoc and their types) and @astryxdesign/core/config (createConfig + AstryxConfig) are removed. The doc-type vocabulary re-exported from @astryxdesign/core (ComponentDoc, ReferenceDoc, ComponentPropDoc, ComponentTranslationDoc, …) is now a deprecated alias that re-exports from @astryxdesign/cli/authoring and will be removed next release. Author docs/configs/integrations as plain objects and import types from @astryxdesign/cli/authoring; astryx upgrade repoints existing imports automatically.
• Remove long-deprecated compatibility APIs from core and CLI. Run astryx upgrade first to migrate the supported replacements for authoring imports, Dialog logical positions, Switch label spacing, and Table root props.

• Carousel: add hasLoop for wrap-around scrolling (next at the end returns to the start, prev at the start jumps to the end; navigation buttons stay active at both edges) and a handleRef imperative handle (CarouselHandle) exposing scrollNext, scrollPrev, scrollTo(index), canScrollNext(), and canScrollPrev() for programmatic control.
• Center: add padding, paddingInline, paddingBlock (spacing-scale inner padding) props. These match the existing padding props on Stack, Card, LayoutContent, and LayoutPanel, so centered page content no longer needs inline style={{}} or xstyle wrappers for basic padding.
• ComplexSelector: add a rich custom selector shell with accessible button/popover behavior, async change actions, and optional grid keyboard navigation.
• defineTheme: make color.accent optional (#2279) A theme can now restyle the neutral ramp (neutralStyle, contrast) without adopting an accent. An accent-less config seeds the neutral palettes from the default accent's hue but leaves --color-accent, --color-accent-muted and --color-on-accent ungenerated, so they fall through to the token defaults — the same fall-through expandColorScale already applies to status, categorical and on-dark tokens. Configs that pass an accent are unchanged, token for token.
• Dialog: add logical start/end offsets to the position prop and deprecate the physical left/right. start/end map to inset-inline-start/inset-inline-end, so a positioned dialog mirrors correctly under RTL (start hugs the inline-start edge — left in LTR, right in RTL). The physical left/right still work unchanged and never mirror (non-breaking); they are now @deprecated and will be removed in a future major. When both a logical offset and its physical counterpart are set, the logical one wins. A codemod (migrate-dialog-position-to-logical, v0.2.1) rewrites position={{left, right}} to {{start, end}}.
• DropdownMenuCheckboxItem now composes CheckboxInput so its checkmark matches CheckboxListItem and the standard checkbox theming slots apply. The checkbox stays decorative — the menu row keeps role="menuitemcheckbox" and owns the checked state.
• DropdownMenu now accepts an alignment prop for matching Popover/HoverCard positioning parity.
• DropdownMenu: expose themeable slots for the section heading, menu divider, submenu indicator icon, and checked radio dot (astryx-dropdown-menu-section-heading, astryx-dropdown-menu-divider, astryx-dropdown-menu-indicator-icon, astryx-dropdown-menu-radio-dot) so themes can style them directly instead of relying on structural selectors. ContextMenu inherits these via shared item rendering.
• Add a ghost trigger variant for Selector and MultiSelector for toolbar-style controls, with ghost status messages detached by default.
• Field/FieldStatus: add astryx-input-status-icon and astryx-field-status-icon theme targets on the field status glyph, so consumers can recolor, resize, and restyle it — per status — via defineTheme instead of a fragile descendant selector or raw CSS. astryx-input-status-icon sits on the on-field icon shared by all bordered inputs across the attached and tooltip status variants and reflects data-size/data-status; astryx-field-status-icon sits on the detached message box's leading icon and reflects data-type. Purely additive — default rendering is unchanged.
• Markdown: expose per-block spacing to theming. Every block type now renders a stable theme target — astryx-markdown-heading, -paragraph, -list, -codeblock, -blockquote, -table, -hr, and -image — so a theme can tune the gap around any block (marginBlockStart/marginBlockEnd) via defineTheme instead of overriding global spacing tokens or reaching for fragile [role="paragraph"]-style descendant selectors. Each target reflects data-density (so spacing can differ per default/compact), and the heading target additionally reflects data-level (1–6) for per-level spacing. Targets apply only to the default render path — a custom components.heading/code/blockquote/hr/image continues to own its own styling. Purely additive — default rendering is unchanged.
• Pagination: add an input variant — an editable page-number box (a NumberInput, so it clamps to [1, totalPages] with integer-only semantics) flanked by first/last («/») buttons, rendering Page [ n ] / N. Navigation is page-based via the existing onChange. The leading noun is set with an open pageLabel prop (defaults to the localized "Page"; pass pageLabel="Row" to relabel it). Also adds a step prop controlling how many pages the prev/next buttons advance per click (default 1, clamped to range); when greater than 1 the buttons' accessible names reflect the stride. Adds chevronsLeft/chevronsRight icons. The first/last/prev/next carets now also carry a hover tooltip (the same localized, step-aware label already used as their accessible name), so sighted users get the affordance the icon-only buttons previously exposed only to assistive tech. (#4248)
• ProgressBar: add an opt-in marks prop that draws fixed target lines on the track at values in the same 0..max scale as value (e.g. a goal or threshold). Marks stay visible whether progress is below or past them; each mark requires a label (its accessible name, revealed via a tooltip on hover/focus), and marks are ignored in indeterminate mode. The mark tick is directly themeable via the progressbar-mark target — a theme sets backgroundColor, width, and height on it (a larger height makes a "flag" tick that overhangs the bar symmetrically above and below). The mark tooltip is loaded lazily, so a ProgressBar with no marks bundles no tooltip code. Named marks (with a ProgressBarMark type) to match the marks prop on Slider.
• Icon registry: registerIcons() now accepts arbitrary extension keys (not just built-in IconNames), so libraries can augment the icon map with their own keys. Add getExtendedIcon(name, fallback) — resolves an extension key, preferring a theme-registered icon over a caller-supplied default. This lets library-shipped icons (e.g. the lab RichTextEditorToolbar's richtext:* glyphs) be overridden per-theme without forking.
• SelectableCard: pressing Enter now toggles selection, in addition to Space, when the card is focused
• Selector & MultiSelector: the dropdown search field is now a TextInput, so it gains that component's built-in affordances — a leading search magnifier (startIcon) rendered inside the field and a trailing clear (✕) button (hasClear) that appears once a query is typed and resets + refocuses on click. The field now shares TextInput's border, focus ring, and sizing, so it matches every other Astryx input instead of being a bespoke control. No new props or theme targets. Non-breaking, but note the magnifier is a new default glyph, so existing hasSearch dropdowns gain a leading icon.
• Add SSR-friendly theme and icon registry resolution so semantic icons can resolve from a registered theme name without relying on React context.
• Table: astryx-table-cell and astryx-table-header-cell now reflect the active row density as data-density (compact/balanced/spacious), so a theme can override cell padding per density via defineTheme. Previously the density split lived entirely in internal StyleX classes with no density:* hook on the cell target, so a components: { 'table-cell': {...} } entry could only set one padding for all densities — it could not, for example, hold the inline inset constant while varying only the block padding per density. The targets now carry the hook ({className: 'astryx-table-cell', visualProps: ['density']}), enabling components: { 'table-cell': { 'density:balanced': { paddingBlock: '12px' } } }. Purely additive — default padding is unchanged.
• Table: useTableTreeData gains an opt-in hasRowClickExpansion prop. When set, clicking anywhere on an expandable row toggles it, in addition to the chevron. Clicks on interactive cell content or a text selection are ignored, leaf rows stay inert, and it is a no-op on flat data. (#4142)
• Text & Heading: color is now theme-extensible. TextColor is derived from a new TextColorMap interface (same technique as ButtonVariantMap etc.), so a theme can add custom text colors — astryx theme build generates the module augmentation when it sees new color:* values on Text/Heading overrides, and consumers can augment TextColorMap manually for type safety. A custom color renders as a stable class (astryx-text.<color> / astryx-heading.<color>) that theme CSS paints, falling back to the primary StyleX baseline so it never renders unstyled. Built-in colors are unchanged.
• Timestamp: the hover surface is now a single copyable hover card for every timestamp that shows one. Relative timestamps and tooltipEntries-configured timestamps share one card, replacing the old read-only tooltip; the default single row carries the full absolute time and is itself copyable. Each tooltipEntries row opts into a copy button via isCopyable (default false) — so a card can mix human-readable, read-only rows with a copyable machine value (e.g. show local and UTC for reading, but only let readers grab the system_date_time value). Copyable rows render their copy button in a dedicated trailing action column so the buttons align down one column regardless of value width; that column is only reserved when some row is copyable, so a fully read-only card carries no trailing gutter. The card's labels use the supporting text role (the secondary, quieter register that is Timestamp's own default) and values the body role.
• Timestamp: add a relative_short format — the compact sibling of relative. It uses the same tier boundaries and present/clock-skew handling but renders abbreviated units for space-constrained surfaces (chat metadata, dense tables, chips): now, 30s ago, 5m ago, 2h ago, 1d ago, 3mo ago, 2y ago, and in 5m for future times. Months render as mo (not m) so they never collide with minutes; the short form is always numeric (no yesterday idiom). Like relative, it keeps the full absolute date as its accessible name and gets the hover tooltip and live updates. Additive — existing formats are unchanged.
• Timestamp: rename the recently added system_unix format to unix_seconds. The value is absolute Unix time in whole seconds since the epoch — not a wall-clock system_* rendering — so it does not belong to the system_* family; the explicit unit name also leaves room for a future unix_millis. Behavior is unchanged (zone-independent epoch seconds). This renames a format value that only just shipped, before it has consumers.
• Timestamp: two additions. (1) A new system_unix format renders the value as Unix time in whole seconds since the epoch (e.g. 1771520400) — an absolute, zone-independent machine value, useful as a copyable tooltipEntries row alongside human-readable zones. It joins the system_* machine-readable family and, being absolute, ignores any tooltip time zone. (2) The copyable hover card's copy button now shows a visible Copy tooltip on hover/focus (flipping to Copied after a copy, in step with the icon), so the affordance is discoverable for sighted users; the full Copy <value> string remains the button's aria-label for assistive tech. Both additive — no change to existing formats or default rendering.
• Add useContainerReveal — a headless hook for revealing (or concealing) content when its container is hovered or focused. CSS-driven (no hover state in JS, no re-render on hover) and accessible by construction: revealed content stays in the accessibility tree and tab order, reveals on keyboard focus-within, and stays visible on touch. Callers spread getContainerProps() on the container and getContentRevealProps() on each child; no StyleX authoring required. Thumbnail's showRemoveOn="hover" now uses this hook internally (no API change).

• AppShell: make the skip-link target focusable (tabIndex={-1}), localize the skip-link label via the i18n catalog, and expose the header region as a banner landmark
• CheckboxList: each option is a single tab stop — the checkbox is the option's only focusable control (WCAG 4.1.2). The row is now an enlarged click/tap target that delegates surface clicks to the checkbox via a new interactiveRef prop on Item/ListItem (the useClickableContainer pattern), replacing the internal invisible row button. interactiveRef is mutually exclusive with onClick/href.
• Resizable, TabMenu: two collection ARIA minors (WCAG 4.1.2) — Resizable's collapsed handle clamps aria-valuenow to aria-valuemin and announces a localized "Collapsed" via aria-valuetext, and TabMenu overflow options are menuitemradio with aria-checked (APG menu-button single-select) instead of menuitem + aria-current.
• core: preserve state indication for painted controls (Switch, CheckboxInput, RadioList, SegmentedControl, ToggleButton, Skeleton) under forced colors / Windows High Contrast (WCAG 1.4.11)
• i18n: localize remaining hardcoded assistive-tech strings (AvatarGroup overflow label, CodeBlock copy announcement, Button loading announcement, MetadataList show more/less, Table row-expansion context-menu actions, keyboard hint)
• i18n: add @astryx.step.* catalog keys (goToStep, goToStepWithStatus, status.completed/status.warning/status.error) backing the lab Stepper's localized status text and clickable-step accessible names.
• Lightbox: add keyboard zoom (Enter/Space on the image, +/-) and arrow-key panning while zoomed, with polite announcements (WCAG 2.1.1)
• Selector: convey MultiSelector select-all partial state in its accessible name, mark Selector/MultiSelector empty-state messages presentational inside the listbox, and remove Typeahead's collapsed input from the Tab order while a token is shown
• Toast: announce toasts via the persistent singleton live regions instead of per-toast regions that mount together with their content
• theme: guarantee WCAG contrast for generated color token pairs — text-on-surface pairs are asserted at >= 4.5:1 and non-text UI pairs at >= 3:1 (WCAG 1.4.3/1.4.11), with --color-border-emphasized tone-bumped in generation until it clears 3:1 against the generated surface
• Token: render the remove button as a sibling of the link instead of nesting it inside the anchor when both href and onRemove are provided. The token surface now delegates to the link via useClickableContainer, so clicking anywhere on the token (including with middle-click or cmd/ctrl+click to open in a new tab) activates the link, while the remove button keeps handling its own clicks.
• theme build: generated custom Button variants now type-check through the public @astryxdesign/core/Button subpath.
• Use spacing tokens for ChatComposerDrawer bar handle dimensions.
• ChatLayout no longer shows a phantom scrollbar in self-scroll mode when messages don't fill the viewport. The root is now a flex column: the message area flexes to fill the space the composer dock doesn't need, so the sticky dock's natural height is part of the 100% instead of overflowing past it by exactly the dock height. Long conversations still scroll and the dock still sticks; external-scrollRef mode (fixed dock) is unchanged.
• Deprecate the isRtl option on useListFocus and useGridFocus. Right-to-left arrow-key direction is now auto-detected from the container, so the explicit override is redundant and will be removed in an upcoming major — omit it and RTL is handled automatically.
• DropdownMenu now reports uncontrolled native open/close transitions and restores focus to the trigger after native popover dismissals.
• DropdownMenu: a submenu trigger no longer shows a second highlight when hovered while another item still holds focus — hover now moves the single focus-driven highlight onto the trigger, matching regular menu items
• CheckboxInput & Switch: clicking the field description now forwards to the control (the whole label area is one hit target), while clicks on interactive content inside a description (links, buttons) are left alone. No new prop or accessibility-tree change — the description stays a sibling of the label, so it isn't folded into the control's accessible name.
• FieldLabel: localize the "Required"/"Optional" indicator through the i18n runtime instead of hardcoding English, so consumers can translate it via InternationalizationProvider (#4508).
• useContainerReveal: eliminate the exit flicker on the default (non-layout-preserved) reveal. Hidden content flips position: static -> absolute discretely, which previously snapped it out of layout flow at full opacity before the fade could run. The flip now participates in the transition with transition-behavior: allow-discrete and a state-conditional delay, so it stays in flow until the opacity fade finishes on exit while remaining immediate on entry. Content stays in the accessibility tree and tab order throughout.
• Selector and MultiSelector: with statusVariant="detached", the on-field status icon is no longer shown inside the trigger. The detached message box already renders its own leading status icon, so the field keeps its chevron indicator instead of duplicating the glyph — matching the bordered inputs.
• Dynamic import() specifiers now get their mandatory .js extension in the published ESM dist — babel-plugin-add-extensions only rewrote static import/export declarations, so the lazy Tooltip specifier in Text, Heading and Timestamp shipped extensionless and strict-ESM consumers (Rspack, webpack fullySpecified, Node ESM) failed to resolve any component importing them. A new post-build gate (scripts/check-fully-specified.mjs) now fails any build whose dist ships an extensionless relative specifier. (#4569)
• TopNavMegaMenu: keep the desktop mega-menu panel within the viewport — cap its height to the space below the nav (scrolling internally) and clamp its width — so a tall or wide menu no longer overflows the screen edge and clips content
• Lightbox: make backdrop click dismissal actually reachable The dismiss check only matched clicks on the dialog element itself, but the layout container fills the entire transparent dialog, so clicks on the dark area around the media always landed on the container and never closed the lightbox. Clicks on the container now dismiss too, and a pan drag that ends over the backdrop is ignored.
• Markdown streaming perf tests declare explicit timeouts matching their own budgets, instead of relying on vitest's 5s default
• MetadataList: a numeric columns value is honored with stacked labels. columns={3} previously fell back to the responsive repeat(auto-fill, minmax(280px, 1fr)) grid whenever labels were stacked (the default for multi-column lists), so the documented fixed column count only worked with label={{position: 'start'}}. The grid template now covers both label positions — repeat(n, 1fr) for stacked labels, repeat(n, auto 1fr) for side labels — and resolves through a StyleX dynamic style instead of an inline style object.
• MultiSelector: remove the trigger button's own focus outline so it no longer doubles the field wrapper's focus ring. The wrapper renders a single :focus-within ring, matching Selector and the other bordered inputs.
• NumberInput: hide the browser's native number spinners so the field matches the component's own visual treatment across browsers, and stop a focused wheel gesture (which steps the value) from also scrolling an ancestor container. Keyboard stepping and the spinbutton role are unchanged, so there is no accessibility impact.
• Pagination: mirror the prev/next chevrons under RTL with CSS (the shared scaleX(-1) mirror) instead of reading the ambient direction in JS. The controls now flip purely from an ancestor's dir, matching Calendar and the rest of the library — so they render correctly on the server with no hydration flash. No API change; aria-labels are unchanged.
• Popover: expose wrapper role and modal options so non-dialog popup content can own its semantics.
• Add a shared rtlStyles.centerInline(blockOffset) helper for horizontally centering an absolutely-positioned, auto-width element on the inline axis, with an optional block-axis offset folded into the same transform. It intentionally uses physical left: 50% + translateX(-50%) — both reference the same physical edge, so the pair is direction-symmetric and centers identically in LTR and RTL. A logical insetInlineStart: 50% anchor would flip in RTL while the physical translate does not, shifting the element off-center by its own width. This is the one case where physical left is correct, so the single sanctioned no-physical-properties suppression lives in the helper rather than at each call site. The @astryx/no-physical-properties rule now recognises this left: '50%' + centering translate idiom and points offenders at the helper instead of wrongly suggesting a logical rename.
• The RTL physical→logical migration is complete, so promote the @astryx/no-physical-properties lint rule from warn to error in both the recommended and strict tiers. This gates against future physical-property regressions now that the core package is clean (the one sanctioned physical suppression lives in rtlStyles.centerInline).
• RTL Phase 4c — make three animated/interactive behaviors direction-aware under RTL: the ProgressBar indeterminate bar now slides along the reading flow (right → left) instead of always physically left → right; the Switch thumb mirrors on toggle (off-thumb on the reading-start side, on-thumb on the reading-end side, per Material/iOS convention); and horizontal Layer enter animations (Popover/DropdownMenu/HoverCard/Selector placement start/end) now nudge in from the correct physical side. Vertical Layer entrances are unchanged (direction-neutral). LTR behavior is identical.
• Complete the RTL physical→logical CSS migration across the core package: the final components (Avatar, Banner, Calendar, Chat composer, Chat composer drawer, Markdown, Popover, Slider, Resizable) now use CSS logical properties (insetInlineStart/End, borderStart*/End* radii, textAlign: 'end') instead of physical left/right, so they mirror correctly under RTL. The Avatar status dot's outward-push transform is now direction-aware, so it hugs the bottom-inline-end corner (bottom-right in LTR, bottom-left in RTL) instead of pulling inward under RTL. The Popover close button, vertical Slider track/thumb, and ResizeHandle centered grab-zone/pill now consume the shared rtlStyles.centerInline helper — fixing an RTL regression where a logical insetInlineStart: 50% anchor combined with a physical centering translate shifted the element off-center by its own width.
• TextArea: the <textarea> now spans the full input container, with icons, status/spinner, and the character counter as absolutely-positioned overlays. The native resize grip sits in the container's bottom-right corner and the scrollbar covers the whole field. The maxLength counter moved inside the container, anchored bottom-right beneath the text (#4233).
• Thumbnail: show the placeholder when the image fails to load The docs promise a placeholder on load failure, but the img had no error handling, so a broken src rendered a broken image indefinitely. The component now tracks the errored src and falls back to the placeholder, retrying when src changes.
• TreeList arrow-key navigation now follows visual direction in RTL: ArrowLeft expands and ArrowRight collapses under dir="rtl" (mirrored from LTR). Detected automatically; LTR is unchanged.

• Soft-deprecate useTableRowExpansion and useTableRowExpansionState in favor of the tree plugin (useTableTreeData + useTableTreeState). The hooks still work; JSDoc @deprecated tags and the docs point to the migration guide. Removal will come in a later release.
• Document the @astryxdesign/core StyleX peer dependency — add @stylexjs/stylex to the Getting Started / Quick Start install commands in both READMEs, and add an astryx init next-steps reminder to ensure the @stylexjs/stylex peer dependency is met, with a pointer to astryx doctor. StyleX is the styling runtime every component calls, and not all package managers auto-install peers.
• Surface the React 19 peer-dependency requirement everywhere a user would look for it (root README, core README, docsite hero, and the CLI getting-started guide), and add a sync test that keeps those surfaces naming the same React major as the core peer range.
• Add a migration guide from useTableRowExpansion to useTableTreeData + useTableTreeState (before/after example plus a config mapping), since the two tree plugins are converging.

Thanks to everyone who contributed to this release:

• @AKnassa
• @arham766
• @athz
• @bhamodi
• @cixzhang
• @freddymeta
• @HelloOjasMutreja
• @humbertovirtudes
• @imdreamrunner
• @jiunshinn
• @josephfarina
• @nynexman4464
• @potatowagon

• CLI — authoring is consolidated into a single entrypoint, @astryxdesign/cli/authoring, that exposes only TYPES (the plain objects authors write) and PARSERS (the CLI's load-boundary validators). Zod is sealed inside each parser and never exported.
• Remove long-deprecated compatibility APIs from core and CLI. Run astryx upgrade first to migrate the supported replacements for authoring imports, Dialog logical positions, Switch label spacing, and Table root props.

• CLI human (non---json) output now renders through a small, documented formatter kit: consistent, plain-ASCII key: value records/sections that mirror --json and are greppable by field. Every command was migrated onto it (a lint rule keeps output funneled through the single emit sink), and astryx --help documents the output contract. --json output is unchanged. (#4686)
• defineTheme: make color.accent optional (#2279) A theme can now restyle the neutral ramp (neutralStyle, contrast) without adopting an accent. An accent-less config seeds the neutral palettes from the default accent's hue but leaves --color-accent, --color-accent-muted and --color-on-accent ungenerated, so they fall through to the token defaults — the same fall-through expandColorScale already applies to status, categorical and on-dark tokens. Configs that pass an accent are unchanged, token for token.

• theme build: generated custom Button variants now type-check through the public @astryxdesign/core/Button subpath.
• Remove the @xds/theme-default → @astryxdesign/theme-neutral collapse from the v0.1.0 upgrade codemods (module-specifiers, css-surfaces, and declare-module). theme-default was dropped at the v0.1.0 scope move, so no v0.1.x consumer imported it — the collapse was dead and could rewrite unrelated source (including @xds/theme-default/theme.css CSS imports) to a @astryxdesign/theme-neutral package the app never declared. The @xds/theme-daily → theme-neutral collapse (and its defaultTheme → neutralTheme export remap) is unchanged.
• cli — confine user-controlled file paths, close DoS vectors, and repair paths broken by the authoring reorg (#4637)
• cli hardening pass — validate inputs at the API layer, close path-safety gaps, and prevent agent-docs content loss. The API is a public surface (@astryxdesign/cli/api), so guards that lived only in the CLI wrapper are pushed into the API. Path safety (the guard the write commands all depend on):
• cli — rename the search/build verbose flag to --verbose, resync the bundled themes, and fix unwrap-authoring-factories edge cases (#4639)
• astryx doctor's peer-dependency check is now version-aware and names scoped packages correctly. Two problems are fixed: (1) the install hint was built with name.split('@')[0], which for a scoped peer like @stylexjs/stylex returned an empty string, printing a bare npm install with no package; and (2) the check only verified a peer was present, not that its installed version satisfied the declared range — so an out-of-range version (e.g. @stylexjs/stylex@0.10.1 against a ^0.19.0 peer) was reported as satisfied. The check now flags out-of-range peers and its fix pins the required range, e.g. npm install @stylexjs/stylex@^0.19.0.
• theme build: validate component override keys from documented theming targets so subtargets like Chat bubbles and SideNav items no longer warn as unknown.
• astryx theme build: hyphenated component-override keys now resolve their built-in visual-prop values, and the KNOWN_COMPONENTS prop lists match what each component renders (#4109) loadKnownValues mapped a theme key to its core component directory by stripping non-letters from only the directory name, so a hyphenated key (text-input, dropdown-menu, app-shell, ...) never matched its TextInput/DropdownMenu/AppShell dir and the built-in prop values were silently dropped. It now strips non-letters from both sides before comparing, so hyphenated keys resolve. The KNOWN_COMPONENTS visual-prop lists are also synced to each component's theming.targets[].visualProps (e.g. text-input/date-input/number-input/time-input: size, status; side-nav: mode; aspect-ratio: shape), correcting stale/empty entries.

• Document the core codemod staging workflow and add release-time automation that promotes transforms/next codemods into the resolved release version folder.
• Document the @astryxdesign/core StyleX peer dependency — add @stylexjs/stylex to the Getting Started / Quick Start install commands in both READMEs, and add an astryx init next-steps reminder to ensure the @stylexjs/stylex peer dependency is met, with a pointer to astryx doctor. StyleX is the styling runtime every component calls, and not all package managers auto-install peers.
• Surface the React 19 peer-dependency requirement everywhere a user would look for it (root README, core README, docsite hero, and the CLI getting-started guide), and add a sync test that keeps those surfaces naming the same React major as the core peer range.

• The create* factories are removed (createConfig, createIntegration, createComponentDoc, createFunctionDoc, createDoc, createPageTemplate, createBlockTemplate, createCodemod, createConfigCodemod). Author a plain object and stamp its type directly ({type: 'component', ...}, {type: 'page', ...}, {type: 'code', ...}); config and integration manifests are plain objects with no discriminant.
• Import authoring types from @astryxdesign/cli/authoring — the doc types ComponentDoc, HookDoc, ReferenceDoc, TemplateDoc, and the project-file types AstryxConfig, AstryxIntegration, AstryxCodemod. The old split surfaces (@astryxdesign/cli/{config,doc,integration,template,codemod} and the authoring exports of @astryxdesign/core) are superseded.
• Doc field types are renamed to explicit, domain-prefixed names so the surface reads clearly: PropDoc → ComponentPropDoc, ThemingTarget → ComponentThemingTarget, ComponentVar → ComponentThemingVar, DerivedVar → ComponentThemingDerivedVar, ElementDescriptor → ComponentSlotElement, GroupDoc → ComponentGroupDoc, TranslationDoc → ComponentTranslationDoc, ExampleDoc/AnatomyElement/BestPractice/PlaygroundConfig → Component*, and ContentBlock/TokenPreviewType → Reference*. The authorable entry types (ComponentDoc/HookDoc/ReferenceDoc/TemplateDoc) are unchanged.
• astryx upgrade migrates you automatically. Three codemods ship in this release: unwrap-authoring-factories rewrites every create* call to the plain stamped object, migrate-authoring-imports repoints the import specifiers to @astryxdesign/cli/authoring, and rename-authoring-doctypes applies the doc field-type renames (imports, type references, and JSDoc @type refs).
• CLI — the public @astryxdesign/cli/api type surface is now generated from the runtime JSDoc, and the injectable logger is consolidated into one Logger. Consumer-visible changes to @astryxdesign/cli/api (types only — runtime imports are unchanged):
• Precise return types. component, docs, blog, discover, build, swizzle, upgrade, init, and themeBuild previously resolved to Promise<any>; they now return their precise { type, data } response unions. Code that leaned on any may surface new (correct) type errors.
• Response types are now exported by name — e.g. ComponentDetailResponse, SearchResponse, UpgradeRunResponse — alongside themeAdd/themeList/listThemes and a new shared logger value + Logger type.
• Breaking: the per-command return-union aliases ComponentResult, DiscoverResult, DocsResult, HookResult, and TemplateResult are no longer exported. Use Awaited<ReturnType<typeof component>> (still works), or import the member response types directly.
• theme build --out/<file>, the validate-integration manifest roots (components/templates/codemods), and layout --file are now confined with assertWithin. An escaping integration root reports a validation issue instead of importing and executing files outside the package; layout --file is also size-capped (5 MB) and rejects non-files, so a stream like /dev/zero can't exhaust memory.
• Fuzzy-match (Levenshtein), the layout value parser, and the layout expander gained bounds — a very long search query, a deeply nested attribute value, and a huge repeat count (Box*999999999) can no longer spin the CPU, blow the stack, or exhaust the heap.
• Docs topic lookup uses a null-prototype map so __proto__/constructor as a topic name can't bypass the unknown-topic guard. The shipped getting-started docs and the sandbox registry generator point at the current CLI source path again (both broke in the authoring reorg).
• assertWithin now canonicalizes symlinks (realpath of the deepest existing ancestor) — a symlink inside the project root pointing outside no longer lets a write escape. Also rejects a NUL byte in the path. This closes the escape for every command that writes through the guard (swizzle/template/upgrade/theme/layout/agent-docs).
• search(): non-positive/non-integer limit, empty query, unknown --type → ERR_INVALID_ARGUMENT (previously limit: 0 returned the full unclamped set).
• swizzle(): the component name is sanitized so ../separators can't escape the --output base.
• swizzle() import rewriting: dynamic import('../Sibling/…') is now rewritten (was left pointing at a non-existent sibling in the output dir); a two-levels-up asset import (../../locales/x.json) maps to the exported subpath instead of the invalid <pkg>/..; and ../theme/tokens.stylex keeps its full subpath (the StyleX compiler needs the dedicated ./theme/tokens.stylex export — collapsing it to <pkg>/theme broke StyleX resolution). Component-local .stylex files that aren't subpath exports keep the working barrel collapse.
• template() copy: refuses to clobber without overwrite: true (ERR_FILE_EXISTS); adds an overwrite option.
• upgrade(): the --path scan dir is confined to cwd (--apply rewrites files in place).
• init(): template scaffold refuses to clobber an existing page.tsx (ERR_FILE_EXISTS); an unknown --agent now throws ERR_UNKNOWN_AGENT (was silently ignored).
• layout: rejects an unknown --form (ERR_INVALID_OPTION) and empty expression (ERR_INVALID_ARGUMENT).
• layout expand: text payloads containing <, >, {, or } (e.g. Text"5 < 3") are emitted as JSX string-expression children so the generated TSX is valid — previously they produced syntactically-broken output.
• layout expand: a top-level repeat or group that expands to multiple sibling elements (B"x"*3, (B"a" + B"b"), an outline repeat block) is now wrapped in a fragment — previously the generated TSX had adjacent root elements with no parent and failed to compile (the wrapper decision counted AST roots instead of expanded elements).
• layout (expand/check): an empty expression now surfaces ERR_MISSING_ARGUMENT and a missing --file surfaces ERR_FILE_NOT_FOUND (was a generic ERR_UNKNOWN / a raw ENOENT errno, with a stack leak in human mode).
• layout parser: a pathologically deep compact expression (V > … nested past 512 levels) is rejected with a located ERR_LAYOUT_PARSE instead of blowing the call stack and surfacing a raw RangeError (→ ERR_UNKNOWN).
• layout check --form … printers: a string containing a quote (e.g. a Button label="Don't panic") now round-trips — the printer picks a delimiter the string doesn't contain instead of always single-quoting, so the emitted compact/outline surface re-parses (was producing an unparseable token).
• resolveTheme: a non-string astryx.theme in package.json (number/array/object/boolean) degrades to null instead of crashing astryx component with a raw TypeError (parity with the empty-string / unknown-slug paths).
• jsonOut: serializes the envelope BEFORE marking the emission handled, so if a command returns unserializable data (circular ref / BigInt — an author bug) the bin error boundary still emits a JSON error envelope instead of leaving a --json consumer with empty stdout.
• package scanner: a dependency's astryx.docs that is a non-string (number/array) is skipped instead of crashing the whole scan with a raw TypeError, and a docs path that escapes its own package dir is skipped rather than surfacing foreign docs; a non-string package name is coerced to a string.
• component --package <pkg> --showcase/--blocks: route to the right leaf instead of falling back to component.detail.
• discover/docs leaves: empty query/section errors instead of matching everything via .includes('').
• docs()/discover(): a non-string topic/section/query now throws a stable coded error (ERR_UNKNOWN_TOPIC / ERR_UNKNOWN_SECTION / ERR_INVALID_ARGUMENT) instead of a raw TypeError the CLI downgraded to ERR_UNKNOWN (parity with the component/hook non-string guards).
• blog() detail: a non-string slug throws ERR_INVALID_ARGUMENT (was a raw TypeError the CLI downgraded to ERR_UNKNOWN), and fails fast before any network fetch.
• hook()/component() dispatchers: a non-string name or category throws a coded error (ERR_UNKNOWN_HOOK / ERR_UNKNOWN_COMPONENT / ERR_UNKNOWN_CATEGORY) instead of a raw TypeError with no .code from the leaf's .toLowerCase()/.replace(...).
• theme add: a write failure where an ancestor of the target dir is a file now surfaces ERR_WRITE_FAILED (the mkdir moved inside the write try/catch) instead of leaking a raw fs errno (EEXIST/ENOTDIR) + absolute path.
• validate-integration: a path-unsafe [package] spec (../absolute) is reported as an invalid_package_spec diagnostic instead of crashing with a raw stack (human) / generic ERR_UNKNOWN (--json).
• doctor: no longer crashes (raw stack in human mode / ERR_UNKNOWN in --json) when multiple astryx.config.* files coexist — it reports a config FAIL. Version-alignment skips (info) instead of a spurious drift WARN with a NaN.undefined.x fix when either version isn't comparable semver (e.g. workspace:*).
• manifest: subcommands are sorted by name (same stability guarantee the top-level command list makes), so reordering .command() calls can't silently change the agent-facing manifest.
• build: the CLI wrapper now propagates the API's error code into the --json envelope (bogus --type / non-positive / non-integer --limit → ERR_INVALID_ARGUMENT instead of a generic ERR_UNKNOWN), and delegates --limit validation to the API (parity with search).
• layout check: exits 1 in BOTH --json and human mode for an invalid (but parseable) layout — the exit code no longer depends on the output mode, so it works as a CI gate / agent check without parsing stdout.
• upgrade config codemods: a findConfigPath throw (multiple astryx.config.* files) is surfaced as a structured per-codemod error instead of crashing the whole upgrade run — config codemods run before the strict loader, so this restores the per-codemod isolation every other failure path honors.
• CLI dispatch: the belt-and-suspenders postAction "completed without emitting an envelope" error carries a code (ERR_UNKNOWN) so every error envelope is branchable on code.
• toErrorEnvelope/AstryxError: attach suggestions only when it's a real array.
• injectXdsBlock/removeXdsBlock no longer drop, duplicate, or orphan user content on malformed managed blocks (END-before-START, duplicate/nested blocks, or a start marker with no end). They locate a single well-formed block (END searched after START) and refuse to touch an ambiguous/half-written file instead of corrupting it.
• The codemod source scan no longer follows symlinks (a symlinked file under the scanned path could rewrite its target OUTSIDE the project) and skips generated-output dirs (dist/build/out/.next/coverage) — codemods rewrite source, not artifacts or dependencies.
• resolvePackageDir rejects an integration spec that isn't a bare package name (no .., no absolute, must stay in node_modules) — a config spec can no longer point the loader at an arbitrary module.
• A broken integration manifest (throws on import or fails schema validation) no longer crashes Project.load (and thus every command). It's recorded and surfaced via issues(), restoring the documented skip+warn policy; other integrations still load.
• The --radius-*, --shadow-*/--elevation-*, and --color-* token-migration codemods no longer rewrite a longer consumer-defined token that merely shares a prefix (e.g. --radius-container-custom → --radius-3-custom, --radius-innermost → --radius-0most, var(--shadow-10) → --shadow-base0, --color-positive-custom → --color-success-custom). The boundary lookahead was binding only to the last alternative in the pattern (and two codemods had no boundary at all); it now wraps the whole alternation, so only exact token names migrate.
• migrate-badge-children-to-label no longer emits a duplicate label prop when the badge already has one (<XDSBadge label="x">Active</XDSBadge> produced an invalid label="x" label="Active"); it now skips a badge that already declares label.
• readDocMeta no longer reads a group:/hidden: field nested inside a propDescriptions block (a docsZh/docsDense translation export) as the component's group — that leaked a translated prop description as a group key in the default English component --list (e.g. a Chinese string appeared as a group). The field regexes now match top-level fields only (<=2 spaces).
• astryx search/build verbose output was unreachable: the boolean --detail flag collided with the root program's value-taking --detail <level>, so search button --detail errored argument missing. The boolean is now --verbose (the global --detail <level> is unchanged).
• The themes bundled for astryx theme add had drifted from source — the neutral bundle was missing a WCAG AA light-mode text-secondary contrast fix and a StatusDot color block, so astryx theme add neutral scaffolded a theme below AA. All bundles are regenerated to match source, guarded by a new drift test.
• The unwrap-authoring-factories upgrade codemod produced broken output for a shorthand type property (emitted {'component'}) and for no-argument factory calls (left a call referencing the just-removed import). Both now emit the correct plain object.

Thanks to everyone who contributed to this release:

• @AKnassa
• @cixzhang
• @ejhammond
• @imdreamrunner
• @jiunshinn
• @joeyfarina
• @josephfarina

• neutral theme: darken light-mode --color-text-secondary from neutral-500 (#737373) to neutral-600 (#525252). 500 only reached 4.19:1 on the T95 body background (#f1f1f1), just under WCAG AA 1.4.3 (4.5:1); 600 clears it. Dark mode is unchanged.

Thanks to everyone who contributed to this release:

• @humbertovirtudes

Thanks to everyone who contributed to this release:

• @AKnassa
• @arham766
• @athz
• @bhamodi
• @cixzhang
• @ejhammond
• @freddymeta
• @HelloOjasMutreja
• @humbertovirtudes
• @imdreamrunner
• @jiunshinn
• @josephfarina
• @nynexman4464
• @potatowagon
• @rubyycheung

Full Changelog: https://github.com/facebook/astryx/compare/v0.2.0...v0.3.0