@fusion.dev/helix-headless 0.154.0 → 0.156.0

package/types/vue.d.ts

@@ -177,6 +177,7 @@ import type {
   HelixScrolledEvent,
   HelixReadingChangeEvent,
   HelixReadingPressEvent,
+  HelixSelectEvent,
   HelixBeforeChangeEvent,
   HelixPressEvent,
   HelixBeforeMoveEvent,
@@ -191,7 +192,6 @@ import type {
   HelixReconnectEvent,
   HelixRelabelEvent,
   HelixRemoveEvent,
-  HelixSelectEvent,
   HelixActivateEvent,
   HelixSendEvent,
   HelixTypingEvent,
@@ -1148,6 +1148,15 @@ element's language. Leave the marks out of the text. */
 
 export type HelixHeadlessBlockquoteVueEvents = {};
 
+/** `HelixHeadlessBreadcrumb` component event */
+export type HelixHeadlessBreadcrumbElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessBreadcrumb,
+  E
+>;
+/** `helix-select` event type */
+export type HelixHeadlessBreadcrumbHelixSelectElementEvent =
+  HelixHeadlessBreadcrumbElementEvent<HelixSelectEvent>;
+
 export type HelixHeadlessBreadcrumbVueProps = {
   /** Marks this item as the page you are on. */
   current?: (HelixHeadlessBreadcrumb["current"]) | undefined;
@@ -1177,7 +1186,10 @@ The consumer's decision. */
   target?: (HelixHeadlessBreadcrumb["target"]) | undefined;
 };
 
-export type HelixHeadlessBreadcrumbVueEvents = {};
+export type HelixHeadlessBreadcrumbVueEvents = {
+  /** A plain press on the crumb's link, with its `href` as the value, before the browser follows it. Cancelable: cancel it to keep the browser from following, as a client-side router does. */
+  "helix-select": HelixHeadlessBreadcrumbHelixSelectElementEvent;
+};
 
 export type HelixHeadlessBreadcrumbsVueProps = {
   /** The name of the button that shows a folded trail's hidden crumbs. `{count}`
@@ -1857,13 +1869,22 @@ units. */
 card and `{width}` and `{height}` for its new size, in the document's
 units. */
   resizedLabel?: (HelixHeadlessCanvas["resizedLabel"]) | undefined;
+  /** What a screen reader calls the board in place of its role, after its
+name: "Release plan, canvas". Said only where the board has a name of its
+own, since the fallback name is the same word. Empty leaves the role. */
+  "role-label"?: (HelixHeadlessCanvas["roleLabel"]) | undefined;
+  /** What a screen reader calls the board in place of its role, after its
+name: "Release plan, canvas". Said only where the board has a name of its
+own, since the fallback name is the same word. Empty leaves the role. */
+  roleLabel?: (HelixHeadlessCanvas["roleLabel"]) | undefined;
   /** The names of the selected cards and connections, comma separated. Empty
 when nothing is selected.
 
 **Comma separated, the way `Listbox` writes a multiple value**, so a page
 reads one selection the same way wherever it comes from. A click, or a key
-that lands on one, selects it alone; Shift, Command or Control with a click
-adds or takes one away, and so does Space; Command or Control with A
+that lands on one, selects it alone; Command or Control with an arrow key
+moves without selecting; Shift, Command or Control with a click adds or
+takes one away, and so does Space; Command or Control with A
 selects everything; Shift and a drag across the empty board selects the
 cards the box touches. A click on the empty board, or Escape, selects
 nothing. Dragging, Shift with an arrow, and Delete act on the whole
@@ -2625,6 +2646,16 @@ export type HelixHeadlessChatHelixSendElementEvent =
   HelixHeadlessChatElementEvent<HelixSendEvent>;
 
 export type HelixHeadlessChatVueProps = {
+  /** What a screen reader hears when a turn arrives. `{author}` is who wrote
+it, as its name says it, and `{text}` its words. A turn with no author a
+reader can be told, a turn by `them` with no `author-label`, says its
+words alone. */
+  "arrival-label"?: (HelixHeadlessChat["arrivalLabel"]) | undefined;
+  /** What a screen reader hears when a turn arrives. `{author}` is who wrote
+it, as its name says it, and `{text}` its words. A turn with no author a
+reader can be told, a turn by `them` with no `author-label`, says its
+words alone. */
+  arrivalLabel?: (HelixHeadlessChat["arrivalLabel"]) | undefined;
   /** Declarations for the turns from `turns` by each author, keyed by `author`,
 as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
 
@@ -2808,8 +2839,36 @@ locale. */
 Absent, or empty, is this sentence, or the words registered for the page's
 locale. */
   valueMissingMessage?: (HelixHeadlessCheckboxGroup["valueMissingMessage"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessCheckboxGroup["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessCheckboxGroup["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessCheckboxGroup["feedback"]) | undefined;
@@ -2929,8 +2988,36 @@ was, and the control says `aria-readonly`. A script can still set
 The attribute is `readonly`, which is the platform's spelling for the
 text fields. */
   readOnly?: (HelixHeadlessCheckbox["readOnly"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessCheckbox["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessCheckbox["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessCheckbox["feedback"]) | undefined;
@@ -3188,7 +3275,8 @@ Passed to the panel, whose square, hue ramp and presets say the color's
 name, and read by the swatch in `swatch`, which says it before the value.
 Color Picker lists the keys. */
   colorWords?: (HelixHeadlessColorInput["colorWords"]) | undefined;
-  /** The syntax the value is written in: `hex`, `rgb`, or `hsl`.
+  /** The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or
+`hsb`, as Color Picker's `format`.
 
 **Undefaulted, because it reflects.** The two together stamp an attribute
 onto every host anybody renders, including the ones nobody configured: the
@@ -3295,8 +3383,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessColorInput["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessColorInput["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessColorInput["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessColorInput["feedback"]) | undefined;
@@ -3423,8 +3539,9 @@ language hears its own rather than English between its own labels. */
   brightnessLabel?: (HelixHeadlessColorPicker["brightnessLabel"]) | undefined;
   /** Whether the picker shows a number field for each channel of the color, as
 React Aria's ColorField does with `channel`: red, green and blue for hex
-and rgb, hue, saturation and lightness for hsl, and the opacity with
-`alpha`.
+and rgb, hue, saturation and lightness for hsl, hue, saturation and
+brightness for hsb, lightness, chroma and hue for oklch, and the opacity
+with `alpha`.
 
 For a reader who has the numbers from a brand guide, and for a keyboard,
 where typing 128 is quicker than holding an arrow key. The fields follow
@@ -3432,13 +3549,20 @@ the syntax the format toggle sets. */
   "channel-fields"?: (HelixHeadlessColorPicker["channelFields"]) | undefined;
   /** Whether the picker shows a number field for each channel of the color, as
 React Aria's ColorField does with `channel`: red, green and blue for hex
-and rgb, hue, saturation and lightness for hsl, and the opacity with
-`alpha`.
+and rgb, hue, saturation and lightness for hsl, hue, saturation and
+brightness for hsb, lightness, chroma and hue for oklch, and the opacity
+with `alpha`.
 
 For a reader who has the numbers from a brand guide, and for a keyboard,
 where typing 128 is quicker than holding an arrow key. The fields follow
 the syntax the format toggle sets. */
   channelFields?: (HelixHeadlessColorPicker["channelFields"]) | undefined;
+  /** What the chroma channel's field is called, in `channel-fields` with
+oklch. */
+  "chroma-label"?: (HelixHeadlessColorPicker["chromaLabel"]) | undefined;
+  /** What the chroma channel's field is called, in `channel-fields` with
+oklch. */
+  chromaLabel?: (HelixHeadlessColorPicker["chromaLabel"]) | undefined;
   /** The words a color's name is spoken in, as JSON keyed by their English,
 such as `{"red": "rot", "vibrant": "kräftiges"}`.
 
@@ -3479,10 +3603,16 @@ the color. */
   "eyedropper-label"?: (HelixHeadlessColorPicker["eyedropperLabel"]) | undefined;
   /** What the eyedropper is called. */
   eyedropperLabel?: (HelixHeadlessColorPicker["eyedropperLabel"]) | undefined;
-  /** The syntax the value is written in: `hex`, `rgb`, or `hsl`.
+  /** The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or
+`hsb`.
 
 Only what is written. Everything is read whatever this says, so a picker on
-`hex` still takes an `rgb()` handed to it and stores the hex for it. */
+`hex` still takes an `rgb()` or an `oklch()` handed to it and stores the
+hex for it. `oklch` writes the sRGB color the picker holds, such as
+`oklch(62.8% 0.258 29.2)`; a color outside sRGB that is handed in is
+clipped to it. `hsb` writes the picker's own model, `hsb(0, 100%, 100%)`,
+as React Aria's and Zag's color strings do. It is not CSS, so the toggle
+walks the other four. */
   format?: (HelixHeadlessColorPicker["format"]) | undefined;
   /** What the syntax toggle is called, with `{format}` filled in. */
   "format-label"?: (HelixHeadlessColorPicker["formatLabel"]) | undefined;
@@ -3492,15 +3622,21 @@ Only what is written. Everything is read whatever this says, so a picker on
   "green-label"?: (HelixHeadlessColorPicker["greenLabel"]) | undefined;
   /** What the green channel's field is called, in `channel-fields`. */
   greenLabel?: (HelixHeadlessColorPicker["greenLabel"]) | undefined;
+  /** Help under the picker, such as what the color is used for. The `hint`
+slot takes richer content. */
+  hint?: (HelixHeadlessColorPicker["hint"]) | undefined;
   /** What the hue channel is called. */
   "hue-label"?: (HelixHeadlessColorPicker["hueLabel"]) | undefined;
   /** What the hue channel is called. */
   hueLabel?: (HelixHeadlessColorPicker["hueLabel"]) | undefined;
+  /** The name above the picker, such as "Brand color". The picker is then a
+group with this name. The `label` slot takes richer content. */
+  label?: (HelixHeadlessColorPicker["label"]) | undefined;
   /** What the lightness channel's field is called, in `channel-fields` with
-hsl. */
+hsl and oklch. */
   "lightness-label"?: (HelixHeadlessColorPicker["lightnessLabel"]) | undefined;
   /** What the lightness channel's field is called, in `channel-fields` with
-hsl. */
+hsl and oklch. */
   lightnessLabel?: (HelixHeadlessColorPicker["lightnessLabel"]) | undefined;
   /** Hides the eyedropper. Without it, the eyedropper appears in browsers that
 support one. */
@@ -3844,6 +3980,22 @@ 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;
+  /** What the form receives for each chosen option: `key`, its `value`, or
+`text`, its words, as React Aria's ComboBox `formValue` offers.
+
+`text` is for a server that wants what the reader saw, such as a city's
+name. A value no option carries, typed with `allows-custom-value` or made
+with `creatable`, is sent as it is either way. Absent is `key`, and the
+host carries no attribute for it. */
+  "form-value"?: (HelixHeadlessCombobox["formValue"]) | undefined;
+  /** What the form receives for each chosen option: `key`, its `value`, or
+`text`, its words, as React Aria's ComboBox `formValue` offers.
+
+`text` is for a server that wants what the reader saw, such as a city's
+name. A value no option carries, typed with `allows-custom-value` or made
+with `creatable`, is sent as it is either way. Absent is `key`, and the
+host carries no attribute for it. */
+  formValue?: (HelixHeadlessCombobox["formValue"]) | 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. */
@@ -4020,8 +4172,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessCombobox["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessCombobox["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessCombobox["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessCombobox["feedback"]) | undefined;
@@ -4133,6 +4313,13 @@ Empty turns it off, for a consumer who opens the palette from a button or
 from their own shortcut handler. There is no list of defaults to fight
 with: one key, said once. */
   hotkey?: (HelixHeadlessCommand["hotkey"]) | undefined;
+  /** Draws the palette in the page, where it stands, with no dialog: a search
+over a list of commands, as React Aria's Autocomplete is drawn.
+
+The list is always shown, and `hotkey` puts focus in its filter field.
+Choosing a command says `helix-select` and leaves the list where it is,
+and `open`, `toggle` and the dialog's parts do nothing. */
+  inline?: (HelixHeadlessCommand["inline"]) | 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
@@ -4160,6 +4347,15 @@ some. Absent, `empty-text` shows. See Listbox's `no-results-text`. */
   /** 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 page of commands shown, by name: empty for the commands you write
+with no `slot`, or a name for the commands slotted as `page:` and the
+name, such as `slot="page:theme"`.
+
+An option with `opens` set to a name goes to that page when it is chosen,
+in place of running, and Backspace in an empty filter goes back to the
+page before. Closing the palette goes back to the first page. Set it to
+open the palette on a page of your choosing. */
+  page?: (HelixHeadlessCommand["page"]) | 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, where
@@ -4195,6 +4391,15 @@ hydration, or diffed by a framework, it comes back holding whatever the
 last reader did rather than what the author wrote. `:state(open)` carries
 the resolved state for stylesheets, which is what the mirror is for. */
   open?: (HelixHeadlessCommand["open"]) | undefined;
+  /** The commands as data, for a palette too long to draw whole: each a value,
+which is also its words, or a record with a `value`, a `label` and
+`disabled`. Handed to the list, which draws only the commands in sight and
+reads no children while it is set. See Listbox's `items`.
+
+Choosing one says `helix-select` with its value, as a child option does.
+A command that is a link, or that has an `alternate`, is an option you
+write as a child. */
+  items?: (HelixHeadlessCommand["items"]) | undefined;
 };
 
 export type HelixHeadlessCommandVueEvents = {
@@ -4448,6 +4653,22 @@ is set. */
   "dropped-label"?: (HelixHeadlessDataTable["droppedLabel"]) | undefined;
   /** What screen readers hear when a row is dropped, with `reorderable-rows`. */
   droppedLabel?: (HelixHeadlessDataTable["droppedLabel"]) | undefined;
+  /** The text shown and announced when the rows could not load, such as "The
+files did not load". Set it when a fetch fails, and clear it once you try
+again. Empty, the default, shows nothing.
+
+While it is set, a line after the rows shows it, or your own content in the
+`error` slot, in place of the empty and loading lines, and the live region
+says it. */
+  "error-text"?: (HelixHeadlessDataTable["errorText"]) | undefined;
+  /** The text shown and announced when the rows could not load, such as "The
+files did not load". Set it when a fetch fails, and clear it once you try
+again. Empty, the default, shows nothing.
+
+While it is set, a line after the rows shows it, or your own content in the
+`error` slot, in place of the empty and loading lines, and the live region
+says it. */
+  errorText?: (HelixHeadlessDataTable["errorText"]) | undefined;
   /** The estimated height of a row before it is drawn, in pixels.
 
 Only read while `windowed`, and a starting guess rather than a claim: a
@@ -5138,8 +5359,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessDateInput["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessDateInput["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessDateInput["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessDateInput["feedback"]) | undefined;
@@ -5266,15 +5515,22 @@ speaks it. Unset is the sentence registered for the page's language, then
 the English. `{mode}` is `single`, `range` or `multiple`, so each can have
 its own sentence. */
   badInputMessage?: (HelixHeadlessDatePicker["badInputMessage"]) | undefined;
-  /** The calendar the heading, the days, and the months are written in:
-`gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, the five whose
-months are the Gregorian months.
-
-Absent is the locale's own where it is one of the five, such as
-`buddhist` for `th-TH` or `japanese` for `ja-JP-u-ca-japanese`, and
-`gregory` for every other, such as `persian` for `fa-IR`, so the heading
-names the Gregorian month the grid shows. The value is `YYYY-MM-DD` in
-every calendar. */
+  /** The calendar the heading, the days, and the months are written in.
+
+`gregory`, `buddhist`, `japanese`, `roc`, and `iso8601` are the five
+whose months are the Gregorian months. Absent is the locale's own where
+it is one of the five, such as `buddhist` for `th-TH` or `japanese` for
+`ja-JP-u-ca-japanese`, and `gregory` for every other, such as `persian`
+for `fa-IR`.
+
+`persian`, `hebrew`, `islamic-umalqura`, `islamic-civil`, `ethiopic`,
+`coptic`, and `indian` draw a calendar with months of its own, as React
+Aria's calendars do: each grid is one of that calendar's months, the
+Hebrew leap month and Ethiopia's five-day thirteenth month included, and
+Previous, Next and the page keys move by those months. `month` and
+`helix-navigate` then name a month by its first day, `YYYY-MM-DD`. The
+heading stays text, as the months and years views are drawn in Gregorian
+months only. The value is `YYYY-MM-DD` in every calendar. */
   calendar?: (HelixHeadlessDatePicker["calendar"]) | undefined;
   /** The month to open on when `month` is not set. */
   "default-month"?: (HelixHeadlessDatePicker["defaultMonth"]) | undefined;
@@ -5333,8 +5589,9 @@ its days. */
   min?: (HelixHeadlessDatePicker["min"]) | undefined;
   /** How many dates can be held at once. */
   mode?: (HelixHeadlessDatePicker["mode"]) | undefined;
-  /** The month shown, as `YYYY-MM`. When it is not set, it follows `value`,
-then the current month.
+  /** The month shown, as `YYYY-MM`, or as its first day, `YYYY-MM-DD`, under a
+`calendar` with months of its own. When it is not set, it follows
+`value`, then the current month.
 
 Separate from `value` on purpose, so paging selects nothing and a consumer
 can drive the view. Reading gives the month on show; writing sets it, and
@@ -5436,6 +5693,22 @@ date including the one already chosen. */
   "step-mismatch-message"?: (HelixHeadlessDatePicker["stepMismatchMessage"]) | undefined;
   /** The validation message for a date that `step` skips. */
   stepMismatchMessage?: (HelixHeadlessDatePicker["stepMismatchMessage"]) | undefined;
+  /** The time zone today is read in, such as `America/New_York`, as React
+Aria's `today(timeZone)` reads it. Empty is the reader's own.
+
+Dates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:
+the day marked `aria-current` and `day-today`, and the month a picker
+with no value opens on. A desk in Tokyo booking for an office in New York
+sets `America/New_York`, and today is the office's. */
+  "time-zone"?: (HelixHeadlessDatePicker["timeZone"]) | undefined;
+  /** The time zone today is read in, such as `America/New_York`, as React
+Aria's `today(timeZone)` reads it. Empty is the reader's own.
+
+Dates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:
+the day marked `aria-current` and `day-today`, and the month a picker
+with no value opens on. A desk in Tokyo booking for an office in New York
+sets `America/New_York`, and today is the office's. */
+  timeZone?: (HelixHeadlessDatePicker["timeZone"]) | undefined;
   /** The validation message for a date that `disable-dates` or `disable-days`
 bars. */
   "unavailable-message"?: (HelixHeadlessDatePicker["unavailableMessage"]) | undefined;
@@ -6208,8 +6481,36 @@ removes rather than as "Remove" said once per file. A label with no
   "trigger-label"?: (HelixHeadlessFileInput["triggerLabel"]) | undefined;
   /** The trigger's text when nothing is slotted into it. */
   triggerLabel?: (HelixHeadlessFileInput["triggerLabel"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessFileInput["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessFileInput["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessFileInput["feedback"]) | undefined;
@@ -6584,8 +6885,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessFilterInput["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessFilterInput["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessFilterInput["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessFilterInput["feedback"]) | undefined;
@@ -6846,6 +7175,12 @@ written in the locale, and each language writes the forms it has. */
   /** How many links from the selected note to show, for its local graph. Unset
 shows every note. The list holds what the drawing shows. */
   depth?: (HelixHeadlessGraph["depth"]) | undefined;
+  /** What the panel shows when the list holds no notes: the graph has none, or
+a search or the legend hid them all. A slotted `empty` replaces it. */
+  "empty-label"?: (HelixHeadlessGraph["emptyLabel"]) | undefined;
+  /** What the panel shows when the list holds no notes: the graph has none, or
+a search or the legend hid them all. A slotted `empty` replaces it. */
+  emptyLabel?: (HelixHeadlessGraph["emptyLabel"]) | undefined;
   /** The graph's name where `label` is empty and the host has no
 `aria-label`. */
   "fallback-label"?: (HelixHeadlessGraph["fallbackLabel"]) | undefined;
@@ -6902,6 +7237,14 @@ such as at the top of a page, where the drawing takes the whole frame. */
   "notes-label"?: (HelixHeadlessGraph["notesLabel"]) | undefined;
   /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
   notesLabel?: (HelixHeadlessGraph["notesLabel"]) | undefined;
+  /** What a screen reader calls the graph in place of its role, after its
+name: "Research notes, graph". Said only where the graph has a name of its
+own, since the fallback name is the same word. Empty leaves the role. */
+  "role-label"?: (HelixHeadlessGraph["roleLabel"]) | undefined;
+  /** What a screen reader calls the graph in place of its role, after its
+name: "Research notes, graph". Said only where the graph has a name of its
+own, since the fallback name is the same word. Empty leaves the role. */
+  roleLabel?: (HelixHeadlessGraph["roleLabel"]) | undefined;
   /** The search field's name. */
   "search-label"?: (HelixHeadlessGraph["searchLabel"]) | undefined;
   /** The search field's name. */
@@ -7821,8 +8164,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessInput["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessInput["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessInput["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessInput["feedback"]) | undefined;
@@ -8557,6 +8928,9 @@ export type HelixHeadlessListHelixBeforeChangeElementEvent =
 /** `helix-before-reorder` event type */
 export type HelixHeadlessListHelixBeforeReorderElementEvent =
   HelixHeadlessListElementEvent<HelixBeforeReorderEvent>;
+/** `helix-load-more` event type */
+export type HelixHeadlessListHelixLoadMoreElementEvent =
+  HelixHeadlessListElementEvent<HelixLoadMoreEvent>;
 /** `helix-reorder` event type */
 export type HelixHeadlessListHelixReorderElementEvent =
   HelixHeadlessListElementEvent<HelixReorderEvent>;
@@ -8572,6 +8946,12 @@ refused, in a `reorderable` list. */
   "dropped-label"?: (HelixHeadlessList["droppedLabel"]) | undefined;
   /** What screen readers hear when a row is dropped, in a `reorderable` list. */
   droppedLabel?: (HelixHeadlessList["droppedLabel"]) | undefined;
+  /** The text of the row shown while the list has no rows, where the `empty`
+slot is empty. Empty, the default, shows no row. */
+  "empty-label"?: (HelixHeadlessList["emptyLabel"]) | undefined;
+  /** The text of the row shown while the list has no rows, where the `empty`
+slot is empty. Empty, the default, shows no row. */
+  emptyLabel?: (HelixHeadlessList["emptyLabel"]) | undefined;
   /** The kind of list, which follows from the content.
 
 On the headless tier because it is meaning rather than decoration, the same
@@ -8595,6 +8975,19 @@ has to survive with the stylesheet turned off.
   kind?: (HelixHeadlessList["kind"]) | undefined;
   /** The list's name, read by screen readers. */
   label?: (HelixHeadlessList["label"]) | undefined;
+  /** Marks the list as busy fetching more rows, and draws a row after the last
+that says so. The list asks for no more while it is set. */
+  loading?: (HelixHeadlessList["loading"]) | undefined;
+  /** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
+  "loading-label"?: (HelixHeadlessList["loadingLabel"]) | undefined;
+  /** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
+  loadingLabel?: (HelixHeadlessList["loadingLabel"]) | undefined;
+  /** Sends `helix-load-more` once the end of the list comes within a screen of
+view, so you can add the next rows as a reader nears them. */
+  "load-more"?: (HelixHeadlessList["loadMore"]) | undefined;
+  /** Sends `helix-load-more` once the end of the list comes within a screen of
+view, so you can add the next rows as a reader nears them. */
+  loadMore?: (HelixHeadlessList["loadMore"]) | undefined;
   /** What screen readers hear each time an arrow key moves a held row, in a
 `reorderable` list. `{name}` is the row's words, `{position}` the place it
 would go, counting from 1, and `{count}` the number of rows. */
@@ -8650,7 +9043,7 @@ consumer would have written on an `<ol>`.
 `type` is only `list-style-type`. `start` and `reversed` move the count
 itself. */
   type?: (HelixHeadlessList["type"]) | undefined;
-  /** The selected rows' values, separated by commas, in a list that selects.
+  /** The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
 
 Set it to start with rows selected. A row's value is its `value`, or its
 words where it has none. */
@@ -8666,6 +9059,8 @@ export type HelixHeadlessListVueEvents = {
   "helix-before-change": HelixHeadlessListHelixBeforeChangeElementEvent;
   /** Fired when a row is dropped at a new place, in a `reorderable` list, with every row's value in the new order. Cancelable: cancel it to keep the row where it is. */
   "helix-before-reorder": HelixHeadlessListHelixBeforeReorderElementEvent;
+  /** Fired, in a list with `load-more`, when the end of the list comes within a screen of view, once for each number of rows. */
+  "helix-load-more": HelixHeadlessListHelixLoadMoreElementEvent;
   /** Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen. */
   "helix-reorder": HelixHeadlessListHelixReorderElementEvent;
 };
@@ -8864,8 +9259,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessListbox["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessListbox["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessListbox["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessListbox["feedback"]) | undefined;
@@ -9399,6 +9822,14 @@ the standard, themed map. The layers menu chooses it. */
 `connectMap` keeps it current, and the 3D button is pressed while it is
 above `0`. */
   pitch?: (HelixHeadlessMap["pitch"]) | undefined;
+  /** What a screen reader calls the map in place of its role, after its
+name: "Edinburgh, map". Said only where the map has a name of its
+own, since the fallback name is the same word. Empty leaves the role. */
+  "role-label"?: (HelixHeadlessMap["roleLabel"]) | undefined;
+  /** What a screen reader calls the map in place of its role, after its
+name: "Edinburgh, map". Said only where the map has a name of its
+own, since the fallback name is the same word. Empty leaves the role. */
+  roleLabel?: (HelixHeadlessMap["roleLabel"]) | undefined;
   /** The rotate left button's label. */
   "rotate-left-label"?: (HelixHeadlessMap["rotateLeftLabel"]) | undefined;
   /** The rotate left button's label. */
@@ -10536,6 +10967,20 @@ filled in, written in the locale. */
   readonly?: (HelixHeadlessNumberInput["readOnly"]) | undefined;
   /** Prevents editing. The value is still submitted with the form. */
   readOnly?: (HelixHeadlessNumberInput["readOnly"]) | undefined;
+  /** The words screen readers announce for the field's role, set as its
+`aria-roledescription`. Translate it with the rest of your text, or empty
+it to leave the role as `spinbutton`.
+
+Never written on iOS and iPadOS, where a role description stops VoiceOver
+saying that the field is required. */
+  "role-label"?: (HelixHeadlessNumberInput["roleLabel"]) | undefined;
+  /** The words screen readers announce for the field's role, set as its
+`aria-roledescription`. Translate it with the rest of your text, or empty
+it to leave the role as `spinbutton`.
+
+Never written on iOS and iPadOS, where a role description stops VoiceOver
+saying that the field is required. */
+  roleLabel?: (HelixHeadlessNumberInput["roleLabel"]) | 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,
@@ -10595,8 +11040,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessNumberInput["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessNumberInput["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessNumberInput["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessNumberInput["feedback"]) | undefined;
@@ -10842,6 +11315,14 @@ needs a height, which is a stylesheet rule reading this attribute. */
 Writing opens exactly these and closes every other, keeping the active row
 where it stays visible. A property, never an attribute. */
   expanded?: (HelixHeadlessObjectInspector["expanded"]) | undefined;
+  /** Draws an entry's value your way, given the value and its entry. Set it as
+a property.
+
+It returns what Lit renders: a template from `html`, a string, or a DOM
+node. `undefined` draws the value as the inspector does, so a function can
+draw some entries and leave the rest, such as only the strings under
+`/links`. */
+  renderValue?: (HelixHeadlessObjectInspector["renderValue"]) | undefined;
   /** The value to show, when your code already holds it as an object.
 
 Takes precedence over `for`. Anything JSON can say is drawn; anything else
@@ -10980,6 +11461,15 @@ simply the accessible name.
 `<option label>` does: written the platform's way, a select listed a row of
 nothing for every choice. */
   label?: (HelixHeadlessOption["label"]) | undefined;
+  /** The page of commands this option opens, by name, where choosing it would
+otherwise run it.
+
+Declared here and acted on by whatever owns the list, as `alternate` is.
+`Command` is the only owner that reads it: choosing the option shows the
+commands slotted as `page:` and the name, such as `slot="page:theme"`,
+and Backspace in an empty filter goes back. Empty is an option that opens
+nothing, which is nearly every option. */
+  opens?: (HelixHeadlessOption["opens"]) | undefined;
   /** The link's `rel`. Set it whenever you set `target="_blank"`. */
   rel?: (HelixHeadlessOption["rel"]) | undefined;
   /** Whether this choice is currently chosen.
@@ -11459,8 +11949,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessPinInput["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessPinInput["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessPinInput["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessPinInput["feedback"]) | undefined;
@@ -11880,8 +12398,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessRadioGroup["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessRadioGroup["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessRadioGroup["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessRadioGroup["feedback"]) | undefined;
@@ -12162,8 +12708,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessRating["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessRating["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessRating["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessRating["feedback"]) | undefined;
@@ -12546,8 +13120,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessSelect["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessSelect["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessSelect["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessSelect["feedback"]) | undefined;
@@ -12594,6 +13196,18 @@ the stop moves on the trigger inside the shadow root, as Button's does.
 No attribute, because it is coordination between elements rather than
 anything a consumer sets. */
   focusable?: (HelixHeadlessSelect["focusable"]) | undefined;
+  /** The options as data, for a list too long to draw whole: each a value,
+which is also its words, or a record with a `value`, a `label` and
+`disabled`. Passed to the list, which draws only the options in sight,
+as Listbox's `items` does. Set, the options you write as children are
+not read.
+
+The trigger shows the chosen options' labels, the letters and the Left
+and Right keys on the closed trigger choose over the whole set, and a
+chosen value whose option leaves `items` drops out of `value`.
+`value-content` is not called for `items`. Import the Option family as
+well, whose elements are drawn. */
+  items?: (HelixHeadlessSelect["items"]) | undefined;
   /** What the trigger shows for the chosen options: a function given them, in
 the order they appear, that returns text, an element or a Lit template.
 
@@ -12758,9 +13372,11 @@ 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. */
+The pair is one string, `"10,50"`, which is what `value` and
+`MixinControllerValue` hold. A form receives two entries under the name,
+`price=10&price=50`, as React Aria's two thumbs send theirs.
+`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}`. */
@@ -12768,12 +13384,34 @@ filled in. Write it in the page's language, such as `{start} bis {end}`. */
   /** 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;
+  /** Whether a reader can see and focus the value and cannot change it. A
+read-only slider still submits its value.
+
+React Aria's `isReadOnly`. Each thumb stays a tab stop and says
+`aria-readonly`. The arrow keys, the page keys, Home, End, and a drag
+leave the value where it is. A script can still set `value`. */
+  readonly?: (HelixHeadlessSlider["readOnly"]) | undefined;
+  /** Whether a reader can see and focus the value and cannot change it. A
+read-only slider still submits its value.
+
+React Aria's `isReadOnly`. Each thumb stays a tab stop and says
+`aria-readonly`. The arrow keys, the page keys, Home, End, and a drag
+leave the value where it is. A script can still set `value`. */
+  readOnly?: (HelixHeadlessSlider["readOnly"]) | undefined;
   /** Shows the chosen value beside the track. */
   "show-value"?: (HelixHeadlessSlider["showValue"]) | undefined;
   /** Shows the chosen value beside the track. */
   showValue?: (HelixHeadlessSlider["showValue"]) | undefined;
   /** How far one press of an arrow key moves the thumb. */
   step?: (HelixHeadlessSlider["step"]) | undefined;
+  /** The name of a thumb between a range's first and last, read after the
+slider's label, with `{index}` filled in: its place, counted from 1. The
+first is `minimum-label` and the last `maximum-label`. */
+  "thumb-label"?: (HelixHeadlessSlider["thumbLabel"]) | undefined;
+  /** The name of a thumb between a range's first and last, read after the
+slider's label, with `{index}` filled in: its place, counted from 1. The
+first is `minimum-label` and the last `maximum-label`. */
+  thumbLabel?: (HelixHeadlessSlider["thumbLabel"]) | undefined;
   /** Whether each thumb shows its value in a bubble beside it, as Web
 Awesome's `with-tooltip`. The styled slider shows the bubbles while the
 slider is under the pointer or holds focus. They repeat what each thumb
@@ -12800,8 +13438,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessSlider["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessSlider["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessSlider["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessSlider["feedback"]) | undefined;
@@ -13023,10 +13689,20 @@ export type HelixHeadlessSpeedDialItemHelixSelectElementEvent =
 export type HelixHeadlessSpeedDialItemVueProps = {
   /** Whether the action is disabled, so it cannot be chosen. */
   disabled?: (HelixHeadlessSpeedDialItem["disabled"]) | undefined;
+  /** Whether the link downloads the file when the action is chosen. Only
+meaningful beside an `href`, and only for a file served from the page's
+origin. */
+  download?: (HelixHeadlessSpeedDialItem["download"]) | undefined;
+  /** The URL the action links to. Setting it draws the action as a link. */
+  href?: (HelixHeadlessSpeedDialItem["href"]) | undefined;
+  /** The link's `rel`. Set it whenever you set `target="_blank"`. */
+  rel?: (HelixHeadlessSpeedDialItem["rel"]) | undefined;
   /** The action's keyboard shortcut as a chord, such as `mod+s`, carried as
 `aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
 keyboard and Control elsewhere. Showing a shortcut does not bind it. */
   shortcut?: (HelixHeadlessSpeedDialItem["shortcut"]) | undefined;
+  /** Where the link opens, such as `_blank` for a new tab. */
+  target?: (HelixHeadlessSpeedDialItem["target"]) | undefined;
   /** The action's value, sent in `helix-select` when the action is chosen. */
   value?: (HelixHeadlessSpeedDialItem["value"]) | undefined;
 };
@@ -13075,13 +13751,17 @@ you described or labeled it yourself. */
   longPressLabel?: (HelixHeadlessSpeedDial["longPressLabel"]) | undefined;
   /** Space between the trigger and the actions, in pixels. */
   offset?: (HelixHeadlessSpeedDial["offset"]) | undefined;
-  /** What opens the dial. `click` opens it on a press of the trigger. Under
-`long-press`, a press is the trigger's own action, and the dial opens on a
-press held for half a second, or on Alt+Down or Alt+Up. */
+  /** What opens the dial. `click` opens it on a press of the trigger. `hover`
+also opens it while a mouse rests on the trigger, and closes it once the
+mouse has left. Under `long-press`, a press is the trigger's own action,
+and the dial opens on a press held for half a second, or on Alt+Down or
+Alt+Up. */
   "open-on"?: (HelixHeadlessSpeedDial["openOn"]) | undefined;
-  /** What opens the dial. `click` opens it on a press of the trigger. Under
-`long-press`, a press is the trigger's own action, and the dial opens on a
-press held for half a second, or on Alt+Down or Alt+Up. */
+  /** What opens the dial. `click` opens it on a press of the trigger. `hover`
+also opens it while a mouse rests on the trigger, and closes it once the
+mouse has left. Under `long-press`, a press is the trigger's own action,
+and the dial opens on a press held for half a second, or on Alt+Down or
+Alt+Up. */
   openOn?: (HelixHeadlessSpeedDial["openOn"]) | undefined;
   /** The direction the actions open in. They move to another side if that side
 does not fit.
@@ -13355,6 +14035,16 @@ export type HelixHeadlessStepsHelixSelectElementEvent =
   HelixHeadlessStepsElementEvent<HelixSelectEvent>;
 
 export type HelixHeadlessStepsVueProps = {
+  /** Whether the arrow keys move focus between the stages' names, along the
+way the steps run. Off by default, so the arrows keep scrolling the page. */
+  arrows?: (HelixHeadlessSteps["arrows"]) | undefined;
+  /** What marks a stage `complete`.
+
+Absent, you do: each step's `complete` is yours, because a reader who
+steps back has finished more stages than the one they are on. `passed`
+marks every stage before the one a reader moves to, and leaves the marks
+when they go back. */
+  completion?: (HelixHeadlessSteps["completion"]) | undefined;
   /** The sequence's name, read by screen readers.
 
 A list of stages is a landmark a reader arrives at out of order, so it
@@ -13531,8 +14221,36 @@ was, and the control says `aria-readonly`. A script can still set
 The attribute is `readonly`, which is the platform's spelling for the
 text fields. */
   readOnly?: (HelixHeadlessSwitch["readOnly"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessSwitch["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessSwitch["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessSwitch["feedback"]) | undefined;
@@ -13873,6 +14591,22 @@ is set. */
   "dropped-label"?: (HelixHeadlessTable["droppedLabel"]) | undefined;
   /** What screen readers hear when a held row is dropped, in a `reorderable` table. */
   droppedLabel?: (HelixHeadlessTable["droppedLabel"]) | undefined;
+  /** The text shown and announced when the rows could not load. Set it when a
+fetch fails, and clear it once you try again. Empty, the default, shows
+nothing.
+
+While it is set, a line after the rows shows it, or your own content in the
+`error` slot, in place of the empty and loading lines, and the live region
+says it. */
+  "error-text"?: (HelixHeadlessTable["errorText"]) | undefined;
+  /** The text shown and announced when the rows could not load. Set it when a
+fetch fails, and clear it once you try again. Empty, the default, shows
+nothing.
+
+While it is set, a line after the rows shows it, or your own content in the
+`error` slot, in place of the empty and loading lines, and the live region
+says it. */
+  errorText?: (HelixHeadlessTable["errorText"]) | undefined;
   /** The table's name where neither `label` nor an `aria-label` or
 `aria-labelledby` on the host gives it one. */
   "fallback-label"?: (HelixHeadlessTable["fallbackLabel"]) | undefined;
@@ -14076,6 +14810,12 @@ panels and tells a screen reader the list is vertical.
 
 Optional, so the resting row writes no attribute onto the host. */
   orientation?: (HelixHeadlessTabs["orientation"]) | undefined;
+  /** Whether a strip with more tabs than fit shows a button at each end it can
+scroll toward. */
+  "scroll-controls"?: (HelixHeadlessTabs["scrollControls"]) | undefined;
+  /** Whether a strip with more tabs than fit shows a button at each end it can
+scroll toward. */
+  scrollControls?: (HelixHeadlessTabs["scrollControls"]) | undefined;
   /** How the row of tabs is drawn.
 
 Unset is a raised pill on the selected tab with nothing behind the row,
@@ -14132,11 +14872,22 @@ export type HelixHeadlessTabElementEvent<E = Event> = TypedEvent<
   HelixHeadlessTab,
   E
 >;
+/** `helix-dismiss` event type */
+export type HelixHeadlessTabHelixDismissElementEvent =
+  HelixHeadlessTabElementEvent<HelixDismissEvent>;
 /** `helix-select` event type */
 export type HelixHeadlessTabHelixSelectElementEvent =
   HelixHeadlessTabElementEvent<HelixSelectEvent>;
 
 export type HelixHeadlessTabVueProps = {
+  /** The tooltip on the mark that closes a `dismissible` tab. The mark is for
+the pointer and hidden from screen readers, which hear the Delete key
+through `aria-keyshortcuts`. */
+  "dismiss-label"?: (HelixHeadlessTab["dismissLabel"]) | undefined;
+  /** The tooltip on the mark that closes a `dismissible` tab. The mark is for
+the pointer and hidden from screen readers, which hear the Delete key
+through `aria-keyshortcuts`. */
+  dismissLabel?: (HelixHeadlessTab["dismissLabel"]) | undefined;
   /** The URL the tab links to. Setting it renders the tab as a link, for a set
 of tabs that are pages of a site. */
   href?: (HelixHeadlessTab["href"]) | undefined;
@@ -14144,6 +14895,8 @@ of tabs that are pages of a site. */
   rel?: (HelixHeadlessTab["rel"]) | undefined;
   /** Where the link opens, such as `_blank`, for a tab with an `href`. */
   target?: (HelixHeadlessTab["target"]) | undefined;
+  /** Whether the element shows a control that dismisses it. */
+  dismissible?: (HelixHeadlessTab["dismissible"]) | undefined;
   /** Whether the item is disabled and cannot be chosen. */
   disabled?: (HelixHeadlessTab["disabled"]) | undefined;
   /** Whether the item is selected.
@@ -14158,6 +14911,8 @@ submits. */
 };
 
 export type HelixHeadlessTabVueEvents = {
+  /** A `dismissible` tab was asked to close. The tab does not remove itself, so remove it and its panel in response. Cancelable. */
+  "helix-dismiss": HelixHeadlessTabHelixDismissElementEvent;
   /** Fired when the tab is chosen. Cancelable: canceling it stops the change and leaves the decision to you. */
   "helix-select": HelixHeadlessTabHelixSelectElementEvent;
 };
@@ -14175,6 +14930,14 @@ export type HelixHeadlessTagGroupHelixDismissElementEvent =
   HelixHeadlessTagGroupElementEvent<HelixDismissEvent>;
 
 export type HelixHeadlessTagGroupVueProps = {
+  /** Keeps at least one tag selected once one is, as React Aria's
+`disallowEmptySelection`: a press or a key that would leave none selected
+is refused. Removing the last selected tag still takes it out of `value`. */
+  "disallow-empty-selection"?: (HelixHeadlessTagGroup["disallowEmptySelection"]) | undefined;
+  /** Keeps at least one tag selected once one is, as React Aria's
+`disallowEmptySelection`: a press or a key that would leave none selected
+is refused. Removing the last selected tag still takes it out of `value`. */
+  disallowEmptySelection?: (HelixHeadlessTagGroup["disallowEmptySelection"]) | undefined;
   /** The words the group shows and says once its last tag is removed, where
 nothing is in the `empty` slot. */
   "empty-label"?: (HelixHeadlessTagGroup["emptyLabel"]) | undefined;
@@ -14184,6 +14947,20 @@ nothing is in the `empty` slot. */
   /** The name of the set, such as "Filters", which a screen reader announces
 before its tags. */
   label?: (HelixHeadlessTagGroup["label"]) | undefined;
+  /** What a press, Space, or a move does to the tags already selected.
+`toggle`, the default, keeps them: a press adds or takes out the tag, and
+the arrow keys move focus alone. `replace` selects the tag alone, as a
+file list does, and the arrow keys carry the selection with focus.
+Control or Command with a press or Space adds or takes out one tag in
+`multiple`, and with an arrow moves focus without selecting. */
+  "selection-behavior"?: (HelixHeadlessTagGroup["selectionBehavior"]) | undefined;
+  /** What a press, Space, or a move does to the tags already selected.
+`toggle`, the default, keeps them: a press adds or takes out the tag, and
+the arrow keys move focus alone. `replace` selects the tag alone, as a
+file list does, and the arrow keys carry the selection with focus.
+Control or Command with a press or Space adds or takes out one tag in
+`multiple`, and with an arrow moves focus without selecting. */
+  selectionBehavior?: (HelixHeadlessTagGroup["selectionBehavior"]) | undefined;
   /** How many tags a reader can select: `single`, `multiple`, or none.
 
 Absent selects nothing, and the tags carry no selected state at all. */
@@ -14379,8 +15156,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessTextarea["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessTextarea["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessTextarea["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessTextarea["feedback"]) | undefined;
@@ -14738,8 +15543,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessTimeInput["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessTimeInput["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessTimeInput["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessTimeInput["feedback"]) | undefined;
@@ -14876,6 +15709,19 @@ A time not on the step is simply never offered, so it is not an error to
 name one, and naming every time in the list is how the empty state is
 reached honestly rather than by handing over an empty range. */
   disableTimes?: (HelixHeadlessTimePicker["disableTimes"]) | undefined;
+  /** What the list says when no time falls between `min` and `max`.
+
+The fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessTimePicker["emptyText"]) | undefined;
+  /** What the list says when no time falls between `min` and `max`.
+
+The fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessTimePicker["emptyText"]) | undefined;
+  /** Help under the times, such as the hours a shop is open, read by screen
+readers as the list's description. A message in `feedback` replaces it.
+
+The fallback of the `hint` slot. */
+  hint?: (HelixHeadlessTimePicker["hint"]) | undefined;
   /** The clock the times are written on: `h12` for twelve hours with a
 meridiem, `h23` for twenty-four.
 
@@ -14902,7 +15748,8 @@ English, "Stunde" in German. */
   hourLabel?: (HelixHeadlessTimePicker["hourLabel"]) | undefined;
   /** Accessible name for the list, which has no visible one of its own.
 
-An `aria-label` or `aria-labelledby` on the host names the list instead. */
+An `aria-label` or `aria-labelledby` on the host names the list instead,
+and so does a label slotted into `label`, which is also drawn above it. */
   label?: (HelixHeadlessTimePicker["label"]) | undefined;
   /** Language tag the times and the wheels' names are written in.
 
@@ -15156,6 +16003,11 @@ Whatever `<time>` accepts, which is a date, a time, both, a duration or a
 week. Unset, the label is written as it was given and nothing claims to
 know what instant it names. */
   datetime?: (HelixHeadlessTimelineItem["datetime"]) | undefined;
+  /** Writes the time as how long ago it was, or how long until it, from
+`datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
+`short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
+`long`. The words move on as they go stale. */
+  relative?: (HelixHeadlessTimelineItem["relative"]) | undefined;
   /** The kind of event. It sets the color of the mark and nothing else. */
   tone?: (HelixHeadlessTimelineItem["tone"]) | undefined;
 };
@@ -15355,8 +16207,36 @@ asking it meant. Writing always applies; `<helix-input value="x">` is the
 same statement in markup, and `default-value` is how markup seeds a value
 a reset should return to. */
   value?: (HelixHeadlessToggleGroup["value"]) | undefined;
-  /**  */
-  "aria-label"?: unknown;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  "aria-label"?: (HelixHeadlessToggleGroup["namedBy"]) | undefined;
+  /** The name a screen reader says for the field where it shows no label, as
+the platform's `aria-label`. It is drawn as a label and clipped, so it
+names the control inside, and a new one renders at once.
+
+**An `aria-label` is read when the field renders, and nothing else would
+render it again.** It is the platform's attribute and no property of this
+element's, so writing a new one scheduled no update and the label kept
+the old words. Data Table meets this on every column move: each row's
+checkbox is named by the first column, so reordering renames every one.
+
+A reactive property on the attribute, which is the one way Lit observes
+one. Overriding `observedAttributes` in a mixin compiled `this` to the
+mixin's own class, so every field observed only this mixin's attributes
+and dropped its own. Not reflected: the attribute is the consumer's. */
+  namedBy?: (HelixHeadlessToggleGroup["namedBy"]) | undefined;
   /** The validation message shown under the control. It replaces the
 browser's message. */
   feedback?: (HelixHeadlessToggleGroup["feedback"]) | undefined;
@@ -16010,6 +16890,18 @@ refused, in a `reorderable` tree. */
 An `aria-label` or `aria-labelledby` on the host names the tree too, and
 wins over this. */
   label?: (HelixHeadlessTree["label"]) | undefined;
+  /** What screen readers hear when an item moves into another branch, in a
+`reorderable` tree. `{name}` is the item's words, `{parent}` the words of
+the branch it moved into, or the tree's `label` for the top level,
+`{position}` its place there, counting from 1, and `{count}` the number of
+items there. */
+  "moved-into-label"?: (HelixHeadlessTree["movedIntoLabel"]) | undefined;
+  /** What screen readers hear when an item moves into another branch, in a
+`reorderable` tree. `{name}` is the item's words, `{parent}` the words of
+the branch it moved into, or the tree's `label` for the top level,
+`{position}` its place there, counting from 1, and `{count}` the number of
+items there. */
+  movedIntoLabel?: (HelixHeadlessTree["movedIntoLabel"]) | undefined;
   /** What screen readers hear each time an item moves, in a `reorderable`
 tree. `{name}` is the item's words, `{position}` its place among its
 siblings, counting from 1, and `{count}` the number of siblings. */
@@ -16303,6 +17195,20 @@ export type HelixHeadlessVideoPlaylistHelixEndElementEvent =
 export type HelixHeadlessVideoPlaylistVueProps = {
   /** The list's name, read by screen readers. */
   label?: (HelixHeadlessVideoPlaylist["label"]) | undefined;
+  /** What the live region says when the playlist moves to another entry.
+`{title}` is the entry's name.
+
+**A move a reader did not make is said.** At the end of a clip the
+playlist starts the next one, and the only other trace of that is the
+`aria-current` on a button the reader is not on. */
+  "playing-label"?: (HelixHeadlessVideoPlaylist["playingLabel"]) | undefined;
+  /** What the live region says when the playlist moves to another entry.
+`{title}` is the entry's name.
+
+**A move a reader did not make is said.** At the end of a clip the
+playlist starts the next one, and the only other trace of that is the
+`aria-current` on a button the reader is not on. */
+  playingLabel?: (HelixHeadlessVideoPlaylist["playingLabel"]) | undefined;
   /** What happens when an entry ends with no next one to go to. `one` plays the
 same entry again, and `all` goes from the last entry back to the first.
 Absent, the playlist stops on the last entry and sends `helix-end`.
@@ -16364,6 +17270,10 @@ permitted is the browser's policy, and what follows a refused autoplay is a
 paused player showing its start control, which is the correct thing to be
 looking at. */
   autoplay?: (HelixHeadlessVideo["autoplay"]) | undefined;
+  /** What the live region says when `c` turns captions off. */
+  "captions-hidden-label"?: (HelixHeadlessVideo["captionsHiddenLabel"]) | undefined;
+  /** What the live region says when `c` turns captions off. */
+  captionsHiddenLabel?: (HelixHeadlessVideo["captionsHiddenLabel"]) | undefined;
   /** The name of the captions control when the video has one track. The control
 turns that track on and off.
 
@@ -16384,6 +17294,10 @@ tracks. */
   /** The name of the row that turns captions off, when the video has several
 tracks. */
   captionsOffLabel?: (HelixHeadlessVideo["captionsOffLabel"]) | undefined;
+  /** What the live region says when `c` turns captions on. */
+  "captions-shown-label"?: (HelixHeadlessVideo["captionsShownLabel"]) | undefined;
+  /** What the live region says when `c` turns captions on. */
+  captionsShownLabel?: (HelixHeadlessVideo["captionsShownLabel"]) | undefined;
   /** Whether the browser draws its native controls. When set, this element draws
 no controls of its own.
 
@@ -16560,6 +17474,10 @@ writes the current entry's name here. */
   "more-label"?: (HelixHeadlessVideo["moreLabel"]) | undefined;
   /** What the button that opens `overflow-controls` is called. */
   moreLabel?: (HelixHeadlessVideo["moreLabel"]) | undefined;
+  /** What the live region says when a key mutes the video. */
+  "muted-label"?: (HelixHeadlessVideo["mutedLabel"]) | undefined;
+  /** What the live region says when a key mutes the video. */
+  mutedLabel?: (HelixHeadlessVideo["mutedLabel"]) | undefined;
   /** The name of the mute control. The control shows as pressed while the video
 is muted. */
   "mute-label"?: (HelixHeadlessVideo["muteLabel"]) | undefined;
@@ -16602,6 +17520,10 @@ So the consumer says where the fold is, which they can, having already
 named the controls in order. A name in both lists is drawn once, on the
 bar: two of the same control is worse than either placement. */
   overflowControls?: (HelixHeadlessVideo["overflowControls"]) | undefined;
+  /** What the live region says when a key pauses the video. */
+  "paused-label"?: (HelixHeadlessVideo["pausedLabel"]) | undefined;
+  /** What the live region says when a key pauses the video. */
+  pausedLabel?: (HelixHeadlessVideo["pausedLabel"]) | undefined;
   /** The name of the play control while pressing it would pause the video. */
   "pause-label"?: (HelixHeadlessVideo["pauseLabel"]) | undefined;
   /** The name of the play control while pressing it would pause the video. */
@@ -16624,6 +17546,10 @@ this is what a screen reader calls it on arriving. */
   /** The name of the player when `label` is not set. The player is a group, and
 this is what a screen reader calls it on arriving. */
   playerLabel?: (HelixHeadlessVideo["playerLabel"]) | undefined;
+  /** What the live region says when a key plays the video. */
+  "playing-label"?: (HelixHeadlessVideo["playingLabel"]) | undefined;
+  /** What the live region says when a key plays the video. */
+  playingLabel?: (HelixHeadlessVideo["playingLabel"]) | undefined;
   /** The name of the play control while pressing it would start the video. */
   "play-label"?: (HelixHeadlessVideo["playLabel"]) | undefined;
   /** The name of the play control while pressing it would start the video. */
@@ -16722,6 +17648,16 @@ negation. */
   /** How the scrubber reads out where the video is, with `{position}` and
 `{duration}` filled in. */
   timeLabel?: (HelixHeadlessVideo["timeLabel"]) | undefined;
+  /** What the live region says when a key unmutes the video. */
+  "unmuted-label"?: (HelixHeadlessVideo["unmutedLabel"]) | undefined;
+  /** What the live region says when a key unmutes the video. */
+  unmutedLabel?: (HelixHeadlessVideo["unmutedLabel"]) | undefined;
+  /** What the live region says when a key changes the volume. `{percent}` is the
+volume from 0 to 100, written in the locale. */
+  "volume-changed-label"?: (HelixHeadlessVideo["volumeChangedLabel"]) | undefined;
+  /** What the live region says when a key changes the volume. `{percent}` is the
+volume from 0 to 100, written in the locale. */
+  volumeChangedLabel?: (HelixHeadlessVideo["volumeChangedLabel"]) | undefined;
   /** What the volume slider is called. */
   "volume-label"?: (HelixHeadlessVideo["volumeLabel"]) | undefined;
   /** What the volume slider is called. */
@@ -16923,6 +17859,8 @@ export type CustomCssProperties = {
   "--chart-bar-wash"?: (string) | undefined;
   /** Written on the control inside each toggle button of a group with `selection-mode`: `1` while it is pressed and `0` while it is not. Read it in a `::part(button)` rule to draw the pressed look. */
   "--button-group-pressed"?: (string) | undefined;
+  /** The board's zoom, which the board writes: 1 at the document's own size, 0.5 at half. The cards inherit it, so a card's stylesheet can draw less when the board is far out, such as a border that stays one pixel wide at `calc(1px / var(--canvas-zoom))`. */
+  "--canvas-zoom"?: (string) | undefined;
   /** Space between slides. Your stylesheet sets it, and the component uses it to measure the run. */
   "--carousel-gap"?: (string) | undefined;
   /** The size of one pane. Your stylesheet sets it, and the component uses it to measure the run. */
@@ -17049,7 +17987,7 @@ export type CustomCssProperties = {
   "--scroll-area-scroll-fraction"?: (string) | undefined;
   /** The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part. */
   "--scroll-area-thumb-fraction"?: (string) | undefined;
-  /** Where a bubble's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` part. */
+  /** Where a bubble's or a thumb box's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` and `thumb` part. */
   "--slider-at"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. */
   "--slider-fraction"?: (string) | undefined;
@@ -17095,13 +18033,13 @@ 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.  The browser's find in page searches a closed section, and a match opens it, with 'helix-before-open' first, as React Aria's disclosure does. Closed content is 'hidden="until-found"', which hides it with no stylesheet loaded and keeps it out of the tab order and the accessibility tree. A section that closes keeps its content drawn until the content part's animations and transitions end, so a sheet that animates the section closed shows the content shrinking rather than an empty box. Set 'hidden-until-found="false"' and a closed section is 'hidden' and 'inert' instead, and find in page skips it.  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. */
+  /** 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.  The browser's find in page searches a closed section, and a match opens it, with 'helix-before-open' first, as React Aria's disclosure does. Closed content is 'hidden="until-found"', which hides it with no stylesheet loaded and keeps it out of the tab order and the accessibility tree. A section that closes keeps its content drawn until the content part's animations and transitions end, so a sheet that animates the section closed shows the content shrinking rather than an empty box. Set 'hidden-until-found="false"' and a closed section is 'hidden' and 'inert' instead, and find in page skips it.  A section whose trigger has no words, with nothing in its 'summary' slot, is announced as a bare button, and a development build warns once with the kind 'missing-name'.  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. */
   "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.  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.  Find in page searches the closed sections too, and opens the one it matches in. 'hidden-until-found="false"' turns that off. */
+  /** 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. Under 'single' the open section's trigger is 'aria-disabled', because a press cannot close it.  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.  Find in page searches the closed sections too, and opens the one it matches in. 'hidden-until-found="false"' turns that off. */
   "helix-headless-accordion": DefineCustomElement<
     HelixHeadlessAccordion,
     HelixHeadlessAccordionVueProps,
@@ -17155,13 +18093,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessBlockquoteVueProps,
     HelixHeadlessBlockquoteVueEvents
   >;
-  /** Each crumb renders its separator and sets its list-item role. It hides its own separator with ':host(:first-child)', so the trail needs no index from the parent.  Set 'href' to make the whole crumb an anchor, which works with Enter, middle click, and the status bar, and before any JavaScript runs. A router cannot reach an anchor inside a shadow root, so intercept the click for client-side navigation, as with 'Tree.Item' and 'List.Item'. A trail that collapses also reads 'href' to rebuild its hidden crumbs elsewhere.  Without 'href', the crumb renders a plain '<span>' around what you slot, including your own anchor.  The current page is plain text, and 'aria-current="page"' on the host conveys the position. In a trail where no crumb is 'current', the last one is said to be the current page, and keeps its link. An 'aria-current' you write on the host, such as 'aria-current="location"', replaces the one the crumb gives itself. */
+  /** Each crumb renders its separator and sets its list-item role. It hides its own separator with ':host(:first-child)', so the trail needs no index from the parent.  Set 'href' to make the whole crumb an anchor, which works with Enter, middle click, and the status bar, and before any JavaScript runs. A router cannot reach an anchor inside a shadow root, so intercept the click for client-side navigation, as with 'Tree.Item' and 'List.Item': a plain press on the link sends 'helix-select' with the 'href' as its value first, and canceling it keeps the browser from following, so a client-side router follows it instead, as React Aria's 'onAction' lets a router do. A press with a modifier opens the link where the browser opens it and sends nothing.  Without 'href', the crumb renders a plain '<span>' around what you slot, including your own anchor.  The current page is plain text, and 'aria-current="page"' on the host conveys the position. In a trail where no crumb is 'current', the last one is said to be the current page, and keeps its link. An 'aria-current' you write on the host, such as 'aria-current="location"', replaces the one the crumb gives itself. */
   "helix-headless-breadcrumb": DefineCustomElement<
     HelixHeadlessBreadcrumb,
     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. Where no slotted crumb is 'current', the last one is said to be the current page.  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.  **Keyboard.** Each crumb with an 'href' is a link and one tab stop, and Enter follows it. The current page and the separators are not in the tab order. In a folded trail, Enter or Space on the fold's button shows the whole trail and moves focus to the first crumb it brought back. */
+  /** 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. Where no slotted crumb is 'current', the last one is said to be the current page.  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 that is longer folds its middle into one place: 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 trail drawn from 'items' draws the button as a crumb of its own, and a new 'items' folds again. A slotted trail hides the crumbs it folds, which take no room, and its first crumb draws the button after its link; a change to the crumbs folds again.  **Keyboard.** Each crumb with an 'href' is a link and one tab stop, and Enter follows it. The current page and the separators are not in the tab order. In a folded trail, Enter or Space on the fold's button shows the whole trail and moves focus to the first crumb it brought back. */
   "helix-headless-breadcrumbs": DefineCustomElement<
     HelixHeadlessBreadcrumbs,
     HelixHeadlessBreadcrumbsVueProps,
@@ -17197,7 +18135,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasNodeVueProps,
     HelixHeadlessCanvasNodeVueEvents
   >;
-  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
+  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
   "helix-headless-canvas": DefineCustomElement<
     HelixHeadlessCanvas,
     HelixHeadlessCanvasVueProps,
@@ -17227,7 +18165,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessChatMessageVueProps,
     HelixHeadlessChatMessageVueEvents
   >;
-  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened.  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, give 'author-styles' the declarations for each author, such as '{"ada": "--chat-message-background-color: …"}': the message drawn for each of their turns takes them as its 'style', so the message's custom properties change for that author alone. Turns passed as children are styled by their 'author', such as 'helix-chat-message[author="ada"]'. */
+  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened. A turn is said with its author first, such as "Ada: It ships today" ('arrival-label'), where its author can be named.  Pass the turns as children or as 'turns' data. Do not use both. 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, give 'author-styles' the declarations for each author, such as '{"ada": "--chat-message-background-color: …"}': the message drawn for each of their turns takes them as its 'style', so the message's custom properties change for that author alone. Turns passed as children are styled by their 'author', such as 'helix-chat-message[author="ada"]'. */
   "helix-headless-chat": DefineCustomElement<
     HelixHeadlessChat,
     HelixHeadlessChatVueProps,
@@ -17257,13 +18195,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCodeVueProps,
     HelixHeadlessCodeVueEvents
   >;
-  /** A text field with a button that opens 'ColorPicker' in an overlay. 'ColorPicker' provides the square, the ramps, the eyedropper, and the syntax toggle, and you can also use it on its own, flat on the page. Color Input adds the field, the overlay, and the form value, the same arrangement Date Input has with 'DatePicker'.  You can type or paste a color into the field without opening the picker. Color Input is a custom control, unlike '<input type="color">', so you can style the panel to match your interface.  The field reads every color syntax, including '#f00', '#ff0000', 'rgb(255 0 0)', 'rgba(255,0,0,.5)', 'rgb(255 0 0 / 50%)', and 'hsl(0 100% 50%)'. It writes colors in the syntax that 'format' names. The field shows the value without reformatting it, because half-typed input does not survive a round trip through a formatter. Date Input does the same with dates.  Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does, so the message about a color it cannot read waits until you are done. Dragging in the panel sends 'input' as the color moves and 'change' when it settles.  The trigger and ArrowDown open the panel with focus in the square. Tab moves between the panel's controls without leaving it, and Escape closes it and returns focus to the field.  The component sets '--color-input-swatch', so do not set it yourself. It holds the resolved color, so the styled tier can paint the swatch without parsing the value. */
+  /** A text field with a button that opens 'ColorPicker' in an overlay. 'ColorPicker' provides the square, the ramps, the eyedropper, and the syntax toggle, and you can also use it on its own, flat on the page. Color Input adds the field, the overlay, and the form value, the same arrangement Date Input has with 'DatePicker'.  You can type or paste a color into the field without opening the picker. Color Input is a custom control, unlike '<input type="color">', so you can style the panel to match your interface.  The field reads every color syntax, including '#f00', '#ff0000', 'rgb(255 0 0)', 'rgba(255,0,0,.5)', 'rgb(255 0 0 / 50%)', 'hsl(0 100% 50%)', 'oklch(62.8% 0.258 29.2)', and 'hsb(0, 100%, 100%)'. It writes colors in the syntax that 'format' names. The field shows the value without reformatting it, because half-typed input does not survive a round trip through a formatter. Date Input does the same with dates.  Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does, so the message about a color it cannot read waits until you are done. Dragging in the panel sends 'input' as the color moves and 'change' when it settles.  The trigger and ArrowDown open the panel with focus in the square. Tab moves between the panel's controls without leaving it, and Escape closes it and returns focus to the field.  The component sets '--color-input-swatch', so do not set it yourself. It holds the resolved color, so the styled tier can paint the swatch without parsing the value. */
   "helix-headless-color-input": DefineCustomElement<
     HelixHeadlessColorInput,
     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. 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. */
+  /** 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.  'label' names the picker, which is then a group with that name, and the square's ramps say it before their own, as "Brand, Saturation". 'hint' writes help under the picker, which the square, the ramps and the value field are described by. Inside Color Input the field carries both.  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,
@@ -17275,7 +18213,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessComboboxVueProps,
     HelixHeadlessComboboxVueEvents
   >;
-  /** The list is a 'Listbox', which handles filtering, the empty state, the match highlight, 'aria-activedescendant', scrolling an option into view, and moving between options with the keyboard. The palette adds a dialog and a hotkey that opens it.  The palette keeps no value. It is not a form control and submits nothing. Choosing an option dispatches 'helix-select' once. To remember the last command, store it yourself. An option with 'href' is a link to a page, which the browser follows once the palette has closed.  The hotkey listener is on the document, so the hotkey works from anywhere on the page, including inside another control's text field, whether or not the palette is open. 'mod' means Command on a Mac and Control elsewhere, so you write one binding.  The filter is cleared when the palette closes, so each opening starts from the full list. Combobox and Select do the same. As typing narrows the list, a screen reader hears how many commands are left, such as "3 commands". */
+  /** The list is a 'Listbox', which handles filtering, the empty state, the match highlight, 'aria-activedescendant', scrolling an option into view, and moving between options with the keyboard. The palette adds a dialog and a hotkey that opens it.  The palette keeps no value. It is not a form control and submits nothing. Choosing an option dispatches 'helix-select' once. To remember the last command, store it yourself. An option with 'href' is a link to a page, which the browser follows once the palette has closed.  The hotkey listener is on the document, so the hotkey works from anywhere on the page, including inside another control's text field, whether or not the palette is open. 'mod' means Command on a Mac and Control elsewhere, so you write one binding.  With 'inline', the palette is drawn in the page with no dialog, as a search over a list that is always shown.  **Pages.** A command can open a page of commands of its own, as a palette offers "Change theme" and then the themes. Give the option 'opens' with a name, and slot the page's commands as 'page:' and that name:  '''html <helix-command>   <helix-option value="theme" opens="theme">Change theme</helix-option>   <helix-option value="dark" slot="page:theme">Dark</helix-option>   <helix-option value="light" slot="page:theme">Light</helix-option> </helix-command> '''  Choosing the opener says 'helix-select' with its value, and canceling it keeps the page that is shown. The list then shows the page, named by the opener's words, and Backspace in an empty filter goes back. 'page' says which page is shown.  The filter is cleared when the palette closes, so each opening starts from the full list. Combobox and Select do the same. As typing narrows the list, a screen reader hears how many commands are left, such as "3 commands".  **Keyboard.** Focus goes to the filter field as the palette opens, and the highlight moves through the commands while you type.  | Key | What it does | |---|---| | 'hotkey', Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With 'inline', puts focus in its filter field. | | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. | | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. | | Home, End, Left, Right | Move the caret in the filter field. | | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with 'opens', shows its page. | | Command or Control with Enter | Takes the highlighted command's 'alternate' destination, where it has one. | | Backspace | In an empty filter on a page, goes back to the page before. | | Escape | Clears the filter. With the filter empty, closes the palette and puts focus back where it was. | | Tab | Stays in the palette, which is modal. With 'inline', moves on through the page. |  **ARIA.** The palette is a modal 'dialog' named by 'label', or with 'inline' no dialog at all. Inside it the filter field is a 'combobox' with 'aria-activedescendant' on the highlighted command, and the commands are a 'listbox' of 'option's. How many commands typing left, the empty text and the loading text are said in a polite live region. */
   "helix-headless-command": DefineCustomElement<
     HelixHeadlessCommand,
     HelixHeadlessCommandVueProps,
@@ -17287,13 +18225,13 @@ 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. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one 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. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | 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.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  '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. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one 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. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | 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.  When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The 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.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  '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,
     HelixHeadlessDataTableVueEvents
   >;
-  /** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them.  You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both.  The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar.  With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment. */
+  /** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them.  You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both.  The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar.  With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment.  Text that is not a date gives the form an empty value, as a native date field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the calendar with focus on the chosen day. | | Alt with Down | Opens the calendar, from the text field or a segment. | | Enter | In the text field, takes the typed date and submits the form, as a native field does. | | Escape | Closes the calendar and puts focus back in the field. | | Tab | In the open calendar, moves between its controls. Out of the field, closes it. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the calendar, the keys are 'DatePicker''s: the arrows move by a day or a week, Page Up and Page Down by a month, with Shift by a year, and Home and End to the start and the end of the week. */
   "helix-headless-date-input": DefineCustomElement<
     HelixHeadlessDateInput,
     HelixHeadlessDateInputVueProps,
@@ -17473,7 +18411,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. 'single' selects one row at a time and 'multiple' any number, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. 'none' selects nothing, so a press acts on the row. A 'disabled' row is passed over. Each row is named by its label and described by its description, so the words of the controls in 'end' are not read as part of its name.  'selection-behavior' says what a press does to the rows already selected. 'toggle', the default, adds or takes out the row. 'replace' selects the row alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press then adds or takes out one row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. Under 'replace', selects it. | | Home, End | Moves to the first or the last row. Under 'replace', selects it. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under 'replace', selects the row it lands on. | | A letter or a word | Moves to the next row whose words start with what you typed. | | Left, Right | Moves between the row and the controls in its 'end' slot. | | Space | Selects the row, or lets it go. | | Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in 'multiple'. | | Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under 'replace'. | | Control or Command with A | Selects every row, in 'multiple'. | | Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. | | Enter | Acts on the row: follows its link, or sends 'helix-action' from it. |  A press with Shift selects every row from the last one pressed, and a press with Control or Command adds or takes out one row under 'replace'.  **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order.  **'reorderable' lets you move rows.** Each row gets a grip after its 'end' slot, named by 'move-label'. Drag a grip to move its row, and the list scrolls near an edge. Or press a grip with Space, Enter, or a click to pick up its row, move it with the arrow keys, and press the grip again to drop it. A click on another row drops it there, and Escape puts it back. The list says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold every row's value in the new order. **You move the rows**: the list moves no element of yours, so your framework keeps the order it rendered.  | Key, on a held row's grip | What it does | |---|---| | Down, Up | Moves the row one place. | | Home, End | Moves the row to the top or the bottom. | | Space, Enter | Drops the row. | | Escape | Puts the row back where it was. |  'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs. */
+  /** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7".  **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. 'single' selects one row at a time and 'multiple' any number, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. 'none' selects nothing, so a press acts on the row. A 'disabled' row is passed over. Each row is named by its label and described by its description, so the words of the controls in 'end' are not read as part of its name.  'selection-behavior' says what a press does to the rows already selected. 'toggle', the default, adds or takes out the row. 'replace' selects the row alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press then adds or takes out one row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. Under 'replace', selects it. | | Home, End | Moves to the first or the last row. Under 'replace', selects it. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under 'replace', selects the row it lands on. | | A letter or a word | Moves to the next row whose words start with what you typed. | | Left, Right | Moves between the row and the controls in its 'end' slot. | | Space | Selects the row, or lets it go. | | Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in 'multiple'. | | Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under 'replace'. | | Control or Command with A | Selects every row, in 'multiple'. | | Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. | | Enter | Acts on the row: follows its link, or sends 'helix-action' from it. |  A press with Shift selects every row from the last one pressed, and a press with Control or Command adds or takes out one row under 'replace'.  **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order.  **'reorderable' lets you move rows.** Each row gets a grip after its 'end' slot, named by 'move-label'. Drag a grip to move its row, and the list scrolls near an edge. Or press a grip with Space, Enter, or a click to pick up its row, move it with the arrow keys, and press the grip again to drop it. A click on another row drops it there, and Escape puts it back. The list says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold every row's value in the new order. **You move the rows**: the list moves no element of yours, so your framework keeps the order it rendered.  | Key, on a held row's grip | What it does | |---|---| | Down, Up | Moves the row one place. | | Home, End | Moves the row to the top or the bottom. | | Space, Enter | Drops the row. | | Escape | Puts the row back where it was. |  'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown while the list has no rows and none are loading, such as "No files yet" and a link to add one. Without either, an empty list shows nothing. The list takes the 'empty' state while it has no rows, whatever it shows.  **Loading more.** 'load-more' sends 'helix-load-more' once the end of the list comes within a screen of view, in the box that scrolls it or the page, once for each number of rows: add rows and it can send it again. While you fetch, set 'loading': the list is busy, and a row after the last says "Loading more" ('loading-label', or your own content in the 'loading' slot). The list asks for nothing while 'loading' is set.  An interactive list with no name is reported once in a development build, since a screen reader announces it as a grid and nothing more. Name it with 'label' or 'aria-label'. */
   "helix-headless-list": DefineCustomElement<
     HelixHeadlessList,
     HelixHeadlessListVueProps,
@@ -17587,7 +18525,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMeterVueProps,
     HelixHeadlessMeterVueEvents
   >;
-  /** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar.  **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root.  The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker. Any value but 'false' counts, so a sidebar of sections on one page can mark the section in view with 'aria-current="location"'. Where several are marked, 'page' wins.  **The destinations can be a list.** Slot a '<ul>' or an '<ol>' of '<li>' elements, each holding a link, and a screen reader says how many there are and where each one is, as in Radix's 'NavigationMenu.List'. The marker and the arrow keys work on the list items as they do on bare links. Give the list 'role="list"' as well, since Safari drops the semantics of a list drawn without bullets.  Set 'orientation="vertical"' to stack the destinations in a column, for a sidebar.  Set 'arrows' and the arrow keys move focus between the destinations, as Radix's navigation menu does: left and right along a row, up and down a column, Home and End to the ends. A 'Megamenu' among them is reached at its trigger. Tab still stops at every link, since a navigation is a list of links and not a single control, and the keys across the other axis are left to the page and to an open panel. */
+  /** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar.  **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root.  The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker. Any value but 'false' counts, so a sidebar of sections on one page can mark the section in view with 'aria-current="location"'. Where several are marked, 'page' wins.  **The destinations can be a list.** Slot a '<ul>' or an '<ol>' of '<li>' elements, each holding a link, and a screen reader says how many there are and where each one is, as in Radix's 'NavigationMenu.List'. The marker and the arrow keys work on the list items as they do on bare links. Give the list 'role="list"' as well, since Safari drops the semantics of a list drawn without bullets.  Set 'orientation="vertical"' to stack the destinations in a column, for a sidebar.  Set 'arrows' and the arrow keys move focus between the destinations, as Radix's navigation menu does: left and right along a row, up and down a column, Home and End to the ends. A 'Megamenu' among them is reached at its trigger. Tab still stops at every link, since a navigation is a list of links and not a single control, and the keys across the other axis are left to the page and to an open panel.  While a 'Megamenu', or another disclosure among the destinations, is open, the navigation is ':state(open)', so a page can dim what lies under the panel, as Radix's navigation menu marks its open state.  A screen reader lists the page's navigation landmarks by name, so two named alike cannot be told apart. Where another navigation in the same document has the same name, "Main" for two with no 'label', the later one warns once with the kind 'duplicate-name'. */
   "helix-headless-navigation": DefineCustomElement<
     HelixHeadlessNavigation,
     HelixHeadlessNavigationVueProps,
@@ -17611,13 +18549,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationsVueProps,
     HelixHeadlessNotificationsVueEvents
   >;
-  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  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'. */
+  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  The field and its two buttons sit in a 'role="group"', and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does.  Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
   "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.  **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. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. | | 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 '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. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. | | 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 '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.  **Your own drawing of a value.** 'renderValue' is a function from a value and its entry, its path, key, depth and type, to what Lit renders, such as a link for a URL or a swatch for a color. Return 'undefined' to draw the value as the inspector does. What you draw sits in the 'value' part, after the key. Filtering and copying still read the value itself.  '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,
@@ -17629,7 +18567,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessOptionGroupVueProps,
     HelixHeadlessOptionGroupVueEvents
   >;
-  /** Options are their own family, separate from Select, because an option belongs to a listbox and several controls contain one. 'role="option"' requires an owning 'role="listbox"'. A Select is a listbox with a trigger, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. 'Radio' is a part of its group, because a radio has only one kind of owner.  Selection works the way it does for a radio. Choosing an option dispatches an event, the listbox decides whether the choice stands, and the listbox sets 'selected'.  Filtering belongs to the owner, which hides an option with 'hidden'. What counts as a match differs between a select and a command palette.  An option with 'href' is a link: choosing it follows the link and selects nothing, as an entry in a command palette that goes to a page does. */
+  /** Options are their own family, separate from Select, because an option belongs to a listbox and several controls contain one. 'role="option"' requires an owning 'role="listbox"'. A Select is a listbox with a trigger, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. 'Radio' is a part of its group, because a radio has only one kind of owner.  Selection works the way it does for a radio. Choosing an option dispatches an event, the listbox decides whether the choice stands, and the listbox sets 'selected'.  Filtering belongs to the owner, which hides an option with 'hidden'. What counts as a match differs between a select and a command palette.  An option with 'href' is a link: choosing it follows the link and selects nothing, as an entry in a command palette that goes to a page does.  The option's name is its label alone, as React Aria's 'slot="label"' makes it: what is in 'start' and 'end', an avatar's initials or a shortcut, is drawn and not read as part of the name. The description is read as the option's description. A name you give with 'aria-label' or 'aria-labelledby' wins over both. */
   "helix-headless-option": DefineCustomElement<
     HelixHeadlessOption,
     HelixHeadlessOptionVueProps,
@@ -17725,7 +18663,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessScrollAreaVueProps,
     HelixHeadlessScrollAreaVueEvents
   >;
-  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
+  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them. For a list too long to draw whole, set 'items' instead: the list draws only the options in sight, as Listbox's 'items' does, and the trigger, its keys and the form read the whole set.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
   "helix-headless-select": DefineCustomElement<
     HelixHeadlessSelect,
     HelixHeadlessSelectVueProps,
@@ -17743,7 +18681,7 @@ 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, 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'. */
+  /** 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, and a named range submits one entry per thumb under its name, the lowest first. A range given more than two values, such as 'default-value="20,50,80"', has a thumb for each, as React Aria's slider takes any number of thumbs: each stops at its neighbors, and the ones between the first and the last are named by 'thumb-label'. '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. |  Under 'readonly' none of these move the thumb, and Tab still reaches it.  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,
@@ -17761,19 +18699,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSpeedDialGroupVueProps,
     HelixHeadlessSpeedDialGroupVueEvents
   >;
-  /** Each item is a command, so it has the 'menuitem' role. A megamenu holds destinations, so it is a disclosure of links. A speed dial holds actions, which is what 'role="menu"' is for.  The name is text rendered beside the icon, and it is the accessible name. A 'title' on an icon shows only on hover. Visible text is read, searched, and translated like other text.  'shortcut' gives the action's keyboard shortcut as a chord, such as 'mod+s', the grammar Menu's rows use. The action carries it as 'aria-keyshortcuts' and draws it after the name in the platform's glyphs or words, '⌘S' on an Apple keyboard and 'Ctrl+S' elsewhere, as Menu draws its rows' shortcuts. Put a 'Kbd' in the 'shortcut' slot to draw it as keys instead; the dial imports no 'Kbd' of its own. Showing a shortcut does not bind it. */
+  /** Each item is a command, so it has the 'menuitem' role. A megamenu holds destinations, so it is a disclosure of links. A speed dial holds actions, which is what 'role="menu"' is for.  The name is text rendered beside the icon, and it is the accessible name. A 'title' on an icon shows only on hover. Visible text is read, searched, and translated like other text.  'shortcut' gives the action's keyboard shortcut as a chord, such as 'mod+s', the grammar Menu's rows use. The action carries it as 'aria-keyshortcuts' and draws it after the name in the platform's glyphs or words, '⌘S' on an Apple keyboard and 'Ctrl+S' elsewhere, as Menu draws its rows' shortcuts. Put a 'Kbd' in the 'shortcut' slot to draw it as keys instead; the dial imports no 'Kbd' of its own. Showing a shortcut does not bind it.  'href' makes the action a link, as Menu's rows take one: the 'item' part is then an '<a>' carrying 'menuitem', so the browser follows it, opens it in a new tab on a middle press, and offers its own menu for it. Choosing it still sends 'helix-select' and closes the dial. A disabled action draws no link. */
   "helix-headless-speed-dial-item": DefineCustomElement<
     HelixHeadlessSpeedDialItem,
     HelixHeadlessSpeedDialItemVueProps,
     HelixHeadlessSpeedDialItemVueEvents
   >;
-  /** A speed dial is a menu. Its items are commands, so it uses 'role="menu"' and 'menuitem', and it is built from the same pieces as 'Menu': - 'KeyboardNavigationController' for the arrow keys - 'PopoverController' for the panel - 'MixinControllerOpen' for open and closed  It is a separate component because a speed dial has no submenus, headers, or checkable items.  You slot the trigger. The usual floating action button is 'IconButton' with 'shape="circle"' and 'raised'. There is no 'helix-fab', because 'IconButton' already has 'emphasis', 'tone', 'label', and a size. Position the button with 'data-dock' in the base layer.  All four arrow keys move through the actions, because a speed dial has no nested levels to reserve the horizontal pair for. This is the default behavior of the keyboard controller. Typing a letter moves to the next action whose name starts with it. The actions are one tab stop, and Tab closes the dial and moves on.  **Keyboard.** On the trigger, Enter, Space or a press opens the dial on its first action. With the dial open:  | Key | What it does | |---|---| | Down, Right | Moves to the next action, from the last back to the first. | | Up, Left | Moves to the action before, from the first round to the last. | | Home, End | Moves to the first or the last action. | | A letter | Moves to the next action whose name starts with it. | | Enter, Space | Chooses the action, and the dial closes. | | Escape | Closes the dial and puts focus back on the trigger. | | Tab | Closes the dial and moves on. |  **Groups.** Put actions in 'Speed Dial.Group', named by its 'label', to set them apart as Menu's sections do: each is a 'group' of the menu, and the arrow keys walk through every group's actions in order.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, such as composing a message, and holding it for half a second opens the dial, as React Aria's menu trigger does with 'trigger="longPress"'. Alt+Down or Alt+Up opens it from the keyboard, and the trigger says so in its description, 'long-press-label', the drawn one and a slotted one alike. A press that has opened the dial does not also do the trigger's action. */
+  /** A speed dial is a menu. Its items are commands, so it uses 'role="menu"' and 'menuitem', and it is built from the same pieces as 'Menu': - 'KeyboardNavigationController' for the arrow keys - 'PopoverController' for the panel - 'MixinControllerOpen' for open and closed  It is a separate component because a speed dial has no submenus, headers, or checkable items.  You slot the trigger. The usual floating action button is 'IconButton' with 'shape="circle"' and 'raised'. There is no 'helix-fab', because 'IconButton' already has 'emphasis', 'tone', 'label', and a size. Position the button with 'data-dock' in the base layer.  All four arrow keys move through the actions, because a speed dial has no nested levels to reserve the horizontal pair for. This is the default behavior of the keyboard controller. Typing a letter moves to the next action whose name starts with it. The actions are one tab stop, and Tab closes the dial and moves on.  **Keyboard.** On the trigger, Enter, Space, Down or a press opens the dial on its first action, and Up opens it on its last, as an APG menu button does. With the dial open:  | Key | What it does | |---|---| | Down, Right | Moves to the next action, from the last back to the first. | | Up, Left | Moves to the action before, from the first round to the last. | | Home, End | Moves to the first or the last action. | | A letter | Moves to the next action whose name starts with it. | | Enter, Space | Chooses the action, and the dial closes. | | Escape | Closes the dial and puts focus back on the trigger. | | Tab | Closes the dial and moves on. |  **Groups.** Put actions in 'Speed Dial.Group', named by its 'label', to set them apart as Menu's sections do: each is a 'group' of the menu, and the arrow keys walk through every group's actions in order.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, such as composing a message, and holding it for half a second opens the dial, as React Aria's menu trigger does with 'trigger="longPress"'. Alt+Down or Alt+Up opens it from the keyboard, and the trigger says so in its description, 'long-press-label', the drawn one and a slotted one alike. A press that has opened the dial does not also do the trigger's action.  **Open on hover.** With 'open-on="hover"', a mouse resting on the trigger opens the dial, as Material's speed dial does, and the dial closes a moment after the mouse leaves both the trigger and the actions. A press, a touch and the keyboard open it as under 'click', and a press on the trigger of a dial already open moves focus to its first action, so the press a mouse makes after hovering keeps the dial open. */
   "helix-headless-speed-dial": DefineCustomElement<
     HelixHeadlessSpeedDial,
     HelixHeadlessSpeedDialVueProps,
     HelixHeadlessSpeedDialVueEvents
   >;
-  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', with 'aria-valuetext' saying the start pane's share as a percentage in the nearest 'lang', or in the reader's locale where no 'lang' is set, and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'.  Set 'primary' to the pane that keeps its size when the splitter's own size changes, such as a sidebar beside a window being resized. The other pane takes all of the change, as Web Awesome's split panel does. Without it, both panes keep their share.  **Keyboard.** The divider is one tab stop.  | Key | What it does | |---|---| | Left, Right | Moves a side-by-side divider by 'step'. On a right-to-left page, Left moves it toward the end. | | Up, Down | Moves a stacked divider by 'step'. | | Home, End | Moves the divider to its bounds. | | Enter | Collapses the start pane, and opens it again. | | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. | */
+  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', with 'aria-valuetext' saying the start pane's share as a percentage in the nearest 'lang', or in the reader's locale where no 'lang' is set, and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'.  Set 'primary' to the pane that keeps its size when the splitter's own size changes, such as a sidebar beside a window being resized. The other pane takes all of the change, as Web Awesome's split panel does. Without it, both panes keep their share.  **Three or more panes along one axis are splitters nested on that axis**, a splitter in the 'end' pane of another for three columns. The nested one keeps the pane on its far side the size it was while the outer divider moves, so a divider resizes only the two panes beside it, as Zag's splitter does with any number of panels. Where the whole row is resized, every pane keeps its share, unless 'primary' says otherwise.  **Keyboard.** The divider is one tab stop.  | Key | What it does | |---|---| | Left, Right | Moves a side-by-side divider by 'step'. On a right-to-left page, Left moves it toward the end. | | Up, Down | Moves a stacked divider by 'step'. | | Home, End | Moves the divider to its bounds. | | Enter | Collapses the start pane, and opens it again. | | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. | */
   "helix-headless-splitter": DefineCustomElement<
     HelixHeadlessSplitter,
     HelixHeadlessSplitterVueProps,
@@ -17791,7 +18729,7 @@ export interface WcToolkitVueGlobalComponents {
     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. '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. A screen reader hears it as 'progress-label' says, "33% complete" unless set, as Ark UI's steps write 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'. */
+  /** '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. 'reset()' goes back to the first stage and clears every stage's 'complete', as Ark UI's 'resetStep' does.  'completion="passed"' marks a stage 'complete' once a reader moves past it, as Ark UI counts a stage before the current one as completed. Going back leaves it complete. In a 'linear' sequence the next stage is then in reach from the current one, and 'validate' decides whether the reader may go.  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. A screen reader hears it as 'progress-label' says, "33% complete" unless set, as Ark UI's steps write 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'.  **Keyboard.** Each stage's name is a button and its own tab stop, and Enter or Space goes to the stage. Set 'arrows' and the arrow keys move focus between the names as well, as Ark UI's steps do: Left and Right along a row, Up and Down a column, Home and End to the first and the last. The arrows pass over a disabled stage and one a linear sequence holds out of reach, and they move focus without going to the stage. */
   "helix-headless-steps": DefineCustomElement<
     HelixHeadlessSteps,
     HelixHeadlessStepsVueProps,
@@ -17821,7 +18759,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTableColumnVueProps,
     HelixHeadlessTableColumnVueEvents
   >;
-  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. |  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. To act on one row, put a link or a button in a cell, or give the row an 'href'.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. |  When the rows did not load, set 'error-text', such as "The orders did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
   "helix-headless-table": DefineCustomElement<
     HelixHeadlessTable,
     HelixHeadlessTableVueProps,
@@ -17839,19 +18777,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTabPanelVueProps,
     HelixHeadlessTabPanelVueEvents
   >;
-  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  **Keyboard.**  | Key | What it does | |---|---| | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless 'manual' is set or a tab is a link. | | Left, Up | Moves to the tab before, from the first round to the last. | | Home, End | Moves to the first or the last tab. | | Enter, Space | Selects the tab with focus, or follows its link. | | Tab | Leaves the list for the selected panel. |  Removing the selected tab selects the first enabled tab that is left, and 'active' says so, with 'helix-activate'. Where the removed tab had focus, focus moves to the tab now selected.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
+  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  **Keyboard.**  | Key | What it does | |---|---| | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless 'manual' is set or a tab is a link. | | Left, Up | Moves to the tab before, from the first round to the last. | | Home, End | Moves to the first or the last tab. | | Enter, Space | Selects the tab with focus, or follows its link. | | Tab | Leaves the list for the selected panel. |  Removing the selected tab selects the first enabled tab that is left, and 'active' says so, with 'helix-activate'. Where the removed tab had focus, focus moves to the tab now selected.  **More tabs than fit.** With 'scroll-controls', a strip that scrolls shows a button at each end it can scroll toward, as Web Awesome's tab group does, and a press scrolls it most of its own length. The buttons are for the pointer, so they are out of the tab order and hidden from screen readers; the arrow keys already reach every tab, and the strip scrolls the selected tab into view. A strip scrolls once a stylesheet gives the 'tabs' part an 'overflow', as the styled tier does.  A tab with 'dismissible' can be closed: see 'Tabs.Tab'.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
   "helix-headless-tabs": DefineCustomElement<
     HelixHeadlessTabs,
     HelixHeadlessTabsVueProps,
     HelixHeadlessTabsVueEvents
   >;
-  /** A tab is an element, because it manages selection and its own tab stop.  With an 'href', the tab is a link: 'role="tab"' on an '<a>', which a press, Enter and the browser's own link gestures follow. 'helix-select' is sent first, and canceling it keeps the browser from following, so a client-side router follows it instead. */
+  /** A tab is an element, because it manages selection and its own tab stop.  With an 'href', the tab is a link: 'role="tab"' on an '<a>', which a press, Enter and the browser's own link gestures follow. 'helix-select' is sent first, and canceling it keeps the browser from following, so a client-side router follows it instead.  With 'dismissible', the tab can be closed, as Web Awesome's closable tab can: a press on its 'dismiss' mark, or Delete or Backspace while the tab has focus, sends 'helix-dismiss'. The tab does not remove itself, because your code owns the set, so remove the tab and its panel in your handler. Focus moves to the tab beside it, and the tab set selects a tab that is left. The tab says the key through 'aria-keyshortcuts', and the mark is for the pointer, hidden from screen readers. */
   "helix-headless-tab": DefineCustomElement<
     HelixHeadlessTab,
     HelixHeadlessTabVueProps,
     HelixHeadlessTabVueEvents
   >;
-  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. In 'multiple', Shift with an arrow, Home or End selects the range from the tag last pressed to the tag focus moves to, and Control or Command with A selects every tag that is not disabled. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over. A selected tag that is removed leaves 'value', which then sends 'change'.  Name the set with 'label'. Each tag is named by its words alone, without its remove button. 'value' takes an array of values on the property as well, as React sets 'value={['Apple']}'; a press writes it back as a string.  **Removing the last tag keeps focus in the group.** With no tags left the set is a 'group', and focus moves to its 'empty' part, which holds the 'empty' slot: put words there such as "No filters" for a reader to hear. With nothing slotted it says 'empty-label', "No tags". Where only disabled tags are left, the first of them holds the tab stop and takes focus, so the reader stays in the set. */
+  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. In 'multiple', Shift with an arrow, Home or End selects the range from the tag last pressed to the tag focus moves to, Shift with a press or Space selects the range to that tag, and Control or Command with A selects every tag that is not disabled. 'selection-behavior="replace"' selects the tag a reader presses or moves to alone, as a file list does, and Control or Command with a press or Space adds or takes out one tag. 'disallow-empty-selection' keeps one tag selected once one is. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over. A selected tag that is removed leaves 'value', which then sends 'change'.  Name the set with 'label'. Each tag is named by its words alone, without its remove button. 'value' takes an array of values on the property as well, as React sets 'value={['Apple']}'; a press writes it back as a string.  **Removing the last tag keeps focus in the group.** With no tags left the set is a 'group', and focus moves to its 'empty' part, which holds the 'empty' slot: put words there such as "No filters" for a reader to hear. With nothing slotted it says 'empty-label', "No tags". Where only disabled tags are left, the first of them holds the tab stop and takes focus, so the reader stays in the set. */
   "helix-headless-tag-group": DefineCustomElement<
     HelixHeadlessTagGroup,
     HelixHeadlessTagGroupVueProps,
@@ -17869,13 +18807,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTextareaVueProps,
     HelixHeadlessTextareaVueEvents
   >;
-  /** The list is a 'TimePicker', which you can also use on its own, for example in a settings pane. This element adds the field, the overlay, and the form association, the same arrangement Date Input has with 'DatePicker' and Color Input has with 'ColorPicker'.  You can type a time or pick one. The list offers times at a step, and the field lets you enter any time, such as '09:07'.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds', because that is what the form submits, what 'min' and 'max' compare against, and what sorts correctly as a string. While idle, the field shows the time in the user's locale format. Once the caret is in the field, it shows the value itself, because a formatted time such as '2:30 PM' cannot be typed back and 'Intl' has no parser for it.  Typing sends 'input' on each keystroke and 'change' when you leave the field. The trigger and ArrowDown open the list, and so does a press into the field; Tab into the field opens nothing. In the list, the arrow keys, typed digits and PageUp and PageDown move through the times, and Enter, Space or a click chooses one and closes the panel. With 'variant="wheels"' each wheel moves the time as you turn it, the panel stays open, and Enter or Escape closes it.  With 'segmented', the field is a row of segments in place of the text: an hour, a minute, and AM or PM where the clock has them, each set with digits or the arrow keys. Alt+Down opens the list from a segment. */
+  /** The list is a 'TimePicker', which you can also use on its own, for example in a settings pane. This element adds the field, the overlay, and the form association, the same arrangement Date Input has with 'DatePicker' and Color Input has with 'ColorPicker'.  You can type a time or pick one. The list offers times at a step, and the field lets you enter any time, such as '09:07'.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds', because that is what the form submits, what 'min' and 'max' compare against, and what sorts correctly as a string. While idle, the field shows the time in the user's locale format. Once the caret is in the field, it shows the value itself, because a formatted time such as '2:30 PM' cannot be typed back and 'Intl' has no parser for it.  Typing sends 'input' on each keystroke and 'change' when you leave the field. The trigger and ArrowDown open the list, and so does a press into the field; Tab into the field opens nothing. In the list, the arrow keys, typed digits and PageUp and PageDown move through the times, and Enter, Space or a click chooses one and closes the panel. With 'variant="wheels"' each wheel moves the time as you turn it, the panel stays open, and Enter or Escape closes it.  With 'segmented', the field is a row of segments in place of the text: an hour, a minute, and AM or PM where the clock has them, each set with digits or the arrow keys. Alt+Down opens the list from a segment.  Text that is not a time gives the form an empty value, as a native time field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the list on the chosen time. | | Alt with Down | Opens the list, from the text field or a segment. | | Enter | In the text field, takes the typed time and submits the form, as a native field does. In the list, chooses the highlighted time. | | Escape | Closes the list and puts focus back in the field. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: two hours, or fifteen minutes or seconds. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the list, the keys are 'TimePicker''s. */
   "helix-headless-time-input": DefineCustomElement<
     HelixHeadlessTimeInput,
     HelixHeadlessTimeInputVueProps,
     HelixHeadlessTimeInputVueEvents
   >;
-  /** Shows the times at each 'step' as a 'Listbox', which provides the keyboard behavior, typeahead, scrolling into view, and announcements for a set of options. 'variant="wheels"' shows a column each for the hour, the minute, and the meridiem, and one for the second with 'seconds'. Left and Right move between the wheels, and Tab does too.  'hour-cycle' writes every time on a twelve or a twenty-four hour clock whatever the locale, and 'seconds' holds times to the second.  The step keeps the list usable. At the default of 15 minutes a day is 96 rows, which people can scroll or type into. At 1 minute it is 1,440. Use the list for the times your product offers, and Time Input for any time, the same way Date Input separates typing a date from picking one on the calendar.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds'. A form submits that shape, 'min' and 'max' compare against it, and it sorts as a string. Each row's text follows the person's own conventions, from 'Intl'.  The chosen row is marked in the served markup. The listbox gets the answer as '.value', and Lit SSR serializes no property binding, so without more the 96 served rows would carry no mark until the listbox upgrades and runs 'place'. Each option also gets 'selected', an attribute binding that does serialize, and 'place' then writes the same answer from the same value. This is the same 'selected' you write on 'Option' elsewhere in Helix, and Date Picker marks its choice in markup for the same reason. The list and the wheels both do this, because each wheel is also a listbox. */
+  /** Shows the times at each 'step' as a 'Listbox', which provides the keyboard behavior, typeahead, scrolling into view, and announcements for a set of options. 'variant="wheels"' shows a column each for the hour, the minute, and the meridiem, and one for the second with 'seconds'. Left and Right move between the wheels, and Tab does too.  'hour-cycle' writes every time on a twelve or a twenty-four hour clock whatever the locale, and 'seconds' holds times to the second.  The step keeps the list usable. At the default of 15 minutes a day is 96 rows, which people can scroll or type into. At 1 minute it is 1,440. Use the list for the times your product offers, and Time Input for any time, the same way Date Input separates typing a date from picking one on the calendar.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds'. A form submits that shape, 'min' and 'max' compare against it, and it sorts as a string. Each row's text follows the person's own conventions, from 'Intl'.  The chosen row is marked in the served markup. The listbox gets the answer as '.value', and Lit SSR serializes no property binding, so without more the 96 served rows would carry no mark until the listbox upgrades and runs 'place'. Each option also gets 'selected', an attribute binding that does serialize, and 'place' then writes the same answer from the same value. This is the same 'selected' you write on 'Option' elsewhere in Helix, and Date Picker marks its choice in markup for the same reason. The list and the wheels both do this, because each wheel is also a listbox.  **Keyboard.** The list is one tab stop, and each wheel is one.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous time, or in a wheel to the next or the previous hour, minute, second, or half of the day. | | Home, End | Moves to the first or the last time, or the first or the last in a wheel. | | Page Down, Page Up | Moves by as many times as the list shows at once. | | Digits | Moves to the next time that starts with what you typed, such as '9' for 9:00. | | Enter, Space | Chooses the highlighted time. Moving chooses too, except under 'manual' or with a 'mode'. With a 'mode', Space adds or removes the time. | | Right, Left | In the wheels, moves to the next or the previous wheel, mirrored right to left. | | Tab | Moves to the next wheel, then out of the picker. |  **ARIA.** The list is a 'listbox' named by 'label', a slotted label, the host's 'aria-label' or its 'aria-labelledby'. A development build warns where all four are empty. The list is described by the hint, or by the message in 'feedback' in its place, and carries 'aria-multiselectable' with a 'mode' and 'aria-invalid' while 'feedback' says what is wrong. The wheels are a 'group' with that name, holding one 'listbox' per wheel, named "Hour", "Minute", "Second" and "AM/PM" in the page's language, and each described the same way. */
   "helix-headless-time-picker": DefineCustomElement<
     HelixHeadlessTimePicker,
     HelixHeadlessTimePickerVueProps,
@@ -17887,7 +18825,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTimelineGroupVueProps,
     HelixHeadlessTimelineGroupVueEvents
   >;
-  /** Given 'datetime', the label you write is wrapped in a '<time>' element, so a machine-readable value such as "2026-08-19" travels with a label such as "yesterday". Without 'datetime', the label is a '<span>'.  Each entry draws the connector line that arrives at it and hides it when it is the first entry, using ':host(:first-child)'. This needs no index, no counting parent, and no script. 'Steps' and 'Breadcrumbs' work the same way.  'tone' sets the kind of event and is the only thing that colors the mark. It uses the same values as 'Announcement'. */
+  /** Given 'datetime', the label you write is wrapped in a '<time>' element, so a machine-readable value such as "2026-08-19" travels with a label such as "yesterday". Without 'datetime', the label is a '<span>'.  **'relative' writes the time for you** as how long ago it was, such as "3 hours ago", from 'datetime', where the 'time' slot is empty. The words move on as they go stale, "3 hours ago" becoming "4 hours ago", with one wakeup shared by every reading on the page, as 'FormatDate' keeps its own. They are in the language of the page, or of the nearest 'lang'.  Each entry draws the connector line that arrives at it and hides it when it is the first entry, using ':host(:first-child)'. This needs no index, no counting parent, and no script. 'Steps' and 'Breadcrumbs' work the same way.  'tone' sets the kind of event and is the only thing that colors the mark. It uses the same values as 'Announcement'. */
   "helix-headless-timeline-item": DefineCustomElement<
     HelixHeadlessTimelineItem,
     HelixHeadlessTimelineItemVueProps,
@@ -17953,7 +18891,7 @@ export interface WcToolkitVueGlobalComponents {
     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'.  '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.  Removing the item that has focus moves focus to the item after it among its siblings, or the one before, or its parent, so focus stays in the tree.  **'reorderable' lets you move items among their siblings.** Alt with Up or Down moves the focused item a place, and Alt with Home or End to the first or the last place among its siblings, as the APG's rearrangeable listbox does. Each row gets a grip at its far end: drag it to move the item, and the tree scrolls near an edge. A click on a grip picks the item up and a click on one of its siblings drops it there, which needs no drag. The arrows move an item picked up that way, Enter or Space drops it, and Escape puts it back. The tree says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold the siblings in the new order. **You move the items**: the tree moves no element of yours, and focus follows the moved item once you have. Moving an item into another branch is not part of this. */
+  /** 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. Shift+Space checks every item from the one last checked to the focused one, and Control+Shift+Home or End checks every item from the focused one to the first or the last, then moves there, as the tree pattern's range keys do.  A tree with no name of its own is announced as "Tree", which says nothing about what it holds, so a development build warns once with the kind 'missing-name' where neither 'label' nor an 'aria-label' names it.  Removing the item that has focus moves focus to the item after it among its siblings, or the one before, or its parent, so focus stays in the tree.  **'reorderable' lets you move items among their siblings.** Alt with Up or Down moves the focused item a place, and Alt with Home or End to the first or the last place among its siblings, as the APG's rearrangeable listbox does. Each row gets a grip at its far end: drag it to move the item, and the tree scrolls near an edge. A click on a grip picks the item up and a click on one of its siblings drops it there, which needs no drag. The arrows move an item picked up that way, Enter or Space drops it, and Escape puts it back. The tree says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold the siblings in the new order. **You move the items**: the tree moves no element of yours, and focus follows the moved item once you have.  **Alt with the arrow along the line moves an item into another branch.** Alt with the arrow that opens a branch (Right on a left-to-right page) puts the focused item last inside the item before it, and opens that item; Alt with the other arrow puts it after its parent, a level out. The same 'helix-before-reorder' and 'helix-reorder' are sent, with 'parent' naming the branch it moves into by its key, '''' for the top level, and 'keys' holding that branch's items in their new order. The tree says the move with 'moved-into-label'. */
   "helix-headless-tree": DefineCustomElement<
     HelixHeadlessTree,
     HelixHeadlessTreeVueProps,
@@ -17977,19 +18915,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.  **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry.  **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. */
+  /** **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.  **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry.  **Keyboard.** Each entry is a button in the tab order, and Enter or Space plays it. The arrow keys move focus to the entry before or after, and Home and End to the first and the last, passing over disabled entries. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them, and Shift with N or P plays the next or the previous entry. The player's previous and next controls move through the entries in the same order the playlist does.  **What a screen reader hears.** A list named by 'label', with a button for each entry. When the playlist moves to another entry, by a press, by the player's controls, or at the end of a clip, a live region says 'playing-label', "Now playing" and the entry's name. */
   "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.  **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. */
+  /** 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. | | 'c' | Turns captions on or off. | | Home, End | Goes to the start or the end. | | '0' to '9' | Goes to that tenth of the video: '5' is the middle. | | Tab | Moves through the controls on the bar. |  A key with Control, Command, or Alt held is left to the browser. The player lists its keys in 'aria-keyshortcuts', and a live region says what a key changed that is not on the focused control: playing or paused, muted, the volume, captions on or off, and where the video is after a seek.  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.  **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. '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.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
+  /** The items arrive as data, in one of two ways:  - 'items' takes an array. A framework sets it as a property, and React   hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which   a server sends as markup.  Each item is drawn into a row in one of two ways:  - 'renderItem' is a function from an item and its index to the row's   content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element   with the item's 'name' as text, and 'data-field-href="url"' writes the   item's 'url' into 'href', the same for any attribute. A field may be a path   of keys, such as 'author.name'.  Rows are your markup in the light DOM, so your stylesheet styles them.  **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. '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.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none.  The list takes the 'empty' state while it has read its items and holds none, and the 'loading' state while 'loading' is set, so your stylesheet can change the box around it for either. A list with no name is reported once in a development build. Name it with 'label' or 'aria-label'.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
   "helix-headless-virtual-list": DefineCustomElement<
     HelixHeadlessVirtualList,
     HelixHeadlessVirtualListVueProps,