@fusion.dev/helix-headless 0.145.0 → 0.146.0

package/types/vue.d.ts

@@ -134,7 +134,6 @@ import type {
   HelixHeadlessStep,
   HelixHeadlessSwitch,
   HelixHeadlessTableCell,
-  at,
   edgeOf,
   HelixHeadlessTableColumn,
   HelixHeadlessTable,
@@ -171,6 +170,7 @@ import type {
   ToggleEvent,
   HelixDismissEvent,
   HelixScrolledEvent,
+  HelixPressEvent,
   HelixBeforeMoveEvent,
   HelixBeforeReconnectEvent,
   HelixBeforeRelabelEvent,
@@ -197,10 +197,10 @@ import type {
   HelixSampleStartEvent,
   HelixCreateEvent,
   HelixFilterEvent,
+  HelixLoadMoreEvent,
   HelixCopyErrorEvent,
   HelixExpandEvent,
   HelixFilteredEvent,
-  HelixLoadMoreEvent,
   HelixNavigateEvent,
   HelixReorderEvent,
   HelixReorderedEvent,
@@ -231,11 +231,13 @@ import type {
   HelixToggleEvent,
   HelixReadEvent,
   HelixCompleteEvent,
+  HelixPreviewEvent,
   HelixBeforeCollapseEvent,
   HelixBeforeResizeEvent,
   HelixCollapseEvent,
   HelixResizedEvent,
   HelixTourAskEvent,
+  HelixTourStatusEvent,
   HelixLoadEvent,
   HelixEndEvent,
   HelixNextEvent,
@@ -589,6 +591,22 @@ percentages and its totals, such as `de` for `1.240` and `32 %`.
 Absent uses the runtime's own. The table's cells are shown as the table
 writes them, whatever this says. */
   locale?: (HelixHeadlessAreaChart["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessAreaChart["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessAreaChart["positionLabel"]) | undefined;
 };
 
 export type HelixHeadlessAreaChartVueEvents = {};
@@ -613,15 +631,17 @@ everyone, assigning a matching property rather than an attribute.
 takes no default**: `max = 0` would stamp `max="0"` onto every host that
 never asked for a limit, including on the server. */
   max?: (HelixHeadlessAvatarGroup["max"]) | undefined;
-  /** What a screen reader is told the count is, with `{count}` for the number.
+  /** What a screen reader is told the count is, with `{count}` for the number
+and `{names}` for the people it stands for, by each avatar's `name`.
 
 The count shows "+3", which reads as "plus three" and says nothing about
-what was counted. */
+what was counted, nor who. */
   "overflow-label"?: (HelixHeadlessAvatarGroup["overflowLabel"]) | undefined;
-  /** What a screen reader is told the count is, with `{count}` for the number.
+  /** What a screen reader is told the count is, with `{count}` for the number
+and `{names}` for the people it stands for, by each avatar's `name`.
 
 The count shows "+3", which reads as "plus three" and says nothing about
-what was counted. */
+what was counted, nor who. */
   overflowLabel?: (HelixHeadlessAvatarGroup["overflowLabel"]) | undefined;
 };
 
@@ -683,7 +703,9 @@ export type HelixHeadlessAvatarVueEvents = {
 export type HelixHeadlessBadgeVueProps = {
   /** The badge's name, read by screen readers.
 
-Required for a dot, which has no text to read. */
+Required for a dot, which has no text to read. `{count}` is replaced with
+what the badge shows, so `label="{count} unread"` reads "8 unread" and
+stays current as `value` changes, with no label of yours to keep in step. */
   label?: (HelixHeadlessBadge["label"]) | undefined;
   /** The largest number the badge shows.
 
@@ -798,6 +820,15 @@ scales at once is a rule that means nothing. The tooltip is unaffected: it
 has always shown every column's own number, which is the reader's way out
 of any scale question the picture raises. */
   secondary?: (HelixHeadlessBarChart["secondary"]) | undefined;
+  /** Stacks a category's columns into one, each series standing on the ones
+before it, so the column's height is the category's total.
+
+Absent stands them side by side, as it always did. A negative reading
+hangs below zero on the negatives before it, so neither direction hides
+the other. The scale fits the stacks. A series
+in `lines` is still a line, measured on its own reading; columns on the
+second scale stack among themselves. */
+  stacked?: (HelixHeadlessBarChart["stacked"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -818,6 +849,22 @@ percentages and its totals, such as `de` for `1.240` and `32 %`.
 Absent uses the runtime's own. The table's cells are shown as the table
 writes them, whatever this says. */
   locale?: (HelixHeadlessBarChart["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessBarChart["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessBarChart["positionLabel"]) | undefined;
 };
 
 export type HelixHeadlessBarChartVueEvents = {};
@@ -861,9 +908,23 @@ The consumer's decision. */
 export type HelixHeadlessBreadcrumbVueEvents = {};
 
 export type HelixHeadlessBreadcrumbsVueProps = {
+  /** The name of the button that shows a folded trail's hidden crumbs. `{count}`
+is replaced by how many it shows. Translate it with the page. */
+  "expand-label"?: (HelixHeadlessBreadcrumbs["expandLabel"]) | undefined;
+  /** The name of the button that shows a folded trail's hidden crumbs. `{count}`
+is replaced by how many it shows. Translate it with the page. */
+  expandLabel?: (HelixHeadlessBreadcrumbs["expandLabel"]) | undefined;
   /** The landmark's name, read by screen readers. An `aria-label` on the host
 wins over it. */
   label?: (HelixHeadlessBreadcrumbs["label"]) | undefined;
+  /** The most crumbs a trail drawn from `items` shows before it folds its middle
+into one, counting the first and the last. Unset, it never folds. At least
+2, so the first crumb and the current page always show. */
+  "max-items"?: (HelixHeadlessBreadcrumbs["maxItems"] | `${number}`) | undefined;
+  /** The most crumbs a trail drawn from `items` shows before it folds its middle
+into one, counting the first and the last. Unset, it never folds. At least
+2, so the first crumb and the current page always show. */
+  maxItems?: (HelixHeadlessBreadcrumbs["maxItems"]) | undefined;
   /** The trail as data, drawn as crumbs before any you slot. The last item is the
 current page.
 
@@ -902,6 +963,15 @@ column. */
 
 export type HelixHeadlessButtonGroupVueEvents = {};
 
+/** `HelixHeadlessButton` component event */
+export type HelixHeadlessButtonElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessButton,
+  E
+>;
+/** `helix-press` event type */
+export type HelixHeadlessButtonHelixPressElementEvent =
+  HelixHeadlessButtonElementEvent<HelixPressEvent>;
+
 export type HelixHeadlessButtonVueProps = {
   /** What to send when the button is activated, and what to send it to.
 
@@ -1089,7 +1159,10 @@ invoker without an id in the same tree needs. */
   commandForElement?: (HelixHeadlessButton["commandForElement"]) | undefined;
 };
 
-export type HelixHeadlessButtonVueEvents = {};
+export type HelixHeadlessButtonVueEvents = {
+  /** Fired when a press acts, with `detail.pointerType` saying what pressed the button. */
+  "helix-press": HelixHeadlessButtonHelixPressElementEvent;
+};
 
 /** `HelixHeadlessCallout` component event */
 export type HelixHeadlessCalloutElementEvent<E = Event> = TypedEvent<
@@ -1229,9 +1302,10 @@ format does too, and moves them with it. Its `label` is drawn above it. */
   /** The card's name as text. A group shows it, and another card's connections
 read it out.
 
-A group needs one because it has no text of its own; a card that has text
-is named by it, and one holding a picture or a figure is named by nothing
-short enough to read out in another card's connections. */
+A group needs one because it has no text of its own. A card is named by
+it where it is set, and by its content where it is not, so a screen reader
+moving between cards hears each one's name. Set it on a card holding a
+picture or a figure, which has no words short enough to name it. */
   label?: (HelixHeadlessCanvasNode["label"]) | undefined;
   /** The name that connections and events use for this card, unique on its
 board.
@@ -1681,6 +1755,12 @@ export type HelixHeadlessCanvasVueEvents = {
 };
 
 export type HelixHeadlessCardVueProps = {
+  /** The card's accessible name, which makes it a named group.
+
+The name `Stat.Group` and the other named regions take, set through
+`ElementInternals`. `aria-label` and `aria-labelledby` written on the card
+name it too, and win over this, as an author's attribute does. */
+  label?: (HelixHeadlessCard["label"]) | undefined;
   /** Places the media after the content. By default it comes before.
 
 **A figure that concludes a card is the same region as one that opens it**,
@@ -1962,6 +2042,14 @@ it to leave the role as `group`. */
   /** The word screen readers announce in place of a slide's role, set as
 `aria-roledescription`. Translate it with the rest of your text. */
   slideRoleLabel?: (HelixHeadlessCarousel["slideRoleLabel"]) | undefined;
+  /** How many slides Previous, Next, the indicators, rotation, and a drag move
+at a time. Unset moves one. The track stops at every `slides-per-move`th
+position from the first, and at the last. */
+  "slides-per-move"?: (HelixHeadlessCarousel["slidesPerMove"] | `${number}`) | undefined;
+  /** How many slides Previous, Next, the indicators, rotation, and a drag move
+at a time. Unset moves one. The track stops at every `slides-per-move`th
+position from the first, and at the last. */
+  slidesPerMove?: (HelixHeadlessCarousel["slidesPerMove"]) | undefined;
   /** The name of the rotation control while rotation is stopped. */
   "start-label"?: (HelixHeadlessCarousel["startLabel"]) | undefined;
   /** The name of the rotation control while rotation is stopped. */
@@ -2215,6 +2303,23 @@ one of paragraphs, and a reader who has scrolled up by half a message has
 not left. The same distance from the top is what counts as reaching the
 history. */
   threshold?: (HelixHeadlessChat["threshold"]) | undefined;
+  /** The name a screen reader gives a turn with neither an author it can say
+nor a time: a turn by `them` with no `author-label`, say. */
+  "turn-label"?: (HelixHeadlessChat["turnLabel"]) | undefined;
+  /** The name a screen reader gives a turn with neither an author it can say
+nor a time: a turn by `them` with no `author-label`, say. */
+  turnLabel?: (HelixHeadlessChat["turnLabel"]) | undefined;
+  /** Who on the other side is typing, by name, or empty while nobody is.
+
+Set it from your connection, and clear it when they stop or send. The
+status band says it with `typing-label`. */
+  typing?: (HelixHeadlessChat["typing"]) | undefined;
+  /** What the status band says while someone is typing. `{author}` is the
+name in `typing`. */
+  "typing-label"?: (HelixHeadlessChat["typingLabel"]) | undefined;
+  /** What the status band says while someone is typing. `{author}` is the
+name in `typing`. */
+  typingLabel?: (HelixHeadlessChat["typingLabel"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "empty-text"?: (HelixHeadlessChat["emptyText"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
@@ -2376,9 +2481,13 @@ Not reflected: the attribute is the consumer's input and stays as they
 wrote it, and `:state(checked)` carries the resolved state for
 stylesheets. */
   checked?: (HelixHeadlessCheckbox["checked"]) | undefined;
-  /** Whether the control starts checked. A form reset returns it to this state. */
+  /** Whether the control starts checked. A form reset returns it to this state,
+and to the `checked` attribute where this one is not written, as a native
+checkbox resets to the `checked` it declares. */
   "default-checked"?: (HelixHeadlessCheckbox["defaultChecked"]) | undefined;
-  /** Whether the control starts checked. A form reset returns it to this state. */
+  /** Whether the control starts checked. A form reset returns it to this state,
+and to the `checked` attribute where this one is not written, as a native
+checkbox resets to the `checked` it declares. */
   defaultChecked?: (HelixHeadlessCheckbox["defaultChecked"]) | undefined;
   /** Whether a reader can see and focus the control and cannot change it. A
 read-only control still submits its value.
@@ -2470,6 +2579,10 @@ export type HelixHeadlessCheckboxVueEvents = {
 };
 
 export type HelixHeadlessCodeBlockVueProps = {
+  /** The expand button's words while the block shows every line. */
+  "collapse-label"?: (HelixHeadlessCodeBlock["collapseLabel"]) | undefined;
+  /** The expand button's words while the block shows every line. */
+  collapseLabel?: (HelixHeadlessCodeBlock["collapseLabel"]) | undefined;
   /** The copy button's name and tooltip text after a copy. */
   "copied-label"?: (HelixHeadlessCodeBlock["copiedLabel"]) | undefined;
   /** The copy button's name and tooltip text after a copy. */
@@ -2491,6 +2604,17 @@ In a diff, that is each file's own name. */
 Reflected, because the stylesheet paints a diff differently from code, and
 `false` reflects as no attribute at all. */
   diff?: (HelixHeadlessCodeBlock["diff"]) | undefined;
+  /** Whether a block whose height is capped takes a button that shows every
+line, and fewer again.
+
+The cap is the page's, `--code-block-max-block-size` on the styled tier;
+the button is drawn only while the cap hides something, measured as the
+block lays out. Not for a diff, whose files each scroll on their own. */
+  expandable?: (HelixHeadlessCodeBlock["expandable"]) | undefined;
+  /** The expand button's words while the cap hides lines. */
+  "expand-label"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
+  /** The expand button's words while the cap hides lines. */
+  expandLabel?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
   /** The block's name, usually a file name or a language.
 
 In a diff, each file is named from the patch, and this names a patch that
@@ -2562,7 +2686,9 @@ the plain text.
 Called with the code as written and returning HTML, such as the output of
 Shiki's `codeToHtml` or Prism's `highlight`. **The markup is drawn as
 given**, so it has to escape the code it was handed, which those
-highlighters do. Bind the language in the function you pass. The code
+highlighters do. A `<pre>` and `<code>` around the whole of it, which
+Shiki writes, are taken off, so the lines sit level with the gutter's
+numbers and the block keeps one tab stop. Bind the language in the function you pass. The code
 stays in the slot, so the copy button copies it as written and a reader
 without the script still has it. Not called on a server, which has no code
 to read, nor for a diff. */
@@ -2704,9 +2830,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?: (HelixHeadlessColorInput["open"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessColorInput["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessColorInput["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -2895,6 +3025,13 @@ the color. */
   "eyedropper-label"?: (HelixHeadlessColorPicker["eyedropperLabel"]) | undefined;
   /** What the eyedropper is called. */
   eyedropperLabel?: (HelixHeadlessColorPicker["eyedropperLabel"]) | undefined;
+  /** A message under the picker, such as what is wrong with the color.
+
+While set, the picker is invalid and does not submit, as a field's
+`feedback` is, and the square and the value text are described by it.
+Color Input shows its own message here, so a reader in the open panel
+still sees it. */
+  feedback?: (HelixHeadlessColorPicker["feedback"]) | undefined;
   /** The syntax the value is written in: `hex`, `rgb`, or `hsl`.
 
 Only what is written. Everything is read whatever this says, so a picker on
@@ -3073,9 +3210,13 @@ speaks it. Absent is the control's own sentence, in English. */
 named for the validity flag it reports, so a form in another language
 speaks it. Absent is the control's own sentence, in English. */
   valueMissingMessage?: (HelixHeadlessColorPicker["valueMissingMessage"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessColorPicker["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessColorPicker["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -3147,6 +3288,9 @@ export type HelixHeadlessComboboxHelixCreateElementEvent =
 /** `helix-filter` event type */
 export type HelixHeadlessComboboxHelixFilterElementEvent =
   HelixHeadlessComboboxElementEvent<HelixFilterEvent>;
+/** `helix-load-more` event type */
+export type HelixHeadlessComboboxHelixLoadMoreElementEvent =
+  HelixHeadlessComboboxElementEvent<HelixLoadMoreEvent>;
 /** `toggle` event type */
 export type HelixHeadlessComboboxToggleElementEvent =
   HelixHeadlessComboboxElementEvent<ToggleEvent>;
@@ -3193,10 +3337,34 @@ on it adds what was typed. */
   "empty-text"?: (HelixHeadlessCombobox["emptyText"]) | undefined;
   /** Text shown when the filter hides every option. */
   emptyText?: (HelixHeadlessCombobox["emptyText"]) | undefined;
+  /** How long typing rests before the list is narrowed and `helix-filter` is
+sent, in milliseconds.
+
+For options filtered on a server, where `helix-filter` starts a request: a
+delay sends one request for a word instead of one per letter. The arrow
+keys, Enter and Escape narrow at once on what was typed. `0` narrows on
+every keystroke. See Listbox's `filter-delay`. */
+  "filter-delay"?: (HelixHeadlessCombobox["filterDelay"] | `${number}`) | undefined;
+  /** How long typing rests before the list is narrowed and `helix-filter` is
+sent, in milliseconds.
+
+For options filtered on a server, where `helix-filter` starts a request: a
+delay sends one request for a word instead of one per letter. The arrow
+keys, Enter and Escape narrow at once on what was typed. `0` narrows on
+every keystroke. See Listbox's `filter-delay`. */
+  filterDelay?: (HelixHeadlessCombobox["filterDelay"]) | undefined;
   /** The list's name, read by screen readers. The list has no visible name. */
   "list-label"?: (HelixHeadlessCombobox["listLabel"]) | undefined;
   /** The list's name, read by screen readers. The list has no visible name. */
   listLabel?: (HelixHeadlessCombobox["listLabel"]) | undefined;
+  /** What the list says when its options could not be loaded, such as after a
+request to a server fails. Empty is no error. Passed to the list, which
+shows it under any options there are and tells screen readers. */
+  "load-error"?: (HelixHeadlessCombobox["loadError"]) | undefined;
+  /** What the list says when its options could not be loaded, such as after a
+request to a server fails. Empty is no error. Passed to the list, which
+shows it under any options there are and tells screen readers. */
+  loadError?: (HelixHeadlessCombobox["loadError"]) | undefined;
   /** Whether the options are still loading.
 
 Passed straight to the list, which is where the rows are and so where the
@@ -3224,6 +3392,22 @@ property the role does not support and no spec here ever asserted: the one
 that covers this says in as many words that telling the list is what this
 element is responsible for. */
   multiple?: (HelixHeadlessCombobox["multiple"]) | undefined;
+  /** The text shown when typing hides every one of the options, where there are
+some. Absent, `empty-text` shows. See Listbox's `no-results-text`. */
+  "no-results-text"?: (HelixHeadlessCombobox["noResultsText"]) | undefined;
+  /** The text shown when typing hides every one of the options, where there are
+some. Absent, `empty-text` shows. See Listbox's `no-results-text`. */
+  noResultsText?: (HelixHeadlessCombobox["noResultsText"]) | undefined;
+  /** What opens the list: `input`, typing or pressing Down; `focus`, also
+arriving in the field, by Tab or a press; or `manual`, only Down, Alt+Down
+or a press on the caret, so typing narrows a list the reader has asked
+for. React Aria's `menuTrigger`. */
+  "open-on"?: (HelixHeadlessCombobox["openOn"]) | undefined;
+  /** What opens the list: `input`, typing or pressing Down; `focus`, also
+arriving in the field, by Tab or a press; or `manual`, only Down, Alt+Down
+or a press on the caret, so typing narrows a list the reader has asked
+for. React Aria's `menuTrigger`. */
+  openOn?: (HelixHeadlessCombobox["openOn"]) | undefined;
   /** Text shown while nothing has been chosen. */
   placeholder?: (HelixHeadlessCombobox["placeholder"]) | undefined;
   /** Whether the choice is locked. A read-only combobox still submits its value.
@@ -3302,9 +3486,13 @@ as `+3`, does not say what it does. */
   "max-tags"?: (HelixHeadlessCombobox["maxTags"] | `${number}`) | undefined;
   /** How many tokens to show before the rest become a count. */
   maxTags?: (HelixHeadlessCombobox["maxTags"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessCombobox["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessCombobox["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -3391,6 +3579,8 @@ export type HelixHeadlessComboboxVueEvents = {
   "helix-create": HelixHeadlessComboboxHelixCreateElementEvent;
   /** Fired as the user types, with the text the list is filtered by. Cancelable: cancel it to leave the list unfiltered and do the filtering yourself. */
   "helix-filter": HelixHeadlessComboboxHelixFilterElementEvent;
+  /** Fired once the list is scrolled within a screen of its end, once for each number of options, and not while `loading` is set. Add the next page and set `loading` while you fetch it. */
+  "helix-load-more": HelixHeadlessComboboxHelixLoadMoreElementEvent;
   /** Fired after the value changes. */
   input: HelixHeadlessComboboxElementEvent;
   /** Fired when the panel opens or closes, with `newState` and `oldState`. */
@@ -3411,6 +3601,9 @@ export type HelixHeadlessCommandHelixBeforeOpenElementEvent =
 /** `helix-filter` event type */
 export type HelixHeadlessCommandHelixFilterElementEvent =
   HelixHeadlessCommandElementEvent<HelixFilterEvent>;
+/** `helix-load-more` event type */
+export type HelixHeadlessCommandHelixLoadMoreElementEvent =
+  HelixHeadlessCommandElementEvent<HelixLoadMoreEvent>;
 /** `helix-select` event type */
 export type HelixHeadlessCommandHelixSelectElementEvent =
   HelixHeadlessCommandElementEvent<HelixSelectEvent>;
@@ -3439,6 +3632,14 @@ with: one key, said once. */
   hotkey?: (HelixHeadlessCommand["hotkey"]) | undefined;
   /** Accessible name for the overlay, which has no visible heading. */
   label?: (HelixHeadlessCommand["label"]) | undefined;
+  /** What the list says when its commands could not be loaded, such as after a
+request to a server fails. Empty is no error. Passed to the list, which
+shows it under any commands there are and tells screen readers. */
+  "load-error"?: (HelixHeadlessCommand["loadError"]) | undefined;
+  /** What the list says when its commands could not be loaded, such as after a
+request to a server fails. Empty is no error. Passed to the list, which
+shows it under any commands there are and tells screen readers. */
+  loadError?: (HelixHeadlessCommand["loadError"]) | undefined;
   /** Whether the commands are still loading, for a palette that asks a server
 for them as the user types.
 
@@ -3448,6 +3649,12 @@ Passed to the list, which shows `loading-text` and tells screen readers. */
   "loading-text"?: (HelixHeadlessCommand["loadingText"]) | undefined;
   /** The text shown while the commands load. */
   loadingText?: (HelixHeadlessCommand["loadingText"]) | undefined;
+  /** The text shown when typing hides every one of the commands, where there are
+some. Absent, `empty-text` shows. See Listbox's `no-results-text`. */
+  "no-results-text"?: (HelixHeadlessCommand["noResultsText"]) | undefined;
+  /** The text shown when typing hides every one of the commands, where there are
+some. Absent, `empty-text` shows. See Listbox's `no-results-text`. */
+  noResultsText?: (HelixHeadlessCommand["noResultsText"]) | undefined;
   /** The text shown in the filter field before anything is typed. */
   placeholder?: (HelixHeadlessCommand["placeholder"]) | undefined;
   /** What a screen reader hears when typing leaves one command. `{count}` is
@@ -3490,6 +3697,8 @@ export type HelixHeadlessCommandVueEvents = {
   "helix-before-open": HelixHeadlessCommandHelixBeforeOpenElementEvent;
   /** Fired as the user types, with the text the list is filtered by. Cancelable: cancel it to leave the list unfiltered and filter the commands yourself, for example on a server while `loading` is set. */
   "helix-filter": HelixHeadlessCommandHelixFilterElementEvent;
+  /** Fired once the list is scrolled within a screen of its end, once for each number of commands, and not while `loading` is set. Add the next page and set `loading` while you fetch it. */
+  "helix-load-more": HelixHeadlessCommandHelixLoadMoreElementEvent;
   /** A command was chosen, with its `href` where the option is a link. Cancelable: cancel it to keep the palette open, and to keep the browser from following the link. */
   "helix-select": HelixHeadlessCommandHelixSelectElementEvent;
   /** The palette opened or closed. The event carries `newState` and `oldState`. */
@@ -3507,6 +3716,9 @@ export type HelixHeadlessCopyButtonHelixCopyElementEvent =
 /** `helix-copy-error` event type */
 export type HelixHeadlessCopyButtonHelixCopyErrorElementEvent =
   HelixHeadlessCopyButtonElementEvent<HelixCopyErrorEvent>;
+/** `helix-press` event type */
+export type HelixHeadlessCopyButtonHelixPressElementEvent =
+  HelixHeadlessCopyButtonElementEvent<HelixPressEvent>;
 
 export type HelixHeadlessCopyButtonVueProps = {
   /** The button's name and tooltip text after a copy.
@@ -3525,6 +3737,12 @@ clipboard. */
   /** The button's name and tooltip text after a press that put nothing on the
 clipboard. */
   errorLabel?: (HelixHeadlessCopyButton["errorLabel"]) | undefined;
+  /** How long the confirmation or the failure stands, in milliseconds, before
+the button goes back to `label`. */
+  "feedback-duration"?: (HelixHeadlessCopyButton["feedbackDuration"] | `${number}`) | undefined;
+  /** How long the confirmation or the failure stands, in milliseconds, before
+the button goes back to `label`. */
+  feedbackDuration?: (HelixHeadlessCopyButton["feedbackDuration"]) | undefined;
   /** The element to copy from, by its id: `key` for its text, `key[value]` for
 an attribute, and `key.value` for a property. Read at the press, and used
 in place of `value`. An element that is not there copies nothing, which is
@@ -3611,6 +3829,8 @@ export type HelixHeadlessCopyButtonVueEvents = {
   "helix-copy": HelixHeadlessCopyButtonHelixCopyElementEvent;
   /** Fired when a press put nothing on the clipboard: the browser did not allow the write, or there was nothing to copy. */
   "helix-copy-error": HelixHeadlessCopyButtonHelixCopyErrorElementEvent;
+  /** Fired when a press acts, with `detail.pointerType` saying what pressed the button. */
+  "helix-press": HelixHeadlessCopyButtonHelixPressElementEvent;
 };
 
 /** `HelixHeadlessDataTable` component event */
@@ -4284,9 +4504,13 @@ as `+3`, does not say what it does. */
   "max-tags"?: (HelixHeadlessDateInput["maxTags"] | `${number}`) | undefined;
   /** How many tokens to show before the rest become a count. */
   maxTags?: (HelixHeadlessDateInput["maxTags"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessDateInput["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessDateInput["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -4597,9 +4821,13 @@ filled in as the year on show. */
   /** The name of the heading where it shows a page of years, with `{heading}`
 filled in as the year on show. */
   yearViewLabel?: (HelixHeadlessDatePicker["yearViewLabel"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessDatePicker["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessDatePicker["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -4872,6 +5100,22 @@ word is not. Reflected, it wrote a value onto every host a script had set
 it on for nothing to read. `sweep` beside it is the converse and reflects,
 because the styled sheet selects on it. */
   hole?: (HelixHeadlessDonutChart["hole"]) | undefined;
+  /** Writes each slice's share on the slice, the `slice-label` part, so a
+reader sees the parts without a legend or a pointer: "29%" in the middle
+of the band.
+
+Absent writes none. A slice under a twentieth of the whole takes no
+label, there being no room on it for one. A screen reader hears every
+share in the summary, and the labels are hidden from it. */
+  "slice-labels"?: (HelixHeadlessDonutChart["sliceLabels"]) | undefined;
+  /** Writes each slice's share on the slice, the `slice-label` part, so a
+reader sees the parts without a legend or a pointer: "29%" in the middle
+of the band.
+
+Absent writes none. A slice under a twentieth of the whole takes no
+label, there being no room on it for one. A screen reader hears every
+share in the summary, and the labels are hidden from it. */
+  sliceLabels?: (HelixHeadlessDonutChart["sliceLabels"]) | undefined;
   /** How much of the circle the whole occupies.
 
 Absent is the full turn. `half` is a semi-donut: the same shares spread
@@ -4914,6 +5158,22 @@ percentages and its totals, such as `de` for `1.240` and `32 %`.
 Absent uses the runtime's own. The table's cells are shown as the table
 writes them, whatever this says. */
   locale?: (HelixHeadlessDonutChart["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessDonutChart["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessDonutChart["positionLabel"]) | undefined;
 };
 
 export type HelixHeadlessDonutChartVueEvents = {};
@@ -4956,6 +5216,17 @@ the property this component exists to keep.
 Absent by default, which is the platform's `auto` and this library's rule
 that a resting value is an attribute's absence. */
   closedBy?: (HelixHeadlessDrawer["closedBy"]) | undefined;
+  /** Draws a control that closes the drawer, in the corner where the title is.
+
+Pressing it is `close()`, so it sends `helix-before-close` like every other
+way out. */
+  dismissible?: (HelixHeadlessDrawer["dismissible"]) | undefined;
+  /** The close control's accessible name. Translate it with the rest of your
+interface. */
+  "dismiss-label"?: (HelixHeadlessDrawer["dismissLabel"]) | undefined;
+  /** The close control's accessible name. Translate it with the rest of your
+interface. */
+  dismissLabel?: (HelixHeadlessDrawer["dismissLabel"]) | undefined;
   /** Accessible name for the panel. When it is empty, the heading in the
 `header` slot names the panel. */
   label?: (HelixHeadlessDrawer["label"]) | undefined;
@@ -5150,6 +5421,12 @@ export type HelixHeadlessFileInputVueProps = {
 A dropped file the list does not name is left out, because the picker's
 filter is the only check the platform makes and a drop never meets it. */
   accept?: (HelixHeadlessFileInput["accept"]) | undefined;
+  /** What a reader hears when a drop or a paste adds files, with `{names}` and
+`{count}` filled in. */
+  "added-text"?: (HelixHeadlessFileInput["addedText"]) | undefined;
+  /** What a reader hears when a drop or a paste adds files, with `{names}` and
+`{count}` filled in. */
+  addedText?: (HelixHeadlessFileInput["addedText"]) | undefined;
   /** Which camera or microphone a mobile picker should offer, if any. */
   capture?: (HelixHeadlessFileInput["capture"]) | undefined;
   /** Whether the picker chooses a folder, and the field takes every file in
@@ -5177,6 +5454,10 @@ filled in. */
   /** What a reader hears when files are refused, with `{count}` and `{names}`
 filled in. */
   rejectedText?: (HelixHeadlessFileInput["rejectedText"]) | undefined;
+  /** What a reader hears when a file is removed, with `{name}` filled in. */
+  "removed-text"?: (HelixHeadlessFileInput["removedText"]) | undefined;
+  /** What a reader hears when a file is removed, with `{name}` filled in. */
+  removedText?: (HelixHeadlessFileInput["removedText"]) | undefined;
   /** The accessible name of the control that removes a file. `{name}` is
 replaced with the file's name.
 
@@ -5251,6 +5532,15 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessFileInput["name"]) | undefined;
+  /** Draws a file's row in place of its name, size, and type: a Lit template, a
+string, or a DOM node, given the file and its place in the list. The
+remove button stays beside it. */
+  renderFile?: (HelixHeadlessFileInput["renderFile"]) | undefined;
+  /** Your own step between taking files and holding them, such as shrinking an
+image, as Zag's file upload `transformFiles`. It is given the files taken
+from one pick, drop, or paste and returns the files to hold, or a promise
+of them. A promise that rejects refuses those files, with its message. */
+  transformFiles?: (HelixHeadlessFileInput["transformFiles"]) | undefined;
   /** Your own check on each arriving file, which returns why it is refused, or
 nothing to take it. A property, since a function cannot be an attribute. */
   validate?: (HelixHeadlessFileInput["validate"]) | undefined;
@@ -5529,9 +5819,13 @@ as `+3`, does not say what it does. */
   "max-tags"?: (HelixHeadlessFilterInput["maxTags"] | `${number}`) | undefined;
   /** How many tokens to show before the rest become a count. */
   maxTags?: (HelixHeadlessFilterInput["maxTags"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessFilterInput["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessFilterInput["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -6026,6 +6320,10 @@ export type HelixHeadlessHeatmapHelixResizeElementEvent =
   HelixHeadlessHeatmapElementEvent<HelixResizeEvent>;
 
 export type HelixHeadlessHeatmapVueProps = {
+  /** The word the `overview` puts before the busiest reading. */
+  "busiest-label"?: (HelixHeadlessHeatmap["busiestLabel"]) | undefined;
+  /** The word the `overview` puts before the busiest reading. */
+  busiestLabel?: (HelixHeadlessHeatmap["busiestLabel"]) | undefined;
   /** Shown when the table has no readings in it.
 
 Never shown while the table cannot be read at all, which is a server render
@@ -6101,6 +6399,10 @@ compare two hues at all. `tones="surface info accent success primary"` for a
 commit count is five unrelated hues for five amounts, which is confetti with
 no order in it. */
   tones?: (HelixHeadlessHeatmap["tones"]) | undefined;
+  /** The word the `overview` puts before the total of the readings drawn. */
+  "total-label"?: (HelixHeadlessHeatmap["totalLabel"]) | undefined;
+  /** The word the `overview` puts before the total of the readings drawn. */
+  totalLabel?: (HelixHeadlessHeatmap["totalLabel"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -6121,6 +6423,22 @@ percentages and its totals, such as `de` for `1.240` and `32 %`.
 Absent uses the runtime's own. The table's cells are shown as the table
 writes them, whatever this says. */
   locale?: (HelixHeadlessHeatmap["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessHeatmap["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessHeatmap["positionLabel"]) | undefined;
 };
 
 export type HelixHeadlessHeatmapVueEvents = {
@@ -6128,6 +6446,15 @@ export type HelixHeadlessHeatmapVueEvents = {
   "helix-resize": HelixHeadlessHeatmapHelixResizeElementEvent;
 };
 
+/** `HelixHeadlessIconButton` component event */
+export type HelixHeadlessIconButtonElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessIconButton,
+  E
+>;
+/** `helix-press` event type */
+export type HelixHeadlessIconButtonHelixPressElementEvent =
+  HelixHeadlessIconButtonElementEvent<HelixPressEvent>;
+
 export type HelixHeadlessIconButtonVueProps = {
   /** What to send when the button is activated, and what to send it to.
 
@@ -6315,7 +6642,10 @@ invoker without an id in the same tree needs. */
   commandForElement?: (HelixHeadlessIconButton["commandForElement"]) | undefined;
 };
 
-export type HelixHeadlessIconButtonVueEvents = {};
+export type HelixHeadlessIconButtonVueEvents = {
+  /** Fired when a press acts, with `detail.pointerType` saying what pressed the button. */
+  "helix-press": HelixHeadlessIconButtonHelixPressElementEvent;
+};
 
 /** `HelixHeadlessIcon` component event */
 export type HelixHeadlessIconElementEvent<E = Event> = TypedEvent<
@@ -6593,9 +6923,13 @@ Nothing reads it from the attribute either. The real `<input>` inside takes
 it as a property binding, which is what makes the keyboard and the
 validation follow. */
   type?: (HelixHeadlessInput["type"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessInput["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessInput["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -6676,6 +7010,10 @@ be anyway. */
   selectionEnd?: (HelixHeadlessInput["selectionEnd"]) | undefined;
   /** Where the selection starts, as an offset into the value. */
   selectionStart?: (HelixHeadlessInput["selectionStart"]) | undefined;
+  /** Your own rule for the value, run on every change once the browser finds
+nothing wrong. Return a message, or a list of them, to mark the field
+invalid, and `true`, `null`, or nothing to accept the value. */
+  validate?: (HelixHeadlessInput["validate"]) | undefined;
 };
 
 export type HelixHeadlessInputVueEvents = {
@@ -6699,6 +7037,13 @@ export type HelixHeadlessKbdHelixShortcutElementEvent =
   HelixHeadlessKbdElementEvent<HelixShortcutEvent>;
 
 export type HelixHeadlessKbdVueProps = {
+  /** Draws a chord under `keys` as one key per key, each a `key` part with a
+`separator` part between two where the platform writes a `+`, as GitHub
+and most docs draw `Ctrl` `K`.
+
+Absent, a chord is one key holding the whole label, as it always was.
+Reflected, because the styled tier draws the caps on the keys under it. */
+  caps?: (HelixHeadlessKbd["caps"]) | undefined;
   /** The id of the control the shortcut works, which is given the chord as its
 `aria-keyshortcuts`.
 
@@ -6706,6 +7051,26 @@ Names an element in the same tree, the way `Tooltip.for` does. Separate
 from `within`, which says where the key listens: a key can describe a
 shortcut the page binds itself. */
   for?: (HelixHeadlessKbd["for"]) | undefined;
+  /** Names for keys in place of the platform's own, by the key's name in
+`keys`, written as JSON in the attribute: `key-labels='{"mod":"Command",
+"enter":"Return"}'` shows `Command` and `Return` wherever `mod` and
+`enter` are written.
+
+For a page in another language, or a product with its own word for a key.
+Absent, the platform's glyphs and words are used. Only what is shown
+changes: the chord written onto `aria-keyshortcuts` keeps the names a
+screen reader knows. */
+  "key-labels"?: (HelixHeadlessKbd["keyLabels"]) | undefined;
+  /** Names for keys in place of the platform's own, by the key's name in
+`keys`, written as JSON in the attribute: `key-labels='{"mod":"Command",
+"enter":"Return"}'` shows `Command` and `Return` wherever `mod` and
+`enter` are written.
+
+For a page in another language, or a product with its own word for a key.
+Absent, the platform's glyphs and words are used. Only what is shown
+changes: the chord written onto `aria-keyshortcuts` keeps the names a
+screen reader knows. */
+  keyLabels?: (HelixHeadlessKbd["keyLabels"]) | undefined;
   /** The key or chord to show, such as `mod+k`, `?`, or `/`.
 
 `mod` is the platform's own command modifier, which is the reason to write
@@ -6849,6 +7214,11 @@ Off by default, for a viewer whose chrome you compose in the `header` and
 reader is idle, and the previous and next ones say they are unavailable at
 either end of a set that does not `loop`. */
   controls?: (HelixHeadlessLightbox["controls"]) | undefined;
+  /** Draws the place of the shown item in the set over the picture, in the
+words of `status-label`, such as "2 of 5". It hides with the controls while
+the reader is idle. Screen readers hear the place from the live region, so
+the drawn copy is hidden from them. */
+  counter?: (HelixHeadlessLightbox["counter"]) | undefined;
   /** The close control's accessible name. Translate it with the rest of your
 interface. */
   "dismiss-label"?: (HelixHeadlessLightbox["dismissLabel"]) | undefined;
@@ -6873,6 +7243,12 @@ keep the chrome up is the consumer's to decide with this. */
   label?: (HelixHeadlessLightbox["label"]) | undefined;
   /** Whether moving past the last item returns to the first. */
   loop?: (HelixHeadlessLightbox["loop"]) | undefined;
+  /** How far a reader can zoom into the shown item, as a scale, such as `3`.
+`1`, the default, turns zooming off. */
+  "max-zoom"?: (HelixHeadlessLightbox["maxZoom"] | `${number}`) | undefined;
+  /** How far a reader can zoom into the shown item, as a scale, such as `3`.
+`1`, the default, turns zooming off. */
+  maxZoom?: (HelixHeadlessLightbox["maxZoom"]) | undefined;
   /** The next control's accessible name. */
   "next-label"?: (HelixHeadlessLightbox["nextLabel"]) | undefined;
   /** The next control's accessible name. */
@@ -7015,6 +7391,13 @@ the attribute being absent, which is the one thing a reader cannot debug.
 Furniture rather than data, so the rules are inside the `aria-hidden` plot
 and reach no reader through the table. */
   gridlines?: (HelixHeadlessLineChart["gridlines"]) | undefined;
+  /** Draws a mark on every reading, the `marker` part, so a reader sees where
+the readings are, as well as the line between them.
+
+Absent draws none, except on a reading with a blank on either side: it
+has no line to be part of, so it takes a mark, the `marker` part with
+`marker-lone` beside it, or it would not be drawn at all. */
+  markers?: (HelixHeadlessLineChart["markers"]) | undefined;
   /** The shape of the mark on each series' last reading.
 
 Absent is a dot, and absent rather than defaulted because a reflecting
@@ -7074,6 +7457,22 @@ percentages and its totals, such as `de` for `1.240` and `32 %`.
 Absent uses the runtime's own. The table's cells are shown as the table
 writes them, whatever this says. */
   locale?: (HelixHeadlessLineChart["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessLineChart["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessLineChart["positionLabel"]) | undefined;
 };
 
 export type HelixHeadlessLineChartVueEvents = {};
@@ -7171,6 +7570,14 @@ has to survive with the stylesheet turned off.
   /** Numbers an ordered list downward, so the count falls row by row and ends at
 its last row, as `<ol reversed>` does. */
   reversed?: (HelixHeadlessList["reversed"]) | undefined;
+  /** What a press does to the rows already selected, in a list that selects:
+`toggle` adds or takes out the row, and `replace` selects it alone and
+lets the arrow keys carry the selection. */
+  "selection-behavior"?: (HelixHeadlessList["selectionBehavior"]) | undefined;
+  /** What a press does to the rows already selected, in a list that selects:
+`toggle` adds or takes out the row, and `replace` selects it alone and
+lets the arrow keys carry the selection. */
+  selectionBehavior?: (HelixHeadlessList["selectionBehavior"]) | undefined;
   /** Makes the list interactive: `single` selects one row, `multiple` any
 number, and `none` moves and acts without selecting. Unset is a list a
 reader reads, with no tab stop of its own. */
@@ -7219,6 +7626,9 @@ export type HelixHeadlessListboxHelixBeforeChangeElementEvent =
 /** `helix-filter` event type */
 export type HelixHeadlessListboxHelixFilterElementEvent =
   HelixHeadlessListboxElementEvent<HelixFilterEvent>;
+/** `helix-load-more` event type */
+export type HelixHeadlessListboxHelixLoadMoreElementEvent =
+  HelixHeadlessListboxElementEvent<HelixLoadMoreEvent>;
 
 export type HelixHeadlessListboxVueProps = {
   /** What the browser may autofill in the text field, as a platform token.
@@ -7280,6 +7690,18 @@ act on the list the reader expects. */
   "filter-label"?: (HelixHeadlessListbox["filterLabel"]) | undefined;
   /** Placeholder text for the filter field. */
   filterLabel?: (HelixHeadlessListbox["filterLabel"]) | undefined;
+  /** What the list says when its options could not be loaded, such as after a
+request to a server fails. Empty is no error.
+
+Set, it shows under any options there are, in place of `empty-text` and
+`loading-text`, and a screen reader hears it. Clear it when you ask again. */
+  "load-error"?: (HelixHeadlessListbox["loadError"]) | undefined;
+  /** What the list says when its options could not be loaded, such as after a
+request to a server fails. Empty is no error.
+
+Set, it shows under any options there are, in place of `empty-text` and
+`loading-text`, and a screen reader hears it. Clear it when you ask again. */
+  loadError?: (HelixHeadlessListbox["loadError"]) | undefined;
   /** Stops the arrow keys from choosing each option they move to. Enter, Space
 or a click chooses the highlighted option.
 
@@ -7289,6 +7711,16 @@ a reader can move through the options before closing the panel on one. */
   manual?: (HelixHeadlessListbox["manual"]) | undefined;
   /** Whether more than one option can be chosen. */
   multiple?: (HelixHeadlessListbox["multiple"]) | undefined;
+  /** The text shown when a filter hides every option of a list that has some.
+
+Absent, the list says `empty-text` in both cases. Set it to tell "nothing
+matches what you typed" from "there is nothing here". */
+  "no-results-text"?: (HelixHeadlessListbox["noResultsText"]) | undefined;
+  /** The text shown when a filter hides every option of a list that has some.
+
+Absent, the list says `empty-text` in both cases. Set it to tell "nothing
+matches what you typed" from "there is nothing here". */
+  noResultsText?: (HelixHeadlessListbox["noResultsText"]) | undefined;
   /** What a screen reader hears when a filter leaves one option. `{count}` is
 the count. */
   "result-label"?: (HelixHeadlessListbox["resultLabel"]) | undefined;
@@ -7319,9 +7751,13 @@ say that without the component knowing what a row looks like. */
   "loading-text"?: (HelixHeadlessListbox["loadingText"]) | undefined;
   /** The text shown and announced while the rows load. */
   loadingText?: (HelixHeadlessListbox["loadingText"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessListbox["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessListbox["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -7406,6 +7842,8 @@ export type HelixHeadlessListboxVueEvents = {
   "helix-before-change": HelixHeadlessListboxHelixBeforeChangeElementEvent;
   /** Fired before the list is filtered, and cancelable. */
   "helix-filter": HelixHeadlessListboxHelixFilterElementEvent;
+  /** Fired once the list is scrolled within a screen of its end, once for each number of options, and not while `loading` is set. Add the next page of options and set `loading` while you fetch it. */
+  "helix-load-more": HelixHeadlessListboxHelixLoadMoreElementEvent;
   /** Fired after the value changes. */
   input: HelixHeadlessListboxElementEvent;
 };
@@ -8494,6 +8932,32 @@ stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
 part names, so reflecting here would write an attribute onto the host for
 no reader. */
   band?: (HelixHeadlessMeter["band"]) | undefined;
+  /** `Intl.NumberFormat` options the reading is written with, as React Aria's
+Meter and ProgressBar take them: a unit, a currency, or a number of
+decimals. Written as JSON in the attribute.
+
+```html
+<helix-meter value="18" max="32" format-options='{"style":"unit","unit":"gigabyte"}'></helix-meter>
+```
+
+A `percent` style writes the share of the range, and any other the value
+itself, so the example says "18 GB", and a value past an end as it is.
+Absent is a whole percentage. The words are announced as well as shown.
+`value-text` still wins. */
+  "format-options"?: (HelixHeadlessMeter["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options the reading is written with, as React Aria's
+Meter and ProgressBar take them: a unit, a currency, or a number of
+decimals. Written as JSON in the attribute.
+
+```html
+<helix-meter value="18" max="32" format-options='{"style":"unit","unit":"gigabyte"}'></helix-meter>
+```
+
+A `percent` style writes the share of the range, and any other the value
+itself, so the example says "18 GB", and a value past an end as it is.
+Absent is a whole percentage. The words are announced as well as shown.
+`value-text` still wins. */
+  formatOptions?: (HelixHeadlessMeter["formatOptions"]) | undefined;
   /** Bottom of the high band.
 
 Absent leaves the range unbanded. */
@@ -8900,12 +9364,6 @@ filled in. */
   readonly?: (HelixHeadlessNumberInput["readOnly"]) | undefined;
   /** Prevents editing. The value is still submitted with the form. */
   readOnly?: (HelixHeadlessNumberInput["readOnly"]) | undefined;
-  /** What the field is described as on iOS and iPadOS, where it carries no
-spinbutton role. See the class description. */
-  "role-description"?: (HelixHeadlessNumberInput["roleDescription"]) | undefined;
-  /** What the field is described as on iOS and iPadOS, where it carries no
-spinbutton role. See the class description. */
-  roleDescription?: (HelixHeadlessNumberInput["roleDescription"]) | undefined;
   /** Makes the label a grip that changes the value when it is dragged.
 
 The label is what is dragged, so this adds no chrome at all. Still opt-in,
@@ -8942,9 +9400,13 @@ number alone. */
 React Aria's NumberField does unless told not to. Off, the wheel scrolls
 the page, which is what a reader passing over a form expects. */
   wheel?: (HelixHeadlessNumberInput["wheel"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessNumberInput["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessNumberInput["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -9037,6 +9499,12 @@ export type HelixHeadlessObjectInspectorHelixActivateElementEvent =
 /** `helix-before-activate` event type */
 export type HelixHeadlessObjectInspectorHelixBeforeActivateElementEvent =
   HelixHeadlessObjectInspectorElementEvent<HelixBeforeActivateEvent>;
+/** `helix-before-close` event type */
+export type HelixHeadlessObjectInspectorHelixBeforeCloseElementEvent =
+  HelixHeadlessObjectInspectorElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixHeadlessObjectInspectorHelixBeforeOpenElementEvent =
+  HelixHeadlessObjectInspectorElementEvent<HelixBeforeOpenEvent>;
 /** `helix-copy` event type */
 export type HelixHeadlessObjectInspectorHelixCopyElementEvent =
   HelixHeadlessObjectInspectorElementEvent<HelixCopyEvent>;
@@ -9046,6 +9514,9 @@ export type HelixHeadlessObjectInspectorHelixFilterElementEvent =
 /** `helix-filtered` event type */
 export type HelixHeadlessObjectInspectorHelixFilteredElementEvent =
   HelixHeadlessObjectInspectorElementEvent<HelixFilteredEvent>;
+/** `toggle` event type */
+export type HelixHeadlessObjectInspectorToggleElementEvent =
+  HelixHeadlessObjectInspectorElementEvent<ToggleEvent>;
 
 export type HelixHeadlessObjectInspectorVueProps = {
   /** The active row's path, such as `/meta/tags/0`, and the empty string for the
@@ -9181,12 +9652,18 @@ export type HelixHeadlessObjectInspectorVueEvents = {
   "helix-activate": HelixHeadlessObjectInspectorHelixActivateElementEvent;
   /** The active row is about to move, with its new path. Cancelable: cancel it to keep the row where it is. */
   "helix-before-activate": HelixHeadlessObjectInspectorHelixBeforeActivateElementEvent;
+  /** A reader is about to close the active branch. Cancelable: cancel it to keep the branch open. */
+  "helix-before-close": HelixHeadlessObjectInspectorHelixBeforeCloseElementEvent;
+  /** A reader is about to open the active branch, or `*` the branches beside it. Cancelable: cancel it to keep them closed. */
+  "helix-before-open": HelixHeadlessObjectInspectorHelixBeforeOpenElementEvent;
   /** A value was put on the clipboard, from the copy button or the keyboard. */
   "helix-copy": HelixHeadlessObjectInspectorHelixCopyElementEvent;
   /** Text was typed in the filter field, with what it now holds. Cancelable: cancel it to keep the filter as it was. */
   "helix-filter": HelixHeadlessObjectInspectorHelixFilterElementEvent;
   /** The filter field changed `filter`, which now holds the text. */
   "helix-filtered": HelixHeadlessObjectInspectorHelixFilteredElementEvent;
+  /** A reader opened or closed a branch, with `newState` and `oldState`. `expanded` holds every open branch. */
+  toggle: HelixHeadlessObjectInspectorToggleElementEvent;
 };
 
 export type HelixHeadlessOptionGroupVueProps = {
@@ -9208,15 +9685,19 @@ export type HelixHeadlessOptionHelixSelectElementEvent =
 export type HelixHeadlessOptionVueProps = {
   /** Whether this is the option the keyboard is on.
 
-Written by the listbox, which writes it once a reader moves the highlight.
-It shows as `:state(active)`, and as a `data-active` attribute for the
-stylesheets written before the state existed. */
+Written by the listbox once a reader moves the highlight. Style it with
+`:state(active)`, or `::part(item-active)` for an option inside another
+component's shadow root. The `data-active` attribute sets it from markup;
+it is also written back for stylesheets from before the state, and no
+stylesheet of the library's own selects it. */
   "data-active"?: (HelixHeadlessOption["active"]) | undefined;
   /** Whether this is the option the keyboard is on.
 
-Written by the listbox, which writes it once a reader moves the highlight.
-It shows as `:state(active)`, and as a `data-active` attribute for the
-stylesheets written before the state existed. */
+Written by the listbox once a reader moves the highlight. Style it with
+`:state(active)`, or `::part(item-active)` for an option inside another
+component's shadow root. The `data-active` attribute sets it from markup;
+it is also written back for stylesheets from before the state, and no
+stylesheet of the library's own selects it. */
   active?: (HelixHeadlessOption["active"]) | undefined;
   /** A second destination for the row, opened when you choose it with the
 modifier key held.
@@ -9390,6 +9871,11 @@ read at the click rather than cached, because a reader can change it while
 the page is open and this is the only motion in the component that
 JavaScript rather than CSS decides. */
   behavior?: (HelixHeadlessOutline["behavior"]) | undefined;
+  /** Keeps the link of the section in view in view itself, in an outline
+longer than the box it scrolls in, such as a contents rail with a
+scrollbar of its own. Only that box moves: never the page, and never the
+box the sections scroll in. */
+  follow?: (HelixHeadlessOutline["follow"]) | undefined;
   /** The navigation's name, read by screen readers. A heading in the `heading`
 slot names it in place of this. */
   label?: (HelixHeadlessOutline["label"]) | undefined;
@@ -9694,6 +10180,10 @@ the same code is one offer made six times. */
 Awesome's `autosubmit` and Radix's `autoSubmit`. Only for a code the field
 took: a refused last character submits nothing. */
   autosubmit?: (HelixHeadlessPinInput["autosubmit"]) | undefined;
+  /** How typed and pasted letters are cased: `upper`, `lower`, or `preserve`
+to keep them as typed. Web Awesome's OTP input takes the same `case`, for
+a code a service reads in one case. */
+  case?: (HelixHeadlessPinInput["case"]) | undefined;
   /** Accessible name for one box, with `{index}` and `{length}` filled in. */
   "cell-label"?: (HelixHeadlessPinInput["cellLabel"]) | undefined;
   /** Accessible name for one box, with `{index}` and `{length}` filled in. */
@@ -9747,9 +10237,13 @@ attribute no consumer's markup had. The area rules carry the sentence
 "reflect only what CSS selects on". The real inputs take it as a binding,
 which is what makes the keyboard follow. */
   type?: (HelixHeadlessPinInput["type"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessPinInput["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessPinInput["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -9851,8 +10345,9 @@ trigger already reads as belonging to it. */
   /** The panel's name, read by screen readers. Left at `Popover`, the first
 heading in the panel names it instead. */
   label?: (HelixHeadlessPopover["label"]) | undefined;
-  /** Keeps `Tab` inside the panel while it is open, and marks the panel
-`aria-modal`. A press outside and Escape still close it. */
+  /** Keeps `Tab` inside the panel while it is open, marks the panel
+`aria-modal`, and hides the rest of the page from screen readers. A press
+outside and Escape still close it. */
   modal?: (HelixHeadlessPopover["modal"]) | undefined;
   /** Space between the trigger and the panel, in pixels. */
   offset?: (HelixHeadlessPopover["offset"]) | undefined;
@@ -9889,6 +10384,30 @@ export type HelixHeadlessPopoverVueEvents = {
 };
 
 export type HelixHeadlessProgressVueProps = {
+  /** `Intl.NumberFormat` options the reading is written with, as React Aria's
+Meter and ProgressBar take them: a unit, a currency, or a number of
+decimals. Written as JSON in the attribute.
+
+```html
+<helix-progress value="18" max="32" format-options='{"style":"unit","unit":"gigabyte"}'></helix-progress>
+```
+
+A `percent` style writes the share of the range, and any other the value
+itself, so the example says "18 GB". Absent is a whole percentage. The
+words are announced as well as shown. `value-text` still wins. */
+  "format-options"?: (HelixHeadlessProgress["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options the reading is written with, as React Aria's
+Meter and ProgressBar take them: a unit, a currency, or a number of
+decimals. Written as JSON in the attribute.
+
+```html
+<helix-progress value="18" max="32" format-options='{"style":"unit","unit":"gigabyte"}'></helix-progress>
+```
+
+A `percent` style writes the share of the range, and any other the value
+itself, so the example says "18 GB". Absent is a whole percentage. The
+words are announced as well as shown. `value-text` still wins. */
+  formatOptions?: (HelixHeadlessProgress["formatOptions"]) | undefined;
   /** Whether the length of the task is unknown. The bar then shows activity
 without a value.
 
@@ -10066,9 +10585,13 @@ Home and End move focus between the radios and choose nothing, so a reader
 can hear every choice, and Tab still reaches the answer. The group says
 `aria-readonly`. A script can still set `value`. */
   readOnly?: (HelixHeadlessRadioGroup["readOnly"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessRadioGroup["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessRadioGroup["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -10239,6 +10762,9 @@ export type HelixHeadlessRatingHelixBeforeChangeElementEvent =
 /** `helix-clear` event type */
 export type HelixHeadlessRatingHelixClearElementEvent =
   HelixHeadlessRatingElementEvent<HelixClearEvent>;
+/** `helix-preview` event type */
+export type HelixHeadlessRatingHelixPreviewElementEvent =
+  HelixHeadlessRatingElementEvent<HelixPreviewEvent>;
 
 export type HelixHeadlessRatingVueProps = {
   /** Whether a reader can take the rating back to unrated: by pressing the
@@ -10351,9 +10877,13 @@ answer from the value than from a sentence: "3.5" alone is a number without
 a subject. This names the readout, where a control is named by its `label`
 and each of its options by the score that option is. */
   valueText?: (HelixHeadlessRating["valueText"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessRating["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessRating["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -10433,6 +10963,8 @@ export type HelixHeadlessRatingVueEvents = {
   "helix-before-change": HelixHeadlessRatingHelixBeforeChangeElementEvent;
   /** The rating went back to unrated, under `clearable`. Sent after `input` and `change`. */
   "helix-clear": HelixHeadlessRatingHelixClearElementEvent;
+  /** The score under the pointer, shown before it is chosen, or `''` once the marks show the score again. Sent once each time the preview changes. */
+  "helix-preview": HelixHeadlessRatingHelixPreviewElementEvent;
   /** The score changed. */
   input: HelixHeadlessRatingElementEvent;
 };
@@ -10453,6 +10985,14 @@ is read along. */
   "points-label"?: (HelixHeadlessScatterChart["pointsLabel"]) | undefined;
   /** The word the summary uses for a row when it counts them. */
   pointsLabel?: (HelixHeadlessScatterChart["pointsLabel"]) | undefined;
+  /** Draws each series' line of best fit across the plot, by least squares, in
+the series' color: the regression line a reader would otherwise draw by
+eye.
+
+Absent draws none. A series with fewer than two points, or with every
+point at one measure across, has no line to draw. The summary already
+gives each series' correlation, which says how near the points are to it. */
+  trend?: (HelixHeadlessScatterChart["trend"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -10473,6 +11013,22 @@ percentages and its totals, such as `de` for `1.240` and `32 %`.
 Absent uses the runtime's own. The table's cells are shown as the table
 writes them, whatever this says. */
   locale?: (HelixHeadlessScatterChart["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessScatterChart["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessScatterChart["positionLabel"]) | undefined;
 };
 
 export type HelixHeadlessScatterChartVueEvents = {};
@@ -10496,6 +11052,9 @@ leaves, in milliseconds. Read under `scrollbars="scroll"` and
 
 Without one there is no region: see the note on the class. */
   label?: (HelixHeadlessScrollArea["label"]) | undefined;
+  /** The one axis the content scrolls along: `vertical` or `horizontal`. The
+other axis clips what is past it and has no scrollbar. Unset scrolls both. */
+  orientation?: (HelixHeadlessScrollArea["orientation"]) | undefined;
   /** Draws scrollbars of the component's own in place of the browser's, and
 says when they show.
 
@@ -10512,7 +11071,7 @@ Absent keeps the browser's scrollbars. */
 export type HelixHeadlessScrollAreaVueEvents = {
   /** The content scrolled. Sent from the host, because the viewport's own does not leave the shadow root. Does not bubble. */
   scroll: HelixHeadlessScrollAreaElementEvent;
-  /** The content stopped scrolling. Sent from the host, as `scroll` is. Does not bubble. */
+  /** The content stopped scrolling. Sent from the host, as `scroll` is, and once for a thumb dragged across the content. Does not bubble. */
   scrollend: HelixHeadlessScrollAreaElementEvent;
 };
 
@@ -10533,6 +11092,9 @@ export type HelixHeadlessSelectHelixBeforeOpenElementEvent =
 /** `helix-filter` event type */
 export type HelixHeadlessSelectHelixFilterElementEvent =
   HelixHeadlessSelectElementEvent<HelixFilterEvent>;
+/** `helix-load-more` event type */
+export type HelixHeadlessSelectHelixLoadMoreElementEvent =
+  HelixHeadlessSelectElementEvent<HelixLoadMoreEvent>;
 /** `toggle` event type */
 export type HelixHeadlessSelectToggleElementEvent =
   HelixHeadlessSelectElementEvent<ToggleEvent>;
@@ -10578,9 +11140,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?: (HelixHeadlessSelect["open"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessSelect["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessSelect["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -10674,6 +11240,8 @@ export type HelixHeadlessSelectVueEvents = {
   "helix-before-open": HelixHeadlessSelectHelixBeforeOpenElementEvent;
   /** Fired as the user types in the filter field of a `filterable` select, with the text the list is filtered by. Cancelable: cancel it to leave the list unfiltered and filter the options yourself. */
   "helix-filter": HelixHeadlessSelectHelixFilterElementEvent;
+  /** Fired once the list is scrolled within a screen of its end, once for each number of options, and not while `loading` is set. Add the next page and set `loading` while you fetch it. */
+  "helix-load-more": HelixHeadlessSelectHelixLoadMoreElementEvent;
   /** Fired after the value changes. */
   input: HelixHeadlessSelectElementEvent;
   /** Fired after the list opens or closes, with `newState` and `oldState`. */
@@ -10801,12 +11369,22 @@ takes the width of the row it is in. `--slider-length` is that number and
 defaults to nine rem, so one dropped into a layout is a usable height
 rather than a thumb sitting on nothing. */
   orientation?: (HelixHeadlessSlider["orientation"]) | undefined;
+  /** Where a single thumb's fill starts: `start` at `min`, `center` at the
+middle of the track, or `end` at `max`. Absent is `start`. A range fills
+between its thumbs and ignores it. */
+  origin?: (HelixHeadlessSlider["origin"]) | undefined;
   /** Adds a second thumb, so the value is a pair.
 
 The pair is one string, `"10,50"`, which is what a form submits and what
 `MixinControllerValue` already holds. `valueAsNumber` reads the lower of
 the two, since a range has no single number. */
   range?: (HelixHeadlessSlider["range"]) | undefined;
+  /** How the readout joins a range's two values, with `{start}` and `{end}`
+filled in. Write it in the page's language, such as `{start} bis {end}`. */
+  "range-text"?: (HelixHeadlessSlider["rangeText"]) | undefined;
+  /** How the readout joins a range's two values, with `{start}` and `{end}`
+filled in. Write it in the page's language, such as `{start} bis {end}`. */
+  rangeText?: (HelixHeadlessSlider["rangeText"]) | undefined;
   /** Shows the chosen value beside the track. */
   "show-value"?: (HelixHeadlessSlider["showValue"]) | undefined;
   /** Shows the chosen value beside the track. */
@@ -10819,9 +11397,13 @@ such as `{value} degrees`. Empty announces the number alone. */
   /** What a screen reader says for a thumb's value, with `{value}` filled in,
 such as `{value} degrees`. Empty announces the number alone. */
   valueText?: (HelixHeadlessSlider["valueText"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessSlider["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessSlider["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -10945,6 +11527,18 @@ the accessible representation of a sparkline, and a list of the fourteen
 numbers is not. Absent, the drawing is hidden from a screen reader rather
 than announced without a name. */
   label?: (HelixHeadlessSparkline["label"]) | undefined;
+  /** The locale the readout's numbers and positions are written in, such as
+`de` for `1.240`.
+
+Absent uses the runtime's own. A table's cells are shown as the table
+writes them, whatever this says. */
+  locale?: (HelixHeadlessSparkline["locale"]) | undefined;
+  /** Which readings take a mark of their own: `high`, `low`, or both,
+separated by spaces.
+
+Absent marks none, and the drawing is what it was. Each mark is a part,
+placed at its reading, for a stylesheet to draw. */
+  marks?: (HelixHeadlessSparkline["marks"]) | undefined;
   /** What the readings are drawn as.
 
 Absent is `area`, a line with the region beneath it washed. `line` is the
@@ -10973,6 +11567,20 @@ anywhere the fill would be noise, several of them in one box for instance.
 This tier rather than the one above: a plot type is geometry and geometry
 is markup, the same reason `curve` lives here. */
   plot?: (HelixHeadlessSparkline["plot"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. */
+  "position-label"?: (HelixHeadlessSparkline["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. */
+  positionLabel?: (HelixHeadlessSparkline["positionLabel"]) | undefined;
   /** The numbers, separated by whitespace or by commas.
 
 An array assigned to the property works too, which is what React 19 does
@@ -11237,10 +11845,9 @@ A property rather than a `Flex` around it, because the unit has to stay on
 the value's baseline whichever way the pair goes, and only this element
 knows which of its children the unit belongs to.
 
-**`Trend` has a `direction` too, and there it means which way a number
-moved:** `up`, `down` or `neutral`. A Stat and a Trend are often written
-side by side, so watch for the mix-up. On a Stat those three words are not
-layouts, and the pair stays the column.
+The name and the values are `Flex`'s, which lays out the same way. Which
+way a number moved is `Trend`'s `movement`. On a Stat, `up`, `down` and
+`neutral` are not layouts, and the pair stays the column.
 
 **Optional rather than defaulted to `column`, which is not a style
 preference.** A reflecting property with a default writes its attribute onto
@@ -11318,6 +11925,10 @@ Ignored once `active` is written. */
 
 Ignored once `active` is written. */
   defaultActive?: (HelixHeadlessSteps["defaultActive"]) | undefined;
+  /** A function that answers whether a stage is valid, asked about the stage a
+reader is on before they move forward from it. Return `false` to keep them
+there. Not asked of an `optional` stage, nor for a move back. */
+  validate?: (HelixHeadlessSteps["validate"]) | undefined;
 };
 
 export type HelixHeadlessStepsVueEvents = {
@@ -11384,9 +11995,13 @@ Not reflected: the attribute is the consumer's input and stays as they
 wrote it, and `:state(checked)` carries the resolved state for
 stylesheets. */
   checked?: (HelixHeadlessSwitch["checked"]) | undefined;
-  /** Whether the control starts checked. A form reset returns it to this state. */
+  /** Whether the control starts checked. A form reset returns it to this state,
+and to the `checked` attribute where this one is not written, as a native
+checkbox resets to the `checked` it declares. */
   "default-checked"?: (HelixHeadlessSwitch["defaultChecked"]) | undefined;
-  /** Whether the control starts checked. A form reset returns it to this state. */
+  /** Whether the control starts checked. A form reset returns it to this state,
+and to the `checked` attribute where this one is not written, as a native
+checkbox resets to the `checked` it declares. */
   defaultChecked?: (HelixHeadlessSwitch["defaultChecked"]) | undefined;
   /** Whether a reader can see and focus the control and cannot change it. A
 read-only control still submits its value.
@@ -12076,6 +12691,9 @@ export type HelixHeadlessTextareaElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessTextareaHelixBeforeChangeElementEvent =
   HelixHeadlessTextareaElementEvent<HelixBeforeChangeEvent>;
+/** `helix-clear` event type */
+export type HelixHeadlessTextareaHelixClearElementEvent =
+  HelixHeadlessTextareaElementEvent<HelixClearEvent>;
 
 export type HelixHeadlessTextareaVueProps = {
   /** What the browser can autofill in the field, as a standard `autocomplete`
@@ -12088,6 +12706,12 @@ a token like `email` or `bday` to ask for autofill, or to `off` to refuse. */
   "auto-grow"?: (HelixHeadlessTextarea["autoGrow"]) | undefined;
   /** Grows the box to fit its content, so it does not scroll. */
   autoGrow?: (HelixHeadlessTextarea["autoGrow"]) | undefined;
+  /** Draws a button that empties the field while it holds text. */
+  clearable?: (HelixHeadlessTextarea["clearable"]) | undefined;
+  /** The accessible name of the clear button, which shows only an icon. */
+  "clear-label"?: (HelixHeadlessTextarea["clearLabel"]) | undefined;
+  /** The accessible name of the clear button, which shows only an icon. */
+  clearLabel?: (HelixHeadlessTextarea["clearLabel"]) | undefined;
   /** How many characters wide the box is, when the layout does not set its
 width.
 
@@ -12152,9 +12776,13 @@ Not a label: it goes when typing starts. */
   /** How the browser wraps the text, and whether the breaks are submitted with
 it. */
   wrap?: (HelixHeadlessTextarea["wrap"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessTextarea["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessTextarea["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -12235,6 +12863,10 @@ which is where an empty field's caret would be anyway. */
   selectionEnd?: (HelixHeadlessTextarea["selectionEnd"]) | undefined;
   /** Where the selection starts, as an offset into the value. */
   selectionStart?: (HelixHeadlessTextarea["selectionStart"]) | undefined;
+  /** Your own rule for the value, run on every change once the browser finds
+nothing wrong. Return a message, or a list of them, to mark the field
+invalid, and `true`, `null`, or nothing to accept the value. */
+  validate?: (HelixHeadlessTextarea["validate"]) | undefined;
 };
 
 export type HelixHeadlessTextareaVueEvents = {
@@ -12242,6 +12874,8 @@ export type HelixHeadlessTextareaVueEvents = {
   change: HelixHeadlessTextareaElementEvent;
   /** Fired as the text changes, and cancelable. */
   "helix-before-change": HelixHeadlessTextareaHelixBeforeChangeElementEvent;
+  /** Fired after the clear button has emptied the field, after `input` and `change`. */
+  "helix-clear": HelixHeadlessTextareaHelixClearElementEvent;
   /** Fired after the value changes. */
   input: HelixHeadlessTextareaElementEvent;
 };
@@ -12474,9 +13108,13 @@ as `+3`, does not say what it does. */
   "max-tags"?: (HelixHeadlessTimeInput["maxTags"] | `${number}`) | undefined;
   /** How many tokens to show before the rest become a count. */
   maxTags?: (HelixHeadlessTimeInput["maxTags"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessTimeInput["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessTimeInput["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -12627,9 +13265,15 @@ Absent is the locale's own, which is right for a reader's own form. Set it
 where every reader must see the same clock whatever their language, as a
 timetable does. The value is `HH:mm` on twenty-four hours either way. */
   hourCycle?: (HelixHeadlessTimePicker["hourCycle"]) | undefined;
-  /** What the wheel of hours is called, read by screen readers. */
+  /** What the wheel of hours is called, read by screen readers.
+
+Absent is the locale's own word, from `Intl.DisplayNames`: "Hour" in
+English, "Stunde" in German. */
   "hour-label"?: (HelixHeadlessTimePicker["hourLabel"]) | undefined;
-  /** What the wheel of hours is called, read by screen readers. */
+  /** What the wheel of hours is called, read by screen readers.
+
+Absent is the locale's own word, from `Intl.DisplayNames`: "Hour" in
+English, "Stunde" in German. */
   hourLabel?: (HelixHeadlessTimePicker["hourLabel"]) | undefined;
   /** Whether the current selection fails validation.
 
@@ -12656,16 +13300,28 @@ closes on a time. */
   /** Latest time offered, as `HH:mm`. */
   max?: (HelixHeadlessTimePicker["max"]) | undefined;
   /** What the wheel of the half of the day is called, read by screen readers.
-Its two options are written as the locale writes them, such as AM and PM. */
+Its two options are written as the locale writes them, such as AM and PM.
+
+Absent is the locale's own word, from `Intl.DisplayNames`: "AM/PM" in
+English, "Tageshälfte" in German. */
   "meridiem-label"?: (HelixHeadlessTimePicker["meridiemLabel"]) | undefined;
   /** What the wheel of the half of the day is called, read by screen readers.
-Its two options are written as the locale writes them, such as AM and PM. */
+Its two options are written as the locale writes them, such as AM and PM.
+
+Absent is the locale's own word, from `Intl.DisplayNames`: "AM/PM" in
+English, "Tageshälfte" in German. */
   meridiemLabel?: (HelixHeadlessTimePicker["meridiemLabel"]) | undefined;
   /** Earliest time offered, as `HH:mm`. */
   min?: (HelixHeadlessTimePicker["min"]) | undefined;
-  /** What the wheel of minutes is called, read by screen readers. */
+  /** What the wheel of minutes is called, read by screen readers.
+
+Absent is the locale's own word, from `Intl.DisplayNames`: "Minute" in
+English and German, "分" in Japanese. */
   "minute-label"?: (HelixHeadlessTimePicker["minuteLabel"]) | undefined;
-  /** What the wheel of minutes is called, read by screen readers. */
+  /** What the wheel of minutes is called, read by screen readers.
+
+Absent is the locale's own word, from `Intl.DisplayNames`: "Minute" in
+English and German, "分" in Japanese. */
   minuteLabel?: (HelixHeadlessTimePicker["minuteLabel"]) | undefined;
   /** How many times can be held at once.
 
@@ -12723,9 +13379,15 @@ else set needs. */
   readOnly?: (HelixHeadlessTimePicker["readOnly"]) | undefined;
   /** Stops the form from submitting while no time is chosen. */
   required?: (HelixHeadlessTimePicker["required"]) | undefined;
-  /** What the wheel of seconds is called, read by screen readers. */
+  /** What the wheel of seconds is called, read by screen readers.
+
+Absent is the locale's own word, from `Intl.DisplayNames`: "Second" in
+English, "Sekunde" in German. */
   "second-label"?: (HelixHeadlessTimePicker["secondLabel"]) | undefined;
-  /** What the wheel of seconds is called, read by screen readers. */
+  /** What the wheel of seconds is called, read by screen readers.
+
+Absent is the locale's own word, from `Intl.DisplayNames`: "Second" in
+English, "Sekunde" in German. */
   secondLabel?: (HelixHeadlessTimePicker["secondLabel"]) | undefined;
   /** Whether times carry their seconds.
 
@@ -12780,9 +13442,13 @@ not touch, and React reads that as a hydration mismatch. The absent
 attribute *is* the list, which the stylesheet reads as the base rule, so
 only the departure has to be named. */
   variant?: (HelixHeadlessTimePicker["variant"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessTimePicker["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessTimePicker["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -13033,9 +13699,13 @@ as a toolbar of buttons with `aria-pressed`.
 
 Optional, so the attribute is absent until a consumer writes it. */
   selectionMode?: (HelixHeadlessToggleGroup["selectionMode"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   "default-value"?: (HelixHeadlessToggleGroup["defaultValue"]) | undefined;
-  /** The value the control starts with. A form reset returns it to this value. */
+  /** The value the control starts with. A form reset returns it to this value,
+and to the `value` attribute where this one is not written, as a native
+control resets to the `value` it declares. */
   defaultValue?: (HelixHeadlessToggleGroup["defaultValue"]) | undefined;
   /** The control's current value, which its form submits.
 
@@ -13242,9 +13912,13 @@ Without one, sweeping across a row of controls flashes a tooltip for each
 of them, which is noise rather than help. Focus opens with no delay: a
 keyboard reader arriving on a control has already committed to it. */
   delay?: (HelixHeadlessTooltip["delay"]) | undefined;
-  /** How long the bubble stays after the pointer leaves, in milliseconds. */
+  /** How long the bubble stays after the pointer leaves the trigger or the
+bubble, in milliseconds: the close delay. It is the time a reader has to
+cross the gap onto the bubble. */
   "delay-out"?: (HelixHeadlessTooltip["delayOut"] | `${number}`) | undefined;
-  /** How long the bubble stays after the pointer leaves, in milliseconds. */
+  /** How long the bubble stays after the pointer leaves the trigger or the
+bubble, in milliseconds: the close delay. It is the time a reader has to
+cross the gap onto the bubble. */
   delayOut?: (HelixHeadlessTooltip["delayOut"]) | undefined;
   /** Stops the tooltip from showing. */
   disabled?: (HelixHeadlessTooltip["disabled"]) | undefined;
@@ -13267,6 +13941,11 @@ through as attributes. Both paths reach the same place through Lit, so
 nothing is broken by it; a `[for]` selector would find nothing, which is
 why this does not reflect and nothing styles on it. */
   for?: (HelixHeadlessTooltip["for"]) | undefined;
+  /** Whether the pointer can move onto the bubble and the bubble stays, so a
+reader can read it under a magnifier or select its words, as WCAG 1.4.13
+asks. `hoverable="false"` hides the bubble once the pointer reaches it,
+for a bubble that covers something a reader moves on to. */
+  hoverable?: (HelixHeadlessTooltip["hoverable"]) | undefined;
   /** The space between the trigger and the tip of the bubble, in pixels.
 
 **Measured from the point, which is what the arrow being back changed.**
@@ -13376,6 +14055,9 @@ export type HelixHeadlessTourHelixCompleteElementEvent =
 /** `helix-tour-ask` event type */
 export type HelixHeadlessTourHelixTourAskElementEvent =
   HelixHeadlessTourElementEvent<HelixTourAskEvent>;
+/** `helix-tour-status` event type */
+export type HelixHeadlessTourHelixTourStatusElementEvent =
+  HelixHeadlessTourElementEvent<HelixTourStatusEvent>;
 /** `toggle` event type */
 export type HelixHeadlessTourToggleElementEvent =
   HelixHeadlessTourElementEvent<ToggleEvent>;
@@ -13458,6 +14140,8 @@ export type HelixHeadlessTourVueEvents = {
   "helix-complete": HelixHeadlessTourHelixCompleteElementEvent;
   /** Fired when a stop's control is pressed to move the tour. The stop sends it, and the tour handles it. */
   "helix-tour-ask": HelixHeadlessTourHelixTourAskElementEvent;
+  /** Fired when the tour starts waiting at a `wait` stop, is skipped, or is completed, with the stop's index and `detail.status` saying which. */
+  "helix-tour-status": HelixHeadlessTourHelixTourStatusElementEvent;
   /** Sent when the tour starts or ends, with `newState` and `oldState`. */
   toggle: HelixHeadlessTourToggleElementEvent;
 };
@@ -13690,13 +14374,13 @@ branch as a label; a headless consumer reads the attribute and the
 written here appears in the served markup of every tree anybody renders.
 The resting state is the absence of the attribute, which is `peer`. */
   nesting?: (HelixHeadlessTree["nesting"]) | undefined;
-  /** Whether a reader can check many items. Unset, one item is chosen at a
-time.
+  /** Whether a reader can check many items, or choose only the items at the
+ends. Unset, one item is chosen at a time, branches included.
 
 Optional, so a tree of one choice writes no attribute onto the host. */
   "selection-mode"?: (HelixHeadlessTree["selectionMode"]) | undefined;
-  /** Whether a reader can check many items. Unset, one item is chosen at a
-time.
+  /** Whether a reader can check many items, or choose only the items at the
+ends. Unset, one item is chosen at a time, branches included.
 
 Optional, so a tree of one choice writes no attribute onto the host. */
   selectionMode?: (HelixHeadlessTree["selectionMode"]) | undefined;
@@ -13750,26 +14434,27 @@ export type HelixHeadlessTrendVueProps = {
   "better-label"?: (HelixHeadlessTrend["betterLabel"]) | undefined;
   /** The word read out after the direction when the move is an improvement. */
   betterLabel?: (HelixHeadlessTrend["betterLabel"]) | undefined;
-  /** Which way the measurement moved.
-
-Absent is neutral, so a trend with nothing to report draws a bar rather
-than picking a direction. Optional rather than defaulted for the reason
-`Stat.direction` is: a reflecting property with a default writes its
-attribute onto the host the moment the element upgrades, and the host is
-markup the consumer rendered, which React compares against what it rendered
-and reports as a hydration mismatch. */
+  /** Which way the measurement moved, as `movement` says it. */
   direction?: (HelixHeadlessTrend["direction"]) | undefined;
   /** The word read out for a move down. */
   "down-label"?: (HelixHeadlessTrend["downLabel"]) | undefined;
   /** The word read out for a move down. */
   downLabel?: (HelixHeadlessTrend["downLabel"]) | undefined;
-  /** Which direction counts as an improvement for this metric.
+  /** Which movement counts as an improvement for this metric.
 
 Absent states the movement without judging it, which is the honest default:
 revenue up is good news and latency up is bad news, and only the consumer
 knows which one this is. Set it once per metric and it holds while the
-direction changes underneath. */
+movement changes underneath. */
   good?: (HelixHeadlessTrend["good"]) | undefined;
+  /** Which way the measurement moved.
+
+Absent is neutral, so a trend with nothing to report draws a bar rather
+than picking a direction. Optional rather than defaulted: a reflecting
+property with a default writes its attribute onto the host the moment the
+element upgrades, and the host is markup the consumer rendered, which React
+compares against what it rendered and reports as a hydration mismatch. */
+  movement?: (HelixHeadlessTrend["movement"]) | undefined;
   /** The word read out for no move, or for a direction that is not one of the
 three. */
   "unchanged-label"?: (HelixHeadlessTrend["unchangedLabel"]) | undefined;
@@ -13902,7 +14587,7 @@ Ignored once `active` is written. */
 };
 
 export type HelixHeadlessVideoPlaylistVueEvents = {
-  /** The current entry changed. The playlist already holds the new entry when this is sent. */
+  /** The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. */
   "helix-activate": HelixHeadlessVideoPlaylistHelixActivateElementEvent;
   /** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
   "helix-before-activate": HelixHeadlessVideoPlaylistHelixBeforeActivateElementEvent;
@@ -14342,6 +15027,9 @@ export type HelixHeadlessVirtualListElementEvent<E = Event> = TypedEvent<
   HelixHeadlessVirtualList,
   E
 >;
+/** `helix-before-change` event type */
+export type HelixHeadlessVirtualListHelixBeforeChangeElementEvent =
+  HelixHeadlessVirtualListElementEvent<HelixBeforeChangeEvent>;
 /** `helix-load-more` event type */
 export type HelixHeadlessVirtualListHelixLoadMoreElementEvent =
   HelixHeadlessVirtualListElementEvent<HelixLoadMoreEvent>;
@@ -14358,21 +15046,61 @@ right whenever the rows really are one height and is the cheaper of the two. */
   /** The id of the script element that holds the items as JSON. `items` wins
 where both are set. */
   for?: (HelixHeadlessVirtualList["for"]) | undefined;
+  /** The field of each item that is its key in `value`, as a key or a path of
+keys. Empty reads a string or a number item as its own key, and any
+other item by its place in the set. */
+  "key-field"?: (HelixHeadlessVirtualList["keyField"]) | undefined;
+  /** The field of each item that is its key in `value`, as a key or a path of
+keys. Empty reads a string or a number item as its own key, and any
+other item by its place in the set. */
+  keyField?: (HelixHeadlessVirtualList["keyField"]) | undefined;
   /** The list's name, read by screen readers, because only some of its rows
 are rendered at a time.
 
 An `aria-label` or `aria-labelledby` on the host names the list too, and
 wins over this. */
   label?: (HelixHeadlessVirtualList["label"]) | undefined;
-  /** Places rows by their measured height. Without it, every row is placed by
-`estimate`.
+  /** Marks the list as busy fetching more items, and draws a row after the last
+item that says so.
+
+Set it when `helix-load-more` starts a fetch, and clear it when the items
+arrive. The list does not ask for more while it is set. */
+  loading?: (HelixHeadlessVirtualList["loading"]) | undefined;
+  /** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
+  "loading-label"?: (HelixHeadlessVirtualList["loadingLabel"]) | undefined;
+  /** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
+  loadingLabel?: (HelixHeadlessVirtualList["loadingLabel"]) | undefined;
+  /** Places each row by its own measured height. Without it, rows are placed
+by one height: `estimate` until rows are drawn, then the drawn rows' height,
+read once.
 
 **Off by default, because the straight line is better when it holds.** One
-estimate makes offset and index convert by division, which can never
+height makes offset and index convert by division, which can never
 disagree with itself; measuring is what a set of genuinely different
 heights needs and costs a read of each row as it renders. A list of
 one-line rows should leave this alone. */
   measured?: (HelixHeadlessVirtualList["measured"]) | undefined;
+  /** Makes the list a list box a reader chooses from: `single` selects one
+item, and `multiple` any number. Unset is a list a reader reads. */
+  "selection-mode"?: (HelixHeadlessVirtualList["selectionMode"]) | undefined;
+  /** Makes the list a list box a reader chooses from: `single` selects one
+item, and `multiple` any number. Unset is a list a reader reads. */
+  selectionMode?: (HelixHeadlessVirtualList["selectionMode"]) | undefined;
+  /** The field of each item that typing matches, as a key or a path of keys
+(`author.name`).
+
+Empty by default, which matches the first `data-field` of the row
+template, or the item itself where it is a string or a number. */
+  "text-field"?: (HelixHeadlessVirtualList["textField"]) | undefined;
+  /** The field of each item that typing matches, as a key or a path of keys
+(`author.name`).
+
+Empty by default, which matches the first `data-field` of the row
+template, or the item itself where it is a string or a number. */
+  textField?: (HelixHeadlessVirtualList["textField"]) | undefined;
+  /** The keys of the chosen items, separated by commas, in a list with
+`selection-mode`. Set it to start with items chosen. */
+  value?: (HelixHeadlessVirtualList["value"]) | undefined;
   /** The items, as an array. Set it as a property.
 
 Each item is drawn by `renderItem`, or into the row `<template>` by its
@@ -14389,6 +15117,10 @@ and place in the set. Where it is unset, the row `<template>` is used. */
 };
 
 export type HelixHeadlessVirtualListVueEvents = {
+  /** Fired once a press or a key has changed which items are selected, in a list with `selection-mode`. */
+  change: HelixHeadlessVirtualListElementEvent;
+  /** Fired before a press or a key changes which items are selected, with the `value` it would leave. Cancelable. */
+  "helix-before-change": HelixHeadlessVirtualListHelixBeforeChangeElementEvent;
   /** Fired when a reader comes within one screen of the last item, once for each length of the set. */
   "helix-load-more": HelixHeadlessVirtualListHelixLoadMoreElementEvent;
   /** Fired when the items on screen change, with the new `first` and `last`, which `range` also holds. */
@@ -14396,6 +15128,8 @@ export type HelixHeadlessVirtualListVueEvents = {
 };
 
 export type CustomCssProperties = {
+  /** The height of the content, in pixels, written on the `content` part while the section is open. */
+  "--accordion-content-height"?: (string) | undefined;
   /** The width of an axis, in `ch`, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high. */
   "--bar-chart-axis"?: (string) | undefined;
   /** The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to. */
@@ -14464,6 +15198,12 @@ export type CustomCssProperties = {
   "--heatmap-tone-success"?: (string) | undefined;
   /** The color of the `warning` tone. */
   "--heatmap-tone-warning"?: (string) | undefined;
+  /** How far the zoomed item is moved across from the middle of the viewport, in pixels, toward the right. Written only while zoomed. */
+  "--lightbox-pan-x"?: (string) | undefined;
+  /** How far the zoomed item is moved down from the middle of the viewport, in pixels. Written only while zoomed. */
+  "--lightbox-pan-y"?: (string) | undefined;
+  /** The scale the shown item is zoomed to, such as `2`. Written only while zoomed. */
+  "--lightbox-zoom"?: (string) | undefined;
   /** Where a series' last reading sits horizontally, as a percentage. Written by the component. */
   "--chart-terminus-x"?: (string) | undefined;
   /** Where a series' last reading sits vertically, as a percentage. Written by the component. */
@@ -14474,6 +15214,14 @@ export type CustomCssProperties = {
   "--list-step"?: (string) | undefined;
   /** How far the needle turns to point north, as an angle. The frame writes it from `bearing`. */
   "--map-needle-turn"?: (string) | undefined;
+  /** The height of the panel this one took over from, written on the surface while it is open. */
+  "--megamenu-from-block-size"?: (string) | undefined;
+  /** The width of the panel this one took over from, written on the surface while it is open. */
+  "--megamenu-from-inline-size"?: (string) | undefined;
+  /** The panel's own height, written on the surface while it is open. */
+  "--megamenu-surface-block-size"?: (string) | undefined;
+  /** The panel's own width, written on the surface while it is open. */
+  "--megamenu-surface-inline-size"?: (string) | undefined;
   /** Where the panel starts, measured from the bar above it. */
   "--megamenu-top"?: (string) | undefined;
   /** Where a bound sits on the arc, as a length along it. */
@@ -14508,16 +15256,18 @@ export type CustomCssProperties = {
   "--scroll-area-thumb-fraction"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. */
   "--slider-fraction"?: (string) | undefined;
-  /** Where a range's filled span starts, as a fraction of the track, 0 to 1. */
+  /** Where the filled span starts, as a fraction of the track, 0 to 1: a range's lower thumb, or a single thumb's `origin`. */
   "--slider-from"?: (string) | undefined;
   /** Where one marker sits, as a percentage of the track. */
   "--slider-marker-at"?: (string) | undefined;
-  /** Where a range's filled span ends, as a fraction of the track, 0 to 1. */
+  /** Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`. */
   "--slider-to"?: (string) | undefined;
   /** Where a nested splitter crosses this one, as a percentage. */
   "--splitter-corner-at"?: (string) | undefined;
   /** Where the divider sits, as a percentage of the box. */
   "--splitter-position"?: (string) | undefined;
+  /** How far through the sequence is, as a percentage, written on the `progress` part. */
+  "--steps-progress"?: (string) | undefined;
   /** The text alignment of the column above the cell: `start`, `center`, or `end`, and unset when the column sets none. The table writes it, and the stylesheet that draws the cell reads it for `justify-content` and `text-align`, which both follow the writing direction. */
   "--table-cell-align"?: (string) | undefined;
   /** The column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set `columns` to change the tracks. */
@@ -14526,6 +15276,14 @@ export type CustomCssProperties = {
   "--toast-duration"?: (string) | undefined;
   /** How far a swipe has moved the message across, in pixels, toward the right. */
   "--toast-swipe-x"?: (string) | undefined;
+  /** The lit box's height, in pixels, padding included. Written on the spotlight while it lights a target. */
+  "--tour-spotlight-height"?: (string) | undefined;
+  /** The lit box's width, in pixels, padding included. Written on the spotlight while it lights a target. */
+  "--tour-spotlight-width"?: (string) | undefined;
+  /** The lit box's left edge, from the window's left edge, in pixels. Written on the spotlight while it lights a target. */
+  "--tour-spotlight-x"?: (string) | undefined;
+  /** The lit box's top edge, from the window's top edge, in pixels. Written on the spotlight while it lights a target. */
+  "--tour-spotlight-y"?: (string) | undefined;
   /** How deep this row sits, counting from one as `aria-level` does, for the indent. */
   "--tree-level"?: (string) | undefined;
   /** The media's own aspect ratio, once it is known. `--video-aspect-ratio` overrides it. */
@@ -14540,25 +15298,25 @@ export type CustomCssProperties = {
 // Note: Some tooling expects this augmentation under "@vue/runtime-core", while
 // other docs/examples use "vue". We emit both for compatibility.
 export interface WcToolkitVueGlobalComponents {
-  /** Holds its own open state. Used alone, outside an accordion, it works as a disclosure.  The trigger sits inside a heading, so a screen reader lists the section with the page's headings. The level is the item's 'heading-level', then the accordion's, then 3.  Content stays mounted when the item is closed, so it can animate and its text is present in server-rendered HTML. Closed content has both 'hidden' and 'inert'. 'hidden' collapses it when no stylesheet is loaded. 'inert' keeps it out of the tab order and the accessibility tree after the styled tier's 'display' overrides 'hidden'.  Set 'hidden-until-found' and the browser's find in page searches a closed section too: a match opens it, with 'helix-before-open' first, as React Aria's disclosure does. The content is then 'hidden="until-found"' while closed, and not 'inert', since an inert region is never searched. */
+  /** Holds its own open state. Used alone, outside an accordion, it works as a disclosure.  The trigger sits inside a heading, so a screen reader lists the section with the page's headings. The level is the item's 'heading-level', then the accordion's, then 3.  Content stays mounted when the item is closed, so it can animate and its text is present in server-rendered HTML. Closed content has both 'hidden' and 'inert'. 'hidden' collapses it when no stylesheet is loaded. 'inert' keeps it out of the tab order and the accessibility tree after the styled tier's 'display' overrides 'hidden'.  While it is open, the content part carries the content's height as '--accordion-content-height', as Radix's accordion does, for a stylesheet that animates the section open with keyframes of its own.  Set 'hidden-until-found' and the browser's find in page searches a closed section too: a match opens it, with 'helix-before-open' first, as React Aria's disclosure does. The content is then 'hidden="until-found"' while closed, and not 'inert', since an inert region is never searched. */
   "helix-headless-accordion-item": DefineCustomElement<
     HelixHeadlessAccordionItem,
     HelixHeadlessAccordionItemVueProps,
     HelixHeadlessAccordionItemVueEvents
   >;
-  /** Holds the mode. Each item coordinates itself: when you click an item, it finds the nearest accordion, reads the mode, and closes the other items.  The accordion does not listen for items opening. 'helix-before-open' does not bubble and is not composed, because overlays nest and an inner overlay's events must stay separate from the outer one's.  Items are found when they are clicked, so there is no registry to keep up to date. An item added after render coordinates on its first click. Items are matched with 'instanceof HelixHeadlessAccordionItem', so the headless tier does not depend on the styled tier's tag names.  The keyboard listener belongs to the controller and is attached on connect, so it does not run on the server.  Each trigger sits inside a heading, level 3 unless 'heading-level' says otherwise, so the sections are in a screen reader's list of headings. Set the level that fits the page's outline. */
+  /** Holds the mode. Each item coordinates itself: when you click an item, it finds the nearest accordion, reads the mode, and closes the other items.  The accordion does not listen for items opening. 'helix-before-open' does not bubble and is not composed, because overlays nest and an inner overlay's events must stay separate from the outer one's.  Items are found when they are clicked, so there is no registry to keep up to date. An item added after render coordinates on its first click. Items are matched with 'instanceof HelixHeadlessAccordionItem', so the headless tier does not depend on the styled tier's tag names.  Keys, on a trigger: Up and Down Arrow move to the previous and the next trigger, and so do Left and Right, wrapping at the ends; Home and End go to the first and the last. Enter and Space open and close the section. Disabled sections are passed over.  Each trigger is a button with 'aria-expanded' and 'aria-controls', inside a heading, level 3 unless 'heading-level' says otherwise, so the sections are in a screen reader's list of headings. An open section is a region named by its trigger. Set the level that fits the page's outline. */
   "helix-headless-accordion": DefineCustomElement<
     HelixHeadlessAccordion,
     HelixHeadlessAccordionVueProps,
     HelixHeadlessAccordionVueEvents
   >;
-  /** An announcement is a banner above the page header with news about the whole site or session, such as a trial ending, a degraded service, or a change of terms. For a passage inside a document, use 'Callout', which stays where it is placed and cannot be dismissed.  The announcement is always a polite live region, whatever its 'tone'. 'role="alert"' is assertive and interrupts a screen reader, so an announcement served with the page would interrupt on every page load.  The live region is its own part. When the announcement appears after the page has loaded, the message is written into the region one frame later, so screen readers read it reliably, and the region is emptied seven seconds later, so the message is not in the page twice. When the announcement is in the served HTML, the region stays empty and nothing is read out.  The dismiss button fires 'helix-dismiss', and the announcement stays in the document, so remove it in your listener. The event is cancelable, and 'dismiss()' returns 'false' when a listener calls 'preventDefault()'. When your listener removes an announcement whose dismiss button has focus, focus moves to the dismiss button of the announcement beside it. With no other announcement beside it, move focus yourself, for example to the page's main heading.  Set 'duration' to dismiss it after a time. The clock stops while the pointer or focus is on the announcement, and continues from what was left, so a reader partway through is not cut off. When the time runs out it sends 'helix-dismiss', as the button does. */
+  /** An announcement is a banner above the page header with news about the whole site or session, such as a trial ending, a degraded service, or a change of terms. For a passage inside a document, use 'Callout', which stays where it is placed and cannot be dismissed.  The announcement is always a polite live region, whatever its 'tone'. 'role="alert"' is assertive and interrupts a screen reader, so an announcement served with the page would interrupt on every page load.  The live region is its own part. When the announcement appears after the page has loaded, the message is written into the region one frame later, so screen readers read it reliably, and the region is emptied seven seconds later. While the region holds the copy, the message itself is hidden from screen readers, so it is in the page once. When the announcement is in the served HTML, the region stays empty and nothing is read out.  The dismiss button fires 'helix-dismiss', and the announcement stays in the document, so remove it in your listener. The event is cancelable, and 'dismiss()' returns 'false' when a listener calls 'preventDefault()'. When your listener removes an announcement whose dismiss button has focus, focus moves to the dismiss button of the announcement beside it. With no other announcement beside it, move focus yourself, for example to the page's main heading.  Set 'duration' to dismiss it after a time. The clock stops while the pointer or focus is on the announcement, and continues from what was left, so a reader partway through is not cut off. When the time runs out it sends 'helix-dismiss', as the button does. */
   "helix-headless-announcement": DefineCustomElement<
     HelixHeadlessAnnouncement,
     HelixHeadlessAnnouncementVueProps,
     HelixHeadlessAnnouncementVueEvents
   >;
-  /** Tracks whether the page has scrolled and sets the custom state 'scrolled', so the styled tier can lift the bar without a scroll handler of its own. The state is read when the element connects. A fresh load starts at the top, which matches the server markup, and a reload partway down the page is corrected on hydration.  The element uses a custom state because an attribute such as 'data-scrolled', written onto its own host, is one the server did not send. A hydrating framework would report a mismatch whenever the page reloads far enough down. 'ElementInternals.states' is not in the DOM, so hydration has nothing to compare. Select the state with ':state(scrolled)'.  The page is the window unless 'scroller' names the element that scrolls, for an app shell whose content scrolls inside a container.  The host is the page's 'banner' landmark. Placed inside 'main', 'article', 'aside', 'nav' or 'section', it is a plain box instead, as a native '<header>' is there, so a header inside a card or a pane does not add a second banner. A server cannot see the ancestors, so it serves the banner and the browser corrects it when the element connects. */
+  /** Tracks whether the page has scrolled and sets the custom state 'scrolled', so the styled tier can lift the bar without a scroll handler of its own. The state is read when the element connects. A fresh load starts at the top, which matches the server markup, and a reload partway down the page is corrected on hydration.  The element uses a custom state because an attribute such as 'data-scrolled', written onto its own host, is one the server did not send. A hydrating framework would report a mismatch whenever the page reloads far enough down. 'ElementInternals.states' is not in the DOM, so hydration has nothing to compare. Select the state with ':state(scrolled)'.  The page is the window unless 'scroller' names the element that scrolls, for an app shell whose content scrolls inside a container.  The host is the page's 'banner' landmark. Placed inside 'main', 'article', 'aside', 'nav' or 'section', it is a plain box instead, as a native '<header>' is there, so a header inside a card or a pane does not add a second banner. The ancestors are read as the accessibility tree reads them, through the slots that take the header in, so one slotted into a component that draws a '<nav>', such as 'Navigation', is not a banner either. A server cannot see the ancestors, so it serves the banner and the browser corrects it when the element connects. */
   "helix-headless-app-header": DefineCustomElement<
     HelixHeadlessAppHeader,
     HelixHeadlessAppHeaderVueProps,
@@ -14570,7 +15328,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAreaChartVueProps,
     HelixHeadlessAreaChartVueEvents
   >;
-  /** A part of 'Avatar' that arranges avatars.  The group computes the overflow count from 'max' and renders the "+3" itself. There is no slot for it, because the number has to match which avatars are hidden.  Avatars past 'max' stay in the DOM and are hidden. The group writes 'hidden' on each of them, so they are hidden on the headless tier as well, and the count is read out as 'overflow-label', such as "3 more", so a screen reader hears that there are more people than the ones it can reach. */
+  /** A part of 'Avatar' that arranges avatars.  The group computes the overflow count from 'max' and renders the "+3" itself. There is no slot for it, because the number has to match which avatars are hidden.  Avatars past 'max' stay in the DOM and are hidden. The group writes 'hidden' on each of them, so they are hidden on the headless tier as well, and at any 'max'. The count is read out as 'overflow-label', such as "3 more: Grace Hopper, Alan Turing, Barbara Liskov", so a screen reader hears who is there past the ones it can reach. */
   "helix-headless-avatar-group": DefineCustomElement<
     HelixHeadlessAvatarGroup,
     HelixHeadlessAvatarGroupVueProps,
@@ -14606,19 +15364,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessBreadcrumbVueProps,
     HelixHeadlessBreadcrumbVueEvents
   >;
-  /** The host is the navigation landmark, named "Breadcrumb" by default. An 'aria-label' on the host names the trail instead, and so does 'label'. When a page has more than one navigation landmark, screen reader users choose between them by name.  The '<ol>' has an explicit 'role="list"', because Safari removes list semantics from a list with 'list-style: none', and the trail always hides its markers.  The items are slotted directly, so they are '<ol>' children in the flat tree, and each item sets 'role="listitem"' on itself.  The trail does not measure itself, and you write its overflow in markup: put the crumb that holds the folded items where the gap should appear.  A trail built from data, such as a router's matched routes, takes 'items': an array of '{ label, href }', drawn as crumbs in order, the last one as the current page. Slotted crumbs follow them. Use one way or the other in a trail. */
+  /** The host is the navigation landmark, named "Breadcrumb" by default. An 'aria-label' on the host names the trail instead, and so does 'label'. When a page has more than one navigation landmark, screen reader users choose between them by name.  The '<ol>' has an explicit 'role="list"', because Safari removes list semantics from a list with 'list-style: none', and the trail always hides its markers.  The items are slotted directly, so they are '<ol>' children in the flat tree, and each item sets 'role="listitem"' on itself.  The trail does not measure itself, and you write its overflow in markup: put the crumb that holds the folded items where the gap should appear.  A trail built from data, such as a router's matched routes, takes 'items': an array of '{ label, href }', drawn as crumbs in order, the last one as the current page. Slotted crumbs follow them. Use one way or the other in a trail.  With 'max-items', a trail drawn from 'items' that is longer folds its middle into one crumb: the first crumb, a button, then the last 'max-items' less one. The button is named by 'expand-label' and shows the whole trail, moving focus to the first crumb it brought back. A new 'items' folds again. Slotted crumbs do not fold; write the folded crumb where the gap should be. */
   "helix-headless-breadcrumbs": DefineCustomElement<
     HelixHeadlessBreadcrumbs,
     HelixHeadlessBreadcrumbsVueProps,
     HelixHeadlessBreadcrumbsVueEvents
   >;
-  /** Sets 'role="group"' on the host through internals, and 'label' names the group. Without a name, a screen reader announces the buttons as separate controls.  The group does not manage focus, so each button keeps its own tab stop. For one tab stop with arrow keys between the buttons, the APG toolbar pattern, use Toolbar.  Buttons are slotted, so they stay your own elements and keep their own appearance and size. */
+  /** Sets 'role="group"' on the host through internals, and 'label' names the group. Without a name, a screen reader announces the buttons as separate controls, and a development build warns once with the kind 'missing-name'.  The group does not manage focus, so each button keeps its own tab stop. For one tab stop with arrow keys between the buttons, the APG toolbar pattern, use Toolbar.  Buttons are slotted, so they stay your own elements and keep their own appearance and size. */
   "helix-headless-button-group": DefineCustomElement<
     HelixHeadlessButtonGroup,
     HelixHeadlessButtonGroupVueProps,
     HelixHeadlessButtonGroupVueEvents
   >;
-  /** Renders a real '<button>', so activation, focus, and other browser behavior come from the platform.  **It never renders an anchor.** A router renders its own '<a>' to intercept a click, and it cannot render one inside the button's shadow root. For a link that looks like a button, use the base layer recipe on your own anchor: '<Link data-button="solid">' draws the same control.  'delegatesFocus' moves focus to the inner control. It is serialized into the server markup, so the button is reachable by keyboard before any JavaScript loads.  The inner control is always 'type="button"', because a '<button type="submit">' inside a shadow root cannot submit a form outside it. To submit, the button calls 'requestSubmit()' on its form, which runs validation, unlike 'submit()'.  A 'submit' listener reads 'event.submitter' as 'null', because the platform accepts only a native submit button there. The button's 'name' and 'value' are in the form data, so read them from 'new FormData(form)' to tell two submit buttons apart.  As the first submit button in its form, it is the form's default button: Enter in a text field of the form presses it, as it presses a native one.  Set 'pending' while the action a press started is still running. The button keeps focus and refuses presses, and a reader on it hears 'pending-label'. */
+  /** Renders a real '<button>', so activation, focus, and other browser behavior come from the platform.  **It never renders an anchor.** A router renders its own '<a>' to intercept a click, and it cannot render one inside the button's shadow root. For a link that looks like a button, use the base layer recipe on your own anchor: '<Link data-button="solid">' draws the same control.  'delegatesFocus' moves focus to the inner control. It is serialized into the server markup, so the button is reachable by keyboard before any JavaScript loads.  The inner control is always 'type="button"', because a '<button type="submit">' inside a shadow root cannot submit a form outside it. To submit, the button calls 'requestSubmit()' on its form, which runs validation, unlike 'submit()'.  A 'submit' listener reads 'event.submitter' as 'null', because the platform accepts only a native submit button there. The button's 'name' and 'value' are in the form data, so read them from 'new FormData(form)' to tell two submit buttons apart.  As the first submit button in its form, it is the form's default button: Enter in a text field of the form presses it, as it presses a native one.  Set 'pending' while the action a press started is still running. The button keeps focus and refuses presses, and a reader on it hears 'pending-label'.  Every press that acts sends 'helix-press' with what pressed it in 'detail.pointerType': 'mouse', 'pen', 'touch', 'keyboard', or 'virtual' for a screen reader's press or a script's 'click()', as React Aria's 'onPress' does. It is sent once the press has done its own work, before 'click' reaches listeners on the element, and never for a disabled or pending button.  **Keyboard.** Enter and Space press the button, as on a native one. */
   "helix-headless-button": DefineCustomElement<
     HelixHeadlessButton,
     HelixHeadlessButtonVueProps,
@@ -14648,13 +15406,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasVueProps,
     HelixHeadlessCanvasVueEvents
   >;
-  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with 'aria-label' or 'aria-labelledby'. These are the only names that work with server rendering, because reading a title from the light DOM needs a DOM, and the server has none. **A named card is a group**, so a reader entering it hears its name; an unnamed one has no role, since a group with no name only adds "group" to what a reader says.  'header-actions' and 'footer-actions' hold controls at the end of the header's and the footer's line, as Web Awesome's card does. While one holds something, its line is a 'header-row' or 'footer-row' part; otherwise there is no wrapper and every region is a bare slot. A server cannot see slotted content, so served actions sit on their own line until the script runs. */
+  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with 'label', as a Stat Group is named, or with 'aria-label' or 'aria-labelledby'. These are the only names that work with server rendering, because reading a title from the light DOM needs a DOM, and the server has none. 'label' is set through 'ElementInternals', so it writes no attribute onto the card. **A named card is a group**, so a reader entering it hears its name; an unnamed one has no role, since a group with no name only adds "group" to what a reader says.  Each region's slot is a part of the same name, 'body' for the main content, as Web Awesome's card names its regions. A slot draws no box, so a part passes inherited properties to what is slotted, and a page wanting a box there gives it one with 'display'.  'header-actions' and 'footer-actions' hold controls at the end of the header's and the footer's line, as Web Awesome's card does. While one holds something, its line is a 'header-row' or 'footer-row' part; otherwise there is no wrapper and every region is a bare slot. A server cannot see slotted content, so served actions sit on their own line until the script runs. */
   "helix-headless-card": DefineCustomElement<
     HelixHeadlessCard,
     HelixHeadlessCardVueProps,
     HelixHeadlessCardVueEvents
   >;
-  /** The track is a scroll container with scroll snapping, so dragging, trackpad swipes, and the browser's momentum scrolling all work. The controls scroll the track.  Slides are your own elements, and the carousel writes nothing onto them. It renders a pane for each slide with 'role="group"', 'aria-roledescription="slide"', and a name that gives the slide's position in the set, and assigns the slide into it. A screen reader announces the position, and a slide that is a link stays a link. See 'assign'.  **Rotation stops on focus and on hover, and stays stopped** until the user starts it again, as the APG requires. The rotation control is labeled with the action it performs and is first in the tab order. Rotation goes on from the last slide to the first, with or without 'loop', which is about the reader's own moves.  A move the reader makes is announced, the slide's position read from a polite live region. While the carousel rotates the region is off, so a screen reader is not interrupted every few seconds.  The indicators are one tab stop. The arrow keys along the track move between them, Up and Down on a vertical carousel, and Home and End go to the first and the last. Without 'loop', Previous on the first slide and Next on the last are marked 'aria-disabled'.  **'mouse-drag' lets a mouse drag the track**, which otherwise only a touch screen, a trackpad, or the scroll wheel moves. The drag follows the pointer with snapping off and settles on the nearest slide when it is let go, and that move is announced and refusable like a press of Next. A link in a slide is not followed at the end of a drag.  The glyphs on Previous and Next can be replaced by slotting an icon of your own into 'previous-icon' and 'next-icon'. */
+  /** The track is a scroll container with scroll snapping, so dragging, trackpad swipes, and the browser's momentum scrolling all work. The controls scroll the track.  Slides are your own elements, and the carousel writes nothing onto them. It renders a pane for each slide with 'role="group"', 'aria-roledescription="slide"', and a name that gives the slide's position in the set, and assigns the slide into it. A screen reader announces the position, and a slide that is a link stays a link. See 'assign'.  **Rotation stops on focus and on hover, and stays stopped** until the user starts it again, as the APG requires. The rotation control is labeled with the action it performs and is first in the tab order. Rotation goes on from the last slide to the first, with or without 'loop', which is about the reader's own moves.  A move the reader makes is announced, the slide's position read from a polite live region. While the carousel rotates the region is off, so a screen reader is not interrupted every few seconds.  **Keyboard.** The indicators are one tab stop.  | Key | What it does | |---|---| | Tab | Moves through the rotation control, Previous, Next, the slides' own links and buttons, and the indicators, in that order. | | Enter, Space | Presses the control or the indicator that has focus. | | Right, Left | On an indicator, moves to the next or the previous slide and its indicator. Left moves on, on a right-to-left page. | | Down, Up | The same, on a vertical carousel. | | Home, End | On an indicator, moves to the first or the last slide. |  Without 'loop', Previous on the first slide and Next on the last are marked 'aria-disabled', and keep focus.  **What a screen reader hears.** The carousel is a group named by 'label', announced as 'role-label' ("carousel"). Each slide is a group announced as 'slide-role-label' ("slide") and named by 'slide-label' ("2 of 5"). After a move by a control, an indicator, a key, or a drag, the 'live' part says the slide's name politely. While the carousel rotates the region is off.  **'slides-per-move' moves several slides at a time.** With 'per-view="3"' and 'slides-per-move="3"', Next shows the next three, there is one indicator for each stop, and the track snaps only at the stops. The last stop is always the end of the run, so a run that does not divide evenly ends on its last slides. Unset moves one slide.  **'mouse-drag' lets a mouse drag the track**, which otherwise only a touch screen, a trackpad, or the scroll wheel moves. The drag follows the pointer with snapping off and settles on the nearest slide when it is let go, and that move is announced and refusable like a press of Next. A link in a slide is not followed at the end of a drag.  The glyphs on Previous and Next can be replaced by slotting an icon of your own into 'previous-icon' and 'next-icon'. */
   "helix-headless-carousel": DefineCustomElement<
     HelixHeadlessCarousel,
     HelixHeadlessCarouselVueProps,
@@ -14672,25 +15430,25 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessChatMessageVueProps,
     HelixHeadlessChatMessageVueEvents
   >;
-  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened.  Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own.  **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. Show the other side's typing in the 'status' slot.  A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'.  A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, pass the turns as children. */
+  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened.  Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own.  **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. When the other side types, set 'typing' to their name: the status band draws three dots and "Ada is typing" ('typing-label'), which a screen reader hears, and clearing it takes them away. Anything slotted into 'status' is drawn first.  A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn with neither an author label nor a time is named by 'turn-label', "Message".  A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, pass the turns as children. */
   "helix-headless-chat": DefineCustomElement<
     HelixHeadlessChat,
     HelixHeadlessChatVueProps,
     HelixHeadlessChatVueEvents
   >;
-  /** The host is the group. It has 'role="group"' through internals, and 'label' names it. Without a name, screen readers announce the checkboxes as separate controls.  **Each checkbox submits its own value.** Checkboxes are already form-associated, and a native group is several inputs that share a name, so the group adds no form value of its own. It adds the grouping, a shared 'name' that you write once, and one place to read and write the whole set.  'value' is the checked values, separated by commas, in the order the checkboxes are written, read from the boxes themselves. Setting it checks exactly those values and unchecks the rest.  'select-all' draws a box above the set that checks every enabled box, or unchecks them all once every one is checked. It shows a dash while only some are checked, and changes the set through the same cancelable 'helix-before-change' a box does.  A checkbox is a member wherever it sits inside the group, in a row or a grid cell of your own, unless another group inside this one holds it. A field of another kind inside the group, such as an "Other" text field, sends its own 'input' and 'change' past the group.  **The group shows the message you set in 'feedback'.** It is form-associated only for validity and never calls 'setFormValue', so the browser does not generate a message for it. */
+  /** The host is the group. It has 'role="group"' through internals, and 'label' names it. Without a name, screen readers announce the checkboxes as separate controls.  **Each checkbox submits its own value.** Checkboxes are already form-associated, and a native group is several inputs that share a name, so the group adds no form value of its own. It adds the grouping, a shared 'name' that you write once, and one place to read and write the whole set.  'value' is the checked values, separated by commas, in the order the checkboxes are written, read from the boxes themselves. Setting it checks exactly those values and unchecks the rest.  'select-all' draws a box above the set that checks every enabled box, or unchecks them all once every one is checked. It shows a dash while only some are checked, and changes the set through the same cancelable 'helix-before-change' a box does.  A checkbox is a member wherever it sits inside the group, in a row or a grid cell of your own, unless another group inside this one holds it. A field of another kind inside the group, such as an "Other" text field, sends its own 'input' and 'change' past the group.  **The group shows the message you set in 'feedback'.** It is form-associated only for validity and never calls 'setFormValue', so the browser does not generate a message for it.  **Keyboard.** Each box is its own tab stop, as a set of native checkboxes is, and Space checks the focused one. The select-all box comes first. */
   "helix-headless-checkbox-group": DefineCustomElement<
     HelixHeadlessCheckboxGroup,
     HelixHeadlessCheckboxGroupVueProps,
     HelixHeadlessCheckboxGroupVueEvents
   >;
-  /** Renders a native '<input type="checkbox">', so the Space key, the focus ring, and the indeterminate glyph come from the platform. 'delegatesFocus' sends focus to the input, and the input is in the server-rendered markup, so the control works before any script loads.  An input inside a shadow root does not submit with a form. The host is form-associated and uses 'ElementInternals' for its value, its validity, and form reset.  A checked box submits its 'value', and an unchecked one submits nothing, as a native checkbox does.  'indeterminate' changes only the presentation. Assistive technology reports it as neither checked nor unchecked, it never submits, and the first click resolves it. */
+  /** Renders a native '<input type="checkbox">', so the Space key, the focus ring, and the indeterminate glyph come from the platform. 'delegatesFocus' sends focus to the input, and the input is in the server-rendered markup, so the control works before any script loads.  An input inside a shadow root does not submit with a form. The host is form-associated and uses 'ElementInternals' for its value, its validity, and form reset.  A checked box submits its 'value', and an unchecked one submits nothing, as a native checkbox does.  'indeterminate' changes only the presentation. Assistive technology reports it as neither checked nor unchecked, it never submits, and the first click resolves it.  **Keyboard.** The box is one tab stop.  | Key | What it does | |---|---| | Space | Checks or unchecks the box, and resolves 'indeterminate'. |  The native input reports checked, unchecked, or mixed. 'aria-readonly' is set under 'readonly', and 'aria-invalid' and 'aria-describedby' point at the message while one shows. */
   "helix-headless-checkbox": DefineCustomElement<
     HelixHeadlessCheckbox,
     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 '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; the code stays in the slot, so the copy button and the page's own text are the code as written.  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. 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.  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 '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; 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, 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. 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.  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. */
   "helix-headless-code-block": DefineCustomElement<
     HelixHeadlessCodeBlock,
     HelixHeadlessCodeBlockVueProps,
@@ -14708,7 +15466,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessColorInputVueProps,
     HelixHeadlessColorInputVueEvents
   >;
-  /** The picker on its own, with no field around it, for a settings pane or a toolbar. Color Input shows this element in a panel behind a text field.  The saturation and brightness square is two '<input type="range">' elements, laid over the square and made invisible, and the handle is drawn from their values. The keyboard behavior, the announcements, and the touch targets come from the platform, and there is no 'role="application"'.  The picker works in HSB and derives the value from it. A value set from outside is read into the model once. Black is 'brightness: 0', which has no hue or saturation, so a model read back from the value would turn red into gray after you drag to the bottom of the square and back.  The square is one tab stop. In it, the up and down arrows move brightness and the left and right arrows move saturation, and PageUp and PageDown move brightness by ten. The picker sends 'input' as the color moves and 'change' when a drag, a key, a typed value or a preset settles it, as '<input type="color">' does.  A screen reader hears the color's name, such as "vibrant red", after the two numbers on the square and after the number on the hue ramp, and each preset is named by its color. Set 'color-words' to speak the names in another language. */
+  /** The picker on its own, with no field around it, for a settings pane or a toolbar. Color Input shows this element in a panel behind a text field.  The saturation and brightness square is two '<input type="range">' elements, laid over the square and made invisible, and the handle is drawn from their values. The keyboard behavior, the announcements, and the touch targets come from the platform, and there is no 'role="application"'.  The picker works in HSB and derives the value from it. A value set from outside is read into the model once. Black is 'brightness: 0', which has no hue or saturation, so a model read back from the value would turn red into gray after you drag to the bottom of the square and back.  The square is one tab stop. In it, the up and down arrows move brightness and the left and right arrows move saturation, and PageUp and PageDown move brightness by ten. The picker sends 'input' as the color moves and 'change' when a drag, a key, a typed value or a preset settles it, as '<input type="color">' does.  A screen reader hears the color's name, such as "vibrant red", after the two numbers on the square and after the number on the hue ramp, and each preset is named by its color. The opacity ramp is heard as a percentage. Set 'color-words' to speak the names in another language.  The presets are a listbox with the current color selected, and one tab stop. The arrow keys move between them, Home and End go to the ends, and Enter, Space or a press chooses one. */
   "helix-headless-color-picker": DefineCustomElement<
     HelixHeadlessColorPicker,
     HelixHeadlessColorPickerVueProps,
@@ -14732,7 +15490,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCopyButtonVueProps,
     HelixHeadlessCopyButtonVueEvents
   >;
-  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  The grid is one tab stop, and the arrow keys move between its cells, the headings included:  - The arrow keys move one cell, and Home and End to the ends of the row. - Control with Home or End moves to the first or the last cell of the grid. - Page Up and Page Down move by the rows that fit in view. - Enter or F2 moves into the cell's controls, and Escape moves back to the   cell. Tab moves between the controls of one cell. - Enter or Space on a sortable heading sorts by it, and Space on a row of a   'selectable' table selects it. - In a 'selectable' table, Shift with Up or Down selects the rows it moves   across, Shift with Space selects every row from the one last chosen, and   Control or Command with A selects every row. - Typing letters moves to the next row whose row header starts with them.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
+  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **The cell values do not server-render.** The headings and the row elements do. Reading a cell needs the columns, and Lit SSR does not pass the column children to this element, so a crawler sees an empty table of the right shape. Use 'Table' when the served HTML has to carry the values.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | 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 heading row and the 'load-more' row 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 grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. | | 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. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
   "helix-headless-data-table": DefineCustomElement<
     HelixHeadlessDataTable,
     HelixHeadlessDataTableVueProps,
@@ -14762,13 +15520,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDescriptionListVueProps,
     HelixHeadlessDescriptionListVueEvents
   >;
-  /** Renders a native '<dialog>' opened with 'showModal()'. The platform provides:  - the top layer, so the dialog is above everything whatever the 'z-index' - a backdrop - closing with Escape - an inert page behind the dialog, unreachable by pointer, keyboard, or   virtual cursor  'open' calls 'showModal()', and every way the dialog closes goes through 'requestOpen'. A native dialog closes three ways: the property, Escape, and a '<form method="dialog">' submit. Routing all three through 'requestOpen' keeps your state in step, so the dialog never closes while your state still says it is open, which would leave it impossible to reopen.  The dialog's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names. While it is open, the page behind it does not scroll.  The dialog is described by the words at the start of its body: the elements in the default slot before the first one that is or holds a control. A question above a form describes the dialog, and the form does not. An 'aria-describedby' on the host replaces it.  Set 'alert' for a dialog that interrupts to ask for an answer, such as a confirmation before a deletion. It is an 'alertdialog', which a screen reader announces with its description as it opens. Set 'dismissible' to draw a close control, labeled by 'dismiss-label'. */
+  /** Renders a native '<dialog>' opened with 'showModal()'. The platform provides:  - the top layer, so the dialog is above everything whatever the 'z-index' - a backdrop - closing with Escape - an inert page behind the dialog, unreachable by pointer, keyboard, or   virtual cursor  The dialog adds one thing to those: 'Tab' from its last control goes to its first, and 'Shift+Tab' from its first to its last. A native modal lets 'Tab' past its last control out to the browser's own controls.  'open' calls 'showModal()', and every way the dialog closes goes through 'requestOpen'. A native dialog closes three ways: the property, Escape, and a '<form method="dialog">' submit. Routing all three through 'requestOpen' keeps your state in step, so the dialog never closes while your state still says it is open, which would leave it impossible to reopen.  The dialog's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names. While it is open, the page behind it does not scroll.  The dialog is described by the words at the start of its body: the elements in the default slot before the first one that is or holds a control. A question above a form describes the dialog, and the form does not. A Helix component that draws words and no control, such as 'Text', counts as words. An 'aria-describedby' on the host replaces it.  Set 'alert' for a dialog that interrupts to ask for an answer, such as a confirmation before a deletion. It is an 'alertdialog', which a screen reader announces with its description as it opens. Set 'dismissible' to draw a close control, labeled by 'dismiss-label'. */
   "helix-headless-dialog": DefineCustomElement<
     HelixHeadlessDialog,
     HelixHeadlessDialogVueProps,
     HelixHeadlessDialogVueEvents
   >;
-  /** The separator role is on the rule inside the shadow root. A role does not need to cross the shadow boundary the way an IDREF does, so it can sit on the rendered element. The semantics are then in the server-rendered markup, with no attribute written by script after the element connects.  Use 'orientation="vertical"' between items on one line, such as inside a toolbar. A vertical divider stretches to fit its flex parent and sets no height of its own. */
+  /** The separator role is on the rule inside the shadow root. A role does not need to cross the shadow boundary the way an IDREF does, so it can sit on the rendered element. The semantics are then in the server-rendered markup, with no attribute written by script after the element connects.  Set 'announced' for a line that divides one thing from another, and it is read as a separator, named by any content set into it.  Use 'orientation="vertical"' between items on one line, such as inside a toolbar. A vertical divider stretches to fit its flex parent and sets no height of its own. */
   "helix-headless-divider": DefineCustomElement<
     HelixHeadlessDivider,
     HelixHeadlessDividerVueProps,
@@ -14780,7 +15538,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDonutChartVueProps,
     HelixHeadlessDonutChartVueEvents
   >;
-  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape, in a browser without 'closedby' as well.  **A touch or a pen swipes it away**, toward the edge it came from, resolved against the writing direction. A swipe past halfway, or a quick one, closes it through the same request as every other way out. 'snap-points' lists the fractions of the panel a reader can leave on screen, such as '0.5 1' for a sheet that rests half open: it opens at the smallest, and a swipe settles at the nearest. While a swipe moves the panel, the distance is written on it as '--drawer-swipe-x' and '--drawer-swipe-y'. 'swipe="false"' turns swiping off.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names.  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> ''' */
+  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape, in a browser without 'closedby' as well.  **A touch or a pen swipes it away**, toward the edge it came from, resolved against the writing direction. A swipe past halfway, or a quick one, closes it through the same request as every other way out. 'snap-points' lists the fractions of the panel a reader can leave on screen, such as '0.5 1' for a sheet that rests half open: it opens at the smallest, and a swipe settles at the nearest. While a swipe moves the panel, the distance is written on it as '--drawer-swipe-x' and '--drawer-swipe-y'. 'swipe="false"' turns swiping off.  'snap' is the snap point the panel rests at, and ':state(snapped)' is on the host while that is less than the whole panel. 'snapTo()' moves it to another. **Focus moving to a control past the window's edge opens the panel to its largest snap point**, so a reader moving through a half open sheet with 'Tab' never lands on a control they cannot see.  Set 'dismissible' to draw a close control in the corner, labeled by 'dismiss-label', as 'Dialog' draws one.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names.  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> ''' */
   "helix-headless-drawer": DefineCustomElement<
     HelixHeadlessDrawer,
     HelixHeadlessDrawerVueProps,
@@ -14792,19 +15550,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDrilldownItemVueProps,
     HelixHeadlessDrilldownItemVueEvents
   >;
-  /** One panel whose content changes as you move between pages. Use it where there is no room for a second column, such as on a phone, or on a touch screen with no hover to open one.  It is a region that stays where you put it, such as inside a drawer, a sidebar, or a settings panel. A 'Menu' opens from a trigger and closes when you are done. 'Menu' can drill into pages too, through the same controller.  Rows are places to go and commands to run. Nothing here is form-associated and nothing is submitted. To choose a value, use a 'Listbox'.  A row that opens a page contains that page, so the stack holds one reference and reads the rest from the DOM. The behavior lives in 'DrilldownController', which 'Menu' shares.  After each move the host carries 'data-direction', 'forward' into a page or 'back' out of one, so a stylesheet can slide the new page in from the side the reader is going. The styled tier does, and holds still under reduced motion.  The rows of the page showing are a 'menu', named by 'label' on the top page and by the page's title below it. The back button and the title sit above the menu. Disabled rows stay reachable with the arrow keys, and typing a letter moves to the next row whose name starts with it. */
+  /** One panel whose content changes as you move between pages. Use it where there is no room for a second column, such as on a phone, or on a touch screen with no hover to open one.  It is a region that stays where you put it, such as inside a drawer, a sidebar, or a settings panel. A 'Menu' opens from a trigger and closes when you are done. 'Menu' can drill into pages too, through the same controller.  Rows are places to go and commands to run. Nothing here is form-associated and nothing is submitted. To choose a value, use a 'Listbox'.  A row that opens a page contains that page, so the stack holds one reference and reads the rest from the DOM. The behavior lives in 'DrilldownController', which 'Menu' shares.  After each move the host carries 'data-direction', 'forward' into a page or 'back' out of one, and records ':state(forward)' or ':state(back)', so a stylesheet can slide the new page in from the side the reader is going. Both are written again on every move, so an animation keyed on them runs for each page, two moves the same way included. The styled tier slides the page and swaps it at once under 'prefers-reduced-motion'.  Keys, on a row: Up and Down Arrow move between the rows, Home and End go to the first and the last, and a typed letter moves to the next row whose name starts with it. Enter, Space, or Right Arrow opens a row's page, and Left Arrow or Escape goes back, the two arrows swapping on a right-to-left page.  The rows of the page showing are a 'menu', named by 'label' on the top page and by the page's title below it. The back button and the title sit above the menu. Disabled rows stay reachable with the arrow keys, and typing a letter moves to the next row whose name starts with it. */
   "helix-headless-drilldown": DefineCustomElement<
     HelixHeadlessDrilldown,
     HelixHeadlessDrilldownVueProps,
     HelixHeadlessDrilldownVueEvents
   >;
-  /** Shows what would be in a region and the one action that would fill it, so an empty region does not look like one that failed to load.  The message is announced, because an empty view often replaces content that was loading, and the announcement tells a screen reader user that the search returned nothing. It is announced from a status region of its own, which is rendered empty and filled a frame after the view appears. Screen readers read a region that arrives with its text already in it inconsistently.  Every region is a bare slot. There is no 'empty-state-heading' or 'empty-state-actions' element: assign your own heading and actions to the slots. */
+  /** Shows what would be in a region and the one action that would fill it, so an empty region does not look like one that failed to load.  The message is announced, because an empty view often replaces content that was loading, and the announcement tells a screen reader user that the search returned nothing. It is announced from a status region of its own, which is rendered empty and filled a frame after the view appears. Screen readers read a region that arrives with its text already in it inconsistently. For the seven seconds the region holds its copy, the heading and the message are hidden from screen readers, so the words are in the page once.  Every region is a bare slot. There is no 'empty-state-heading' or 'empty-state-actions' element: assign your own heading and actions to the slots. */
   "helix-headless-empty": DefineCustomElement<
     HelixHeadlessEmpty,
     HelixHeadlessEmptyVueProps,
     HelixHeadlessEmptyVueEvents
   >;
-  /** File Input keeps a real '<input type="file">' and makes it invisible. Only a file input opens the file picker: the browser opens it for a click on the input or on a '<label>' that points at it, and a script cannot open it on its own. A custom button would still call '.click()' on a hidden input, and a screen reader would find two controls.  The input holds the label, the name, the validity, and the focus, and the visible trigger is a '<label for>'. The label is not focusable. The input is, and Enter and Space on it open the picker.  Files arrive from the picker, a drop, or a paste onto the field, and each one is screened: 'accept', 'max-file-size', 'max-files' and your own 'validate' can refuse it. A refused file is left out, 'helix-reject' lists each one with its reason, and a reader hears 'rejected-text' with the names filled in. 'directory' asks the picker for a folder. */
+  /** File Input keeps a real '<input type="file">' and makes it invisible. Only a file input opens the file picker: the browser opens it for a click on the input or on a '<label>' that points at it, and a script cannot open it on its own. A custom button would still call '.click()' on a hidden input, and a screen reader would find two controls.  The input holds the label, the name, the validity, and the focus, and the visible trigger is a '<label for>'. The label is not focusable. The input is, and Enter and Space on it open the picker.  Files arrive from the picker, a drop, or a paste onto the field, and each one is screened: 'accept', 'max-file-size', 'max-files' and your own 'validate' can refuse it. A refused file is left out, 'helix-reject' lists each one with its reason, and a reader hears 'rejected-text' with the names filled in. A reader also hears 'added-text' for the files a drop or a paste adds, and 'removed-text' for a file a remove button takes out, since neither moves focus or says anything on its own. 'directory' asks the picker for a folder. 'transformFiles' changes the files a field takes before it holds them, such as shrinking an image.  Each chosen file is a row: its name, its size and type as tags, and a remove button. 'renderFile' draws the row's details your own way, and the 'remove-icon' slot replaces the button's icon.  **Keyboard.** The input is the tab stop, and each file's remove button is one more.  | Key | What it does | |---|---| | Enter, Space | On the input, opens the picker. On a remove button, removes that file and moves focus to the button of the file in its place, or back to the input. | | Control+V, Command+V | Takes files from the clipboard, as a drop does. | */
   "helix-headless-file-input": DefineCustomElement<
     HelixHeadlessFileInput,
     HelixHeadlessFileInputVueProps,
@@ -14834,7 +15592,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFilterOperatorVueProps,
     HelixHeadlessFilterOperatorVueEvents
   >;
-  /** Tokens are your own elements, slotted in. A filter can be a facet with a prefix, a saved query, or a range, and these belong to your model, so the element does not render tokens from a list of strings. Removing a token is a request the element fires, and you apply it. Combobox works the other way: its tokens show a selection it owns, drawn from the options it was given.  'value' is the typed text. Every keystroke fires 'input' with the text on the element, so a table can narrow as the user types. A form receives the text under 'name', and then one more entry under 'name' for each token: its 'value' attribute, or for a 'FilterChip', its field and values written 'field:values' as the field reads them typed. Backspace in an empty field fires 'helix-dismiss' on the last token, the same event its remove control fires, so one handler covers the pointer and the keyboard.  **Typed filters.** The field parses only the fields you declare. Write 'FilterField' elements, usually inside the 'FilterMenu' slotted into 'start', so the picker and the text share one set. On Enter, the field reads the text against them. 'disposition:refunded,settled' and '-disposition:refunded' fire 'helix-facet' exactly as ticking those values in the picker would, and the parsed text is removed. Everything else stays, so 'refund tuesday disposition:settled' is a filter and a search at once. Helix defines the punctuation and you define every word. 'grammar.ts' has the full rule, so read it before you rely on it. A field with no 'FilterField' in it parses nothing.  A field whose values cannot be listed, such as 'assignee:ada', goes directly inside this element, outside the menu. It is not assigned to a slot, so nothing draws it and the menu has no page for it, and the grammar still reads it.  **Suggestions.** Slot options into 'suggestions' and the field shows them, moves through them with the arrow keys, and presses one on Enter. The option fires its own 'helix-select', and you decide what choosing it means. Keys before a colon and values after it use the same panel with different contents. 'filter-suggestions' narrows the panel to the options whose words hold the term at the caret, after its colon, ignoring case and accents, and hides the rest. 'readFilterText' is exported so you can narrow it yourself against partly typed text. While the panel is open, a reader hears how many suggestions it offers. The panel opens when it has options and closes when it has none, and a choice does not close it, so after picking a key you see its values next. Use 'selectionStart' and 'setSelectionRange' to write a completion back and put the caret after it, or the next parse reads the wrong term.  **State.** Three things have three different owners:  - 'value' is the text. The user types, the element applies it, and 'input'   reports it. Setting 'value' seeds or corrects the text, and the next   keystroke overwrites it, even in React. To control the value, cancel   'helix-before-change' and write the value you want, as with every field in   this library. 'default-value' seeds the field. - 'open' is the suggestions panel. Cancel 'helix-before-open' or   'helix-before-close' to control it, and use 'default-open' to seed it. - Tokens are your elements in a slot and hold no state. A token goes when you   remove it from your markup after 'helix-dismiss'. A 'FilterChip' naming a   declared field works differently, because the picker holds what is ticked   and removing the chip alone would leave its value ticked in the hidden   menu. Its dismissal is treated as the field being filtered by nothing, so   it fires 'helix-facet' like every other change, and the chip goes when the   filter goes. */
+  /** Tokens are your own elements, slotted in. A filter can be a facet with a prefix, a saved query, or a range, and these belong to your model, so the element does not render tokens from a list of strings. Removing a token is a request the element fires, and you apply it. Combobox works the other way: its tokens show a selection it owns, drawn from the options it was given.  'value' is the typed text. Every keystroke fires 'input' with the text on the element, so a table can narrow as the user types. Backspace in an empty field fires 'helix-dismiss' on the last token, the same event its remove control fires, so one handler covers the pointer and the keyboard.  **What a form receives.** The text under 'name', and then one more entry under 'name' for each token, in the order the tokens stand:  | Token | Entry | |---|---| | Any element with a 'value' attribute | The value as written: 'saved:mine' | | 'FilterChip' with 'name' and values | 'status:open,pending' | | The same, with 'operator="none"' (what a typed '-status:' makes) | '-status:open,pending' | | The same, with any other 'operator' except 'any' | 'created[after]:2024' | | A token with neither | Nothing |  The values are the chip's text outside its 'field' and 'operator' slots, with the spaces around each comma removed. A server splits an entry at its first colon, reads a leading '-' as the negation, and reads a word in brackets before the colon as the comparison.  **Keyboard.** Focus stays in the text. The text names the highlighted suggestion as its 'aria-activedescendant'.  | Key | What it does | |---|---| | Enter | Presses the highlighted suggestion. With none highlighted, reads the typed filters into chips, or submits the form when there are none. | | Down, Up | Moves the highlight through the suggestions, wrapping, and opens the panel. | | Home, End | Highlights the first or the last suggestion while the panel is open. | | Escape | Closes the panel and stops there, so a dialog around the field stays open. | | Backspace | In an empty field, asks the last token to go. |  **Typed filters.** The field parses only the fields you declare. Write 'FilterField' elements, usually inside the 'FilterMenu' slotted into 'start', so the picker and the text share one set. On Enter, the field reads the text against them. 'disposition:refunded,settled' and '-disposition:refunded' fire 'helix-facet' exactly as ticking those values in the picker would, and the parsed text is removed. Everything else stays, so 'refund tuesday disposition:settled' is a filter and a search at once. Helix defines the punctuation and you define every word. 'grammar.ts' has the full rule, so read it before you rely on it. A field with no 'FilterField' in it parses nothing.  A field whose values cannot be listed, such as 'assignee:ada', goes directly inside this element, outside the menu. It is not assigned to a slot, so nothing draws it and the menu has no page for it, and the grammar still reads it.  **Suggestions.** Slot options into 'suggestions' and the field shows them, moves through them with the arrow keys, and presses one on Enter. The option fires its own 'helix-select', and you decide what choosing it means. Keys before a colon and values after it use the same panel with different contents. 'filter-suggestions' narrows the panel to the options whose words hold the term at the caret, after its colon, ignoring case and accents, and hides the rest. 'readFilterText' is exported so you can narrow it yourself against partly typed text. While the panel is open, a reader hears how many suggestions it offers. The panel opens when it has options and closes when it has none, and a choice does not close it, so after picking a key you see its values next. Use 'selectionStart' and 'setSelectionRange' to write a completion back and put the caret after it, or the next parse reads the wrong term.  **State.** Three things have three different owners:  - 'value' is the text. The user types, the element applies it, and 'input'   reports it. Setting 'value' seeds or corrects the text, and the next   keystroke overwrites it, even in React. To control the value, cancel   'helix-before-change' and write the value you want, as with every field in   this library. 'default-value' seeds the field. - 'open' is the suggestions panel. Cancel 'helix-before-open' or   'helix-before-close' to control it, and use 'default-open' to seed it. - Tokens are your elements in a slot and hold no state. A token goes when you   remove it from your markup after 'helix-dismiss'. A 'FilterChip' naming a   declared field works differently, because the picker holds what is ticked   and removing the chip alone would leave its value ticked in the hidden   menu. Its dismissal is treated as the field being filtered by nothing, so   it fires 'helix-facet' like every other change, and the chip goes when the   filter goes. */
   "helix-headless-filter-input": DefineCustomElement<
     HelixHeadlessFilterInput,
     HelixHeadlessFilterInputVueProps,
@@ -14852,43 +15610,43 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessGraphVueProps,
     HelixHeadlessGraphVueEvents
   >;
-  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. */
+  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. PageUp and PageDown move four columns, which is four weeks with 'rows="7"'.  **The strip describes itself.** The 'overview' part says the busiest reading and the total of the readings drawn, "Busiest: 11 Jun 12; Total 84", and the strip is described by it, as every chart is by its summary. Hide it visually. The 'summary' slot is still yours, for words of your own. */
   "helix-headless-heatmap": DefineCustomElement<
     HelixHeadlessHeatmap,
     HelixHeadlessHeatmapVueProps,
     HelixHeadlessHeatmapVueEvents
   >;
-  /** A button with an icon for its content. Always set 'label': an icon-only control has no accessible name unless you give it one, and a button whose content is a glyph is announced as "button" and nothing else. A separate component with a 'label' makes the name something a review can check.  The element is registered, so other headless components can render 'helix-headless-icon-button', for example as an announcement's dismiss control. They do not depend on a styled tag, which would never upgrade in this tier.  Icon Button is a top-level component. A namespace such as 'Button.Icon' would mean a part of a button, and an icon-only button is a complete button with different content and a different shape. */
+  /** A button with an icon for its content. Always set 'label': an icon-only control has no accessible name unless you give it one, and a button whose content is a glyph is announced as "button" and nothing else. A separate component with a 'label' makes the name something a review can check.  The element is registered, so other headless components can render 'helix-headless-icon-button', for example as an announcement's dismiss control. They do not depend on a styled tag, which would never upgrade in this tier.  Icon Button is a top-level component. A namespace such as 'Button.Icon' would mean a part of a button, and an icon-only button is a complete button with different content and a different shape.  **Keyboard.** Enter and Space press the button, as 'Button''s do. */
   "helix-headless-icon-button": DefineCustomElement<
     HelixHeadlessIconButton,
     HelixHeadlessIconButtonVueProps,
     HelixHeadlessIconButtonVueEvents
   >;
-  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers the whole set, so any name in it draws. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  A name with no match renders nothing, and the element fires 'error', so a typo in a name can be heard.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name. */
+  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers the whole set, so any name in it draws. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  A name with no match renders nothing, and the element fires 'error', so a typo in a name can be heard. It waits until the page has loaded and painted first, so a library a later module registers is not taken for a typo.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name. */
   "helix-headless-icon": DefineCustomElement<
     HelixHeadlessIcon,
     HelixHeadlessIconVueProps,
     HelixHeadlessIconVueEvents
   >;
-  /** Image handles the part CSS cannot: when the picture has loaded, or that it failed. 'aspect-ratio' in your stylesheet reserves the box. The element tracks three states and relays the two events that move between them, and leaves the box to the stylesheet.  The 'placeholder' slot is empty by default, so the headless tier does not depend on 'Skeleton', which it does not ship. */
+  /** Image handles the part CSS cannot: when the picture has loaded, or that it failed. 'aspect-ratio' in your stylesheet reserves the box. The element tracks three states and relays the two events that move between them, and leaves the box to the stylesheet.  The 'placeholder' slot is empty by default, so the headless tier does not depend on 'Skeleton', which it does not ship.  The placeholder is hidden from screen readers, the picture having a name of its own. The fallback is read once the picture fails, after the picture's 'alt', so a reader hears that it did not load, as a sighted reader sees. */
   "helix-headless-image": DefineCustomElement<
     HelixHeadlessImage,
     HelixHeadlessImageVueProps,
     HelixHeadlessImageVueEvents
   >;
-  /** Renders a real '<input>', so the caret, selection, autofill, spellcheck, password managers, and a phone's on-screen keyboard all work natively. The field is in the server markup, so it works before any script loads.  An input inside a shadow root does not submit with a form outside it, so the host is form-associated and reports its value through 'ElementInternals'. That also carries validity and handles a form reset.  'value' and 'defaultValue' work like 'checked' and 'defaultChecked'. 'value' is what is in the field now, and 'defaultValue' is the value from the markup, which a reset restores.  Validity comes from the browser. 'type' and 'required' are set on the real input, and its 'validity' is copied to the host. */
+  /** Renders a real '<input>', so the caret, selection, autofill, spellcheck, password managers, and a phone's on-screen keyboard all work natively. The field is in the server markup, so it works before any script loads.  An input inside a shadow root does not submit with a form outside it, so the host is form-associated and reports its value through 'ElementInternals'. That also carries validity and handles a form reset.  'value' and 'defaultValue' work like 'checked' and 'defaultChecked'. 'value' is what is in the field now, and 'defaultValue' is the value from the markup, which a reset restores.  Validity comes from the browser. 'type' and 'required' are set on the real input, and its 'validity' is copied to the host. 'validate' adds your own rule, run on every change once the browser finds nothing wrong, as React Aria's TextField 'validate' does. What it returns is the message the field shows once the user has edited it, and the message a submit raises. */
   "helix-headless-input": DefineCustomElement<
     HelixHeadlessInput,
     HelixHeadlessInputVueProps,
     HelixHeadlessInputVueEvents
   >;
-  /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing.  **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added. */
+  /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing.  **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added.  'caps' draws a chord as a key per key: each is a 'key' part and the '+' between two a 'separator' part, so a sheet can draw a cap for each. 'key-labels' renames any key, on every platform, such as 'key-labels='{"mod":"Command"}''. */
   "helix-headless-kbd": DefineCustomElement<
     HelixHeadlessKbd,
     HelixHeadlessKbdVueProps,
     HelixHeadlessKbdVueEvents
   >;
-  /** Renders a legend as a list, separate from any chart, so any chart can use one. Set 'for' to the table the chart reads, and the legend takes its entries from that table, so the two always match.  'entries' sets how the table is read:  - 'series': one entry per data column, named by the header row. Use it for a   line or bar chart. - 'categories': one entry per body row. Use it for a donut, whose slices are   the rows and which has no axis to name them on. - 'measures': drops the first data column. Use it for a scatter.  The table is resolved on the client. There is no server pass.  **'toggles' makes each entry a button that hides its series.** Every chart reading the same table draws without a hidden series and fits its scale to the rest, and the series keeps its color. The button says whether its series is shown with 'aria-pressed'. 'hidden-series' holds the hidden names, so a page can start with some hidden or read which are. */
+  /** Renders a legend as a list, separate from any chart, so any chart can use one. Set 'for' to the table the chart reads, and the legend takes its entries from that table, so the two always match.  'entries' sets how the table is read:  - 'series': one entry per data column, named by the header row. Use it for a   line or bar chart. - 'categories': one entry per body row. Use it for a donut, whose slices are   the rows and which has no axis to name them on. - 'measures': drops the first data column. Use it for a scatter.  The table is resolved on the client. There is no server pass.  **'toggles' makes each entry a button that hides its series.** Every chart reading the same table draws without a hidden series and fits its scale to the rest, and the series keeps its color. The button says whether its series is shown with 'aria-pressed'. The buttons are one tab stop: the arrow keys move between them, Home and End go to the first and the last, and a typed letter goes to the next name starting with it. 'hidden-series' holds the hidden names, so a page can start with some hidden or read which are. Two legends on one table show the same hidden series: the list written last wins, and the other legend takes it for its own entries. */
   "helix-headless-legend": DefineCustomElement<
     HelixHeadlessLegend,
     HelixHeadlessLegendVueProps,
@@ -14900,7 +15658,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessLightboxItemVueProps,
     HelixHeadlessLightboxItemVueEvents
   >;
-  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label'. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
+  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label', whose glyphs you can replace in the 'previous-icon', 'next-icon' and 'dismiss-icon' slots. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  **Set 'max-zoom' to let a reader zoom into the shown item**, such as '3'. Two fingers pinch it, a double click or a double tap zooms all the way in about the point pressed and back out, and once zoomed one pointer drags it about. '+' and '-' zoom in and out from the keyboard, and '0' puts it back. The scale and the offset are on the 'viewport' part as '--lightbox-zoom', '--lightbox-pan-x' and '--lightbox-pan-y', written only while zoomed, and a swipe moves to the next item only while the item is at its own size.  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
   "helix-headless-lightbox": DefineCustomElement<
     HelixHeadlessLightbox,
     HelixHeadlessLightboxVueProps,
@@ -14918,7 +15676,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessListItemVueProps,
     HelixHeadlessListItemVueEvents
   >;
-  /** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7".  **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. Up and Down move between rows, Home and End go to the first and the last, and a typed letter goes to the next row starting with it. Left and Right move between the row and the controls in its 'end' slot. 'single' selects one row at a time and 'multiple' any number, with Space or a press, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. Enter acts on the row: it follows the row's link, or sends 'helix-action' from the row. 'none' selects nothing, so a press acts too. A 'disabled' row is passed over.  **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order.  'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs. */
+  /** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7".  **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. 'single' selects one row at a time and 'multiple' any number, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. 'none' selects nothing, so a press acts on the row. A 'disabled' row is passed over. Each row is named by its label and described by its description, so the words of the controls in 'end' are not read as part of its name.  'selection-behavior' says what a press does to the rows already selected. 'toggle', the default, adds or takes out the row. 'replace' selects the row alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press then adds or takes out one row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. Under 'replace', selects it. | | Home, End | Moves to the first or the last row. Under 'replace', selects it. | | A letter or a word | Moves to the next row whose words start with what you typed. | | Left, Right | Moves between the row and the controls in its 'end' slot. | | Space | Selects the row, or lets it go. | | Shift with Down, Up, Home, End or Space | Selects every row from the last one pressed, in 'multiple'. | | Control or Command with Down, Up, Home or End | Moves without selecting, under 'replace'. | | Control or Command with A | Selects every row, in 'multiple'. | | Enter | Acts on the row: follows its link, or sends 'helix-action' from it. |  A press with Shift selects every row from the last one pressed, and a press with Control or Command adds or takes out one row under 'replace'.  **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order.  'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs. */
   "helix-headless-list": DefineCustomElement<
     HelixHeadlessList,
     HelixHeadlessListVueProps,
@@ -14930,7 +15688,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessListboxVueProps,
     HelixHeadlessListboxVueEvents
   >;
-  /** Draws two concentric circles: a track and a moving arc. The track shows the arc as a proportion of a whole, and costs one element.  **The center is a slot, empty by default.** Put your logo there once, where your app wraps the loader. When nothing is slotted, nothing extra is rendered.  Slotted content does not rotate. Only the arc moves, so a logo stays readable.  The role is set on the host through 'ElementInternals'. A 'role' in the shadow root would leave the host itself without a role in the light DOM, and a 'role' attribute on the host would be missing from React server-rendered markup.  **'for' names the region being loaded**, and the loader sets 'aria-busy="true"' on it for as long as the loader is on the page, so a screen reader waits for the region rather than reading it half filled. Two loaders in one region hold it busy until the last one leaves.  **'delay' keeps a quick load from flashing a loader.** The loader stays hidden, and silent, for that many milliseconds, and appears only if the work is still going. */
+  /** Draws two concentric circles: a track and a moving arc. The track shows the arc as a proportion of a whole, and costs one element.  **The center is a slot, empty by default.** Put your logo there once, where your app wraps the loader. When nothing is slotted, nothing extra is rendered.  Slotted content does not rotate. Only the arc moves, so a logo stays readable.  The role is set on the host through 'ElementInternals'. A 'role' in the shadow root would leave the host itself without a role in the light DOM, and a 'role' attribute on the host would be missing from React server-rendered markup.  **'for' names the region being loaded**, and the loader sets 'aria-busy="true"' on it for as long as the loader is on the page, so a screen reader waits for the region rather than reading it half filled. Two loaders in one region hold it busy until the last one leaves. A region drawn after the loader is marked when it arrives.  **'delay' keeps a quick load from flashing a loader.** The loader stays hidden, and silent, for that many milliseconds, and appears only if the work is still going. While it waits it carries ':state(waiting)'. */
   "helix-headless-loader": DefineCustomElement<
     HelixHeadlessLoader,
     HelixHeadlessLoaderVueProps,
@@ -15002,19 +15760,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMapTerrainVueProps,
     HelixHeadlessMapTerrainVueEvents
   >;
-  /** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands.  It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write.  It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section.  When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does: the one opening is ':state(from-start)' or ':state(from-end)', by where the one closing sits in the bar, and the one closing is ':state(to-start)' or ':state(to-end)'. A stylesheet slides them on that. Put megamenus in a 'Navigation' with 'arrows' and the arrow keys move between their triggers. */
+  /** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands.  It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write.  It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section.  When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does. Moving toward the end of the bar, the one opening is ':state(from-end)' and the one closing is ':state(to-start)'; moving back, they are ':state(from-start)' and ':state(to-end)'. A stylesheet slides them on that. Start and end follow the reading direction, so on a right-to-left page the end is on the left. A panel that opens or closes on its own carries none of the four. A press on another megamenu's trigger hands over the same way as hovering it.  While a panel is open its surface carries its own size, as '--megamenu-surface-inline-size' and '--megamenu-surface-block-size', and a panel that took over from another also carries that one's size, as '--megamenu-from-inline-size' and '--megamenu-from-block-size'. Radix's navigation menu publishes the same pair from its shared viewport, so a stylesheet can grow or shrink one panel into the next.  Put megamenus in a 'Navigation' with 'arrows' and the arrow keys move between their triggers. Down Arrow on the trigger of an open panel moves focus to the panel's first link, Escape closes the panel and returns focus to its trigger, and Tab moves through the panel's links and closes it on the way out. The trigger says 'aria-expanded', and the panel is a group named by 'label'. */
   "helix-headless-megamenu": DefineCustomElement<
     HelixHeadlessMegamenu,
     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 'checked' is 'menuitemcheckbox' with 'aria-checked', and 'exclusive' makes it '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.  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. */
+  /** 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 'checked' is 'menuitemcheckbox' with 'aria-checked', and 'exclusive' makes it '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.  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".  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. */
   "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. A plain '<button>' can only be told by writing attributes onto your markup, which the menu does not do, so give it 'aria-haspopup="menu"' and set its 'aria-expanded' from the 'toggle' event.  Submenus drill down. A submenu replaces the panel's content, and a back row returns to the previous page. One panel avoids the diagonal pointer path that side-by-side panels need, stays inside a narrow window, and works on touch screens, which have no hover.  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 announced>' is a separator a screen reader announces.  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. */
+  /** 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. A plain '<button>' can only be told by writing attributes onto your markup, which the menu does not do, so give it 'aria-haspopup="menu"' and set its 'aria-expanded' from the 'toggle' event.  Submenus drill down. A submenu replaces the panel's content, and a back row returns to the previous page. One panel avoids the diagonal pointer path that side-by-side panels need, stays inside a narrow window, and works on touch screens, which have no hover.  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 announced>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose, Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page, and Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,
@@ -15050,19 +15808,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationVueProps,
     HelixHeadlessNotificationVueEvents
   >;
-  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting.  **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it.  **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. The button is hidden while the feed is loading. */
+  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting.  **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it.  **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. While the feed is loading the button stays, so focus stays on it, and it is 'aria-disabled' and sends nothing. */
   "helix-headless-notifications": DefineCustomElement<
     HelixHeadlessNotifications,
     HelixHeadlessNotificationsVueProps,
     HelixHeadlessNotificationsVueEvents
   >;
-  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  On iOS and iPadOS the field is a text field described as a number field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. */
+  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
   "helix-headless-number-input": DefineCustomElement<
     HelixHeadlessNumberInput,
     HelixHeadlessNumberInputVueProps,
     HelixHeadlessNumberInputVueEvents
   >;
-  /** Object Inspector shows a structured value, such as an API response, a config, or a raw record, as a read-only tree with each entry's type visible.  Pass the object to 'value', or name a '<script type="application/json">' by id with 'for', the same source 'VirtualList' and the charts read. JSON text works with server rendering and with React hydration, which skips object properties. 'value' wins when both are set.  The tree is one tab stop. Up and Down move between rows, Right opens a branch or moves into it, Left closes it or moves to its parent, and Home and End move to the first and last rows. Typing moves to the next row whose key starts with what was typed, and '*' opens every branch beside the active row. Focus stays on the tree, and 'aria-activedescendant' marks the active row. Each row carries its real level, position, and set size, including in a windowed tree.  'active' is the active row's path, written the way a JSON Pointer writes it: the empty string for the root and '/meta/tags/0' for an entry under it. Moving to another row sends 'helix-before-activate', which you can cancel, and then 'helix-activate', both with the path. Writing 'active' moves there and opens the branches around it, and sends nothing. 'expanded' holds the open branches by path, and writing it opens those and closes the rest. A row that closes around the active one hands it to the nearest open branch.  'filter' narrows the tree to the entries whose key or value holds the text, ignoring case, and the branches that lead to them, which it opens. A matched branch keeps everything under it. Each matched row carries 'row-match', and a screen reader hears how many entries matched from 'result-label' and 'results-label'. 'filterable' adds a field that sets it: typing sends 'helix-filter', which you can cancel, and then 'helix-filtered', and Down moves from the field to the tree.  A new 'value' keeps the branches a reader opened or closed, and the active row, where the new value still has them. A branch the old value did not have opens to 'default-depth'.  The copy button copies the active row, a branch as JSON and a string as its text. So do Command+C and Control+C while the tree has focus and no text is selected. The button sits beside the tree, because assistive technology cannot reliably reach a button inside a tree item.  'windowed' draws only the rows in view, for values with thousands of entries. The box needs a height for windowing to work. The styled tier sets one, and in the headless tier you set it yourself. */
+  /** Object Inspector shows a structured value, such as an API response, a config, or a raw record, as a read-only tree with each entry's type visible.  Pass the object to 'value', or name a '<script type="application/json">' by id with 'for', the same source 'VirtualList' and the charts read. JSON text works with server rendering and with React hydration, which skips object properties. 'value' wins when both are set.  **Keyboard.** The tree is one tab stop, and focus moves from row to row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. | | Right | Opens a closed branch, or moves into an open one. Left on a right-to-left page. | | Left | Closes an open branch, or moves to the parent. Right on a right-to-left page. | | Home, End | Moves to the first or the last row. | | Enter, Space | Opens or closes a branch. | | '*' | Opens every branch beside the active row. | | A letter or a word | Moves to the next row whose key starts with what you typed. | | Command+C, Control+C | Copies the active row, where no text is selected. |  The tree is a 'treegrid', as React Aria's Tree is: each entry is a 'row' with one cell, and carries its real level, position, and set size, including in a windowed tree. Nothing in it is chosen, so no row carries 'aria-selected', and a focused row is not announced as selected.  A reader opening or closing a branch sends 'helix-before-open' or 'helix-before-close', which you can cancel, and then 'toggle' with 'newState' and 'oldState', as '<details>' does. The branch is the active row, and 'expanded' holds every open branch. '*' asks once for all the branches it opens. A script writing 'expanded' or 'active' sends nothing.  'active' is the active row's path, written the way a JSON Pointer writes it: the empty string for the root and '/meta/tags/0' for an entry under it. Moving to another row sends 'helix-before-activate', which you can cancel, and then 'helix-activate', both with the path. Writing 'active' moves there and opens the branches around it, and sends nothing. 'expanded' holds the open branches by path, and writing it opens those and closes the rest. A row that closes around the active one hands it to the nearest open branch.  'filter' narrows the tree to the entries whose key or value holds the text, ignoring case, and the branches that lead to them, which it opens. A matched branch keeps everything under it. Each matched row carries 'row-match', and a screen reader hears how many entries matched from 'result-label' and 'results-label'. 'filterable' adds a field that sets it: typing sends 'helix-filter', which you can cancel, and then 'helix-filtered', and Down moves from the field to the tree.  A new 'value' keeps the branches a reader opened or closed, and the active row, where the new value still has them. A branch the old value did not have opens to 'default-depth'.  The copy button copies the active row, a branch as JSON and a string as its text. So do Command+C and Control+C while the tree has focus and no text is selected. The button sits beside the tree, because assistive technology cannot reliably reach a button inside a tree item.  'windowed' draws only the rows in view, for values with thousands of entries. The box needs a height for windowing to work. The styled tier sets one, and in the headless tier you set it yourself. */
   "helix-headless-object-inspector": DefineCustomElement<
     HelixHeadlessObjectInspector,
     HelixHeadlessObjectInspectorVueProps,
@@ -15080,7 +15838,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessOptionVueProps,
     HelixHeadlessOptionVueEvents
   >;
-  /** Outline is a table of contents for a document. 'Navigation' does the same job for a site.  The links are your own anchors. A router renders its own '<a>' and cannot render one inside the outline's shadow root, and the hrefs are fragments on the same page.  Write the anchors flat, with 'data-level' for their depth, or nested in lists, '<ul><li><a>'. A screen reader hears the levels either way: the outline puts a flat run into lists inside list items of its own, nested by 'data-level', and leaves the links where they are. A link without 'data-level' is at the top level.  A heading slotted into 'heading' names the navigation, in place of 'label'.  The current section is decided by the headings' positions. An 'IntersectionObserver' with a band near the top fails both ways: when headings are far apart, none is in the band and no section is marked, and when they are close together, several are in the band at once. */
+  /** Outline is a table of contents for a document. 'Navigation' does the same job for a site.  The links are your own anchors. A router renders its own '<a>' and cannot render one inside the outline's shadow root, and the hrefs are fragments on the same page.  Write the anchors flat, with 'data-level' for their depth, or nested in lists, '<ul><li><a>'. A screen reader hears the levels either way: the outline puts a flat run into lists inside list items of its own, nested by 'data-level', and leaves the links where they are. A link without 'data-level' is at the top level.  A heading slotted into 'heading' names the navigation, in place of 'label'.  In a contents rail with a scrollbar of its own, 'follow' keeps the link of the section in view showing as the reader scrolls the page.  The current section is decided by the headings' positions. An 'IntersectionObserver' with a band near the top fails both ways: when headings are far apart, none is in the band and no section is marked, and when they are close together, several are in the band at once. */
   "helix-headless-outline": DefineCustomElement<
     HelixHeadlessOutline,
     HelixHeadlessOutlineVueProps,
@@ -15104,13 +15862,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessPaginationSummaryVueProps,
     HelixHeadlessPaginationSummaryVueEvents
   >;
-  /** Each cell is its own '<input>', so every box has a real focus ring, caret, and tab stop.  Input longer than one character is treated as a paste, in any cell. This covers pasting, a browser autofilling an SMS code, and a password manager, which all put the whole code into the focused box. A six-character code that arrives in cell three fills from cell three.  The code is one value to a form. The cells are in a shadow root and submit nothing. The host is form-associated and submits the joined string, which also carries validity and responds to a form reset.  Only the first cell has 'autocomplete="one-time-code"', because the hint applies to the whole field.  'autosubmit' submits the form once the last box is filled, through the form's default button where there is one. 'format' draws separators between the boxes, such as the dash in '###-###', as text a screen reader skips. Delete removes the character in the focused box and pulls the rest of the code back, as Backspace removes the one before it.  The row of cells always runs left to right, with 'dir="ltr"', including in Arabic and Hebrew. The first box is the leftmost, a paste fills to the right, and the right arrow moves to the next box. The label, hint, and feedback follow the page's direction. */
+  /** Each cell is its own '<input>', so every box has a real focus ring, caret, and tab stop.  Input longer than one character is treated as a paste, in any cell. This covers pasting, a browser autofilling an SMS code, and a password manager, which all put the whole code into the focused box. A six-character code that arrives in cell three fills from cell three.  The code is one value to a form. The cells are in a shadow root and submit nothing. The host is form-associated and submits the joined string, which also carries validity and responds to a form reset.  Only the first cell has 'autocomplete="one-time-code"', because the hint applies to the whole field.  'autosubmit' submits the form once the last box is filled, through the form's default button where there is one. 'format' draws separators between the boxes, such as the dash in '###-###', as text a screen reader skips. Delete removes the character in the focused box and pulls the rest of the code back, as Backspace removes the one before it.  The row of cells always runs left to right, with 'dir="ltr"', including in Arabic and Hebrew. The first box is the leftmost, a paste fills to the right, and the right arrow moves to the next box. The label, hint, and feedback follow the page's direction.  **Keyboard.** Each box is a tab stop of its own, as each is a real input.  | Key | What it does | |---|---| | A character | Fills the box and moves to the next one. A longer run is read as a paste. | | Left, Right | Moves to the box before or after. | | Home, End | Moves to the first box, or to the box after the last character. | | Backspace | In an empty box, clears the box before it and moves there. | | Delete | Removes the character in the box and pulls the rest of the code back. | | Enter | Submits the form. |  The row has 'role="group"' and the field's name, and each box is named by 'cell-label', such as "Character 2 of 6". 'helix-complete' is a 'HelixCompleteEvent' sent once the last box is filled. */
   "helix-headless-pin-input": DefineCustomElement<
     HelixHeadlessPinInput,
     HelixHeadlessPinInputVueProps,
     HelixHeadlessPinInputVueEvents
   >;
-  /** Popover is the general overlay that the specific ones build on. 'Menu' holds commands, 'Select' holds options, and 'Tooltip' holds a description. Popover holds any content you put in it, so it has no keyboard handling of its own.  The trigger is slotted and stays your own element. The popover writes nothing onto it, including 'aria-expanded', 'id', and 'tabindex', because changing your markup after upgrade causes a React hydration mismatch.  The panel is in the top layer through the popover API, so it needs no 'z-index', and an ancestor with 'overflow: hidden', 'transform', 'filter', or 'contain' does not clip or move it.  It opens on click and from a command. 'command="--show"' and the related commands work as they do on 'Dialog' and 'Drawer', so a button anywhere on the page can open the popover with no script.  **Opening moves focus into the panel**, to the first control in it, or to the panel itself where it holds none, and closing from inside gives it back to the trigger. It closes on Escape, on a press outside it, and when focus moves out of the trigger and the panel to somewhere else on the page.  'modal' keeps 'Tab' inside the panel while it is open and says so with 'aria-modal', for a panel that has to be answered before the page goes on. Without it the popover does not trap focus.  The panel's name is 'label' when you set it. Otherwise it is the first heading in the panel, or the elements an 'aria-labelledby' on the host names.  'arrow' draws a point on the panel's edge facing the trigger. The side the panel landed on is on the host as ':state(placed-top)' and its kin, and the trigger's width is on the panel as '--floating-anchor-inline-size', for a panel as wide as its trigger:  '''css helix-popover::part(popover) {   min-inline-size: var(--floating-anchor-inline-size); } ''' */
+  /** Popover is the general overlay that the specific ones build on. 'Menu' holds commands, 'Select' holds options, and 'Tooltip' holds a description. Popover holds any content you put in it, so it has no keyboard handling of its own.  The trigger is slotted and stays your own element. A Helix trigger is told whether the popover is open inside its own shadow root. On a plain element, such as a '<button>', the popover writes 'aria-expanded' only once a reader has pressed it, which is after any hydration, and never where you wrote 'aria-expanded' yourself. It writes nothing else onto your markup.  The panel is in the top layer through the popover API, so it needs no 'z-index', and an ancestor with 'overflow: hidden', 'transform', 'filter', or 'contain' does not clip or move it.  It opens on click and from a command. 'command="--show"' and the related commands work as they do on 'Dialog' and 'Drawer', so a button anywhere on the page can open the popover with no script.  **Opening moves focus into the panel**, to the first control in it, or to the panel itself where it holds none, and closing from inside gives it back to the trigger. It closes on Escape, on a press outside it, and when focus moves out of the trigger and the panel to somewhere else on the page.  'modal' keeps 'Tab' inside the panel while it is open and says so with 'aria-modal', for a panel that has to be answered before the page goes on. The rest of the page is hidden from screen readers with 'aria-hidden' while it is open, so the virtual cursor stays in the panel too. Without it the popover does not trap focus.  The panel's name is 'label' when you set it. Otherwise it is the first heading in the panel, or the elements an 'aria-labelledby' on the host names.  'arrow' draws a point on the panel's edge facing the trigger. The side the panel landed on is on the host as ':state(placed-top)' and its kin, and the trigger's width is on the panel as '--floating-anchor-inline-size', for a panel as wide as its trigger:  '''css helix-popover::part(popover) {   min-inline-size: var(--floating-anchor-inline-size); } ''' */
   "helix-headless-popover": DefineCustomElement<
     HelixHeadlessPopover,
     HelixHeadlessPopoverVueProps,
@@ -15122,13 +15880,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessProgressVueProps,
     HelixHeadlessProgressVueEvents
   >;
-  /** The code is drawn as one '<path>'. Runs of adjacent dark modules are joined, so a row of eight is one horizontal move. A code of useful length has about a thousand modules, and an element for each would be a thousand nodes for one image.  The element has 'role="img"' and an accessible name. Set the name to what the code is for. When you pass no name, the value is the name. Most codes hold a URL, and a URL read aloud gives the destination.  The quiet zone of four modules is required by the specification, and a scanner rejects a code cropped to its edge. It is drawn inside the 'viewBox', so it stays at any size, including a size set in CSS.  'correction' sets how much of the code can be lost. At 'H' a code can lose thirty percent and still scan, so a mark in the center slot is safe. At 'L' the same mark makes the code unscannable. The default is 'M', and 'H' when the 'logo' slot is filled.  A higher level holds fewer characters, so a value that fits at 'M' can be too long once a logo raises the level to 'H'. A value too long for the level draws no code, and the element fires 'error'.  'toSvg()', 'toPng()' and 'download()' give the drawn code as a file of its own, in the colors it is drawn in, for a page that offers it to save or print, as Zag's download trigger does. */
+  /** The code is drawn as one '<path>'. Runs of adjacent dark modules are joined, so a row of eight is one horizontal move. A code of useful length has about a thousand modules, and an element for each would be a thousand nodes for one image.  The element has 'role="img"' and an accessible name. Set the name to what the code is for. When you pass no name, the value is the name. Most codes hold a URL, and a URL read aloud gives the destination.  The quiet zone of four modules is required by the specification, and a scanner rejects a code cropped to its edge. It is drawn inside the 'viewBox', so it stays at any size, including a size set in CSS.  'correction' sets how much of the code can be lost. At 'H' a code can lose thirty percent and still scan, so a mark in the center slot is safe. At 'L' the same mark makes the code unscannable. The default is 'M', and 'H' when the 'logo' slot is filled.  A higher level holds fewer characters, so a value that fits at 'M' can be too long once a logo raises the level to 'H'. A value too long for the level draws no code: the element fires 'error', carries ':state(overflow)', and shows what is in the 'fallback' slot, such as the link written out.  'toSvg()', 'toPng()' and 'download()' give the drawn code as a file of its own, in the colors it is drawn in, with a slotted image or SVG logo where it sits, for a page that offers it to save or print, as Zag's download trigger does. */
   "helix-headless-qr-code": DefineCustomElement<
     HelixHeadlessQrCode,
     HelixHeadlessQrCodeVueProps,
     HelixHeadlessQrCodeVueEvents
   >;
-  /** Renders a real '<q>', so the browser supplies the quotation marks. It inserts the correct marks for the document's language and nests them correctly when one quotation sits inside another. Do not type quotation marks into the content.  For a passage set off from the surrounding text, use a blockquote. */
+  /** Renders a real '<q>', so the browser supplies the quotation marks. It inserts the correct marks for the document's language and nests them correctly when one quotation sits inside another. Do not type quotation marks into the content: one that starts or ends with a typed mark warns once, with the runtime kind 'typed-marks'. A quotation in a language other than the page's takes 'lang' on the element, and its marks follow it: 'lang="de"' sets „…“ and 'lang="fr"' «…» inside an English page.  For a passage set off from the surrounding text, use a blockquote. */
   "helix-headless-quote": DefineCustomElement<
     HelixHeadlessQuote,
     HelixHeadlessQuoteVueProps,
@@ -15152,13 +15910,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessRatingVueProps,
     HelixHeadlessRatingVueEvents
   >;
-  /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color.  Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them.  The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from row to row in the table's order, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away.  Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches.  The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction. */
+  /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color.  Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them.  'trend' draws each series' line of best fit, by least squares, across the plot in the series' color.  The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from row to row in the table's order, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away.  Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches.  The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction. */
   "helix-headless-scatter-chart": DefineCustomElement<
     HelixHeadlessScatterChart,
     HelixHeadlessScatterChartVueProps,
     HelixHeadlessScatterChartVueEvents
   >;
-  /** Measures which edges have content past them and sets one custom state per edge. CSS cannot read scroll position, so a stylesheet cannot work this out on its own. The styled tier draws a fade on each edge that has a state.  Custom states keep an element that upgrades after a framework rendered it from adding markup the framework did not write. Select them with ':host(:state(more-block-end))'.  While the content overflows, the region gets a 'tabindex', so keyboard users can scroll it. When nothing overflows, it is not a tab stop.  It has 'role="region"' only when you set a 'label', because a screen reader announces an unnamed region as only "region".  **'scrollbars' draws scrollbars of its own** in place of the browser's: a 'scrollbar' part for each axis that scrolls, a 'thumb' in each, and a 'corner' where the two meet. They are for the pointer. The thumb drags, and a press on the track moves the thumb to the press. The viewport stays the tab stop and the region a screen reader reads, and the scrollbars are hidden from screen readers. On the headless tier your stylesheet sizes and places them, hides the browser's own with 'scrollbar-width: none' on the viewport, and draws the thumb from the two custom properties written on each scrollbar. An axis whose 'overflow' is 'hidden' gets no scrollbar.  The viewport's 'scroll' and 'scrollend' are sent again from the host, which is the element you hold. In React, bind them with 'onScroll' and 'onScrollEnd'. */
+  /** Measures which edges have content past them and sets one custom state per edge. CSS cannot read scroll position, so a stylesheet cannot work this out on its own. The styled tier draws a fade on each edge that has a state.  Custom states keep an element that upgrades after a framework rendered it from adding markup the framework did not write. Select them with ':host(:state(more-block-end))'.  While the content overflows, the region gets a 'tabindex', so keyboard users can scroll it. When nothing overflows, it is not a tab stop.  It has 'role="region"' only when you set a 'label', because a screen reader announces an unnamed region as only "region".  **'scrollbars' draws scrollbars of its own** in place of the browser's: a 'scrollbar' part for each axis that scrolls, a 'thumb' in each, and a 'corner' where the two meet. They are for the pointer. The thumb drags, and a press on the track moves the thumb to the press. The viewport stays the tab stop and the region a screen reader reads, and the scrollbars are hidden from screen readers. On the headless tier your stylesheet sizes and places them, hides the browser's own with 'scrollbar-width: none' on the viewport, and draws the thumb from the two custom properties written on each scrollbar. An axis whose 'overflow' is 'hidden' gets no scrollbar.  **'orientation' keeps the content to one axis.** 'vertical' scrolls up and down only, and 'horizontal' sideways only, so the other axis has no scrollbar, the browser's or the component's, and clips what is past it. Leave it unset to scroll both ways.  The viewport's 'scroll' and 'scrollend' are sent again from the host, which is the element you hold. A thumb dragged across the content sends one 'scrollend', once it is let go. In React, bind them with 'onScroll' and 'onScrollEnd'.  **Keyboard.** The viewport is the tab stop while the content overflows, and the browser's scrolling keys move it: the arrow keys, Page Up and Page Down, Home and End, and Space. The scrollbars take no focus. */
   "helix-headless-scroll-area": DefineCustomElement<
     HelixHeadlessScrollArea,
     HelixHeadlessScrollAreaVueProps,
@@ -15182,13 +15940,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSkipLinkVueProps,
     HelixHeadlessSkipLinkVueEvents
   >;
-  /** Renders a native '<input type="range">', so the drag, the arrow keys, Home, End, the page keys, and the touch target come from the platform. A native range has a hit area larger than its thumb, sized for a finger.  The value is a string, like every other form control's, and 'MixinControllerValue' holds text. Use 'valueAsNumber' for arithmetic.  Marks are drawn by the component. The ticks of a '<datalist>' cannot be styled, and Firefox does not render them for a range. Marks are decoration. 'step' sets where the value can land, and the input enforces it whether or not marks are drawn. 'markers' is a count, so a slider from zero to a hundred does not draw a hundred and one marks by accident.  A range with two thumbs is two inputs stacked on one track, because there is no native two-thumb range. Each thumb keeps its own value. 'min-steps-between-thumbs' keeps them that many steps apart.  'format-options' writes the value with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, and 'formatter' writes it with a function of your own, such as words for a scale. Either one is what a screen reader hears, what the readout shows and what the marker labels say. 'value-text' still wraps it in a sentence, with the formatted value in its place.  'required' comes with the field mixin and cannot fail. A range is never empty: the platform shows its midpoint when no value is set, and 'willUpdate' seeds that midpoint into 'defaultValue', so the value matches the handle from the first render. HTML does not apply 'required' to a range either, so it is not set on the input. It only adds the marker beside the label. */
+  /** Renders a native '<input type="range">', so the drag, the arrow keys, Home, End, the page keys, and the touch target come from the platform. A native range has a hit area larger than its thumb, sized for a finger.  The value is a string, like every other form control's, and 'MixinControllerValue' holds text. Use 'valueAsNumber' for arithmetic.  Marks are drawn by the component. The ticks of a '<datalist>' cannot be styled, and Firefox does not render them for a range. Marks are decoration. 'step' sets where the value can land, and the input enforces it whether or not marks are drawn. 'markers' is a count, so a slider from zero to a hundred does not draw a hundred and one marks by accident.  A range with two thumbs is two inputs stacked on one track, because there is no native two-thumb range. Each thumb keeps its own value. 'min-steps-between-thumbs' keeps them that many steps apart, and the readout joins the two as 'range-text' writes them.  'origin' sets where a single thumb's fill starts: at 'min', at the middle of the track, or at 'max'. A balance or an offset from zero fills from the middle, as Zag's slider 'origin' does. The fill's ends are published as '--slider-from' and '--slider-to'.  'format-options' writes the value with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, and 'formatter' writes it with a function of your own, such as words for a scale. Either one is what a screen reader hears, what the readout shows and what the marker labels say. 'value-text' still wraps it in a sentence, with the formatted value in its place.  'required' comes with the field mixin and cannot fail. A range is never empty: the platform shows its midpoint when no value is set, and 'willUpdate' seeds that midpoint into 'defaultValue', so the value matches the handle from the first render. HTML does not apply 'required' to a range either, so it is not set on the input. It only adds the marker beside the label.  **Keyboard.** Each thumb is one tab stop, and its keys are the native range's.  | Key | What it does | |---|---| | Right, Up | Moves the thumb up by 'step'. | | Left, Down | Moves the thumb down by 'step'. | | Page Up, Page Down | Moves the thumb by a larger step. | | Home, End | Moves the thumb to its lowest or highest value. |  Each thumb is an '<input type="range">' with 'aria-valuetext' where the value is formatted or worded. A range's thumbs say they stop at each other with 'aria-valuemin' and 'aria-valuemax'. */
   "helix-headless-slider": DefineCustomElement<
     HelixHeadlessSlider,
     HelixHeadlessSliderVueProps,
     HelixHeadlessSliderVueEvents
   >;
-  /** Takes its numbers from the 'values' attribute. The other charts read a table, but a table behind a small trend line would be read aloud row by row. Set 'values' to the data and 'label' to the one sentence a screen reader announces.  Use 'for' when a sparkline has a real table behind it. 'for' wins when both are set.  Without a 'label' the sparkline is decorative and 'aria-hidden', for example beside a stat that already says "Sessions, 1,102". With a 'label' it is an image named by that sentence.  Place it beside a 'Stat', because a change beside a figure is a second fact, as 'Stat''s own spec says. 'Trend' is composed the same way.  The component writes the properties listed below, and the stylesheet that draws the sparkline reads them. Do not set them yourself. They carry numbers the component computes and CSS cannot, so a stylesheet can draw the sparkline without measuring anything. */
+  /** Takes its numbers from the 'values' attribute. The other charts read a table, but a table behind a small trend line would be read aloud row by row. Set 'values' to the data and 'label' to the one sentence a screen reader announces.  Use 'for' when a sparkline has a real table behind it. 'for' wins when both are set.  Without a 'label' the sparkline is decorative and 'aria-hidden', for example beside a stat that already says "Sessions, 1,102". With a 'label' it is named by that sentence and read by key, as every chart is: the drawing takes focus, the arrow keys walk the readings, Home and End go to the first and the last, Escape puts the reading away, and the 'live' part says each reading with where it stands, such as "Mon: 12 (3 of 7)".  A pointer resting on the drawing shows the reading under it: the 'cursor' part marks it and the 'readout' part writes it. 'marks' adds a mark on the highest and the lowest reading. A blank cell in a 'for' table is a gap in the line.  Place it beside a 'Stat', because a change beside a figure is a second fact, as 'Stat''s own spec says. 'Trend' is composed the same way.  The component writes the properties listed below, and the stylesheet that draws the sparkline reads them. Do not set them yourself. They carry numbers the component computes and CSS cannot, so a stylesheet can draw the sparkline without measuring anything. */
   "helix-headless-sparkline": DefineCustomElement<
     HelixHeadlessSparkline,
     HelixHeadlessSparklineVueProps,
@@ -15218,13 +15976,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessStatGroupVueProps,
     HelixHeadlessStatGroupVueEvents
   >;
-  /** The label comes first in the markup and the value after it, so a screen reader reads what the figure counts before the number. Visually, the number stands out either way.  Both are bare slots. An element that assigned itself a slot on connect would add an attribute after upgrade, which markup rendered on the server by React does not have. */
+  /** The label comes first in the markup and the value after it, so a screen reader reads what the figure counts before the number. Visually, the number stands out either way.  Both are bare slots. An element that assigned itself a slot on connect would add an attribute after upgrade, which markup rendered on the server by React does not have.  **A stat with a label is a group named by it**, so a reader moving through a dashboard hears "Revenue, group" and then the figure, its unit and its trend as one reading, rather than a run of loose words. The role and the name are set through 'ElementInternals' once the label is known, which writes no attribute; a stat with no label has no role. Put a 'Trend' in the 'trend' slot to have it read inside the group, after the figure it qualifies. */
   "helix-headless-stat": DefineCustomElement<
     HelixHeadlessStat,
     HelixHeadlessStatVueProps,
     HelixHeadlessStatVueEvents
   >;
-  /** 'active' sets where the user is, and 'complete' stays on each step. Returning to stage one of three leaves stages one and two finished, so the root sets 'current' on the steps and never changes 'complete'.  'active' is optional. Without it, each step keeps its own 'current', so the sequence is correct in the server's markup, where the root cannot count its slotted children.  'linear' keeps a reader from passing a stage they have not finished, as Ark UI's linear steps do: a stage ahead is out of reach, and its button disabled, until every stage before it is 'complete' or 'optional'. Going back is always allowed. To check a stage before a reader leaves it, cancel 'helix-before-activate' while it is not valid. 'next()' and 'previous()' move one stage either way, under the same rules, for your own buttons. */
+  /** 'active' sets where the user is, and 'complete' stays on each step. Returning to stage one of three leaves stages one and two finished, so the root sets 'current' on the steps and never changes 'complete'.  'active' is optional. Without it, each step keeps its own 'current', so the sequence is correct in the server's markup, where the root cannot count its slotted children.  'linear' keeps a reader from passing a stage they have not finished, as Ark UI's linear steps do: a stage ahead is out of reach, and its button disabled, until every stage before it is 'complete' or 'optional'. Going back is always allowed. 'next()' and 'previous()' move one stage either way, under the same rules, for your own buttons.  To check a stage before a reader moves on from it, set 'validate' to a function that answers whether the stage is valid, as Ark UI's 'isStepValid' does. Moving forward asks it about the stage the reader is on, and where it answers 'false' the reader stays and the stage is ':state(invalid)' until it answers 'true'. An 'optional' stage is not asked. 'helix-before-activate' is still sent for every move, for a check of your own.  'progress' is how far through the sequence is, from 0 to 100: the share of its stages that are 'complete'. The 'progress' part carries it as a 'progressbar' and as '--steps-progress', and is hidden until a stylesheet gives it a 'display', so a bar of your own costs nothing until you draw it. The sequence is ':state(complete)' once every stage is.  The sequence is a list named by 'label', and each step a list item. The current stage's button says 'aria-current="step"', and a finished stage's button is described by its 'complete-label'. */
   "helix-headless-steps": DefineCustomElement<
     HelixHeadlessSteps,
     HelixHeadlessStepsVueProps,
@@ -15236,7 +15994,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessStepVueProps,
     HelixHeadlessStepVueEvents
   >;
-  /** A switch turns something on or off right away, and a checkbox is an answer the form submits later. A screen reader announces 'role="switch"' as "on" or "off", and people expect the change to take effect immediately. A switch is as common outside a form as inside one.  It renders a real '<input type="checkbox">' with 'role="switch"', the pairing ARIA describes. The input is what a form submits and what a label forwards a press to, and the role is what a screen reader announces.  The label sits beside the switch, inside the '<label>' that forwards the press, the same as a checkbox. The hint and the message go below the row, because the switch and its label share one line. */
+  /** A switch turns something on or off right away, and a checkbox is an answer the form submits later. A screen reader announces 'role="switch"' as "on" or "off", and people expect the change to take effect immediately. A switch is as common outside a form as inside one.  It renders a real '<input type="checkbox">' with 'role="switch"', the pairing ARIA describes. The input is what a form submits and what a label forwards a press to, and the role is what a screen reader announces.  The label sits beside the switch, inside the '<label>' that forwards the press, the same as a checkbox. The hint and the message go below the row, because the switch and its label share one line.  **Keyboard.** The switch is one tab stop.  | Key | What it does | |---|---| | Space | Turns the switch on or off, as a native checkbox does. |  The input carries 'role="switch"', so a screen reader says "on" or "off". 'aria-readonly' is set under 'readonly', and 'aria-invalid' and 'aria-describedby' point at the message while one shows. */
   "helix-headless-switch": DefineCustomElement<
     HelixHeadlessSwitch,
     HelixHeadlessSwitchVueProps,
@@ -15254,7 +16012,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.  A column with 'sortable' and a 'field' 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. 'helix-sort' asks first, so you can refuse it and reorder the rows yourself.  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.  'selectable' adds a column of checkboxes. Each row is known by its 'value', and 'selected' holds the chosen keys, comma separated, the same shape 'DataTable' uses. The checkbox in the heading selects every row. For a grid a reader moves through with the arrow keys, with typeahead and range selection, use 'DataTable'. To act on one row, put a link or a button in a cell.  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.  **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. For a grid a reader moves through with the arrow keys, with typeahead and range selection, use 'DataTable'. To act on one row, put a link or a button in a cell.  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,
@@ -15266,13 +16024,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTableRowVueProps,
     HelixHeadlessTableRowVueEvents
   >;
-  /** An inactive panel is hidden and stays mounted. Anything typed into it is still there when the person comes back, and the content of every panel is in the server-rendered markup for crawlers, whichever tab is open.  The host is the 'tabpanel' while its tab is selected, through 'ElementInternals', so the tab's 'aria-controls' can reach it from the tab's shadow root. The box inside takes the focus, for a panel with nothing focusable in it. */
+  /** An inactive panel is hidden and stays mounted. Anything typed into it is still there when the person comes back, and the content of every panel is in the server-rendered markup for crawlers, whichever tab is open.  The host is the 'tabpanel' while its tab is selected, through 'ElementInternals', so the tab's 'aria-controls' can reach it from the tab's shadow root. The box inside is a tab stop only while the panel holds nothing focusable, as the ARIA tabs pattern and React Aria's tab panel do: Tab from the tab list lands on the panel's first link or control where there is one, and on the panel itself where there is none. */
   "helix-headless-tab-panel": DefineCustomElement<
     HelixHeadlessTabPanel,
     HelixHeadlessTabPanelVueProps,
     HelixHeadlessTabPanelVueEvents
   >;
-  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link, and the arrow keys move focus without choosing, so arrowing past a tab never leaves the page. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection. */
+  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link, and the arrow keys move focus without choosing, so arrowing past a tab never leaves the page. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
   "helix-headless-tabs": DefineCustomElement<
     HelixHeadlessTabs,
     HelixHeadlessTabsVueProps,
@@ -15284,7 +16042,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTabVueProps,
     HelixHeadlessTabVueEvents
   >;
-  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over.  Name the set with 'label'. */
+  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over. A selected tag that is removed leaves 'value', which then sends 'change'.  Name the set with 'label'. Each tag is named by its words alone, without its remove button.  **Removing the last tag keeps focus in the group.** With no tags left the set is a 'group', and focus moves to its 'empty' part, which holds the 'empty' slot: put words there such as "No filters" for a reader to hear. */
   "helix-headless-tag-group": DefineCustomElement<
     HelixHeadlessTagGroup,
     HelixHeadlessTagGroupVueProps,
@@ -15296,7 +16054,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTagVueProps,
     HelixHeadlessTagVueEvents
   >;
-  /** Renders a '<textarea>', so the caret, selection, spellcheck, resize handle, and phone keyboard come from the platform. It is in the server markup, so the field works before any script loads.  It is a separate element from 'Input' because Enter inserts a line break here. In a single-line field, Enter submits the form.  'rows' sets the starting height, and 'auto-grow' makes the field grow with its content. You can use both: 'rows' sets where an empty field begins. 'max-rows' stops the growth at that many lines, and the field scrolls past them. */
+  /** Renders a '<textarea>', so the caret, selection, spellcheck, resize handle, and phone keyboard come from the platform. It is in the server markup, so the field works before any script loads.  It is a separate element from 'Input' because Enter inserts a line break here. In a single-line field, Enter submits the form.  'rows' sets the starting height, and 'auto-grow' makes the field grow with its content. You can use both: 'rows' sets where an empty field begins. 'max-rows' stops the growth at that many lines, and the field scrolls past them.  'clearable' draws a button that empties the field while it holds text, and sends 'helix-clear', as 'Input' does. 'validate' adds your own rule, run on every change once the browser finds nothing wrong, as React Aria's TextField 'validate' does. */
   "helix-headless-textarea": DefineCustomElement<
     HelixHeadlessTextarea,
     HelixHeadlessTextareaVueProps,
@@ -15332,7 +16090,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTimelineVueProps,
     HelixHeadlessTimelineVueEvents
   >;
-  /** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses.  **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds.  **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. A 'danger' message is its own assertive live region, so it is announced at once; every other one is announced politely by the region.  A touch or a pen swipes a message toward the end of the line, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x'.  **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
+  /** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses.  **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds.  **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. Give it a 'heading' and a 'description', and the heading names it and the description describes it, for a message with a title and a line of detail. A 'danger' message is its own assertive live region, so it is announced at once; every other one is announced politely by the region.  A touch or a pen swipes a message toward the end of the line, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x'.  **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
   "helix-headless-toast-item": DefineCustomElement<
     HelixHeadlessToastItem,
     HelixHeadlessToastItemVueProps,
@@ -15344,7 +16102,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessToastVueProps,
     HelixHeadlessToastVueEvents
   >;
-  /** The indicator is one element that moves to the selected item. A single moving object is easier to follow than a fill that swaps, and it shows where the selection came from.  Its size and position are measured from the selected item and written to the indicator as custom properties, because labels have different lengths. Measurement happens on the client, so the server renders the indicator hidden and it fades in once measured.  'selection-mode="multiple"' makes the group a toolbar of buttons that each say whether they are pressed with 'aria-pressed', as React Aria's ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases one item, the arrow keys move focus without pressing, and 'value' is the pressed values, comma separated, which 'values' also gives as a list. The form receives one entry per pressed value. The indicator stays hidden, and each pressed item is marked with ':state(pressed)'.  'orientation="vertical"' runs the items down a column, says so to the accessibility tree, and the up and down arrows move between them. */
+  /** The indicator is one element that moves to the selected item. A single moving object is easier to follow than a fill that swaps, and it shows where the selection came from.  Its size and position are measured from the selected item and written to the indicator as custom properties, because labels have different lengths. Measurement happens on the client, so the server renders the indicator hidden and it fades in once measured.  'selection-mode="multiple"' makes the group a toolbar of buttons that each say whether they are pressed with 'aria-pressed', as React Aria's ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases one item, the arrow keys move focus without pressing, and 'value' is the pressed values, comma separated, which 'values' also gives as a list. Use 'values' where an item's value holds a comma. The form receives one entry per pressed value, and a page the browser brings back presses the same items again. The indicator stays hidden, and each pressed item is marked with ':state(pressed)'. Inside a toolbar it is a named group of that toolbar's controls instead, so a reader meets one toolbar.  'orientation="vertical"' runs the items down a column, says so to the accessibility tree, and the up and down arrows move between them. */
   "helix-headless-toggle-group": DefineCustomElement<
     HelixHeadlessToggleGroup,
     HelixHeadlessToggleGroupVueProps,
@@ -15362,13 +16120,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessToolbarVueProps,
     HelixHeadlessToolbarVueEvents
   >;
-  /** The trigger is slotted and stays your own element. The bubble renders in the top layer through the popover API, so an ancestor with 'overflow: hidden' does not clip it and no 'z-index' is needed. 'FloatingController' positions it and flips it to another side when the preferred side does not fit.  **The tooltip describes its trigger itself, in both forms.** Wrap the trigger, or place the tooltip beside it and name the trigger with 'for':  '''html <helix-headless-button id="save">Save</helix-headless-button> <helix-headless-tooltip for="save" content="Save your work"></helix-headless-tooltip> '''  The link is an element reference on the control that takes focus, and it is never written into your markup before a reader has acted. A trigger that is a Helix component is described at once, inside its own shadow root. A plain element in your markup is described when a reader first points at it or focuses it, which is after any hydration, and only where you have written no 'aria-describedby' or 'aria-labelledby' of your own. Write 'aria-describedby' pointing at the tooltip yourself to have the link in the server's markup. Where the browser has no element references, write it yourself; the tooltip warns once on first open if nothing links the two.  The tooltip shows on hover and on focus. It hides on pointer leave, on blur, on Escape, and when the trigger is activated. The pointer can move from the trigger onto the bubble and the bubble stays.  Once one tooltip is showing, moving to another trigger shows its tooltip with no 'delay', and the first one hides. The same holds for 'skip-delay' milliseconds after a tooltip hides, 300 unless you set it. 'show-on="focus"' shows the tooltip on keyboard focus only, for a hint a pointer does not need. */
+  /** The trigger is slotted and stays your own element. The bubble renders in the top layer through the popover API, so an ancestor with 'overflow: hidden' does not clip it and no 'z-index' is needed. 'FloatingController' positions it and flips it to another side when the preferred side does not fit.  **The tooltip describes its trigger itself, in both forms.** Wrap the trigger, or place the tooltip beside it and name the trigger with 'for':  '''html <helix-headless-button id="save">Save</helix-headless-button> <helix-headless-tooltip for="save" content="Save your work"></helix-headless-tooltip> '''  The link is an element reference on the control that takes focus, and it is never written into your markup before a reader has acted. A trigger that is a Helix component is described at once, inside its own shadow root. A plain element in your markup is described when a reader first points at it or focuses it, which is after any hydration, and only where you have written no 'aria-describedby' or 'aria-labelledby' of your own. Write 'aria-describedby' pointing at the tooltip yourself to have the link in the server's markup. Where the browser has no element references, write it yourself; the tooltip warns once on first open if nothing links the two.  The tooltip shows on hover and on focus. It hides on pointer leave, on blur, on Escape, and when the trigger is activated. The pointer can move from the trigger onto the bubble and the bubble stays, unless you set 'hoverable="false"'. 'delay' is how long the pointer rests before it shows, and 'delay-out' how long it stays once the pointer leaves.  Once one tooltip is showing, moving to another trigger shows its tooltip with no 'delay', and the first one hides. The same holds for 'skip-delay' milliseconds after a tooltip hides, 300 unless you set it. 'show-on="focus"' shows the tooltip on keyboard focus only, for a hint a pointer does not need. */
   "helix-headless-tooltip": DefineCustomElement<
     HelixHeadlessTooltip,
     HelixHeadlessTooltipVueProps,
     HelixHeadlessTooltipVueEvents
   >;
-  /** The root holds the order of the stops: which stop is current, what Next and Back do, and when the tour is finished. Each stop holds its target, and you write all the text.  **The spotlight is a shadow.** The scrim is a box the size of the current target with a very large 'box-shadow' spread, and the shadow paints the darkness. A 'clip-path' on a full-screen scrim breaks as soon as an element between the scrim and the viewport is transformed.  The root measures the target's position in the browser. Nothing is measured on the server, because a tour starts only on request.  'open', 'default-open', 'helix-before-open', 'helix-before-close' and 'toggle' work as they do on 'Dialog'. Setting 'open' starts the run, and 'skip()' and 'requestOpen(false)' end it early.  Each stop is told its place in the run, from 'progress-label', such as "2 of 5". It describes the stop's panel, so a screen reader says it at every stop, and 'progress' draws it in the panel as well. A dialog or a floating stop, which has nothing to light, is shown over the 'backdrop' part. At a 'wait' stop the run waits for that stop's target to be on the page, and moves on by itself.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes. */
+  /** The root holds the order of the stops: which stop is current, what Next and Back do, and when the tour is finished. Each stop holds its target, and you write all the text.  **The spotlight is a shadow.** The scrim is a box the size of the current target with a very large 'box-shadow' spread, and the shadow paints the darkness. A 'clip-path' on a full-screen scrim breaks as soon as an element between the scrim and the viewport is transformed.  The root measures the target's position in the browser. Nothing is measured on the server, because a tour starts only on request.  'open', 'default-open', 'helix-before-open', 'helix-before-close' and 'toggle' work as they do on 'Dialog'. Setting 'open' starts the run, and 'skip()' and 'requestOpen(false)' end it early.  The box the light falls on is on the 'spotlight' part as '--tour-spotlight-x', '--tour-spotlight-y', '--tour-spotlight-width' and '--tour-spotlight-height', for a sheet that draws its own light, such as a ring around the target.  Each stop is told its place in the run, from 'progress-label', such as "2 of 5". It describes the stop's panel, so a screen reader says it at every stop, and 'progress' draws it in the panel as well. A dialog or a floating stop, which has nothing to light, is shown over the 'backdrop' part. At a 'wait' stop the run waits for that stop's target to be on the page, and moves on by itself.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes. */
   "helix-headless-tour": DefineCustomElement<
     HelixHeadlessTour,
     HelixHeadlessTourVueProps,
@@ -15380,19 +16138,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTourStopVueProps,
     HelixHeadlessTourStopVueEvents
   >;
-  /** 'open' comes from 'MixinControllerOpen', the same state a disclosure holds, so you can respond to a branch opening and control the state yourself. The row renders 'aria-expanded'.  Each item is an element because it holds state: whether it is open, selected, and focused.  An item is a branch when something is slotted into 'children'. This is detected on the client, so server-rendered markup shows a leaf and the twisty appears on hydration.  **'href' makes the whole row a link**, rendered as an '<a>'. Enter, middle click, and the status bar then work anywhere on the row.  Pressing a branch, or Enter or Space on it, opens or closes it. A branch with a 'value' is chosen as well and sends 'helix-select', unless the tree has 'nesting="heading"', where a branch names the list under it.  A 'disabled' item is reached by the arrow keys and announced as unavailable, and a press, Enter or Space on it does nothing.  A 'lazy' item is a branch whose children you load when it opens: opening it sends 'helix-load', the row says it is busy, and the children you add appear in it. Remove 'lazy' once they are in. */
+  /** 'open' comes from 'MixinControllerOpen', the same state a disclosure holds, so you can respond to a branch opening and control the state yourself. The row renders 'aria-expanded'.  Each item is an element because it holds state: whether it is open, selected, and focused.  An item is a branch when something is slotted into 'children'. This is detected on the client, so server-rendered markup shows a leaf and the twisty appears on hydration.  **'href' makes the whole row a link**, rendered as an '<a>'. Enter, middle click, and the status bar then work anywhere on the row.  Pressing a branch, or Enter or Space on it, opens or closes it. A branch with a 'value' is chosen as well and sends 'helix-select', unless the tree has 'nesting="heading"', where a branch names the list under it, or 'selection-mode="leaf"', where only the items at the ends are chosen.  A 'disabled' item is reached by the arrow keys and announced as unavailable, and a press, Enter or Space on it does nothing.  A 'lazy' item is a branch whose children you load when it opens: opening it sends 'helix-load', the row says it is busy, and the children you add appear in it. Remove 'lazy' once they are in. */
   "helix-headless-tree-item": DefineCustomElement<
     HelixHeadlessTreeItem,
     HelixHeadlessTreeItemVueProps,
     HelixHeadlessTreeItemVueEvents
   >;
-  /** The tree is a single tab stop, and arrow keys move focus between items, as the tree pattern requires, so Tab moves past a long sidebar in one press. The tree moves the tab stop to the focused item, so the browser's focus order stays intact.  Items are found with 'instanceof', never by tag name, so the headless tier does not depend on the styled one.  Typing a letter moves to the next visible item whose name starts with it, and '*' opens every branch beside the focused item.  'selection-mode="multiple"' draws a check mark on every row and lets a reader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking a branch checks every item under it, and a branch some of whose items are checked is partly checked. Space or a press on the mark checks the focused row, and Enter or a press on a branch's row opens it. 'active' then holds the checked values, comma separated, which 'values' also gives as a list, and the tree says 'aria-multiselectable'. */
+  /** The tree is a single tab stop, and arrow keys move focus between items, as the tree pattern requires, so Tab moves past a long sidebar in one press. The tree moves the tab stop to the focused item, so the browser's focus order stays intact.  Items are found with 'instanceof', never by tag name, so the headless tier does not depend on the styled one.  Typing a letter moves to the next visible item whose name starts with it, and '*' opens every branch beside the focused item.  'selection-mode="multiple"' draws a check mark on every row and lets a reader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking a branch checks every item under it, and a branch some of whose items are checked is partly checked. Space or a press on the mark checks the focused row, and Enter or a press on a branch's row opens it. 'active' then holds the checked values, comma separated, which 'values' also gives as a list, and the tree says 'aria-multiselectable'.  'selection-mode="leaf"' chooses one item at a time and only the items at the ends: a press, Enter or Space on a branch opens or closes it and chooses nothing, as Web Awesome's 'leaf' mode does.  Keys: Up and Down Arrow move between the items a reader can see; Right Arrow opens a shut branch and then moves into it, and Left Arrow shuts an open one and then moves to its parent, the two swapping on a right-to-left page. Home and End go to the first and the last item, Enter and Space choose or open, and the tree's one tab stop stays on the item last reached. In a tree of check marks, Control+A (Command+A on an Apple keyboard) checks every item or clears them all, and Shift with Up or Down Arrow moves and checks. */
   "helix-headless-tree": DefineCustomElement<
     HelixHeadlessTree,
     HelixHeadlessTreeVueProps,
     HelixHeadlessTreeVueEvents
   >;
-  /** A trend has three parts: a direction of up, down, or neutral, the metric that moved, and a label for the period it moved over. The arrow shows the direction and its color shows whether the change is good. Direction and judgment are separate properties because they are separate facts.  'good' is unset by default, so a trend with no judgment is gray. For churn, latency, error rate, cost, and bounce rate, up is bad. Set the metric's polarity once with 'good', and the component picks the color from the direction.  The direction is also written as a word, so a screen reader reads it. The styled tier hides 'part="direction"' visually and keeps it in the accessibility tree. The words are properties, 'up-label' through 'worse-label', so a page in another language can set its own.  The metric and the label are bare slots. An element that assigned its own slot on connect would add an attribute to its host after upgrade, which the React server markup did not have. */
+  /** A trend has three parts: a 'movement' of up, down, or neutral, the metric that moved, and a label for the period it moved over. The arrow shows the movement and its color shows whether the change is good. Movement and judgment are separate properties because they are separate facts.  'good' is unset by default, so a trend with no judgment is gray. For churn, latency, error rate, cost, and bounce rate, up is bad. Set the metric's polarity once with 'good', and the component picks the color from the movement. The judgment is also a custom state, 'better' or 'worse', for a sheet of your own.  The movement is also written as a word, so a screen reader reads it. The styled tier hides 'part="direction"' visually and keeps it in the accessibility tree. The words are properties, 'up-label' through 'worse-label', so a page in another language can set its own. The arrow and any glyph slotted in its place are hidden from screen readers.  Slot one glyph per movement into 'up-icon', 'down-icon' and 'neutral-icon', and the trend shows the one that matches; a glyph in 'icon' stands in for all three. Inside a 'Stat', put the trend in the stat's 'trend' slot so it is read with the figure it qualifies.  The metric and the label are bare slots. An element that assigned its own slot on connect would add an attribute to its host after upgrade, which the React server markup did not have. */
   "helix-headless-trend": DefineCustomElement<
     HelixHeadlessTrend,
     HelixHeadlessTrendVueProps,
@@ -15410,19 +16168,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessVideoPlaylistMenuVueProps,
     HelixHeadlessVideoPlaylistMenuVueEvents
   >;
-  /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way.  **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside.  **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when:  - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end.  On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order. */
+  /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way.  **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside.  **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when:  - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end.  On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order.  **Keyboard.** Each entry is a button in the tab order, and Enter or Space plays it. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them. Its previous and next controls move through the entries in the same order the playlist does. */
   "helix-headless-video-playlist": DefineCustomElement<
     HelixHeadlessVideoPlaylist,
     HelixHeadlessVideoPlaylistVueProps,
     HelixHeadlessVideoPlaylistVueEvents
   >;
-  /** The picture is a native '<video>', so decoding, buffering, captions, Picture in Picture, AirPlay, and codecs come from the platform. The component replaces the control bar, because the native bar cannot be styled.  The scrubber and the volume are '<input type="range">' elements, so arrow keys, Home and End, touch targets, and screen reader announcements work as they do natively.  When you set 'controls', the browser's control bar is used, the Helix bar is not drawn, and the keys below are not bound, so a key press does not seek twice.  The keys match other players, and they are bound on the element only: - Space and 'k' play or pause. - The arrow keys seek and change the volume. - 'm' mutes. - 'f' toggles fullscreen.  '<source>' and '<track>' children are copied into the video. A media element selects resources from its own child nodes, and a slot is one node, so slotted sources would give the video no text tracks, no current source, and a 'readyState' of zero, and it would not play. They are copied so your light DOM stays intact, and are copied again whenever the slot changes.  The player sends every media event of its inner video under the same name, without bubbling, as a '<video>' sends it. Listen on the player as you would on a video: 'timeupdate', 'volumechange', 'loadedmetadata', 'error', and the rest. */
+  /** The picture is a native '<video>', so decoding, buffering, captions, Picture in Picture, AirPlay, and codecs come from the platform. The component replaces the control bar, because the native bar cannot be styled.  The scrubber and the volume are '<input type="range">' elements, so arrow keys, Home and End, touch targets, and screen reader announcements work as they do natively.  When you set 'controls', the browser's control bar is used, the Helix bar is not drawn, and the keys below are not bound, so a key press does not seek twice.  **Keyboard.** The keys match other players, and they are bound on the element only, so they work while focus is on the player.  | Key | What it does | |---|---| | Space, 'k' | Plays or pauses. Space on a button presses the button. | | Right, Left | Moves 5 seconds forward or back. | | Shift with Right or Left | Moves 10 seconds forward or back. | | 'l', 'j' | Moves 10 seconds forward or back, as the skip buttons do. | | Up, Down | Raises or lowers the volume by a tenth. | | 'm' | Mutes or unmutes. | | 'f' | Enters or leaves fullscreen. | | Tab | Moves through the controls on the bar. |  On the scrubber and the volume slider, the arrow keys, Page Up, Page Down, Home, and End move the slider, as on any range input.  '<source>' and '<track>' children are copied into the video. A media element selects resources from its own child nodes, and a slot is one node, so slotted sources would give the video no text tracks, no current source, and a 'readyState' of zero, and it would not play. They are copied so your light DOM stays intact, and are copied again whenever the slot changes.  The player sends every media event of its inner video under the same name, without bubbling, as a '<video>' sends it. Listen on the player as you would on a video: 'timeupdate', 'volumechange', 'loadedmetadata', 'error', and the rest. */
   "helix-headless-video": DefineCustomElement<
     HelixHeadlessVideo,
     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.  **Keyboard.** The list is one tab stop. Up and Down move between items, Home and End go to the first and the last, and Page Up and Page Down move by a screen. An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. Tab moves on into the focused row's own links and buttons. When the row holding the tab stop scrolls away, the stop moves to the first row on screen.  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.  **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. 'scrollToIndex' takes a reader to an item.  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.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | 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, Up, Down, 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'. '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'.  **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.  **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.  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,