@fusion.dev/helix-headless 0.157.0 → 0.159.0

package/types/vue.d.ts

@@ -245,9 +245,9 @@ import type {
   HelixBeforeResizeEvent,
   HelixCollapseEvent,
   HelixResizedEvent,
+  HelixLoadEvent,
   HelixTourAskEvent,
   HelixTourStatusEvent,
-  HelixLoadEvent,
   HelixEndEvent,
   HelixNextEvent,
   HelixPreviousEvent,
@@ -530,9 +530,18 @@ export type HelixHeadlessAppHeaderElementEvent<E = Event> = TypedEvent<
   HelixHeadlessAppHeader,
   E
 >;
+/** `helix-before-close` event type */
+export type HelixHeadlessAppHeaderHelixBeforeCloseElementEvent =
+  HelixHeadlessAppHeaderElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixHeadlessAppHeaderHelixBeforeOpenElementEvent =
+  HelixHeadlessAppHeaderElementEvent<HelixBeforeOpenEvent>;
 /** `helix-scrolled` event type */
 export type HelixHeadlessAppHeaderHelixScrolledElementEvent =
   HelixHeadlessAppHeaderElementEvent<HelixScrolledEvent>;
+/** `toggle` event type */
+export type HelixHeadlessAppHeaderToggleElementEvent =
+  HelixHeadlessAppHeaderElementEvent<ToggleEvent>;
 
 export type HelixHeadlessAppHeaderVueProps = {
   /** Where the middle region sits in the bar.
@@ -582,11 +591,46 @@ page scrolls up. */
   /** The id of the element whose scrolling lifts the bar, for an app shell that
 scrolls a container instead of the window. Unset is the window. */
   scroller?: (HelixHeadlessAppHeader["scroller"]) | undefined;
+  /** Where the toggle that opens a folded middle region sits: at the end of the
+bar, after the trailing content, or with `start`, before the leading
+content.
+
+Optional, so the resting bar writes no attribute onto the host. */
+  "toggle-placement"?: (HelixHeadlessAppHeader["togglePlacement"]) | undefined;
+  /** Where the toggle that opens a folded middle region sits: at the end of the
+bar, after the trailing content, or with `start`, before the leading
+content.
+
+Optional, so the resting bar writes no attribute onto the host. */
+  togglePlacement?: (HelixHeadlessAppHeader["togglePlacement"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  "default-open"?: (HelixHeadlessAppHeader["defaultOpen"]) | undefined;
+  /** Whether the element starts open. Ignored once `open` is written. */
+  defaultOpen?: (HelixHeadlessAppHeader["defaultOpen"]) | undefined;
+  /** Whether the element is open.
+
+One property, not two, so `dialog.open` answers the question anyone
+asking it meant. Writing always applies; `<helix-dialog open>` is the
+same statement in markup.
+
+**Not reflected, and that is required rather than tidy.** Reflection
+writes the resolved state back as an attribute, so an element that opened
+itself would put `open` on its own host: cloned, serialized for
+hydration, or diffed by a framework, it comes back holding whatever the
+last reader did rather than what the author wrote. `:state(open)` carries
+the resolved state for stylesheets, which is what the mirror is for. */
+  open?: (HelixHeadlessAppHeader["open"]) | undefined;
 };
 
 export type HelixHeadlessAppHeaderVueEvents = {
+  /** The folded region is about to close. Cancelable: cancel it to keep it open. */
+  "helix-before-close": HelixHeadlessAppHeaderHelixBeforeCloseElementEvent;
+  /** The folded region is about to open. Cancelable: cancel it to keep it closed. */
+  "helix-before-open": HelixHeadlessAppHeaderHelixBeforeOpenElementEvent;
   /** Fired when the page crosses the scroll threshold, with the new state. A custom state cannot be observed the way an attribute can, so listen for this event to follow it. The event uses the header's own threshold and hysteresis, so you do not need a second scroll listener. */
   "helix-scrolled": HelixHeadlessAppHeaderHelixScrolledElementEvent;
+  /** The folded region opened or closed. The event carries `newState` and `oldState`. */
+  toggle: HelixHeadlessAppHeaderToggleElementEvent;
 };
 
 /** `HelixHeadlessAreaChart` component event */
@@ -1233,6 +1277,14 @@ export type HelixHeadlessButtonGroupHelixBeforeChangeElementEvent =
   HelixHeadlessButtonGroupElementEvent<HelixBeforeChangeEvent>;
 
 export type HelixHeadlessButtonGroupVueProps = {
+  /** Keeps at least one button pressed once one is, as React Aria's
+`disallowEmptySelection`: a press that would leave none pressed is
+refused. */
+  "disallow-empty-selection"?: (HelixHeadlessButtonGroup["disallowEmptySelection"]) | undefined;
+  /** Keeps at least one button pressed once one is, as React Aria's
+`disallowEmptySelection`: a press that would leave none pressed is
+refused. */
+  disallowEmptySelection?: (HelixHeadlessButtonGroup["disallowEmptySelection"]) | undefined;
   /** The group's name, read by screen readers.
 
 On the host through internals, so an author's `aria-label` still overrides
@@ -4391,6 +4443,13 @@ hydration, or diffed by a framework, it comes back holding whatever the
 last reader did rather than what the author wrote. `:state(open)` carries
 the resolved state for stylesheets, which is what the mirror is for. */
   open?: (HelixHeadlessCommand["open"]) | undefined;
+  /** Whether a command is kept by the filter: a function given the command's
+words and the filter, trimmed, that returns `true` to keep it showing, as
+React Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+
+Absent, a command is kept where its words hold the filter, in any case. A
+property only, there being no way to write a function in markup. */
+  filterMatch?: (HelixHeadlessCommand["filterMatch"]) | undefined;
   /** The commands as data, for a palette too long to draw whole: each a value,
 which is also its words, or a record with a `value`, a `label` and
 `disabled`. Handed to the list, which draws only the commands in sight and
@@ -8894,7 +8953,9 @@ Not reflected, as a state never is. `row-current` is the part a
 stylesheet draws it from. */
   current?: (HelixHeadlessListItem["current"]) | undefined;
   /** Takes the row out of reach in a list with `selection-mode`: the arrow keys
-pass over it and it cannot be selected or acted on. */
+pass over it and it cannot be selected or acted on. In a list with
+`disabled-behavior="selection"`, it cannot be selected and is reached and
+acted on as any row is. */
   disabled?: (HelixHeadlessListItem["disabled"]) | undefined;
   /** The URL the row links to. Leave it empty for a row that is not a link.
 
@@ -8930,6 +8991,10 @@ being moved, or the one the drop indicator is beside. Unset otherwise. */
 Written by the list from its own `value`, and unset where nothing can be
 selected, which keeps `aria-selected` off a list that does not select. */
   selected?: (HelixHeadlessListItem["selected"]) | undefined;
+  /** Whether `disabled` takes the row out of selection alone, written by a list
+with `disabled-behavior="selection"`. No attribute: it is coordination
+between elements, as `focusable` is. */
+  selectionOnly?: (HelixHeadlessListItem["selectionOnly"]) | undefined;
 };
 
 export type HelixHeadlessListItemVueEvents = {
@@ -8965,6 +9030,20 @@ refused, in a `reorderable` list. */
   /** What screen readers hear when a held row is put back, or a move is
 refused, in a `reorderable` list. */
   canceledLabel?: (HelixHeadlessList["canceledLabel"]) | undefined;
+  /** What `disabled` takes from a row, in a list that selects: `all`, which
+passes over the row, or `selection`, which keeps the row out of the
+selection and lets the keys reach it and Enter or a press act on it, as
+React Aria's GridList takes `disabledBehavior`.
+
+Absent is `all`. */
+  "disabled-behavior"?: (HelixHeadlessList["disabledBehavior"]) | undefined;
+  /** What `disabled` takes from a row, in a list that selects: `all`, which
+passes over the row, or `selection`, which keeps the row out of the
+selection and lets the keys reach it and Enter or a press act on it, as
+React Aria's GridList takes `disabledBehavior`.
+
+Absent is `all`. */
+  disabledBehavior?: (HelixHeadlessList["disabledBehavior"]) | undefined;
   /** What screen readers hear when a row is dropped, in a `reorderable` list. */
   "dropped-label"?: (HelixHeadlessList["droppedLabel"]) | undefined;
   /** What screen readers hear when a row is dropped, in a `reorderable` list. */
@@ -9348,6 +9427,14 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessListbox["name"]) | undefined;
+  /** Whether an option is kept by the filter: a function given the option's
+words and the filter, trimmed, that returns `true` to keep it showing, as
+React Aria's `Autocomplete` takes `filter`. For matching that ignores
+accents, matches the start of each word, or matches out of order.
+
+Absent, an option is kept where its words hold the filter, in any case. A
+property only, there being no way to write a function in markup. */
+  filterMatch?: (HelixHeadlessListbox["filterMatch"]) | undefined;
   /** The options as data, for a list too long to draw whole: each a value,
 which is also its words, or a record with a `value`, a `label` and
 `disabled`. Set, the list draws only the options in sight, and the ones
@@ -11194,8 +11281,11 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessNumberInput["name"]) | undefined;
-  /** The value as a number, or `NaN` while the control is empty.
+  /** The value as a number, or `NaN` while the control is empty or does not
+hold a number.
 
+Read in the locale and the format, as the form reads it, so `1,5` typed
+in a locale with a decimal comma is 1.5 here while the form holds 1.5.
 `NaN` and not zero, which is the trap the platform already avoids: `Number('')`
 is zero, so an empty control would report a number it does not hold and a
 form would submit it. */
@@ -13315,7 +13405,8 @@ export type HelixHeadlessSkeletonVueProps = {
   /** What is loading, read out as the placeholder's name, such as "Loading
 profile".
 
-Absent hides the placeholder from screen readers. */
+Absent hides the placeholder from screen readers. Around content, the name
+is read while `loading` is set, and the loaded content is read as it is. */
   label?: (HelixHeadlessSkeleton["label"]) | undefined;
   /** Whether the content inside is still loading, which keeps it inert and
 draws the placeholder over it.
@@ -14823,7 +14914,19 @@ known by its place among the rows as written. */
 
 export type HelixHeadlessTableRowVueEvents = {};
 
+/** `HelixHeadlessTabPanel` component event */
+export type HelixHeadlessTabPanelElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessTabPanel,
+  E
+>;
+/** `helix-load` event type */
+export type HelixHeadlessTabPanelHelixLoadElementEvent =
+  HelixHeadlessTabPanelElementEvent<HelixLoadEvent>;
+
 export type HelixHeadlessTabPanelVueProps = {
+  /** Whether the panel's content waits in a `<template>` until the panel is
+first shown. */
+  lazy?: (HelixHeadlessTabPanel["lazy"]) | undefined;
   /** Whether this panel is the visible one. */
   selected?: (HelixHeadlessTabPanel["selected"]) | undefined;
   /** Pairs the panel with the tab of the same value. */
@@ -14841,7 +14944,10 @@ the pattern names one anyway. */
   label?: (HelixHeadlessTabPanel["label"]) | undefined;
 };
 
-export type HelixHeadlessTabPanelVueEvents = {};
+export type HelixHeadlessTabPanelVueEvents = {
+  /** Fired the first time a `lazy` panel is shown, once its template's content is in. */
+  "helix-load": HelixHeadlessTabPanelHelixLoadElementEvent;
+};
 
 /** `HelixHeadlessTabs` component event */
 export type HelixHeadlessTabsElementEvent<E = Event> = TypedEvent<
@@ -16205,6 +16311,12 @@ consumer's server markup does not have. A sheet carries the resting
 arrangement in its own `:host` rule and the selectors describe only the
 departures, which is what `orientation` does. */
   placement?: (HelixHeadlessToast["placement"]) | undefined;
+  /** The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
+  "swipe-direction"?: (HelixHeadlessToast["swipeDirection"]) | undefined;
+  /** The edge a touch or a pen swipes a message toward to dismiss it: `end`,
+the end of the line, or `start`, `top` or `bottom`. Unset is `end`. */
+  swipeDirection?: (HelixHeadlessToast["swipeDirection"]) | undefined;
 };
 
 export type HelixHeadlessToastVueEvents = {
@@ -16705,6 +16817,14 @@ The shape is `Carousel`'s, which is the nearest thing in the library: a
   "next-label"?: (HelixHeadlessTour["nextLabel"]) | undefined;
   /** Label for the control that goes on. */
   nextLabel?: (HelixHeadlessTour["nextLabel"]) | undefined;
+  /** What a press outside the current stop and its target does while the tour
+runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+Skip does, and `block` refuses the press. */
+  "outside-press"?: (HelixHeadlessTour["outsidePress"]) | undefined;
+  /** What a press outside the current stop and its target does while the tour
+runs. Unset, nothing: the page stays usable. `close` ends the tour, as
+Skip does, and `block` refuses the press. */
+  outsidePress?: (HelixHeadlessTour["outsidePress"]) | undefined;
   /** Draws each stop's place in the run in its panel, as well as saying it. */
   progress?: (HelixHeadlessTour["progress"]) | undefined;
   /** Each stop's place in the run, with `{index}` and `{count}` filled in and
@@ -16813,6 +16933,9 @@ heading. */
 Reflected, because the styled tier places a dialog and a floating panel by
 it, and unset at rest, so no default is written onto the host. */
   type?: (HelixHeadlessTourStop["type"]) | undefined;
+  /** Run as the tour reaches the stop, before it is shown: see the description
+above. A function, so it is set from script and has no attribute. */
+  effect?: (HelixHeadlessTourStop["effect"]) | undefined;
 };
 
 export type HelixHeadlessTourStopVueEvents = {
@@ -18089,6 +18212,8 @@ export type CustomCssProperties = {
   "--toast-duration"?: (string) | undefined;
   /** How far a swipe has moved the message across, in pixels, toward the right. */
   "--toast-swipe-x"?: (string) | undefined;
+  /** How far a swipe has moved the message down, in pixels, under a `swipe-direction` of `top` or `bottom`. */
+  "--toast-swipe-y"?: (string) | undefined;
   /** The lit box's height, in pixels, padding included. Written on the spotlight while it lights a target. */
   "--tour-spotlight-height"?: (string) | undefined;
   /** The lit box's width, in pixels, padding included. Written on the spotlight while it lights a target. */
@@ -18129,7 +18254,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAnnouncementVueProps,
     HelixHeadlessAnnouncementVueEvents
   >;
-  /** Tracks whether the page has scrolled and sets the custom state 'scrolled', so the styled tier can lift the bar without a scroll handler of its own. The state is read when the element connects. A fresh load starts at the top, which matches the server markup, and a reload partway down the page is corrected on hydration.  The element uses a custom state because an attribute such as 'data-scrolled', written onto its own host, is one the server did not send. A hydrating framework would report a mismatch whenever the page reloads far enough down. 'ElementInternals.states' is not in the DOM, so hydration has nothing to compare. Select the state with ':state(scrolled)'.  The page is the window unless 'scroller' names the element that scrolls, for an app shell whose content scrolls inside a container.  **Set 'hide-on-scroll' for a bar that moves out of the way.** Scrolling down past the bar's own height hides it, and scrolling up shows it again, as does focus moving into it. The custom state 'hidden' is on the host while it is hidden, and the styled tier slides a 'sticky' bar up out of view.  **Set 'fold-below' to fold the middle region on a narrow screen.** Below that many pixels of the bar's own width, the middle region is hidden behind a toggle at the end of the bar, named by 'menu-label'. The toggle says whether the region is open with 'aria-expanded', and the region opens below the row. Escape closes it and puts focus back on the toggle. The custom state 'folded' is on the host while the bar is that narrow, and 'open' while the folded region is open. A server serves the bar unfolded, and the browser folds it once it has measured it.  The host is the page's 'banner' landmark. Placed inside 'main', 'article', 'aside', 'nav' or 'section', it is a plain box instead, as a native '<header>' is there, so a header inside a card or a pane does not add a second banner. The ancestors are read as the accessibility tree reads them, through the slots that take the header in, so one slotted into a component that draws a '<nav>', such as 'Navigation', is not a banner either. A server cannot see the ancestors, so it serves the banner and the browser corrects it when the element connects. */
+  /** Tracks whether the page has scrolled and sets the custom state 'scrolled', so the styled tier can lift the bar without a scroll handler of its own. The state is read when the element connects. A fresh load starts at the top, which matches the server markup, and a reload partway down the page is corrected on hydration.  The element uses a custom state because an attribute such as 'data-scrolled', written onto its own host, is one the server did not send. A hydrating framework would report a mismatch whenever the page reloads far enough down. 'ElementInternals.states' is not in the DOM, so hydration has nothing to compare. Select the state with ':state(scrolled)'.  The page is the window unless 'scroller' names the element that scrolls, for an app shell whose content scrolls inside a container.  **Set 'hide-on-scroll' for a bar that moves out of the way.** Scrolling down past the bar's own height hides it, and scrolling up shows it again, as does focus moving into it. The custom state 'hidden' is on the host while it is hidden, and the styled tier slides a 'sticky' bar up out of view.  **Set 'fold-below' to fold the middle region on a narrow screen.** Below that many pixels of the bar's own width, the middle region is hidden behind a toggle at the end of the bar, named by 'menu-label', or at its start with 'toggle-placement="start"'. The toggle says whether the region is open with 'aria-expanded', and the region opens below the row. The region follows the toggle's region in focus order, so Tab from the toggle at the end goes into the open region. The custom state 'folded' is on the host while the bar is that narrow, and 'open' while the folded region is open. A server serves the bar unfolded, and the browser folds it once it has measured it.  **'open' says whether the folded region is open, and setting it opens or closes the region.** 'requestOpen(true)' and 'requestOpen(false)' do the same and send 'helix-before-open' or 'helix-before-close' first, which you can cancel, and 'toggleOpen()' asks for the opposite. 'toggle' follows every change. The region closes on Escape, which puts focus back on the toggle, when focus moves to something outside the header, and on a press outside it. A bar that widens past 'fold-below' closes its region.  The host is the page's 'banner' landmark. Placed inside 'main', 'article', 'aside', 'nav' or 'section', it is a plain box instead, as a native '<header>' is there, so a header inside a card or a pane does not add a second banner. The ancestors are read as the accessibility tree reads them, through the slots that take the header in, so one slotted into a component that draws a '<nav>', such as 'Navigation', is not a banner either. A server cannot see the ancestors, so it serves the banner and the browser corrects it when the element connects. */
   "helix-headless-app-header": DefineCustomElement<
     HelixHeadlessAppHeader,
     HelixHeadlessAppHeaderVueProps,
@@ -18183,7 +18308,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessBreadcrumbsVueProps,
     HelixHeadlessBreadcrumbsVueEvents
   >;
-  /** Sets 'role="group"' on the host through internals, and 'label' names the group. Without a name, a screen reader announces the buttons as separate controls, and a development build warns once with the kind 'missing-name'.  The group does not manage focus, so each button keeps its own tab stop. For one tab stop with arrow keys between a mix of controls, the APG toolbar pattern, use Toolbar.  Buttons are slotted, so they stay your own elements and keep their own appearance and size.  **Buttons that stay pressed.** With 'selection-mode', each button with a 'value' is a toggle button: a press presses or releases it, and it says so with 'aria-pressed'. 'single' keeps one pressed at a time, and a press on the pressed one releases it. 'multiple' lets any number be pressed. 'value' is the pressed values, comma separated. A press sends a cancelable 'helix-before-change' with the value it would leave, then 'change'.  The pressed state is written on the control inside each button's shadow root, so the markup you rendered is never changed and a framework hydrating it sees what its server sent. That is also why only Helix buttons are toggles: a native '<button>' or a button without a 'value' stays a plain action button in the group, and a native one without its own 'aria-pressed' warns once, with the runtime kind 'untold-toggle'. The inner control also carries '--button-group-pressed', '1' or '0', for a '::part(button)' rule of yours.  Use Toggle Group instead for a choice that belongs in a form, or one where the arrow keys choose as they move: it is a 'radiogroup' of options with a form value, 'required' and validation. A Button Group in a selection mode is a set of actions that stay on, such as bold and italic, or a view that a press switches, and it submits nothing.  **Keyboard.** In a selection mode the group is one tab stop: the button focus was last on, then the first pressed one, then the first one.  | Key | What it does | |---|---| | Right, Down | Moves to the next button, from the last back to the first. | | Left, Up | Moves to the button before, from the first round to the last. | | Home, End | Moves to the first or the last button. | | Space, Enter | Presses or releases the focused button. |  Left and Right swap on a right-to-left page, and a disabled button is passed over. In a selection mode the group is a 'toolbar', with 'aria-orientation' under 'orientation="vertical"'. Inside a toolbar it stays a named 'group', and the toolbar's own arrow keys walk its buttons, so a reader meets one toolbar. */
+  /** Sets 'role="group"' on the host through internals, and 'label' names the group. Without a name, a screen reader announces the buttons as separate controls, and a development build warns once with the kind 'missing-name'.  The group does not manage focus, so each button keeps its own tab stop. For one tab stop with arrow keys between a mix of controls, the APG toolbar pattern, use Toolbar.  Buttons are slotted, so they stay your own elements and keep their own appearance and size.  **Buttons that stay pressed.** With 'selection-mode', each button with a 'value' is a toggle button: a press presses or releases it. 'multiple' lets any number be pressed, and each button says so with 'aria-pressed'. 'single' keeps one pressed at a time: the group is a 'radiogroup' and each button a 'radio' that says so with 'aria-checked', as React Aria's toggle button group is. A press on the pressed one releases it, unless 'disallow-empty-selection' keeps one pressed. 'value' is the pressed values, comma separated. A press sends a cancelable 'helix-before-change' with the value it would leave, then 'change'. A pressed Helix button has ':state(pressed)' on its own element.  The pressed state is written on the control inside each button's shadow root, so the markup you rendered is never changed and a framework hydrating it sees what its server sent. That is also why only Helix buttons are toggles: a native '<button>' or a button without a 'value' stays a plain action button in the group, and a native one without its own 'aria-pressed' warns once, with the runtime kind 'untold-toggle'. The inner control also carries '--button-group-pressed', '1' or '0', for a '::part(button)' rule of yours.  Use Toggle Group instead for a choice that belongs in a form, or one where the arrow keys choose as they move: it is a 'radiogroup' of options with a form value, 'required' and validation. A Button Group in a selection mode is a set of actions that stay on, such as bold and italic, or a view that a press switches, and it submits nothing.  **Keyboard.** In a selection mode the group is one tab stop: the button focus was last on, then the first pressed one, then the first one.  | Key | What it does | |---|---| | Right, Down | Moves to the next button, from the last back to the first. | | Left, Up | Moves to the button before, from the first round to the last. | | Home, End | Moves to the first or the last button. | | Space, Enter | Presses or releases the focused button. |  Left and Right swap on a right-to-left page, and a disabled button is passed over. Under 'multiple' the group is a 'toolbar', with 'aria-orientation' under 'orientation="vertical"'. Inside a toolbar it stays a named 'group', and the toolbar's own arrow keys walk its buttons, so a reader meets one toolbar. Under 'single' it is a 'radiogroup' either way. */
   "helix-headless-button-group": DefineCustomElement<
     HelixHeadlessButtonGroup,
     HelixHeadlessButtonGroupVueProps,
@@ -18291,7 +18416,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessComboboxVueProps,
     HelixHeadlessComboboxVueEvents
   >;
-  /** The list is a 'Listbox', which handles filtering, the empty state, the match highlight, 'aria-activedescendant', scrolling an option into view, and moving between options with the keyboard. The palette adds a dialog and a hotkey that opens it.  The palette keeps no value. It is not a form control and submits nothing. Choosing an option dispatches 'helix-select' once. To remember the last command, store it yourself. An option with 'href' is a link to a page, which the browser follows once the palette has closed.  The hotkey listener is on the document, so the hotkey works from anywhere on the page, including inside another control's text field, whether or not the palette is open. 'mod' means Command on a Mac and Control elsewhere, so you write one binding.  With 'inline', the palette is drawn in the page with no dialog, as a search over a list that is always shown.  **Pages.** A command can open a page of commands of its own, as a palette offers "Change theme" and then the themes. Give the option 'opens' with a name, and slot the page's commands as 'page:' and that name:  '''html <helix-command>   <helix-option value="theme" opens="theme">Change theme</helix-option>   <helix-option value="dark" slot="page:theme">Dark</helix-option>   <helix-option value="light" slot="page:theme">Light</helix-option> </helix-command> '''  Choosing the opener says 'helix-select' with its value, and canceling it keeps the page that is shown. The list then shows the page, named by the opener's words, and Backspace in an empty filter goes back. 'page' says which page is shown.  The filter is cleared when the palette closes, so each opening starts from the full list. Combobox and Select do the same. As typing narrows the list, a screen reader hears how many commands are left, such as "3 commands".  **Keyboard.** Focus goes to the filter field as the palette opens, and the highlight moves through the commands while you type.  | Key | What it does | |---|---| | 'hotkey', Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With 'inline', puts focus in its filter field. | | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. | | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. | | Home, End, Left, Right | Move the caret in the filter field. | | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with 'opens', shows its page. | | Command or Control with Enter | Takes the highlighted command's 'alternate' destination, where it has one. | | Backspace | In an empty filter on a page, goes back to the page before. | | Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. | | Tab | Stays in the palette, which is modal. With 'inline', moves on through the page. |  **ARIA.** The palette is a modal 'dialog' named by 'label', or with 'inline' no dialog at all. Inside it the filter field is a 'combobox' with 'aria-activedescendant' on the highlighted command, and the commands are a 'listbox' of 'option's. How many commands typing left, the empty text and the loading text are said in a polite live region. */
+  /** The list is a 'Listbox', which handles filtering, the empty state, the match highlight, 'aria-activedescendant', scrolling an option into view, and moving between options with the keyboard. The palette adds a dialog and a hotkey that opens it.  The palette keeps no value. It is not a form control and submits nothing. Choosing an option dispatches 'helix-select' once. To remember the last command, store it yourself. An option with 'href' is a link to a page, which the browser follows once the palette has closed.  The hotkey listener is on the document, so the hotkey works from anywhere on the page, including inside another control's text field, whether or not the palette is open. 'mod' means Command on a Mac and Control elsewhere, so you write one binding.  With 'inline', the palette is drawn in the page with no dialog, as a search over a list that is always shown.  **Pages.** A command can open a page of commands of its own, as a palette offers "Change theme" and then the themes. Give the option 'opens' with a name, and slot the page's commands as 'page:' and that name:  '''html <helix-command>   <helix-option value="theme" opens="theme">Change theme</helix-option>   <helix-option value="dark" slot="page:theme">Dark</helix-option>   <helix-option value="light" slot="page:theme">Light</helix-option> </helix-command> '''  Choosing the opener says 'helix-select' with its value, and canceling it keeps the page that is shown. The list then shows the page, named by the opener's words, and a screen reader hears those words. Backspace in an empty filter goes back, and a screen reader hears the name of the page it goes back to. 'page' says which page is shown.  The filter is cleared when the palette closes, so each opening starts from the full list. Combobox and Select do the same. As typing narrows the list, a screen reader hears how many commands are left, such as "3 commands".  **Keyboard.** Focus goes to the filter field as the palette opens, and the highlight moves through the commands while you type.  | Key | What it does | |---|---| | 'hotkey', Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With 'inline', puts focus in its filter field. | | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. | | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. | | Home, End, Left, Right | Move the caret in the filter field. | | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with 'opens', shows its page. | | Command or Control with Enter | Takes the highlighted command's 'alternate' destination, where it has one. | | Backspace | In an empty filter on a page, goes back to the page before. | | Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. | | Tab | Stays in the palette, which is modal. With 'inline', moves on through the page. |  **ARIA.** The palette is a modal 'dialog' named by 'label', or with 'inline' no dialog at all. Inside it the filter field is a text field with 'aria-autocomplete="list"', 'aria-controls' on the list, and 'aria-activedescendant' on the highlighted command, as the field of React Aria's 'Autocomplete' is. The commands are a 'listbox' of 'option's. How many commands typing left, the empty text and the loading text are said in a polite live region. */
   "helix-headless-command": DefineCustomElement<
     HelixHeadlessCommand,
     HelixHeadlessCommandVueProps,
@@ -18465,13 +18590,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessLegendVueProps,
     HelixHeadlessLegendVueEvents
   >;
-  /** Wraps one piece of content in the lightbox, such as a picture, a video frame, or a chart. The lightbox shows one item at a time, and the root decides which.  Each item is a 'group' with the role description 'slide', named by its 'label' or, without one, by its place in the set, such as "2 of 5", as the APG carousel pattern names a slide. The lightbox supplies both words, so they are translated on the lightbox.  An item that is not current is hidden and stays in the DOM, as a 'TabPanel' does. Crawlers can read it, it is in the server-rendered markup, and an '<img>' that has decoded does not decode again when you go back to it. */
+  /** Wraps one piece of content in the lightbox, such as a picture, a video frame, or a chart. The lightbox shows one item at a time, and the root decides which.  Each item is a 'group' with the role description 'slide', named by its 'label' or, without one, by its place in the set, such as "2 of 5", as the APG carousel pattern names a slide. The lightbox supplies both words, so they are translated on the lightbox. A 'description', while there is one, describes the group, so a screen reader says it with the name.  An item that is not current is hidden and stays in the DOM, as a 'TabPanel' does. Crawlers can read it, it is in the server-rendered markup, and an '<img>' that has decoded does not decode again when you go back to it. */
   "helix-headless-lightbox-item": DefineCustomElement<
     HelixHeadlessLightboxItem,
     HelixHeadlessLightboxItemVueProps,
     HelixHeadlessLightboxItemVueEvents
   >;
-  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label', whose glyphs you can replace in the 'previous-icon', 'next-icon' and 'dismiss-icon' slots. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  **Set 'max-zoom' to let a reader zoom into the shown item**, such as '3'. Two fingers pinch it, a double click or a double tap zooms all the way in about the point pressed and back out, and once zoomed one pointer drags it about. '+' and '-' zoom in and out from the keyboard, and '0' puts it back. The scale and the offset are on the 'viewport' part as '--lightbox-zoom', '--lightbox-pan-x' and '--lightbox-pan-y', written only while zoomed, and a swipe moves to the next item only while the item is at its own size. With 'controls', the viewer also draws zoom-out and zoom-in controls, for a pointer with no wheel and no second finger. Once a reader stops zooming, the live region says the new scale in the words of 'zoom-status-label', such as "Zoomed to 150%".  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  A press on the empty area around the item closes the viewer, as a press on the backdrop does. Under 'max-zoom', a press beside the item zooms on a double press and closes nothing, and only the space outside the viewport closes the viewer. A press that dragged closes nothing.  **Keyboard.** Opening moves focus to the viewer itself, which a screen reader names.  | Key | What it does | |---|---| | Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. | | Left, Up | Shows the previous item. | | Home, End | Shows the first or the last item. | | '+', '-', '0' | Zooms in, zooms out, and puts the item back at its own size, where 'max-zoom' allows zooming. | | Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. | | Escape | Closes the viewer. A 'helix-before-close' listener can refuse. |  A development build warns when a viewer opens with no 'label'.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
+  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label', whose glyphs you can replace in the 'previous-icon', 'next-icon' and 'dismiss-icon' slots. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  **Set 'max-zoom' to let a reader zoom into the shown item**, such as '3'. Two fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl held, about the point under the pointer. A double click or a double tap zooms all the way in about the point pressed and back out, and once zoomed one pointer drags it about and the wheel moves it. '+' and '-' zoom in and out from the keyboard, and '0' puts it back. The scale and the offset are on the 'viewport' part as '--lightbox-zoom', '--lightbox-pan-x' and '--lightbox-pan-y', written only while zoomed, and a swipe moves to the next item only while the item is at its own size. With 'controls', the viewer also draws zoom-out and zoom-in controls, for a pointer with no wheel and no second finger. Once a reader stops zooming, the live region says the new scale in the words of 'zoom-status-label', such as "Zoomed to 150%".  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  A press on the empty area around the item closes the viewer, as a press on the backdrop does. Under 'max-zoom', a press beside the item zooms on a double press and closes nothing, and only the space outside the viewport closes the viewer. A press that dragged closes nothing.  **Keyboard.** Opening moves focus to the viewer itself, which a screen reader names.  | Key | What it does | |---|---| | Right, Down | Shows the next item. On a right-to-left page, Left does. While the item is zoomed, the arrows move about it instead. | | Left, Up | Shows the previous item. | | Home, End | Shows the first or the last item. | | '+', '-', '0' | Zooms in, zooms out, and puts the item back at its own size, where 'max-zoom' allows zooming. | | Tab, Shift+Tab | Moves through the controls in the viewer, from the last round to the first and from the first round to the last. | | Escape | Closes the viewer. A 'helix-before-close' listener can refuse. |  A development build warns when a viewer opens with no 'label'.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
   "helix-headless-lightbox": DefineCustomElement<
     HelixHeadlessLightbox,
     HelixHeadlessLightboxVueProps,
@@ -18489,13 +18614,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessListItemVueProps,
     HelixHeadlessListItemVueEvents
   >;
-  /** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7".  **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. 'single' selects one row at a time and 'multiple' any number, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. 'none' selects nothing, so a press acts on the row. A 'disabled' row is passed over. Each row is named by its label and described by its description, so the words of the controls in 'end' are not read as part of its name.  'selection-behavior' says what a press does to the rows already selected. 'toggle', the default, adds or takes out the row. 'replace' selects the row alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press then adds or takes out one row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. Under 'replace', selects it. | | Home, End | Moves to the first or the last row. Under 'replace', selects it. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under 'replace', selects the row it lands on. | | A letter or a word | Moves to the next row whose words start with what you typed. | | Left, Right | Moves between the row and the controls in its 'end' slot. | | Space | Selects the row, or lets it go. | | Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in 'multiple'. | | Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under 'replace'. | | Control or Command with A | Selects every row, in 'multiple'. | | Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. | | Enter | Acts on the row: follows its link, or sends 'helix-action' from it. |  A press with Shift selects every row from the last one pressed, and a press with Control or Command adds or takes out one row under 'replace'.  **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order.  **'reorderable' lets you move rows.** Each row gets a grip after its 'end' slot, named by 'move-label'. Drag a grip to move its row, and the list scrolls near an edge. Or press a grip with Space, Enter, or a click to pick up its row, move it with the arrow keys, and press the grip again to drop it. A click on another row drops it there, and Escape puts it back. The list says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold every row's value in the new order. **You move the rows**: the list moves no element of yours, so your framework keeps the order it rendered.  | Key, on a held row's grip | What it does | |---|---| | Down, Up | Moves the row one place. | | Home, End | Moves the row to the top or the bottom. | | Space, Enter | Drops the row. | | Escape | Puts the row back where it was. |  'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown while the list has no rows and none are loading, such as "No files yet" and a link to add one. Without either, an empty list shows nothing. The list takes the 'empty' state while it has no rows, whatever it shows.  **Loading more.** 'load-more' sends 'helix-load-more' once the end of the list comes within a screen of view, in the box that scrolls it or the page, once for each number of rows: add rows and it can send it again. While you fetch, set 'loading': the list is busy, and a row after the last says "Loading more" ('loading-label', or your own content in the 'loading' slot). The list asks for nothing while 'loading' is set.  An interactive list with no name is reported once in a development build, since a screen reader announces it as a grid and nothing more. Name it with 'label' or 'aria-label'. */
+  /** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7".  **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. 'single' selects one row at a time and 'multiple' any number, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. 'none' selects nothing, so a press acts on the row. A 'disabled' row is passed over. With 'disabled-behavior="selection"', a 'disabled' row cannot be selected, and is reached and acted on as any row is, as React Aria's GridList has it. Each row is named by its label and described by its description, so the words of the controls in 'end' are not read as part of its name.  'selection-behavior' says what a press does to the rows already selected. 'toggle', the default, adds or takes out the row. 'replace' selects the row alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press then adds or takes out one row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. Under 'replace', selects it. | | Home, End | Moves to the first or the last row. Under 'replace', selects it. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under 'replace', selects the row it lands on. | | A letter or a word | Moves to the next row whose words start with what you typed. | | Left, Right | Moves between the row and the controls in its 'end' slot. | | Space | Selects the row, or lets it go. | | Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in 'multiple'. | | Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under 'replace'. | | Control or Command with A | Selects every row, in 'multiple'. | | Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. | | Enter | Acts on the row: follows its link, or sends 'helix-action' from it. |  A press with Shift selects every row from the last one pressed, and a press with Control or Command adds or takes out one row under 'replace'.  **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order.  **'reorderable' lets you move rows.** Each row gets a grip after its 'end' slot, named by 'move-label'. Drag a grip to move its row, and the list scrolls near an edge. Or press a grip with Space, Enter, or a click to pick up its row, move it with the arrow keys, and press the grip again to drop it. A click on another row drops it there, and Escape puts it back. The list says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold every row's value in the new order. **You move the rows**: the list moves no element of yours, so your framework keeps the order it rendered.  | Key, on a held row's grip | What it does | |---|---| | Down, Up | Moves the row one place. | | Home, End | Moves the row to the top or the bottom. | | Space, Enter | Drops the row. | | Escape | Puts the row back where it was. |  'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown while the list has no rows and none are loading, such as "No files yet" and a link to add one. Without either, an empty list shows nothing. The list takes the 'empty' state while it has no rows, whatever it shows.  **Loading more.** 'load-more' sends 'helix-load-more' once the end of the list comes within a screen of view, in the box that scrolls it or the page, once for each number of rows: add rows and it can send it again. While you fetch, set 'loading': the list is busy, and a row after the last says "Loading more" ('loading-label', or your own content in the 'loading' slot). The list asks for nothing while 'loading' is set.  An interactive list with no name is reported once in a development build, since a screen reader announces it as a grid and nothing more. Name it with 'label' or 'aria-label'. */
   "helix-headless-list": DefineCustomElement<
     HelixHeadlessList,
     HelixHeadlessListVueProps,
     HelixHeadlessListVueEvents
   >;
-  /** The listbox is the control, and options are its items. A Select is a listbox with a trigger in front of it, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. They differ only in what opens the list and what filters it.  With 'multiple' set, 'value' is a comma-separated string, like 'Checkbox.Group''s, because 'MixinControllerValue' holds a string. The form receives one entry per selected option, as a native '<select multiple>' sends it, so your server does not split on commas.  Selected and active are separate. The selected option is the value. The active option is where the keyboard is: the arrow keys move it, and 'aria-activedescendant' points to it while focus stays on the list.  **Keyboard.** The list is one tab stop, or its filter field is where there is one. In a single-choice list the highlight is the choice unless 'manual' is set; then Enter, Space or a click chooses.  | Key | What it does | |---|---| | Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With 'layout="grid"', to the option below or above, stopping at the edge. | | Right, Left | With 'layout="grid"', moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. | | Home, End | Moves to the first or the last option. In a filter field, moves the caret. | | Page Down, Page Up | Moves by as many options as the list shows at once. | | A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. | | Enter | Chooses the highlighted option, or follows it where it is a link. | | Space | Chooses the highlighted option, or with 'multiple' toggles it. In a filter field, types a space. | | Shift with Down or Up | With 'multiple', adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. | | Shift with Space | With 'multiple', adds every option from the one last chosen to the highlighted one. In a filter field, types a space. | | Shift with Home or End | With 'multiple', adds every option from the highlight to that end. In a filter field, hold Control as well. | | Control or Command with A | With 'multiple', chooses every option, or none where all are chosen. In a filter field, selects the text. | | Escape | In a filter field, clears the filter. | | Alt with Up or Down | In a 'reorderable' list, moves the highlighted option a place. Alt with Home or End moves it to either end. |  **ARIA.** The 'items' part is the 'listbox', named by the label and described by the hint and the message, with 'aria-multiselectable' under 'multiple', 'aria-required', 'aria-invalid', and 'aria-busy' while loading. Each option is an 'option' with 'aria-selected'. The list, or its filter field, points 'aria-activedescendant' at the highlighted option; the field is 'aria-autocomplete="list"' and controls the list.  An option with 'href' is a link: Enter or a press follows it and selects nothing, and moving onto it with the arrows does not follow it.  As a filter narrows the list, a screen reader hears how many options are left, such as "3 results", from 'result-label' and 'results-label'. A filter that leaves none says 'empty-text'.  **Moving options** is a separate import, '@fusion.dev/helix/listbox/reorder', so a list that never moves options carries none of its code. With it imported, 'reorderable' lets a reader move options:  - Alt with Up or Down moves the highlighted option a place, and Alt with   Home or End moves it to either end, as the APG's rearrangeable listbox   does. The highlight stays on it. - A pointer drags an option, with a drop indicator, and the list scrolls near   an edge. A press that does not travel still chooses the option. - A drop sends 'helix-before-reorder', which you can refuse, and then   'helix-reorder', whose 'keys' hold every value in the new order. **You   move the options**, or set 'items' in the new order: the list moves no   element of yours. - The list says each move in its 'live' region. The words are the   'moved-label', 'canceled-label', 'dropped-label', and 'picked-up-label'   attributes, which the import reads. - An option in a group moves within its group. Options do not move while a   filter narrows the list, under 'layout="grid"', or while the list is   disabled. */
+  /** The listbox is the control, and options are its items. A Select is a listbox with a trigger in front of it, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. They differ only in what opens the list and what filters it.  With 'multiple' set, 'value' is a comma-separated string, like 'Checkbox.Group''s, because 'MixinControllerValue' holds a string. The form receives one entry per selected option, as a native '<select multiple>' sends it, so your server does not split on commas. An option's value may hold a comma: a run of the string that is an option's value is read as that one value, and the form sends it as one entry.  Selected and active are separate. The selected option is the value. The active option is where the keyboard is: the arrow keys move it, and 'aria-activedescendant' points to it while focus stays on the list.  **Keyboard.** The list is one tab stop, or its filter field is where there is one. In a single-choice list the highlight is the choice unless 'manual' is set; then Enter, Space or a click chooses.  | Key | What it does | |---|---| | Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With 'layout="grid"', to the option below or above, stopping at the edge. | | Right, Left | With 'layout="grid"', moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. | | Home, End | Moves to the first or the last option. In a filter field, moves the caret. | | Page Down, Page Up | Moves by as many options as the list shows at once. | | A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. | | Enter | Chooses the highlighted option, or follows it where it is a link. | | Space | Chooses the highlighted option, or with 'multiple' toggles it. In a filter field, types a space. | | Shift with Down or Up | With 'multiple', adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. | | Shift with Space | With 'multiple', adds every option from the one last chosen to the highlighted one. In a filter field, types a space. | | Shift with Home or End | With 'multiple', adds every option from the highlight to that end. In a filter field, hold Control as well. | | Control or Command with A | With 'multiple', chooses every option, or none where all are chosen. In a filter field, selects the text. | | Escape | In a filter field, clears the filter. | | Alt with Up or Down | In a 'reorderable' list, moves the highlighted option a place. Alt with Home or End moves it to either end. |  **ARIA.** The 'items' part is the 'listbox', named by the label and described by the hint and the message, with 'aria-multiselectable' under 'multiple', 'aria-required', 'aria-invalid', and 'aria-busy' while loading. Each option is an 'option' with 'aria-selected'. The list, or its filter field, points 'aria-activedescendant' at the highlighted option; the field is 'aria-autocomplete="list"' and controls the list.  An option with 'href' is a link: Enter or a press follows it and selects nothing, and moving onto it with the arrows does not follow it.  As a filter narrows the list, a screen reader hears how many options are left, such as "3 results", from 'result-label' and 'results-label'. A filter that leaves none says 'empty-text'.  **Moving options** is a separate import, '@fusion.dev/helix/listbox/reorder', so a list that never moves options carries none of its code. With it imported, 'reorderable' lets a reader move options:  - Alt with Up or Down moves the highlighted option a place, and Alt with   Home or End moves it to either end, as the APG's rearrangeable listbox   does. The highlight stays on it. - A pointer drags an option, with a drop indicator, and the list scrolls near   an edge. A press that does not travel still chooses the option. - A drop sends 'helix-before-reorder', which you can refuse, and then   'helix-reorder', whose 'keys' hold every value in the new order. **You   move the options**, or set 'items' in the new order: the list moves no   element of yours. - The list says each move in its 'live' region. The words are the   'moved-label', 'canceled-label', 'dropped-label', and 'picked-up-label'   attributes, which the import reads. - An option in a group moves within its group. Options do not move while a   filter narrows the list, under 'layout="grid"', or while the list is   disabled. */
   "helix-headless-listbox": DefineCustomElement<
     HelixHeadlessListbox,
     HelixHeadlessListboxVueProps,
@@ -18585,7 +18710,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMenuItemVueProps,
     HelixHeadlessMenuItemVueEvents
   >;
-  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose, Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page, and Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so. */
+  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose, Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page. Left Arrow on the top page does nothing. Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,
@@ -18627,7 +18752,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationsVueProps,
     HelixHeadlessNotificationsVueEvents
   >;
-  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  The field and its two buttons sit in a 'role="group"', and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does.  Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
+  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  The field and its two buttons sit in a 'role="group"' named by the label, and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does.  Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
   "helix-headless-number-input": DefineCustomElement<
     HelixHeadlessNumberInput,
     HelixHeadlessNumberInputVueProps,
@@ -18741,7 +18866,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessScrollAreaVueProps,
     HelixHeadlessScrollAreaVueEvents
   >;
-  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them. For a list too long to draw whole, set 'items' instead: the list draws only the options in sight, as Listbox's 'items' does, and the trigger, its keys and the form read the whole set.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
+  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them. For a list too long to draw whole, set 'items' instead: the list draws only the options in sight, as Listbox's 'items' does, and the trigger, its keys and the form read the whole set.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place. With 'multiple', the value is the chosen values joined with commas, and the form receives one entry for each. An option's value may hold a comma, and it is read as one value.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
   "helix-headless-select": DefineCustomElement<
     HelixHeadlessSelect,
     HelixHeadlessSelectVueProps,
@@ -18813,7 +18938,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessStepsVueProps,
     HelixHeadlessStepsVueEvents
   >;
-  /** Only the step's name is a button. The marker is 'aria-hidden' decoration, so it is outside the button. The name uses 'Button', so the hover wash, the focus ring, and the disabled style come from 'Button'.  Every step can be pressed and fires 'helix-select'. To stop the user from moving to a step, set 'disabled' on it.  The marker is a slot, and its fallback shows the step's state: a check for a finished stage, a target for the current stage, and an empty ring for a stage not reached yet. Only that one mark is rendered, so the accessibility tree has no hidden marks.  The half lines on each side of the mark are drawn on the step's '::before' and '::after' from properties the list sets, so the step renders no extra element for them.  A finished stage says so in words: the name's button is described by 'complete-label', "Complete" unless you translate it, and a stage that becomes complete while the page is open says it once in a polite live region. The current stage's button carries 'aria-current="step"', and only the button, so the state is said once, on the control. */
+  /** Only the step's name is a button. The marker is 'aria-hidden' decoration, so it is outside the button. The name uses 'Button', so the hover wash, the focus ring, and the disabled style come from 'Button'.  Every step can be pressed and fires 'helix-select'. To stop the user from moving to a step, set 'disabled' on it.  The marker is a slot, and its fallback shows the step's state: a check for a finished stage, a target for the current stage, and an empty ring for a stage not reached yet. Only that one mark is rendered, so the accessibility tree has no hidden marks.  The half lines on each side of the mark are drawn on the step's '::before' and '::after' from properties the list sets, so the step renders no extra element for them.  A finished stage says so in words: the name's button is described by 'complete-label', "Complete" unless you translate it, and a stage that becomes complete while the page is open says it once in a polite live region. The current stage's button carries 'aria-current="step"', and only the button, so the state is said once, on the control.  A stage's 'content', while it holds anything, is a group named by the stage's name, so a screen reader moving into it hears which stage it belongs to. */
   "helix-headless-step": DefineCustomElement<
     HelixHeadlessStep,
     HelixHeadlessStepVueProps,
@@ -18849,19 +18974,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTableRowVueProps,
     HelixHeadlessTableRowVueEvents
   >;
-  /** An inactive panel is hidden and stays mounted. Anything typed into it is still there when the person comes back, and the content of every panel is in the server-rendered markup for crawlers, whichever tab is open.  The host is the 'tabpanel' while its tab is selected, through 'ElementInternals', so the tab's 'aria-controls' can reach it from the tab's shadow root. The box inside is a tab stop only while the panel holds nothing focusable, as the ARIA tabs pattern and React Aria's tab panel do: Tab from the tab list lands on the panel's first link or control where there is one, and on the panel itself where there is none. */
+  /** An inactive panel is hidden and stays mounted. Anything typed into it is still there when the person comes back, and the content of every panel is in the server-rendered markup for crawlers, whichever tab is open.  The host is the 'tabpanel' while its tab is selected, through 'ElementInternals', so the tab's 'aria-controls' can reach it from the tab's shadow root. The box inside is a tab stop only while the panel holds nothing focusable, as the ARIA tabs pattern and React Aria's tab panel do: Tab from the tab list lands on the panel's first link or control where there is one, and on the panel itself where there is none.  **Set 'lazy' for a panel that is expensive to draw.** Its content waits in a '<template>' inside it, and goes into the panel the first time the panel is shown, so it costs nothing until a reader opens that tab. Once in, it stays. The panel sends 'helix-load' at the same moment, for content your code renders itself. */
   "helix-headless-tab-panel": DefineCustomElement<
     HelixHeadlessTabPanel,
     HelixHeadlessTabPanelVueProps,
     HelixHeadlessTabPanelVueEvents
   >;
-  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  **Keyboard.**  | Key | What it does | |---|---| | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless 'manual' is set or a tab is a link. | | Left, Up | Moves to the tab before, from the first round to the last. | | Home, End | Moves to the first or the last tab. | | Enter, Space | Selects the tab with focus, or follows its link. | | Tab | Leaves the list for the selected panel. |  Removing the selected tab selects the first enabled tab that is left, and 'active' says so, with 'helix-activate'. Where the removed tab had focus, focus moves to the tab now selected.  **More tabs than fit.** With 'scroll-controls', a strip that scrolls shows a button at each end it can scroll toward, as Web Awesome's tab group does, and a press scrolls it most of its own length. The buttons are for the pointer, so they are out of the tab order and hidden from screen readers; the arrow keys already reach every tab, and the strip scrolls the selected tab into view. A strip scrolls once a stylesheet gives the 'tabs' part an 'overflow', as the styled tier does.  A tab with 'dismissible' can be closed: see 'Tabs.Tab'.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
+  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  **Keyboard.**  | Key | What it does | |---|---| | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless 'manual' is set or a tab is a link. | | Left, Up | Moves to the tab before, from the first round to the last. | | Home, End | Moves to the first or the last tab. | | Enter, Space | Selects the tab with focus, or follows its link. | | Tab | Leaves the list for the selected panel. |  Removing the selected tab selects the enabled tab beside it, the next one or else the one before, and 'active' says so, with 'helix-activate'. Where the removed tab had focus, focus moves to the tab now selected.  **More tabs than fit.** With 'scroll-controls', a strip that scrolls shows a button at each end it can scroll toward, as Web Awesome's tab group does, and a press scrolls it most of its own length. The buttons are for the pointer, so they are out of the tab order and hidden from screen readers; the arrow keys already reach every tab, and the strip scrolls the selected tab into view. A strip scrolls once a stylesheet gives the 'tabs' part an 'overflow', as the styled tier does.  A tab with 'dismissible' can be closed: see 'Tabs.Tab'.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
   "helix-headless-tabs": DefineCustomElement<
     HelixHeadlessTabs,
     HelixHeadlessTabsVueProps,
     HelixHeadlessTabsVueEvents
   >;
-  /** A tab is an element, because it manages selection and its own tab stop.  With an 'href', the tab is a link: 'role="tab"' on an '<a>', which a press, Enter and the browser's own link gestures follow. 'helix-select' is sent first, and canceling it keeps the browser from following, so a client-side router follows it instead.  With 'dismissible', the tab can be closed, as Web Awesome's closable tab can: a press on its 'dismiss' mark, or Delete or Backspace while the tab has focus, sends 'helix-dismiss'. The tab does not remove itself, because your code owns the set, so remove the tab and its panel in your handler. Focus moves to the tab beside it, and the tab set selects a tab that is left. The tab says the key through 'aria-keyshortcuts', and the mark is for the pointer, hidden from screen readers. */
+  /** A tab is an element, because it manages selection and its own tab stop.  With an 'href', the tab is a link: 'role="tab"' on an '<a>', which a press, Enter and the browser's own link gestures follow. 'helix-select' is sent first, and canceling it keeps the browser from following, so a client-side router follows it instead.  With 'dismissible', the tab can be closed, as Web Awesome's closable tab can: a press on its 'dismiss' mark, or Delete or Backspace while the tab has focus, sends 'helix-dismiss'. The tab does not remove itself, because your code owns the set, so remove the tab and its panel in your handler. Focus moves to the tab beside it, and where the tab was selected, the tab set selects that same tab. The tab says the key through 'aria-keyshortcuts', and the mark is for the pointer, hidden from screen readers. */
   "helix-headless-tab": DefineCustomElement<
     HelixHeadlessTab,
     HelixHeadlessTabVueProps,
@@ -18915,13 +19040,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTimelineVueProps,
     HelixHeadlessTimelineVueEvents
   >;
-  /** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses.  **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds. It pauses while the pointer or focus is on the message, and while the page is hidden, so a message is not spent in a background tab.  **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. Give it a 'heading' and a 'description', and the heading names it and the description describes it, for a message with a title and a line of detail. The region says each message once as it arrives, a 'danger' one assertively, so a message is never a live region of its own.  A touch or a pen swipes a message toward the end of the line, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x'.  **Escape dismisses the message holding focus**, through the same 'helix-dismiss', and focus moves to the next message.  **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
+  /** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses.  **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds. It pauses while the pointer or focus is on the message or anywhere in the region's stack, and while the page is hidden, so a message is not spent in a background tab.  **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. Give it a 'heading' and a 'description', and the heading names it and the description describes it, for a message with a title and a line of detail. The region says each message once as it arrives, a 'danger' one assertively, so a message is never a live region of its own.  A touch or a pen swipes a message toward the end of the line, or toward the edge the region's 'swipe-direction' names, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x' or '--toast-swipe-y'.  **Escape dismisses the message holding focus**, through the same 'helix-dismiss', and focus moves to the next message.  **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
   "helix-headless-toast-item": DefineCustomElement<
     HelixHeadlessToastItem,
     HelixHeadlessToastItemVueProps,
     HelixHeadlessToastItemVueEvents
   >;
-  /** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason.  **The region is a landmark named by 'label', and it says each message once as it arrives**: a 'danger' message assertively, and every other one politely. It says the word for the tone, the heading, the description and the text, and not the actions, through two live regions of its own, the 'live' parts, which it empties again a moment later. The stack itself is not a live region, so a message is never said twice, and changing the words of a message already showing says nothing. Each message is an 'alertdialog' named by its words, so a reader who moves into the stack hears which message they are on.  **'hotkey' takes focus to the stack and back**, F8 unless you set it, and 'label' says which key: '{hotkey}' in it is filled in, so the default name is "Notifications (F8)". Pressed while focus is in the stack, it gives focus back to where it was.  **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours.  **'add()' shows a message from script**, for a page with no framework state to render them from: it appends a message of the region's own tier and removes it once it has been dismissed and has finished leaving. Messages you render yourself stay yours, and the region never removes them. A touch or a pen swipes a message away toward the end of the line.  **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog.  When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack.  **'max-visible' limits how many messages show at once**, as Zag's 'max' does. The messages after that many, in document order, wait: each is hidden, its timer has not started, and the region says it once it shows, when a message before it goes. A waiting message has ':state(waiting)'.  **Keyboard.**  | Key | What it does | |---|---| | F8, or your 'hotkey' | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. | | Tab, Shift+Tab | Moves between the controls of the messages. | | Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. | */
+  /** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason.  **The region is a landmark named by 'label', and it says each message once as it arrives**: a 'danger' message assertively, and every other one politely. It says the word for the tone, the heading, the description and the text, and not the actions, through two live regions of its own, the 'live' parts, which it empties again a moment later. The stack itself is not a live region, so a message is never said twice, and changing the words of a message already showing says nothing. Each message is an 'alertdialog' named by its words, so a reader who moves into the stack hears which message they are on.  **'hotkey' takes focus to the stack and back**, F8 unless you set it, and 'label' says which key: '{hotkey}' in it is filled in, so the default name is "Notifications (F8)". Pressed while focus is in the stack, it gives focus back to where it was.  **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours.  **'add()' shows a message from script**, for a page with no framework state to render them from: it appends a message of the region's own tier and removes it once it has been dismissed and has finished leaving. Messages you render yourself stay yours, and the region never removes them. A touch or a pen swipes a message away toward the end of the line, or toward the edge 'swipe-direction' names.  **Every message's timer waits while a pointer or focus is in the stack**, as React Aria's and Radix's regions do, so a reader moving from one message to the next does not lose the one behind them.  **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog.  When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack.  **'max-visible' limits how many messages show at once**, as Zag's 'max' does. The messages after that many, in document order, wait: each is hidden, its timer has not started, and the region says it once it shows, when a message before it goes. A waiting message has ':state(waiting)'.  **Keyboard.**  | Key | What it does | |---|---| | F8, or your 'hotkey' | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. | | Tab, Shift+Tab | Moves between the controls of the messages. | | Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. | */
   "helix-headless-toast": DefineCustomElement<
     HelixHeadlessToast,
     HelixHeadlessToastVueProps,
@@ -18951,13 +19076,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTooltipVueProps,
     HelixHeadlessTooltipVueEvents
   >;
-  /** The root holds the order of the stops: which stop is current, what Next and Back do, and when the tour is finished. Each stop holds its target, and you write all the text.  **The spotlight is a shadow.** The scrim is a box the size of the current target with a very large 'box-shadow' spread, and the shadow paints the darkness. A 'clip-path' on a full-screen scrim breaks as soon as an element between the scrim and the viewport is transformed.  The root measures the target's position in the browser. Nothing is measured on the server, because a tour starts only on request.  'open', 'default-open', 'helix-before-open', 'helix-before-close' and 'toggle' work as they do on 'Dialog'. Setting 'open' starts the run, and 'skip()' and 'requestOpen(false)' end it early.  The box the light falls on is on the 'spotlight' part as '--tour-spotlight-x', '--tour-spotlight-y', '--tour-spotlight-width' and '--tour-spotlight-height', for a sheet that draws its own light, such as a ring around the target.  Each stop is told its place in the run, from 'progress-label', such as "2 of 5". It describes the stop's panel, so a screen reader says it at every stop, and 'progress' draws it in the panel as well. A dialog or a floating stop, which has nothing to light, is shown over the 'backdrop' part. At a 'wait' stop the run waits for that stop's target to be on the page, and moves on by itself.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes.  **The target is scrolled into view** before its stop is shown, by the least distance that brings it on screen, so the stop that points at it is on screen too.  **Keyboard.** Focus is on the current stop's panel, which is not in the 'Tab' order itself.  | Key | What it does | |---|---| | Right | Goes to the next stop. On the last stop it does nothing, and Next finishes the tour. | | Left | Goes back to the previous stop. | | Escape | Skips the tour, and puts focus back where it was when the tour opened. | | Tab, Shift+Tab | Moves through the controls in the stop, and on out to the page. A stop does not trap focus. | | Enter, Space | On Back, Next, or Skip, presses it. |  The arrow that points the way the line runs goes on, and the other goes back, so on a right-to-left page Left goes on and Right goes back. A text field in a stop keeps its own arrows.  The tour is a region named by 'label' while it runs. A development build warns when a tour opens with no 'label'. */
+  /** The root holds the order of the stops: which stop is current, what Next and Back do, and when the tour is finished. Each stop holds its target, and you write all the text.  **The spotlight is a shadow.** The scrim is a box the size of the current target with a very large 'box-shadow' spread, and the shadow paints the darkness. A 'clip-path' on a full-screen scrim breaks as soon as an element between the scrim and the viewport is transformed.  The root measures the target's position in the browser. Nothing is measured on the server, because a tour starts only on request.  'open', 'default-open', 'helix-before-open', 'helix-before-close' and 'toggle' work as they do on 'Dialog'. Setting 'open' starts the run, and 'skip()' and 'requestOpen(false)' end it early.  The box the light falls on is on the 'spotlight' part as '--tour-spotlight-x', '--tour-spotlight-y', '--tour-spotlight-width' and '--tour-spotlight-height', for a sheet that draws its own light, such as a ring around the target.  Each stop is told its place in the run, from 'progress-label', such as "2 of 5". It describes the stop's panel, so a screen reader says it at every stop, and 'progress' draws it in the panel as well. A dialog or a floating stop, which has nothing to light, is shown over the 'backdrop' part. At a 'wait' stop the run waits for that stop's target to be on the page, and moves on by itself.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes.  **The target is scrolled into view** before its stop is shown, by the least distance that brings it on screen, so the stop that points at it is on screen too.  **A stop's 'effect' runs as the tour reaches it**, before it is shown, and the stop waits for a promise it returns, with ':state(preparing)' on the tour meanwhile. A function it returns runs when the tour leaves the stop.  **A press outside the current stop and its target does nothing by default**, so a reader can use the page the tour is describing. Set 'outside-press="close"' to end the tour on one, through 'helix-before-close' as Skip does, or 'outside-press="block"' to refuse it, so the stop and its target are all a pointer can reach while the tour runs, as Zag's 'preventInteraction' does.  **Keyboard.** Focus is on the current stop's panel, which is not in the 'Tab' order itself.  | Key | What it does | |---|---| | Right | Goes to the next stop. On the last stop it does nothing, and Next finishes the tour. | | Left | Goes back to the previous stop. | | Escape | Skips the tour, and puts focus back where it was when the tour opened. | | Tab, Shift+Tab | Moves through the controls in the stop, and on out to the page. A stop does not trap focus. | | Enter, Space | On Back, Next, or Skip, presses it. |  The arrow that points the way the line runs goes on, and the other goes back, so on a right-to-left page Left goes on and Right goes back. A text field in a stop keeps its own arrows.  The tour is a region named by 'label' while it runs. A development build warns when a tour opens with no 'label'. */
   "helix-headless-tour": DefineCustomElement<
     HelixHeadlessTour,
     HelixHeadlessTourVueProps,
     HelixHeadlessTourVueEvents
   >;
-  /** A stop names its target with 'for' and holds the content you put in it. The stop handles three things:  - **Placement.** The panel is anchored to the target by the same floating   positioning as the other Helix overlays. - **Stacking.** The panel is a popover, so it is in the top layer and shows   above dialogs, scrolling regions, and other stacking contexts. - **Visibility.** The stop shows when it is 'current', which the root sets.  Put any content in the stop, such as a 'Card', or a heading and a line of text. The 'heading' and 'description' slots are optional places for the title and the line under it, which then name and describe the panel.  **A stop has a type.** Without one it is a bubble pointing at its target. 'type="dialog"' is a panel in the middle of the window, over a backdrop, for a welcome or a summary with nothing to point at. 'type="floating"' is a panel in a corner of the window, which the styled tier puts at the end of the line, for a note that points at nothing in particular. 'type="wait"' shows nothing: the tour waits for the element 'for' names to be on the page, such as a menu the reader has to open, and moves on by itself.  **The buttons are slot fallback.** With nothing in the 'actions' slot, you get Back, Next, and Skip, already wired. Slot your own 'actions' and drive them with 'next()', 'back()', and 'skip()' on the root.  **'for' is an id, as with 'Tooltip'**, so you can point at a target elsewhere on the page from markup. It resolves against the stop's root node, so a stop inside a shadow tree points at a target in that tree.  The panel is a 'group', and a 'dialog' for a dialog stop, only while the stop is shown. It is named by the 'heading' slot, then by the first heading in the content, then by 'label', and otherwise by its place in the tour. It is described by the 'description' slot, or where that is empty by the words at the start of the content, and by its place, such as "2 of 5", so a screen reader says where the reader is at every stop. 'focus()' moves focus to the panel, which is what the tour does when it opens or moves on. */
+  /** A stop names its target with 'for' and holds the content you put in it. The stop handles three things:  - **Placement.** The panel is anchored to the target by the same floating   positioning as the other Helix overlays. - **Stacking.** The panel is a popover, so it is in the top layer and shows   above dialogs, scrolling regions, and other stacking contexts. - **Visibility.** The stop shows when it is 'current', which the root sets.  Put any content in the stop, such as a 'Card', or a heading and a line of text. The 'heading' and 'description' slots are optional places for the title and the line under it, which then name and describe the panel.  **A stop has a type.** Without one it is a bubble pointing at its target. 'type="dialog"' is a panel in the middle of the window, over a backdrop, for a welcome or a summary with nothing to point at. 'type="floating"' is a panel in a corner of the window, which the styled tier puts at the end of the line, for a note that points at nothing in particular. 'type="wait"' shows nothing: the tour waits for the element 'for' names to be on the page, such as a menu the reader has to open, and moves on by itself.  **The buttons are slot fallback.** With nothing in the 'actions' slot, you get Back, Next, and Skip, already wired. Slot your own 'actions' and drive them with 'next()', 'back()', and 'skip()' on the root.  **Set 'effect' to prepare the page for a stop**, such as opening the menu it points into or loading what it describes. It is a function, set from script, that the tour runs as it reaches the stop. Return a promise and the stop waits for it, and the tour has ':state(preparing)' meanwhile; return a function, or resolve to one, and the tour runs it when it leaves the stop. Zag's tour step has the same 'effect'.  **'for' is an id, as with 'Tooltip'**, so you can point at a target elsewhere on the page from markup. It resolves against the stop's root node, so a stop inside a shadow tree points at a target in that tree.  The panel is a 'group', and a 'dialog' for a dialog stop, only while the stop is shown. It is named by the 'heading' slot, then by the first heading in the content, then by 'label', and otherwise by its place in the tour. It is described by the 'description' slot, or where that is empty by the words at the start of the content, and by its place, such as "2 of 5", so a screen reader says where the reader is at every stop. 'focus()' moves focus to the panel, which is what the tour does when it opens or moves on. */
   "helix-headless-tour-stop": DefineCustomElement<
     HelixHeadlessTourStop,
     HelixHeadlessTourStopVueProps,