# @xds/core # 0.7.7 #### Experimental APIs - Tokenizer gains a touch surface behind `experimental={{presentation: 'bottom-sheet' | 'adaptive'}}`. `bottom-sheet` replaces the inline combobox with a trigger that shows the selected tokens and opens one tall modal sheet: a bordered search field on top, full-width checkbox rows that keep their place while the sheet is open and regroup selected-first on the next open, 50-row progressive rendering for long lists, a `Create "…"` row with a trailing Add action under `hasCreate`, and a footer pinned in every state with a confirmed Clear all and Save. The sheet edits a draft: rows, the create row and Clear all change the selection the sheet shows, and `value` changes once, when Save reports the draft through `onChange` with the last edit that still holds as its `change`; a swipe, scrim or Escape close of a changed draft asks before discarding, and a clean one closes directly. On a touch screen a direct drag on the results dismisses the keyboard without clearing the query. `adaptive` uses the sheet on compact coarse-pointer screens and the popover otherwise, resolved the same way Selector resolves it. The sheet surface loads on demand, so a Tokenizer that does not opt in does not carry it. The trigger describes its selected tokens to assistive technology, announcements made while the sheet is open reach assistive technology through a live region inside the sheet, with `experimental` passed the component also accepts a `Ref` because `ref` reaches the trigger in the sheet presentation (`TokenizerProps` keeps its released `ref` type and gains only the optional `experimental`), and in development the field warns once about props that have no surface in the sheet presentation (`renderItem`, `renderToken`, `endContent`, `hasClear`, `hasEntriesOnFocus`, `menuWidth`, `tokenOverflowBehavior`, `hasAutoFocus`). The sheet's strings come from the `@astryx.tokenizer.*` catalog; the sheet's parts expose no theming targets while the option is experimental. Anything inside Tokenizer's `experimental` prop may change or be removed in a patch release; omitting it keeps the stable behavior. #### New Components - Promote `InfoTip` from Lab to Core, imported from `@astryxdesign/core/InfoTip` or the package root: an info-icon button whose press pins its help. Hover and keyboard focus preview the help, and a click, tap, Enter, or Space pins it open until Escape, a second press, a press outside, or focus leaving. Its default name is the translated "More information", and under a coarse pointer it takes taps out toward 44 px without taking a neighbour's. The `@astryxdesign/lab` `InfoTip` export is now a deprecated re-export of the Core component and is removed in the next release: import it from `@astryxdesign/core` instead. #### New Features - AppShell keeps its header items and the end of its content inside the device's safe area on a phone page that opts into the full screen (`viewport-fit=cover`). A header region or the phone top bar reaches under the status bar and out to the screen's sides while its items stay clear of the status bar, the Dynamic Island and a landscape notch. In `height="auto"`, a phone top bar below a banner sticks under the top inset instead of at the top edge, so its items stay clear when the page scrolls. The main content ends clear of the home indicator (its block-end padding is `contentPadding` plus the bottom inset, so a child that fills it ends above the indicator), in the page or in the main region's own scroller. A shell with no header region or phone top bar takes no top inset, so its content keeps its own top padding there. In landscape only the header is inset, not an inline SideNav or the content's sides. Without `viewport-fit=cover` the insets are zero and nothing moves. The AppShell docs say how a page and an installed web app opt in. - ChatComposerInput's Return key says Send on a touch keyboard. Enter already sends the message; the editor now sets `enterkeyhint="send"`, so iOS shows its Send key instead of a plain Return. A new `enterKeyHint` prop, typed by the exported closed union `EnterKeyHint`, takes another label, such as `enter` for a composer whose `onKeyDown` makes Enter insert a line break on touch keyboards. - Dialog (and so AlertDialog and CommandPalette), Drawer and MobileNav no longer blur the page behind the modal, under every pointer: the 2px full-viewport backdrop blur is costly to repaint. The dim keeps the theme's `--color-overlay`, and in forced colors the modal keeps an edge so it still stands apart from the page. BottomSheet never blurred. A theme keeps the blur by setting `backdropFilter: 'blur(2px)'` on the component's modal backdrop: `components.dialog.base['::backdrop']`, `components['mobile-nav'].base['::backdrop']`, and for Drawer `components.drawer.base[':modal::backdrop']`, which leaves a non-modal drawer (`hasScrim={false}`) unblurred. - Under reduced motion, an indeterminate ProgressBar no longer slides: on every pointer its fill spans the whole track and gently pulses its opacity in place, from full down to 84% and back, two seconds each way. A theme's tempo does not change the pulse, and in the default light and dark themes every fill tone that stands out from the track at 3:1 still does at the pulse's lowest point. - Under a finger (a coarse primary pointer, on every touch device), a determinate ProgressBar moves to a new value the way iOS's progress view does: linearly, taking one second per full track of change at the theme's default tempo (0.8 s from 10% to 90%), and from wherever the fill is drawn when the value changes again mid-way. A theme's tempo scales that time. Above zero the fill never draws shorter than two track heights, and at zero it is not drawn. The motion runs on the compositor, so it keeps going while a script runs; under reduced motion, or with forced colors on, a new value lands at once. A mouse or trackpad keeps the theme's duration and easing. - Search fields ask a touch keyboard for its Search key and no autocorrection. The search inputs of Typeahead, Tokenizer (and so PowerSearch), CommandPaletteInput and the Selector and MultiSelector search row now carry `enterkeyhint="search"` and `autocorrect="off"`. A phone keyboard then shows a Search key instead of Return and leaves names and identifiers as typed. The key is only a label: Enter does what it did before in each field. - SegmentedControl: under a finger, on a touch device (a coarse primary pointer), the control tracks the touch. Dragging the selected segment carries the selection along with the finger, and the segment under the finger is chosen when it lets go (`onChange` fires once, at the lift); letting go outside the control selects nothing. While the selection is dragged, the selected label's colour follows it, with a margin around each boundary so a finger resting on one never flickers; label weights change only at the lift, so nothing reflows under the finger. A tap selects through the browser's own click, and a pressed segment shows the shared pressed overlay; nothing lifts or dims. A vertical drag that starts on the control still scrolls the page. A commit the item's `onClick` vetoes sends the selection back at once; one a controlled parent adopts later lands without a bounce. With Reduce Motion the selection still follows the finger, with no chase, and only the lift cross-fades. Keyboard and assistive technology keep the click; no element is added. - SegmentedControl: a mouse or a pen drags the selection as a finger does. A drag from the selected segment carries it with the pointer, and the release commits the segment under the pointer (`onChange` fires once, at the release). A release outside the control selects nothing, and a drag that starts on another segment commits where it lifts. Under a mouse or a pen, every change slides the selection on the theme's duration and easing, not UIKit's spring, and a click slides it too. With Reduce Motion, a mouse's or a pen's drag still carries the selection, and its release lands at once. Keyboard and assistive technology keep the click. - SegmentedControl: under a finger the selection slides to the new segment on UIKit's spring, whether a tap, an arrow key or a new `value` moved it. The selection indicator is the control's own pseudo-element, so no element is added. The motion runs on the compositor and keeps moving while the main thread is busy. With Reduce Motion nothing travels or scales: the old selection fades out where it is as the new one fades in. The spring is UIKit's measured one, an internal motion role no theme retunes, and no theme value lengthens the Reduce Motion fade. With a mouse or a pen it slides on the theme's duration and easing instead. - Switch's press and drag work with a mouse and a pen as well as a finger: a drag past the flip point toggles the switch at the release, unless the pointer came back past where it pressed. A mouse or pen press released away from the switch leaves it alone, flipped or not, as a checkbox does. With a mouse the switch keeps its desktop look, and the value moves the thumb. On a touchscreen laptop a finger flips it by the same rule, with the desktop look. - Under a finger, on every touch screen, Switch moves like the iOS switch. A press lifts the thumb a little, with a soft shadow, and a horizontal drag moves it with the finger and flips the switch once the finger has travelled most of the track; lifting the finger commits. A tap toggles through the browser's own click, and a hold or a short drag toggles at the lift. The thumb stays inside the track however far the finger drags past either end, in either writing direction. A press slid off the switch and lifted outside still toggles it, as on iOS. A vertical drag scrolls the page and the switch lets go. The motion runs on the compositor, so it stays smooth while scripts run. The thumb keeps its circle and its size on every device, and under a coarse pointer the switch's invisible hit area grows toward 44 × 44 px with nothing visible added, stopping halfway to any neighbouring control so a tap goes to the nearer one. The track keeps its theme's fill, and the colour change crossfades over it. With reduced motion on, a change cross-fades instead of moving on a touch screen and is immediate with a mouse. A press shows the pressed overlay, through a drag too, and a still hold selects no text. Keyboard and assistive technology behave as before. In Chromium, a Switch retargeted right after a tap, such as one tapped again mid-travel, turns around from where it is, with no step back to the start of its travel. Switch joins Slider on the shared press tracking and touch negotiation. #### Fixes - A `Dialog` with `purpose="info"`, a `Drawer`'s scrim, and `CommandPalette` now close on a backdrop press only when the press both starts and ends on the backdrop. Selecting text in a field and releasing past the edge no longer closes it and loses the input. A press on the backdrop alone still closes it, with a mouse, a pen, or a finger. - BottomSheet: in WebKit, including iOS Safari, a sheet at a set height whose content sits directly in it keeps its bottom padding at the end of its scroll (0 → 16 px), instead of ending flush with the last line. - BottomSheet: the open sheet's dialog places its panel with a flex row instead of a grid. In desktop WebKit, measured in Playwright, an update inside an open sheet lays out faster; the iOS simulator showed no difference. A percentage `height` (for example `'50%'`) now takes that share of the screen at the bottom edge; before, a short sheet was cut short and a long one hung from the top of the screen. - BottomSheet: a sheet closed from a control inside it, such as a Done button, a Selector's search field or a menu row, marked itself `inert` and `aria-hidden` while that control still had focus. The browser then dropped focus to the page, or screen readers were left in a hidden subtree, for the length of the exit. Now a standalone sheet that closes with focus inside it stays out of `inert` and `aria-hidden` while that focus stays, and ignores pointer and keyboard activation during its exit; when the exit ends, it closes and returns focus to its opener. The exit still plays. A sheet that closes with focus elsewhere, or that focus leaves during the exit, goes inert at once, as before. - BottomSheet: a sheet that a Suspense boundary hid while it was closing, and then showed again, never finished closing. Its dialog stayed open, modal and inert, so the whole page under it ignored taps, clicks and focus until a reload. This happens, for example, when a sheet's action navigates to a route that suspends. Now the sheet finishes closing when it is shown again, and the page is usable. - A `BreadcrumbItem` link or button inside the AppShell mobile drawer now closes the drawer after it runs `onClick`, like the `TopNavItem` and `SideNavItem` rows beside it. Before, a crumb navigated and left the drawer open over the new page. A crumb marked `isCurrent`, which goes nowhere, leaves the drawer open. (#9465) - Button, IconButton: a tooltip that repeated the button's accessible name was also added as its description, so screen readers read the same words twice ("Close, button, Close"). Astryx's own close, pagination, copy and collapse buttons did this by default. Now a tooltip whose trimmed text equals the accessible name still shows, but adds no description, when Button can read that name: its `aria-label`, or its label when any icon or end content is a decorative Icon. A tooltip that says more, or a Button named another way (`aria-labelledby`, or text in its icon or end content), keeps the description. - A `CheckboxList` with an error `status` now makes every checkbox `aria-invalid`, so a screen reader announces the list as invalid as each checkbox takes focus, as `Switch` and the text inputs already do. The message still renders once, from the list. - After a gesture takes a touch, the page no longer sees that touch's late `mousedown` and `mouseup`. WebKit sends them a few milliseconds after a held tap's cancelled `touchend`, aimed at whatever is under the finger by then; they now go with the click. - Avatar, BreadcrumbItem, Button, Lightbox, SegmentedControlItem, Tab, Tokenizer: a slot whose value is `0` showed a stray "0" beside its slot, or, in SegmentedControlItem's and Tab's icons and Tab's end content, was dropped. That covers `startIcon`, `icon`, `endContent`, a Lightbox `caption` and `selectedIcon`. Now each slot follows the shared presence check. Empty values (`null`, `false`, `''`) render no slot, as an omitted one does, and `0` renders inside its slot as content. A Tab whose `selectedIcon` is `0` shows it while selected instead of falling back to `icon`. An Avatar whose `status` is `0` no longer shows a stray "0"; its status slot still renders only for a truthy value. - Pressing Enter in the typable date field of a `DateInput` or `DateTimeInput` (the pointer surface) now submits the surrounding form when nothing is typed, as in any text field. Typed text is still committed first, and that Enter does not submit. A disabled or busy field still does nothing on Enter. - DateRangeInput: with `presets`, the popover overflowed a phone-width screen. The calendar was cut off on the right, so the Saturday column and the end of a selected range were hidden, and on screens under about 364 px Next month was out of reach too. Now, when the presets and a one-month calendar do not fit side by side, the presets stack above the calendar, and the calendar and its navigation stay inside the popover. On a short screen the popover's content scrolls. Where the presets fit beside a one-month calendar, the layout does not change. - `Dialog` (and `AlertDialog`, `CommandPalette`): a dialog that unmounts while it is open, for example one rendered only while open (`{isEditing &&