@fusion.dev/helix-headless 0.171.0 → 0.173.0

package/types/vue.d.ts

@@ -1284,6 +1284,9 @@ export type HelixHeadlessButtonGroupHelixBeforeChangeElementEvent =
   HelixHeadlessButtonGroupElementEvent<HelixBeforeChangeEvent>;
 
 export type HelixHeadlessButtonGroupVueProps = {
+  /** Disables every button in the group, and says so on the group with
+`aria-disabled`. Reflected, so a stylesheet can select on it. */
+  disabled?: (HelixHeadlessButtonGroup["disabled"]) | undefined;
   /** Keeps at least one button pressed once one is, as React Aria's
 `disallowEmptySelection`: a press that would leave none pressed is
 refused. */
@@ -1333,6 +1336,9 @@ A button's own `value` names it, so a value holds no comma.
 The attribute is the seed, and a press changes the property, which does
 not reflect, as a native control's `value` does not. */
   value?: (HelixHeadlessButtonGroup["value"]) | undefined;
+  /** The pressed values as a list, in a selection mode, and an empty list
+otherwise. Written, it presses exactly those buttons. */
+  values?: (HelixHeadlessButtonGroup["values"]) | undefined;
 };
 
 export type HelixHeadlessButtonGroupVueEvents = {
@@ -1885,6 +1891,9 @@ Third", rather than with a comma this component chose. */
   /** The text read with a card that has connections both ways. `{leadsTo}` is
 `leads-to-label` and `{comesFrom}` is `comes-from-label`, each filled in. */
   linkedLabel?: (HelixHeadlessCanvas["linkedLabel"]) | undefined;
+  /** Marks the board as busy while its document arrives: the board is
+`aria-busy`, and the `loading` slot is shown. */
+  loading?: (HelixHeadlessCanvas["loading"]) | undefined;
   /** What screen readers hear after a key moves a card, with `{name}` for the
 card and `{x}` and `{y}` for where it now is, in the document's units.
 
@@ -2584,6 +2593,10 @@ export type HelixHeadlessChatComposerHelixTypingElementEvent =
   HelixHeadlessChatComposerElementEvent<HelixTypingEvent>;
 
 export type HelixHeadlessChatComposerVueProps = {
+  /** A message about the draft, shown under the field. While set, the composer
+is invalid, does not send, and does not submit, as a field's `feedback`
+does, and the message is announced as it appears. */
+  feedback?: (HelixHeadlessChatComposer["feedback"]) | undefined;
   /** The field's name, read by screen readers. */
   label?: (HelixHeadlessChatComposer["label"]) | undefined;
   /** The most characters a draft can have. The field stops taking more. */
@@ -4705,6 +4718,24 @@ Defaulted rather than left empty. An icon-only control must be named, and
 the name of this one is not a judgment call: every copy button in the
 world is called Copy. A consumer with a better word still sets it. */
   label?: (HelixHeadlessCopyButton["label"]) | undefined;
+  /** Draws the name as words beside the icon, and the result in their place
+after a press. The button stays as wide as the longest of them. */
+  "show-label"?: (HelixHeadlessCopyButton["showLabel"]) | undefined;
+  /** Draws the name as words beside the icon, and the result in their place
+after a press. The button stays as wide as the longest of them. */
+  showLabel?: (HelixHeadlessCopyButton["showLabel"]) | undefined;
+  /** When the tooltip shows: `full` on hover and focus and after a press,
+`copy` only after a press, to show the result, and `none` never, for a
+button whose result shows another way, such as under `show-label`.
+
+Unset is `full`, and the attribute stays absent until you write it. */
+  tooltip?: (HelixHeadlessCopyButton["tooltip"]) | undefined;
+  /** The side the tooltip prefers. It moves to another side where this one
+does not fit. */
+  "tooltip-placement"?: (HelixHeadlessCopyButton["tooltipPlacement"]) | undefined;
+  /** The side the tooltip prefers. It moves to another side where this one
+does not fit. */
+  tooltipPlacement?: (HelixHeadlessCopyButton["tooltipPlacement"]) | undefined;
   /** The text copied to the clipboard.
 
 It replaces `Button.value`, the submit value: a copy button never submits,
@@ -5187,7 +5218,11 @@ thousand rows, where the page is a reasonable fetch and a poor render.
 
 Off by default. Windowing costs a scroll listener, a measurement per row
 drawn, and a `block-size` on the scrolling box, and a table of twenty rows
-should pay none of them. */
+should pay none of them.
+
+While windowed, the `table` part scrolls on this tier: it carries
+`data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into
+every shadow root. You still need to give it a block size. */
   windowed?: (HelixHeadlessDataTable["windowed"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "empty-text"?: (HelixHeadlessDataTable["emptyText"]) | undefined;
@@ -7606,6 +7641,13 @@ or hides its notes. Drawn where the notes have two groups or more. */
   "links-to-label"?: (HelixHeadlessGraph["linksToLabel"]) | undefined;
   /** How a note that links to the selected one is described, with `{note}`. */
   linksToLabel?: (HelixHeadlessGraph["linksToLabel"]) | undefined;
+  /** Marks the graph as busy while its notes arrive: the list is `aria-busy`,
+and the panel says so where it holds no notes yet. */
+  loading?: (HelixHeadlessGraph["loading"]) | undefined;
+  /** What the panel says while `loading` is set and the list holds no notes. */
+  "loading-label"?: (HelixHeadlessGraph["loadingLabel"]) | undefined;
+  /** What the panel says while `loading` is set and the list holds no notes. */
+  loadingLabel?: (HelixHeadlessGraph["loadingLabel"]) | undefined;
   /** What screen readers hear once the drawing has moved down, after `moved()`. */
   "moved-down-label"?: (HelixHeadlessGraph["movedDownLabel"]) | undefined;
   /** What screen readers hear once the drawing has moved down, after `moved()`. */
@@ -7827,6 +7869,16 @@ Ignored once `active` is written. */
   links?: (HelixHeadlessGraph["links"]) | undefined;
   /** The notes. A property, never an attribute. */
   nodes?: (HelixHeadlessGraph["nodes"]) | undefined;
+  /** What each note's row in the list shows in place of its name: a function
+given the note that returns text, an element or a Lit template.
+
+For an icon by its kind, or a date under its name, as React Aria's
+`ListBoxItem` takes children. The row is still named by the note's name,
+which typeahead and the search find it by, and described by how it stands
+to the selected note. Return the name with your content where it should
+still show. A property only, there being no way to write a function in
+markup. */
+  noteContent?: (HelixHeadlessGraph["noteContent"]) | undefined;
 };
 
 export type HelixHeadlessGraphVueEvents = {
@@ -9462,7 +9514,8 @@ itself. */
   type?: (HelixHeadlessList["type"]) | undefined;
   /** The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
 
-Set it to start with rows selected. A row's value is its `value`, or its
+A press or a key writes it in row order, as Data Table does, whatever
+order the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its
 words where it has none. */
   value?: (HelixHeadlessList["value"]) | undefined;
 };
@@ -10887,6 +10940,14 @@ or on Alt+Down or Alt+Up. */
 
 It moves if that side does not fit. */
   placement?: (HelixHeadlessMenu["placement"]) | undefined;
+  /** What a screen reader hears when the filter narrows the rows. `{count}` is
+how many rows are left, written in the locale, and each language writes
+the forms it has, as Listbox's `results-label` does. */
+  "results-label"?: (HelixHeadlessMenu["resultsLabel"]) | undefined;
+  /** What a screen reader hears when the filter narrows the rows. `{count}` is
+how many rows are left, written in the locale, and each language writes
+the forms it has, as Listbox's `results-label` does. */
+  resultsLabel?: (HelixHeadlessMenu["resultsLabel"]) | undefined;
   /** How a submenu opens. `drill` shows it in place of the page showing, with
 a way back. `flyout` opens it in a panel of its own beside its row. */
   submenus?: (HelixHeadlessMenu["submenus"]) | undefined;
@@ -10928,9 +10989,19 @@ Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
 Absent, a row 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?: (HelixHeadlessMenu["filterMatch"]) | undefined;
+  /** The values of the choice rows that are checked, anywhere in the menu, in
+document order.
+
+Set it to check exactly those rows and uncheck every other choice row, as
+React Aria's `selectedKeys` controls a menu's selection from one place.
+Each row keeps its own `checked` too, which this reads and writes. `change`
+is sent on the menu when a reader's choice changes it. */
+  checkedValues?: (HelixHeadlessMenu["checkedValues"]) | undefined;
 };
 
 export type HelixHeadlessMenuVueEvents = {
+  /** A reader's choice checked or unchecked rows. Read `checkedValues` for the rows that are checked now. */
+  change: HelixHeadlessMenuElementEvent;
   /** The menu is about to close. Cancelable: cancel it to keep it open. */
   "helix-before-close": HelixHeadlessMenuHelixBeforeCloseElementEvent;
   /** The menu is about to open. Cancelable: cancel it to keep it closed. */
@@ -12142,6 +12213,10 @@ box the sections scroll in. */
   /** The navigation's name, read by screen readers. A heading in the `heading`
 slot names it in place of this. */
   label?: (HelixHeadlessOutline["label"]) | undefined;
+  /** Which links are marked. `reading` marks the one section being read, the
+last whose heading has passed the reading line. `visible` marks every
+section with part of it on screen, and the mark runs across their links. */
+  marks?: (HelixHeadlessOutline["marks"]) | undefined;
   /** How far below the top of the scroll container a heading counts as reached,
 in pixels. The scroll container is the window or the panel the sections
 scroll in.
@@ -12630,17 +12705,42 @@ export type HelixHeadlessPopoverToggleElementEvent =
   HelixHeadlessPopoverElementEvent<ToggleEvent>;
 
 export type HelixHeadlessPopoverVueProps = {
+  /** The element the panel opens against, where that is not the trigger: its
+`id` in the same document or shadow root, or the element itself. Left
+empty, the panel opens against the trigger, or against the button whose
+command opened it. */
+  anchor?: (HelixHeadlessPopover["anchor"]) | undefined;
   /** Draws a point on the panel's edge facing the trigger.
 
 Off by default, which is the house style: a panel that opens from its
 trigger already reads as belonging to it. */
   arrow?: (HelixHeadlessPopover["arrow"]) | undefined;
+  /** How close to the window's edges the panel may come, in pixels, when it
+slides, shrinks or moves to the other side to fit. Left unset, it slides
+and shrinks to 8 pixels from an edge and moves to the other side only
+once it would cross one. */
+  "container-padding"?: (HelixHeadlessPopover["containerPadding"] | `${number}`) | undefined;
+  /** How close to the window's edges the panel may come, in pixels, when it
+slides, shrinks or moves to the other side to fit. Left unset, it slides
+and shrinks to 8 pixels from an edge and moves to the other side only
+once it would cross one. */
+  containerPadding?: (HelixHeadlessPopover["containerPadding"]) | undefined;
+  /** How far to slide the panel along the side it is on, in pixels: to the
+right on the top or the bottom, and down on the left or the right. */
+  "cross-offset"?: (HelixHeadlessPopover["crossOffset"] | `${number}`) | undefined;
+  /** How far to slide the panel along the side it is on, in pixels: to the
+right on the top or the bottom, and down on the left or the right. */
+  crossOffset?: (HelixHeadlessPopover["crossOffset"]) | undefined;
   /** The panel's name where nothing else names it: no `label`, no heading in
 the panel, and no `aria-labelledby` on the host. */
   "fallback-label"?: (HelixHeadlessPopover["fallbackLabel"]) | undefined;
   /** The panel's name where nothing else names it: no `label`, no heading in
 the panel, and no `aria-labelledby` on the host. */
   fallbackLabel?: (HelixHeadlessPopover["fallbackLabel"]) | undefined;
+  /** Whether the panel moves to the other side of the trigger when its own
+side has no room. On by default. Write `flip="false"` to keep it on its
+side, where it shrinks to fit, as React Aria's `shouldFlip` turns off. */
+  flip?: (HelixHeadlessPopover["flip"]) | undefined;
   /** The panel's name, read by screen readers. Left empty, the first heading in
 the panel names it, and then `fallback-label`. */
   label?: (HelixHeadlessPopover["label"]) | undefined;
@@ -14431,6 +14531,13 @@ that should survive its own collapse says how much of itself to keep, and
 only whoever put it there knows that, which is the same reason `min` is a
 consumer's to set. */
   collapsedSize?: (HelixHeadlessSplitter["collapsedSize"]) | undefined;
+  /** Which panes can be collapsed, as Zag's panels each take `collapsible`:
+`start`, `end`, `both`, or `none`. A pane that cannot be collapsed stops
+at the edge without shutting. `Enter` collapses the end pane where only
+the end pane can be collapsed, and the start pane otherwise.
+
+Unset is `both`, and the attribute stays absent until you write it. */
+  collapsible?: (HelixHeadlessSplitter["collapsible"]) | undefined;
   /** The name of the handle where two dividers cross, read by screen readers. */
   "corner-label"?: (HelixHeadlessSplitter["cornerLabel"]) | undefined;
   /** The name of the handle where two dividers cross, read by screen readers. */
@@ -14459,6 +14566,18 @@ these words are the whole of where it is. */
   "default-position"?: (HelixHeadlessSplitter["defaultPosition"] | `${number}`) | undefined;
   /** Where the divider starts, when `position` is not set. */
   defaultPosition?: (HelixHeadlessSplitter["defaultPosition"]) | undefined;
+  /** The least the end pane keeps, in the units `min` takes: a percentage, or
+a CSS length such as `16rem` resolved against the splitter's box. The
+divider stops that far from the end, whatever `max` allows, so `min` and
+`end-min` hold a minimum for each pane, as Zag's panels each take
+`minSize`. */
+  "end-min"?: (HelixHeadlessSplitter["endMin"]) | undefined;
+  /** The least the end pane keeps, in the units `min` takes: a percentage, or
+a CSS length such as `16rem` resolved against the splitter's box. The
+divider stops that far from the end, whatever `max` allows, so `min` and
+`end-min` hold a minimum for each pane, as Zag's panels each take
+`minSize`. */
+  endMin?: (HelixHeadlessSplitter["endMin"]) | undefined;
   /** The divider's name, read by screen readers.
 
 An `aria-label` or `aria-labelledby` on the host names the divider too,
@@ -16693,6 +16812,18 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessTimePicker["name"]) | undefined;
+  /** What each time in the list shows: a function given the time as `HH:mm`,
+or `HH:mm:ss` with `seconds`, and the time as the row writes it, that
+returns text, an element or a Lit template.
+
+For the seats left at a time, or a caption under it, as React Aria's
+`ListBoxItem` takes children. Content with `slot="start"`, `slot="end"`
+or `slot="description"` goes to that slot of the row, and a description
+is read after the time. The row is still named by the written time, and
+typeahead still finds it by that. Return the written time with your
+content where it should still show. A property only, there being no way
+to write a function in markup. The wheels draw their own figures. */
+  timeContent?: (HelixHeadlessTimePicker["timeContent"]) | undefined;
   /** The value as a `Date` on 1 January 1970 UTC, or `null` while there is no time.
 
 The platform's own pair on `<input type="time">`, epoch day included: a time
@@ -16771,6 +16902,13 @@ export type HelixHeadlessTimelineItemVueEvents = {};
 export type HelixHeadlessTimelineVueProps = {
   /** Accessible name for the timeline, for people who reach it out of context. */
   label?: (HelixHeadlessTimeline["label"]) | undefined;
+  /** Marks the timeline as busy fetching more entries, and draws an entry
+after the last that says so. */
+  loading?: (HelixHeadlessTimeline["loading"]) | undefined;
+  /** The text of the entry drawn while `loading` is set, where the `loading` slot is empty. */
+  "loading-label"?: (HelixHeadlessTimeline["loadingLabel"]) | undefined;
+  /** The text of the entry drawn while `loading` is set, where the `loading` slot is empty. */
+  loadingLabel?: (HelixHeadlessTimeline["loadingLabel"]) | undefined;
 };
 
 export type HelixHeadlessTimelineVueEvents = {};
@@ -18592,12 +18730,18 @@ export type HelixHeadlessVirtualListElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessVirtualListHelixBeforeChangeElementEvent =
   HelixHeadlessVirtualListElementEvent<HelixBeforeChangeEvent>;
+/** `helix-before-reorder` event type */
+export type HelixHeadlessVirtualListHelixBeforeReorderElementEvent =
+  HelixHeadlessVirtualListElementEvent<HelixBeforeReorderEvent>;
 /** `helix-load-more` event type */
 export type HelixHeadlessVirtualListHelixLoadMoreElementEvent =
   HelixHeadlessVirtualListElementEvent<HelixLoadMoreEvent>;
 /** `helix-range-change` event type */
 export type HelixHeadlessVirtualListHelixRangeChangeElementEvent =
   HelixHeadlessVirtualListElementEvent<HelixRangeChangeEvent>;
+/** `helix-reorder` event type */
+export type HelixHeadlessVirtualListHelixReorderElementEvent =
+  HelixHeadlessVirtualListElementEvent<HelixReorderEvent>;
 
 export type HelixHeadlessVirtualListVueProps = {
   /** How many items a line holds. One, the default, is a list; more lays the
@@ -18677,6 +18821,13 @@ and scrolls it sideways: Left and Right move between items, the other
 way round on a right-to-left page, and `estimate` is an item's width. A
 grid always runs down. */
   orientation?: (HelixHeadlessVirtualList["orientation"]) | undefined;
+  /** Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`
+(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt
+with an arrow moves the row the keys are on, and a pointer drags a row.
+The list moves no item itself: you move your `items` on `helix-reorder`.
+Without that import it does nothing, so a list that never moves items
+carries none of the code. A list of one column, without sections. */
+  reorderable?: (HelixHeadlessVirtualList["reorderable"]) | undefined;
   /** The field of each item that names its section, as a key or a path of
 keys. Set, the items are drawn in sections: a header, then the items, in
 an element with the `group` role that the header names. A section starts
@@ -18742,10 +18893,14 @@ export type HelixHeadlessVirtualListVueEvents = {
   change: HelixHeadlessVirtualListElementEvent;
   /** Fired before a press or a key changes which items are selected, with the `value` it would leave. Cancelable. */
   "helix-before-change": HelixHeadlessVirtualListHelixBeforeChangeElementEvent;
+  /** Fired when an item is dropped at a new place, in a `reorderable` list with `@fusion.dev/helix/virtual-list/reorder` imported, with every key in the new order. Cancelable: cancel it to keep the item where it is. */
+  "helix-before-reorder": HelixHeadlessVirtualListHelixBeforeReorderElementEvent;
   /** Fired when a reader comes within one screen of the last item, once for each length of the set. */
   "helix-load-more": HelixHeadlessVirtualListHelixLoadMoreElementEvent;
   /** Fired when the items on screen change, with the new `first` and `last`, which `range` also holds. */
   "helix-range-change": HelixHeadlessVirtualListHelixRangeChangeElementEvent;
+  /** Fired after `helix-before-reorder` when nobody canceled it. Set `items` to the order in `keys`. Cancelable: cancel it to say the move did not happen. */
+  "helix-reorder": HelixHeadlessVirtualListHelixReorderElementEvent;
 };
 
 export type CustomCssProperties = {
@@ -19019,7 +19174,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. '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. */
+  /** 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.  **Disabled.** 'disabled' on the group disables every button in it, Helix and native alike, and says so on the group with 'aria-disabled', as React Aria's 'isDisabled' does. A button disabled on its own stays disabled when the group is enabled again, and a button that leaves the group gets back what it said for itself. */
   "helix-headless-button-group": DefineCustomElement<
     HelixHeadlessButtonGroup,
     HelixHeadlessButtonGroupVueProps,
@@ -19067,7 +19222,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCarouselVueProps,
     HelixHeadlessCarouselVueEvents
   >;
-  /** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript.  By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer.  The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed.  **In a form, the draft is the composer's value**, submitted under 'name'. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form.  **'required', 'minlength' and 'maxlength' are checked by the browser**, as on a '<textarea>', and the message is the browser's. 'maxlength' stops the field taking more. A draft that fails them does not send, and the composer takes ':state(invalid)' and 'aria-invalid' once the reader has tried to send it, the form was submitted, or the reader edited the field and left it. Sending an empty required composer counts as trying. Tabbing past an empty composer marks nothing.  **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
+  /** The composer is a separate element so you can replace it. If you need attachments, slash commands, or a model picker, replace the composer and keep the transcript.  By default, Enter sends and Shift+Enter starts a new line, the convention in messaging apps. Document editors mostly use the opposite, so 'submit-on' takes 'enter' or 'button'. Use 'button' for a long-form composer.  The composer clears only when no listener cancels the send, so the text is kept when you cancel a send that failed.  **In a form, the draft is the composer's value**, submitted under 'name'. A form reset puts back the 'value' the markup declared, and a '<fieldset disabled>' turns the composer off. Sending is still 'helix-send', and it does not submit the form.  **'required', 'minlength' and 'maxlength' are checked by the browser**, as on a '<textarea>', and the message is the browser's. 'maxlength' stops the field taking more. A draft that fails them does not send, and the composer takes ':state(invalid)' and 'aria-invalid' once the reader has tried to send it, the form was submitted, or the reader edited the field and left it. Sending an empty required composer counts as trying. Tabbing past an empty composer marks nothing.  **'feedback' is a message of your own about the draft**, such as one your server sent back. While it is set, the composer is invalid at once, does not send or submit, shows the message under the field, and a screen reader hears it as it appears. Clear it to let the draft go.  **'typing' says whether the user is writing**, and 'helix-typing' is sent each time it changes: when they start, and when they send or stop for 'typing-timeout' milliseconds. Pass it on to show "is typing" to the other side. */
   "helix-headless-chat-composer": DefineCustomElement<
     HelixHeadlessChatComposer,
     HelixHeadlessChatComposerVueProps,
@@ -19079,7 +19234,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessChatMessageVueProps,
     HelixHeadlessChatMessageVueEvents
   >;
-  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened. A turn is said with its author first, such as "Ada: It ships today" ('arrival-label'), where its author can be named.  Pass the turns as children or as 'turns' data. Do not use both: a chat given both draws every turn from 'turns' and then the children, and says so once in the console. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own.  **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. When the other side types, set 'typing' to their name: the status band draws three dots and "Ada is typing" ('typing-label'), which a screen reader hears, and clearing it takes them away. Anything slotted into 'status' is drawn first.  **Keyboard.** The transcript moves between turns the way a feed does. Each turn says its place, such as "3 of 40", windowed or not. The transcript is a tab stop while it holds a turn, and the turn a reader moved to is one too. Moving to an older turn unpins a transcript that scrolls and scrolls the turn into view, and moving to the newest pins it again.  | Key | What it does | |---|---| | Page Down, Page Up | On a turn or inside one, moves focus to the next or the previous turn. On the transcript itself, moves focus to the turn at the top of the view. | | Control with End | Moves focus to the composer. | | Control with Home | Moves focus to the first control above the transcript, or to the transcript. |  While you are scrolled away from the newest turn, the 'resume' region shows a button that takes you back, named by 'resume-label', "Jump to latest". Slot your own control into 'resume' to replace it.  A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn with neither an author label nor a time is named by 'turn-label', "Message".  A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, give 'author-styles' the declarations for each author, such as '{"ada": "--chat-message-background-color: …"}': the message drawn for each of their turns takes them as its 'style', so the message's custom properties change for that author alone. Turns passed as children are styled by their 'author', such as 'helix-chat-message[author="ada"]'. */
+  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The transcript is a 'log', the role for content added in order where the newest matters most, and it answers the APG feed's keys. The 'feed' role reads its articles as a list from the top, with no newest end to stay pinned to, so the log keeps the role a conversation has. While 'loading' is set or older turns load, the log carries 'aria-busy', as the APG asks of a feed.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened. A turn is said with its author first, such as "Ada: It ships today" ('arrival-label'), where its author can be named.  Pass the turns as children or as 'turns' data. Do not use both: a chat given both draws every turn from 'turns' and then the children, and says so once in the console. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own.  The log scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so pinning, history and the window work with no stylesheet. You still need to give the log a block size, such as 'helix-headless-chat::part(log) { block-size: 20rem }'.  **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. When the other side types, set 'typing' to their name: the status band draws three dots and "Ada is typing" ('typing-label'), which a screen reader hears, and clearing it takes them away. Anything slotted into 'status' is drawn first.  **Keyboard.** The transcript moves between turns the way a feed does. Each turn says its place, such as "3 of 40", windowed or not. The transcript is a tab stop while it holds a turn, and the turn a reader moved to is one too. Moving to an older turn unpins a transcript that scrolls and scrolls the turn into view, and moving to the newest pins it again. When the turn holding focus is removed, focus moves to the turn that took its place, or to the one before it where it was the last.  | Key | What it does | |---|---| | Page Down, Page Up | On a turn or inside one, moves focus to the next or the previous turn. On the transcript itself, moves focus to the turn at the top of the view. | | Control with End | Moves focus to the composer. | | Control with Home | Moves focus to the first control above the transcript, or to the transcript. |  While you are scrolled away from the newest turn, the 'resume' region shows a button that takes you back, named by 'resume-label', "Jump to latest". Slot your own control into 'resume' to replace it.  A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn with neither an author label nor a time is named by 'turn-label', "Message".  A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, give 'author-styles' the declarations for each author, such as '{"ada": "--chat-message-background-color: …"}': the message drawn for each of their turns takes them as its 'style', so the message's custom properties change for that author alone. Turns passed as children are styled by their 'author', such as 'helix-chat-message[author="ada"]'. */
   "helix-headless-chat": DefineCustomElement<
     HelixHeadlessChat,
     HelixHeadlessChatVueProps,
@@ -19109,7 +19264,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCodeVueProps,
     HelixHeadlessCodeVueEvents
   >;
-  /** A text field with a button that opens 'ColorPicker' in an overlay. 'ColorPicker' provides the square, the ramps, the eyedropper, and the syntax toggle, and you can also use it on its own, flat on the page. Color Input adds the field, the overlay, and the form value, the same arrangement Date Input has with 'DatePicker'.  You can type or paste a color into the field without opening the picker. Color Input is a custom control, unlike '<input type="color">', so you can style the panel to match your interface.  The field reads every color syntax, including '#f00', '#ff0000', 'rgb(255 0 0)', 'rgba(255,0,0,.5)', 'rgb(255 0 0 / 50%)', 'hsl(0 100% 50%)', 'oklch(62.8% 0.258 29.2)', and 'hsb(0, 100%, 100%)'. It writes colors in the syntax that 'format' names. The field shows the value without reformatting it, because half-typed input does not survive a round trip through a formatter. Date Input does the same with dates.  Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does, so the message about a color it cannot read waits until you are done. Dragging in the panel sends 'input' as the color moves and 'change' when it settles.  The trigger and ArrowDown open the panel with focus in the square. Tab moves between the panel's controls without leaving it, and Escape closes it and returns focus to the field.  The component sets '--color-input-swatch', so do not set it yourself. It holds the resolved color, so the styled tier can paint the swatch without parsing the value. */
+  /** A text field with a button that opens 'ColorPicker' in an overlay. 'ColorPicker' provides the square, the ramps, the eyedropper, and the syntax toggle, and you can also use it on its own, flat on the page. Color Input adds the field, the overlay, and the form value, the same arrangement Date Input has with 'DatePicker'.  You can type or paste a color into the field without opening the picker. Color Input is a custom control, unlike '<input type="color">', so you can style the panel to match your interface.  The field reads every color syntax, including '#f00', '#ff0000', 'rgb(255 0 0)', 'rgba(255,0,0,.5)', 'rgb(255 0 0 / 50%)', 'hsl(0 100% 50%)', 'oklch(62.8% 0.258 29.2)', and 'hsb(0, 100%, 100%)'. It writes colors in the syntax that 'format' names. The field shows the value without reformatting it, because half-typed input does not survive a round trip through a formatter. Date Input does the same with dates.  Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does, so the message about a color it cannot read waits until you are done. Dragging in the panel sends 'input' as the color moves and 'change' when it settles.  The trigger and ArrowDown open the panel with focus in the square. Tab moves between the panel's controls without leaving it, and Escape closes it and returns focus to the control that opened it: the trigger after a press, and the field after ArrowDown.  The component sets '--color-input-swatch', so do not set it yourself. It holds the resolved color, so the styled tier can paint the swatch without parsing the value. */
   "helix-headless-color-input": DefineCustomElement<
     HelixHeadlessColorInput,
     HelixHeadlessColorInputVueProps,
@@ -19133,7 +19288,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCommandVueProps,
     HelixHeadlessCommandVueEvents
   >;
-  /** Copies text to the clipboard and confirms the copy. The platform gives no feedback for a clipboard write, so without a confirmation a press that copies looks the same as one that fails.  The confirmation and the event wait for the write to finish. The browser can refuse a clipboard write, for example on an insecure origin, in a document that is not focused, or after a gesture that does not qualify. A refused write, or nothing to copy, names the button with 'error-label' for the same moment a copy shows 'copied-label', draws a cross, and sends 'helix-copy-error'.  'from' copies from another element on the page: its text, an attribute written 'id[attribute]', or a property written 'id.property', read at the press. It takes the place of 'value'.  It replaces Button's render and its press, so it never submits a form or sends a command: 'type', 'command', 'commandfor' and the 'form*' overrides have no effect, and the 'start' and 'end' slots and the 'text' part are not rendered. An 'aria-label' on the element names it before a copy, in place of 'label'.  **Keyboard.** Enter and Space copy, as they press a native button.  The button is named 'label', or the host's 'aria-label', and its name changes to 'copied-label' or 'error-label' for the moment after a press. The same words are said in a live region, so a screen reader hears the result, and the tooltip shows them. */
+  /** Copies text to the clipboard and confirms the copy. The platform gives no feedback for a clipboard write, so without a confirmation a press that copies looks the same as one that fails.  The confirmation and the event wait for the write to finish. The browser can refuse a clipboard write, for example on an insecure origin, in a document that is not focused, or after a gesture that does not qualify. A refused write, or nothing to copy, names the button with 'error-label' for the same moment a copy shows 'copied-label', draws a cross, and sends 'helix-copy-error'.  'from' copies from another element on the page: its text, an attribute written 'id[attribute]', or a property written 'id.property', read at the press. It takes the place of 'value'.  It replaces Button's render and its press, so it never submits a form or sends a command: 'type', 'command', 'commandfor' and the 'form*' overrides have no effect, and the 'start' and 'end' slots and the 'text' part are not rendered. An 'aria-label' on the element names it before a copy, in place of 'label'.  **Keyboard.** Enter and Space copy, as they press a native button.  The button is named 'label', or the host's 'aria-label', and its name changes to 'copied-label' or 'error-label' for the moment after a press. The same words are said in a live region, so a screen reader hears the result, and the tooltip shows them. The tooltip does not also describe the button, since its words are the button's name.  **The tooltip.** It shows the name on hover and focus and the result after a press. 'tooltip="copy"' shows it only for the result, and 'tooltip="none"' draws none, as Web Awesome's copy button offers. 'tooltip-placement' is the side it prefers, and it moves to another side where that one does not fit.  **Words on the button.** 'show-label' draws the name beside the icon, and the result in its place after a press. The button is as wide as the longest of the three, so a press does not resize it. */
   "helix-headless-copy-button": DefineCustomElement<
     HelixHeadlessCopyButton,
     HelixHeadlessCopyButtonVueProps,
@@ -19187,7 +19342,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDonutChartVueProps,
     HelixHeadlessDonutChartVueEvents
   >;
-  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside: 'Tab' from the last control goes to the first,   and 'Shift+Tab' from the first to the last, as in 'Dialog' - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape, in a browser without 'closedby' as well.  Set 'persistent' for a drawer that has to be answered: Escape, a press outside, and a swipe leave it open, and the close control and 'close()' still close it. 'closedby="none"' keeps it open on all three as well, and 'closedby="closerequest"' keeps it open on a press outside.  **A touch or a pen swipes it away**, toward the edge it came from, resolved against the writing direction. A swipe past halfway, or a quick one, closes it through the same request as every other way out. 'snap-points' lists the fractions of the panel a reader can leave on screen, such as '0.5 1' for a sheet that rests half open: it opens at the smallest, and a swipe settles at the nearest. While a swipe moves the panel, the distance is written on it as '--drawer-swipe-x' and '--drawer-swipe-y'. 'swipe="false"' turns swiping off.  'snap' is the snap point the panel rests at, and ':state(snapped)' is on the host while that is less than the whole panel. 'snapTo()' moves it to another. **Focus moving to a control past the window's edge opens the panel to its largest snap point**, so a reader moving through a half open sheet with 'Tab' never lands on a control they cannot see.  Set 'dismissible' to draw a close control in the corner, labeled by 'dismiss-label', as 'Dialog' draws one.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names, and 'fallback-label' where nothing names it. A development build warns when a drawer opens with nothing but 'fallback-label' to name it.  The panel is described by the words at the start of its body, as 'Dialog' is: the elements in the default slot before the first one that is or holds a control. An 'aria-describedby' on the host replaces it.  **Keyboard.** Opening moves focus to the first control in the panel.  | Key | What it does | |---|---| | Tab, Shift+Tab | In a modal drawer, moves through the controls in the panel, from the last round to the first and from the first round to the last. In a drawer that is not modal, moves on to the page. | | Escape | Asks to close the drawer. A 'helix-before-close' listener can refuse, and 'persistent' or 'closedby="none"' keeps it open. | | Enter, Space | On the close control, closes the drawer. |  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> ''' */
+  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside: 'Tab' from the last control goes to the first,   and 'Shift+Tab' from the first to the last, as in 'Dialog' - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape, in a browser without 'closedby' as well.  Set 'persistent' for a drawer that has to be answered: Escape, a press outside, and a swipe leave it open, and the close control and 'close()' still close it. 'closedby="none"' keeps it open on all three as well, and 'closedby="closerequest"' keeps it open on a press outside.  **A touch or a pen swipes it away**, toward the edge it came from, resolved against the writing direction. A swipe past halfway, or a quick one, closes it through the same request as every other way out. 'snap-points' lists the fractions of the panel a reader can leave on screen, such as '0.5 1' for a sheet that rests half open: it opens at the smallest, and a swipe settles at the nearest. While a swipe moves the panel, the distance is written on it as '--drawer-swipe-x' and '--drawer-swipe-y'. 'swipe="false"' turns swiping off.  'snap' is the snap point the panel rests at, and ':state(snapped)' is on the host while that is less than the whole panel. 'snapTo()' moves it to another. **Focus moving to a control past the window's edge opens the panel to its largest snap point**, so a reader moving through a half open sheet with 'Tab' never lands on a control they cannot see.  Set 'dismissible' to draw a close control in the corner, labeled by 'dismiss-label', as 'Dialog' draws one.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names, and 'fallback-label' where nothing names it. A development build warns when a drawer opens with nothing but 'fallback-label' to name it.  The panel is described by the words at the start of its body, as 'Dialog' is: the elements in the default slot before the first one that is or holds a control. An 'aria-describedby' on the host replaces it.  **Keyboard.** Opening moves focus to the first control in the panel.  | Key | What it does | |---|---| | Tab, Shift+Tab | In a modal drawer, moves through the controls in the panel, from the last round to the first and from the first round to the last. In a drawer that is not modal, moves on to the page. | | Escape | Asks to close the drawer. A 'helix-before-close' listener can refuse, and 'persistent' or 'closedby="none"' keeps it open. | | Enter, Space | On the close control, closes the drawer. |  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> '''  From its first press, a button that opens the drawer this way says whether the drawer is open: a Helix button through 'expanded', and any other element with 'aria-expanded'. */
   "helix-headless-drawer": DefineCustomElement<
     HelixHeadlessDrawer,
     HelixHeadlessDrawerVueProps,
@@ -19421,7 +19576,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 (Space on a choice row changes it and leaves the menu open), 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.  **A filter field.** With 'filterable', the menu opens with focus in a field above its rows, and typing narrows the rows of the page the keys move in, as React Aria's 'Autocomplete' around a 'Menu' does. A row is kept where its words hold the filter, in any case, or where 'filterMatch' says so. Each page starts unfiltered, and the filter is cleared as the menu closes. Where typing keeps no row, the menu shows 'no-results-text'. Focus stays in the field: Up and Down Arrow move the highlight through the rows that are left, Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow on a submenu goes back, and Escape clears the filter and then closes the menu. Home, End and the other keys move the caret and type. The field names the highlighted row with 'aria-activedescendant', and the rows are a 'menu' after the field. Cancel 'helix-filter' to keep every row showing and narrow the rows yourself, such as by replacing them with rows from a server. */
+  /** 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. Focus follows a mouse resting on a row in either mode, and a drilled page is a 'menu' named by the row that opened it.  **'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 (Space on a choice row changes it and leaves the menu open), 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) }'.  **The choices in one place.** 'checkedValues' holds the values of the rows that are checked, anywhere in the menu, and setting it checks exactly those rows, as React Aria's 'selectedKeys' does. 'change' is sent on the menu when a reader's choice changes it.  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.  **A filter field.** With 'filterable', the menu opens with focus in a field above its rows, and typing narrows the rows of the page the keys move in, as React Aria's 'Autocomplete' around a 'Menu' does. A row is kept where its words hold the filter, in any case, or where 'filterMatch' says so. Each page starts unfiltered, and the filter is cleared as the menu closes. Where typing keeps no row, the menu shows 'no-results-text'. Focus stays in the field: Up and Down Arrow move the highlight through the rows that are left, Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow on a submenu goes back, and Escape clears the filter and then closes the menu. A screen reader hears how many rows the filter keeps ('results-label'). Home, End and the other keys move the caret and type. The field names the highlighted row with 'aria-activedescendant', and the rows are a 'menu' after the field. Cancel 'helix-filter' to keep every row showing and narrow the rows yourself, such as by replacing them with rows from a server. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,
@@ -19493,7 +19648,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessOptionSeparatorVueProps,
     HelixHeadlessOptionSeparatorVueEvents
   >;
-  /** Outline is a table of contents for a document. 'Navigation' does the same job for a site.  The links are your own anchors. A router renders its own '<a>' and cannot render one inside the outline's shadow root, and the hrefs are fragments on the same page.  Write the anchors flat, with 'data-level' for their depth, or nested in lists, '<ul><li><a>'. A screen reader hears the levels either way: the outline puts a flat run into lists inside list items of its own, nested by 'data-level', and leaves the links where they are. A link without 'data-level' is at the top level.  A heading slotted into 'heading' names the navigation, in place of 'label'.  In a contents rail with a scrollbar of its own, 'follow' keeps the link of the section in view showing as the reader scrolls the page.  **Keyboard.** The links are your anchors, in the tab order as you wrote them, so the outline adds no keys of its own: Tab moves through the links and Enter follows one. Following a link moves focus to its section, so the next Tab goes on from the heading, also with 'behavior' set.  **What a screen reader hears.** A navigation landmark named by 'label', "On this page", or by the slotted heading. The links are lists, nested by level, so a reader hears how many links a level holds and where each one is. The link to the section in view carries 'aria-current="location"', read as "current location", and it moves as the page scrolls without announcing, which would interrupt the reading it follows.  The current section is decided by the headings' positions. An 'IntersectionObserver' with a band near the top fails both ways: when headings are far apart, none is in the band and no section is marked, and when they are close together, several are in the band at once. */
+  /** Outline is a table of contents for a document. 'Navigation' does the same job for a site.  The links are your own anchors. A router renders its own '<a>' and cannot render one inside the outline's shadow root, and the hrefs are fragments on the same page.  Write the anchors flat, with 'data-level' for their depth, or nested in lists, '<ul><li><a>'. A screen reader hears the levels either way: the outline puts a flat run into lists inside list items of its own, nested by 'data-level', and leaves the links where they are. A link without 'data-level' is at the top level.  A heading slotted into 'heading' names the navigation, in place of 'label'.  In a contents rail with a scrollbar of its own, 'follow' keeps the link of the section in view showing as the reader scrolls the page.  **Keyboard.** The links are your anchors, in the tab order as you wrote them, so the outline adds no keys of its own: Tab moves through the links and Enter follows one. Following a link moves focus to its section, so the next Tab goes on from the heading, also with 'behavior' set.  **What a screen reader hears.** A navigation landmark named by 'label', "On this page", or by the slotted heading. The links are lists, nested by level, so a reader hears how many links a level holds and where each one is. The link to the section in view carries 'aria-current="location"', read as "current location", and it moves as the page scrolls without announcing, which would interrupt the reading it follows.  The current section is decided by the headings' positions. An 'IntersectionObserver' with a band near the top fails both ways: when headings are far apart, none is in the band and no section is marked, and when they are close together, several are in the band at once.  **Several sections at once.** 'marks="visible"' marks the link of every section with part of it on screen, from the reading line to the bottom of what the sections scroll in, as Zag's table of contents marks its active ids. The mark then runs from the first of those links to the last, and 'marked' lists their ids in page order.  **Going to a section from code.** 'scrollToSection(id)' scrolls to the section as a press on its link does, with 'behavior', and marks its link at once.  **Styling a link by its state.** Each link the outline finds carries 'data-depth', its depth in the outline from '1', nested lists and 'data-level' alike, and 'aria-current="location"' while its section is marked, so 'a[aria-current]' and 'a[data-depth="2"]' are the hooks for a rule of yours. */
   "helix-headless-outline": DefineCustomElement<
     HelixHeadlessOutline,
     HelixHeadlessOutlineVueProps,
@@ -19523,7 +19678,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessPinInputVueProps,
     HelixHeadlessPinInputVueEvents
   >;
-  /** Popover is the general overlay that the specific ones build on. 'Menu' holds commands, 'Select' holds options, and 'Tooltip' holds a description. Popover holds any content you put in it, so it has no keyboard handling of its own.  The trigger is slotted and stays your own element. A Helix trigger is told whether the popover is open inside its own shadow root. On a plain element, such as a '<button>', the popover writes 'aria-expanded', from a frame after its own first render, or from the first press where that comes sooner. It never writes it where you wrote 'aria-expanded' yourself, and writes nothing else onto your markup.  The panel is in the top layer through the popover API, so it needs no 'z-index', and an ancestor with 'overflow: hidden', 'transform', 'filter', or 'contain' does not clip or move it.  It opens on click and from a command. 'command="--show"' and the related commands work as they do on 'Dialog' and 'Drawer', so a button anywhere on the page can open the popover with no script.  **Opening moves focus into the panel**, to the first control in it, or to the panel itself where it holds none, and closing from inside gives it back to the trigger. It closes on Escape, on a press outside it, and when focus moves out of the trigger and the panel to somewhere else on the page.  'modal' keeps 'Tab' inside the panel while it is open and says so with 'aria-modal', for a panel that has to be answered before the page goes on. The rest of the page is hidden from screen readers with 'aria-hidden' while it is open, so the virtual cursor stays in the panel too. Without it the popover does not trap focus.  The panel's name is 'label' when you set it. Otherwise it is the first heading in the panel, or the elements an 'aria-labelledby' on the host names. A development build warns when a popover opens with nothing but 'fallback-label' to name it.  **Keyboard.** Opening moves focus to the first control in the panel, or to the panel where it holds none.  | Key | What it does | |---|---| | Enter, Space | On the trigger, opens the panel, or closes it while it is open. | | Escape | Closes the panel and puts focus back on the trigger. | | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With 'modal', moves from the last control round to the first and from the first round to the last. |  'arrow' draws a point on the panel's edge facing the trigger. The side the panel landed on is on the host as ':state(placed-top)' and its kin, and the trigger's width is on the panel as '--floating-anchor-inline-size', for a panel as wide as its trigger:  '''css helix-popover::part(popover) {   min-inline-size: var(--floating-anchor-inline-size); } ''' */
+  /** Popover is the general overlay that the specific ones build on. 'Menu' holds commands, 'Select' holds options, and 'Tooltip' holds a description. Popover holds any content you put in it, so it has no keyboard handling of its own.  The trigger is slotted and stays your own element. A Helix trigger is told whether the popover is open inside its own shadow root. On a plain element, such as a '<button>', the popover writes 'aria-expanded', from a frame after its own first render, or from the first press where that comes sooner. It never writes it where you wrote 'aria-expanded' yourself, and writes nothing else onto your markup.  The panel is in the top layer through the popover API, so it needs no 'z-index', and an ancestor with 'overflow: hidden', 'transform', 'filter', or 'contain' does not clip or move it.  It opens on click and from a command. 'command="--show"' and the related commands work as they do on 'Dialog' and 'Drawer', so a button anywhere on the page can open the popover with no script. From its first press, a button that opens it this way says whether the popover is open: a Helix button through 'expanded', and any other element with 'aria-expanded'.  **Opening moves focus into the panel**, to the first control in it, or to the panel itself where it holds none, and closing from inside gives it back to the trigger. It closes on Escape, on a press outside it, and when focus moves out of the trigger and the panel to somewhere else on the page.  'modal' keeps 'Tab' inside the panel while it is open and says so with 'aria-modal', for a panel that has to be answered before the page goes on. The rest of the page is hidden from screen readers with 'aria-hidden' while it is open, so the virtual cursor stays in the panel too, and the page does not scroll behind it. Without it the popover does not trap focus.  A press outside closes the panel and leaves focus where the press put it. Where it put focus nowhere, as a press on text or on the page's background does, focus goes back to the trigger.  The panel's name is 'label' when you set it. Otherwise it is the first heading in the panel, or the elements an 'aria-labelledby' on the host names. A development build warns when a popover opens with nothing but 'fallback-label' to name it.  **Keyboard.** Opening moves focus to the first control in the panel, or to the panel where it holds none.  | Key | What it does | |---|---| | Enter, Space | On the trigger, opens the panel, or closes it while it is open. | | Escape | Closes the panel and puts focus back on the trigger. | | Tab, Shift+Tab | Moves through the controls in the panel. Leaving the panel and the trigger closes it. With 'modal', moves from the last control round to the first and from the first round to the last. |  The panel opens against the trigger, or against the element 'anchor' names, such as a field beside the button that opens it. 'offset' moves it away from that element, 'cross-offset' slides it along the side it is on, 'container-padding' keeps it that far from the window's edges, and 'flip="false"' keeps it on its side where the other side has more room.  'arrow' draws a point on the panel's edge facing the trigger. The side the panel landed on is on the host as ':state(placed-top)' and its kin, its alignment along that side as ':state(aligned-start)' or ':state(aligned-end)', and the trigger's width is on the panel as '--floating-anchor-inline-size', for a panel as wide as its trigger:  '''css helix-popover::part(popover) {   min-inline-size: var(--floating-anchor-inline-size); } ''' */
   "helix-headless-popover": DefineCustomElement<
     HelixHeadlessPopover,
     HelixHeadlessPopoverVueProps,
@@ -19577,7 +19732,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. 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. */
+  /** 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. On a right-to-left page Left chooses the one after. | | 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,
@@ -19625,7 +19780,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSpeedDialVueProps,
     HelixHeadlessSpeedDialVueEvents
   >;
-  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', with 'aria-valuetext' saying the start pane's share as a percentage in the nearest 'lang', or in the reader's locale where no 'lang' is set, and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'.  Set 'primary' to the pane that keeps its size when the splitter's own size changes, such as a sidebar beside a window being resized. The other pane takes all of the change, as Web Awesome's split panel does. Without it, both panes keep their share.  **Three or more panes along one axis are splitters nested on that axis**, a splitter in the 'end' pane of another for three columns. The nested one keeps the pane on its far side the size it was while the outer divider moves, so a divider resizes only the two panes beside it, as Zag's splitter does with any number of panels. Where the whole row is resized, every pane keeps its share, unless 'primary' says otherwise.  **Keyboard.** The divider is one tab stop.  | Key | What it does | |---|---| | Left, Right | Moves a side-by-side divider by 'step'. On a right-to-left page, Left moves it toward the end. | | Up, Down | Moves a stacked divider by 'step'. | | Home, End | Moves the divider to its bounds. | | Enter | Collapses the start pane, and opens it again. | | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. | */
+  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', with 'aria-valuetext' saying the start pane's share as a percentage in the nearest 'lang', or in the reader's locale where no 'lang' is set, and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'. 'collapsible' says which panes can be collapsed at all, as Zag's panels each say.  'min' is the least the start pane keeps and 'end-min' the least the end pane keeps, each a percentage or a CSS length such as '16rem'.  Set 'primary' to the pane that keeps its size when the splitter's own size changes, such as a sidebar beside a window being resized. The other pane takes all of the change, as Web Awesome's split panel does. Without it, both panes keep their share.  **Three or more panes along one axis are splitters nested on that axis**, a splitter in the 'end' pane of another for three columns. The nested one keeps the pane on its far side the size it was while the outer divider moves, so a divider resizes only the two panes beside it, as Zag's splitter does with any number of panels. Where the whole row is resized, every pane keeps its share, unless 'primary' says otherwise.  **Keyboard.** The divider is one tab stop.  | Key | What it does | |---|---| | Left, Right | Moves a side-by-side divider by 'step'. On a right-to-left page, Left moves it toward the end. | | Up, Down | Moves a stacked divider by 'step'. | | Home, End | Moves the divider to its bounds. | | Enter | Collapses the start pane, or the end pane where 'collapsible="end"', and opens it again. | | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. | */
   "helix-headless-splitter": DefineCustomElement<
     HelixHeadlessSplitter,
     HelixHeadlessSplitterVueProps,
@@ -19703,13 +19858,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTabVueProps,
     HelixHeadlessTabVueEvents
   >;
-  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. In 'multiple', Shift with an arrow, Home or End selects the range from the tag last pressed to the tag focus moves to, Shift with a press or Space selects the range to that tag, and Control or Command with A selects every tag that is not disabled. 'selection-behavior="replace"' selects the tag a reader presses or moves to alone, as a file list does, and Control or Command with a press or Space adds or takes out one tag. 'disallow-empty-selection' keeps one tag selected once one is. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over. A selected tag that is removed leaves 'value', which then sends 'change'.  Name the set with 'label'. Each tag is named by its words alone, without its remove button. 'value' takes an array of values on the property as well, as React sets 'value={['Apple']}'; a press writes it back as a string.  **Removing the last tag keeps focus in the group.** With no tags left the set is a 'group', and focus moves to its 'empty' part, which holds the 'empty' slot: put words there such as "No filters" for a reader to hear. With nothing slotted it says 'empty-label', "No tags". Where only disabled tags are left, the first of them holds the tab stop and takes focus, so the reader stays in the set. */
+  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. In 'multiple', Shift with an arrow, Home or End selects the range from the tag last pressed to the tag focus moves to, Shift with a press or Space selects the range to that tag, and Control or Command with A selects every tag that is not disabled. 'selection-behavior="replace"' selects the tag a reader presses or moves to alone, as a file list does, and Control or Command with a press or Space adds or takes out one tag. 'disallow-empty-selection' keeps one tag selected once one is, and Escape lets go of the selection otherwise. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over. A selected tag that is removed leaves 'value', which then sends 'change'.  Name the set with 'label'. Each tag is named by its words alone, without its remove button. 'value' takes an array of values on the property as well, as React sets 'value={['Apple']}'; a press writes it back as a string.  **Removing the last tag keeps focus in the group.** With no tags left the set is a 'group', and focus moves to its 'empty' part, which holds the 'empty' slot: put words there such as "No filters" for a reader to hear. With nothing slotted it says 'empty-label', "No tags". Where only disabled tags are left, the first of them holds the tab stop and takes focus, so the reader stays in the set.  **Typing new tags.** A field where people type tags and press Enter to add each one is Combobox with 'multiple' and 'allows-custom-value', or 'creatable' to ask first with 'helix-create'. It draws each value as a tag, Backspace on the empty field removes the last one, and the arrow keys move between them. */
   "helix-headless-tag-group": DefineCustomElement<
     HelixHeadlessTagGroup,
     HelixHeadlessTagGroupVueProps,
     HelixHeadlessTagGroupVueEvents
   >;
-  /** A label that people can optionally remove. 'dismissible' is the difference from a badge: a badge shows a state that people cannot change, and a tag names something they can remove.  The remove button sends 'helix-dismiss'. The tag does not remove itself, because your code owns the list it is in, so remove it in your handler. A listener can cancel 'helix-dismiss', and 'dismiss()' then returns 'false'. When the handler removes a tag whose remove button has focus, focus moves to the next tag's remove button, or to the previous one's after the last tag.  The remove button is named for its tag, such as "Remove Apple", so a list of buttons says which tag each one removes. Write '{label}' in 'dismiss-label' to put the tag's words somewhere else, such as 'dismiss-label="{label} entfernen"'.  'href' makes the label a link, and 'disabled' takes the tag out of reach: its link and its remove button stop answering.  **In a 'Tag.Group' a tag is a row of a grid.** The group gives it its role, its place in the one tab stop and, where the group selects, whether it is selected. Its remove button leaves the tab order there, Delete and Backspace doing its job from the row. */
+  /** A label that people can optionally remove. 'dismissible' is the difference from a badge: a badge shows a state that people cannot change, and a tag names something they can remove.  The remove button sends 'helix-dismiss'. The tag does not remove itself, because your code owns the list it is in, so remove it in your handler. A listener can cancel 'helix-dismiss', and 'dismiss()' then returns 'false'. When the handler removes a tag whose remove button has focus, focus moves to the next tag's remove button, or to the previous one's after the last tag.  The remove button is named for its tag, such as "Remove Apple", so a list of buttons says which tag each one removes. Write '{label}' in 'dismiss-label' to put the tag's words somewhere else, such as 'dismiss-label="{label} entfernen"'.  'href' makes the label a link, and 'disabled' takes the tag out of reach: its link and its remove button stop answering.  **In a 'Tag.Group' a tag is a row of a grid.** The group gives it its role, its place in the one tab stop and, where the group selects, whether it is selected. Its remove button leaves the tab order there, Delete and Backspace doing its job from the row.  **Styling a tag by what is happening to it.** ':state(selected)' while it is selected, ':state(focus-visible)' while its cell shows keyboard focus, '[disabled]' while it is out of reach, and the host's own ':hover' and ':active' under the pointer, as React Aria's 'data-hovered' and 'data-pressed' are. */
   "helix-headless-tag": DefineCustomElement<
     HelixHeadlessTag,
     HelixHeadlessTagVueProps,
@@ -19739,13 +19894,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTimelineGroupVueProps,
     HelixHeadlessTimelineGroupVueEvents
   >;
-  /** Given 'datetime', the label you write is wrapped in a '<time>' element, so a machine-readable value such as "2026-08-19" travels with a label such as "yesterday". Without 'datetime', the label is a '<span>'.  **'relative' writes the time for you** as how long ago it was, such as "3 hours ago", from 'datetime', where the 'time' slot is empty. The words move on as they go stale, "3 hours ago" becoming "4 hours ago", with one wakeup shared by every reading on the page, as 'FormatDate' keeps its own. They are in the language of the page, or of the nearest 'lang'.  Each entry draws the connector line that arrives at it and hides it when it is the first entry, using ':host(:first-child)'. This needs no index, no counting parent, and no script. 'Steps' and 'Breadcrumbs' work the same way.  'tone' sets the kind of event and is the only thing that colors the mark. It uses the same values as 'Announcement'. **A screen reader hears the tone as a word**, from 'tone-labels': the mark is an image named "Error", "Information", "Success" or "Warning", so the color is not the only place the meaning is. 'neutral' and 'primary' say nothing unless you name them.  **'pending' marks an event that has not happened yet**, such as one that is scheduled. The mark is the open circle, and a screen reader hears 'pending-label', "Scheduled", with the tone's word. */
+  /** Given 'datetime', the label you write is wrapped in a '<time>' element, so a machine-readable value such as "2026-08-19" travels with a label such as "yesterday". Without 'datetime', the label is a '<span>'.  **'relative' writes the time for you** as how long ago it was, such as "3 hours ago", from 'datetime', where the 'time' slot is empty. The words move on as they go stale, "3 hours ago" becoming "4 hours ago", with one wakeup shared by every reading on the page, as 'FormatDate' keeps its own. They are in the language of the page, or of the nearest 'lang'. The whole date and time is the reading's 'title', so a pointer resting on "3 hours ago" shows when it was, and a screen reader reads it as the description.  Each entry draws the connector line that arrives at it and hides it when it is the first entry, using ':host(:first-child)'. This needs no index, no counting parent, and no script. 'Steps' and 'Breadcrumbs' work the same way.  'tone' sets the kind of event and is the only thing that colors the mark. It uses the same values as 'Announcement'. **A screen reader hears the tone as a word**, from 'tone-labels': the mark is an image named "Error", "Information", "Success" or "Warning", so the color is not the only place the meaning is. 'neutral' and 'primary' say nothing unless you name them.  **'pending' marks an event that has not happened yet**, such as one that is scheduled. The mark is the open circle, and a screen reader hears 'pending-label', "Scheduled", with the tone's word. */
   "helix-headless-timeline-item": DefineCustomElement<
     HelixHeadlessTimelineItem,
     HelixHeadlessTimelineItemVueProps,
     HelixHeadlessTimelineItemVueEvents
   >;
-  /** A timeline is a record of events that happened or are scheduled. Each entry carries a time, and no entry is current or complete. For a process you move through, with a current stage and 'active' and 'complete' states, use 'Steps'.  Each entry draws the connector line that arrives at it and hides it when it is first, using ':host(:first-child)'. This resolves at layout with no script, so the server markup is correct before anything runs.  The host has 'role="list"', because the entries are your elements in the light DOM. 'Steps' does the same.  **Group entries by date with 'Timeline.Group'**, which puts a heading such as "Today" over its entries. The group is an entry of the timeline, and its entries are a list of their own named by the heading.  **The reading order is the order you write the entries in**, in every layout the styled tier draws: down the page, either side of a line down the middle, or across the page. Inside each entry the time is read before what happened. Write the entries in the order the events happened, oldest or newest first, and the layout only moves where they are drawn. */
+  /** A timeline is a record of events that happened or are scheduled. Each entry carries a time, and no entry is current or complete. For a process you move through, with a current stage and 'active' and 'complete' states, use 'Steps'.  Each entry draws the connector line that arrives at it and hides it when it is first, using ':host(:first-child)'. This resolves at layout with no script, so the server markup is correct before anything runs.  The host has 'role="list"', because the entries are your elements in the light DOM. 'Steps' does the same.  **Group entries by date with 'Timeline.Group'**, which puts a heading such as "Today" over its entries. The group is an entry of the timeline, and its entries are a list of their own named by the heading.  **The reading order is the order you write the entries in**, in every layout the styled tier draws: down the page, either side of a line down the middle, or across the page. Inside each entry the time is read before what happened. Write the entries in the order the events happened, oldest or newest first, and the layout only moves where they are drawn.  **A feed that loads more entries sets 'loading' while it fetches.** The timeline is busy, and an entry after the last says "Loading more" ('loading-label', or your own content in the 'loading' slot). Put a button that asks for more after the timeline, and move focus to the first new entry when they arrive. */
   "helix-headless-timeline": DefineCustomElement<
     HelixHeadlessTimeline,
     HelixHeadlessTimelineVueProps,
@@ -19781,7 +19936,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessToolbarVueProps,
     HelixHeadlessToolbarVueEvents
   >;
-  /** The trigger stays your own element. The bubble renders in the top layer through the popover API, so an ancestor with 'overflow: hidden' does not clip it and no 'z-index' is needed. 'FloatingController' positions it and flips it to another side when the preferred side does not fit.  **Place the tooltip beside its trigger, name the trigger with 'for', and name the tooltip in the trigger's 'aria-describedby'.** The description is then in your own markup, so it is in the server's HTML and in the accessibility tree at rest, in every browser, before anyone points at the trigger or focuses it:  '''html <helix-headless-button aria-describedby="save-tip" id="save">Save</helix-headless-button> <helix-headless-tooltip content="Save your work" for="save" id="save-tip"></helix-headless-tooltip> '''  Without the attribute, the tooltip links itself through an element reference on the control that takes focus, and it never writes into your markup before you act, so hydration stays intact. A trigger that is a Helix component is described at once, inside its own shadow root. A plain element in your markup is described when you first point at it or focus it, so a screen reader in reading mode meets it with no description until then. Where the browser has no element references, nothing links the two, and the tooltip warns once on first open. The tooltip can also wrap its trigger, which describes a Helix component and leaves a plain element undescribed. In the 'for' form the tooltip itself is out of the accessibility tree while its bubble is down, so you meet its words once, as the trigger's description.  The tooltip shows on hover and on focus. It hides on pointer leave, on blur, on Escape, and when the trigger is activated. The pointer can move from the trigger onto the bubble and the bubble stays, unless you set 'hoverable="false"'. 'delay' is how long the pointer rests before it shows, and 'delay-out' how long it stays once the pointer leaves.  Once one tooltip is showing, moving to another trigger shows its tooltip with no 'delay', and the first one hides. The same holds for 'skip-delay' milliseconds after a tooltip hides, 300 unless you set it. 'show-on="focus"' shows the tooltip on keyboard focus only, for a hint a pointer does not need. */
+  /** The trigger stays your own element. The bubble renders in the top layer through the popover API, so an ancestor with 'overflow: hidden' does not clip it and no 'z-index' is needed. 'FloatingController' positions it and flips it to another side when the preferred side does not fit.  **Place the tooltip beside its trigger, name the trigger with 'for', and name the tooltip in the trigger's 'aria-describedby'.** The description is then in your own markup, so it is in the server's HTML and in the accessibility tree at rest, in every browser, before anyone points at the trigger or focuses it:  '''html <helix-headless-button aria-describedby="save-tip" id="save">Save</helix-headless-button> <helix-headless-tooltip content="Save your work" for="save" id="save-tip"></helix-headless-tooltip> '''  Without the attribute, the tooltip links itself through an element reference on the control that takes focus, and it never writes into your markup before you act, so hydration stays intact. A trigger that is a Helix component is described at once, inside its own shadow root. A plain element in your markup is described when you first point at it or focus it, so a screen reader in reading mode meets it with no description until then. Where the browser has no element references, nothing links the two, and the tooltip warns once on first open. The tooltip can also wrap its trigger, which describes a Helix component and leaves a plain element undescribed. In the 'for' form the tooltip itself is out of the accessibility tree while its bubble is down, so you meet its words once, as the trigger's description. A trigger whose name is already the tooltip's words, such as an icon button named Settings under a tooltip reading Settings, is not described by them again.  The tooltip shows on hover and on focus. It hides on pointer leave, on blur, on Escape, and when the trigger is activated. The pointer can move from the trigger onto the bubble and the bubble stays, unless you set 'hoverable="false"'. 'delay' is how long the pointer rests before it shows, and 'delay-out' how long it stays once the pointer leaves.  Once one tooltip is showing, moving to another trigger shows its tooltip with no 'delay', and the first one hides. The same holds for 'skip-delay' milliseconds after a tooltip hides, 300 unless you set it. 'show-on="focus"' shows the tooltip on keyboard focus only, for a hint a pointer does not need. */
   "helix-headless-tooltip": DefineCustomElement<
     HelixHeadlessTooltip,
     HelixHeadlessTooltipVueProps,
@@ -19841,7 +19996,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessVideoVueProps,
     HelixHeadlessVideoVueEvents
   >;
-  /** The items arrive as data, in one of two ways:  - 'items' takes an array. A framework sets it as a property, and React   hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which   a server sends as markup.  Each item is drawn into a row in one of two ways:  - 'renderItem' is a function from an item and its index to the row's   content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element   with the item's 'name' as text, and 'data-field-href="url"' writes the   item's 'url' into 'href', the same for any attribute. A field may be a path   of keys, such as 'author.name'.  Rows are your markup in the light DOM, so your stylesheet styles them.  **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. 'min-column-width' lays out as many columns as fit the box instead, as React Aria's grid layout does with its smallest item size, and follows the box as it resizes. 'gap' spaces the rows, and the columns of a grid, by a number of pixels the list counts in each row's place.  **Across.** 'orientation="horizontal"' lays the items out along a line and scrolls it sideways, as a strip of cards does, windowed the same way: 'estimate' is then an item's width, and the box needs an inline size.  **Sections.** 'section-field' names the field of each item that says which section it is in, and the list draws a header before each section's items, as React Aria's list box sections do. Each section is an element with the 'group' role, named by its header, which is its first child and carries 'data-header', so your stylesheet styles it, such as with 'position: sticky'. A section starts wherever the field changes, so give the items in order. The window counts the headers with the items, and a section the window starts inside is drawn with its header. 'renderSection' draws a header of your own.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Escape | Lets go of every chosen item, in a list with 'selection-mode'. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. Escape lets go of every chosen item, and keeps the key from the dialog or menu around the list while there was something to let go of. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'.  'selection-behavior="replace"' selects the item pressed alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press or with Space adds or takes out one item, and with an arrow moves without selecting.  **Disabled items.** 'disabled-keys' names items by their keys, separated by commas. Their rows carry 'aria-disabled', the keys and typing pass over them, and a press, Space, or Control with A does not select them.  **Rows a stylesheet can tell apart.** A chosen row carries 'data-selected', a disabled one 'data-disabled', as React Aria's rows do, and the row the keys are on, which holds the tab stop, 'data-active', whether or not the list has focus.  **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none.  The list takes the 'empty' state while it has read its items and holds none, and the 'loading' state while 'loading' is set, so your stylesheet can change the box around it for either. A list with no name is reported once in a development build. Name it with 'label' or 'aria-label'.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
+  /** The items arrive as data, in one of two ways:  - 'items' takes an array. A framework sets it as a property, and React   hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which   a server sends as markup.  Each item is drawn into a row in one of two ways:  - 'renderItem' is a function from an item and its index to the row's   content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element   with the item's 'name' as text, and 'data-field-href="url"' writes the   item's 'url' into 'href', the same for any attribute. A field may be a path   of keys, such as 'author.name'.  Rows are your markup in the light DOM, so your stylesheet styles them.  **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. 'min-column-width' lays out as many columns as fit the box instead, as React Aria's grid layout does with its smallest item size, and follows the box as it resizes. 'gap' spaces the rows, and the columns of a grid, by a number of pixels the list counts in each row's place.  **Across.** 'orientation="horizontal"' lays the items out along a line and scrolls it sideways, as a strip of cards does, windowed the same way: 'estimate' is then an item's width, and the box needs an inline size.  **Sections.** 'section-field' names the field of each item that says which section it is in, and the list draws a header before each section's items, as React Aria's list box sections do. Each section is an element with the 'group' role, named by its header, which is its first child and carries 'data-header', so your stylesheet styles it, such as with 'position: sticky'. A section starts wherever the field changes, so give the items in order. The window counts the headers with the items, and a section the window starts inside is drawn with its header. 'renderSection' draws a header of your own.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Escape | Lets go of every chosen item, in a list with 'selection-mode'. | | Alt with Up or Down | In a 'reorderable' list, moves the item a place. Alt with Home or End moves it to either end. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. The row a reader last focused keeps the tab stop and stays drawn when it scrolls away, so Tab and Shift+Tab come back to it, as React Aria's collections do. In a list nobody has focused yet, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. Escape lets go of every chosen item, and keeps the key from the dialog or menu around the list while there was something to let go of. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'.  'selection-behavior="replace"' selects the item pressed alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press or with Space adds or takes out one item, and with an arrow moves without selecting.  **Disabled items.** 'disabled-keys' names items by their keys, separated by commas. Their rows carry 'aria-disabled', the keys and typing pass over them, and a press, Space, or Control with A does not select them.  **Rows a stylesheet can tell apart.** A chosen row carries 'data-selected', a disabled one 'data-disabled', as React Aria's rows do, and the row the keys are on, which holds the tab stop, 'data-active', whether or not the list has focus.  **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item.  **Moving items** is a separate import, '@fusion.dev/helix/virtual-list/reorder', as React Aria's drag and drop is. With it imported, 'reorderable' lets a reader move items in a list of one column without sections:  - Alt with Up or Down moves the item the keys are on a place, and Alt with   Home or End to either end, as the APG's rearrangeable listbox does. - A pointer drags a whole row. A press that does not travel is still a   press. The list scrolls near an edge, and an item far down a long set is   reached by dragging to the edge. - A drop sends 'helix-before-reorder', which you can refuse, and then   'helix-reorder', whose 'keys' hold every item's key in the new order.   **You move the items**: set 'items' to them in that order. The keys stay   on the item that moved. - Each move is said in a region screen readers announce. The row being   dragged carries 'data-dragging', and the row a drop would land beside   'data-drop-before' or 'data-drop-after'.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none.  The list takes the 'empty' state while it has read its items and holds none, and the 'loading' state while 'loading' is set, so your stylesheet can change the box around it for either. A list with no name is reported once in a development build. Name it with 'label' or 'aria-label'.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
   "helix-headless-virtual-list": DefineCustomElement<
     HelixHeadlessVirtualList,
     HelixHeadlessVirtualListVueProps,