# @xds/core # 0.7.6 #### New Features - useAnnounce takes an optional `{hasReplace: true}`. An instance created with it states one current state, such as a search's result count: each message it writes withdraws that instance's previous message while it has not been spoken yet, whatever their politeness, and is spoken at its own politeness, so input faster than a frame (a barcode scanner, dictation, automation) says only the latest. Messages from other instances, and from instances without it, still join. MultiSelector sends its result count, its create row and its empty-search message through such an instance, so fast typing no longer says `1 result Create "Urg" Create "Urge" …`; its selection changes keep their own instance and still join. This follows spec:AST-086 FR9 and FR13 (#9070). (#8640) - Adds three `@astryx.diffViewer.*` keys to the `en` catalog for the lab `DiffViewer`'s large-change fold: its "Large change: N lines" label and its Show full diff / Hide full diff button. No existing string changes; locales without a translation fall back to English. (#9462) - FieldLabel: a tap on the label's info icon (`labelTooltip`) opens its help without also toggling or focusing the control (`component:FieldLabel` FR9). Before, the tap that opened the help also activated the label's control, as a tap anywhere on a native label does: on a touch screen it focused the field, raising the keyboard, or toggled the switch or checkbox the label names, an unintended second action. Now a tap by finger or pen opens the help alone; a mouse click on the icon still activates the control like the rest of the label, and hover still shows the help. (#9089) - FieldStatus: the `tooltip` variant is deprecated and is removed in the next minor release. FieldStatus has no tooltip presentation: a direct `` draws a plain message box with no tooltip, and your editor now marks it deprecated. To show a status message from a field's on-field icon, set `statusVariant="tooltip"` on the field control instead; that stays supported. (#9196) Before: ```tsx ``` After: ```tsx ``` - Adapt NumberInput's compact steppers to primary-pointer precision: hide them on coarse pointers and restore the field's themed end padding. Fine-pointer steppers are unchanged. (#8015) Compatibility: this is a non-breaking presentation adaptation. The public props and exports, numeric value and callback contracts, validation, direct entry, and keyboard stepping remain unchanged; existing NumberInput calls require no source or configuration migration. Coarse-pointer users enter the value directly instead of using the compact visual stepper aids. - TextInput and TextArea tell a touch keyboard what the field holds. New props `enterKeyHint` (what the Return key says: Search, Send, Next, Go, Done), `inputMode` (which keyboard: number pad, decimal pad, phone pad, web search, email, URL), `autoCapitalize` and `hasAutoCorrect`, plus `hasSpellCheck` on TextInput (TextArea already had it). TextInput's `type` also accepts `search`, `tel` and `url`. The value types are the new exported closed unions `EnterKeyHint`, `InputMode` and `AutoCapitalize`, so TypeScript rejects any other value. Each prop renders the native attribute of the same name and nothing when unset, so existing fields keep the browser's defaults. (#8166) - A theme's `motion` takes two knobs beside the duration scale: `tempo` (0.75–1.5) scales every motion duration, and `character` (`'crisp'`, `'standard'` or `'expressive'`) sets the new `--ease-entrance` and `--ease-move` tokens; `--ease-exit` stays the same at every character. Their types, `ThemeMotionConfig`, `ThemeMotionKnobs` and `MotionCharacter`, are exported. A theme without them renders exactly as before; a duration scale and explicit tokens win over the knobs, Spinner's and Skeleton's loops keep their timing under every tempo, and the press release fade follows tempo up to the 200 ms Reduce Motion cap under the person's setting. Springs don't read the knobs yet. The motion, token and theme-authoring docs and the theme template describe the knobs. (#8661) - TimeInput, DateTimeInput: the `hourFormat` default follows the locale. This is a default change. The old default was always `'12h'`; the new default, when `hourFormat` is unset, is the `InternationalizationProvider` locale's hour cycle, so a `de-DE`, `en-GB`, or `vi-VN` app shows "14:30" like `Timestamp` beside it, while `en-US` and an app with no provider keep "2:30 PM". To keep the old default, pass `hourFormat="12h"`. To honor a person's own 12/24-hour preference everywhere, put it on the provider locale (`en-US-u-hc-h23`). Twelve-hour text now uses the locale's own day period ("오후 2:30", "午後2:30", "2:30 p. m.") instead of a fixed English AM/PM, along with its digits and separator, and the typed field reads that text back. Fixes #8992. (#9022) - A `SearchSource` can show results before its search settles. `search(query, context)` may call `context.update(items)` (new exported type `SearchContext`) to show matches it already has, such as people the page loaded earlier, and then return the server's answer. `BaseTypeahead`, `Typeahead` and `Tokenizer` show each list for the current query, change the list at most once per keystroke, and add later rows only after the ones already shown, so the highlighted row never moves; the field stays busy and the result count is announced once, when the search settles. A later list that moves or removes shown rows is shown as given with a development warning. Sources that never call `update` show one list per query as before, with two changes every field sees: option element ids now follow the item's `id` instead of its row index (tests that select options by an index-based id need updating), and a grouped `Tokenizer` with `hasCreate` shows its Create row after the groups instead of first. To show local matches at once, pass `debounceMs={0}` and delay the server request inside the source (`spec:AST-092`). (#7962) #### Fixes - A bottom-sheet DropdownMenu whose sheet preload fails (a dropped connection) no longer reports an unhandled promise rejection, and no longer keeps the failed load, so a module loader that retries loads the sheet's actions on the next open. (#8478) - `DropdownMenu` no longer rewrites its trigger's style on every render. Its trigger refs, and the trigger ref `usePopover` returns, now stay the same function when the popover's `onShow` or `onHide` changes, so React stops detaching and reattaching the trigger, and a tooltip anchored to the same trigger keeps its place. Triggers that take `usePopover`'s ref directly (ComplexSelector's built-in trigger, DateTimeInput's date field and Breadcrumbs) get the stable ref too. (#9130) - A `Popover` in a Document Picture-in-Picture window now scrolls once that window gets too short for it or its content grows past it, instead of being cut off: it measures its overflow from the window it renders in, not the page. (#9098) - In Safari, content already gliding after a layout change no longer jumps ahead when a second change retargets it, such as a row that moves again while it is still moving, or a row inside a card that is itself gliding: the new glide started up to about 3 px ahead of where the row was drawn, more the later in its frame the change was made. A gliding element's place before a change is now read on the clock of every glide that carries it, its own and its gliding containers', so the new glide starts where the old one is drawn. (#9327) - `AppShell` is a layout root: the layout values its ancestors pass down stop at its root, so it lays out the same inside a padded `Card`, a `Section` or a `Layout` as at the page root. Before, its internal Layout escaped a padded host's padding on all four sides, so in a padded `Card` that clips its overflow the shell's logo was cut at the inline start and its navigation and content at the other edges. A caller's own props and styles on `AppShell` still apply; theme, color mode, direction and translations keep inheriting. (#9418) - With `height="fill"`, AppShell's main region can be scrolled from the keyboard when its content overflows and has nothing focusable (WCAG 2.1.1 Keyboard). Before, main was only the skip link's target (`tabIndex={-1}`): Tab passed it by, so long text, a report or a read-only page could not be scrolled without a pointer. Now, while main scrolls overflowing content, it is a stop in the tab order and keyboard focus on it draws the standard focus ring, inset; in an elevated shell with a top nav and an inline side nav, main then takes the surface's rounded top-start corner so the ring follows it. Tab entry moves on when the first focusable element inside main is a plain link or button; otherwise main is one stop before it. A main region that fits, and `height="auto"` (where the page scrolls), are unchanged. (#8111) - DateInput ignores selections from an already-open disabled picker and blocks Reset's value change and month navigation while disabled, without dismissing the picker or moving focus. (#8813) - DateRangeInput ignores calendar and preset commits after its open picker becomes disabled, without dismissing the picker or moving focus. Presets reflect the field's disabled state and reason. Enabled selection, clear behavior, and loading-only dismissal remain unchanged. (#9155) - MultiSelector blocks selection and creation callbacks and Actions when it becomes disabled while its panel is open, without removing the focused control. (#9152) - Selector ignores option selections after it becomes disabled, including selections from an already-open popup and pointer gestures started while enabled. Its trigger remains focusable and disabled values remain excluded from forms. (#9137) - In forced colors (Windows High Contrast), a lone `Avatar`'s initials and default person icon now take the color around them, as the browser forces it, instead of always showing CanvasText: inside a control that paints itself disabled they show GrayText. Faces inside an `AvatarGroup` keep CanvasText on the group's ring. Outside forced colors nothing changes. (#8819) - Badge: a badge with a label is now never shorter than one line of that label. With a larger text size, a badge's label grew while the badge kept its fixed height, so the label spilled out of the pill and white text on a colored badge became unreadable. The badge now grows with its label. At the default size nothing changes, a theme that sets the badge's height keeps that height there while its badges still grow with larger text, a color-only badge keeps its size at every text size, and a badge still shrinks and truncates in a container too narrow for it. (#8236) - Dragging a `BottomSheet` with snap points up from a shorter detent, or back down past it, no longer flashes the sheet away from the finger. For one frame the sheet jumped by the height its scrolling area gives up at that detent (about half the screen at a half-height stop) and then snapped back. The height and position now change in the same frame. (#9193) - A BottomSheet opened from inside another sheet's content drags down to dismiss on its own. The covered sheet underneath no longer takes the gesture, so dragging the top sheet's grabber no longer moves or dismisses the sheet beneath it. (#8820) - Calendar, DateInput, DateTimeInput: a month label that stands alone starts with a capital where the locale capitalizes one. In Spanish, French, Italian, Dutch, Polish, Russian and Ukrainian, Calendar's heading read "octubre de 2026"; it now reads "Octubre de 2026", following CLDR's stand-alone capitalization, as the weekday headers already use CLDR's stand-alone names. A two-month view capitalizes both months, and each month grid's name, the touch date fields' month headings and `useCalendarNavigation`'s `monthYearLabel` do the same. Dates in running text, such as a field's value, are unchanged, and so is every locale CLDR does not capitalize, Vietnamese included. (#9371) - Carousel's scroll area is a group named like the carousel, so a screen-reader user who tabs onto it hears where they are. It is a tab stop only while its content overflows; a carousel that fits no longer adds an empty stop. (#8155) - ChatComposerInput: a tap on a pasted-text token opens its preview without raising the keyboard. Before, the tap that opened the preview also focused the composer around the token and placed the caret in it, which on a phone raises the on-screen keyboard over the preview. Now a tap by finger or pen stops at the token, so touch reaches the preview and its Expand action without the keyboard covering them, the operable path `architecture:interaction-modality` INV4 asks of every modality; a mouse click on the token still places the caret in the composer, and hover still opens the preview. (#9189) - A click inside an open Tooltip or HoverCard in a ChatComposer's body no longer moves focus to the composer's input. A click on the body's empty space still focuses it. (#9375) - A press in a ChatComposerInput's own editor no longer closes its open trigger menu (the `@` mention or `/` command list). Clicking inside the query keeps the menu showing; a click that moves the caret out of the query, a press anywhere else on the page and Escape still close it. (#9503) - Safari no longer slows down as a page fills a container with many children because of ChatMessage's avatar-spacing rule. The avatar's top spacing beside a named bubble is now judged from the message itself instead of from its siblings. It looks exactly as before. (#9438) - CheckboxList: a group disabled with a `disabledMessage` gives that reason to each checkbox as its description (`aria-describedby`), as well as to the group, so a screen reader announces it on the focused checkbox. A row's own description comes first. (#9168) - ClickableCard: a disabled link card no longer passes an undefined `href` to the router link component, and a focused link card keeps focus when its disabled state changes. (#8659) - CodeBlock: in right-to-left layouts the collapsed disclosure chevron now points toward the inline end (left), as other disclosure chevrons do. Expanded, it still points down. (#9294) - When a `Collapsible` closes while keyboard focus is inside its content, for example from an owner-set `isOpen` or a group's value, focus moves to its trigger. Before, focus fell to the page, so a keyboard or screen-reader user lost their place (WCAG 2.2 SC 2.4.3). Focus anywhere else is not moved. (#9250) - `Typeahead` and `Tokenizer` expose their state on the combobox (WCAG 2.2 SC 4.1.2; `component:FormLayout` FR5 and AR2). Before, the combobox had no `aria-required`, so under `FormLayout defaultOptionality="required"`, where the visible "Required" marker is hidden, a screen reader announced a required field as optional; and an error status showed its message with no `aria-invalid`. Now the combobox sets `aria-required` for the resolved required state and `aria-invalid` for an error status. A caller's own `aria-required` or `aria-invalid` still applies when the field's own state is off. (#9034) - CommandPalette no longer shows its "Type to search" text after you have typed. While the first search is still loading, the list stays empty and the field's loading spinner shows; the no-results text appears once that search finishes with nothing. Clearing the field brings "Type to search" back. (#9420) - Comments: the failure announcement spoken for a Comments error banner now comes from the `@astryx.comments.errorAnnouncement` locale entry, so it can be translated like the rest of the component's messages. (#7902) - ComplexSelector's popup content keeps its last rows clear of a bottom bar the app declares through `LayerProvider`'s `inset`, instead of scrolling them underneath it, and its chevron turns at once when the person prefers reduced motion instead of animating its rotation. (#8551) - ComplexSelector: with `statusVariant="tooltip"` the status message is no longer lost. The trigger row now shows the status icon as a focusable info-tip button that reveals the message on hover, keyboard focus, or tap, and the trigger is described by that message instead of pointing at an element that did not exist. Pressing the info-tip does not open the popup. (#9026) - A context menu that was never opened no longer mounts its menu surface; it mounts at the first open and shows as it attaches. A Table whose cells carry context menus (row expansion gives every body cell one) showed its first rows after a minute or more at 2,000 rows in Safari; it now shows them in a few seconds. (#9278) - An app bundled into one esbuild file (no code splitting, as no-build pages are) no longer crashes on first render with a TypeError such as "Cannot read properties of undefined (reading 'useId')" or "(reading 'useEffect')", for example when it uses `List` or `Button`. Code-split apps are unchanged and still load Core's lazy modules on demand. (#9055) - DateInput, DateRangeInput and DateTimeInput no longer build their calendar while the popover is closed. Each closed field used to mount a full month grid at page load and keep it updated, so a form with many date fields paid that cost per field. The calendar now mounts when the popover opens and opens on the field's current value. Opening, focus and dismissal are unchanged. (#8902) - A press in a DateInput's own text input, on its clear button or on its label no longer closes its open calendar. Clicking into the date text to fix a digit keeps the calendar showing; a press anywhere else on the page and Escape still close it, and moving focus from anywhere in the field (its text, clear button or calendar button) to another field now closes it too. (#9433) - A press in a DateTimeInput's own time input no longer closes its open list of preset times. Clicking into the time text to fix a digit keeps the list showing; a press anywhere else on the page, moving focus away and Escape still close it. (#9459) - A `Dialog` rendered into a same-origin iframe through a portal now returns focus, when it closes, to the control in the iframe that opened it, as it does in the page. (#8381) - A disabled field that keeps its tab stop (TextInput, TextArea, NumberInput, Typeahead, Tokenizer, Selector, MultiSelector, and DateInput, TimeInput, DateRangeInput and DateTimeInput on every surface: popover, native and bottom sheet) now shows keyboard focus under forced colors, such as Windows High Contrast. Its focus border takes the system Highlight color there, as enabled fields' does. Nothing changes outside forced colors. (#9410) - A disabled `Item`, `ListItem` or `TreeList` row with an `href` no longer navigates from a screen reader, Enter, or a link menu. Its link now has no `href`, `target` or `rel`, as a disabled `Link` does, and it keeps the link role. (#9056) - Under a finger in Chrome, the page beside an open non-modal `Drawer` (`hasScrim={false}`) scrolls again. The panel clipped its content with `overflow: hidden`, which made it a scroll container, and Chrome held a drag on the page beside it in that container's overscroll containment, so the page did not move. It now clips with `overflow: clip`, which clips the same way without a scroll container. The panel's content area still scrolls on its own, and a modal drawer is unchanged. (#8636) - The development warning for passing both `button` and `renderTrigger` to `DropdownMenu` now names `renderTrigger`; it named a `trigger` prop that does not exist. The docs match the component too: `button` is mutually exclusive with `renderTrigger`, the private menu radius defaults to `--radius-container`, and a disabled `DropdownMenuCheckboxItem` or `DropdownMenuRadioItem` takes no focus — the arrow keys, typeahead, and the pointer highlight skip it — while it stays in the accessibility tree as disabled. (#7517) - A keyboard-focused `DropdownMenu` row now shows the standard focus ring, drawn inside the row, in every color mode. Rows showed focus only with a translucent background, which forced colors (Windows High Contrast and similar modes) replace with the page color, so a keyboard user there could not tell which row Enter would activate. The ring follows the last input: after a key press it marks the focused row, including a row the mouse then moves focus to; after a mouse or touch press it does not show. Action, destructive, checkbox, radio and sub-menu rows all show it, including in `ContextMenu` and breadcrumb menus. A `ContextMenu` opened by right-click or long-press focuses its first row without the ring; one opened from the keyboard shows it. (#7517) - The anchored `DropdownMenu` now reflects `data-presentation="popover"` on its `dropdown-menu` target, as the bottom sheet already reflected `bottom-sheet`. A theme rule written for `presentation:popover`, which the docs list as a visual prop of that target, now applies. (#7517) - `DropdownMenu` and `MoreMenu` now forward the caller's ref to the trigger button in the bottom-sheet presentation (`architecture:public-component-api` INV8). Before, `presentation="bottom-sheet"`, or `presentation="adaptive"` on a compact touch screen, replaced the `button.ref` (and the `ref` that `MoreMenu` passes) with an internal ref, so a caller's ref stayed empty. The popover presentation already forwarded it. Apps need no code change. (#8898) - `DropdownMenu`, `MoreMenu` and `ContextMenu` render a submenu for a data item with nested `items` inside a `{type: 'section'}`, as they do at the top level. Before, such an item rendered as a plain row with no flyout and no `aria-haspopup`, although its type allows nested `items` there; the bottom sheet on a phone already showed it as a submenu. (#8858) - With an `animatedLayout` handle, a Collapsible or a TreeList row closed while it opens, or opened again while it closes, continues from what it shows: the content's edge stays on the content after it on every frame, instead of jumping back to fully shown or hidden. Under Reduce Motion with a touch pointer, where the content cross-fades instead, a reversal still starts its fade over. (#8721) - Field: `FieldStatusPlacement`, the type of every field control's `statusVariant` (`'attached' | 'detached' | 'tooltip'`), is exported from `@astryxdesign/core` and `@astryxdesign/core/Field`, so a wrapper component can type a `statusVariant` prop it forwards. (#9368) - Enabled Field inputs (TextInput, TextArea, NumberInput, Selector, MultiSelector, Typeahead, Tokenizer, and the date and time inputs) now show keyboard focus under forced colors, such as Windows High Contrast. Forced colors drop the inset focus shadow and repaint every border in one system color, so a focused field looked the same as one at rest. A focused field's border now takes the system Highlight color there, with or without a status. Disabled fields, which stay focusable, don't get it yet. Nothing changes outside forced colors. (#9392) - FieldStatus wraps a long unbroken word in a validation message, such as an email address or URL echoed from the field, inside the message box instead of painting it past the field's edge where its end could not be read. (#9126) - TextArea, Typeahead and Tokenizer: a caller's `aria-labelledby` no longer replaces the field's own label. Before, it was the only name the control had, so `label="Notes" aria-labelledby="billing-heading"` named the textarea "Billing". Now the caller's ids follow the field's own label ("Notes Billing"), as TextInput, NumberInput, Selector and MultiSelector already do. A Typeahead inside an InputGroup, which ignored the caller's ids altogether, is now named by the group, its label, then the caller's ids. The visible label stays in the accessible name (WCAG 2.2 SC 2.5.3 Label in Name; `family:input-fields` FR10.1). Fields without a caller `aria-labelledby` are unchanged. No API changes. (#8862) - FileInput with `statusVariant="tooltip"` keeps its status button, and the message it reveals, in dropzone mode and while the field is busy (loading or uploading), instead of dropping it and leaving the field's description pointing at nothing. (#9134) - FileInput: a caller's `aria-describedby` and other `aria-*` props now reach the trigger button, the field's focusable control. Before they were set only on the hidden native input, which is `aria-hidden` and never focused, so `aria-describedby="hint"` was never read ("Report" announced without "PDF only, up to 10 MB"). The caller's ids are now joined to the trigger's own description ids, first. The props the trigger composes itself (`aria-label`, `aria-labelledby`, `aria-invalid`, `aria-busy`, `aria-disabled`, `aria-hidden`) are not copied. See `family:input-fields` FR10.1. No API changes. (#9031) - When several picked or dropped files break `accept` or `maxSize`, `FileInput` names every rejected file and why in its status message, not only the first (WCAG 2.2 SC 3.3.1). The messages are listed in the active locale. Going over `maxFiles` still reports the limit, "Maximum N files allowed". (#9043) - Inside ``, FileInput and Slider now tell screen readers they are required even without their own `isRequired`, like the other fields. `isOptional` still opts a field out. (#9053) - ButtonGroup and InputGroup: the rule that rounds a group's last member no longer slows down filling a container in WebKit (as measured), on any page, groups or not. In WebKit, inserting 10,000 children into one element took about 1.15 s with the old rule on the page and about 10 ms with the new one. Corners look exactly as before: only the last member, skipping trailing popovers, templates and dialogs, rounds its trailing corners. (#9394) - Include the visible heading in SideNavHeading and TopNavHeading menu button names, with or without heading links. Keep the translated generic name when TopNavHeading has no heading. (#9329) - Tooltip and HoverCard: a tap on a disabled `Button`, `IconButton` or `ToggleButton`, or a disabled menu item, now opens the tooltip that explains why it is disabled, and nothing activates. Before, with `touchTrigger="auto"` (the default), the tap counted as the control's own action, so on a touch screen the disabled reason could not be reached (`spec:AST-085` FR5, `architecture:interaction-modality` INV4). An `aria-disabled` control now performs no action, and a tap on a label for a disabled control opens its reason too. A tap on a disabled control inside another acting trigger, such as an option row or a link-role card, now opens that trigger's tooltip or hover card. Taps on enabled controls, `touchTrigger="tap"` and `"none"`, and mouse hover are unchanged. (#8207) - Touch press feedback now hears scrolls and page hides on the window's capture phase, where its pointer listeners already were. Under an app's window-capture `stopPropagation`, or a document-capture `stopImmediatePropagation` registered before Core, a finger's pressed look now ends when the content under it scrolls, and every pressed look ends when the page is hidden. (#8360) - TypeScript users applying `interactionOverlayStyles` through an Astryx component's `xstyle` no longer get a type error. The touch-press properties of each variant (`animationName`, `animationDuration`, `animationTimingFunction`, `animationFillMode`, and the colour variants' `backgroundImage`) now carry their CSS value types instead of `unknown`. The generated CSS is unchanged. (#9440) - A disabled swipe action on an `Item` row now stays focusable while the row is swiped open. Before, it rendered a `