@fusion.dev/helix-headless 0.165.0 → 0.167.0

package/types/vue.d.ts

@@ -18,6 +18,7 @@ import type {
   HelixHeadlessCallout,
   HelixHeadlessCanvasEdge,
   HelixHeadlessCanvasNode,
+  CanvasArrangeOptions,
   CanvasDocument,
   CanvasEdge,
   CanvasEdgeProps,
@@ -183,6 +184,7 @@ import type {
   HelixBeforeChangeEvent,
   HelixPressEvent,
   HelixBeforeMoveEvent,
+  HelixBeforePasteEvent,
   HelixBeforeReconnectEvent,
   HelixBeforeRelabelEvent,
   HelixCanvasEditEvent,
@@ -191,6 +193,7 @@ import type {
   HelixCanvasZoomEvent,
   HelixConnectEvent,
   HelixMoveEvent,
+  HelixPastedEvent,
   HelixReconnectEvent,
   HelixRelabelEvent,
   HelixRemoveEvent,
@@ -201,14 +204,14 @@ import type {
   HelixHistoryEvent,
   HelixPinEvent,
   HelixBeforeToggleEvent,
-  HelixToggleEvent,
   HelixCopyEvent,
+  HelixCopyErrorEvent,
+  HelixToggleEvent,
   HelixSampleEndEvent,
   HelixSampleStartEvent,
   HelixCreateEvent,
   HelixFilterEvent,
   HelixLoadMoreEvent,
-  HelixCopyErrorEvent,
   HelixBeforeReorderEvent,
   HelixExpandEvent,
   HelixFilteredEvent,
@@ -1753,6 +1756,9 @@ export type HelixHeadlessCanvasElementEvent<E = Event> = TypedEvent<
 /** `helix-before-move` event type */
 export type HelixHeadlessCanvasHelixBeforeMoveElementEvent =
   HelixHeadlessCanvasElementEvent<HelixBeforeMoveEvent>;
+/** `helix-before-paste` event type */
+export type HelixHeadlessCanvasHelixBeforePasteElementEvent =
+  HelixHeadlessCanvasElementEvent<HelixBeforePasteEvent>;
 /** `helix-before-reconnect` event type */
 export type HelixHeadlessCanvasHelixBeforeReconnectElementEvent =
   HelixHeadlessCanvasElementEvent<HelixBeforeReconnectEvent>;
@@ -1777,6 +1783,9 @@ export type HelixHeadlessCanvasHelixConnectElementEvent =
 /** `helix-move` event type */
 export type HelixHeadlessCanvasHelixMoveElementEvent =
   HelixHeadlessCanvasElementEvent<HelixMoveEvent>;
+/** `helix-pasted` event type */
+export type HelixHeadlessCanvasHelixPastedElementEvent =
+  HelixHeadlessCanvasElementEvent<HelixPastedEvent>;
 /** `helix-reconnect` event type */
 export type HelixHeadlessCanvasHelixReconnectElementEvent =
   HelixHeadlessCanvasElementEvent<HelixReconnectEvent>;
@@ -1797,6 +1806,10 @@ export type HelixHeadlessCanvasVueProps = {
   /** The hint shown when the board, waiting to be pressed with
 `gestures="activate"`, is scrolled or swiped over. */
   activateHintLabel?: (HelixHeadlessCanvas["activateHintLabel"]) | undefined;
+  /** What screen readers hear after `arrange()` moves the cards. */
+  "arranged-label"?: (HelixHeadlessCanvas["arrangedLabel"]) | undefined;
+  /** What screen readers hear after `arrange()` moves the cards. */
+  arrangedLabel?: (HelixHeadlessCanvas["arrangedLabel"]) | undefined;
   /** The text read with a card to say where its connections come from, with `{cards}`. */
   "comes-from-label"?: (HelixHeadlessCanvas["comesFromLabel"]) | undefined;
   /** The text read with a card to say where its connections come from, with `{cards}`. */
@@ -1895,6 +1908,10 @@ on a board that is a flow is the order its author meant.
 Absent is spatial, a resting value being an attribute's absence: a default
 that reflected would write a choice onto every host that no server sent. */
   order?: (HelixHeadlessCanvas["order"]) | undefined;
+  /** What screen readers hear after a paste, with `{count}` for the cards pasted. */
+  "pasted-label"?: (HelixHeadlessCanvas["pastedLabel"]) | undefined;
+  /** What screen readers hear after a paste, with `{count}` for the cards pasted. */
+  pastedLabel?: (HelixHeadlessCanvas["pastedLabel"]) | undefined;
   /** The route every connection takes when it sets no `path` of its own:
 `straight`, or `step` for right angles.
 
@@ -1928,6 +1945,14 @@ walk the cards. */
   "redone-label"?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
   /** What screen readers hear after a move or a resize is made again. */
   redoneLabel?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
+  /** What screen readers hear when Delete asks to remove what is selected, with
+`{count}` for how many cards and connections, and `{name}` for the one
+where there is one. */
+  "removed-label"?: (HelixHeadlessCanvas["removedLabel"]) | undefined;
+  /** What screen readers hear when Delete asks to remove what is selected, with
+`{count}` for how many cards and connections, and `{name}` for the one
+where there is one. */
+  removedLabel?: (HelixHeadlessCanvas["removedLabel"]) | undefined;
   /** What screen readers hear after a key resizes a card, with `{name}` for the
 card and `{width}` and `{height}` for its new size, in the document's
 units. */
@@ -2205,6 +2230,8 @@ it rather than fitting the board again. */
 export type HelixHeadlessCanvasVueEvents = {
   /** Cards are about to move. Cancelable: cancel it to keep the positions in your own state. */
   "helix-before-move": HelixHeadlessCanvasHelixBeforeMoveElementEvent;
+  /** Cards and connections are about to be pasted. Cancelable: cancel it to add the detail's document to your own state. */
+  "helix-before-paste": HelixHeadlessCanvasHelixBeforePasteElementEvent;
   /** A connection's end is about to move to another card or side. Cancelable: cancel it to keep connections in your own state. */
   "helix-before-reconnect": HelixHeadlessCanvasHelixBeforeReconnectElementEvent;
   /** A connection's label or a group's name is about to change. Cancelable: cancel it to keep labels in your own state. */
@@ -2221,6 +2248,8 @@ export type HelixHeadlessCanvasVueEvents = {
   "helix-connect": HelixHeadlessCanvasHelixConnectElementEvent;
   /** Cards moved and the move is finished: a drag was released, a click put a card down, or a key was pressed. */
   "helix-move": HelixHeadlessCanvasHelixMoveElementEvent;
+  /** Cards and connections were pasted, and the board holds them. */
+  "helix-pasted": HelixHeadlessCanvasHelixPastedElementEvent;
   /** A connection's end moved, and the move is finished. */
   "helix-reconnect": HelixHeadlessCanvasHelixReconnectElementEvent;
   /** A connection's label or a group's name changed. */
@@ -3152,9 +3181,18 @@ export type HelixHeadlessCodeBlockElementEvent<E = Event> = TypedEvent<
   HelixHeadlessCodeBlock,
   E
 >;
+/** `helix-before-change` event type */
+export type HelixHeadlessCodeBlockHelixBeforeChangeElementEvent =
+  HelixHeadlessCodeBlockElementEvent<HelixBeforeChangeEvent>;
 /** `helix-before-toggle` event type */
 export type HelixHeadlessCodeBlockHelixBeforeToggleElementEvent =
   HelixHeadlessCodeBlockElementEvent<HelixBeforeToggleEvent>;
+/** `helix-copy` event type */
+export type HelixHeadlessCodeBlockHelixCopyElementEvent =
+  HelixHeadlessCodeBlockElementEvent<HelixCopyEvent>;
+/** `helix-copy-error` event type */
+export type HelixHeadlessCodeBlockHelixCopyErrorElementEvent =
+  HelixHeadlessCodeBlockElementEvent<HelixCopyErrorEvent>;
 /** `helix-toggle` event type */
 export type HelixHeadlessCodeBlockHelixToggleElementEvent =
   HelixHeadlessCodeBlockElementEvent<HelixToggleEvent>;
@@ -3226,6 +3264,15 @@ block lays out. Not for a diff, whose files each scroll on their own. */
   "expand-label"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
   /** The expand button's words while the cap hides lines. */
   expandLabel?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
+  /** The name of the file shown, where the block holds several Code Blocks:
+the `label` of one, or its `language` without one.
+
+Unset, or a name no file has, shows the first. */
+  file?: (HelixHeadlessCodeBlock["file"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  "files-label"?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
+  /** The name of the file tabs, read by screen readers. */
+  filesLabel?: (HelixHeadlessCodeBlock["filesLabel"]) | undefined;
   /** The words of a button that hides a run of unchanged lines it showed, in a
 diff with `context-lines`. `{count}` is how many, and each language
 writes the forms it has. */
@@ -3362,8 +3409,16 @@ read, nor for a diff. */
 };
 
 export type HelixHeadlessCodeBlockVueEvents = {
+  /** A file tab showed its file, whose name `file` now holds. */
+  change: HelixHeadlessCodeBlockElementEvent;
+  /** A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown. */
+  "helix-before-change": HelixHeadlessCodeBlockHelixBeforeChangeElementEvent;
   /** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
   "helix-before-toggle": HelixHeadlessCodeBlockHelixBeforeToggleElementEvent;
+  /** The copy button put the code on the clipboard, with the text in `detail.value`. */
+  "helix-copy": HelixHeadlessCodeBlockHelixCopyElementEvent;
+  /** A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code. */
+  "helix-copy-error": HelixHeadlessCodeBlockHelixCopyErrorElementEvent;
   /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
   "helix-toggle": HelixHeadlessCodeBlockHelixToggleElementEvent;
 };
@@ -7252,7 +7307,8 @@ such as `buddhist` for `th-TH`, and `gregory` for every other, such as
 `persian` for `fa-IR`, so a date written here reads as the same date a
 Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405. */
   calendar?: (HelixHeadlessFormatDate["calendar"]) | undefined;
-  /** The timestamp, in any format `Date` can parse.
+  /** The timestamp: a `Date`, milliseconds since the epoch, or a string in any
+format `Date` can parse. The attribute is the string.
 
 An ISO string is what an API sends and what `<time datetime>` takes, so it
 is the shape that needs no translation at either end. Left unset this
@@ -10685,6 +10741,9 @@ export type HelixHeadlessMenuHelixBeforeCloseElementEvent =
 /** `helix-before-open` event type */
 export type HelixHeadlessMenuHelixBeforeOpenElementEvent =
   HelixHeadlessMenuElementEvent<HelixBeforeOpenEvent>;
+/** `helix-filter` event type */
+export type HelixHeadlessMenuHelixFilterElementEvent =
+  HelixHeadlessMenuElementEvent<HelixFilterEvent>;
 /** `helix-select` event type */
 export type HelixHeadlessMenuHelixSelectElementEvent =
   HelixHeadlessMenuElementEvent<HelixSelectEvent>;
@@ -10712,6 +10771,18 @@ Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this. */
   /** Whether the menu is the trigger's context menu: it opens where the reader
 asks for one, with a right-click, a long press, Shift+F10 or the menu key. */
   context?: (HelixHeadlessMenu["context"]) | undefined;
+  /** The text the rows are filtered by, which the filter field holds.
+
+Cleared as the menu closes and as a submenu opens or closes, so each page
+starts with every row showing. */
+  filter?: (HelixHeadlessMenu["filter"]) | undefined;
+  /** Whether the menu shows a field above its rows that narrows them as the
+reader types, with focus staying in the field. */
+  filterable?: (HelixHeadlessMenu["filterable"]) | undefined;
+  /** The filter field's name and placeholder. */
+  "filter-label"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
+  /** The filter field's name and placeholder. */
+  filterLabel?: (HelixHeadlessMenu["filterLabel"]) | undefined;
   /** Accessible name for the surface.
 
 Empty by default, which names the surface by its trigger, so a menu opened
@@ -10724,6 +10795,10 @@ to open the menu. Translate it with the rest of your interface. */
   /** The description a trigger gives under `open-on="long-press"`, saying how
 to open the menu. Translate it with the rest of your interface. */
   longPressLabel?: (HelixHeadlessMenu["longPressLabel"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  "no-results-text"?: (HelixHeadlessMenu["noResultsText"]) | undefined;
+  /** The text shown when the filter keeps no rows. */
+  noResultsText?: (HelixHeadlessMenu["noResultsText"]) | undefined;
   /** Space between the trigger and the surface, in pixels. */
   offset?: (HelixHeadlessMenu["offset"]) | undefined;
   /** What opens the menu from its trigger. `long-press` leaves a press to the
@@ -10772,6 +10847,13 @@ hydration, or diffed by a framework, it comes back holding whatever the
 last reader did rather than what the author wrote. `:state(open)` carries
 the resolved state for stylesheets, which is what the mirror is for. */
   open?: (HelixHeadlessMenu["open"]) | undefined;
+  /** Whether a row is kept by the filter: a function given the row's words and
+the filter, trimmed, that returns `true` to keep it showing, as React
+Aria's `Autocomplete` takes `filter`. See Listbox's `filterMatch`.
+
+Absent, a 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;
 };
 
 export type HelixHeadlessMenuVueEvents = {
@@ -10779,6 +10861,8 @@ export type HelixHeadlessMenuVueEvents = {
   "helix-before-close": HelixHeadlessMenuHelixBeforeCloseElementEvent;
   /** The menu is about to open. Cancelable: cancel it to keep it closed. */
   "helix-before-open": HelixHeadlessMenuHelixBeforeOpenElementEvent;
+  /** The text in the filter field changed, with the new text in `detail.value`. Cancelable: cancel it to keep every row showing and narrow the rows yourself. */
+  "helix-filter": HelixHeadlessMenuHelixFilterElementEvent;
   /** An item was chosen. Cancelable: cancel it to keep the menu open. */
   "helix-select": HelixHeadlessMenuHelixSelectElementEvent;
   /** The menu opened or closed. The event carries `newState` and `oldState`. */
@@ -15160,6 +15244,15 @@ order has its whole sentence. `{order}` is the deprecated
   "unsorted-label"?: (HelixHeadlessTable["unsortedLabel"]) | undefined;
   /** What screen readers hear when the table stops being sorted. */
   unsortedLabel?: (HelixHeadlessTable["unsortedLabel"]) | undefined;
+  /** Draws only the rows in view, with empty space in place of the rest, as
+Data Table's `windowed` does. The table's box then scrolls, at the
+height `--table-block-size` gives it in the styled tier, and the
+headings stick to its top.
+
+Off by default. Windowing costs a scroll listener, a measurement per row
+drawn, and a height on the table, and a table of twenty rows should pay
+none of them. */
+  windowed?: (HelixHeadlessTable["windowed"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "empty-text"?: (HelixHeadlessTable["emptyText"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
@@ -16318,6 +16411,12 @@ and a wheel has exactly one value by construction. Rather than draw
 something that cannot say what it holds, `wheels` renders as a list
 whenever a mode is set. */
   mode?: (HelixHeadlessTimePicker["mode"]) | undefined;
+  /** The words on the button that chooses the current time, drawn with
+`show-now`. */
+  "now-label"?: (HelixHeadlessTimePicker["nowLabel"]) | undefined;
+  /** The words on the button that chooses the current time, drawn with
+`show-now`. */
+  nowLabel?: (HelixHeadlessTimePicker["nowLabel"]) | undefined;
   /** The validation message for a time after `max`. `{max}` is replaced with
 `max`, written in `locale`. */
   "range-overflow-message"?: (HelixHeadlessTimePicker["rangeOverflowMessage"]) | undefined;
@@ -16374,6 +16473,22 @@ wheels take a column of seconds, and `step` counts seconds, the unit
 rows, so give `seconds` a `step` and bounds that keep it a list, or use
 the wheels. */
   seconds?: (HelixHeadlessTimePicker["seconds"]) | undefined;
+  /** Draws a button under the times that chooses the current time, as
+`selectNow()` does.
+
+For a form about something happening now, such as a shift starting or a
+dose taken, where the reader would otherwise scroll to the time on the
+clock. The button is a tab stop after the times, and its words are
+`now-label`. */
+  "show-now"?: (HelixHeadlessTimePicker["showNow"]) | undefined;
+  /** Draws a button under the times that chooses the current time, as
+`selectNow()` does.
+
+For a form about something happening now, such as a shift starting or a
+dose taken, where the reader would otherwise scroll to the time on the
+clock. The button is a tab stop after the times, and its words are
+`now-label`. */
+  showNow?: (HelixHeadlessTimePicker["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`.
 
@@ -18452,6 +18567,23 @@ follows the box as it resizes, which `columns` then does not decide. */
 out as many columns as fit the box at that width, at least one, and
 follows the box as it resizes, which `columns` then does not decide. */
   minColumnWidth?: (HelixHeadlessVirtualList["minColumnWidth"]) | undefined;
+  /** Which way the list runs. `horizontal` lays the items out along a line
+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;
+  /** 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
+wherever the field changes, so give the items in order. A list of one
+column only. */
+  "section-field"?: (HelixHeadlessVirtualList["sectionField"]) | 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
+wherever the field changes, so give the items in order. A list of one
+column only. */
+  sectionField?: (HelixHeadlessVirtualList["sectionField"]) | undefined;
   /** What a press does to the items already chosen: `toggle` adds or takes out
 the item, and `replace` selects it alone and lets the arrow keys carry the
 selection, with Control or Command adding or taking out one item. */
@@ -18494,6 +18626,10 @@ It returns what Lit renders: a template from `html`, a string, or a DOM
 node. The list wraps each result in a `<div>` that carries the row's role
 and place in the set. Where it is unset, the row `<template>` is used. */
   renderItem?: (HelixHeadlessVirtualList["renderItem"]) | undefined;
+  /** Draws each section's header, given its name and its place among the
+sections, for a list given `section-field`. Set it as a property. Where
+it is unset, the header is the name as text. */
+  renderSection?: (HelixHeadlessVirtualList["renderSection"]) | undefined;
 };
 
 export type HelixHeadlessVirtualListVueEvents = {
@@ -18808,7 +18944,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasNodeVueProps,
     HelixHeadlessCanvasNodeVueEvents
   >;
-  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. A paste is your page's: listen for   'paste' on the board, read the text with 'fromJsonCanvas', and add the   cards it holds. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  **'edgeRoute' draws the connections' lines your own way**: a function from where a line leaves and arrives, and the sides it does, to its SVG path, for a route such as one that bends around the cards between. What it returns is the line drawn, the line pressed and focused, and the one an arrowhead sits at the end of. Nothing back draws the board's own.  Add 'minimap' to 'controls' for a picture of the whole board in a corner: each card as a box, and a frame around what is on screen. A press or a drag on it brings that place to the middle of the view. It is for a pointer, and a screen reader skips it: the arrow keys and 'show()' reach every card.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
+  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. - Control or Command with V pastes a JSON Canvas document: the board adds   its cards and connections, a step down and to the right of any card they   would sit on, and selects them. It asks with 'helix-before-paste' first.   A page that renders its cards from its own state cancels it and adds the   detail's document to that state, through 'fromJsonCanvas'. 'paste()' does   the same from a script. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  **'arrange()' moves every card so that none overlaps another**, in layers that follow the arrows, or in a grid on a board with no connections. The cards glide for as long as the board's own transition, and 'undo()' puts them back.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  **'edgeRoute' draws the connections' lines your own way**: a function from where a line leaves and arrives, and the sides it does, to its SVG path, for a route such as one that bends around the cards between. What it returns is the line drawn, the line pressed and focused, and the one an arrowhead sits at the end of. Nothing back draws the board's own.  Add 'minimap' to 'controls' for a picture of the whole board in a corner: each card as a box, and a frame around what is on screen. A press or a drag on it brings that place to the middle of the view. It is for a pointer, and a screen reader skips it: the arrow keys and 'show()' reach every card.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
   "helix-headless-canvas": DefineCustomElement<
     HelixHeadlessCanvas,
     HelixHeadlessCanvasVueProps,
@@ -18856,7 +18992,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCheckboxVueProps,
     HelixHeadlessCheckboxVueEvents
   >;
-  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'mark-lines' to mark lines a reader should look at, such as '2, 4-6': the block draws a band behind each run, placed where the lines are laid out, so it follows a highlighter's markup and lines that wrap. Set 'wrap' to wrap long lines rather than scroll them; a gutter then numbers each line where it starts. Set 'wrappable' for a button in the header that turns 'wrap' on and off, pressed while the lines wrap.  The header holds the name, the 'actions' slot, and the copy button. Slot a control into 'actions', such as a button that sets 'wrap' or one that opens the code in an editor, and the block draws a header for it even with no name. 'copy-icon' and 'copied-icon' replace the copy button's two icons. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Where a removed line is paired with the added line that replaced it, the words each does not share with the other are the 'changed' part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement. 'context-lines' folds each long run of unchanged lines, keeping that many beside each change, behind a button that shows them and hides them again, as a code host draws a diff written with more context than a reader needs.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
+  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'mark-lines' to mark lines a reader should look at, such as '2, 4-6': the block draws a band behind each run, placed where the lines are laid out, so it follows a highlighter's markup and lines that wrap. Set 'wrap' to wrap long lines rather than scroll them; a gutter then numbers each line where it starts. Set 'wrappable' for a button in the header that turns 'wrap' on and off, pressed while the lines wrap.  The header holds the name, the 'actions' slot, and the copy button. Slot a control into 'actions', such as a button that sets 'wrap' or one that opens the code in an editor, and the block draws a header for it even with no name. 'copy-icon' and 'copied-icon' replace the copy button's two icons. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Where a removed line is paired with the added line that replaced it, the words each does not share with the other are the 'changed' part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement. 'context-lines' folds each long run of unchanged lines, keeping that many beside each change, behind a button that shows them and hides them again, as a code host draws a diff written with more context than a reader needs.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable.  **Several blocks are files**, one shown at a time under a row of tabs, as Sandbox shows its source panes. Put Code Blocks in the default slot of a Code Block, and each is a file named on its tab by its 'label' or, without one, its 'language'. 'file' holds the name of the file shown. The tabs are a tab list: the arrow keys move to a tab and show its file, the two swapping on a right-to-left page, and Home and End go to the first and the last. Choosing one sends 'helix-before-change' with the file's name, which you can cancel, and 'change' once 'file' holds it. The files not shown carry 'hidden', and the one shown draws no name of its own, its tab naming it. One block draws no tabs. A server cannot see the blocks inside, so the client draws the tabs once it upgrades. */
   "helix-headless-code-block": DefineCustomElement<
     HelixHeadlessCodeBlock,
     HelixHeadlessCodeBlockVueProps,
@@ -18904,7 +19040,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDataTableVueProps,
     HelixHeadlessDataTableVueEvents
   >;
-  /** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them.  You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both. The field reads ISO, '2026-08-04', and a date written in the order, the digits, and the month names of 'locale', '8/4/2026' or 'Aug 4, 2026' in 'en-US' and '4.8.2026' in 'de-DE', which becomes the value as you leave the field.  The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar. The text field is a 'combobox' with 'aria-haspopup="dialog"', 'aria-expanded', and 'aria-controls', as in the APG date picker combobox, since Down opens the calendar from it.  With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment. A 'range' is two rows with a dash between them, the start and the end, as React Aria's DateRangePicker draws them, and 'multiple' keeps the text.  Text that is not a date gives the form an empty value, as a native date field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the calendar with focus on the chosen day. | | Alt with Down | Opens the calendar, from the text field or a segment. | | Enter | In the text field, takes the typed date and submits the form, as a native field does. | | Escape | Closes the calendar and puts focus back in the field. | | Tab | In the open calendar, moves between its controls. Out of the field, closes it. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the calendar, the keys are 'DatePicker''s: the arrows move by a day or a week, Page Up and Page Down by a month, with Shift by a year, and Home and End to the start and the end of the week. */
+  /** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them.  You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both. The field reads ISO, '2026-08-04', and a date written in the order, the digits, and the month names of 'locale', '8/4/2026' or 'Aug 4, 2026' in 'en-US' and '4.8.2026' in 'de-DE', which becomes the value as you leave the field.  The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar. The text field is a 'combobox' with 'aria-haspopup="dialog"', 'aria-expanded', and 'aria-controls', as in the APG date picker combobox, since Down opens the calendar from it.  With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment. A 'range' is two rows with a dash between them, the start and the end, as React Aria's DateRangePicker draws them, and 'multiple' keeps the text.  Text that is not a date gives the form an empty value, as a native date field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the calendar with focus on the chosen day. | | Alt with Down | Opens the calendar, from the text field or a segment. | | Enter | In the text field, takes the typed date and submits the form, as a native field does. | | Escape | Closes the calendar and puts focus back in the field. | | Tab | In the open calendar, moves between its controls. Out of the field, closes it. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the calendar, the keys are 'DatePicker''s: the arrows move by a day or a week, Page Up and Page Down by a month, with Shift by a year, and Home and End to the start and the end of the week. */
   "helix-headless-date-input": DefineCustomElement<
     HelixHeadlessDateInput,
     HelixHeadlessDateInputVueProps,
@@ -19174,13 +19310,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMegamenuVueProps,
     HelixHeadlessMegamenuVueEvents
   >;
-  /** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command.  The role follows the kind. A row with 'checkable' or 'checked' is 'menuitemcheckbox' with 'aria-checked', and an 'exclusive' row is 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'.  Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself.  Space on a choice row changes it and leaves the menu open, so a reader can set several in a row, as the APG's menu does. Enter and a press change it and close the menu. 'close-on-select="false"' on the row keeps the menu open after any choice of it, and 'close-on-select' on the row closes it after a Space as well.  The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection".  A development build warns when a row has no words to be named by, such as a row holding only an icon with no label.  The check mark and the caret are the fallbacks of the 'check' and 'chevron' slots, so a mark of your own replaces either by being slotted. Neither is read as part of the row's name. */
+  /** One element covers three kinds of row, and what you give it decides which: - Content in the 'submenu' slot makes the row open a submenu page. - 'checked' makes the row a choice. - With neither, the row is a command.  The role follows the kind. A row with 'checkable' or 'checked' is 'menuitemcheckbox' with 'aria-checked', and an 'exclusive' row is 'menuitemradio', for a set where only one can be on. A row that opens a page keeps 'menuitem' and sets 'aria-haspopup'.  Choosing a choice row checks or unchecks it before 'helix-select' is sent, so a listener reads the new 'checked'. An 'exclusive' row turns on and turns off the 'exclusive' rows next to it. Cancel 'helix-before-toggle' to keep a row as it is and set 'checked' yourself.  Space on a choice row changes it and leaves the menu open, so a reader can set several in a row, as the APG's menu does. Enter and a press change it and close the menu. 'close-on-select="false"' on the row keeps the menu open after any choice of it, and 'close-on-select' on the row closes it after a Space as well.  The menu sets whether the row's page is showing as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  'shortcut' shows a row's keyboard shortcut after its label, drawn by 'Kbd' in the platform's glyphs, and gives the row 'aria-keyshortcuts'. It binds nothing: the shortcut is the page's to bind. Other trailing words, such as a count, go in the 'end' slot.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as React Aria's menu item does with its description: a reader hears "Copy", then "Copies the selection".  A development build warns when a row has no words to be named by, such as a row holding only an icon with no label.  The check mark and the caret are the fallbacks of the 'check' and 'chevron' slots, so a mark of your own replaces either by being slotted. Neither is read as part of the row's name.  In a menu with 'filterable', focus stays in the menu's filter field and the row the arrow keys reach is highlighted: the field names it with 'aria-activedescendant', the row carries its role on its host so the field can point at it, and ':state(highlighted)' says which row it is. A row with an 'href' then follows its link without an anchor, as 'Option' does. */
   "helix-headless-menu-item": DefineCustomElement<
     HelixHeadlessMenuItem,
     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. */
+  /** 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. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,
@@ -19432,7 +19568,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTableColumnVueProps,
     HelixHeadlessTableColumnVueEvents
   >;
-  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  'selection-mode="single"' selects one row at a time: ticking a row lets go of the one before, the heading holds no checkbox, and Shift and Control with A take in nothing more. 'selection-behavior="replace"' makes a press on a row, anywhere but its own controls, select it alone, as a file list does, and in a 'grid' table the arrow keys carry the selection with them. Control or Command with a press adds or takes out the row, and with an arrow moves without selecting. Shift with a press takes in the rows from the one last chosen.  **Nesting rows.** A row with 'parent' sits under the row of that key, as a file sits in a folder. The table then draws a column of disclosure buttons, under a heading named by 'expand-column-label': a row with rows under it has a button named by 'expand-row-label' ("Expand {row}") that says with 'aria-expanded' whether it is open, and the rows under a shut row are not drawn. 'expanded' holds the open rows' keys, comma separated, and 'default-expanded' is where it starts. A press asks with 'helix-before-toggle' and tells with 'helix-toggle', both from the row, so you can refuse it or load the rows on the way. A sort orders the rows under each row among themselves, and in a 'grid' table the table is a 'treegrid' whose rows say their depth.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a disclosure cell | Shows or hides the rows under the row, in a table whose rows nest. | | Right on a disclosure cell | Shows the rows under a shut row, and otherwise moves one cell along the row. Left does, on a right-to-left page. | | Left on a disclosure cell | Hides the rows under an open row, and moves to the row this one sits under from any other. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. |  **Loading more.** 'load-more' sends 'helix-load-more' once the end of the table comes within a screen of view, in the box that scrolls it or the page, once for each number of rows: add rows and it can send it again. Set 'loading' while you fetch, and the table asks for nothing until it clears.  When the rows did not load, set 'error-text', such as "The orders did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
+  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it. A table with no name is reported once in a development build.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  'selection-mode="single"' selects one row at a time: ticking a row lets go of the one before, the heading holds no checkbox, and Shift and Control with A take in nothing more. 'selection-behavior="replace"' makes a press on a row, anywhere but its own controls, select it alone, as a file list does, and in a 'grid' table the arrow keys carry the selection with them. Control or Command with a press adds or takes out the row, and with an arrow moves without selecting. Shift with a press takes in the rows from the one last chosen.  **Nesting rows.** A row with 'parent' sits under the row of that key, as a file sits in a folder. The table then draws a column of disclosure buttons, under a heading named by 'expand-column-label': a row with rows under it has a button named by 'expand-row-label' ("Expand {row}") that says with 'aria-expanded' whether it is open, and the rows under a shut row are not drawn. 'expanded' holds the open rows' keys, comma separated, and 'default-expanded' is where it starts. A press asks with 'helix-before-toggle' and tells with 'helix-toggle', both from the row, so you can refuse it or load the rows on the way. A sort orders the rows under each row among themselves, and in a 'grid' table the table is a 'treegrid' whose rows say their depth.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a disclosure cell | Shows or hides the rows under the row, in a table whose rows nest. | | Right on a disclosure cell | Shows the rows under a shut row, and otherwise moves one cell along the row. Left does, on a right-to-left page. | | Left on a disclosure cell | Hides the rows under an open row, and moves to the row this one sits under from any other. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. |  **Long tables.** 'windowed' draws only the rows in view, as Data Table's does, and the box of the table scrolls under headings that stick. The table still says how many rows it has with 'aria-rowcount', and each row its place with 'aria-rowindex'. The keys reach every row, drawn or not, and the row holding focus stays drawn when it scrolls away. Nested rows, sorting, and selecting work as they do in a table that draws every row.  **Loading more.** 'load-more' sends 'helix-load-more' once the end of the table comes within a screen of view, in the box that scrolls it or the page, or in the table's own box when it is 'windowed', once for each number of rows: add rows and it can send it again. Set 'loading' while you fetch, and the table asks for nothing until it clears.  When the rows did not load, set 'error-text', such as "The orders did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
   "helix-headless-table": DefineCustomElement<
     HelixHeadlessTable,
     HelixHeadlessTableVueProps,
@@ -19480,13 +19616,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTextareaVueProps,
     HelixHeadlessTextareaVueEvents
   >;
-  /** The list is a 'TimePicker', which you can also use on its own, for example in a settings pane. This element adds the field, the overlay, and the form association, the same arrangement Date Input has with 'DatePicker' and Color Input has with 'ColorPicker'.  You can type a time or pick one. The list offers times at a step, and the field lets you enter any time, such as '09:07'.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds', because that is what the form submits, what 'min' and 'max' compare against, and what sorts correctly as a string. While idle, the field shows the time in the user's locale format. Once the caret is in the field, it shows the value itself. You can type '14:30', or a time as you write one, such as '2:30 PM', '2.30pm', or '14h30', and the field reads it as you leave it, with AM and PM in the locale's words.  Typing sends 'input' on each keystroke and 'change' when you leave the field. The trigger and ArrowDown open the list, and so does a press into the field; Tab into the field opens nothing. The text field is a 'combobox' with 'aria-haspopup="dialog"', 'aria-expanded', and 'aria-controls', since Down opens the list from it. In the list, the arrow keys, typed digits and PageUp and PageDown move through the times, and Enter, Space or a click chooses one and closes the panel. With 'variant="wheels"' each wheel moves the time as you turn it, the panel stays open, and Enter or Escape closes it.  With 'segmented', the field is a row of segments in place of the text: an hour, a minute, and AM or PM where the clock has them, each set with digits or the arrow keys. Alt+Down opens the list from a segment. A 'range' is two rows with a dash between them, the start and the end, and 'multiple' keeps the text.  Text that is not a time gives the form an empty value, as a native time field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the list on the chosen time. | | Alt with Down | Opens the list, from the text field or a segment. | | Enter | In the text field, takes the typed time and submits the form, as a native field does. In the list, chooses the highlighted time. | | Escape | Closes the list and puts focus back in the field. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: two hours, or fifteen minutes or seconds. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the list, the keys are 'TimePicker''s. */
+  /** The list is a 'TimePicker', which you can also use on its own, for example in a settings pane. This element adds the field, the overlay, and the form association, the same arrangement Date Input has with 'DatePicker' and Color Input has with 'ColorPicker'.  You can type a time or pick one. The list offers times at a step, and the field lets you enter any time, such as '09:07'.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds', because that is what the form submits, what 'min' and 'max' compare against, and what sorts correctly as a string. While idle, the field shows the time in the user's locale format. Once the caret is in the field, it shows the value itself. You can type '14:30', or a time as you write one, such as '2:30 PM', '2.30pm', or '14h30', and the field reads it as you leave it, with AM and PM in the locale's words.  Typing sends 'input' on each keystroke and 'change' when you leave the field. The trigger and ArrowDown open the list, and so does a press into the field; Tab into the field opens nothing. The text field is a 'combobox' with 'aria-haspopup="dialog"', 'aria-expanded', and 'aria-controls', since Down opens the list from it. In the list, the arrow keys, typed digits and PageUp and PageDown move through the times, and Enter, Space or a click chooses one and closes the panel. With 'variant="wheels"' each wheel moves the time as you turn it, the panel stays open, and Enter or Escape closes it.  With 'segmented', the field is a row of segments in place of the text: an hour, a minute, and AM or PM where the clock has them, each set with digits or the arrow keys. Alt+Down opens the list from a segment. A 'range' is two rows with a dash between them, the start and the end, and 'multiple' keeps the text.  Text that is not a time gives the form an empty value, as a native time field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the list on the chosen time. | | Alt with Down | Opens the list, from the text field or a segment. | | Enter | In the text field, takes the typed time and submits the form, as a native field does. In the list, chooses the highlighted time. | | Escape | Closes the list and puts focus back in the field. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: two hours, or fifteen minutes or seconds. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. | | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the list, the keys are 'TimePicker''s. */
   "helix-headless-time-input": DefineCustomElement<
     HelixHeadlessTimeInput,
     HelixHeadlessTimeInputVueProps,
     HelixHeadlessTimeInputVueEvents
   >;
-  /** Shows the times at each 'step' as a 'Listbox', which provides the keyboard behavior, typeahead, scrolling into view, and announcements for a set of options. 'variant="wheels"' shows a column each for the hour, the minute, and the meridiem, and one for the second with 'seconds'. Left and Right move between the wheels, and Tab does too.  'hour-cycle' writes every time on a twelve or a twenty-four hour clock whatever the locale, and 'seconds' holds times to the second.  The step keeps the list usable. At the default of 15 minutes a day is 96 rows, which people can scroll or type into. At 1 minute it is 1,440. Use the list for the times your product offers, and Time Input for any time, the same way Date Input separates typing a date from picking one on the calendar.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds'. A form submits that shape, 'min' and 'max' compare against it, and it sorts as a string. Each row's text follows the person's own conventions, from 'Intl'.  The chosen row is marked in the served markup. The listbox gets the answer as '.value', and Lit SSR serializes no property binding, so without more the 96 served rows would carry no mark until the listbox upgrades and runs 'place'. Each option also gets 'selected', an attribute binding that does serialize, and 'place' then writes the same answer from the same value. This is the same 'selected' you write on 'Option' elsewhere in Helix, and Date Picker marks its choice in markup for the same reason. The list and the wheels both do this, because each wheel is also a listbox.  **Keyboard.** The list is one tab stop, and each wheel is one.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous time, or in a wheel to the next or the previous hour, minute, second, or half of the day. | | Home, End | Moves to the first or the last time, or the first or the last in a wheel. | | Page Down, Page Up | Moves by as many times as the list shows at once. | | Digits | Moves to the next time that starts with what you typed, such as '9' for 9:00. | | Enter, Space | Chooses the highlighted time. Moving chooses too, except under 'manual' or with a 'mode'. With a 'mode', Space adds or removes the time. | | Right, Left | In the wheels, moves to the next or the previous wheel, mirrored right to left. | | Tab | Moves to the next wheel, then out of the picker. |  **ARIA.** The list is a 'listbox' named by 'label', a slotted label, the host's 'aria-label' or its 'aria-labelledby'. A development build warns where all four are empty. The list is described by the hint, or by the message in 'feedback' in its place, and carries 'aria-multiselectable' with a 'mode'. It carries 'aria-invalid' while 'feedback' says what is wrong, while it holds a time outside 'min' and 'max' or one the picker does not offer, and, for a 'required' picker with no time, once the reader has chosen one or a form has refused the picker. The wheels are a 'group' with that name, holding one 'listbox' per wheel, named "Hour", "Minute", "Second" and "AM/PM" in the page's language, and each described the same way. */
+  /** Shows the times at each 'step' as a 'Listbox', which provides the keyboard behavior, typeahead, scrolling into view, and announcements for a set of options. 'variant="wheels"' shows a column each for the hour, the minute, and the meridiem, and one for the second with 'seconds'. Left and Right move between the wheels, and Tab does too.  'hour-cycle' writes every time on a twelve or a twenty-four hour clock whatever the locale, and 'seconds' holds times to the second. 'show-now' draws a button that chooses the current time, on the step and inside the bounds.  The step keeps the list usable. At the default of 15 minutes a day is 96 rows, which people can scroll or type into. At 1 minute it is 1,440. Use the list for the times your product offers, and Time Input for any time, the same way Date Input separates typing a date from picking one on the calendar.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds'. A form submits that shape, 'min' and 'max' compare against it, and it sorts as a string. Each row's text follows the person's own conventions, from 'Intl'.  The chosen row is marked in the served markup. The listbox gets the answer as '.value', and Lit SSR serializes no property binding, so without more the 96 served rows would carry no mark until the listbox upgrades and runs 'place'. Each option also gets 'selected', an attribute binding that does serialize, and 'place' then writes the same answer from the same value. This is the same 'selected' you write on 'Option' elsewhere in Helix, and Date Picker marks its choice in markup for the same reason. The list and the wheels both do this, because each wheel is also a listbox.  **Keyboard.** The list is one tab stop, and each wheel is one.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous time, or in a wheel to the next or the previous hour, minute, second, or half of the day. | | Home, End | Moves to the first or the last time, or the first or the last in a wheel. | | Page Down, Page Up | Moves by as many times as the list shows at once. | | Digits | Moves to the next time that starts with what you typed, such as '9' for 9:00. | | Enter, Space | Chooses the highlighted time. Moving chooses too, except under 'manual' or with a 'mode'. With a 'mode', Space adds or removes the time. | | Right, Left | In the wheels, moves to the next or the previous wheel, mirrored right to left. | | Tab | Moves to the next wheel, then out of the picker. |  **ARIA.** The list is a 'listbox' named by 'label', a slotted label, the host's 'aria-label' or its 'aria-labelledby'. A development build warns where all four are empty. The list is described by the hint, or by the message in 'feedback' in its place, and carries 'aria-multiselectable' with a 'mode'. It carries 'aria-invalid' while 'feedback' says what is wrong, while it holds a time outside 'min' and 'max' or one the picker does not offer, and, for a 'required' picker with no time, once the reader has chosen one or a form has refused the picker. The wheels are a 'group' with that name, holding one 'listbox' per wheel, named "Hour", "Minute", "Second" and "AM/PM" in the page's language, and each described the same way. */
   "helix-headless-time-picker": DefineCustomElement<
     HelixHeadlessTimePicker,
     HelixHeadlessTimePickerVueProps,
@@ -19600,7 +19736,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.  **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. | | 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.  **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'. | | 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.  **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. */
   "helix-headless-virtual-list": DefineCustomElement<
     HelixHeadlessVirtualList,
     HelixHeadlessVirtualListVueProps,