@fusion.dev/helix-headless 0.143.0 → 0.144.0

package/types/vue.d.ts

@@ -141,6 +141,7 @@ import type {
   HelixHeadlessTabPanel,
   HelixHeadlessTabs,
   HelixHeadlessTab,
+  HelixHeadlessTagGroup,
   HelixHeadlessTag,
   HelixHeadlessTextarea,
   HelixHeadlessTimeInput,
@@ -200,6 +201,7 @@ import type {
   HelixSelectedEvent,
   HelixSortEvent,
   HelixSortedEvent,
+  HelixRejectEvent,
   HelixFacetEvent,
   HelixBeforeActivateEvent,
   HelixGraphFilterEvent,
@@ -590,6 +592,24 @@ export type HelixHeadlessAvatarElementEvent<E = Event> = TypedEvent<
 >;
 
 export type HelixHeadlessAvatarVueProps = {
+  /** How long, in milliseconds, a picture may take before the initials stand
+in for it while it loads.
+
+Absent keeps the picture's place empty until it arrives or fails. Set,
+the initials show once the wait is over and the picture
+replaces them when it arrives, so a slow connection shows who it is
+without a cached picture flashing initials first. Radix's `delayMs` is the
+same idea. */
+  "fallback-delay"?: (HelixHeadlessAvatar["fallbackDelay"] | `${number}`) | undefined;
+  /** How long, in milliseconds, a picture may take before the initials stand
+in for it while it loads.
+
+Absent keeps the picture's place empty until it arrives or fails. Set,
+the initials show once the wait is over and the picture
+replaces them when it arrives, so a slow connection shows who it is
+without a cached picture flashing initials first. Radix's `delayMs` is the
+same idea. */
+  fallbackDelay?: (HelixHeadlessAvatar["fallbackDelay"]) | undefined;
   /** Name of the person or entity.
 
 Used for the label and the initials. */
@@ -908,6 +928,22 @@ Lives here rather than only on `IconButton` so the two share one render.
 An icon-only button without it is a control a screen reader announces as
 "button" and nothing else. */
   label?: (HelixHeadlessButton["label"]) | undefined;
+  /** Whether the action the button started is still running.
+
+A pending button keeps focus and stays in the tab order, and refuses every
+press: a click, Enter and Space, and Enter in a field of its form. The
+click does not reach your listeners. The inner control carries
+`aria-busy` and `aria-disabled`, and when the button becomes pending while
+it has focus, a reader hears `pending-label`. The styled button draws a
+turning ring over its words.
+
+`disabled` takes the button out of reach. Use `pending` for the wait after
+a press, so focus stays where the reader left it. */
+  pending?: (HelixHeadlessButton["pending"]) | undefined;
+  /** What a reader hears when the button becomes pending while it has focus. */
+  "pending-label"?: (HelixHeadlessButton["pendingLabel"]) | undefined;
+  /** What a reader hears when the button becomes pending while it has focus. */
+  pendingLabel?: (HelixHeadlessButton["pendingLabel"]) | undefined;
   /** What activating the button does to its form. */
   type?: (HelixHeadlessButton["type"]) | undefined;
   /** The value this button submits under its own `name`, as a native submit
@@ -1007,6 +1043,15 @@ invoker without an id in the same tree needs. */
 
 export type HelixHeadlessButtonVueEvents = {};
 
+/** `HelixHeadlessCallout` component event */
+export type HelixHeadlessCalloutElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessCallout,
+  E
+>;
+/** `helix-dismiss` event type */
+export type HelixHeadlessCalloutHelixDismissElementEvent =
+  HelixHeadlessCalloutElementEvent<HelixDismissEvent>;
+
 export type HelixHeadlessCalloutVueProps = {
   /** What kind of attention the passage needs.
 
@@ -1025,9 +1070,28 @@ Absent is the English for the tone: "Error", "Information", "Note",
 Absent is the English for the tone: "Error", "Information", "Note",
 "Success" or "Warning". */
   toneLabel?: (HelixHeadlessCallout["toneLabel"]) | undefined;
+  /** Whether the element shows a control that dismisses it. */
+  dismissible?: (HelixHeadlessCallout["dismissible"]) | undefined;
+  /** The dismiss control's label, read by screen readers.
+
+`attribute` is spelled out because Lit lowercases a property name to
+derive one rather than dash-casing it, so this would otherwise be
+reachable only as `dismisslabel`, which nobody would guess and no linter
+would catch. */
+  "dismiss-label"?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
+  /** The dismiss control's label, read by screen readers.
+
+`attribute` is spelled out because Lit lowercases a property name to
+derive one rather than dash-casing it, so this would otherwise be
+reachable only as `dismisslabel`, which nobody would guess and no linter
+would catch. */
+  dismissLabel?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
 };
 
-export type HelixHeadlessCalloutVueEvents = {};
+export type HelixHeadlessCalloutVueEvents = {
+  /** The dismiss button was pressed. The callout does not remove itself, so remove it in response. Cancelable. */
+  "helix-dismiss": HelixHeadlessCalloutHelixDismissElementEvent;
+};
 
 export type HelixHeadlessCanvasEdgeVueProps = {
   /** The name of the card the connection starts from. */
@@ -1593,6 +1657,10 @@ twice what this says once.
 Reflected and undefaulted, so a card that has not asked reads as a card
 with no attribute on it and the stylesheet only describes the departure. */
   mediaPlacement?: (HelixHeadlessCard["mediaPlacement"]) | undefined;
+  /**  */
+  "aria-labelledby"?: unknown;
+  /**  */
+  "aria-label"?: unknown;
 };
 
 export type HelixHeadlessCardVueEvents = {};
@@ -2066,10 +2134,19 @@ export type HelixHeadlessCheckboxGroupHelixBeforeChangeElementEvent =
   HelixHeadlessCheckboxGroupElementEvent<HelixBeforeChangeEvent>;
 
 export type HelixHeadlessCheckboxGroupVueProps = {
+  /** Whether a box above the set checks or unchecks every enabled box. */
+  "select-all"?: (HelixHeadlessCheckboxGroup["selectAll"]) | undefined;
+  /** Whether a box above the set checks or unchecks every enabled box. */
+  selectAll?: (HelixHeadlessCheckboxGroup["selectAll"]) | undefined;
+  /** The words beside the box `select-all` draws. */
+  "select-all-label"?: (HelixHeadlessCheckboxGroup["selectAllLabel"]) | undefined;
+  /** The words beside the box `select-all` draws. */
+  selectAllLabel?: (HelixHeadlessCheckboxGroup["selectAllLabel"]) | undefined;
   /** The checked values, comma separated.
 
 Read from the boxes once they are known, so a box a script ticks directly
-is in it at once. Written, it is pushed onto the boxes. */
+is in it at once. Written, it is pushed onto the boxes. A box whose value
+holds a comma cannot be named here: use `values`. */
   value?: (HelixHeadlessCheckboxGroup["value"]) | undefined;
   /**  */
   "aria-label"?: unknown;
@@ -2127,6 +2204,11 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessCheckboxGroup["name"]) | undefined;
+  /** The checked values, as a list, in the order the boxes are written.
+
+The same set as `value`, and the one to use where a value may hold a
+comma. Written, it checks exactly those boxes and unchecks the rest. */
+  values?: (HelixHeadlessCheckboxGroup["values"]) | undefined;
 };
 
 export type HelixHeadlessCheckboxGroupVueEvents = {
@@ -2171,6 +2253,28 @@ stylesheets. */
   "default-checked"?: (HelixHeadlessCheckbox["defaultChecked"]) | undefined;
   /** Whether the control starts checked. A form reset returns it to this state. */
   defaultChecked?: (HelixHeadlessCheckbox["defaultChecked"]) | undefined;
+  /** Whether a reader can see and focus the control and cannot change it. A
+read-only control still submits its value.
+
+React Aria's `isReadOnly`. A native checkbox has no read-only state, so
+the press is refused at the inner control, which keeps its box as it
+was, and the control says `aria-readonly`. A script can still set
+`checked`, as it can set the value of a read-only text field.
+
+The attribute is `readonly`, which is the platform's spelling for the
+text fields. */
+  readonly?: (HelixHeadlessCheckbox["readOnly"]) | undefined;
+  /** Whether a reader can see and focus the control and cannot change it. A
+read-only control still submits its value.
+
+React Aria's `isReadOnly`. A native checkbox has no read-only state, so
+the press is refused at the inner control, which keeps its box as it
+was, and the control says `aria-readonly`. A script can still set
+`checked`, as it can set the value of a read-only text field.
+
+The attribute is `readonly`, which is the platform's spelling for the
+text fields. */
+  readOnly?: (HelixHeadlessCheckbox["readOnly"]) | undefined;
   /**  */
   "aria-label"?: unknown;
   /** The validation message shown under the control. It replaces the
@@ -2257,6 +2361,20 @@ Reflected, because the stylesheet paints a diff differently from code, and
 In a diff, each file is named from the patch, and this names a patch that
 carries no name of its own. */
   label?: (HelixHeadlessCodeBlock["label"]) | undefined;
+  /** Whether the lines are numbered in a gutter beside the code.
+
+The numbers are hidden from the accessibility tree and are not part of a
+copy, which takes the code alone. Reflected, because the stylesheet lays
+the gutter out beside the code. A diff numbers its lines from its hunks
+whether or not this is set. */
+  "line-numbers"?: (HelixHeadlessCodeBlock["lineNumbers"]) | undefined;
+  /** Whether the lines are numbered in a gutter beside the code.
+
+The numbers are hidden from the accessibility tree and are not part of a
+copy, which takes the code alone. Reflected, because the stylesheet lays
+the gutter out beside the code. A diff numbers its lines from its hunks
+whether or not this is set. */
+  lineNumbers?: (HelixHeadlessCodeBlock["lineNumbers"]) | undefined;
   /** Whether to leave the copy button off.
 
 Negative, which is not a style choice. A boolean attribute is true whenever
@@ -2303,6 +2421,17 @@ Absent is unified, each removal above its replacement, which fits any
 width. `split` sets the old version beside the new one. Optional rather
 than defaulted, so the host carries no attribute the consumer did not write. */
   variant?: (HelixHeadlessCodeBlock["variant"]) | undefined;
+  /** Turns the code into highlighted markup, which the block draws in place of
+the plain text.
+
+Called with the code as written and returning HTML, such as the output of
+Shiki's `codeToHtml` or Prism's `highlight`. **The markup is drawn as
+given**, so it has to escape the code it was handed, which those
+highlighters do. Bind the language in the function you pass. The code
+stays in the slot, so the copy button copies it as written and a reader
+without the script still has it. Not called on a server, which has no code
+to read, nor for a diff. */
+  highlight?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
 };
 
 export type HelixHeadlessCodeBlockVueEvents = {};
@@ -2339,6 +2468,26 @@ point.** The field holds a color, so a browser offering to fill it with a
 saved address is competing for the same keystrokes as the picker. A
 consumer who wants autofill can still ask. */
   autocomplete?: (HelixHeadlessColorInput["autocomplete"]) | undefined;
+  /** Whether the panel shows a number field for each channel of the color.
+Passed to the panel; see Color Picker's `channel-fields`. */
+  "channel-fields"?: (HelixHeadlessColorInput["channelFields"]) | undefined;
+  /** Whether the panel shows a number field for each channel of the color.
+Passed to the panel; see Color Picker's `channel-fields`. */
+  channelFields?: (HelixHeadlessColorInput["channelFields"]) | undefined;
+  /** The words a color's name is spoken in, as JSON keyed by their English,
+such as `{"red": "rot", "vibrant": "kräftiges"}`.
+
+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. */
+  "color-words"?: (HelixHeadlessColorInput["colorWords"]) | undefined;
+  /** The words a color's name is spoken in, as JSON keyed by their English,
+such as `{"red": "rot", "vibrant": "kräftiges"}`.
+
+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`.
 
 **Undefaulted, because it reflects.** The two together stamp an attribute
@@ -2539,6 +2688,10 @@ ramps. A consumer who wants autofill can still ask. */
   "bad-input-message"?: (HelixHeadlessColorPicker["badInputMessage"]) | undefined;
   /** The message shown when the value is text that is not a color. */
   badInputMessage?: (HelixHeadlessColorPicker["badInputMessage"]) | undefined;
+  /** What the blue channel's field is called, in `channel-fields`. */
+  "blue-label"?: (HelixHeadlessColorPicker["blueLabel"]) | undefined;
+  /** What the blue channel's field is called, in `channel-fields`. */
+  blueLabel?: (HelixHeadlessColorPicker["blueLabel"]) | undefined;
   /** What the square's vertical ramp is called.
 
 **Every word the picker speaks is a property**, so a page in another
@@ -2549,6 +2702,50 @@ language hears its own rather than English between its own labels. */
 **Every word the picker speaks is a property**, so a page in another
 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`.
+
+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. */
+  "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`.
+
+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;
+  /** The words a color's name is spoken in, as JSON keyed by their English,
+such as `{"red": "rot", "vibrant": "kräftiges"}`.
+
+**A color is named the way React Aria names one**, as "vibrant red" or
+"dark grayish blue", and the keys are the ones `@react-stately/color`
+translates, so a table a page already has for it can be handed over whole.
+`colorName` and `transparentColorName` are the two sentences that put the
+words together. A word left out is spoken in English.
+
+The name follows the numbers on the square, follows the number on the hue
+ramp, and names each preset, so a reader who cannot see the color hears
+which one it is. */
+  "color-words"?: (HelixHeadlessColorPicker["colorWords"]) | undefined;
+  /** The words a color's name is spoken in, as JSON keyed by their English,
+such as `{"red": "rot", "vibrant": "kräftiges"}`.
+
+**A color is named the way React Aria names one**, as "vibrant red" or
+"dark grayish blue", and the keys are the ones `@react-stately/color`
+translates, so a table a page already has for it can be handed over whole.
+`colorName` and `transparentColorName` are the two sentences that put the
+words together. A word left out is spoken in English.
+
+The name follows the numbers on the square, follows the number on the hue
+ramp, and names each preset, so a reader who cannot see the color hears
+which one it is. */
+  colorWords?: (HelixHeadlessColorPicker["colorWords"]) | undefined;
   /** The text the sample shows for a moment after it copies the value. */
   "copied-label"?: (HelixHeadlessColorPicker["copiedLabel"]) | undefined;
   /** The text the sample shows for a moment after it copies the value. */
@@ -2572,6 +2769,10 @@ Only what is written. Everything is read whatever this says, so a picker on
   "format-label"?: (HelixHeadlessColorPicker["formatLabel"]) | undefined;
   /** What the syntax toggle is called, with `{format}` filled in. */
   formatLabel?: (HelixHeadlessColorPicker["formatLabel"]) | undefined;
+  /** What the green channel's field is called, in `channel-fields`. */
+  "green-label"?: (HelixHeadlessColorPicker["greenLabel"]) | undefined;
+  /** What the green channel's field is called, in `channel-fields`. */
+  greenLabel?: (HelixHeadlessColorPicker["greenLabel"]) | undefined;
   /** What the hue channel is called. */
   "hue-label"?: (HelixHeadlessColorPicker["hueLabel"]) | undefined;
   /** What the hue channel is called. */
@@ -2584,6 +2785,12 @@ the label, the hint and the feedback, and a second message inside the panel
 would be the same error said twice. What is left for the picker is the one
 thing the field cannot draw from outside, the mark on the answer itself. */
   invalid?: (HelixHeadlessColorPicker["invalid"]) | undefined;
+  /** What the lightness channel's field is called, in `channel-fields` with
+hsl. */
+  "lightness-label"?: (HelixHeadlessColorPicker["lightnessLabel"]) | undefined;
+  /** What the lightness channel's field is called, in `channel-fields` with
+hsl. */
+  lightnessLabel?: (HelixHeadlessColorPicker["lightnessLabel"]) | undefined;
   /** Hides the eyedropper. Without it, the eyedropper appears in browsers that
 support one. */
   "no-eyedropper"?: (HelixHeadlessColorPicker["noEyedropper"]) | undefined;
@@ -2680,6 +2887,10 @@ letting it move would show `rgb` over a hex it is no longer allowed to
 restate. The eyedropper clears the screen and runs a system sampler, so
 letting it open would take a color from the reader and drop it. */
   readOnly?: (HelixHeadlessColorPicker["readOnly"]) | undefined;
+  /** What the red channel's field is called, in `channel-fields`. */
+  "red-label"?: (HelixHeadlessColorPicker["redLabel"]) | undefined;
+  /** What the red channel's field is called, in `channel-fields`. */
+  redLabel?: (HelixHeadlessColorPicker["redLabel"]) | undefined;
   /** Requires a color before the form can submit.
 
 **A color is exactly as requirable as a date**, which is the comparison
@@ -2806,6 +3017,24 @@ export type HelixHeadlessComboboxToggleElementEvent =
   HelixHeadlessComboboxElementEvent<ToggleEvent>;
 
 export type HelixHeadlessComboboxVueProps = {
+  /** Whether text that names no option is taken as the value, as React Aria's
+`allowsCustomValue`.
+
+For a field where the list is a help and not the whole of the answer, a
+city or a job title. What was typed becomes the value when the reader
+leaves the field or presses Enter with nothing highlighted, and text that
+names an option takes that option. Unlike `creatable`, no event asks
+first and no option is expected to be added: the value is the text. */
+  "allows-custom-value"?: (HelixHeadlessCombobox["allowsCustomValue"]) | undefined;
+  /** Whether text that names no option is taken as the value, as React Aria's
+`allowsCustomValue`.
+
+For a field where the list is a help and not the whole of the answer, a
+city or a job title. What was typed becomes the value when the reader
+leaves the field or presses Enter with nothing highlighted, and text that
+names an option takes that option. Unlike `creatable`, no event asks
+first and no option is expected to be added: the value is the text. */
+  allowsCustomValue?: (HelixHeadlessCombobox["allowsCustomValue"]) | undefined;
   /** What the browser may autofill in the text field, as a platform token.
 
 **Defaults to `off`, which is not the platform's default and is the
@@ -2884,6 +3113,20 @@ filled in.
 **The name goes in**, so a row of them is heard as which one each
 removes rather than as "Remove" said once per chosen option. */
   removeLabel?: (HelixHeadlessCombobox["removeLabel"]) | undefined;
+  /** What a screen reader hears when typing leaves one option. `{count}` is
+the count. */
+  "result-label"?: (HelixHeadlessCombobox["resultLabel"]) | undefined;
+  /** What a screen reader hears when typing leaves one option. `{count}` is
+the count. */
+  resultLabel?: (HelixHeadlessCombobox["resultLabel"]) | undefined;
+  /** What a screen reader hears when typing leaves any other number of
+options. `{count}` is the count, and `Intl.PluralRules` picks between the
+two. */
+  "results-label"?: (HelixHeadlessCombobox["resultsLabel"]) | undefined;
+  /** What a screen reader hears when typing leaves any other number of
+options. `{count}` is the count, and `Intl.PluralRules` picks between the
+two. */
+  resultsLabel?: (HelixHeadlessCombobox["resultsLabel"]) | undefined;
   /** Whether the field completes the word as the user types.
 
 `suggest` rather than `autocomplete`, which is a real HTML attribute this
@@ -3045,6 +3288,14 @@ export type HelixHeadlessCommandVueProps = {
   "empty-text"?: (HelixHeadlessCommand["emptyText"]) | undefined;
   /** The text shown when the filter matches no commands. */
   emptyText?: (HelixHeadlessCommand["emptyText"]) | undefined;
+  /** How long typing rests before the commands are filtered, in milliseconds,
+so a palette filtered on a server sends one `helix-filter` for a word.
+`0` filters on every keystroke. See Listbox's `filter-delay`. */
+  "filter-delay"?: (HelixHeadlessCommand["filterDelay"] | `${number}`) | undefined;
+  /** How long typing rests before the commands are filtered, in milliseconds,
+so a palette filtered on a server sends one `helix-filter` for a word.
+`0` filters on every keystroke. See Listbox's `filter-delay`. */
+  filterDelay?: (HelixHeadlessCommand["filterDelay"]) | undefined;
   /** The key that opens the palette, written as `mod+k`, `shift+p`, or `k`.
 
 Empty turns it off, for a consumer who opens the palette from a button or
@@ -3064,6 +3315,20 @@ Passed to the list, which shows `loading-text` and tells screen readers. */
   loadingText?: (HelixHeadlessCommand["loadingText"]) | undefined;
   /** The text shown in the filter field before anything is typed. */
   placeholder?: (HelixHeadlessCommand["placeholder"]) | undefined;
+  /** What a screen reader hears when typing leaves one command. `{count}` is
+the count. */
+  "result-label"?: (HelixHeadlessCommand["resultLabel"]) | undefined;
+  /** What a screen reader hears when typing leaves one command. `{count}` is
+the count. */
+  resultLabel?: (HelixHeadlessCommand["resultLabel"]) | undefined;
+  /** What a screen reader hears when typing leaves any other number of
+commands. `{count}` is the count, and `Intl.PluralRules` picks between the
+two. */
+  "results-label"?: (HelixHeadlessCommand["resultsLabel"]) | undefined;
+  /** What a screen reader hears when typing leaves any other number of
+commands. `{count}` is the count, and `Intl.PluralRules` picks between the
+two. */
+  resultsLabel?: (HelixHeadlessCommand["resultsLabel"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
   "default-open"?: (HelixHeadlessCommand["defaultOpen"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
@@ -3090,7 +3355,7 @@ export type HelixHeadlessCommandVueEvents = {
   "helix-before-open": HelixHeadlessCommandHelixBeforeOpenElementEvent;
   /** Fired as the user types, with the text the list is filtered by. Cancelable: cancel it to leave the list unfiltered and filter the commands yourself, for example on a server while `loading` is set. */
   "helix-filter": HelixHeadlessCommandHelixFilterElementEvent;
-  /** A command was chosen. Cancelable: cancel it to keep the palette open. */
+  /** A command was chosen, with its `href` where the option is a link. Cancelable: cancel it to keep the palette open, and to keep the browser from following the link. */
   "helix-select": HelixHeadlessCommandHelixSelectElementEvent;
   /** The palette opened or closed. The event carries `newState` and `oldState`. */
   toggle: HelixHeadlessCommandToggleElementEvent;
@@ -3116,6 +3381,17 @@ dash-casing it, and `copiedlabel` is not what anyone would type. */
 `attribute` written out, because Lit lowercases a property name rather than
 dash-casing it, and `copiedlabel` is not what anyone would type. */
   copiedLabel?: (HelixHeadlessCopyButton["copiedLabel"]) | undefined;
+  /** The button's name and tooltip text after a press that put nothing on the
+clipboard. */
+  "error-label"?: (HelixHeadlessCopyButton["errorLabel"]) | undefined;
+  /** The button's name and tooltip text after a press that put nothing on the
+clipboard. */
+  errorLabel?: (HelixHeadlessCopyButton["errorLabel"]) | undefined;
+  /** The element to copy from, by its id: `key` for its text, `key[value]` for
+an attribute, and `key.value` for a property. Read at the press, and used
+in place of `value`. An element that is not there copies nothing, which is
+a failed copy. */
+  from?: (HelixHeadlessCopyButton["from"]) | undefined;
   /** The button's name and tooltip text before a copy.
 
 Defaulted rather than left empty. An icon-only control must be named, and
@@ -3195,6 +3471,22 @@ native submitter would have given it, which is the point. */
   formtarget?: (HelixHeadlessCopyButton["formTarget"]) | undefined;
   /** Which browsing context the response lands in, overriding the form's own. */
   formTarget?: (HelixHeadlessCopyButton["formTarget"]) | undefined;
+  /** Whether the action the button started is still running.
+
+A pending button keeps focus and stays in the tab order, and refuses every
+press: a click, Enter and Space, and Enter in a field of its form. The
+click does not reach your listeners. The inner control carries
+`aria-busy` and `aria-disabled`, and when the button becomes pending while
+it has focus, a reader hears `pending-label`. The styled button draws a
+turning ring over its words.
+
+`disabled` takes the button out of reach. Use `pending` for the wait after
+a press, so focus stays where the reader left it. */
+  pending?: (HelixHeadlessCopyButton["pending"]) | undefined;
+  /** What a reader hears when the button becomes pending while it has focus. */
+  "pending-label"?: (HelixHeadlessCopyButton["pendingLabel"]) | undefined;
+  /** What a reader hears when the button becomes pending while it has focus. */
+  pendingLabel?: (HelixHeadlessCopyButton["pendingLabel"]) | undefined;
   /** What activating the button does to its form. */
   type?: (HelixHeadlessCopyButton["type"]) | undefined;
   /** Whether the control is disabled and cannot be used.
@@ -3280,6 +3572,8 @@ invoker without an id in the same tree needs. */
 export type HelixHeadlessCopyButtonVueEvents = {
   /** Fired after the clipboard write succeeds. */
   "helix-copy": HelixHeadlessCopyButtonHelixCopyElementEvent;
+  /** Fired when a press put nothing on the clipboard: the browser refused the write, or there was nothing to copy. */
+  "helix-copy-error": HelixHeadlessCopyButtonElementEvent;
 };
 
 /** `HelixHeadlessDataTable` component event */
@@ -3705,6 +3999,12 @@ and is Sunday otherwise. */
   locale?: (HelixHeadlessDateInput["locale"]) | undefined;
   /** The latest date that can be chosen, as `YYYY-MM-DD`. */
   max?: (HelixHeadlessDateInput["max"]) | undefined;
+  /** How far the calendar's heading steps back from the days: `month` or
+`year`. Handed to the calendar; see Date Picker's `max-view`. */
+  "max-view"?: (HelixHeadlessDateInput["maxView"]) | undefined;
+  /** How far the calendar's heading steps back from the days: `month` or
+`year`. Handed to the calendar; see Date Picker's `max-view`. */
+  maxView?: (HelixHeadlessDateInput["maxView"]) | undefined;
   /** The earliest date that can be chosen, as `YYYY-MM-DD`. */
   min?: (HelixHeadlessDateInput["min"]) | undefined;
   /** How many dates can be held at once.
@@ -3720,16 +4020,38 @@ an end in April otherwise means paging between them and losing sight of the
 first. The panel is sized by its content, so this widens it, and where the
 window has no room for that width it shows one month until there is. */
   months?: (HelixHeadlessDateInput["months"]) | undefined;
+  /** The name of the calendar's heading where it shows the months, with
+`{heading}` filled in. */
+  "month-view-label"?: (HelixHeadlessDateInput["monthViewLabel"]) | undefined;
+  /** The name of the calendar's heading where it shows the months, with
+`{heading}` filled in. */
+  monthViewLabel?: (HelixHeadlessDateInput["monthViewLabel"]) | undefined;
   /** The name of the calendar's control that moves to the next month. */
   "next-label"?: (HelixHeadlessDateInput["nextLabel"]) | undefined;
   /** The name of the calendar's control that moves to the next month. */
   nextLabel?: (HelixHeadlessDateInput["nextLabel"]) | undefined;
+  /** The name of the calendar's control that moves forward a year. */
+  "next-year-label"?: (HelixHeadlessDateInput["nextYearLabel"]) | undefined;
+  /** The name of the calendar's control that moves forward a year. */
+  nextYearLabel?: (HelixHeadlessDateInput["nextYearLabel"]) | undefined;
+  /** The name of the calendar's control that moves forward a page of years. */
+  "next-years-label"?: (HelixHeadlessDateInput["nextYearsLabel"]) | undefined;
+  /** The name of the calendar's control that moves forward a page of years. */
+  nextYearsLabel?: (HelixHeadlessDateInput["nextYearsLabel"]) | undefined;
   /** The text the field shows before a date is entered. */
   placeholder?: (HelixHeadlessDateInput["placeholder"]) | undefined;
   /** The name of the calendar's control that moves to the previous month. */
   "previous-label"?: (HelixHeadlessDateInput["previousLabel"]) | undefined;
   /** The name of the calendar's control that moves to the previous month. */
   previousLabel?: (HelixHeadlessDateInput["previousLabel"]) | undefined;
+  /** The name of the calendar's control that moves back a year. */
+  "previous-year-label"?: (HelixHeadlessDateInput["previousYearLabel"]) | undefined;
+  /** The name of the calendar's control that moves back a year. */
+  previousYearLabel?: (HelixHeadlessDateInput["previousYearLabel"]) | undefined;
+  /** The name of the calendar's control that moves back a page of years. */
+  "previous-years-label"?: (HelixHeadlessDateInput["previousYearsLabel"]) | undefined;
+  /** The name of the calendar's control that moves back a page of years. */
+  previousYearsLabel?: (HelixHeadlessDateInput["previousYearsLabel"]) | undefined;
   /** The message shown when a range holds more than two dates.
 
 **Every sentence a control raises in the browser's bubble is a property**,
@@ -3785,6 +4107,26 @@ platform's base. */
   "unavailable-message"?: (HelixHeadlessDateInput["unavailableMessage"]) | undefined;
   /** The message shown when `disable-dates` or `disable-days` bars a date. */
   unavailableMessage?: (HelixHeadlessDateInput["unavailableMessage"]) | undefined;
+  /** The name of the calendar's heading where it shows a page of years, with
+`{heading}` filled in. */
+  "year-view-label"?: (HelixHeadlessDateInput["yearViewLabel"]) | undefined;
+  /** The name of the calendar's heading where it shows a page of years, with
+`{heading}` filled in. */
+  yearViewLabel?: (HelixHeadlessDateInput["yearViewLabel"]) | undefined;
+  /** What a screen reader hears for a segment with nothing in it, which a
+sighted reader sees as dashes. */
+  "empty-segment-label"?: (HelixHeadlessDateInput["emptySegmentLabel"]) | undefined;
+  /** What a screen reader hears for a segment with nothing in it, which a
+sighted reader sees as dashes. */
+  emptySegmentLabel?: (HelixHeadlessDateInput["emptySegmentLabel"]) | undefined;
+  /** Whether the field is a row of segments, one for each part of the date or
+time, in place of a line of text.
+
+Each segment is set with digits or the arrow keys, in the order the
+locale writes them, so a reader types a date the way they write one and
+no format has to be read back. The picker still opens from the trigger
+and with Alt+Down. */
+  segmented?: (HelixHeadlessDateInput["segmented"]) | undefined;
   /** Whether the value is locked. A read-only control still submits its value.
 
 **Enforced by refusing every request in one place**, which is the seam this
@@ -3925,6 +4267,14 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessDateInput["name"]) | undefined;
+  /** What each day in the calendar shows, in place of its number: a function
+given the date as `YYYY-MM-DD`. Handed to the calendar; see Date Picker's
+`dayContent`. */
+  dayContent?: (HelixHeadlessDateInput["dayContent"]) | undefined;
+  /** A rule for which dates cannot be chosen: a function given the date as
+`YYYY-MM-DD` that returns `true` to bar it. The calendar offers such a date
+as unavailable, and a typed one is invalid, as with `disable-dates`. */
+  isDateUnavailable?: (HelixHeadlessDateInput["isDateUnavailable"]) | undefined;
   /** The value as a `Date`, at midnight UTC, or `null` while there is no date.
 
 The platform's own pair on `<input type="date">`, and this control holds the
@@ -4017,6 +4367,24 @@ Absent uses the runtime's own. */
   locale?: (HelixHeadlessDatePicker["locale"]) | undefined;
   /** Latest selectable date, as `YYYY-MM-DD`. */
   max?: (HelixHeadlessDatePicker["max"]) | undefined;
+  /** How far the heading lets a reader step back from the days: `month` to a
+year's months, or `year` to a page of years and then its months.
+
+Absent, the heading is text and the calendar moves a month at a time. Set,
+the heading is a button that shows the months, and from there the years,
+so a birth date forty years back is three presses rather than four hundred
+and eighty. Choosing a year shows its months, and choosing a month shows
+its days. */
+  "max-view"?: (HelixHeadlessDatePicker["maxView"]) | undefined;
+  /** How far the heading lets a reader step back from the days: `month` to a
+year's months, or `year` to a page of years and then its months.
+
+Absent, the heading is text and the calendar moves a month at a time. Set,
+the heading is a button that shows the months, and from there the years,
+so a birth date forty years back is three presses rather than four hundred
+and eighty. Choosing a year shows its months, and choosing a month shows
+its days. */
+  maxView?: (HelixHeadlessDatePicker["maxView"]) | undefined;
   /** Earliest selectable date, as `YYYY-MM-DD`. */
   min?: (HelixHeadlessDatePicker["min"]) | undefined;
   /** How many dates can be held at once. */
@@ -4030,10 +4398,24 @@ can drive the view. Reading gives the month on show; writing sets it, and
   month?: (HelixHeadlessDatePicker["month"]) | undefined;
   /** How many months to show, side by side. */
   months?: (HelixHeadlessDatePicker["months"]) | undefined;
+  /** The name of the heading where it shows the months, with `{heading}`
+filled in as the month on show. */
+  "month-view-label"?: (HelixHeadlessDatePicker["monthViewLabel"]) | undefined;
+  /** The name of the heading where it shows the months, with `{heading}`
+filled in as the month on show. */
+  monthViewLabel?: (HelixHeadlessDatePicker["monthViewLabel"]) | undefined;
   /** Accessible name for the control that pages forward. */
   "next-label"?: (HelixHeadlessDatePicker["nextLabel"]) | undefined;
   /** Accessible name for the control that pages forward. */
   nextLabel?: (HelixHeadlessDatePicker["nextLabel"]) | undefined;
+  /** Accessible name for the control that moves forward a year, in the months. */
+  "next-year-label"?: (HelixHeadlessDatePicker["nextYearLabel"]) | undefined;
+  /** Accessible name for the control that moves forward a year, in the months. */
+  nextYearLabel?: (HelixHeadlessDatePicker["nextYearLabel"]) | undefined;
+  /** Accessible name for the control that moves forward a page, in the years. */
+  "next-years-label"?: (HelixHeadlessDatePicker["nextYearsLabel"]) | undefined;
+  /** Accessible name for the control that moves forward a page, in the years. */
+  nextYearsLabel?: (HelixHeadlessDatePicker["nextYearsLabel"]) | undefined;
   /** Accessible name for the control that pages back.
 
 A property because a calendar rendering its own month names from `locale`
@@ -4048,6 +4430,14 @@ would otherwise still announce its controls in English. `attribute:`
 spelled out, since Lit lowercases a camelCase name rather than dash-casing
 it. */
   previousLabel?: (HelixHeadlessDatePicker["previousLabel"]) | undefined;
+  /** Accessible name for the control that moves back a year, in the months. */
+  "previous-year-label"?: (HelixHeadlessDatePicker["previousYearLabel"]) | undefined;
+  /** Accessible name for the control that moves back a year, in the months. */
+  previousYearLabel?: (HelixHeadlessDatePicker["previousYearLabel"]) | undefined;
+  /** Accessible name for the control that moves back a page, in the years. */
+  "previous-years-label"?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
+  /** Accessible name for the control that moves back a page, in the years. */
+  previousYearsLabel?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
   /** The validation message for a date after `max`. `{max}` is replaced with
 `max`, written as a date in `locale`. */
   "range-overflow-message"?: (HelixHeadlessDatePicker["rangeOverflowMessage"]) | undefined;
@@ -4112,6 +4502,17 @@ bars. */
   "value-missing-message"?: (HelixHeadlessDatePicker["valueMissingMessage"]) | undefined;
   /** The validation message for a required date picker with no date chosen. */
   valueMissingMessage?: (HelixHeadlessDatePicker["valueMissingMessage"]) | undefined;
+  /** What the calendar shows: the days of a month, the months of a year, or a
+page of years. `day` unless `max-view` lets a reader step back.
+
+Not reflected, being state. Set it to open on the months or the years. */
+  view?: (HelixHeadlessDatePicker["view"]) | undefined;
+  /** The name of the heading where it shows a page of years, with `{heading}`
+filled in as the year on show. */
+  "year-view-label"?: (HelixHeadlessDatePicker["yearViewLabel"]) | undefined;
+  /** The name of the heading where it shows a page of years, with `{heading}`
+filled in as the year on show. */
+  yearViewLabel?: (HelixHeadlessDatePicker["yearViewLabel"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value. */
   "default-value"?: (HelixHeadlessDatePicker["defaultValue"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value. */
@@ -4149,6 +4550,24 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessDatePicker["name"]) | undefined;
+  /** What each day shows, in place of its number: a function given the date as
+`YYYY-MM-DD` that returns text, an element or a Lit template.
+
+For a price or a dot under the number, as React Aria's `CalendarCell`
+takes children. The cell is still named by its whole date, so what you
+draw here is for the eye; say anything a reader must hear in the date's
+description elsewhere. Return the day's number with it where it should
+still show. A property only, there being no way to write a function in
+markup. */
+  dayContent?: (HelixHeadlessDatePicker["dayContent"]) | undefined;
+  /** A rule for which dates cannot be chosen: a function given the date as
+`YYYY-MM-DD` that returns `true` to bar it.
+
+For what a list cannot say, such as the second Tuesday of each month or
+the days a server has fully booked. It bars a date as `disable-dates`
+does, in the grid and in validation. A property only, as React Aria's
+`isDateUnavailable` is a prop. */
+  isDateUnavailable?: (HelixHeadlessDatePicker["isDateUnavailable"]) | undefined;
   /** The value as a `Date`, at midnight UTC, or `null` while there is no date.
 
 The platform's own pair on `<input type="date">`, and this control holds the
@@ -4222,6 +4641,16 @@ export type HelixHeadlessDialogToggleElementEvent =
   HelixHeadlessDialogElementEvent<ToggleEvent>;
 
 export type HelixHeadlessDialogVueProps = {
+  /** Makes the dialog an alert dialog, for a message that interrupts to ask for
+an answer, such as a confirmation before something is deleted.
+
+The `<dialog>` takes `role="alertdialog"`, so a screen reader announces the
+dialog and its description as it opens. Everything else stays the same:
+the dialog is modal, Escape asks to close it, and `persistent` still
+refuses that.
+
+Not reflected, because no stylesheet selects on it. */
+  alert?: (HelixHeadlessDialog["alert"]) | undefined;
   /** Which close requests the browser handles on its own.
 
 `<dialog closedby>`, forwarded, and safe to forward because every path it
@@ -4244,6 +4673,17 @@ the property this component exists to keep.
 Absent by default, which is the platform's `auto` and this library's rule
 that a resting value is an attribute's absence. */
   closedBy?: (HelixHeadlessDialog["closedBy"]) | undefined;
+  /** Draws a control that closes the dialog, in the corner where the title is.
+
+Pressing it is `close()`, so it sends `helix-before-close` like every other
+way out, and `persistent` does not disable it. */
+  dismissible?: (HelixHeadlessDialog["dismissible"]) | undefined;
+  /** The close control's accessible name. Translate it with the rest of your
+interface. */
+  "dismiss-label"?: (HelixHeadlessDialog["dismissLabel"]) | undefined;
+  /** The close control's accessible name. Translate it with the rest of your
+interface. */
+  dismissLabel?: (HelixHeadlessDialog["dismissLabel"]) | undefined;
   /** Accessible name for the dialog. When it is empty, the heading in the
 `header` slot names the dialog. */
   label?: (HelixHeadlessDialog["label"]) | undefined;
@@ -4451,6 +4891,24 @@ default assigned to the property would reflect onto every host and put a
 `placement="end"` into markup no consumer wrote. So what this tier
 guarantees is the absence, and a sheet selects on it. */
   placement?: (HelixHeadlessDrawer["placement"]) | undefined;
+  /** The fractions of the panel a reader can leave on screen, as a list such as
+`0.5 1`. The drawer opens at the smallest, and a swipe comes to rest at the
+nearest, or closes the drawer below the smallest.
+
+Empty is `1`: the whole panel, and a swipe either closes it or puts it
+back. */
+  "snap-points"?: (HelixHeadlessDrawer["snapPoints"]) | undefined;
+  /** The fractions of the panel a reader can leave on screen, as a list such as
+`0.5 1`. The drawer opens at the smallest, and a swipe comes to rest at the
+nearest, or closes the drawer below the smallest.
+
+Empty is `1`: the whole panel, and a swipe either closes it or puts it
+back. */
+  snapPoints?: (HelixHeadlessDrawer["snapPoints"]) | undefined;
+  /** Whether a touch or a pen can swipe the drawer away. `swipe="false"` turns
+it off, for a panel whose content has its own use for the gesture, such as
+a map. */
+  swipe?: (HelixHeadlessDrawer["swipe"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
   "default-open"?: (HelixHeadlessDrawer["defaultOpen"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
@@ -4603,6 +5061,9 @@ export type HelixHeadlessFileInputElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessFileInputHelixBeforeChangeElementEvent =
   HelixHeadlessFileInputElementEvent<HelixBeforeChangeEvent>;
+/** `helix-reject` event type */
+export type HelixHeadlessFileInputHelixRejectElementEvent =
+  HelixHeadlessFileInputElementEvent<HelixRejectEvent>;
 
 export type HelixHeadlessFileInputVueProps = {
   /** Which files the picker offers and a drop takes, as a native `accept` list.
@@ -4612,12 +5073,31 @@ filter is the only check the platform makes and a drop never meets it. */
   accept?: (HelixHeadlessFileInput["accept"]) | undefined;
   /** Which camera or microphone a mobile picker should offer, if any. */
   capture?: (HelixHeadlessFileInput["capture"]) | undefined;
+  /** Whether the picker chooses a folder, and the field takes every file in
+it. The platform's `webkitdirectory`. */
+  directory?: (HelixHeadlessFileInput["directory"]) | undefined;
   /** Language tag the sizes are written in.
 
 Absent uses the runtime's own. */
   locale?: (HelixHeadlessFileInput["locale"]) | undefined;
+  /** The most files the field holds, under `multiple`. Files past it are
+refused. */
+  "max-files"?: (HelixHeadlessFileInput["maxFiles"] | `${number}`) | undefined;
+  /** The most files the field holds, under `multiple`. Files past it are
+refused. */
+  maxFiles?: (HelixHeadlessFileInput["maxFiles"]) | undefined;
+  /** The most bytes one file may have. A larger one is refused. */
+  "max-file-size"?: (HelixHeadlessFileInput["maxFileSize"] | `${number}`) | undefined;
+  /** The most bytes one file may have. A larger one is refused. */
+  maxFileSize?: (HelixHeadlessFileInput["maxFileSize"]) | undefined;
   /** Whether more than one file can be chosen. */
   multiple?: (HelixHeadlessFileInput["multiple"]) | undefined;
+  /** What a reader hears when files are refused, with `{count}` and `{names}`
+filled in. */
+  "rejected-text"?: (HelixHeadlessFileInput["rejectedText"]) | undefined;
+  /** What a reader hears when files are refused, with `{count}` and `{names}`
+filled in. */
+  rejectedText?: (HelixHeadlessFileInput["rejectedText"]) | undefined;
   /** The accessible name of the control that removes a file. `{name}` is
 replaced with the file's name.
 
@@ -4692,6 +5172,9 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessFileInput["name"]) | undefined;
+  /** Your own check on each arriving file, which returns why it is refused, or
+nothing to take it. A property, since a function cannot be an attribute. */
+  validate?: (HelixHeadlessFileInput["validate"]) | undefined;
 };
 
 export type HelixHeadlessFileInputVueEvents = {
@@ -4699,6 +5182,8 @@ export type HelixHeadlessFileInputVueEvents = {
   change: HelixHeadlessFileInputElementEvent;
   /** Fired before the chosen files change, with their names, and cancelable. Canceling it keeps the files the field had, even when the browser has already written a new pick. */
   "helix-before-change": HelixHeadlessFileInputHelixBeforeChangeElementEvent;
+  /** Fired when files arrive and some are left out. `detail.files` lists each with its `reason`: `type`, `size`, `count` or `invalid`, and your `validate` message. */
+  "helix-reject": HelixHeadlessFileInputHelixRejectElementEvent;
   /** Fired after the value changes. */
   input: HelixHeadlessFileInputElementEvent;
 };
@@ -4912,10 +5397,26 @@ an icon. */
   /** The name of the clear button, read by screen readers. The button shows only
 an icon. */
   clearLabel?: (HelixHeadlessFilterInput["clearLabel"]) | undefined;
+  /** Whether the panel narrows itself to the suggestions that hold the term
+being typed, as React Aria's Autocomplete filters. Off, the panel shows
+what you slot and you narrow it. */
+  "filter-suggestions"?: (HelixHeadlessFilterInput["filterSuggestions"]) | undefined;
+  /** Whether the panel narrows itself to the suggestions that hold the term
+being typed, as React Aria's Autocomplete filters. Off, the panel shows
+what you slot and you narrow it. */
+  filterSuggestions?: (HelixHeadlessFilterInput["filterSuggestions"]) | undefined;
   /** The text shown while the field is empty.
 
 Not a label: it goes when typing starts. */
   placeholder?: (HelixHeadlessFilterInput["placeholder"]) | undefined;
+  /** What a reader hears for one suggestion, with `{count}` filled in. */
+  "suggestion-label"?: (HelixHeadlessFilterInput["suggestionLabel"]) | undefined;
+  /** What a reader hears for one suggestion, with `{count}` filled in. */
+  suggestionLabel?: (HelixHeadlessFilterInput["suggestionLabel"]) | undefined;
+  /** What a reader hears for any other number of suggestions, with `{count}` filled in. */
+  "suggestions-label"?: (HelixHeadlessFilterInput["suggestionsLabel"]) | undefined;
+  /** What a reader hears for any other number of suggestions, with `{count}` filled in. */
+  suggestionsLabel?: (HelixHeadlessFilterInput["suggestionsLabel"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
   "default-open"?: (HelixHeadlessFilterInput["defaultOpen"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
@@ -5056,6 +5557,12 @@ Lit's server shim, `textContent`, `children`, `firstChild` and
 it. An element rendered on a server needs the attribute; one rendered in a
 browser may use either. */
   date?: (HelixHeadlessFormatDate["date"]) | undefined;
+  /** The locale's own pattern for the date: `full`, `long`, `medium`, or
+`short`. Set, it stands in for `weekday`, `day`, `month`, `year` and `era`. */
+  "date-style"?: (HelixHeadlessFormatDate["dateStyle"]) | undefined;
+  /** The locale's own pattern for the date: `full`, `long`, `medium`, or
+`short`. Set, it stands in for `weekday`, `day`, `month`, `year` and `era`. */
+  dateStyle?: (HelixHeadlessFormatDate["dateStyle"]) | undefined;
   /** How the day of the month is written, where a date is shown. */
   day?: (HelixHeadlessFormatDate["day"]) | undefined;
   /** Shows how long ago the timestamp was, in a compact form such as "3h", in
@@ -5065,8 +5572,22 @@ Reflected, because it is the one property that decides which of two readings
 this is and a stylesheet has a reason to know: a compact reading is a fixed
 few characters and a date is not. */
   elapsed?: (HelixHeadlessFormatDate["elapsed"]) | undefined;
+  /** How the era is written, such as AD, where a date is shown. */
+  era?: (HelixHeadlessFormatDate["era"]) | undefined;
   /** How the hour is written, where a time of day is shown. */
   hour?: (HelixHeadlessFormatDate["hour"]) | undefined;
+  /** The clock a time of day is written on: `h12` or `h11` for twelve hours,
+`h23` or `h24` for twenty-four.
+
+Absent is the locale's own, which is right unless your product shows every
+reader the same clock whatever their language. */
+  "hour-cycle"?: (HelixHeadlessFormatDate["hourCycle"]) | undefined;
+  /** The clock a time of day is written on: `h12` or `h11` for twelve hours,
+`h23` or `h24` for twenty-four.
+
+Absent is the locale's own, which is right unless your product shows every
+reader the same clock whatever their language. */
+  hourCycle?: (HelixHeadlessFormatDate["hourCycle"]) | undefined;
   /** The locale to format the timestamp in.
 
 Empty is the runtime's own. */
@@ -5075,8 +5596,26 @@ Empty is the runtime's own. */
   minute?: (HelixHeadlessFormatDate["minute"]) | undefined;
   /** How the month is written, where a date is shown. */
   month?: (HelixHeadlessFormatDate["month"]) | undefined;
+  /** Whether a `relative` reading may use a word for a number: `auto` says
+"yesterday" and "now", and `always` says "1 day ago" and "in 0 seconds". */
+  numeric?: (HelixHeadlessFormatDate["numeric"]) | undefined;
+  /** Shows how long ago the timestamp was, or how long until it, in words, in
+place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
+`narrow` ("3h ago").
+
+The reading refreshes as it goes stale, as `elapsed` does, and the whole
+date is its title. `elapsed` wins where both are set. */
+  relative?: (HelixHeadlessFormatDate["relative"]) | undefined;
   /** How the second is written, where a time of day is shown. */
   second?: (HelixHeadlessFormatDate["second"]) | undefined;
+  /** The locale's own pattern for the time of day: `full`, `long`, `medium`, or
+`short`. Set, it stands in for `hour`, `minute`, `second` and
+`time-zone-name`. */
+  "time-style"?: (HelixHeadlessFormatDate["timeStyle"]) | undefined;
+  /** The locale's own pattern for the time of day: `full`, `long`, `medium`, or
+`short`. Set, it stands in for `hour`, `minute`, `second` and
+`time-zone-name`. */
+  timeStyle?: (HelixHeadlessFormatDate["timeStyle"]) | undefined;
   /** The time zone to read the timestamp in.
 
 Empty is the runtime's own. */
@@ -5584,6 +6123,22 @@ Lives here rather than only on `IconButton` so the two share one render.
 An icon-only button without it is a control a screen reader announces as
 "button" and nothing else. */
   label?: (HelixHeadlessIconButton["label"]) | undefined;
+  /** Whether the action the button started is still running.
+
+A pending button keeps focus and stays in the tab order, and refuses every
+press: a click, Enter and Space, and Enter in a field of its form. The
+click does not reach your listeners. The inner control carries
+`aria-busy` and `aria-disabled`, and when the button becomes pending while
+it has focus, a reader hears `pending-label`. The styled button draws a
+turning ring over its words.
+
+`disabled` takes the button out of reach. Use `pending` for the wait after
+a press, so focus stays where the reader left it. */
+  pending?: (HelixHeadlessIconButton["pending"]) | undefined;
+  /** What a reader hears when the button becomes pending while it has focus. */
+  "pending-label"?: (HelixHeadlessIconButton["pendingLabel"]) | undefined;
+  /** What a reader hears when the button becomes pending while it has focus. */
+  pendingLabel?: (HelixHeadlessIconButton["pendingLabel"]) | undefined;
   /** What activating the button does to its form. */
   type?: (HelixHeadlessIconButton["type"]) | undefined;
   /** The value this button submits under its own `name`, as a native submit
@@ -5706,8 +6261,12 @@ disagreeing with its own name for every reader who meant the left. */
 so it is what markup can carry, and resolving one means an index of the
 whole set that no bundler can shake: 15 kB for a consumer who renders one
 mark. An attribute is the only thing an HTML author can write, and that is
-worth the index; a consumer who would rather not pay it hands over the
-value instead. */
+worth the index; a consumer who would rather not pay it imports the
+element from `icon/root` and registers the glyphs it names, or hands over
+the value instead.
+
+A name written `prefix:name` asks the library registered under that
+prefix. */
   name?: (HelixHeadlessIcon["name"]) | undefined;
   /** The icon to draw, as an object you import.
 
@@ -5725,8 +6284,10 @@ for. Set both and this wins, the value being the more specific statement. */
 };
 
 export type HelixHeadlessIconVueEvents = {
-  /** `name` matches no icon in the set, so nothing is drawn. */
+  /** `name` matches no registered icon and no library answers it, so nothing is drawn. */
   error: HelixHeadlessIconElementEvent;
+  /** A glyph a library gave later for `name` is drawn. */
+  load: HelixHeadlessIconElementEvent;
 };
 
 /** `HelixHeadlessImage` component event */
@@ -5780,6 +6341,18 @@ ninety-nine pictures. */
 picture worth putting in a component is usually below the fold and the one
 that is not is the exception worth writing down. */
   loading?: (HelixHeadlessImage["loading"]) | undefined;
+  /** How long, in milliseconds, the placeholder waits before it shows.
+
+Absent or `0` shows it at once. A picture that arrives inside
+the wait never shows a placeholder at all, so a cached or fast image does
+not flash one. Radix's `delayMs` on its avatar fallback is the same idea. */
+  "placeholder-delay"?: (HelixHeadlessImage["placeholderDelay"] | `${number}`) | undefined;
+  /** How long, in milliseconds, the placeholder waits before it shows.
+
+Absent or `0` shows it at once. A picture that arrives inside
+the wait never shows a placeholder at all, so a cached or fast image does
+not flash one. Radix's `delayMs` on its avatar fallback is the same idea. */
+  placeholderDelay?: (HelixHeadlessImage["placeholderDelay"]) | undefined;
   /** How much of the referring URL to send with the request. */
   referrerpolicy?: (HelixHeadlessImage["referrerPolicy"]) | undefined;
   /** How much of the referring URL to send with the request. */
@@ -6028,6 +6601,8 @@ export type HelixHeadlessInputVueEvents = {
   change: HelixHeadlessInputElementEvent;
   /** The text is about to change. Cancelable: cancel it to keep the current text. */
   "helix-before-change": HelixHeadlessInputHelixBeforeChangeElementEvent;
+  /** Fired after the clear button has emptied the field, after `input` and `change`. */
+  "helix-clear": HelixHeadlessInputElementEvent;
   /** Fired as the value changes. */
   input: HelixHeadlessInputElementEvent;
 };
@@ -6042,6 +6617,13 @@ export type HelixHeadlessKbdHelixShortcutElementEvent =
   HelixHeadlessKbdElementEvent<HelixShortcutEvent>;
 
 export type HelixHeadlessKbdVueProps = {
+  /** The id of the control the shortcut works, which is given the chord as its
+`aria-keyshortcuts`.
+
+Names an element in the same tree, the way `Tooltip.for` does. Separate
+from `within`, which says where the key listens: a key can describe a
+shortcut the page binds itself. */
+  for?: (HelixHeadlessKbd["for"]) | undefined;
   /** The key or chord to show, such as `mod+k`, `?`, or `/`.
 
 `mod` is the platform's own command modifier, which is the reason to write
@@ -6070,6 +6652,15 @@ export type HelixHeadlessKbdVueEvents = {
   "helix-shortcut": HelixHeadlessKbdHelixShortcutElementEvent;
 };
 
+/** `HelixHeadlessLegend` component event */
+export type HelixHeadlessLegendElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessLegend,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixHeadlessLegendHelixBeforeChangeElementEvent =
+  HelixHeadlessLegendElementEvent<HelixBeforeChangeEvent>;
+
 export type HelixHeadlessLegendVueProps = {
   /** How the entries are read from the table: `series`, `categories`, or
 `measures`.
@@ -6098,14 +6689,40 @@ shadow root reads a table in that root rather than one in the document.
 **In React this arrives as a property and not as an attribute**, the way
 `Tooltip.for` does, so it does not reflect and nothing styles on it. */
   for?: (HelixHeadlessLegend["for"]) | undefined;
+  /** The series hidden on the table, by name, separated by commas: what
+`toggles` hides and shows.
+
+Set it to start with series hidden. Every chart reading the same table
+draws without them. Commas only, because a column's heading may hold a
+space. For a ring the names are the rows. */
+  "hidden-series"?: (HelixHeadlessLegend["hiddenSeries"]) | undefined;
+  /** The series hidden on the table, by name, separated by commas: what
+`toggles` hides and shows.
+
+Set it to start with series hidden. Every chart reading the same table
+draws without them. Commas only, because a column's heading may hold a
+space. For a ring the names are the rows. */
+  hiddenSeries?: (HelixHeadlessLegend["hiddenSeries"]) | undefined;
   /** The name of the list, which a screen reader announces before its entries.
 
 Absent names the list after the table's caption, so a page with several
 charts has a legend list for each that says which chart it keys. */
   label?: (HelixHeadlessLegend["label"]) | undefined;
+  /** Makes each entry a button that hides or shows its series in every chart
+reading the same table.
+
+Absent, the legend only displays, which is what it did before this
+existed. Reflected, because the styled tier draws a button differently
+from a plain entry. */
+  toggles?: (HelixHeadlessLegend["toggles"]) | undefined;
 };
 
-export type HelixHeadlessLegendVueEvents = {};
+export type HelixHeadlessLegendVueEvents = {
+  /** Fired once a toggle has hidden or shown a series. */
+  change: HelixHeadlessLegendElementEvent;
+  /** Fired before a toggle hides or shows a series, with the `hidden-series` it would leave. Cancelable. */
+  "helix-before-change": HelixHeadlessLegendHelixBeforeChangeElementEvent;
+};
 
 export type HelixHeadlessLightboxItemVueProps = {
   /** Whether this item is the one shown.
@@ -6143,6 +6760,19 @@ export type HelixHeadlessLightboxToggleElementEvent =
   HelixHeadlessLightboxElementEvent<ToggleEvent>;
 
 export type HelixHeadlessLightboxVueProps = {
+  /** Draws the viewer's own previous, next and close controls over the picture.
+
+Off by default, for a viewer whose chrome you compose in the `header` and
+`footer` slots. The controls hide with the rest of the chrome while the
+reader is idle, and the previous and next ones say they are unavailable at
+either end of a set that does not `loop`. */
+  controls?: (HelixHeadlessLightbox["controls"]) | undefined;
+  /** The close control's accessible name. Translate it with the rest of your
+interface. */
+  "dismiss-label"?: (HelixHeadlessLightbox["dismissLabel"]) | undefined;
+  /** The close control's accessible name. Translate it with the rest of your
+interface. */
+  dismissLabel?: (HelixHeadlessLightbox["dismissLabel"]) | undefined;
   /** How long the user can be idle before the header and footer hide, in
 milliseconds.
 
@@ -6161,6 +6791,28 @@ keep the chrome up is the consumer's to decide with this. */
   label?: (HelixHeadlessLightbox["label"]) | undefined;
   /** Whether moving past the last item returns to the first. */
   loop?: (HelixHeadlessLightbox["loop"]) | undefined;
+  /** The next control's accessible name. */
+  "next-label"?: (HelixHeadlessLightbox["nextLabel"]) | undefined;
+  /** The next control's accessible name. */
+  nextLabel?: (HelixHeadlessLightbox["nextLabel"]) | undefined;
+  /** The previous control's accessible name. */
+  "previous-label"?: (HelixHeadlessLightbox["previousLabel"]) | undefined;
+  /** The previous control's accessible name. */
+  previousLabel?: (HelixHeadlessLightbox["previousLabel"]) | undefined;
+  /** The name of an item with no `label` of its own, with `{index}` and
+`{count}` filled in. */
+  "slide-label"?: (HelixHeadlessLightbox["slideLabel"]) | undefined;
+  /** The name of an item with no `label` of its own, with `{index}` and
+`{count}` filled in. */
+  slideLabel?: (HelixHeadlessLightbox["slideLabel"]) | undefined;
+  /** The word screen readers announce in place of an item's role, set as
+`aria-roledescription`. Translate it with the rest of your text, or empty
+it to leave the role as `group`. */
+  "slide-role-label"?: (HelixHeadlessLightbox["slideRoleLabel"]) | undefined;
+  /** The word screen readers announce in place of an item's role, set as
+`aria-roledescription`. Translate it with the rest of your text, or empty
+it to leave the role as `group`. */
+  slideRoleLabel?: (HelixHeadlessLightbox["slideRoleLabel"]) | undefined;
   /** The status text that says which item is shown, with `{index}`, `{count}`
 and the item's `{label}` filled in.
 
@@ -6456,6 +7108,22 @@ filtering already does: `filter`, the empty state and the keyboard are all
 this component's. A select, a combobox and a command palette drawing their
 own search boxes would be three copies of one field. */
   filterable?: (HelixHeadlessListbox["filterable"]) | undefined;
+  /** How long typing in the filter field rests before the list is filtered, in
+milliseconds. `0` filters on every keystroke.
+
+For a list filtered on a server, where `helix-filter` starts a request: a
+reader typing a word sends one request for the word, not one for each
+letter. Enter and the arrow keys filter at once on what is typed, so they
+act on the list the reader expects. */
+  "filter-delay"?: (HelixHeadlessListbox["filterDelay"] | `${number}`) | undefined;
+  /** How long typing in the filter field rests before the list is filtered, in
+milliseconds. `0` filters on every keystroke.
+
+For a list filtered on a server, where `helix-filter` starts a request: a
+reader typing a word sends one request for the word, not one for each
+letter. Enter and the arrow keys filter at once on what is typed, so they
+act on the list the reader expects. */
+  filterDelay?: (HelixHeadlessListbox["filterDelay"]) | undefined;
   /** Placeholder text for the filter field. */
   "filter-label"?: (HelixHeadlessListbox["filterLabel"]) | undefined;
   /** Placeholder text for the filter field. */
@@ -6469,6 +7137,26 @@ a reader can move through the options before closing the panel on one. */
   manual?: (HelixHeadlessListbox["manual"]) | undefined;
   /** Whether more than one option can be chosen. */
   multiple?: (HelixHeadlessListbox["multiple"]) | undefined;
+  /** What a screen reader hears when a filter leaves one option. `{count}` is
+the count. */
+  "result-label"?: (HelixHeadlessListbox["resultLabel"]) | undefined;
+  /** What a screen reader hears when a filter leaves one option. `{count}` is
+the count. */
+  resultLabel?: (HelixHeadlessListbox["resultLabel"]) | undefined;
+  /** What a screen reader hears when a filter leaves any other number of
+options. `{count}` is the count.
+
+**Two sentences, chosen by `Intl.PluralRules`**, which is Data Table's
+pair: a language with more forms than two picks the one for its `one` and
+writes the rest here. */
+  "results-label"?: (HelixHeadlessListbox["resultsLabel"]) | undefined;
+  /** What a screen reader hears when a filter leaves any other number of
+options. `{count}` is the count.
+
+**Two sentences, chosen by `Intl.PluralRules`**, which is Data Table's
+pair: a language with more forms than two picks the one for its `one` and
+writes the rest here. */
+  resultsLabel?: (HelixHeadlessListbox["resultsLabel"]) | undefined;
   /** Whether the rows are still loading.
 
 Reflected, because a stylesheet needs it: the rows that are already there
@@ -6571,6 +7259,18 @@ export type HelixHeadlessListboxVueEvents = {
 };
 
 export type HelixHeadlessLoaderVueProps = {
+  /** How long the loader waits before it shows, in milliseconds, so work that
+finishes quickly never flashes one.
+
+Absent shows it at once. Hidden in the served markup too, so a page that
+loads quickly never draws it. */
+  delay?: (HelixHeadlessLoader["delay"]) | undefined;
+  /** The id of the region being loaded, which is marked `aria-busy` while the
+loader is on the page.
+
+Names an element in the same tree. In React it arrives as a property, the
+way `Tooltip.for` does. */
+  for?: (HelixHeadlessLoader["for"]) | undefined;
   /** The loader's name, announced by screen readers while the work is in
 progress. */
   label?: (HelixHeadlessLoader["label"]) | undefined;
@@ -7643,7 +8343,10 @@ no reader. */
 
 Absent leaves the range unbanded. */
   high?: (HelixHeadlessMeter["high"]) | undefined;
-  /** Accessible name for the reading. */
+  /** Accessible name for the reading.
+
+A visible label in the `label` slot names it instead, with the words it
+shows, so the name and the label cannot disagree. */
   label?: (HelixHeadlessMeter["label"]) | undefined;
   /** The locale the percentage is written in, such as `fr` for `72 %`.
 
@@ -7889,6 +8592,12 @@ export type HelixHeadlessNotificationsVueProps = {
   "mark-all-label"?: (HelixHeadlessNotifications["markAllLabel"]) | undefined;
   /** Label for the mark-all control. */
   markAllLabel?: (HelixHeadlessNotifications["markAllLabel"]) | undefined;
+  /** How many notifications there are in all, where the feed holds only some of
+them, read as each row's `aria-setsize`. `-1` says the count is unknown.
+
+Unset, the browser counts the rows it can see, which is right for a feed
+that holds everything. */
+  total?: (HelixHeadlessNotifications["total"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
   "empty-text"?: (HelixHeadlessNotifications["emptyText"]) | undefined;
   /** The text shown and announced when there are no rows and none are loading. */
@@ -7949,6 +8658,22 @@ reach the bubble. Absent is the control's own sentence, in English. */
   "decrement-label"?: (HelixHeadlessNumberInput["decrementLabel"]) | undefined;
   /** The name of the step down button, read by screen readers. */
   decrementLabel?: (HelixHeadlessNumberInput["decrementLabel"]) | undefined;
+  /** `Intl.NumberFormat` options the number is shown with while the field is
+not being edited: a currency, a percent, a unit, or a number of decimals.
+Written as JSON in the attribute.
+
+```html
+<helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
+``` */
+  "format-options"?: (HelixHeadlessNumberInput["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options the number is shown with while the field is
+not being edited: a currency, a percent, a unit, or a number of decimals.
+Written as JSON in the attribute.
+
+```html
+<helix-number-input format-options='{"style":"currency","currency":"EUR"}'></helix-number-input>
+``` */
+  formatOptions?: (HelixHeadlessNumberInput["formatOptions"]) | undefined;
   /** The name of the step up button, read by screen readers. */
   "increment-label"?: (HelixHeadlessNumberInput["incrementLabel"]) | undefined;
   /** The name of the step up button, read by screen readers. */
@@ -8000,6 +8725,12 @@ filled in. */
   readonly?: (HelixHeadlessNumberInput["readOnly"]) | undefined;
   /** Prevents editing. The value is still submitted with the form. */
   readOnly?: (HelixHeadlessNumberInput["readOnly"]) | undefined;
+  /** What the field is described as on iOS and iPadOS, where it carries no
+spinbutton role. See the class description. */
+  "role-description"?: (HelixHeadlessNumberInput["roleDescription"]) | undefined;
+  /** What the field is described as on iOS and iPadOS, where it carries no
+spinbutton role. See the class description. */
+  roleDescription?: (HelixHeadlessNumberInput["roleDescription"]) | undefined;
   /** Makes the label a grip that changes the value when it is dragged.
 
 The label is what is dragged, so this adds no chrome at all. Still opt-in,
@@ -8032,6 +8763,10 @@ A unit slotted into `end` is drawn beside the number and is not part of
 what the spinbutton announces, so it goes here too. Empty announces the
 number alone. */
   valueText?: (HelixHeadlessNumberInput["valueText"]) | undefined;
+  /** Whether the mouse wheel steps the number while the field has focus, as
+React Aria's NumberField does unless told not to. Off, the wheel scrolls
+the page, which is what a reader passing over a form expects. */
+  wheel?: (HelixHeadlessNumberInput["wheel"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value. */
   "default-value"?: (HelixHeadlessNumberInput["defaultValue"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value. */
@@ -8310,6 +9045,24 @@ string is not a fact a selector needs. */
   description?: (HelixHeadlessOption["description"]) | undefined;
   /** Prevents the option from being chosen. */
   disabled?: (HelixHeadlessOption["disabled"]) | undefined;
+  /** Whether following the link downloads what it names. Only meaningful
+beside an `href`. */
+  download?: (HelixHeadlessOption["download"]) | undefined;
+  /** The URL the option links to. Setting it makes the option a link: choosing
+it, with a press, Enter or a click, follows the link and selects nothing,
+as React Aria's items with `href` do. Command, Control and Shift open it
+where they open a link, in a new tab or a new window.
+
+`helix-select` is said first with the `href` in it, and canceling it keeps
+the browser from following, so a client-side router follows it instead.
+
+**The option stays an option**, and an anchor is never drawn inside it:
+`role="option"` sits on the host, where a listbox's
+`aria-activedescendant` can name it, and an `<a>` inside would be exposed
+as a link within the option and take its name (Menu Item's `href` records
+the measurement). The link is followed through an anchor made for the
+moment, which `followLink` describes. */
+  href?: (HelixHeadlessOption["href"]) | undefined;
   /** A shorter name for this choice, for where the row does not fit.
 
 `<option label>`'s own meaning: the text a chooser shows when it has less
@@ -8321,10 +9074,30 @@ 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 link's `rel`. Set it whenever you set `target="_blank"`. */
+  rel?: (HelixHeadlessOption["rel"]) | undefined;
   /** Whether this choice is currently chosen.
 
 Written by the listbox. */
   selected?: (HelixHeadlessOption["selected"]) | undefined;
+  /** Where the link opens, such as `_blank`, for an option with an `href`. */
+  target?: (HelixHeadlessOption["target"]) | undefined;
+  /** The words a reader types to reach this choice, where the row's own words
+are not them: typeahead, a filter and a combobox match against it, and a
+select's trigger shows it.
+
+For a row whose content is a picture, an avatar beside a name and a role,
+or a name written in another script, as React Aria's `textValue`. Empty
+reads the row's words, then `label`. */
+  "text-value"?: (HelixHeadlessOption["textValue"]) | undefined;
+  /** The words a reader types to reach this choice, where the row's own words
+are not them: typeahead, a filter and a combobox match against it, and a
+select's trigger shows it.
+
+For a row whose content is a picture, an avatar beside a name and a role,
+or a name written in another script, as React Aria's `textValue`. Empty
+reads the row's words, then `label`. */
+  textValue?: (HelixHeadlessOption["textValue"]) | undefined;
   /** The value that identifies the option, and that a form submits. */
   value?: (HelixHeadlessOption["value"]) | undefined;
   /** Whether the markup declares this option selected. A form reset returns to it.
@@ -8356,7 +9129,7 @@ change of its own rather than a property being added. */
 };
 
 export type HelixHeadlessOptionVueEvents = {
-  /** The option was chosen. Cancelable: canceling it leaves the selection as it was. */
+  /** The option was chosen. Cancelable: canceling it leaves the selection as it was, and keeps the browser from following an option's `href`. */
   "helix-select": HelixHeadlessOptionHelixSelectElementEvent;
 };
 
@@ -8663,10 +9436,18 @@ that lets a phone offer the code out of a message. Later cells stay `off`
 for the reason in the class comment above, that six cells each offering
 the same code is one offer made six times. */
   autocomplete?: (HelixHeadlessPinInput["autocomplete"]) | undefined;
+  /** Whether the form is submitted once the last box is filled, as Web
+Awesome's `autosubmit` and Radix's `autoSubmit`. Only for a code the field
+took: a refused last character submits nothing. */
+  autosubmit?: (HelixHeadlessPinInput["autosubmit"]) | undefined;
   /** Accessible name for one box, with `{index}` and `{length}` filled in. */
   "cell-label"?: (HelixHeadlessPinInput["cellLabel"]) | undefined;
   /** Accessible name for one box, with `{index}` and `{length}` filled in. */
   cellLabel?: (HelixHeadlessPinInput["cellLabel"]) | undefined;
+  /** Separators drawn between the boxes: `#` or `*` for a box and anything
+else as it is written, so `###-###` draws a dash after the third. The
+separators are hidden from screen readers and are not part of the value. */
+  format?: (HelixHeadlessPinInput["format"]) | undefined;
   /** How many characters the code has. */
   length?: (HelixHeadlessPinInput["length"]) | undefined;
   /** Whether the characters are hidden, the way a password is. */
@@ -8808,8 +9589,17 @@ export type HelixHeadlessPopoverToggleElementEvent =
   HelixHeadlessPopoverElementEvent<ToggleEvent>;
 
 export type HelixHeadlessPopoverVueProps = {
-  /** The panel's name, read by screen readers. */
+  /** Draws a point on the panel's edge facing the trigger.
+
+Off by default, which is the house style: a panel that opens from its
+trigger already reads as belonging to it. */
+  arrow?: (HelixHeadlessPopover["arrow"]) | undefined;
+  /** The panel's name, read by screen readers. Left at `Popover`, the first
+heading in the panel names it instead. */
   label?: (HelixHeadlessPopover["label"]) | undefined;
+  /** Keeps `Tab` inside the panel while it is open, and marks the panel
+`aria-modal`. A press outside and Escape still close it. */
+  modal?: (HelixHeadlessPopover["modal"]) | undefined;
   /** Space between the trigger and the panel, in pixels. */
   offset?: (HelixHeadlessPopover["offset"]) | undefined;
   /** Preferred side.
@@ -8858,7 +9648,10 @@ Not `Loader`, which is the other thing this could be. A loader says the
 page is busy; a bar says a named piece of work is running, and keeps its
 place in the layout when the answer arrives and it becomes determinate. */
   indeterminate?: (HelixHeadlessProgress["indeterminate"]) | undefined;
-  /** Accessible name for what is in progress. */
+  /** Accessible name for what is in progress.
+
+A visible label in the `label` slot names it instead, with the words it
+shows, so the name and the label cannot disagree. */
   label?: (HelixHeadlessProgress["label"]) | undefined;
   /** The locale the percentage is written in, such as `fr` for `72 %`.
 
@@ -9003,6 +9796,22 @@ not touch, and React reads that as a hydration mismatch. The absent
 attribute *is* the column, which the stylesheet reads as the base rule, so
 only `horizontal` has to be named. */
   orientation?: (HelixHeadlessRadioGroup["orientation"]) | undefined;
+  /** Whether a reader can see and focus the answer and cannot change it. A
+read-only group still submits its value.
+
+React Aria's `isReadOnly`. A press on a radio is refused, and the arrow
+keys, Home and End leave focus on the answer, so Tab still reaches it and
+a reader hears it with the group's name. The group says `aria-readonly`.
+A script can still set `value`. */
+  readonly?: (HelixHeadlessRadioGroup["readOnly"]) | undefined;
+  /** Whether a reader can see and focus the answer and cannot change it. A
+read-only group still submits its value.
+
+React Aria's `isReadOnly`. A press on a radio is refused, and the arrow
+keys, Home and End leave focus on the answer, so Tab still reaches it and
+a reader hears it with the group's name. The group says `aria-readonly`.
+A script can still set `value`. */
+  readOnly?: (HelixHeadlessRadioGroup["readOnly"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value. */
   "default-value"?: (HelixHeadlessRadioGroup["defaultValue"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value. */
@@ -9175,6 +9984,10 @@ export type HelixHeadlessRatingHelixBeforeChangeElementEvent =
   HelixHeadlessRatingElementEvent<HelixBeforeChangeEvent>;
 
 export type HelixHeadlessRatingVueProps = {
+  /** Whether a reader can take the rating back to unrated: by pressing the
+chosen score again, or with Backspace or Delete. Zag's rating group
+clears the same way. */
+  clearable?: (HelixHeadlessRating["clearable"]) | undefined;
   /** How many marks there are. */
   max?: (HelixHeadlessRating["max"]) | undefined;
   /** The lowest score that can be given. A cleared rating shows this score.
@@ -9361,6 +10174,8 @@ export type HelixHeadlessRatingVueEvents = {
   change: HelixHeadlessRatingElementEvent;
   /** The score is about to change. Cancelable: cancel it to keep the current score. */
   "helix-before-change": HelixHeadlessRatingHelixBeforeChangeElementEvent;
+  /** The rating went back to unrated, under `clearable`. Sent after `input` and `change`. */
+  "helix-clear": HelixHeadlessRatingElementEvent;
   /** The score changed. */
   input: HelixHeadlessRatingElementEvent;
 };
@@ -9543,6 +10358,15 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessSelect["name"]) | 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.
+
+For a trigger that shows more than the words, an avatar beside a name or a
+count of a long set, as React Aria's `SelectValue` takes children. The
+trigger is named by what this draws, so keep the words in it. Nothing
+chosen still shows `placeholder`. A property only, there being no way to
+write a function in markup. */
+  valueContent?: (HelixHeadlessSelect["valueContent"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
 
 Read off the listbox this renders, which owns the options and is where the
@@ -9575,6 +10399,12 @@ profile".
 
 Absent hides the placeholder from screen readers. */
   label?: (HelixHeadlessSkeleton["label"]) | undefined;
+  /** Whether the content inside is still loading, which keeps it inert and
+draws the placeholder over it.
+
+Absent shows the content. An empty skeleton is a placeholder whatever
+this says. Reflected, because the styled tier hides the content on it. */
+  loading?: (HelixHeadlessSkeleton["loading"]) | undefined;
 };
 
 export type HelixHeadlessSkeletonVueEvents = {};
@@ -9606,6 +10436,25 @@ export type HelixHeadlessSliderHelixBeforeChangeElementEvent =
   HelixHeadlessSliderElementEvent<HelixBeforeChangeEvent>;
 
 export type HelixHeadlessSliderVueProps = {
+  /** `Intl.NumberFormat` options the value is written with: a currency, a
+percent, a unit, or a number of decimals. Written as JSON in the
+attribute.
+
+```html
+<helix-slider format-options='{"style":"currency","currency":"USD"}'></helix-slider>
+``` */
+  "format-options"?: (HelixHeadlessSlider["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options the value is written with: a currency, a
+percent, a unit, or a number of decimals. Written as JSON in the
+attribute.
+
+```html
+<helix-slider format-options='{"style":"currency","currency":"USD"}'></helix-slider>
+``` */
+  formatOptions?: (HelixHeadlessSlider["formatOptions"]) | undefined;
+  /** The locale `format-options` writes the value in, such as `de-DE`. Empty is
+the reader's own. */
+  locale?: (HelixHeadlessSlider["locale"]) | undefined;
   /** Shows the value at each mark. */
   "marker-labels"?: (HelixHeadlessSlider["markerLabels"]) | undefined;
   /** Shows the value at each mark. */
@@ -9648,6 +10497,12 @@ property, like every other word a control speaks. */
   "minimum-label"?: (HelixHeadlessSlider["minimumLabel"]) | undefined;
   /** The name of a range's lower thumb, read after the slider's label. */
   minimumLabel?: (HelixHeadlessSlider["minimumLabel"]) | undefined;
+  /** How many steps a range's two thumbs stay apart, as Zag's
+`minStepsBetweenThumbs`. A thumb pushed closer stops there. */
+  "min-steps-between-thumbs"?: (HelixHeadlessSlider["minStepsBetweenThumbs"] | `${number}`) | undefined;
+  /** How many steps a range's two thumbs stay apart, as Zag's
+`minStepsBetweenThumbs`. A thumb pushed closer stops there. */
+  minStepsBetweenThumbs?: (HelixHeadlessSlider["minStepsBetweenThumbs"]) | undefined;
   /** The direction the track runs. `vertical` stands it on end.
 
 For a level rather than a quantity: a fader, a channel, anything a reader
@@ -9744,6 +10599,10 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessSlider["name"]) | undefined;
+  /** Writes a value as text, in place of `format-options`: words for a scale,
+or anything `Intl.NumberFormat` cannot say. A property, since a function
+cannot be written in an attribute. */
+  formatter?: (HelixHeadlessSlider["formatter"]) | undefined;
 };
 
 export type HelixHeadlessSliderVueEvents = {
@@ -10221,6 +11080,28 @@ stylesheets. */
   "default-checked"?: (HelixHeadlessSwitch["defaultChecked"]) | undefined;
   /** Whether the control starts checked. A form reset returns it to this state. */
   defaultChecked?: (HelixHeadlessSwitch["defaultChecked"]) | undefined;
+  /** Whether a reader can see and focus the control and cannot change it. A
+read-only control still submits its value.
+
+React Aria's `isReadOnly`. A native checkbox has no read-only state, so
+the press is refused at the inner control, which keeps its box as it
+was, and the control says `aria-readonly`. A script can still set
+`checked`, as it can set the value of a read-only text field.
+
+The attribute is `readonly`, which is the platform's spelling for the
+text fields. */
+  readonly?: (HelixHeadlessSwitch["readOnly"]) | undefined;
+  /** Whether a reader can see and focus the control and cannot change it. A
+read-only control still submits its value.
+
+React Aria's `isReadOnly`. A native checkbox has no read-only state, so
+the press is refused at the inner control, which keeps its box as it
+was, and the control says `aria-readonly`. A script can still set
+`checked`, as it can set the value of a read-only text field.
+
+The attribute is `readonly`, which is the platform's spelling for the
+text fields. */
+  readOnly?: (HelixHeadlessSwitch["readOnly"]) | undefined;
   /**  */
   "aria-label"?: unknown;
   /** The validation message shown under the control. It replaces the
@@ -10701,6 +11582,47 @@ export type HelixHeadlessTabVueEvents = {
   "helix-select": HelixHeadlessTabHelixSelectElementEvent;
 };
 
+/** `HelixHeadlessTagGroup` component event */
+export type HelixHeadlessTagGroupElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessTagGroup,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixHeadlessTagGroupHelixBeforeChangeElementEvent =
+  HelixHeadlessTagGroupElementEvent<HelixBeforeChangeEvent>;
+/** `helix-dismiss` event type */
+export type HelixHeadlessTagGroupHelixDismissElementEvent =
+  HelixHeadlessTagGroupElementEvent<HelixDismissEvent>;
+
+export type HelixHeadlessTagGroupVueProps = {
+  /** The name of the set, such as "Filters", which a screen reader announces
+before its tags. */
+  label?: (HelixHeadlessTagGroup["label"]) | undefined;
+  /** How many tags a reader can select: `single`, `multiple`, or none.
+
+Absent selects nothing, and the tags carry no selected state at all. */
+  "selection-mode"?: (HelixHeadlessTagGroup["selectionMode"]) | undefined;
+  /** How many tags a reader can select: `single`, `multiple`, or none.
+
+Absent selects nothing, and the tags carry no selected state at all. */
+  selectionMode?: (HelixHeadlessTagGroup["selectionMode"]) | undefined;
+  /** The selected tags' values, separated by commas, since a value may hold a
+space.
+
+Set it to start with tags selected. A tag's value is its `value`, or its
+words where it has none. */
+  value?: (HelixHeadlessTagGroup["value"]) | undefined;
+};
+
+export type HelixHeadlessTagGroupVueEvents = {
+  /** Fired once a press has changed which tags are selected. */
+  change: HelixHeadlessTagGroupElementEvent;
+  /** Fired before a press changes which tags are selected, with the `value` it would leave. Cancelable. */
+  "helix-before-change": HelixHeadlessTagGroupHelixBeforeChangeElementEvent;
+  /** A tag's remove button was pressed, or Delete or Backspace on the focused tag. Bubbles from that tag, which is its `target`; remove the tag in response. Cancelable. */
+  "helix-dismiss": HelixHeadlessTagGroupHelixDismissElementEvent;
+};
+
 /** `HelixHeadlessTag` component event */
 export type HelixHeadlessTagElementEvent<E = Event> = TypedEvent<
   HelixHeadlessTag,
@@ -10711,6 +11633,16 @@ export type HelixHeadlessTagHelixDismissElementEvent =
   HelixHeadlessTagElementEvent<HelixDismissEvent>;
 
 export type HelixHeadlessTagVueProps = {
+  /** Takes the tag out of reach: its link and its remove button stop
+answering, and in a `Tag.Group` the arrow keys pass over it and it cannot
+be selected or removed. */
+  disabled?: (HelixHeadlessTag["disabled"]) | undefined;
+  /** Makes the label a link to this address. */
+  href?: (HelixHeadlessTag["href"]) | undefined;
+  /** What the tag stands for in its group's `value`.
+
+Absent is the tag's own words, its category first. */
+  value?: (HelixHeadlessTag["value"]) | undefined;
   /** Whether the element shows a control that dismisses it. */
   dismissible?: (HelixHeadlessTag["dismissible"]) | undefined;
   /** The dismiss control's label, read by screen readers.
@@ -10727,6 +11659,18 @@ derive one rather than dash-casing it, so this would otherwise be
 reachable only as `dismisslabel`, which nobody would guess and no linter
 would catch. */
   dismissLabel?: (HelixHeadlessTag["dismissLabel"]) | undefined;
+  /** Whether the tag holds its group's tab stop.
+
+Written by `Tag.Group` on every tag it holds, and unset outside one, which
+is how a tag knows it is a row. No attribute: it is coordination between
+elements, the same shape `Toggle.focusable` has. */
+  focusable?: (HelixHeadlessTag["focusable"]) | undefined;
+  /** Whether the tag is selected, in a `Tag.Group` that selects.
+
+Written by the group from its own `value`, and unset where nothing can be
+selected, which is what keeps `aria-selected` off a set that does not
+select. */
+  selected?: (HelixHeadlessTag["selected"]) | undefined;
 };
 
 export type HelixHeadlessTagVueEvents = {
@@ -10785,6 +11729,12 @@ element sends two entries, and that is what this does. */
   maxlength?: (HelixHeadlessTextarea["maxLength"] | `${number}`) | undefined;
   /** The most characters the value can have. */
   maxLength?: (HelixHeadlessTextarea["maxLength"]) | undefined;
+  /** How many lines an `auto-grow` field grows to before it scrolls. Absent,
+it grows with all of its text. */
+  "max-rows"?: (HelixHeadlessTextarea["maxRows"] | `${number}`) | undefined;
+  /** How many lines an `auto-grow` field grows to before it scrolls. Absent,
+it grows with all of its text. */
+  maxRows?: (HelixHeadlessTextarea["maxRows"]) | undefined;
   /** The fewest characters the value can have.
 
 Forwarded to the real `<textarea>` rather than checked here, which is what
@@ -10940,6 +11890,16 @@ a typed time, which is then invalid. */
 Handed to the list, which offers them as unavailable, and checked against
 a typed time, which is then invalid. */
   disableTimes?: (HelixHeadlessTimeInput["disableTimes"]) | undefined;
+  /** The clock the times are written on: `h12` for twelve hours with a
+meridiem, `h23` for twenty-four. Absent is the locale's own.
+
+Handed to the list. The value is `HH:mm` on twenty-four hours either way. */
+  "hour-cycle"?: (HelixHeadlessTimeInput["hourCycle"]) | undefined;
+  /** The clock the times are written on: `h12` for twelve hours with a
+meridiem, `h23` for twenty-four. Absent is the locale's own.
+
+Handed to the list. The value is `HH:mm` on twenty-four hours either way. */
+  hourCycle?: (HelixHeadlessTimeInput["hourCycle"]) | undefined;
   /** Language tag the times are written in.
 
 Absent uses the runtime's own. */
@@ -10991,7 +11951,12 @@ removes rather than as "Remove" said once per time. */
 **The name goes in**, so a row of them is heard as which one each
 removes rather than as "Remove" said once per time. */
   removeLabel?: (HelixHeadlessTimeInput["removeLabel"]) | undefined;
-  /** How far apart the offered times are, in minutes. */
+  /** Whether times carry their seconds: the value is `HH:mm:ss`, a typed time
+may give them, the field writes them, and the list's `step` counts seconds.
+See Time Picker's `seconds`. */
+  seconds?: (HelixHeadlessTimeInput["seconds"]) | undefined;
+  /** How far apart the offered times are, in minutes, or in seconds with
+`seconds`. */
   step?: (HelixHeadlessTimeInput["step"]) | undefined;
   /** Whether the field shows the time in the local style or as the value
 itself.
@@ -11032,6 +11997,20 @@ not touch, and React reads that as a hydration mismatch. The absent
 attribute *is* the list, which the stylesheet reads as the base rule, so
 only the departure has to be named. */
   variant?: (HelixHeadlessTimeInput["variant"]) | undefined;
+  /** What a screen reader hears for a segment with nothing in it, which a
+sighted reader sees as dashes. */
+  "empty-segment-label"?: (HelixHeadlessTimeInput["emptySegmentLabel"]) | undefined;
+  /** What a screen reader hears for a segment with nothing in it, which a
+sighted reader sees as dashes. */
+  emptySegmentLabel?: (HelixHeadlessTimeInput["emptySegmentLabel"]) | undefined;
+  /** Whether the field is a row of segments, one for each part of the date or
+time, in place of a line of text.
+
+Each segment is set with digits or the arrow keys, in the order the
+locale writes them, so a reader types a date the way they write one and
+no format has to be read back. The picker still opens from the trigger
+and with Alt+Down. */
+  segmented?: (HelixHeadlessTimeInput["segmented"]) | undefined;
   /** Whether the value is locked. A read-only control still submits its value.
 
 **Enforced by refusing every request in one place**, which is the seam this
@@ -11244,6 +12223,20 @@ 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;
+  /** The clock the times are written on: `h12` for twelve hours with a
+meridiem, `h23` for twenty-four.
+
+Absent is the locale's own, which is right for a reader's own form. Set it
+where every reader must see the same clock whatever their language, as a
+timetable does. The value is `HH:mm` on twenty-four hours either way. */
+  "hour-cycle"?: (HelixHeadlessTimePicker["hourCycle"]) | undefined;
+  /** The clock the times are written on: `h12` for twelve hours with a
+meridiem, `h23` for twenty-four.
+
+Absent is the locale's own, which is right for a reader's own form. Set it
+where every reader must see the same clock whatever their language, as a
+timetable does. The value is `HH:mm` on twenty-four hours either way. */
+  hourCycle?: (HelixHeadlessTimePicker["hourCycle"]) | undefined;
   /** What the wheel of hours is called, read by screen readers. */
   "hour-label"?: (HelixHeadlessTimePicker["hourLabel"]) | undefined;
   /** What the wheel of hours is called, read by screen readers. */
@@ -11340,7 +12333,20 @@ else set needs. */
   readOnly?: (HelixHeadlessTimePicker["readOnly"]) | undefined;
   /** Stops the form from submitting while no time is chosen. */
   required?: (HelixHeadlessTimePicker["required"]) | undefined;
-  /** How far apart the offered times are, in minutes.
+  /** What the wheel of seconds is called, read by screen readers. */
+  "second-label"?: (HelixHeadlessTimePicker["secondLabel"]) | undefined;
+  /** What the wheel of seconds is called, read by screen readers. */
+  secondLabel?: (HelixHeadlessTimePicker["secondLabel"]) | undefined;
+  /** Whether times carry their seconds.
+
+The value becomes `HH:mm:ss`, each time is written with its seconds, the
+wheels take a column of seconds, and `step` counts seconds, the unit
+`<input type="time">` counts in. A list at a step of one second is 86,400
+rows, so give `seconds` a `step` and bounds that keep it a list, or use
+the wheels. */
+  seconds?: (HelixHeadlessTimePicker["seconds"]) | undefined;
+  /** How far apart the offered times are, in minutes, or in seconds with
+`seconds`.
 
 Fifteen, which is four rows an hour and ninety-six in a day: enough that a
 reader scrolls rather than hunts, and few enough that the list is a list.
@@ -11528,7 +12534,11 @@ export type HelixHeadlessToastHelixDismissElementEvent =
   HelixHeadlessToastElementEvent<HelixDismissEvent>;
 
 export type HelixHeadlessToastVueProps = {
-  /** Accessible name for the region, such as "Notifications". */
+  /** The key that takes focus to the stack and back, such as `F8` or `Alt+T`:
+keys joined by `+`, the last one the key. Empty turns it off. */
+  hotkey?: (HelixHeadlessToast["hotkey"]) | undefined;
+  /** Accessible name for the region, with `{hotkey}` filled in. Translate it with
+the rest of your interface. */
   label?: (HelixHeadlessToast["label"]) | undefined;
   /** Which corner or edge the stack sits at.
 
@@ -11605,6 +12615,21 @@ reader while looking correct to everybody else. Worse, setting both draws
 it twice. One property moves the label the consumer already has to give,
 and cannot be used to remove it. */
   labelPlacement?: (HelixHeadlessToggleGroup["labelPlacement"]) | undefined;
+  /** The direction the items run. `vertical` puts them in a column, and the up
+and down arrows move between them.
+
+Optional, so the attribute is absent until a consumer writes it. */
+  orientation?: (HelixHeadlessToggleGroup["orientation"]) | undefined;
+  /** Whether one item is chosen, as a radio group, or several can be pressed,
+as a toolbar of buttons with `aria-pressed`.
+
+Optional, so the attribute is absent until a consumer writes it. */
+  "selection-mode"?: (HelixHeadlessToggleGroup["selectionMode"]) | undefined;
+  /** Whether one item is chosen, as a radio group, or several can be pressed,
+as a toolbar of buttons with `aria-pressed`.
+
+Optional, so the attribute is absent until a consumer writes it. */
+  selectionMode?: (HelixHeadlessToggleGroup["selectionMode"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value. */
   "default-value"?: (HelixHeadlessToggleGroup["defaultValue"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value. */
@@ -11682,6 +12707,10 @@ work as before once focus is in it.
 No attribute: it is coordination between elements, and a consumer has no
 reason to set it. */
   focusable?: (HelixHeadlessToggleGroup["focusable"]) | undefined;
+  /** The pressed values as a list, under `selection-mode="multiple"`, in the
+order the items are written. Written, it presses exactly those items.
+Where one item is chosen, it is that one value, or none. */
+  values?: (HelixHeadlessToggleGroup["values"]) | undefined;
 };
 
 export type HelixHeadlessToggleGroupVueEvents = {
@@ -11752,6 +12781,11 @@ group sits in holds the stop. No attribute: it is coordination between
 elements, and `tabindex` on a host the consumer rendered is the change a
 React consumer's hydration reports and does not patch up. */
   focusable?: (HelixHeadlessToggle["focusable"]) | undefined;
+  /** Whether the item is pressed, in a group where several can be, and
+`undefined` in a group where one is chosen.
+
+Written by the group, like `selected`, so no attribute. */
+  pressed?: (HelixHeadlessToggle["pressed"]) | undefined;
 };
 
 export type HelixHeadlessToggleVueEvents = {
@@ -11854,6 +12888,22 @@ worked. */
 
 It moves if that side does not fit. */
   placement?: (HelixHeadlessTooltip["placement"]) | undefined;
+  /** What shows the bubble. Unset, it is a pointer resting on the trigger and
+keyboard focus. `focus` is keyboard focus alone, for a hint a pointer does
+not need, such as a shortcut a mouse reader has no use for. */
+  "show-on"?: (HelixHeadlessTooltip["showOn"]) | undefined;
+  /** What shows the bubble. Unset, it is a pointer resting on the trigger and
+keyboard focus. `focus` is keyboard focus alone, for a hint a pointer does
+not need, such as a shortcut a mouse reader has no use for. */
+  showOn?: (HelixHeadlessTooltip["showOn"]) | undefined;
+  /** How long after a tooltip hides the next one still shows at once, with no
+`delay`, in milliseconds. The same skip delay Radix uses. Zero makes every
+tooltip wait. */
+  "skip-delay"?: (HelixHeadlessTooltip["skipDelay"] | `${number}`) | undefined;
+  /** How long after a tooltip hides the next one still shows at once, with no
+`delay`, in milliseconds. The same skip delay Radix uses. Zero makes every
+tooltip wait. */
+  skipDelay?: (HelixHeadlessTooltip["skipDelay"]) | undefined;
   /** The id of a box to keep the bubble inside. Defaults to the viewport.
 
 Resolved the way `for` is, so an id in the same tree, which is what lets a
@@ -11951,6 +13001,14 @@ The shape is `Carousel`'s, which is the nearest thing in the library: a
   "next-label"?: (HelixHeadlessTour["nextLabel"]) | undefined;
   /** Label for the control that goes on. */
   nextLabel?: (HelixHeadlessTour["nextLabel"]) | undefined;
+  /** Draws each stop's place in the run in its panel, as well as saying it. */
+  progress?: (HelixHeadlessTour["progress"]) | undefined;
+  /** Each stop's place in the run, with `{index}` and `{count}` filled in.
+Translate it with the rest of your text. */
+  "progress-label"?: (HelixHeadlessTour["progressLabel"]) | undefined;
+  /** Each stop's place in the run, with `{index}` and `{count}` filled in.
+Translate it with the rest of your text. */
+  progressLabel?: (HelixHeadlessTour["progressLabel"]) | undefined;
   /** Label for the control that leaves the tour. */
   "skip-label"?: (HelixHeadlessTour["skipLabel"]) | undefined;
   /** Label for the control that leaves the tour. */
@@ -12025,6 +13083,9 @@ closed tour, a closed tour shows nothing, and nothing can disagree. */
   first?: (HelixHeadlessTourStop["first"]) | undefined;
   /** The id of the element the stop points at. */
   for?: (HelixHeadlessTourStop["for"]) | undefined;
+  /** The panel's name, where neither the `heading` slot nor the content holds a
+heading. */
+  label?: (HelixHeadlessTourStop["label"]) | undefined;
   /** Whether the stop is the last one. Its next control then shows `doneLabel`. */
   last?: (HelixHeadlessTourStop["last"]) | undefined;
   /** Label for the control that goes on. */
@@ -12037,6 +13098,15 @@ closed tour, a closed tour shows nothing, and nothing can disagree. */
   "skip-label"?: (HelixHeadlessTourStop["skipLabel"]) | undefined;
   /** Label for the control that leaves the tour. */
   skipLabel?: (HelixHeadlessTourStop["skipLabel"]) | undefined;
+  /** What kind of stop this is. Unset, it is a bubble pointing at its target.
+
+- `dialog`: a panel in the middle of the window, over a backdrop
+- `floating`: a panel in a corner of the window
+- `wait`: nothing shown, while the tour waits for the target to be on the page
+
+Reflected, because the styled tier places a dialog and a floating panel by
+it, and unset at rest, so no default is written onto the host. */
+  type?: (HelixHeadlessTourStop["type"]) | undefined;
 };
 
 export type HelixHeadlessTourStopVueEvents = {
@@ -12815,6 +13885,10 @@ export type CustomCssProperties = {
   "--date-picker-column-count"?: (string) | undefined;
   /** How thick the ring is drawn, derived from `hole`. */
   "--donut-chart-stroke"?: (string) | undefined;
+  /** How far a swipe, or a snap point, has moved the panel across, in pixels, toward the right. */
+  "--drawer-swipe-x"?: (string) | undefined;
+  /** How far a swipe, or a snap point, has moved the panel down, in pixels. */
+  "--drawer-swipe-y"?: (string) | undefined;
   /** How many rows the strip lays out. The component writes it from the data, and the stylesheet that draws the strip reads it. */
   "--heatmap-rows"?: (string) | undefined;
   /** The tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it. */
@@ -12895,6 +13969,8 @@ export type CustomCssProperties = {
   "--table-template"?: (string) | undefined;
   /** How long this message stays, in milliseconds, for a progress hint. */
   "--toast-duration"?: (string) | undefined;
+  /** How far a swipe has moved the message across, in pixels, toward the right. */
+  "--toast-swipe-x"?: (string) | undefined;
   /** How deep this row sits, counting from one as `aria-level` does, for the indent. */
   "--tree-level"?: (string) | undefined;
   /** The media's own aspect ratio, once it is known. `--video-aspect-ratio` overrides it. */
@@ -12933,7 +14009,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAppHeaderVueProps,
     HelixHeadlessAppHeaderVueEvents
   >;
-  /** Shows how a total is made up. Each numeric column of the table is a part, the parts add up to the total at each reading, and the top edge is that total. The thickness of a band is that part's amount.  Use 'LineChart' with 'area' to show how each series moved: it fills each series from the floor separately, so the fills overlap. Use this chart to show the composition: it stacks the series.  **The value axis always starts at zero**, as in 'BarChart', because a band's thickness is its value. For the same reason there is no streamgraph mode, which moves the baseline. To show how the composition changed, set 'share'.  Band edges are straight between readings by default. A smoothed curve through one sum can dip below the curve through the sum beneath it, which draws a part as less than zero. Other curves:  - 'curve="smooth"': for a stack read as an overall shape. - 'curve="step"': holds each reading and jumps at the midpoint, so stacked   edges stay in order, as with 'straight'. Use it for a quantity that changes   at a moment, such as a headcount or a price.  'share' draws each reading as 100 percent, so the top edge is flat and the bands show each part's share. Use it to see which part grew. The default shows whether the total grew.  The drawing is 'aria-hidden'. The text summary gives the latest reading's total and each part's share of it, and the table beside the chart has every number.  Every numeric column is a part, so leave a total column out of the table the chart reads, or it is counted twice. A negative reading is drawn as zero. */
+  /** Shows how a total is made up. Each numeric column of the table is a part, the parts add up to the total at each reading, and the top edge is that total. The thickness of a band is that part's amount.  Use 'LineChart' with 'area' to show how each series moved: it fills each series from the floor separately, so the fills overlap. Use this chart to show the composition: it stacks the series.  **The value axis always starts at zero**, as in 'BarChart', because a band's thickness is its value. For the same reason there is no streamgraph mode, which moves the baseline. To show how the composition changed, set 'share'.  Band edges are straight between readings by default. A smoothed curve through one sum can dip below the curve through the sum beneath it, which draws a part as less than zero. Other curves:  - 'curve="smooth"': for a stack read as an overall shape. - 'curve="step"': holds each reading and jumps at the midpoint, so stacked   edges stay in order, as with 'straight'. Use it for a quantity that changes   at a moment, such as a headcount or a price.  'share' draws each reading as 100 percent, so the top edge is flat and the bands show each part's share. Use it to see which part grew. The default shows whether the total grew.  The drawing is hidden from screen readers. The text summary gives the latest reading's total and each part's share of it, and the table beside the chart has every number.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  Every numeric column is a part, so leave a total column out of the table the chart reads, or it is counted twice. A negative reading is drawn as zero. */
   "helix-headless-area-chart": DefineCustomElement<
     HelixHeadlessAreaChart,
     HelixHeadlessAreaChartVueProps,
@@ -12951,13 +14027,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAvatarVueProps,
     HelixHeadlessAvatarVueEvents
   >;
-  /** Badge wraps the element it decorates and pins an indicator to its corner, so the wrapped element keeps its place in the layout.  What the indicator shows depends on 'value':  - A 'value' of zero shows no indicator. - No 'value' shows a dot. - Any other value shows the value. Above 'max', the indicator shows '{max}+',   so its width stays the same as the count grows.  A count is announced from its own text, and 'label' replaces that with a fuller name, such as '4 unread'. A dot needs a 'label'. Without one, the dot is a colored circle that screen readers do not announce.  **The count is not part of the wrapped control's name.** It is a status of its own, read when it changes and when a reader moves to it, so focusing a button inside a badge announces the button's name alone. Where the count belongs in that name, write it into the control's own label, such as 'aria-label="Inbox, 8 unread"' on a button that reads "Inbox". The badge cannot add it: a reference from the control to the count would point into the badge's shadow root, which the platform does not allow. */
+  /** Badge wraps the element it decorates and pins an indicator to its corner, so the wrapped element keeps its place in the layout.  What the indicator shows depends on 'value':  - A 'value' of zero shows no indicator. - No 'value' shows a dot. - Any other value shows the value. Above 'max', the indicator shows '{max}+',   so its width stays the same as the count grows.  A count is announced from its own text, and 'label' replaces that with a fuller name, such as '4 unread'. A dot needs a 'label'. Without one, the dot is a colored circle that screen readers do not announce.  **A badge wrapped around a control is not part of the control's name.** It is a status of its own, read when it changes and when a reader moves to it, so focusing a button inside a badge announces the button's name alone. A reference from the control to the count would point into the badge's shadow root, which the platform does not allow.  **Put the badge inside the control to have its count read with the control's name**, as Web Awesome and Shoelace do: '<button>Inbox <helix-badge value="8" label="8 unread"></helix-badge></button>' is the button "Inbox 8 unread", and stays current as the count changes. The styled tier's 'placement="inline"' draws the mark in the line for that case. */
   "helix-headless-badge": DefineCustomElement<
     HelixHeadlessBadge,
     HelixHeadlessBadgeVueProps,
     HelixHeadlessBadgeVueEvents
   >;
-  /** Every bar is measured from zero, and no property changes the baseline, because a bar's length is its value. To show the differences between values, use a line chart.  The labels are HTML beside the drawing. An '<svg>' that fills its box scales the text inside it: the same 'font-size' renders at 10px in a narrow chart and 43px in a wide one, and SVG has no setting that keeps text at one size the way 'vector-effect' does for strokes.  The table is the accessible representation, and the drawing is 'aria-hidden', so screen reader users get the numbers themselves. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' highest reading.  The component writes the custom properties below with numbers it computes, and the stylesheet that draws the chart reads them. Do not set them yourself. */
+  /** Every bar is measured from zero, and no property changes the baseline, because a bar's length is its value. To show the differences between values, use a line chart.  The labels are HTML beside the drawing. An '<svg>' that fills its box scales the text inside it: the same 'font-size' renders at 10px in a narrow chart and 43px in a wide one, and SVG has no setting that keeps text at one size the way 'vector-effect' does for strokes.  The table is the accessible representation, and the drawing is hidden from screen readers, so they get the numbers themselves. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' highest reading.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The arrows along the categories move from one to the next, which is left and right for columns and up and down for 'orientation="horizontal"'. Home and End go to the first and the last, and the other pair of arrows moves among the series of a category. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  The component writes the custom properties below with numbers it computes, and the stylesheet that draws the chart reads them. Do not set them yourself. */
   "helix-headless-bar-chart": DefineCustomElement<
     HelixHeadlessBarChart,
     HelixHeadlessBarChartVueProps,
@@ -12987,13 +14063,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessButtonGroupVueProps,
     HelixHeadlessButtonGroupVueEvents
   >;
-  /** Renders a real '<button>', so activation, focus, and other browser behavior come from the platform.  **It never renders an anchor.** A router renders its own '<a>' to intercept a click, and it cannot render one inside the button's shadow root. For a link that looks like a button, use the base layer recipe on your own anchor: '<Link data-button="solid">' draws the same control.  'delegatesFocus' moves focus to the inner control. It is serialized into the server markup, so the button is reachable by keyboard before any JavaScript loads.  The inner control is always 'type="button"', because a '<button type="submit">' inside a shadow root cannot submit a form outside it. To submit, the button calls 'requestSubmit()' on its form, which runs validation, unlike 'submit()'.  A 'submit' listener reads 'event.submitter' as 'null', because the platform accepts only a native submit button there. The button's 'name' and 'value' are in the form data, so read them from 'new FormData(form)' to tell two submit buttons apart.  As the first submit button in its form, it is the form's default button: Enter in a text field of the form presses it, as it presses a native one. */
+  /** Renders a real '<button>', so activation, focus, and other browser behavior come from the platform.  **It never renders an anchor.** A router renders its own '<a>' to intercept a click, and it cannot render one inside the button's shadow root. For a link that looks like a button, use the base layer recipe on your own anchor: '<Link data-button="solid">' draws the same control.  'delegatesFocus' moves focus to the inner control. It is serialized into the server markup, so the button is reachable by keyboard before any JavaScript loads.  The inner control is always 'type="button"', because a '<button type="submit">' inside a shadow root cannot submit a form outside it. To submit, the button calls 'requestSubmit()' on its form, which runs validation, unlike 'submit()'.  A 'submit' listener reads 'event.submitter' as 'null', because the platform accepts only a native submit button there. The button's 'name' and 'value' are in the form data, so read them from 'new FormData(form)' to tell two submit buttons apart.  As the first submit button in its form, it is the form's default button: Enter in a text field of the form presses it, as it presses a native one.  Set 'pending' while the action a press started is still running. The button keeps focus and refuses presses, and a reader on it hears 'pending-label'. */
   "helix-headless-button": DefineCustomElement<
     HelixHeadlessButton,
     HelixHeadlessButtonVueProps,
     HelixHeadlessButtonVueEvents
   >;
-  /** 'tone' is on the headless tier because it carries meaning. It picks the icon and the icon region's accessible name, so a screen reader announces "Error" for an error callout whether or not the color is seen. Set 'tone-label' to say the name in another language.  The icon is the fallback content of a slot. Slot your own icon to replace it, and the default disappears with no extra check. The tone's name stays on the region around it.  A callout sets a passage apart inside a document and is read where it sits. For page-level chrome above the masthead that is a live region and can be dismissed, use 'Announcement'. */
+  /** 'tone' is on the headless tier because it carries meaning. It picks the icon and the icon region's accessible name, so a screen reader announces "Error" for an error callout whether or not the color is seen. Set 'tone-label' to say the name in another language.  The icon is the fallback content of a slot. Slot your own icon to replace it, and the default disappears with no extra check. The tone's name stays on the region around it.  Set 'dismissible' for a note a reader may put away, as Shoelace's 'closable' alert does. The button fires 'helix-dismiss' and the callout stays until a listener removes it, so the page decides whether it comes back.  A callout sets a passage apart inside a document and is read where it sits. For page-level chrome above the masthead that is a live region and can be dismissed, use 'Announcement'. */
   "helix-headless-callout": DefineCustomElement<
     HelixHeadlessCallout,
     HelixHeadlessCalloutVueProps,
@@ -13017,7 +14093,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasVueProps,
     HelixHeadlessCanvasVueEvents
   >;
-  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with 'aria-label' or 'aria-labelledby'. These are the only names that work with server rendering, because reading a title from the light DOM needs a DOM, and the server has none. */
+  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with 'aria-label' or 'aria-labelledby'. These are the only names that work with server rendering, because reading a title from the light DOM needs a DOM, and the server has none. **A named card is a group**, so a reader entering it hears its name; an unnamed one has no role, since a group with no name only adds "group" to what a reader says.  'header-actions' and 'footer-actions' hold controls at the end of the header's and the footer's line, as Web Awesome's card does. While one holds something, its line is a 'header-row' or 'footer-row' part; otherwise there is no wrapper and every region is a bare slot. A server cannot see slotted content, so served actions sit on their own line until the script runs. */
   "helix-headless-card": DefineCustomElement<
     HelixHeadlessCard,
     HelixHeadlessCardVueProps,
@@ -13047,7 +14123,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessChatVueProps,
     HelixHeadlessChatVueEvents
   >;
-  /** The host is the group. It has 'role="group"' through internals, and 'label' names it. Without a name, screen readers announce the checkboxes as separate controls.  **Each checkbox submits its own value.** Checkboxes are already form-associated, and a native group is several inputs that share a name, so the group adds no form value of its own. It adds the grouping, a shared 'name' that you write once, and one place to read and write the whole set.  'value' is the checked values, separated by commas, in the order the checkboxes are written, read from the boxes themselves. Setting it checks exactly those values and unchecks the rest.  A checkbox is a member wherever it sits inside the group, in a row or a grid cell of your own, unless another group inside this one holds it. A field of another kind inside the group, such as an "Other" text field, sends its own 'input' and 'change' past the group.  **The group shows the message you set in 'feedback'.** It is form-associated only for validity and never calls 'setFormValue', so the browser does not generate a message for it. */
+  /** The host is the group. It has 'role="group"' through internals, and 'label' names it. Without a name, screen readers announce the checkboxes as separate controls.  **Each checkbox submits its own value.** Checkboxes are already form-associated, and a native group is several inputs that share a name, so the group adds no form value of its own. It adds the grouping, a shared 'name' that you write once, and one place to read and write the whole set.  'value' is the checked values, separated by commas, in the order the checkboxes are written, read from the boxes themselves. Setting it checks exactly those values and unchecks the rest.  'select-all' draws a box above the set that checks every enabled box, or unchecks them all once every one is checked. It shows a dash while only some are checked, and changes the set through the same cancelable 'helix-before-change' a box does.  A checkbox is a member wherever it sits inside the group, in a row or a grid cell of your own, unless another group inside this one holds it. A field of another kind inside the group, such as an "Other" text field, sends its own 'input' and 'change' past the group.  **The group shows the message you set in 'feedback'.** It is form-associated only for validity and never calls 'setFormValue', so the browser does not generate a message for it. */
   "helix-headless-checkbox-group": DefineCustomElement<
     HelixHeadlessCheckboxGroup,
     HelixHeadlessCheckboxGroupVueProps,
@@ -13059,7 +14135,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCheckboxVueProps,
     HelixHeadlessCheckboxVueEvents
   >;
-  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
+  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; the code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
   "helix-headless-code-block": DefineCustomElement<
     HelixHeadlessCodeBlock,
     HelixHeadlessCodeBlockVueProps,
@@ -13071,31 +14147,31 @@ 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 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%)', 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. */
   "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. */
+  /** The picker on its own, with no field around it, for a settings pane or a toolbar. Color Input shows this element in a panel behind a text field.  The saturation and brightness square is two '<input type="range">' elements, laid over the square and made invisible, and the handle is drawn from their values. The keyboard behavior, the announcements, and the touch targets come from the platform, and there is no 'role="application"'.  The picker works in HSB and derives the value from it. A value set from outside is read into the model once. Black is 'brightness: 0', which has no hue or saturation, so a model read back from the value would turn red into gray after you drag to the bottom of the square and back.  The square is one tab stop. In it, the up and down arrows move brightness and the left and right arrows move saturation, and PageUp and PageDown move brightness by ten. The picker sends 'input' as the color moves and 'change' when a drag, a key, a typed value or a preset settles it, as '<input type="color">' does.  A screen reader hears the color's name, such as "vibrant red", after the two numbers on the square and after the number on the hue ramp, and each preset is named by its color. Set 'color-words' to speak the names in another language. */
   "helix-headless-color-picker": DefineCustomElement<
     HelixHeadlessColorPicker,
     HelixHeadlessColorPickerVueProps,
     HelixHeadlessColorPickerVueEvents
   >;
-  /** The list is a 'Listbox', which handles filtering, the empty state, the highlight, 'aria-activedescendant', and scrolling an option into view. This element handles the field, the panel, and the communication between them.  The typed text and the value are separate. The text is a filter: it narrows the list and is then discarded. The value is the option you choose, and the field then shows that option's text. The filter clears on close, so a reopened combobox starts from the whole list.  Focus stays in the text field. The arrow keys move through the list with the listbox's public 'navigate' method. 'role="combobox"' is on the input itself. ArrowDown and ArrowUp open the list on the chosen option, and Enter chooses the highlighted one. Space, Home, End and letters edit the text, and Enter in a closed field is left to the form. Emptying the field and leaving it clears a single choice; Escape puts the chosen words back.  With 'multiple', each chosen option is a tag in the field with its own remove control. The panel stays open and the filter clears after each choice, so the next choice starts from the whole list.  With 'creatable', the combobox offers a create row and fires 'helix-create'. It does not add the option. The options are your light DOM, and your framework would re-render over an element the combobox inserted, so add the option in your event handler. */
+  /** The list is a 'Listbox', which handles filtering, the empty state, the highlight, 'aria-activedescendant', and scrolling an option into view. This element handles the field, the panel, and the communication between them.  The typed text and the value are separate. The text is a filter: it narrows the list and is then discarded. The value is the option you choose, and the field then shows that option's text. The filter clears on close, so a reopened combobox starts from the whole list.  Focus stays in the text field. The arrow keys move through the list with the listbox's public 'navigate' method. 'role="combobox"' is on the input itself. ArrowDown and ArrowUp open the list on the chosen option, and Enter chooses the highlighted one. As typing narrows the list, a screen reader hears how many options are left, such as "3 results". Space, Home, End and letters edit the text, and Enter in a closed field is left to the form. Emptying the field and leaving it clears a single choice; Escape puts the chosen words back, and a second Escape on the closed field clears the choice.  With 'multiple', each chosen option is a tag in the field with its own remove control. The panel stays open and the filter clears after each choice, so the next choice starts from the whole list.  With 'creatable', the combobox offers a create row and fires 'helix-create'. It does not add the option. The options are your light DOM, and your framework would re-render over an element the combobox inserted, so add the option in your event handler. */
   "helix-headless-combobox": DefineCustomElement<
     HelixHeadlessCombobox,
     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.  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. */
+  /** 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". */
   "helix-headless-command": DefineCustomElement<
     HelixHeadlessCommand,
     HelixHeadlessCommandVueProps,
     HelixHeadlessCommandVueEvents
   >;
-  /** Copies text to the clipboard and confirms the copy. The platform gives no feedback for a clipboard write, so without a confirmation a press that copies looks the same as one that fails.  The confirmation and the event wait for the write to finish. The browser can refuse a clipboard write, for example on an insecure origin, in a document that is not focused, or after a gesture that does not qualify. A refused write leaves the button unchanged.  It replaces Button's render and its press, so it never submits a form or sends a command: 'type', 'command', 'commandfor' and the 'form*' overrides have no effect, and the 'start' and 'end' slots and the 'text' part are not rendered. An 'aria-label' on the element names it before a copy, in place of 'label'. */
+  /** Copies text to the clipboard and confirms the copy. The platform gives no feedback for a clipboard write, so without a confirmation a press that copies looks the same as one that fails.  The confirmation and the event wait for the write to finish. The browser can refuse a clipboard write, for example on an insecure origin, in a document that is not focused, or after a gesture that does not qualify. A refused write, or nothing to copy, names the button with 'error-label' for the same moment a copy shows 'copied-label', draws a cross, and sends 'helix-copy-error'.  'from' copies from another element on the page: its text, an attribute written 'id[attribute]', or a property written 'id.property', read at the press. It takes the place of 'value'.  It replaces Button's render and its press, so it never submits a form or sends a command: 'type', 'command', 'commandfor' and the 'form*' overrides have no effect, and the 'start' and 'end' slots and the 'text' part are not rendered. An 'aria-label' on the element names it before a copy, in place of 'label'. */
   "helix-headless-copy-button": DefineCustomElement<
     HelixHeadlessCopyButton,
     HelixHeadlessCopyButtonVueProps,
@@ -13107,13 +14183,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDataTableVueProps,
     HelixHeadlessDataTableVueEvents
   >;
-  /** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them.  You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both.  The trigger opens the calendar with focus on the selected day, and Escape closes it and returns focus to the field. Focusing the field opens the calendar too, and Tab out of the field closes it again. */
+  /** 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. */
   "helix-headless-date-input": DefineCustomElement<
     HelixHeadlessDateInput,
     HelixHeadlessDateInputVueProps,
     HelixHeadlessDateInputVueEvents
   >;
-  /** A grid of days that follows the APG date grid pattern:  - The grid is one tab stop. Only the focused cell is in the tab sequence. - Arrow keys move by day and by week. - 'PageUp' and 'PageDown' move by month. - 'Home' and 'End' move to the start and end of the week.  **Dates are 'YYYY-MM-DD' strings, and every calculation is in UTC**, because a local-time 'Date' shifts across a time zone or daylight-saving boundary.  'month' sets which month the grid shows, separately from 'value', so paging selects nothing and you can control the view. When unset, it follows the first selected date, then the current month.  'mode' sets how many dates are held. Unset holds one, 'range' holds two and marks the dates between them, and 'multiple' toggles each date. All three read and write the same comma-separated 'value'.  The month heading is a live region, so a screen reader hears the new month when Previous or Next is pressed. Neither moves past 'min' or 'max', and the keys stop at them too. A value outside the bounds, on a barred day, or off 'step' reports 'rangeUnderflow', 'rangeOverflow', 'badInput' or 'stepMismatch', so a form does not submit it. */
+  /** A grid of days that follows the APG date grid pattern:  - The grid is one tab stop. Only the focused cell is in the tab sequence. - Arrow keys move by day and by week. - 'PageUp' and 'PageDown' move by month. - 'Home' and 'End' move to the start and end of the week.  **Dates are 'YYYY-MM-DD' strings, and every calculation is in UTC**, because a local-time 'Date' shifts across a time zone or daylight-saving boundary.  'month' sets which month the grid shows, separately from 'value', so paging selects nothing and you can control the view. When unset, it follows the first selected date, then the current month.  'mode' sets how many dates are held. Unset holds one, 'range' holds two and marks the dates between them, and 'multiple' toggles each date. All three read and write the same comma-separated 'value'.  'max-view' makes the heading a button that steps back to the months of the year, and with 'year' to a page of years, as Zag's date picker does. The arrows, Home, End and the page keys move there, Enter or a press chooses, and Escape goes back to the days.  'isDateUnavailable' and 'dayContent' are properties for a script: a rule that bars dates, and what each day shows in place of its number.  The month heading is a live region, so a screen reader hears the new month when Previous or Next is pressed. Neither moves past 'min' or 'max', and the keys stop at them too. A value outside the bounds, on a barred day, or off 'step' reports 'rangeUnderflow', 'rangeOverflow', 'badInput' or 'stepMismatch', so a form does not submit it. */
   "helix-headless-date-picker": DefineCustomElement<
     HelixHeadlessDatePicker,
     HelixHeadlessDatePickerVueProps,
@@ -13131,7 +14207,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDescriptionListVueProps,
     HelixHeadlessDescriptionListVueEvents
   >;
-  /** Renders a native '<dialog>' opened with 'showModal()'. The platform provides:  - the top layer, so the dialog is above everything whatever the 'z-index' - a backdrop - closing with Escape - an inert page behind the dialog, unreachable by pointer, keyboard, or   virtual cursor  'open' calls 'showModal()', and every way the dialog closes goes through 'requestOpen'. A native dialog closes three ways: the property, Escape, and a '<form method="dialog">' submit. Routing all three through 'requestOpen' keeps your state in step, so the dialog never closes while your state still says it is open, which would leave it impossible to reopen.  The dialog's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names. While it is open, the page behind it does not scroll. */
+  /** Renders a native '<dialog>' opened with 'showModal()'. The platform provides:  - the top layer, so the dialog is above everything whatever the 'z-index' - a backdrop - closing with Escape - an inert page behind the dialog, unreachable by pointer, keyboard, or   virtual cursor  'open' calls 'showModal()', and every way the dialog closes goes through 'requestOpen'. A native dialog closes three ways: the property, Escape, and a '<form method="dialog">' submit. Routing all three through 'requestOpen' keeps your state in step, so the dialog never closes while your state still says it is open, which would leave it impossible to reopen.  The dialog's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names. While it is open, the page behind it does not scroll.  The dialog is described by the words at the start of its body: the elements in the default slot before the first one that is or holds a control. A question above a form describes the dialog, and the form does not. An 'aria-describedby' on the host replaces it.  Set 'alert' for a dialog that interrupts to ask for an answer, such as a confirmation before a deletion. It is an 'alertdialog', which a screen reader announces with its description as it opens. Set 'dismissible' to draw a close control, labeled by 'dismiss-label'. */
   "helix-headless-dialog": DefineCustomElement<
     HelixHeadlessDialog,
     HelixHeadlessDialogVueProps,
@@ -13143,13 +14219,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDividerVueProps,
     HelixHeadlessDividerVueEvents
   >;
-  /** A donut chart divides one whole into parts, so the component reads one column.  **The first column of numbers is the series, and each row is a slice.** Other Helix charts take one column per series.  **Negative values are skipped.** An arc cannot show a negative number, so those rows are left out and the total is the sum of the remaining rows.  The ring is 'aria-hidden'. The 'summary' part names the chart, from 'label' or the table's caption, and gives each slice's share, and the table beside the chart has every amount. */
+  /** A donut chart divides one whole into parts, so the component reads one column.  **The first column of numbers is the series, and each row is a slice.** Other Helix charts take one column per series.  **Negative values are skipped.** An arc cannot show a negative number, so those rows are left out and the total is the sum of the remaining rows.  The ring is hidden from screen readers. The 'summary' part names the chart, from 'label' or the table's caption, and gives each slice's share, and the table beside the chart has every amount.  **The ring is read by key.** The plot takes focus, named by 'label' or the caption. Every arrow moves from slice to slice, the right and down arrows to the next, and Home and End go to the first and the last. The tooltip follows, the 'live' part says the slice in words, and Escape puts the tooltip away. */
   "helix-headless-donut-chart": DefineCustomElement<
     HelixHeadlessDonutChart,
     HelixHeadlessDonutChartVueProps,
     HelixHeadlessDonutChartVueEvents
   >;
-  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names.  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> ''' */
+  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape, in a browser without 'closedby' as well.  **A touch or a pen swipes it away**, toward the edge it came from, resolved against the writing direction. A swipe past halfway, or a quick one, closes it through the same request as every other way out. 'snap-points' lists the fractions of the panel a reader can leave on screen, such as '0.5 1' for a sheet that rests half open: it opens at the smallest, and a swipe settles at the nearest. While a swipe moves the panel, the distance is written on it as '--drawer-swipe-x' and '--drawer-swipe-y'. 'swipe="false"' turns swiping off.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names.  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> ''' */
   "helix-headless-drawer": DefineCustomElement<
     HelixHeadlessDrawer,
     HelixHeadlessDrawerVueProps,
@@ -13173,7 +14249,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessEmptyVueProps,
     HelixHeadlessEmptyVueEvents
   >;
-  /** File Input keeps a real '<input type="file">' and makes it invisible. Only a file input opens the file picker: the browser opens it for a click on the input or on a '<label>' that points at it, and a script cannot open it on its own. A custom button would still call '.click()' on a hidden input, and a screen reader would find two controls.  The input holds the label, the name, the validity, and the focus, and the visible trigger is a '<label for>'. The label is not focusable. The input is, and Enter and Space on it open the picker. */
+  /** File Input keeps a real '<input type="file">' and makes it invisible. Only a file input opens the file picker: the browser opens it for a click on the input or on a '<label>' that points at it, and a script cannot open it on its own. A custom button would still call '.click()' on a hidden input, and a screen reader would find two controls.  The input holds the label, the name, the validity, and the focus, and the visible trigger is a '<label for>'. The label is not focusable. The input is, and Enter and Space on it open the picker.  Files arrive from the picker, a drop, or a paste onto the field, and each one is screened: 'accept', 'max-file-size', 'max-files' and your own 'validate' can refuse it. A refused file is left out, 'helix-reject' lists each one with its reason, and a reader hears 'rejected-text' with the names filled in. 'directory' asks the picker for a folder. */
   "helix-headless-file-input": DefineCustomElement<
     HelixHeadlessFileInput,
     HelixHeadlessFileInputVueProps,
@@ -13203,13 +14279,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFilterOperatorVueProps,
     HelixHeadlessFilterOperatorVueEvents
   >;
-  /** Tokens are your own elements, slotted in. A filter can be a facet with a prefix, a saved query, or a range, and these belong to your model, so the element does not render tokens from a list of strings. Removing a token is a request the element fires, and you apply it. Combobox works the other way: its tokens show a selection it owns, drawn from the options it was given.  'value' is the typed text. Every keystroke fires 'input' with the text on the element, so a table can narrow as the user types. Tokens are not reported, because they are markup you already hold. Backspace in an empty field fires 'helix-dismiss' on the last token, the same event its remove control fires, so one handler covers the pointer and the keyboard.  **Typed filters.** The field parses only the fields you declare. Write 'FilterField' elements, usually inside the 'FilterMenu' slotted into 'start', so the picker and the text share one set. On Enter, the field reads the text against them. 'disposition:refunded,settled' and '-disposition:refunded' fire 'helix-facet' exactly as ticking those values in the picker would, and the parsed text is removed. Everything else stays, so 'refund tuesday disposition:settled' is a filter and a search at once. Helix defines the punctuation and you define every word. 'grammar.ts' has the full rule, so read it before you rely on it. A field with no 'FilterField' in it parses nothing.  A field whose values cannot be listed, such as 'assignee:ada', goes directly inside this element, outside the menu. It is not assigned to a slot, so nothing draws it and the menu has no page for it, and the grammar still reads it.  **Suggestions.** Slot options into 'suggestions' and the field shows them, moves through them with the arrow keys, and presses one on Enter. The option fires its own 'helix-select', and you decide what choosing it means. Keys before a colon and values after it use the same panel with different contents. 'readFilterText' is exported so you can narrow the panel against partly typed text. The panel opens when it has options and closes when it has none, and a choice does not close it, so after picking a key you see its values next. Use 'selectionStart' and 'setSelectionRange' to write a completion back and put the caret after it, or the next parse reads the wrong term.  **State.** Three things have three different owners:  - 'value' is the text. The user types, the element applies it, and 'input'   reports it. Setting 'value' seeds or corrects the text, and the next   keystroke overwrites it, even in React. To control the value, cancel   'helix-before-change' and write the value you want, as with every field in   this library. 'default-value' seeds the field. - 'open' is the suggestions panel. Cancel 'helix-before-open' or   'helix-before-close' to control it, and use 'default-open' to seed it. - Tokens are your elements in a slot and hold no state. A token goes when you   remove it from your markup after 'helix-dismiss'. A 'FilterChip' naming a   declared field works differently, because the picker holds what is ticked   and removing the chip alone would leave its value ticked in the hidden   menu. Its dismissal is treated as the field being filtered by nothing, so   it fires 'helix-facet' like every other change, and the chip goes when the   filter goes. */
+  /** Tokens are your own elements, slotted in. A filter can be a facet with a prefix, a saved query, or a range, and these belong to your model, so the element does not render tokens from a list of strings. Removing a token is a request the element fires, and you apply it. Combobox works the other way: its tokens show a selection it owns, drawn from the options it was given.  'value' is the typed text. Every keystroke fires 'input' with the text on the element, so a table can narrow as the user types. A form receives the text under 'name', and then one more entry under 'name' for each token: its 'value' attribute, or for a 'FilterChip', its field and values written 'field:values' as the field reads them typed. Backspace in an empty field fires 'helix-dismiss' on the last token, the same event its remove control fires, so one handler covers the pointer and the keyboard.  **Typed filters.** The field parses only the fields you declare. Write 'FilterField' elements, usually inside the 'FilterMenu' slotted into 'start', so the picker and the text share one set. On Enter, the field reads the text against them. 'disposition:refunded,settled' and '-disposition:refunded' fire 'helix-facet' exactly as ticking those values in the picker would, and the parsed text is removed. Everything else stays, so 'refund tuesday disposition:settled' is a filter and a search at once. Helix defines the punctuation and you define every word. 'grammar.ts' has the full rule, so read it before you rely on it. A field with no 'FilterField' in it parses nothing.  A field whose values cannot be listed, such as 'assignee:ada', goes directly inside this element, outside the menu. It is not assigned to a slot, so nothing draws it and the menu has no page for it, and the grammar still reads it.  **Suggestions.** Slot options into 'suggestions' and the field shows them, moves through them with the arrow keys, and presses one on Enter. The option fires its own 'helix-select', and you decide what choosing it means. Keys before a colon and values after it use the same panel with different contents. 'filter-suggestions' narrows the panel to the options whose words hold the term at the caret, after its colon, ignoring case and accents, and hides the rest. 'readFilterText' is exported so you can narrow it yourself against partly typed text. While the panel is open, a reader hears how many suggestions it offers. The panel opens when it has options and closes when it has none, and a choice does not close it, so after picking a key you see its values next. Use 'selectionStart' and 'setSelectionRange' to write a completion back and put the caret after it, or the next parse reads the wrong term.  **State.** Three things have three different owners:  - 'value' is the text. The user types, the element applies it, and 'input'   reports it. Setting 'value' seeds or corrects the text, and the next   keystroke overwrites it, even in React. To control the value, cancel   'helix-before-change' and write the value you want, as with every field in   this library. 'default-value' seeds the field. - 'open' is the suggestions panel. Cancel 'helix-before-open' or   'helix-before-close' to control it, and use 'default-open' to seed it. - Tokens are your elements in a slot and hold no state. A token goes when you   remove it from your markup after 'helix-dismiss'. A 'FilterChip' naming a   declared field works differently, because the picker holds what is ticked   and removing the chip alone would leave its value ticked in the hidden   menu. Its dismissal is treated as the field being filtered by nothing, so   it fires 'helix-facet' like every other change, and the chip goes when the   filter goes. */
   "helix-headless-filter-input": DefineCustomElement<
     HelixHeadlessFilterInput,
     HelixHeadlessFilterInputVueProps,
     HelixHeadlessFilterInputVueEvents
   >;
-  /** Formats a date with 'Intl' where it is shown, so you do not write the same 'Intl' call and options in your own code.  **'elapsed' shows compact relative time for a feed**, such as "42m", "3h", or "1d". After six days it shows a date. In en-US, 'Intl.NumberFormat' narrow renders both 'minute' and 'month' as 'm', so a compact "3m" could mean three minutes or three months. 'elapsedTime' in 'helix/core' does the measurement.  **The text refreshes on one timer shared by the page.** Each element schedules an update for when its current reading expires, and an element showing a date schedules none, so a long feed left open costs almost nothing.  **The output is always '<time datetime>'**, so copy and paste and scripts parsing the page get the exact instant, whatever the visible text says. A screen reader reads the text, so an 'elapsed' reading is named in full, such as "3 hours ago", and carries the whole date as its title.  **A date with no time, such as '2026-08-04', is that day everywhere.** It is formatted in UTC unless 'time-zone' says otherwise, as Date Input and Date Picker format their dates, so a reader west of UTC sees August 4 and not August 3. */
+  /** Formats a date with 'Intl' where it is shown, so you do not write the same 'Intl' call and options in your own code.  **'elapsed' shows compact relative time for a feed**, such as "42m", "3h", or "1d". After six days it shows a date. In en-US, 'Intl.NumberFormat' narrow renders both 'minute' and 'month' as 'm', so a compact "3m" could mean three minutes or three months. 'elapsedTime' in 'helix/core' does the measurement.  **'relative' shows the same reading in words**, such as "3 hours ago" at 'long', "3 hr. ago" at 'short' and "3h ago" at 'narrow', the styles 'sl-relative-time' offers. 'numeric="always"' says "1 day ago" where the default says "yesterday".  **'date-style' and 'time-style' take each locale's own pattern**, such as "Tuesday, August 4, 2026" at 'full', and stand in for the separate fields, which 'Intl' refuses beside them. 'hour-cycle' sets a twelve or twenty-four hour clock either way.  **The text refreshes on one timer shared by the page.** Each element schedules an update for when its current reading expires, and an element showing a date schedules none, so a long feed left open costs almost nothing.  **The output is always '<time datetime>'**, so copy and paste and scripts parsing the page get the exact instant, whatever the visible text says. A screen reader reads the text, so an 'elapsed' reading is named in full, such as "3 hours ago", and carries the whole date as its title.  **A date with no time, such as '2026-08-04', is that day everywhere.** It is formatted in UTC unless 'time-zone' says otherwise, as Date Input and Date Picker format their dates, so a reader west of UTC sees August 4 and not August 3. */
   "helix-headless-format-date": DefineCustomElement<
     HelixHeadlessFormatDate,
     HelixHeadlessFormatDateVueProps,
@@ -13221,7 +14297,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessGraphVueProps,
     HelixHeadlessGraphVueEvents
   >;
-  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'. */
+  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. */
   "helix-headless-heatmap": DefineCustomElement<
     HelixHeadlessHeatmap,
     HelixHeadlessHeatmapVueProps,
@@ -13233,7 +14309,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessIconButtonVueProps,
     HelixHeadlessIconButtonVueEvents
   >;
-  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  A name with no match renders nothing, and the element fires 'error', so a typo in a name can be heard.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name. */
+  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers the whole set, so any name in it draws. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  A name with no match renders nothing, and the element fires 'error', so a typo in a name can be heard.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name. */
   "helix-headless-icon": DefineCustomElement<
     HelixHeadlessIcon,
     HelixHeadlessIconVueProps,
@@ -13251,31 +14327,31 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessInputVueProps,
     HelixHeadlessInputVueEvents
   >;
-  /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing. */
+  /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing.  **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added. */
   "helix-headless-kbd": DefineCustomElement<
     HelixHeadlessKbd,
     HelixHeadlessKbdVueProps,
     HelixHeadlessKbdVueEvents
   >;
-  /** Renders a legend as a list, separate from any chart, so any chart can use one. Set 'for' to the table the chart reads, and the legend takes its entries from that table, so the two always match.  'entries' sets how the table is read:  - 'series': one entry per data column, named by the header row. Use it for a   line or bar chart. - 'categories': one entry per body row. Use it for a donut, whose slices are   the rows and which has no axis to name them on. - 'measures': drops the first data column. Use it for a scatter.  The table is resolved on the client. There is no server pass. */
+  /** Renders a legend as a list, separate from any chart, so any chart can use one. Set 'for' to the table the chart reads, and the legend takes its entries from that table, so the two always match.  'entries' sets how the table is read:  - 'series': one entry per data column, named by the header row. Use it for a   line or bar chart. - 'categories': one entry per body row. Use it for a donut, whose slices are   the rows and which has no axis to name them on. - 'measures': drops the first data column. Use it for a scatter.  The table is resolved on the client. There is no server pass.  **'toggles' makes each entry a button that hides its series.** Every chart reading the same table draws without a hidden series and fits its scale to the rest, and the series keeps its color. The button says whether its series is shown with 'aria-pressed'. 'hidden-series' holds the hidden names, so a page can start with some hidden or read which are. */
   "helix-headless-legend": DefineCustomElement<
     HelixHeadlessLegend,
     HelixHeadlessLegendVueProps,
     HelixHeadlessLegendVueEvents
   >;
-  /** Wraps one piece of content in the lightbox, such as a picture, a video frame, or a chart. The lightbox shows one item at a time, and the root decides which.  An item that is not current is hidden and stays in the DOM, as a 'TabPanel' does. Crawlers can read it, it is in the server-rendered markup, and an '<img>' that has decoded does not decode again when you go back to it. */
+  /** Wraps one piece of content in the lightbox, such as a picture, a video frame, or a chart. The lightbox shows one item at a time, and the root decides which.  Each item is a 'group' with the role description 'slide', named by its 'label' or, without one, by its place in the set, such as "2 of 5", as the APG carousel pattern names a slide. The lightbox supplies both words, so they are translated on the lightbox.  An item that is not current is hidden and stays in the DOM, as a 'TabPanel' does. Crawlers can read it, it is in the server-rendered markup, and an '<img>' that has decoded does not decode again when you go back to it. */
   "helix-headless-lightbox-item": DefineCustomElement<
     HelixHeadlessLightboxItem,
     HelixHeadlessLightboxItemVueProps,
     HelixHeadlessLightboxItemVueEvents
   >;
-  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
+  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label'. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
   "helix-headless-lightbox": DefineCustomElement<
     HelixHeadlessLightbox,
     HelixHeadlessLightboxVueProps,
     HelixHeadlessLightboxVueEvents
   >;
-  /** A line chart shows the shape of each series: where the readings went.  The scale covers the range of the data. Including zero in the range of a series that moves between 980 and 1020 would flatten the line into a rule across the top of the box. 'BarChart' always starts at zero, because a bar's length is its value. Set 'zero' when the distance from zero is the point.  Every series shares one scale, as in the bar chart.  'area' fills each series down to the floor on its own, so the fills overlap. For a total made of parts, use 'Area Chart', which stacks the series so the top edge is the total and each band is a share.  The labels are HTML beside the drawing, as in 'BarChart'. Text inside an '<svg>' that fills its box scales with the box, so the same 'font-size' can render at 10px in a narrow chart and 43px in a wide one.  The table is the accessible representation, and the drawing is 'aria-hidden'. Screen reader users get the numbers. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' latest reading. */
+  /** A line chart shows the shape of each series: where the readings went.  The scale covers the range of the data. Including zero in the range of a series that moves between 980 and 1020 would flatten the line into a rule across the top of the box. 'BarChart' always starts at zero, because a bar's length is its value. Set 'zero' when the distance from zero is the point.  Every series shares one scale, as in the bar chart.  'area' fills each series down to the floor on its own, so the fills overlap. For a total made of parts, use 'Area Chart', which stacks the series so the top edge is the total and each band is a share.  The labels are HTML beside the drawing, as in 'BarChart'. Text inside an '<svg>' that fills its box scales with the box, so the same 'font-size' can render at 10px in a narrow chart and 43px in a wide one.  The table is the accessible representation, and the drawing is hidden from screen readers, who get the numbers. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' latest reading.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from reading to reading, Home and End go to the first and the last, and the up and down arrows move among the series of a reading. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away. */
   "helix-headless-line-chart": DefineCustomElement<
     HelixHeadlessLineChart,
     HelixHeadlessLineChartVueProps,
@@ -13293,13 +14369,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessListVueProps,
     HelixHeadlessListVueEvents
   >;
-  /** The listbox is the control, and options are its items. A Select is a listbox with a trigger in front of it, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. They differ only in what opens the list and what filters it.  With 'multiple' set, 'value' is a comma-separated string, like 'Checkbox.Group''s, because 'MixinControllerValue' holds a string. The form receives one entry per selected option, as a native '<select multiple>' sends it, so your server does not split on commas.  Selected and active are separate. The selected option is the value. The active option is where the keyboard is: the arrow keys move it, and 'aria-activedescendant' points to it while focus stays on the list.  The arrow keys, Home, End, PageUp and PageDown move the highlight, and typed letters move it to the next option whose words start with them. In a single-choice list the highlight is the choice unless 'manual' is set; then Enter, Space or a click chooses. With 'multiple', Space toggles the highlighted option, Shift with an arrow adds the option it moves to, and Control+A or Command+A chooses every option, or none where all are chosen. In a filter field, Space, Home, End and letters edit the text. */
+  /** The listbox is the control, and options are its items. A Select is a listbox with a trigger in front of it, a Combobox is a listbox with a text input, and a command palette is a listbox in a dialog. They differ only in what opens the list and what filters it.  With 'multiple' set, 'value' is a comma-separated string, like 'Checkbox.Group''s, because 'MixinControllerValue' holds a string. The form receives one entry per selected option, as a native '<select multiple>' sends it, so your server does not split on commas.  Selected and active are separate. The selected option is the value. The active option is where the keyboard is: the arrow keys move it, and 'aria-activedescendant' points to it while focus stays on the list.  The arrow keys, Home, End, PageUp and PageDown move the highlight, and typed letters move it to the next option whose words start with them. In a single-choice list the highlight is the choice unless 'manual' is set; then Enter, Space or a click chooses. With 'multiple', Space toggles the highlighted option, Shift with an arrow adds the option it moves to, Shift with Home or End adds every option from the highlight to that end, and Control+A or Command+A chooses every option, or none where all are chosen. In a filter field, Space, Home, End and letters edit the text.  An option with 'href' is a link: Enter or a press follows it and selects nothing, and moving onto it with the arrows does not follow it.  As a filter narrows the list, a screen reader hears how many options are left, such as "3 results", from 'result-label' and 'results-label'. A filter that leaves none says 'empty-text'. */
   "helix-headless-listbox": DefineCustomElement<
     HelixHeadlessListbox,
     HelixHeadlessListboxVueProps,
     HelixHeadlessListboxVueEvents
   >;
-  /** Draws two concentric circles: a track and a moving arc. The track shows the arc as a proportion of a whole, and costs one element.  **The center is a slot, empty by default.** Put your logo there once, where your app wraps the loader. When nothing is slotted, nothing extra is rendered.  Slotted content does not rotate. Only the arc moves, so a logo stays readable.  The role is set on the host through 'ElementInternals'. A 'role' in the shadow root would leave the host itself without a role in the light DOM, and a 'role' attribute on the host would be missing from React server-rendered markup. */
+  /** Draws two concentric circles: a track and a moving arc. The track shows the arc as a proportion of a whole, and costs one element.  **The center is a slot, empty by default.** Put your logo there once, where your app wraps the loader. When nothing is slotted, nothing extra is rendered.  Slotted content does not rotate. Only the arc moves, so a logo stays readable.  The role is set on the host through 'ElementInternals'. A 'role' in the shadow root would leave the host itself without a role in the light DOM, and a 'role' attribute on the host would be missing from React server-rendered markup.  **'for' names the region being loaded**, and the loader sets 'aria-busy="true"' on it for as long as the loader is on the page, so a screen reader waits for the region rather than reading it half filled. Two loaders in one region hold it busy until the last one leaves.  **'delay' keeps a quick load from flashing a loader.** The loader stays hidden, and silent, for that many milliseconds, and appears only if the work is still going. */
   "helix-headless-loader": DefineCustomElement<
     HelixHeadlessLoader,
     HelixHeadlessLoaderVueProps,
@@ -13413,13 +14489,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationVueProps,
     HelixHeadlessNotificationVueEvents
   >;
-  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting. */
+  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting.  **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it. */
   "helix-headless-notifications": DefineCustomElement<
     HelixHeadlessNotifications,
     HelixHeadlessNotificationsVueProps,
     HelixHeadlessNotificationsVueEvents
   >;
-  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. */
+  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  On iOS and iPadOS the field is a text field described as a number field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. */
   "helix-headless-number-input": DefineCustomElement<
     HelixHeadlessNumberInput,
     HelixHeadlessNumberInputVueProps,
@@ -13437,7 +14513,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. */
+  /** 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. */
   "helix-headless-option": DefineCustomElement<
     HelixHeadlessOption,
     HelixHeadlessOptionVueProps,
@@ -13467,13 +14543,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessPaginationSummaryVueProps,
     HelixHeadlessPaginationSummaryVueEvents
   >;
-  /** Each cell is its own '<input>', so every box has a real focus ring, caret, and tab stop.  Input longer than one character is treated as a paste, in any cell. This covers pasting, a browser autofilling an SMS code, and a password manager, which all put the whole code into the focused box. A six-character code that arrives in cell three fills from cell three.  The code is one value to a form. The cells are in a shadow root and submit nothing. The host is form-associated and submits the joined string, which also carries validity and responds to a form reset.  Only the first cell has 'autocomplete="one-time-code"', because the hint applies to the whole field.  The row of cells always runs left to right, with 'dir="ltr"', including in Arabic and Hebrew. The first box is the leftmost, a paste fills to the right, and the right arrow moves to the next box. The label, hint, and feedback follow the page's direction. */
+  /** Each cell is its own '<input>', so every box has a real focus ring, caret, and tab stop.  Input longer than one character is treated as a paste, in any cell. This covers pasting, a browser autofilling an SMS code, and a password manager, which all put the whole code into the focused box. A six-character code that arrives in cell three fills from cell three.  The code is one value to a form. The cells are in a shadow root and submit nothing. The host is form-associated and submits the joined string, which also carries validity and responds to a form reset.  Only the first cell has 'autocomplete="one-time-code"', because the hint applies to the whole field.  'autosubmit' submits the form once the last box is filled, through the form's default button where there is one. 'format' draws separators between the boxes, such as the dash in '###-###', as text a screen reader skips. Delete removes the character in the focused box and pulls the rest of the code back, as Backspace removes the one before it.  The row of cells always runs left to right, with 'dir="ltr"', including in Arabic and Hebrew. The first box is the leftmost, a paste fills to the right, and the right arrow moves to the next box. The label, hint, and feedback follow the page's direction. */
   "helix-headless-pin-input": DefineCustomElement<
     HelixHeadlessPinInput,
     HelixHeadlessPinInputVueProps,
     HelixHeadlessPinInputVueEvents
   >;
-  /** Popover is the general overlay that the specific ones build on. 'Menu' holds commands, 'Select' holds options, and 'Tooltip' holds a description. Popover holds any content you put in it, so it has no keyboard handling of its own.  The trigger is slotted and stays your own element. The popover writes nothing onto it, including 'aria-expanded', 'id', and 'tabindex', because changing your markup after upgrade causes a React hydration mismatch.  The panel is in the top layer through the popover API, so it needs no 'z-index', and an ancestor with 'overflow: hidden', 'transform', 'filter', or 'contain' does not clip or move it.  It opens on click and from a command. 'command="--show"' and the related commands work as they do on 'Dialog' and 'Drawer', so a button anywhere on the page can open the popover with no script.  It closes on Escape, on a press outside it, and when focus moves out of the trigger and the panel to somewhere else on the page. It does not trap focus. An 'aria-labelledby' on the host names the panel in place of 'label'. */
+  /** Popover is the general overlay that the specific ones build on. 'Menu' holds commands, 'Select' holds options, and 'Tooltip' holds a description. Popover holds any content you put in it, so it has no keyboard handling of its own.  The trigger is slotted and stays your own element. The popover writes nothing onto it, including 'aria-expanded', 'id', and 'tabindex', because changing your markup after upgrade causes a React hydration mismatch.  The panel is in the top layer through the popover API, so it needs no 'z-index', and an ancestor with 'overflow: hidden', 'transform', 'filter', or 'contain' does not clip or move it.  It opens on click and from a command. 'command="--show"' and the related commands work as they do on 'Dialog' and 'Drawer', so a button anywhere on the page can open the popover with no script.  **Opening moves focus into the panel**, to the first control in it, or to the panel itself where it holds none, and closing from inside gives it back to the trigger. It closes on Escape, on a press outside it, and when focus moves out of the trigger and the panel to somewhere else on the page.  'modal' keeps 'Tab' inside the panel while it is open and says so with 'aria-modal', for a panel that has to be answered before the page goes on. Without it the popover does not trap focus.  The panel's name is 'label' when you set it. Otherwise it is the first heading in the panel, or the elements an 'aria-labelledby' on the host names.  'arrow' draws a point on the panel's edge facing the trigger. The side the panel landed on is on the host as ':state(placed-top)' and its kin, and the trigger's width is on the panel as '--floating-anchor-inline-size', for a panel as wide as its trigger:  '''css helix-popover::part(popover) {   min-inline-size: var(--floating-anchor-inline-size); } ''' */
   "helix-headless-popover": DefineCustomElement<
     HelixHeadlessPopover,
     HelixHeadlessPopoverVueProps,
@@ -13485,7 +14561,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessProgressVueProps,
     HelixHeadlessProgressVueEvents
   >;
-  /** The code is drawn as one '<path>'. Runs of adjacent dark modules are joined, so a row of eight is one horizontal move. A code of useful length has about a thousand modules, and an element for each would be a thousand nodes for one image.  The element has 'role="img"' and an accessible name. Set the name to what the code is for. When you pass no name, the value is the name. Most codes hold a URL, and a URL read aloud gives the destination.  The quiet zone of four modules is required by the specification, and a scanner rejects a code cropped to its edge. It is drawn inside the 'viewBox', so it stays at any size, including a size set in CSS.  'correction' sets how much of the code can be lost. At 'H' a code can lose thirty percent and still scan, so a mark in the center slot is safe. At 'L' the same mark makes the code unscannable. The default is 'M', and 'H' when the 'logo' slot is filled.  A higher level holds fewer characters, so a value that fits at 'M' can be too long once a logo raises the level to 'H'. A value too long for the level draws no code, and the element fires 'error'. */
+  /** The code is drawn as one '<path>'. Runs of adjacent dark modules are joined, so a row of eight is one horizontal move. A code of useful length has about a thousand modules, and an element for each would be a thousand nodes for one image.  The element has 'role="img"' and an accessible name. Set the name to what the code is for. When you pass no name, the value is the name. Most codes hold a URL, and a URL read aloud gives the destination.  The quiet zone of four modules is required by the specification, and a scanner rejects a code cropped to its edge. It is drawn inside the 'viewBox', so it stays at any size, including a size set in CSS.  'correction' sets how much of the code can be lost. At 'H' a code can lose thirty percent and still scan, so a mark in the center slot is safe. At 'L' the same mark makes the code unscannable. The default is 'M', and 'H' when the 'logo' slot is filled.  A higher level holds fewer characters, so a value that fits at 'M' can be too long once a logo raises the level to 'H'. A value too long for the level draws no code, and the element fires 'error'.  'toSvg()', 'toPng()' and 'download()' give the drawn code as a file of its own, in the colors it is drawn in, for a page that offers it to save or print, as Zag's download trigger does. */
   "helix-headless-qr-code": DefineCustomElement<
     HelixHeadlessQrCode,
     HelixHeadlessQrCodeVueProps,
@@ -13497,7 +14573,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessQuoteVueProps,
     HelixHeadlessQuoteVueEvents
   >;
-  /** The group is the form control, and the radios are its options. A set of radios submits one answer, so the group owns the 'name', the 'value', and the validity. A radio outside a group is not a control. Checkboxes work the other way: each checkbox submits its own answer.  'MixinField' applies to the group for the same reason. The label, the hint, and the message describe the question, and the question belongs to the set.  Selection moves up and state moves down. A radio dispatches an event when it is chosen, the group determines whether the choice stands, and the group writes 'selected' onto every radio. The group is the one source of which radio is on.  'value' is the current answer. 'defaultValue' is what the markup declared: the value until something is chosen, and where a reset returns. The two work like 'checked' and 'defaultChecked'. */
+  /** The group is the form control, and the radios are its options. A set of radios submits one answer, so the group owns the 'name', the 'value', and the validity. A radio outside a group is not a control. Checkboxes work the other way: each checkbox submits its own answer.  'MixinField' applies to the group for the same reason. The label, the hint, and the message describe the question, and the question belongs to the set.  Selection moves up and state moves down. A radio dispatches an event when it is chosen, the group determines whether the choice stands, and the group writes 'selected' onto every radio. The group is the one source of which radio is on.  'value' is the current answer. 'defaultValue' is what the markup declared: the value until something is chosen, and where a reset returns. The two work like 'checked' and 'defaultChecked'.  A choice sends its events in this order: 'helix-select' from the radio, then, a microtask later and only if nobody refused it, 'helix-before-change' from the group, and once the value has moved, 'input' and 'change'. The microtask is what lets a listener you add to the group after it connected refuse the 'helix-select'. A native radio sends 'input' and 'change' in the same task as the click. */
   "helix-headless-radio-group": DefineCustomElement<
     HelixHeadlessRadioGroup,
     HelixHeadlessRadioGroupVueProps,
@@ -13509,13 +14585,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessRadioVueProps,
     HelixHeadlessRadioVueEvents
   >;
-  /** Supports half marks, so the value is not always an integer and the press targets are not the marks: five stars at a half step give ten places to press. The pointer handling and 'step' are built around half marks.  A partial mark is the full mark, clipped. The filled marks are drawn over the empty marks and cut off partway, so any mark and any fraction work.  A read-only rating displays a score, which is the most common use. It is announced as a displayed value and does not look disabled. */
+  /** Supports half marks, so the value is not always an integer and the press targets are not the marks: five stars at a half step give ten places to press. The pointer handling and 'step' are built around half marks.  A partial mark is the full mark, clipped. The filled marks are drawn over the empty marks and cut off partway, so any mark and any fraction work.  A read-only rating displays a score, which is the most common use. It is announced as a displayed value and does not look disabled.  With 'clearable', pressing the chosen score again, or Backspace or Delete on the marks, takes the rating back to unrated and sends 'helix-clear'. */
   "helix-headless-rating": DefineCustomElement<
     HelixHeadlessRating,
     HelixHeadlessRatingVueProps,
     HelixHeadlessRatingVueEvents
   >;
-  /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color.  Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them.  The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is 'aria-hidden'.  Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches.  The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction. */
+  /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color.  Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them.  The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from row to row in the table's order, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away.  Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches.  The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction. */
   "helix-headless-scatter-chart": DefineCustomElement<
     HelixHeadlessScatterChart,
     HelixHeadlessScatterChartVueProps,
@@ -13527,13 +14603,13 @@ 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.  In the open list the arrow keys, Home, End, PageUp, PageDown and typed letters move the highlight, and Enter, Space or a click chooses it and closes the list. Tab closes the list and moves on. On the closed trigger, ArrowDown, Enter and Space open the list on the chosen option, ArrowUp opens it on the chosen or last option, Home and End open it on the first or last, and typed letters choose the option whose words start with them, as a native '<select>' does. */
+  /** 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.  In the open list the arrow keys, Home, End, PageUp, PageDown and typed letters move the highlight, and Enter, Space or a click chooses it and closes the list. Tab closes the list and moves on. On the closed trigger, ArrowDown, Enter and Space open the list on the chosen option, ArrowUp opens it on the chosen or last option, Home and End open it on the first or last, and typed letters choose the option whose words start with them, as a native '<select>' does. */
   "helix-headless-select": DefineCustomElement<
     HelixHeadlessSelect,
     HelixHeadlessSelectVueProps,
     HelixHeadlessSelectVueEvents
   >;
-  /** A skeleton is hidden from screen readers unless it has a 'label'. An empty placeholder has nothing to say, and a page of them would be a page of unnamed shapes. Tell a screen reader that a region is loading on the region itself: set 'aria-busy="true"' on it while it loads, and put a 'Loader' or a status message in it. Set 'label' on one skeleton to have it read out by name, such as "Loading profile", when a reader reaches it. The role and the name are set through 'ElementInternals', which writes no attributes.  There is no 'shape' property. Whether a placeholder is a line, a block, or a circle is presentation, which belongs to the styled tier. */
+  /** A skeleton is hidden from screen readers unless it has a 'label'. An empty placeholder has nothing to say, and a page of them would be a page of unnamed shapes. Tell a screen reader that a region is loading on the region itself: set 'aria-busy="true"' on it while it loads, and put a 'Loader' or a status message in it. Set 'label' on one skeleton to have it read out by name, such as "Loading profile", when a reader reaches it. The role and the name are set through 'ElementInternals', which writes no attributes.  There is no 'shape' property. Whether a placeholder is a line, a block, or a circle is presentation, which belongs to the styled tier.  **Put the real content inside and set 'loading', and the skeleton takes its size.** While 'loading' is set the content is inert, the host is 'aria-busy', and the styled tier hides the content and paints the placeholder over its box, so nothing moves when the content arrives. Take 'loading' off and the content is shown as it is. An empty skeleton is a placeholder of its own size, as before. */
   "helix-headless-skeleton": DefineCustomElement<
     HelixHeadlessSkeleton,
     HelixHeadlessSkeletonVueProps,
@@ -13545,7 +14621,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.  'required' comes with the field mixin and cannot fail. A range is never empty: the platform shows its midpoint when no value is set, and 'willUpdate' seeds that midpoint into 'defaultValue', so the value matches the handle from the first render. HTML does not apply 'required' to a range either, so it is not set on the input. It only adds the marker beside the label. */
+  /** Renders a native '<input type="range">', so the drag, the arrow keys, Home, End, the page keys, and the touch target come from the platform. A native range has a hit area larger than its thumb, sized for a finger.  The value is a string, like every other form control's, and 'MixinControllerValue' holds text. Use 'valueAsNumber' for arithmetic.  Marks are drawn by the component. The ticks of a '<datalist>' cannot be styled, and Firefox does not render them for a range. Marks are decoration. 'step' sets where the value can land, and the input enforces it whether or not marks are drawn. 'markers' is a count, so a slider from zero to a hundred does not draw a hundred and one marks by accident.  A range with two thumbs is two inputs stacked on one track, because there is no native two-thumb range. Each thumb keeps its own value. 'min-steps-between-thumbs' keeps them that many steps apart.  '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. */
   "helix-headless-slider": DefineCustomElement<
     HelixHeadlessSlider,
     HelixHeadlessSliderVueProps,
@@ -13647,25 +14723,31 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTabVueProps,
     HelixHeadlessTabVueEvents
   >;
-  /** A label that people can optionally remove. 'dismissible' is the difference from a badge: a badge shows a state that people cannot change, and a tag names something they can remove.  The remove button sends 'helix-dismiss'. The tag does not remove itself, because your code owns the list it is in, so remove it in your handler. A listener can cancel 'helix-dismiss', and 'dismiss()' then returns 'false'. When the handler removes a tag whose remove button has focus, focus moves to the next tag's remove button, or to the previous one's after the last tag.  The remove button is named for its tag, such as "Remove Apple", so a list of buttons says which tag each one removes. Write '{label}' in 'dismiss-label' to put the tag's words somewhere else, such as 'dismiss-label="{label} entfernen"'. */
+  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over.  Name the set with 'label'. */
+  "helix-headless-tag-group": DefineCustomElement<
+    HelixHeadlessTagGroup,
+    HelixHeadlessTagGroupVueProps,
+    HelixHeadlessTagGroupVueEvents
+  >;
+  /** A label that people can optionally remove. 'dismissible' is the difference from a badge: a badge shows a state that people cannot change, and a tag names something they can remove.  The remove button sends 'helix-dismiss'. The tag does not remove itself, because your code owns the list it is in, so remove it in your handler. A listener can cancel 'helix-dismiss', and 'dismiss()' then returns 'false'. When the handler removes a tag whose remove button has focus, focus moves to the next tag's remove button, or to the previous one's after the last tag.  The remove button is named for its tag, such as "Remove Apple", so a list of buttons says which tag each one removes. Write '{label}' in 'dismiss-label' to put the tag's words somewhere else, such as 'dismiss-label="{label} entfernen"'.  'href' makes the label a link, and 'disabled' takes the tag out of reach: its link and its remove button stop answering.  **In a 'Tag.Group' a tag is a row of a grid.** The group gives it its role, its place in the one tab stop and, where the group selects, whether it is selected. Its remove button leaves the tab order there, Delete and Backspace doing its job from the row. */
   "helix-headless-tag": DefineCustomElement<
     HelixHeadlessTag,
     HelixHeadlessTagVueProps,
     HelixHeadlessTagVueEvents
   >;
-  /** Renders a '<textarea>', so the caret, selection, spellcheck, resize handle, and phone keyboard come from the platform. It is in the server markup, so the field works before any script loads.  It is a separate element from 'Input' because Enter inserts a line break here. In a single-line field, Enter submits the form.  'rows' sets the starting height, and 'auto-grow' makes the field grow with its content. You can use both: 'rows' sets where an empty field begins. */
+  /** Renders a '<textarea>', so the caret, selection, spellcheck, resize handle, and phone keyboard come from the platform. It is in the server markup, so the field works before any script loads.  It is a separate element from 'Input' because Enter inserts a line break here. In a single-line field, Enter submits the form.  'rows' sets the starting height, and 'auto-grow' makes the field grow with its content. You can use both: 'rows' sets where an empty field begins. 'max-rows' stops the growth at that many lines, and the field scrolls past them. */
   "helix-headless-textarea": DefineCustomElement<
     HelixHeadlessTextarea,
     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, 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. 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. */
+  /** 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. */
   "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.  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. 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. */
   "helix-headless-time-picker": DefineCustomElement<
     HelixHeadlessTimePicker,
     HelixHeadlessTimePickerVueProps,
@@ -13683,25 +14765,25 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTimelineVueProps,
     HelixHeadlessTimelineVueEvents
   >;
-  /** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses.  **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds.  **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
+  /** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses.  **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds.  **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. A 'danger' message is its own assertive live region, so it is announced at once; every other one is announced politely by the region.  A touch or a pen swipes a message toward the end of the line, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x'.  **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
   "helix-headless-toast-item": DefineCustomElement<
     HelixHeadlessToastItem,
     HelixHeadlessToastItemVueProps,
     HelixHeadlessToastItemVueEvents
   >;
-  /** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason.  **The region is polite, never assertive.** 'role="alert"' interrupts whatever a screen reader is reading. For something that cannot wait, use a 'Dialog', which stops the page for every user.  **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours.  There is no 'toast.show()'. For a 'toast()' function, write a small one over your app's state, which also lets you render the same messages on the server, in a test, or more than once.  **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog.  When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack. */
+  /** The region and its items are one family because a live region must be in the document before a message is added to it. Assistive technology often does not announce a region that arrives already holding its message. 'Radio.Group' is part of its family for the same reason.  **The region is a landmark named by 'label', and a polite live region.** A 'danger' message is announced assertively, and every other one politely. Each message is an 'alertdialog' named by its words, so a reader who moves into the stack hears which message they are on.  **'hotkey' takes focus to the stack and back**, F8 unless you set it, and 'label' says which key: '{hotkey}' in it is filled in, so the default name is "Notifications (F8)". Pressed while focus is in the stack, it gives focus back to where it was.  **The region never creates or removes items.** You render items and remove them. An item requests closing with a cancelable 'helix-dismiss' event. A dismissed item hides itself and stays in the DOM, so your framework's state and the DOM stay in sync. It hides on its own unless you set 'open', which makes the state yours.  **'add()' shows a message from script**, for a page with no framework state to render them from: it appends a message of the region's own tier and removes it once it has been dismissed and has finished leaving. Messages you render yourself stay yours, and the region never removes them. A touch or a pen swipes a message away toward the end of the line.  **The stack is in the top layer.** The 'region' part is a 'popover="manual"' shown while a message is showing, and shown again above a modal dialog that opened after it. Position the 'region' part, which is the box in the top layer. While a modal 'Dialog', 'Drawer' or 'Lightbox' is open, the browser makes everything outside it inert, the stack included, so a message stays visible and its actions cannot be pressed. Where the browser has 'ariaNotify', a message that arrives then is announced through it. For a message with an action, render a second region inside the dialog.  When a message with focus inside it is dismissed, focus moves to the next message, then the one before it, then back to where it was before it entered the stack. */
   "helix-headless-toast": DefineCustomElement<
     HelixHeadlessToast,
     HelixHeadlessToastVueProps,
     HelixHeadlessToastVueEvents
   >;
-  /** The indicator is one element that moves to the selected item. A single moving object is easier to follow than a fill that swaps, and it shows where the selection came from.  Its size and position are measured from the selected item and written to the indicator as custom properties, because labels have different lengths. Measurement happens on the client, so the server renders the indicator hidden and it fades in once measured. */
+  /** The indicator is one element that moves to the selected item. A single moving object is easier to follow than a fill that swaps, and it shows where the selection came from.  Its size and position are measured from the selected item and written to the indicator as custom properties, because labels have different lengths. Measurement happens on the client, so the server renders the indicator hidden and it fades in once measured.  'selection-mode="multiple"' makes the group a toolbar of buttons that each say whether they are pressed with 'aria-pressed', as React Aria's ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases one item, the arrow keys move focus without pressing, and 'value' is the pressed values, comma separated, which 'values' also gives as a list. The form receives one entry per pressed value. The indicator stays hidden, and each pressed item is marked with ':state(pressed)'.  'orientation="vertical"' runs the items down a column, says so to the accessibility tree, and the up and down arrows move between them. */
   "helix-headless-toggle-group": DefineCustomElement<
     HelixHeadlessToggleGroup,
     HelixHeadlessToggleGroupVueProps,
     HelixHeadlessToggleGroupVueEvents
   >;
-  /** Renders a '<button role="radio">' for use as a form control.  Do not use it for navigation. For navigation, use links marked with 'aria-current' and styled by the 'data-navigation-item' recipe in the base layer. The recipe has the same look, and links are not announced as choices. */
+  /** Renders a '<button role="radio">' for use as a form control. In a group with 'selection-mode="multiple"' it is a '<button>' that says whether it is pressed with 'aria-pressed'.  Do not use it for navigation. For navigation, use links marked with 'aria-current' and styled by the 'data-navigation-item' recipe in the base layer. The recipe has the same look, and links are not announced as choices. */
   "helix-headless-toggle": DefineCustomElement<
     HelixHeadlessToggle,
     HelixHeadlessToggleVueProps,
@@ -13713,19 +14795,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessToolbarVueProps,
     HelixHeadlessToolbarVueEvents
   >;
-  /** The trigger is slotted and stays your own element. The bubble renders in the top layer through the popover API, so an ancestor with 'overflow: hidden' does not clip it and no 'z-index' is needed. 'FloatingController' positions it and flips it to another side when the preferred side does not fit.  Wrapping the trigger is the convenient form. Use it where the trigger already has an accessible name, because the tooltip cannot describe a slotted trigger: an IDREF cannot cross a shadow boundary.  To add a description, place the tooltip beside the trigger and name the trigger with 'for':  '''html <helix-headless-button id="save" aria-describedby="save-tip">Save</helix-headless-button> <helix-headless-tooltip id="save-tip" for="save" content="Save your work"></helix-headless-tooltip> '''  Write the 'aria-describedby' yourself, pointing at the tooltip host. Setting it at runtime causes a hydration mismatch that React does not fix. With 'for', the tooltip warns once on first open if the attribute is missing.  The tooltip shows on hover and on focus. It hides on pointer leave, on blur, on Escape, and when the trigger is activated. The pointer can move from the trigger onto the bubble and the bubble stays.  Once one tooltip is showing, moving to another trigger shows its tooltip with no 'delay', and the first one hides. The same holds for 300 milliseconds after a tooltip hides. */
+  /** The trigger is slotted and stays your own element. The bubble renders in the top layer through the popover API, so an ancestor with 'overflow: hidden' does not clip it and no 'z-index' is needed. 'FloatingController' positions it and flips it to another side when the preferred side does not fit.  **The tooltip describes its trigger itself, in both forms.** Wrap the trigger, or place the tooltip beside it and name the trigger with 'for':  '''html <helix-headless-button id="save">Save</helix-headless-button> <helix-headless-tooltip for="save" content="Save your work"></helix-headless-tooltip> '''  The link is an element reference on the control that takes focus, and it is never written into your markup before a reader has acted. A trigger that is a Helix component is described at once, inside its own shadow root. A plain element in your markup is described when a reader first points at it or focuses it, which is after any hydration, and only where you have written no 'aria-describedby' or 'aria-labelledby' of your own. Write 'aria-describedby' pointing at the tooltip yourself to have the link in the server's markup. Where the browser has no element references, write it yourself; the tooltip warns once on first open if nothing links the two.  The tooltip shows on hover and on focus. It hides on pointer leave, on blur, on Escape, and when the trigger is activated. The pointer can move from the trigger onto the bubble and the bubble stays.  Once one tooltip is showing, moving to another trigger shows its tooltip with no 'delay', and the first one hides. The same holds for 'skip-delay' milliseconds after a tooltip hides, 300 unless you set it. 'show-on="focus"' shows the tooltip on keyboard focus only, for a hint a pointer does not need. */
   "helix-headless-tooltip": DefineCustomElement<
     HelixHeadlessTooltip,
     HelixHeadlessTooltipVueProps,
     HelixHeadlessTooltipVueEvents
   >;
-  /** The root holds the order of the stops: which stop is current, what Next and Back do, and when the tour is finished. Each stop holds its target, and you write all the text.  **The spotlight is a shadow.** The scrim is a box the size of the current target with a very large 'box-shadow' spread, and the shadow paints the darkness. A 'clip-path' on a full-screen scrim breaks as soon as an element between the scrim and the viewport is transformed.  The root measures the target's position in the browser. Nothing is measured on the server, because a tour starts only on request.  'open', 'default-open', 'helix-before-open', 'helix-before-close' and 'toggle' work as they do on 'Dialog'. Setting 'open' starts the run, and 'skip()' and 'requestOpen(false)' end it early.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes. */
+  /** The root holds the order of the stops: which stop is current, what Next and Back do, and when the tour is finished. Each stop holds its target, and you write all the text.  **The spotlight is a shadow.** The scrim is a box the size of the current target with a very large 'box-shadow' spread, and the shadow paints the darkness. A 'clip-path' on a full-screen scrim breaks as soon as an element between the scrim and the viewport is transformed.  The root measures the target's position in the browser. Nothing is measured on the server, because a tour starts only on request.  'open', 'default-open', 'helix-before-open', 'helix-before-close' and 'toggle' work as they do on 'Dialog'. Setting 'open' starts the run, and 'skip()' and 'requestOpen(false)' end it early.  Each stop is told its place in the run, from 'progress-label', such as "2 of 5". It describes the stop's panel, so a screen reader says it at every stop, and 'progress' draws it in the panel as well. A dialog or a floating stop, which has nothing to light, is shown over the 'backdrop' part. At a 'wait' stop the run waits for that stop's target to be on the page, and moves on by itself.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes. */
   "helix-headless-tour": DefineCustomElement<
     HelixHeadlessTour,
     HelixHeadlessTourVueProps,
     HelixHeadlessTourVueEvents
   >;
-  /** A stop names its target with 'for' and holds the content you put in it. The stop handles three things:  - **Placement.** The panel is anchored to the target by the same floating   positioning as the other Helix overlays. - **Stacking.** The panel is a popover, so it is in the top layer and shows   above dialogs, scrolling regions, and other stacking contexts. - **Visibility.** The stop shows when it is 'current', which the root sets.  Put any content in the stop, such as a 'Card', or a heading and a line of text. There are no fixed title or body parts.  **The buttons are slot fallback.** With nothing in the 'actions' slot, you get Back, Next, and Skip, already wired. Slot your own 'actions' and drive them with 'next()', 'back()', and 'skip()' on the root.  **'for' is an id, as with 'Tooltip'**, so you can point at a target elsewhere on the page from markup. It resolves against the stop's root node, so a stop inside a shadow tree points at a target in that tree.  The panel is a 'group', named by the first heading in the stop's content, and only while the stop is shown. 'focus()' moves focus to the panel, which is what the tour does when it opens or moves on. */
+  /** A stop names its target with 'for' and holds the content you put in it. The stop handles three things:  - **Placement.** The panel is anchored to the target by the same floating   positioning as the other Helix overlays. - **Stacking.** The panel is a popover, so it is in the top layer and shows   above dialogs, scrolling regions, and other stacking contexts. - **Visibility.** The stop shows when it is 'current', which the root sets.  Put any content in the stop, such as a 'Card', or a heading and a line of text. The 'heading' and 'description' slots are optional places for the title and the line under it, which then name and describe the panel.  **A stop has a type.** Without one it is a bubble pointing at its target. 'type="dialog"' is a panel in the middle of the window, over a backdrop, for a welcome or a summary with nothing to point at. 'type="floating"' is a panel in a corner of the window, which the styled tier puts at the end of the line, for a note that points at nothing in particular. 'type="wait"' shows nothing: the tour waits for the element 'for' names to be on the page, such as a menu the reader has to open, and moves on by itself.  **The buttons are slot fallback.** With nothing in the 'actions' slot, you get Back, Next, and Skip, already wired. Slot your own 'actions' and drive them with 'next()', 'back()', and 'skip()' on the root.  **'for' is an id, as with 'Tooltip'**, so you can point at a target elsewhere on the page from markup. It resolves against the stop's root node, so a stop inside a shadow tree points at a target in that tree.  The panel is a 'group', and a 'dialog' for a dialog stop, only while the stop is shown. It is named by the 'heading' slot, then by the first heading in the content, then by 'label', and otherwise by its place in the tour. It is described by the 'description' slot and by its place, such as "2 of 5", so a screen reader says where the reader is at every stop. 'focus()' moves focus to the panel, which is what the tour does when it opens or moves on. */
   "helix-headless-tour-stop": DefineCustomElement<
     HelixHeadlessTourStop,
     HelixHeadlessTourStopVueProps,