@fusion.dev/helix-headless 0.146.0 → 0.148.0

package/types/vue.d.ts

@@ -56,6 +56,7 @@ import type {
   HelixHeadlessDrilldownItem,
   HelixHeadlessDrilldown,
   HelixHeadlessEmpty,
+  FileStatus,
   HelixHeadlessFileInput,
   HelixHeadlessFilterChip,
   HelixHeadlessFilterField,
@@ -105,10 +106,13 @@ import type {
   HelixHeadlessOptionGroup,
   optionsAmong,
   HelixHeadlessOption,
+  HelixHeadlessOptionSeparator,
   HelixHeadlessOutline,
   HelixHeadlessPagination,
   HelixHeadlessPaginationSize,
   HelixHeadlessPaginationSummary,
+  PinCase,
+  PinType,
   HelixHeadlessPinInput,
   HelixHeadlessPopover,
   HelixHeadlessProgress,
@@ -125,6 +129,7 @@ import type {
   HelixHeadlessSkipLink,
   HelixHeadlessSlider,
   HelixHeadlessSparkline,
+  HelixHeadlessSpeedDialGroup,
   HelixHeadlessSpeedDialItem,
   HelixHeadlessSpeedDial,
   HelixHeadlessSplitter,
@@ -170,6 +175,7 @@ import type {
   ToggleEvent,
   HelixDismissEvent,
   HelixScrolledEvent,
+  HelixBeforeChangeEvent,
   HelixPressEvent,
   HelixBeforeMoveEvent,
   HelixBeforeReconnectEvent,
@@ -190,7 +196,6 @@ import type {
   HelixBeforePinEvent,
   HelixHistoryEvent,
   HelixPinEvent,
-  HelixBeforeChangeEvent,
   HelixBeforeToggleEvent,
   HelixCopyEvent,
   HelixSampleEndEvent,
@@ -229,6 +234,7 @@ import type {
   HelixMapTiltEvent,
   HelixMapZoomEvent,
   HelixToggleEvent,
+  HelixBandEvent,
   HelixReadEvent,
   HelixCompleteEvent,
   HelixPreviewEvent,
@@ -333,18 +339,16 @@ too. */
   /** Whether find in page searches the section while it is closed, and opens it
 on a match.
 
-Off by default. A closed section is then `hidden="until-found"`, which
-hides through `content-visibility`, so a stylesheet that animates the
-section closed shows an empty box for the length of that animation. The
-accordion's own `hidden-until-found` turns it on for every section. */
+Unset takes the accordion's `hidden-until-found`, which is on. Write
+`hidden-until-found="false"` to keep find in page out of this section: a
+closed section is then `hidden` and `inert`. */
   "hidden-until-found"?: (HelixHeadlessAccordionItem["hiddenUntilFound"]) | undefined;
   /** Whether find in page searches the section while it is closed, and opens it
 on a match.
 
-Off by default. A closed section is then `hidden="until-found"`, which
-hides through `content-visibility`, so a stylesheet that animates the
-section closed shows an empty box for the length of that animation. The
-accordion's own `hidden-until-found` turns it on for every section. */
+Unset takes the accordion's `hidden-until-found`, which is on. Write
+`hidden-until-found="false"` to keep find in page out of this section: a
+closed section is then `hidden` and `inert`. */
   hiddenUntilFound?: (HelixHeadlessAccordionItem["hiddenUntilFound"]) | undefined;
   /** A group name. Opening an item closes the other items with the same name,
 as `<details name>` does.
@@ -403,12 +407,18 @@ Unset is 3. An item's own `heading-level` wins over this. */
 Unset is 3. An item's own `heading-level` wins over this. */
   headingLevel?: (HelixHeadlessAccordion["headingLevel"]) | undefined;
   /** Whether find in page searches every closed section, and opens the one it
-matches in. Each item's own `hidden-until-found` turns it on for that item
-alone. */
+matches in.
+
+On by default, as in React Aria's disclosure. Write
+`hidden-until-found="false"` to turn it off for every section; an item's
+own `hidden-until-found` wins for that item. */
   "hidden-until-found"?: (HelixHeadlessAccordion["hiddenUntilFound"]) | undefined;
   /** Whether find in page searches every closed section, and opens the one it
-matches in. Each item's own `hidden-until-found` turns it on for that item
-alone. */
+matches in.
+
+On by default, as in React Aria's disclosure. Write
+`hidden-until-found="false"` to turn it off for every section; an item's
+own `hidden-until-found` wins for that item. */
   hiddenUntilFound?: (HelixHeadlessAccordion["hiddenUntilFound"]) | undefined;
   /** How many sections may be open at once.
 
@@ -444,6 +454,22 @@ export type HelixHeadlessAnnouncementVueProps = {
 Read once when the announcement is first rendered, as `Toast` reads its
 own. The clock stops while the pointer or focus is on the announcement. */
   duration?: (HelixHeadlessAnnouncement["duration"]) | undefined;
+  /** The key that moves focus to the announcement's first control, and back
+to where it was, written as keys joined by `+`, such as `F6` or `Alt+A`.
+
+F6 by default, the key React Aria's regions answer to. Empty turns it
+off. With several announcements, the first one in the page takes focus. */
+  hotkey?: (HelixHeadlessAnnouncement["hotkey"]) | undefined;
+  /** The name of the announcement's region, which screen readers list among
+the page's landmarks. Translate it with the rest of your interface.
+
+Empty leaves the announcement no region. */
+  label?: (HelixHeadlessAnnouncement["label"]) | undefined;
+  /** Whether the announcement waits its turn behind the queued announcements
+before it in the same parent, showing when the last of them is removed.
+
+Off by default, so every announcement on a page shows at once. */
+  queued?: (HelixHeadlessAnnouncement["queued"]) | undefined;
   /** The band's color.
 
 Paint only: unlike `Callout`, no value here draws a mark, changes the label,
@@ -561,6 +587,13 @@ The same three values `LineChart` takes, with the same fallback: a bare
 rather than under them, because the bands are opaque and a rule under one is
 a rule nobody sees. */
   gridlines?: (HelixHeadlessAreaChart["gridlines"]) | undefined;
+  /** Draws every band from zero, in front of the next, so a band's height is
+its own part's amount and not its place in a stack.
+
+Absent stacks the parts, so the top edge is the total. Set, the first
+column is in front and the scale fits the largest part. Reflected, because
+the styled tier lets the bands behind show through the ones in front. */
+  overlap?: (HelixHeadlessAreaChart["overlap"]) | undefined;
   /** Draws each reading as a hundred percent, so each band shows its share of
 the total.
 
@@ -672,6 +705,19 @@ 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;
+  /** The letters shown where no picture loaded, such as `GH`, in place of the
+ones taken from `name`.
+
+For a name whose initials are not its first and last letters, or an
+entity with a short mark of its own. Absent, the first letters of the
+first and last words of `name` are shown. */
+  initials?: (HelixHeadlessAvatar["initials"]) | undefined;
+  /** When the browser fetches the picture: `lazy` waits until it is near the
+screen, as an `<img loading="lazy">` does, and `eager` fetches it at once.
+
+Absent is the browser's own default, which is `eager`. `lazy` suits a long
+list of people, most of them off screen. */
+  loading?: (HelixHeadlessAvatar["loading"]) | undefined;
   /** Name of the person or entity.
 
 Used for the label and the initials. */
@@ -701,12 +747,28 @@ export type HelixHeadlessAvatarVueEvents = {
 };
 
 export type HelixHeadlessBadgeVueProps = {
+  /** `Intl.NumberFormat` options a count is written with, such as
+`{"notation":"compact"}` for `1.2K`, written as JSON in the attribute.
+
+Absent, a count is shown as it was given. Text that is not a number is
+shown as it is either way. */
+  "format-options"?: (HelixHeadlessBadge["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options a count is written with, such as
+`{"notation":"compact"}` for `1.2K`, written as JSON in the attribute.
+
+Absent, a count is shown as it was given. Text that is not a number is
+shown as it is either way. */
+  formatOptions?: (HelixHeadlessBadge["formatOptions"]) | undefined;
   /** The badge's name, read by screen readers.
 
 Required for a dot, which has no text to read. `{count}` is replaced with
 what the badge shows, so `label="{count} unread"` reads "8 unread" and
 stays current as `value` changes, with no label of yours to keep in step. */
   label?: (HelixHeadlessBadge["label"]) | undefined;
+  /** The locale a count is written in under `format-options`, such as `de`.
+
+Absent uses the runtime's own. */
+  locale?: (HelixHeadlessBadge["locale"]) | undefined;
   /** The largest number the badge shows.
 
 Past it the indicator reads `{max}+`. */
@@ -870,8 +932,19 @@ legend hid is not counted. */
 export type HelixHeadlessBarChartVueEvents = {};
 
 export type HelixHeadlessBlockquoteVueProps = {
-  /** The URL of the source the passage came from. */
+  /** Who said it, and where, as words, such as "Maria Lopez, operations
+manager". The `attribution` slot replaces them, for markup such as a link.
+
+Words are served with the figure they name, where a server cannot see a
+slotted attribution. */
+  attribution?: (HelixHeadlessBlockquote["attribution"]) | undefined;
+  /** The URL of the source the passage came from. Who said it goes in
+`attribution`: a `cite` with words in it warns once, with the runtime kind
+`cite-not-url`. */
   cite?: (HelixHeadlessBlockquote["cite"]) | undefined;
+  /** Whether to draw an opening quotation mark before the passage, in the
+element's language. Leave the marks out of the text. */
+  marks?: (HelixHeadlessBlockquote["marks"]) | undefined;
 };
 
 export type HelixHeadlessBlockquoteVueEvents = {};
@@ -935,6 +1008,15 @@ attribute would put the whole path into the markup twice. */
 
 export type HelixHeadlessBreadcrumbsVueEvents = {};
 
+/** `HelixHeadlessButtonGroup` component event */
+export type HelixHeadlessButtonGroupElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessButtonGroup,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixHeadlessButtonGroupHelixBeforeChangeElementEvent =
+  HelixHeadlessButtonGroupElementEvent<HelixBeforeChangeEvent>;
+
 export type HelixHeadlessButtonGroupVueProps = {
   /** The group's name, read by screen readers.
 
@@ -959,9 +1041,32 @@ buttons sharing edges as one shape, and a wrapped row carries the corners of
 a first row into a second. Stacked, the same three keep one shape and one
 column. */
   orientation?: (HelixHeadlessButtonGroup["orientation"]) | undefined;
+  /** Whether the buttons stay pressed: `single` keeps one pressed at a time and
+`multiple` any number. Unset, they are action buttons, each its own tab
+stop, as before.
+
+Optional, so the attribute is absent until a consumer writes it. */
+  "selection-mode"?: (HelixHeadlessButtonGroup["selectionMode"]) | undefined;
+  /** Whether the buttons stay pressed: `single` keeps one pressed at a time and
+`multiple` any number. Unset, they are action buttons, each its own tab
+stop, as before.
+
+Optional, so the attribute is absent until a consumer writes it. */
+  selectionMode?: (HelixHeadlessButtonGroup["selectionMode"]) | undefined;
+  /** The values of the pressed buttons, comma separated, in a selection mode.
+A button's own `value` names it, so a value holds no comma.
+
+The attribute is the seed, and a press changes the property, which does
+not reflect, as a native control's `value` does not. */
+  value?: (HelixHeadlessButtonGroup["value"]) | undefined;
 };
 
-export type HelixHeadlessButtonGroupVueEvents = {};
+export type HelixHeadlessButtonGroupVueEvents = {
+  /** Fired after a press changes `value`, in a selection mode. */
+  change: HelixHeadlessButtonGroupElementEvent;
+  /** Fired before a press changes `value`, with the value it would leave in `detail.value`. Cancelable: call `preventDefault()` to keep the buttons as they are. */
+  "helix-before-change": HelixHeadlessButtonGroupHelixBeforeChangeElementEvent;
+};
 
 /** `HelixHeadlessButton` component event */
 export type HelixHeadlessButtonElementEvent<E = Event> = TypedEvent<
@@ -995,33 +1100,23 @@ is the platform's `commandfor`. */
   commandFor?: (HelixHeadlessButton["commandFor"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
-**The five `form*` overrides work by writing the form and putting it back**,
-which is the only mechanism available and is closer to the platform than it
-sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-and it refuses ours twice over: the inner `<button>` is `type="button"` so
-it is not a submit button, and it sits in this shadow root so its form owner
-is not the consumer's form. Both throw. So the submission is started with no
-submitter and the overrides are applied to the form for the duration of it.
-
-The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-the window is one call and a `finally` closes it whether or not a listener
-refused. What a `submit` handler observes during that window is the form a
-native submitter would have given it, which is the point. */
+**The five `form*` overrides ride on a native submit button that stands in
+for this one**, because `requestSubmit(submitter)` refuses the inner
+`<button>` twice over: it is `type="button"`, and it sits in this shadow
+root, so its form owner is not the consumer's form. The stand-in is a
+hidden `<button type="submit">` in the form for the one synchronous call,
+so the platform applies the overrides to that submission alone and leaves
+the form as it was. See `submitAs`. */
   formaction?: (HelixHeadlessButton["formAction"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
-**The five `form*` overrides work by writing the form and putting it back**,
-which is the only mechanism available and is closer to the platform than it
-sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-and it refuses ours twice over: the inner `<button>` is `type="button"` so
-it is not a submit button, and it sits in this shadow root so its form owner
-is not the consumer's form. Both throw. So the submission is started with no
-submitter and the overrides are applied to the form for the duration of it.
-
-The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-the window is one call and a `finally` closes it whether or not a listener
-refused. What a `submit` handler observes during that window is the form a
-native submitter would have given it, which is the point. */
+**The five `form*` overrides ride on a native submit button that stands in
+for this one**, because `requestSubmit(submitter)` refuses the inner
+`<button>` twice over: it is `type="button"`, and it sits in this shadow
+root, so its form owner is not the consumer's form. The stand-in is a
+hidden `<button type="submit">` in the form for the one synchronous call,
+so the platform applies the overrides to that submission alone and leaves
+the form as it was. See `submitAs`. */
   formAction?: (HelixHeadlessButton["formAction"]) | undefined;
   /** How the submission is encoded, overriding the form's own. */
   formenctype?: (HelixHeadlessButton["formEnctype"]) | undefined;
@@ -1067,13 +1162,10 @@ a press, so focus stays where the reader left it. */
   /** The value this button submits under its own `name`, as a native submit
 button does.
 
-**Reported for exactly the submission this button starts and not otherwise.**
+**Sent with exactly the submission this button starts and not otherwise.**
 A native submit button contributes `name=value` only when it is the one
-that submitted, and every other button on the form contributes nothing. A
-form-associated element reporting a value continuously would contribute on
-every submission whoever started it, which is a different feature wearing
-the same name, so `submit` below sets it, submits, and clears it inside one
-synchronous call.
+that submitted, and every other button on the form contributes nothing,
+which is what the native button standing in for this one at submit does.
 
 `CopyButton` has a `value` of its own meaning the text to put on the
 clipboard, which is not this and is why it is declared there rather than
@@ -1458,6 +1550,20 @@ as the list.
 The list is joined the way the page's language joins one, "Second and
 Third", rather than with a comma this component chose. */
   leadsToLabel?: (HelixHeadlessCanvas["leadsToLabel"]) | undefined;
+  /** What screen readers hear after a key moves a card, with `{name}` for the
+card and `{x}` and `{y}` for where it now is, in the document's units.
+
+**A move a reader cannot see has to be said.** Shift with an arrow moved
+the card and said nothing, so a reader moving one by keys could not tell
+whether it had moved, or how far. */
+  "moved-label"?: (HelixHeadlessCanvas["movedLabel"]) | undefined;
+  /** What screen readers hear after a key moves a card, with `{name}` for the
+card and `{x}` and `{y}` for where it now is, in the document's units.
+
+**A move a reader cannot see has to be said.** Shift with an arrow moved
+the card and said nothing, so a reader moving one by keys could not tell
+whether it had moved, or how far. */
+  movedLabel?: (HelixHeadlessCanvas["movedLabel"]) | undefined;
   /** The order the arrow keys and screen readers move through the cards:
 `spatial` or `edges`.
 
@@ -1498,6 +1604,14 @@ walk the cards. */
   /** The text announced when a connection's end is picked up, with `{from}` and
 `{to}`. */
   reconnectingLabel?: (HelixHeadlessCanvas["reconnectingLabel"]) | undefined;
+  /** What screen readers hear after a key resizes a card, with `{name}` for the
+card and `{width}` and `{height}` for its new size, in the document's
+units. */
+  "resized-label"?: (HelixHeadlessCanvas["resizedLabel"]) | undefined;
+  /** What screen readers hear after a key resizes a card, with `{name}` for the
+card and `{width}` and `{height}` for its new size, in the document's
+units. */
+  resizedLabel?: (HelixHeadlessCanvas["resizedLabel"]) | undefined;
   /** The names of the selected cards and connections, comma separated. Empty
 when nothing is selected.
 
@@ -1518,6 +1632,43 @@ on its board across cards and connections both, and may not hold a comma.
 
 Written to select from outside, and read to act on the selection. */
   selected?: (HelixHeadlessCanvas["selected"]) | undefined;
+  /** What a selected card or connection adds to what screen readers hear on
+it, before its tone and its connections. Empty adds nothing.
+
+A card is an article and a connection a button, and neither has a selected
+state for `aria-selected` to carry, so the state is said in words. */
+  "selected-label"?: (HelixHeadlessCanvas["selectedLabel"]) | undefined;
+  /** What a selected card or connection adds to what screen readers hear on
+it, before its tone and its connections. Empty adds nothing.
+
+A card is an article and a connection a button, and neither has a selected
+state for `aria-selected` to carry, so the state is said in words. */
+  selectedLabel?: (HelixHeadlessCanvas["selectedLabel"]) | undefined;
+  /** What screen readers hear after the selection grows or shrinks, with
+`{count}` for how many cards and connections are selected: by Space, a
+click with Shift, Command or Control, Command or Control with A, a box
+drawn across the board, or Escape.
+
+A selection of one made by arriving on a card or clicking it is not said,
+since the card is. */
+  "selection-label"?: (HelixHeadlessCanvas["selectionLabel"]) | undefined;
+  /** What screen readers hear after the selection grows or shrinks, with
+`{count}` for how many cards and connections are selected: by Space, a
+click with Shift, Command or Control, Command or Control with A, a box
+drawn across the board, or Escape.
+
+A selection of one made by arriving on a card or clicking it is not said,
+since the card is. */
+  selectionLabel?: (HelixHeadlessCanvas["selectionLabel"]) | undefined;
+  /** Snaps the cards a reader moves or resizes to a multiple of this many of the
+document's units, such as `32` to land on the lines `grid` draws.
+
+**A drag lets go on the nearest line and a key goes to the next one.**
+Shift with an arrow moves a card to the next line that way, rather than
+by its step of 16, and Alt with an arrow moves its bottom right corner
+the same way. A group moves with what it carries, so a card inside one
+keeps its place in it. Absent, cards land where they are let go. */
+  snap?: (HelixHeadlessCanvas["snap"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   "stopped-label"?: (HelixHeadlessCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
@@ -1540,6 +1691,12 @@ red is "blocked" on one board and "urgent" on the next. A reader who can
 see the board is told by the color; this is how a reader who cannot is
 told the same. A tone left out is not read. */
   toneLabels?: (HelixHeadlessCanvas["toneLabels"]) | undefined;
+  /** What screen readers hear after a zoom button or key, with `{zoom}` for the
+zoom as a percentage, written the way the page's language writes one. */
+  "zoomed-label"?: (HelixHeadlessCanvas["zoomedLabel"]) | undefined;
+  /** What screen readers hear after a zoom button or key, with `{zoom}` for the
+zoom as a percentage, written the way the page's language writes one. */
+  zoomedLabel?: (HelixHeadlessCanvas["zoomedLabel"]) | undefined;
   /** The hint shown when a surface waiting to be pressed is scrolled or
 swiped over, with `gestures="activate"`. Absent is the family's own. */
   "activate-hint-label"?: (HelixHeadlessCanvas["activateHintLabel"]) | undefined;
@@ -2239,6 +2396,22 @@ export type HelixHeadlessChatHelixSendElementEvent =
   HelixHeadlessChatElementEvent<HelixSendEvent>;
 
 export type HelixHeadlessChatVueProps = {
+  /** Declarations for the turns from `turns` by each author, keyed by `author`,
+as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
+
+The message drawn for each turn by that author takes them as its `style`,
+so the custom properties a message reads, its fill, text color, radius and
+padding, change for that author alone. A turn by an author with no entry
+takes none, and looks as it did. JSON that does not parse is no entries. */
+  "author-styles"?: (HelixHeadlessChat["authorStyles"]) | undefined;
+  /** Declarations for the turns from `turns` by each author, keyed by `author`,
+as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
+
+The message drawn for each turn by that author takes them as its `style`,
+so the custom properties a message reads, its fill, text color, radius and
+padding, change for that author alone. A turn by an author with no entry
+takes none, and looks as it did. JSON that does not parse is no entries. */
+  authorStyles?: (HelixHeadlessChat["authorStyles"]) | undefined;
   /** Whether the transcript opens pinned to the bottom, when `pinned` is not
 set.
 
@@ -2615,11 +2788,19 @@ block lays out. Not for a diff, whose files each scroll on their own. */
   "expand-label"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
   /** The expand button's words while the cap hides lines. */
   expandLabel?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
-  /** The block's name, usually a file name or a language.
+  /** The block's name, usually a file name, drawn in the header.
 
-In a diff, each file is named from the patch, and this names a patch that
-carries no name of its own. */
+Absent, the block is named by `language` where there is one. 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;
+  /** The language the code is written in, such as `ts` or `css`, handed to
+`highlight` as its second argument.
+
+A block with no `label` is named by it, in the header and on the copy
+button, as a docs site names a snippet by its language. Absent hands
+`highlight` an empty string and names nothing. */
+  language?: (HelixHeadlessCodeBlock["language"]) | 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
@@ -2683,15 +2864,24 @@ than defaulted, so the host carries no attribute the consumer did not write. */
   /** 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. A `<pre>` and `<code>` around the whole of it, which
-Shiki writes, are taken off, so the lines sit level with the gutter's
-numbers and the block keeps one tab stop. Bind the language in the function you pass. The code
-stays in the slot, so the copy button copies it as written and a reader
-without the script still has it. Not called on a server, which has no code
-to read, nor for a diff. */
+Called with the code as written and the block's `language`, and returning
+HTML, such as the output of Shiki's `codeToHtml` or Prism's `highlight`.
+One function serves every block on a page, each block saying its own
+language:
+
+```js
+for (const block of document.querySelectorAll('helix-code-block')) {
+  block.highlight = (code, lang) => codeToHtml(code, { lang, theme: 'github-light' })
+}
+```
+
+**The markup is drawn as given**, so it has to escape the code it was
+handed, which those highlighters do. A `<pre>` and `<code>` around the
+whole of it, which Shiki writes, are taken off, so the lines sit level
+with the gutter's numbers and the block keeps one tab stop. 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;
 };
 
@@ -2797,6 +2987,9 @@ The trade is real and is the reason this is not the default: a swatch cannot
 be read or pasted into without opening the panel, which is worse for a form
 where the color is the answer rather than a setting. */
   variant?: (HelixHeadlessColorInput["variant"]) | undefined;
+  /** Draws the panel's hue as a wheel around the square, in place of the hue
+ramp. See Color Picker's `wheel`. */
+  wheel?: (HelixHeadlessColorInput["wheel"]) | undefined;
   /** The message shown when the field holds text the picker cannot read as a
 date, a time, or a color.
 
@@ -3025,13 +3218,6 @@ the color. */
   "eyedropper-label"?: (HelixHeadlessColorPicker["eyedropperLabel"]) | undefined;
   /** What the eyedropper is called. */
   eyedropperLabel?: (HelixHeadlessColorPicker["eyedropperLabel"]) | undefined;
-  /** A message under the picker, such as what is wrong with the color.
-
-While set, the picker is invalid and does not submit, as a field's
-`feedback` is, and the square and the value text are described by it.
-Color Input shows its own message here, so a reader in the open panel
-still sees it. */
-  feedback?: (HelixHeadlessColorPicker["feedback"]) | undefined;
   /** The syntax the value is written in: `hex`, `rgb`, or `hsl`.
 
 Only what is written. Everything is read whatever this says, so a picker on
@@ -3049,14 +3235,6 @@ Only what is written. Everything is read whatever this says, so a picker on
   "hue-label"?: (HelixHeadlessColorPicker["hueLabel"]) | undefined;
   /** What the hue channel is called. */
   hueLabel?: (HelixHeadlessColorPicker["hueLabel"]) | undefined;
-  /** Whether the current selection fails validation.
-
-A flag rather than a message, the split Date Picker also draws. A flat
-picker has no room of its own for a sentence: the field that wraps one owns
-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;
@@ -3210,6 +3388,27 @@ speaks it. Absent is the control's own sentence, in English. */
 named for the validity flag it reports, so a form in another language
 speaks it. Absent is the control's own sentence, in English. */
   valueMissingMessage?: (HelixHeadlessColorPicker["valueMissingMessage"]) | undefined;
+  /** Draws the hue as a wheel around the square, in place of the hue ramp, as
+React Aria's ColorWheel sits round its ColorArea.
+
+The ring is one stop, a slider a reader turns with the arrow keys, Home
+and End, the same way round in either writing direction, and a press or a
+drag on it takes the hue in that direction. Off, the picker keeps its
+ramp. */
+  wheel?: (HelixHeadlessColorPicker["wheel"]) | undefined;
+  /** A message under the picker, such as what is wrong with the answer.
+
+While set, the picker is invalid and does not submit, as a field's
+`feedback` is, it is marked invalid to a reader and to CSS, and the
+controls a reader answers with are described by it. */
+  feedback?: (HelixHeadlessColorPicker["feedback"]) | undefined;
+  /** Whether the answer fails validation, marked on the controls a reader
+answers with and as `:state(invalid)`.
+
+A flag a field that wraps the picker sets, since that field owns the
+label, the hint and the message; on its own, `feedback` both marks the
+picker and says why. */
+  invalid?: (HelixHeadlessColorPicker["invalid"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value,
 and to the `value` attribute where this one is not written, as a native
 control resets to the `value` it declares. */
@@ -3314,12 +3513,19 @@ 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.
+  /** What the browser may autofill, as a platform token such as `country`.
 
 **Defaults to `off`, which is not the platform's default and is the
 point.** The field filters a list rather than collecting a value, so a
 browser offering to fill it with a saved address is competing for the same
-keystrokes as the listbox. A consumer who wants autofill can still ask. */
+keystrokes as the listbox. A consumer who wants autofill can still ask.
+
+Set, a combobox whose answer is one of its options keeps a hidden native
+`<select>` with the same options for the browser to fill, as React Aria's
+combobox and Select do, and the option the browser picks, by its value or
+its words, becomes the value. The text field itself stays `off`, so the
+browser fills the answer and not the filter. With `allows-custom-value`
+the token goes on the text field, whose words are the answer. */
   autocomplete?: (HelixHeadlessCombobox["autocomplete"]) | undefined;
   /** Whether the user can add a value that is not in the list.
 
@@ -3358,12 +3564,14 @@ every keystroke. See Listbox's `filter-delay`. */
   /** The list's name, read by screen readers. The list has no visible name. */
   listLabel?: (HelixHeadlessCombobox["listLabel"]) | undefined;
   /** What the list says when its options could not be loaded, such as after a
-request to a server fails. Empty is no error. Passed to the list, which
-shows it under any options there are and tells screen readers. */
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it. Passed to the list, which shows it
+under any options there are and tells screen readers. */
   "load-error"?: (HelixHeadlessCombobox["loadError"]) | undefined;
   /** What the list says when its options could not be loaded, such as after a
-request to a server fails. Empty is no error. Passed to the list, which
-shows it under any options there are and tells screen readers. */
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it. Passed to the list, which shows it
+under any options there are and tells screen readers. */
   loadError?: (HelixHeadlessCombobox["loadError"]) | undefined;
   /** Whether the options are still loading.
 
@@ -3446,6 +3654,12 @@ two. */
 options. `{count}` is the count, and `Intl.PluralRules` picks between the
 two. */
   resultsLabel?: (HelixHeadlessCombobox["resultsLabel"]) | undefined;
+  /** What VoiceOver hears for a chosen option, as the highlight reaches it and
+once it is chosen, on Apple devices. `{name}` is the option's words. */
+  "selected-label"?: (HelixHeadlessCombobox["selectedLabel"]) | undefined;
+  /** What VoiceOver hears for a chosen option, as the highlight reaches it and
+once it is chosen, on Apple devices. `{name}` is the option's words. */
+  selectedLabel?: (HelixHeadlessCombobox["selectedLabel"]) | undefined;
   /** Whether the field completes the word as the user types.
 
 `suggest` rather than `autocomplete`, which is a real HTML attribute this
@@ -3624,7 +3838,9 @@ so a palette filtered on a server sends one `helix-filter` for a word.
 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`.
+  /** The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
+in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
+`alt` and `shift` the keys they name.
 
 Empty turns it off, for a consumer who opens the palette from a button or
 from their own shortcut handler. There is no list of defaults to fight
@@ -3633,12 +3849,14 @@ with: one key, said once. */
   /** Accessible name for the overlay, which has no visible heading. */
   label?: (HelixHeadlessCommand["label"]) | undefined;
   /** What the list says when its commands could not be loaded, such as after a
-request to a server fails. Empty is no error. Passed to the list, which
-shows it under any commands there are and tells screen readers. */
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it. Passed to the list, which shows it
+under any commands there are and tells screen readers. */
   "load-error"?: (HelixHeadlessCommand["loadError"]) | undefined;
   /** What the list says when its commands could not be loaded, such as after a
-request to a server fails. Empty is no error. Passed to the list, which
-shows it under any commands there are and tells screen readers. */
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it. Passed to the list, which shows it
+under any commands there are and tells screen readers. */
   loadError?: (HelixHeadlessCommand["loadError"]) | undefined;
   /** Whether the commands are still loading, for a palette that asks a server
 for them as the user types.
@@ -4299,7 +4517,11 @@ Saturday.
 Absent follows `locale`, where the engine knows the week of that language,
 and is Sunday otherwise. */
   firstDayOfWeek?: (HelixHeadlessDateInput["firstDayOfWeek"]) | undefined;
-  /** The language tag for the names of months and days in the calendar. */
+  /** The language tag for the field's order and words, and for the names of
+months and days in the calendar.
+
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixHeadlessDateInput["locale"]) | undefined;
   /** The latest date that can be chosen, as `YYYY-MM-DD`. */
   max?: (HelixHeadlessDateInput["max"]) | undefined;
@@ -4665,13 +4887,12 @@ Absent follows `locale`, where the engine knows the week of that language
 Absent follows `locale`, where the engine knows the week of that language
 (Firefox does not), and is Sunday otherwise. */
   firstDayOfWeek?: (HelixHeadlessDatePicker["firstDayOfWeek"]) | undefined;
-  /** Whether the current selection fails validation. */
-  invalid?: (HelixHeadlessDatePicker["invalid"]) | undefined;
   /** Accessible name for the grid. */
   label?: (HelixHeadlessDatePicker["label"]) | undefined;
-  /** Locale for month and day names.
+  /** Locale for month and day names, and the day a week starts on.
 
-Absent uses the runtime's own. */
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixHeadlessDatePicker["locale"]) | undefined;
   /** Latest selectable date, as `YYYY-MM-DD`. */
   max?: (HelixHeadlessDatePicker["max"]) | undefined;
@@ -4821,6 +5042,19 @@ filled in as the year on show. */
   /** The name of the heading where it shows a page of years, with `{heading}`
 filled in as the year on show. */
   yearViewLabel?: (HelixHeadlessDatePicker["yearViewLabel"]) | undefined;
+  /** A message under the picker, such as what is wrong with the answer.
+
+While set, the picker is invalid and does not submit, as a field's
+`feedback` is, it is marked invalid to a reader and to CSS, and the
+controls a reader answers with are described by it. */
+  feedback?: (HelixHeadlessDatePicker["feedback"]) | undefined;
+  /** Whether the answer fails validation, marked on the controls a reader
+answers with and as `:state(invalid)`.
+
+A flag a field that wraps the picker sets, since that field owns the
+label, the hint and the message; on its own, `feedback` both marks the
+picker and says why. */
+  invalid?: (HelixHeadlessDatePicker["invalid"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value,
 and to the `value` attribute where this one is not written, as a native
 control resets to the `value` it declares. */
@@ -4914,6 +5148,10 @@ The fallback of the `label` slot, so slotted content replaces it rather than
 appearing beside it. The value itself is the default slot: it is the half
 that varies and is often more than text. */
   label?: (HelixHeadlessDescriptionListItem["label"]) | undefined;
+  /** Says the values are several `<dd>` elements of your own, so the item
+draws no `<dd>` of its own around them, on the server too. Without it the
+item finds them once it runs, and the served markup wraps them until then. */
+  several?: (HelixHeadlessDescriptionListItem["several"]) | undefined;
 };
 
 export type HelixHeadlessDescriptionListItemVueEvents = {};
@@ -5054,20 +5292,23 @@ export type HelixHeadlessDialogVueEvents = {
 };
 
 export type HelixHeadlessDividerVueProps = {
-  /** Whether screen readers announce the line as a separator.
-
-Off by default, and out of the accessibility tree. Most rules on a page
-separate nothing: they underline a heading or close a section that space
-had already closed, and announcing every one as a separator is noise a
-screen-reader user has to walk past.
-
-An opt-in, not a `decorative` opt-out, because a boolean attribute cannot
-be turned off: `decorative="false"` parses as `true`, which would put the
-quiet default out of reach from HTML and leave it settable only as a
-property. An opt-in is absent by default, which every reflected property
-here has to be. */
+  /** Whether screen readers announce the line as a separator, which they now do
+by default.
+
+It dates from when the line was decorative by default. It is still read,
+and it wins over `decorative`, so a divider written with it stays a
+separator. */
   announced?: (HelixHeadlessDivider["announced"]) | undefined;
-  /** The direction the line runs: `horizontal` or `vertical`. */
+  /** Takes the line out of the accessibility tree, for a rule that separates
+nothing: one under a heading, or between the facts of a byline.
+
+Absent, the line is a separator, as `<hr>` is. Radix Separator's opt-out
+has the same name. It turns the role off because a boolean attribute that
+is on by default cannot be turned off from HTML. */
+  decorative?: (HelixHeadlessDivider["decorative"]) | undefined;
+  /** The direction the line runs: `horizontal` or `vertical`.
+
+Unset is horizontal, or across the toolbar the divider sits in. */
   orientation?: (HelixHeadlessDivider["orientation"]) | undefined;
 };
 
@@ -5387,6 +5628,21 @@ export type HelixHeadlessDrilldownVueEvents = {
 };
 
 export type HelixHeadlessEmptyVueProps = {
+  /** The heading as words, such as "No results", drawn as a heading when
+nothing is slotted into `heading`.
+
+Absent draws none, and the `heading` slot is the only heading. */
+  heading?: (HelixHeadlessEmpty["heading"]) | undefined;
+  /** The level of the heading `heading` draws, from 1 to 6.
+
+Absent is 3, the level of a heading inside a page's section. Set it to fit
+the outline the empty view sits in. A slotted heading keeps its own. */
+  "heading-level"?: (HelixHeadlessEmpty["headingLevel"] | `${number}`) | undefined;
+  /** The level of the heading `heading` draws, from 1 to 6.
+
+Absent is 3, the level of a heading inside a page's section. Set it to fit
+the outline the empty view sits in. A slotted heading keeps its own. */
+  headingLevel?: (HelixHeadlessEmpty["headingLevel"]) | undefined;
   /** Whether the state is announced when it appears.
 
 On by default: an empty view almost always replaces something that was
@@ -5448,6 +5704,12 @@ refused. */
   maxFileSize?: (HelixHeadlessFileInput["maxFileSize"]) | undefined;
   /** Whether more than one file can be chosen. */
   multiple?: (HelixHeadlessFileInput["multiple"]) | undefined;
+  /** The name of a file's progress bar, read by screen readers, with `{name}`
+filled in. A label with no `{name}` has it added after it. */
+  "progress-label"?: (HelixHeadlessFileInput["progressLabel"]) | undefined;
+  /** The name of a file's progress bar, read by screen readers, with `{name}`
+filled in. A label with no `{name}` has it added after it. */
+  progressLabel?: (HelixHeadlessFileInput["progressLabel"]) | undefined;
   /** What a reader hears when files are refused, with `{count}` and `{names}`
 filled in. */
   "rejected-text"?: (HelixHeadlessFileInput["rejectedText"]) | undefined;
@@ -5947,6 +6209,25 @@ 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;
+  /** Draws each field of a date in a part of its own: `weekday`, `day`,
+`month`, `year`, `era`, `hour`, `minute`, `second`, `day-period` and
+`time-zone-name`, so `::part(year)` can set the year apart.
+
+Off by default, which draws the date as one run of text, as Shoelace and
+Web Awesome do. An `elapsed` or `relative` reading is one phrase either
+way. */
+  fields?: (HelixHeadlessFormatDate["fields"]) | undefined;
+  /** Draws an `elapsed` or `relative` reading once and leaves it, where it
+would otherwise move on as it goes stale.
+
+For a reading that describes a moment the page itself is about, such as
+"3 hours ago" in a report generated then, or a list a reader compares
+line by line while it should not change under them. The reading is taken
+when the element draws, and again whenever `date` or another option
+changes. Turned off, the reading catches up and moves on again.
+`sl-relative-time` and `wa-relative-time` keep still unless `sync` is
+set; this keeps moving unless `frozen` is. */
+  frozen?: (HelixHeadlessFormatDate["frozen"]) | 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,
@@ -5963,7 +6244,8 @@ reader the same clock whatever their language. */
   hourCycle?: (HelixHeadlessFormatDate["hourCycle"]) | undefined;
   /** The locale to format the timestamp in.
 
-Empty is the runtime's own. */
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixHeadlessFormatDate["locale"]) | undefined;
   /** How the minute is written, where a time of day is shown. */
   minute?: (HelixHeadlessFormatDate["minute"]) | undefined;
@@ -6315,6 +6597,9 @@ export type HelixHeadlessHeatmapElementEvent<E = Event> = TypedEvent<
   HelixHeadlessHeatmap,
   E
 >;
+/** `helix-before-change` event type */
+export type HelixHeadlessHeatmapHelixBeforeChangeElementEvent =
+  HelixHeadlessHeatmapElementEvent<HelixBeforeChangeEvent>;
 /** `helix-resize` event type */
 export type HelixHeadlessHeatmapHelixResizeElementEvent =
   HelixHeadlessHeatmapElementEvent<HelixResizeEvent>;
@@ -6381,6 +6666,28 @@ calendar heatmap does: a week is a column, so the strip reads along the
 line in weeks, from the right on a right-to-left page, and top to bottom in
 days. */
   rows?: (HelixHeadlessHeatmap["rows"]) | undefined;
+  /** What the readout adds for a selected cell, under `selection-mode`, after
+where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
+nothing. */
+  "selected-label"?: (HelixHeadlessHeatmap["selectedLabel"]) | undefined;
+  /** What the readout adds for a selected cell, under `selection-mode`, after
+where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
+nothing. */
+  selectedLabel?: (HelixHeadlessHeatmap["selectedLabel"]) | undefined;
+  /** What the `selection` part says after the selection changes, with `{count}` for
+how many cells are selected. */
+  "selection-label"?: (HelixHeadlessHeatmap["selectionLabel"]) | undefined;
+  /** What the `selection` part says after the selection changes, with `{count}` for
+how many cells are selected. */
+  selectionLabel?: (HelixHeadlessHeatmap["selectionLabel"]) | undefined;
+  /** How many cells a reader can select: `single` or `multiple`.
+
+Absent selects nothing, and a press or Space does what it did. */
+  "selection-mode"?: (HelixHeadlessHeatmap["selectionMode"]) | undefined;
+  /** How many cells a reader can select: `single` or `multiple`.
+
+Absent selects nothing, and a press or Space does what it did. */
+  selectionMode?: (HelixHeadlessHeatmap["selectionMode"]) | undefined;
   /** Lower bounds for the tone buckets, in the order the tones are given.
 
 `thresholds="1 3 6 9"` with `tones="1 2 3 4"` puts 1 and 2 in the ramp's
@@ -6403,6 +6710,12 @@ no order in it. */
   "total-label"?: (HelixHeadlessHeatmap["totalLabel"]) | undefined;
   /** The word the `overview` puts before the total of the readings drawn. */
   totalLabel?: (HelixHeadlessHeatmap["totalLabel"]) | undefined;
+  /** The selected cells, by the names their rows have in the table, such as
+`2026-06-11`, separated by commas.
+
+Set it to start with cells selected. Written by a press or a key under
+`selection-mode`. */
+  value?: (HelixHeadlessHeatmap["value"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -6442,6 +6755,10 @@ legend hid is not counted. */
 };
 
 export type HelixHeadlessHeatmapVueEvents = {
+  /** Fired once a press or a key has changed which cells are selected. */
+  change: HelixHeadlessHeatmapElementEvent;
+  /** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
+  "helix-before-change": HelixHeadlessHeatmapHelixBeforeChangeElementEvent;
   /** Fired when the number of cells drawn changes, with the new number. */
   "helix-resize": HelixHeadlessHeatmapHelixResizeElementEvent;
 };
@@ -6478,33 +6795,23 @@ is the platform's `commandfor`. */
   commandFor?: (HelixHeadlessIconButton["commandFor"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
-**The five `form*` overrides work by writing the form and putting it back**,
-which is the only mechanism available and is closer to the platform than it
-sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-and it refuses ours twice over: the inner `<button>` is `type="button"` so
-it is not a submit button, and it sits in this shadow root so its form owner
-is not the consumer's form. Both throw. So the submission is started with no
-submitter and the overrides are applied to the form for the duration of it.
-
-The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-the window is one call and a `finally` closes it whether or not a listener
-refused. What a `submit` handler observes during that window is the form a
-native submitter would have given it, which is the point. */
+**The five `form*` overrides ride on a native submit button that stands in
+for this one**, because `requestSubmit(submitter)` refuses the inner
+`<button>` twice over: it is `type="button"`, and it sits in this shadow
+root, so its form owner is not the consumer's form. The stand-in is a
+hidden `<button type="submit">` in the form for the one synchronous call,
+so the platform applies the overrides to that submission alone and leaves
+the form as it was. See `submitAs`. */
   formaction?: (HelixHeadlessIconButton["formAction"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
-**The five `form*` overrides work by writing the form and putting it back**,
-which is the only mechanism available and is closer to the platform than it
-sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-and it refuses ours twice over: the inner `<button>` is `type="button"` so
-it is not a submit button, and it sits in this shadow root so its form owner
-is not the consumer's form. Both throw. So the submission is started with no
-submitter and the overrides are applied to the form for the duration of it.
-
-The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-the window is one call and a `finally` closes it whether or not a listener
-refused. What a `submit` handler observes during that window is the form a
-native submitter would have given it, which is the point. */
+**The five `form*` overrides ride on a native submit button that stands in
+for this one**, because `requestSubmit(submitter)` refuses the inner
+`<button>` twice over: it is `type="button"`, and it sits in this shadow
+root, so its form owner is not the consumer's form. The stand-in is a
+hidden `<button type="submit">` in the form for the one synchronous call,
+so the platform applies the overrides to that submission alone and leaves
+the form as it was. See `submitAs`. */
   formAction?: (HelixHeadlessIconButton["formAction"]) | undefined;
   /** How the submission is encoded, overriding the form's own. */
   formenctype?: (HelixHeadlessIconButton["formEnctype"]) | undefined;
@@ -6550,13 +6857,10 @@ a press, so focus stays where the reader left it. */
   /** The value this button submits under its own `name`, as a native submit
 button does.
 
-**Reported for exactly the submission this button starts and not otherwise.**
+**Sent with exactly the submission this button starts and not otherwise.**
 A native submit button contributes `name=value` only when it is the one
-that submitted, and every other button on the form contributes nothing. A
-form-associated element reporting a value continuously would contribute on
-every submission whoever started it, which is a different feature wearing
-the same name, so `submit` below sets it, submits, and clears it inside one
-synchronous call.
+that submitted, and every other button on the form contributes nothing,
+which is what the native button standing in for this one at submit does.
 
 `CopyButton` has a `value` of its own meaning the text to put on the
 clipboard, which is not this and is why it is declared there rather than
@@ -6789,7 +7093,12 @@ the *first* update mirrors to a custom state instead, which is what
 `:state(open)` and `:state(checked)` are.
 
 `loading` writes nothing, because it is where every image starts and the
-resting state of a mirror is the attribute's absence. */
+resting state of a mirror is the attribute's absence.
+
+**Kept beside the custom states, and what the styled tier draws from.** An
+engine without `CustomStateSet`, Safari before 17.4 and Firefox before
+126, records no state, and a picture faded in by `:state(loaded)` alone
+would stay transparent there for good. A sheet of your own can read either. */
   status?: (HelixHeadlessImage["status"]) | undefined;
 };
 
@@ -7037,6 +7346,13 @@ export type HelixHeadlessKbdHelixShortcutElementEvent =
   HelixHeadlessKbdElementEvent<HelixShortcutEvent>;
 
 export type HelixHeadlessKbdVueProps = {
+  /** What the chord does to the control `for` names once it is pressed:
+`focus` moves focus to the control and `click` presses it.
+
+Unset, the chord sends `helix-shortcut` and does nothing else, for a page
+that acts on the event itself. It acts only where `within` listens, after
+`helix-shortcut`, and not when a listener cancels that event. */
+  activate?: (HelixHeadlessKbd["activate"]) | undefined;
   /** Draws a chord under `keys` as one key per key, each a `key` part with a
 `separator` part between two where the platform writes a `+`, as GitHub
 and most docs draw `Ctrl` `K`.
@@ -7141,14 +7457,18 @@ shadow root reads a table in that root rather than one in the document.
 
 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. */
+space. For a ring the names are the rows. An array of names set on the
+property works too, as React sets `hiddenSeries={['Direct']}`; a toggle
+writes the list back as a string. */
   "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. */
+space. For a ring the names are the rows. An array of names set on the
+property works too, as React sets `hiddenSeries={['Direct']}`; a toggle
+writes the list back as a string. */
   hiddenSeries?: (HelixHeadlessLegend["hiddenSeries"]) | undefined;
   /** The name of the list, which a screen reader announces before its entries.
 
@@ -7207,12 +7527,14 @@ export type HelixHeadlessLightboxToggleElementEvent =
   HelixHeadlessLightboxElementEvent<ToggleEvent>;
 
 export type HelixHeadlessLightboxVueProps = {
-  /** Draws the viewer's own previous, next and close controls over the picture.
+  /** Draws the viewer's own previous, next and close controls over the picture,
+and zoom-out and zoom-in controls where `max-zoom` allows zooming.
 
 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`. */
+reader is idle, the previous and next ones say they are unavailable at
+either end of a set that does not `loop`, and the zoom ones at either end
+of the scale. */
   controls?: (HelixHeadlessLightbox["controls"]) | undefined;
   /** Draws the place of the shown item in the set over the picture, in the
 words of `status-label`, such as "2 of 5". It hides with the controls while
@@ -7285,6 +7607,20 @@ Announced rather than only drawn, because the picture changing under a
 reader who cannot see it is otherwise silent. A consumer who has their own
 counter in the chrome can empty this and say it themselves. */
   statusLabel?: (HelixHeadlessLightbox["statusLabel"]) | undefined;
+  /** The zoom-in control's accessible name. */
+  "zoom-in-label"?: (HelixHeadlessLightbox["zoomInLabel"]) | undefined;
+  /** The zoom-in control's accessible name. */
+  zoomInLabel?: (HelixHeadlessLightbox["zoomInLabel"]) | undefined;
+  /** The zoom-out control's accessible name. */
+  "zoom-out-label"?: (HelixHeadlessLightbox["zoomOutLabel"]) | undefined;
+  /** The zoom-out control's accessible name. */
+  zoomOutLabel?: (HelixHeadlessLightbox["zoomOutLabel"]) | undefined;
+  /** What the live region says once a reader has stopped zooming, with the
+scale as a whole `{percent}` filled in. Empty it to say nothing. */
+  "zoom-status-label"?: (HelixHeadlessLightbox["zoomStatusLabel"]) | undefined;
+  /** What the live region says once a reader has stopped zooming, with the
+scale as a whole `{percent}` filled in. Empty it to say nothing. */
+  zoomStatusLabel?: (HelixHeadlessLightbox["zoomStatusLabel"]) | undefined;
   /** The `value` of the current item.
 
 Not `option.active`, which is the option the keyboard is on: that is a
@@ -7369,6 +7705,13 @@ sum can pass under the curve fitted through the sum beneath it, so a
 smoothed stack can draw a part as less than nothing. There is no such edge
 here, which is what lets a line take the reading aid. */
   curve?: (HelixHeadlessLineChart["curve"]) | undefined;
+  /** The series drawn as a dashed line, by their headings, separated by
+commas: `dashed="Forecast, Target"`.
+
+For a series that is not a reading, such as a forecast or a goal, drawn
+beside the ones that are. Each takes a `line-dashed` part beside `line`,
+which a stylesheet draws dashed. Absent, every line is solid. */
+  dashed?: (HelixHeadlessLineChart["dashed"]) | undefined;
   /** Which rules are drawn across the plot, if any.
 
 Absent draws none, which is the honest default rather than a timid one: a
@@ -7631,12 +7974,16 @@ export type HelixHeadlessListboxHelixLoadMoreElementEvent =
   HelixHeadlessListboxElementEvent<HelixLoadMoreEvent>;
 
 export type HelixHeadlessListboxVueProps = {
-  /** What the browser may autofill in the text field, as a platform token.
+  /** What a browser's autofill may choose, as a platform token such as
+`country` or `cc-exp-month`, as a native `<select>` takes it.
 
-**Defaults to `off`, which is not the platform's default and is the
-point.** The field filters a list rather than collecting a value, so a
-browser offering to fill it with a saved address is competing for the same
-keystrokes as the listbox. A consumer who wants autofill can still ask. */
+Set, the list draws a hidden native `<select>` with the same options for
+the browser to fill, as React Aria's `HiddenSelect` does, and a fill
+chooses the option. `off`, the default, draws none.
+
+**The filter field is never filled.** It narrows the list rather than
+collecting a value, so a browser offering it a saved address competes
+with the reader for the same keystrokes: it is always `off`. */
   autocomplete?: (HelixHeadlessListbox["autocomplete"]) | undefined;
   /** The filter text the list starts with, when `filter` is not set. */
   "default-filter"?: (HelixHeadlessListbox["defaultFilter"]) | undefined;
@@ -7690,14 +8037,27 @@ act on the list the reader expects. */
   "filter-label"?: (HelixHeadlessListbox["filterLabel"]) | undefined;
   /** Placeholder text for the filter field. */
   filterLabel?: (HelixHeadlessListbox["filterLabel"]) | undefined;
+  /** How the options are laid out, which the arrow keys follow: `stack`, one
+under another, or `grid`, in rows and columns, as React Aria's `ListBox`
+lays out cards or photos. With `grid`, Up and Down move within a column,
+and Left and Right along the list, mirrored right to left.
+
+The columns are the stylesheet's: the styled tier draws them at
+`--listbox-column-min-inline-size` or wider, and a headless list lays out
+`::part(items)` as it likes, since the keys read where each option is
+drawn. A list of `items` stays a stack. Left out, the list is a stack,
+and the host carries no attribute for it. */
+  layout?: (HelixHeadlessListbox["layout"]) | undefined;
   /** What the list says when its options could not be loaded, such as after a
-request to a server fails. Empty is no error.
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it.
 
 Set, it shows under any options there are, in place of `empty-text` and
 `loading-text`, and a screen reader hears it. Clear it when you ask again. */
   "load-error"?: (HelixHeadlessListbox["loadError"]) | undefined;
   /** What the list says when its options could not be loaded, such as after a
-request to a server fails. Empty is no error.
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it.
 
 Set, it shows under any options there are, in place of `empty-text` and
 `loading-text`, and a screen reader hears it. Clear it when you ask again. */
@@ -7741,6 +8101,12 @@ options. `{count}` is the count.
 pair: a language with more forms than two picks the one for its `one` and
 writes the rest here. */
   resultsLabel?: (HelixHeadlessListbox["resultsLabel"]) | undefined;
+  /** What VoiceOver hears as the highlight reaches a chosen option from the
+filter field, on Apple devices. `{name}` is the option's words. */
+  "selected-label"?: (HelixHeadlessListbox["selectedLabel"]) | undefined;
+  /** What VoiceOver hears as the highlight reaches a chosen option from the
+filter field, on Apple devices. `{name}` is the option's words. */
+  selectedLabel?: (HelixHeadlessListbox["selectedLabel"]) | undefined;
   /** Whether the rows are still loading.
 
 Reflected, because a stylesheet needs it: the rows that are already there
@@ -7822,6 +8188,23 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessListbox["name"]) | undefined;
+  /** The options as data, for a list too long to draw whole: each a value,
+which is also its words, or a record with a `value`, a `label` and
+`disabled`. Set, the list draws only the options in sight, and the ones
+you write as children are not read.
+
+**Every option is still reachable.** The keyboard, the typeahead, the
+filter and the value work over the whole set, and the option the keyboard
+is on is drawn wherever it is, so a screen reader is told about it. Each
+drawn option says its place in the set (`aria-posinset`, `aria-setsize`).
+React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
+`VirtualizeController`.
+
+**The list needs a height to scroll in**: the styled tier's
+`--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
+headless tier. Import the Option family as well, whose elements are drawn.
+A server sends the list empty, and the options are drawn once it hydrates. */
+  items?: (HelixHeadlessListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
 
 `<select>`'s own pair, and this control is what stands in for one. The
@@ -8903,6 +9286,15 @@ slot replaces it. */
 
 export type HelixHeadlessMenuSectionVueEvents = {};
 
+/** `HelixHeadlessMeter` component event */
+export type HelixHeadlessMeterElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessMeter,
+  E
+>;
+/** `helix-band` event type */
+export type HelixHeadlessMeterHelixBandElementEvent =
+  HelixHeadlessMeterElementEvent<HelixBandEvent>;
+
 export type HelixHeadlessMeterVueProps = {
   /** Sets the band directly, for a rule that `low`, `high`, and `optimum` cannot
 express.
@@ -8932,6 +9324,16 @@ stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
 part names, so reflecting here would write an attribute onto the host for
 no reader. */
   band?: (HelixHeadlessMeter["band"]) | undefined;
+  /** The words each band is said with under `live`, by its name, written as
+JSON in the attribute: `band-labels='{"poor":"Almost full"}'`.
+
+A band left out keeps its default: "Good", "Fair" or "Poor". */
+  "band-labels"?: (HelixHeadlessMeter["bandLabels"]) | undefined;
+  /** The words each band is said with under `live`, by its name, written as
+JSON in the attribute: `band-labels='{"poor":"Almost full"}'`.
+
+A band left out keeps its default: "Good", "Fair" or "Poor". */
+  bandLabels?: (HelixHeadlessMeter["bandLabels"]) | undefined;
   /** `Intl.NumberFormat` options the reading is written with, as React Aria's
 Meter and ProgressBar take them: a unit, a currency, or a number of
 decimals. Written as JSON in the attribute.
@@ -8967,6 +9369,13 @@ Absent leaves the range unbanded. */
 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;
+  /** Says the reading in a polite `live` region each time it moves into
+another band, with the band's word, such as "92%, Poor".
+
+For a meter whose value changes while it is on screen. Off by default,
+because a meter that reads a fixed level has nothing new to say. A meter
+with no bands says nothing. */
+  live?: (HelixHeadlessMeter["live"]) | undefined;
   /** The locale the percentage is written in, such as `fr` for `72 %`.
 
 Absent uses the runtime's own. */
@@ -9032,7 +9441,10 @@ fair summary of a task and a poor one of a quantity. */
   valueText?: (HelixHeadlessMeter["valueText"]) | undefined;
 };
 
-export type HelixHeadlessMeterVueEvents = {};
+export type HelixHeadlessMeterVueEvents = {
+  /** Fired when the reading moves into another band, with the band it is in now, or `''` where it is in none. Not sent on the first render, since a meter that arrives in a band has not moved. */
+  "helix-band": HelixHeadlessMeterHelixBandElementEvent;
+};
 
 export type HelixHeadlessNavigationVueProps = {
   /** Whether the arrow keys move focus between the destinations.
@@ -9211,6 +9623,20 @@ export type HelixHeadlessNotificationsHelixReadElementEvent =
 export type HelixHeadlessNotificationsVueProps = {
   /** The feed's name, read by screen readers. */
   label?: (HelixHeadlessNotifications["label"]) | undefined;
+  /** What the feed says when a page of it could not be loaded, such as after a
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it.
+
+Set, it shows under the rows there are, in place of `empty-text` and
+`loading-text`, and a screen reader hears it. Clear it when you ask again. */
+  "load-error"?: (HelixHeadlessNotifications["loadError"]) | undefined;
+  /** What the feed says when a page of it could not be loaded, such as after a
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it.
+
+Set, it shows under the rows there are, in place of `empty-text` and
+`loading-text`, and a screen reader hears it. Clear it when you ask again. */
+  loadError?: (HelixHeadlessNotifications["loadError"]) | undefined;
   /** Whether to draw a button after the list that asks for the next page, by
 sending `helix-load-more`. Take it off once there is nothing more. */
   "load-more"?: (HelixHeadlessNotifications["loadMore"]) | undefined;
@@ -9374,7 +9800,13 @@ than states: a duration, a weight, a count they are looking for rather than
 one they already know. */
   scrub?: (HelixHeadlessNumberInput["scrub"]) | undefined;
   /** How far one step moves. A value off the step grid, counted from `min`, is
-invalid, as it is in a native number field. */
+invalid, as it is in a native number field.
+
+Unset, a step moves by one, or by one percent under a percent format, and
+a typed number is rounded to the smallest amount `format-options` shows
+rather than to whole steps, as React Aria's NumberField does: a field
+showing dollars keeps the cents typed into it. Without `format-options`
+the grid is whole numbers, as in a native number field. */
   step?: (HelixHeadlessNumberInput["step"]) | undefined;
   /** The message the browser shows when the number is off the step grid, with
 `{below}` and `{above}` filled in with the nearest valid values. */
@@ -9841,6 +10273,10 @@ export type HelixHeadlessOptionVueEvents = {
   "helix-select": HelixHeadlessOptionHelixSelectElementEvent;
 };
 
+export type HelixHeadlessOptionSeparatorVueProps = {};
+
+export type HelixHeadlessOptionSeparatorVueEvents = {};
+
 /** `HelixHeadlessOutline` component event */
 export type HelixHeadlessOutlineElementEvent<E = Event> = TypedEvent<
   HelixHeadlessOutline,
@@ -10169,12 +10605,9 @@ export type HelixHeadlessPinInputHelixCompleteElementEvent =
   HelixHeadlessPinInputElementEvent<HelixCompleteEvent>;
 
 export type HelixHeadlessPinInputVueProps = {
-  /** The autofill hint for the browser, set on the first box only.
-
-`one-time-code` is why this defaults to anything at all: it is the token
-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. */
+  /** The autofill hint for the browser. `one-time-code` is why this defaults to
+anything at all: it is the token that lets a phone offer the code out of a
+message. */
   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
@@ -10184,9 +10617,9 @@ took: a refused last character submits nothing. */
 to keep them as typed. Web Awesome's OTP input takes the same `case`, for
 a code a service reads in one case. */
   case?: (HelixHeadlessPinInput["case"]) | undefined;
-  /** Accessible name for one box, with `{index}` and `{length}` filled in. */
+  /** The name each box once had, with `{index}` and `{length}` filled in. */
   "cell-label"?: (HelixHeadlessPinInput["cellLabel"]) | undefined;
-  /** Accessible name for one box, with `{index}` and `{length}` filled in. */
+  /** The name each box once had, 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
@@ -10194,21 +10627,22 @@ 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. */
+  /** Whether the characters are hidden, the way a password is. The field is a
+password field, and each filled box draws `mask-character`. */
   mask?: (HelixHeadlessPinInput["mask"]) | undefined;
-  /** What an empty box shows, usually a single dot.
-
-The platform's own placeholder, on each cell, rather than a character
-drawn behind the field: it clears the moment anything is typed, it is
-already excluded from the accessible value, and it works the same under
-`mask`, where the cell is a password input and a hand-drawn glyph would
-have to know that.
-
-Empty by default, because a row of boxes already reads as a row of boxes. */
+  /** What a filled box draws under `mask`, in place of its character, as Web
+Awesome's `--mask-char`. */
+  "mask-character"?: (HelixHeadlessPinInput["maskCharacter"]) | undefined;
+  /** What a filled box draws under `mask`, in place of its character, as Web
+Awesome's `--mask-char`. */
+  maskCharacter?: (HelixHeadlessPinInput["maskCharacter"]) | undefined;
+  /** What an empty box shows, usually a single dot. It is not shown in the box
+the caret is in. Empty by default, because a row of boxes already reads as
+a row of boxes. */
   placeholder?: (HelixHeadlessPinInput["placeholder"]) | undefined;
-  /** Whether the boxes block input. A read-only code still submits its value. */
+  /** Whether the field blocks input. A read-only code still submits its value. */
   readonly?: (HelixHeadlessPinInput["readOnly"]) | undefined;
-  /** Whether the boxes block input. A read-only code still submits its value. */
+  /** Whether the field blocks input. A read-only code still submits its value. */
   readOnly?: (HelixHeadlessPinInput["readOnly"]) | undefined;
   /** The message shown when the code is started and not finished, with
 `{length}` filled in. When it is unset, an English default is shown. */
@@ -10233,8 +10667,7 @@ marked letters wants `text`, which judges nothing.
 
 **Not reflected**: nothing selects on it, so reflecting only writes
 `type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
-attribute no consumer's markup had. The area rules carry the sentence
-"reflect only what CSS selects on". The real inputs take it as a binding,
+attribute no consumer's markup had. The field takes it as `inputmode`,
 which is what makes the keyboard follow. */
   type?: (HelixHeadlessPinInput["type"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value,
@@ -10383,7 +10816,28 @@ export type HelixHeadlessPopoverVueEvents = {
   toggle: HelixHeadlessPopoverToggleElementEvent;
 };
 
+/** `HelixHeadlessProgress` component event */
+export type HelixHeadlessProgressElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessProgress,
+  E
+>;
+/** `helix-complete` event type */
+export type HelixHeadlessProgressHelixCompleteElementEvent =
+  HelixHeadlessProgressElementEvent<HelixCompleteEvent>;
+
 export type HelixHeadlessProgressVueProps = {
+  /** The words a screen reader hears when the value reaches `max`, such as
+"Upload complete".
+
+Said once, politely, as the work finishes. Empty says nothing, for a bar
+whose page announces the result itself. */
+  "complete-label"?: (HelixHeadlessProgress["completeLabel"]) | undefined;
+  /** The words a screen reader hears when the value reaches `max`, such as
+"Upload complete".
+
+Said once, politely, as the work finishes. Empty says nothing, for a bar
+whose page announces the result itself. */
+  completeLabel?: (HelixHeadlessProgress["completeLabel"]) | undefined;
   /** `Intl.NumberFormat` options the reading is written with, as React Aria's
 Meter and ProgressBar take them: a unit, a currency, or a number of
 decimals. Written as JSON in the attribute.
@@ -10494,7 +10948,10 @@ report progress. */
   valueText?: (HelixHeadlessProgress["valueText"]) | undefined;
 };
 
-export type HelixHeadlessProgressVueEvents = {};
+export type HelixHeadlessProgressVueEvents = {
+  /** The value reached `max` from below. Its `value` is `max`. Not sent for a bar that starts full. */
+  "helix-complete": HelixHeadlessProgressHelixCompleteElementEvent;
+};
 
 /** `HelixHeadlessQrCode` component event */
 export type HelixHeadlessQrCodeElementEvent<E = Event> = TypedEvent<
@@ -10503,6 +10960,12 @@ export type HelixHeadlessQrCodeElementEvent<E = Event> = TypedEvent<
 >;
 
 export type HelixHeadlessQrCodeVueProps = {
+  /** The words a code with no `label` is named by, followed by its value where
+the value is a web address. */
+  "code-label"?: (HelixHeadlessQrCode["codeLabel"]) | undefined;
+  /** The words a code with no `label` is named by, followed by its value where
+the value is a web address. */
+  codeLabel?: (HelixHeadlessQrCode["codeLabel"]) | undefined;
   /** The error correction level, which sets how much of the code can be lost
 and still scan.
 
@@ -10512,10 +10975,13 @@ chosen automatically when the slot is filled: it is the level that makes
 covering safe, and a consumer who fills the slot has said what they want
 without having to know that. */
   correction?: (HelixHeadlessQrCode["correction"]) | undefined;
-  /** The image's accessible name.
+  /** The image's accessible name: what the code is for, such as "Open the
+menu".
 
-Falling back to the value is deliberate: a code almost always holds a URL,
-and a URL is a better name than "QR code" for a reader who cannot see it. */
+Absent names it by `code-label` and, for a web address, the address,
+which is what a reader who cannot scan it needs. Any other value is left
+out of the name, since it may hold a secret, such as an authenticator's
+key or a network's password. */
   label?: (HelixHeadlessQrCode["label"]) | undefined;
   /** How the modules are drawn.
 
@@ -10985,6 +11451,20 @@ is read along. */
   "points-label"?: (HelixHeadlessScatterChart["pointsLabel"]) | undefined;
   /** The word the summary uses for a row when it counts them. */
   pointsLabel?: (HelixHeadlessScatterChart["pointsLabel"]) | undefined;
+  /** The heading of a column whose numbers size the points, such as
+`Population`, which makes the chart a bubble chart.
+
+That column is then a measure and no series: it draws no points of its
+own, and each point's area follows its row's number in it. Absent, every
+point is one size. */
+  "size-by"?: (HelixHeadlessScatterChart["sizeBy"]) | undefined;
+  /** The heading of a column whose numbers size the points, such as
+`Population`, which makes the chart a bubble chart.
+
+That column is then a measure and no series: it draws no points of its
+own, and each point's area follows its row's number in it. Absent, every
+point is one size. */
+  sizeBy?: (HelixHeadlessScatterChart["sizeBy"]) | undefined;
   /** Draws each series' line of best fit across the plot, by least squares, in
 the series' color: the regression line a reader would otherwise draw by
 eye.
@@ -11100,6 +11580,14 @@ export type HelixHeadlessSelectToggleElementEvent =
   HelixHeadlessSelectElementEvent<ToggleEvent>;
 
 export type HelixHeadlessSelectVueProps = {
+  /** What a browser's autofill may fill in, as a platform token such as
+`country` or `cc-exp-month`, as on a native `<select>`.
+
+Set, the select keeps a hidden native `<select>` with the same options for
+the browser to fill, as React Aria's `HiddenSelect` does, and takes the
+option the browser picks, by its value or its words, as the value. Empty
+draws no hidden select, and a browser fills nothing. */
+  autocomplete?: (HelixHeadlessSelect["autocomplete"]) | undefined;
   /** The text shown when no options match the filter. */
   "empty-text"?: (HelixHeadlessSelect["emptyText"]) | undefined;
   /** The text shown when no options match the filter. */
@@ -11109,6 +11597,24 @@ export type HelixHeadlessSelectVueProps = {
 Passed to the listbox rather than acted on here, because the listbox owns
 the filtering, the empty state and the keyboard. */
   filterable?: (HelixHeadlessSelect["filterable"]) | undefined;
+  /** The open list's name where nothing names the Select, read by screen
+readers. The list has no visible name.
+
+A Select named by `label`, `aria-label`, `aria-labelledby` or a `<label>`
+gives its list that name, and this is not used. Unnamed, the Select is
+reported once by the missing-name warning, and its list is not reported a
+second time for a name the page never wrote: the list is this element's,
+and so is the fallback. Combobox calls its list the same. */
+  "list-label"?: (HelixHeadlessSelect["listLabel"]) | undefined;
+  /** The open list's name where nothing names the Select, read by screen
+readers. The list has no visible name.
+
+A Select named by `label`, `aria-label`, `aria-labelledby` or a `<label>`
+gives its list that name, and this is not used. Unnamed, the Select is
+reported once by the missing-name warning, and its list is not reported a
+second time for a name the page never wrote: the list is this element's,
+and so is the fallback. Combobox calls its list the same. */
+  listLabel?: (HelixHeadlessSelect["listLabel"]) | undefined;
   /** Whether the options are still loading.
 
 Passed straight to the list, which is where the rows are and so where the
@@ -11123,6 +11629,16 @@ consumer wiring the same flag twice. */
   multiple?: (HelixHeadlessSelect["multiple"]) | undefined;
   /** Shown on the trigger while nothing is chosen. */
   placeholder?: (HelixHeadlessSelect["placeholder"]) | undefined;
+  /** Where the list opens: `floating`, under the trigger and above it where
+there is no room, or `item-aligned`, over the trigger with the chosen
+option where the trigger is, as a native select does on macOS and Radix
+Select does by default.
+
+Over the trigger, a reader's eye stays on the answer as the list opens
+round it, and a short move reaches the options either side. Near an edge
+of the screen the list moves to stay on it, so the option may sit beside
+the trigger rather than on it. It follows the page as it scrolls. */
+  position?: (HelixHeadlessSelect["position"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
   "default-open"?: (HelixHeadlessSelect["defaultOpen"]) | undefined;
   /** Whether the element starts open. Ignored once `open` is written. */
@@ -11211,6 +11727,16 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessSelect["name"]) | undefined;
+  /** Whether the trigger holds its group's tab stop.
+
+A toolbar keeps one tab stop across its controls, and writing `tabindex`
+onto this element would change markup the consumer rendered, which a React
+consumer's hydration reports. A toolbar sets this property instead, and
+the stop moves on the trigger inside the shadow root, as Button's does.
+
+No attribute, because it is coordination between elements rather than
+anything a consumer sets. */
+  focusable?: (HelixHeadlessSelect["focusable"]) | undefined;
   /** 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.
 
@@ -11391,6 +11917,11 @@ filled in. Write it in the page's language, such as `{start} bis {end}`. */
   showValue?: (HelixHeadlessSlider["showValue"]) | undefined;
   /** How far one press of an arrow key moves the thumb. */
   step?: (HelixHeadlessSlider["step"]) | undefined;
+  /** Whether each thumb shows its value in a bubble beside it, as Web
+Awesome's `with-tooltip`. The styled slider shows the bubbles while the
+slider is under the pointer or holds focus. They repeat what each thumb
+already reports, so a screen reader skips them. */
+  tooltip?: (HelixHeadlessSlider["tooltip"]) | undefined;
   /** What a screen reader says for a thumb's value, with `{value}` filled in,
 such as `{value} degrees`. Empty announces the number alone. */
   "value-text"?: (HelixHeadlessSlider["valueText"]) | undefined;
@@ -11539,6 +12070,20 @@ separated by spaces.
 Absent marks none, and the drawing is what it was. Each mark is a part,
 placed at its reading, for a stylesheet to draw. */
   marks?: (HelixHeadlessSparkline["marks"]) | undefined;
+  /** What the readings come to, said after the name: `{first}` and `{last}`
+for the first and the last reading, `{high}` and `{low}` for the highest
+and the lowest, each written as the readout writes it.
+
+Set it to the words of the page's language, or to nothing to say no
+more than the name. Said only where the sparkline is named. */
+  "overview-label"?: (HelixHeadlessSparkline["overviewLabel"]) | undefined;
+  /** What the readings come to, said after the name: `{first}` and `{last}`
+for the first and the last reading, `{high}` and `{low}` for the highest
+and the lowest, each written as the readout writes it.
+
+Set it to the words of the page's language, or to nothing to say no
+more than the name. Said only where the sparkline is named. */
+  overviewLabel?: (HelixHeadlessSparkline["overviewLabel"]) | undefined;
   /** What the readings are drawn as.
 
 Absent is `area`, a line with the region beneath it washed. `line` is the
@@ -11581,6 +12126,12 @@ it. `{position}` and `{count}` are replaced with the numbers, written in
 Set it to the words of the page's language, such as `{position} von
 {count}`, or to nothing to say no position. */
   positionLabel?: (HelixHeadlessSparkline["positionLabel"]) | undefined;
+  /** Two values a band is drawn between, behind the line, separated by a
+space: `range="60 100"` marks a normal range.
+
+The scale stretches to hold the band where the readings do not reach it.
+Absent draws none. */
+  range?: (HelixHeadlessSparkline["range"]) | undefined;
   /** The numbers, separated by whitespace or by commas.
 
 An array assigned to the property works too, which is what React 19 does
@@ -11592,6 +12143,13 @@ not. */
 
 export type HelixHeadlessSparklineVueEvents = {};
 
+export type HelixHeadlessSpeedDialGroupVueProps = {
+  /** The group's name, drawn above its actions and read by screen readers. */
+  label?: (HelixHeadlessSpeedDialGroup["label"]) | undefined;
+};
+
+export type HelixHeadlessSpeedDialGroupVueEvents = {};
+
 /** `HelixHeadlessSpeedDialItem` component event */
 export type HelixHeadlessSpeedDialItemElementEvent<E = Event> = TypedEvent<
   HelixHeadlessSpeedDialItem,
@@ -11604,6 +12162,10 @@ export type HelixHeadlessSpeedDialItemHelixSelectElementEvent =
 export type HelixHeadlessSpeedDialItemVueProps = {
   /** Whether the action is disabled, so it cannot be chosen. */
   disabled?: (HelixHeadlessSpeedDialItem["disabled"]) | undefined;
+  /** The action's keyboard shortcut as a chord, such as `mod+s`, carried as
+`aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
+keyboard and Control elsewhere. Showing a shortcut does not bind it. */
+  shortcut?: (HelixHeadlessSpeedDialItem["shortcut"]) | undefined;
   /** The action's value, sent in `helix-select` when the action is chosen. */
   value?: (HelixHeadlessSpeedDialItem["value"]) | undefined;
 };
@@ -11634,8 +12196,32 @@ export type HelixHeadlessSpeedDialToggleElementEvent =
 export type HelixHeadlessSpeedDialVueProps = {
   /** Accessible name for the trigger and the set of actions it opens. */
   label?: (HelixHeadlessSpeedDial["label"]) | undefined;
+  /** The description the trigger gives under `open-on="long-press"`, saying how
+its actions are reached.
+
+A slotted trigger is described by the dial, which carries the words as
+its own label for that: a Helix button's inner control at once, and a
+plain element of yours once a reader reaches it, after hydration, unless
+you described or labeled it yourself. */
+  "long-press-label"?: (HelixHeadlessSpeedDial["longPressLabel"]) | undefined;
+  /** The description the trigger gives under `open-on="long-press"`, saying how
+its actions are reached.
+
+A slotted trigger is described by the dial, which carries the words as
+its own label for that: a Helix button's inner control at once, and a
+plain element of yours once a reader reaches it, after hydration, unless
+you described or labeled it yourself. */
+  longPressLabel?: (HelixHeadlessSpeedDial["longPressLabel"]) | undefined;
   /** Space between the trigger and the actions, in pixels. */
   offset?: (HelixHeadlessSpeedDial["offset"]) | undefined;
+  /** What opens the dial. `click` opens it on a press of the trigger. Under
+`long-press`, a press is the trigger's own action, and the dial opens on a
+press held for half a second, or on Alt+Down or Alt+Up. */
+  "open-on"?: (HelixHeadlessSpeedDial["openOn"]) | undefined;
+  /** What opens the dial. `click` opens it on a press of the trigger. Under
+`long-press`, a press is the trigger's own action, and the dial opens on a
+press held for half a second, or on Alt+Down or Alt+Up. */
+  openOn?: (HelixHeadlessSpeedDial["openOn"]) | undefined;
   /** The direction the actions open in. They move to another side if that side
 does not fit.
 
@@ -11821,6 +12407,8 @@ export type HelixHeadlessSplitterVueEvents = {
   "helix-collapse": HelixHeadlessSplitterHelixCollapseElementEvent;
   /** Fired after the divider settles somewhere new, with the new position. */
   "helix-resized": HelixHeadlessSplitterHelixResizedElementEvent;
+  /** Fired each time the divider moves, as a range input does: on each step of a drag, and before `helix-resized` for a key, a double click or a corner. Read `position` for where it is now. */
+  input: HelixHeadlessSplitterElementEvent;
 };
 
 export type HelixHeadlessStatGroupVueProps = {
@@ -11897,6 +12485,12 @@ in both. Of those four combinations three are ones nobody should pick, and
 a property whose job is mostly to be left alone is a property that mostly
 catches people out. */
   orientation?: (HelixHeadlessSteps["orientation"]) | undefined;
+  /** What the `progress` part says to a screen reader, with `{percent}` filled
+in with `progress`. */
+  "progress-label"?: (HelixHeadlessSteps["progressLabel"]) | undefined;
+  /** What the `progress` part says to a screen reader, with `{percent}` filled
+in with `progress`. */
+  progressLabel?: (HelixHeadlessSteps["progressLabel"]) | undefined;
   /** What each step is marked with.
 
 Absent is the state itself: a check where a stage is done, a target where
@@ -12365,6 +12959,14 @@ is set. */
   "descending-label"?: (HelixHeadlessTable["descendingLabel"]) | undefined;
   /** The word for a descending sort, in `sorted-label`. */
   descendingLabel?: (HelixHeadlessTable["descendingLabel"]) | undefined;
+  /** Makes the table a grid: one tab stop, and the arrow keys, Home, End and the
+Page keys move focus between its cells, the headings included. Enter moves
+into a cell's controls, and Tab leaves the table.
+
+Off by default, where the table is a static `table` and Tab reaches each
+link and control in it. On, the table writes a `tabindex` onto each of its
+cells, which is the one way a cell of your markup can take focus. */
+  grid?: (HelixHeadlessTable["grid"]) | undefined;
   /** Accessible name for the table.
 
 An `aria-label` or `aria-labelledby` on the host names the table too, and
@@ -12441,6 +13043,13 @@ export type HelixHeadlessTableVueEvents = {
 };
 
 export type HelixHeadlessTableRowVueProps = {
+  /** The URL a press on the row follows, which makes the whole row a link.
+Empty, the default, leaves presses to the row's cells. */
+  href?: (HelixHeadlessTableRow["href"]) | undefined;
+  /** The `rel` of the row's link. You set it yourself, as on an anchor. */
+  rel?: (HelixHeadlessTableRow["rel"]) | undefined;
+  /** Where the row's link opens, such as `_blank`. */
+  target?: (HelixHeadlessTableRow["target"]) | undefined;
   /** The key the table's `selected` lists this row by. Left empty, the row is
 known by its place among the rows as written. */
   value?: (HelixHeadlessTableRow["value"]) | undefined;
@@ -12600,6 +13209,12 @@ export type HelixHeadlessTagGroupHelixDismissElementEvent =
   HelixHeadlessTagGroupElementEvent<HelixDismissEvent>;
 
 export type HelixHeadlessTagGroupVueProps = {
+  /** The words the group shows and says once its last tag is removed, where
+nothing is in the `empty` slot. */
+  "empty-label"?: (HelixHeadlessTagGroup["emptyLabel"]) | undefined;
+  /** The words the group shows and says once its last tag is removed, where
+nothing is in the `empty` slot. */
+  emptyLabel?: (HelixHeadlessTagGroup["emptyLabel"]) | undefined;
   /** The name of the set, such as "Filters", which a screen reader announces
 before its tags. */
   label?: (HelixHeadlessTagGroup["label"]) | undefined;
@@ -12926,7 +13541,8 @@ 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. */
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixHeadlessTimeInput["locale"]) | undefined;
   /** Latest time that can be chosen, as `HH:mm`. */
   max?: (HelixHeadlessTimeInput["max"]) | undefined;
@@ -13275,21 +13891,14 @@ English, "Stunde" in German. */
 Absent is the locale's own word, from `Intl.DisplayNames`: "Hour" in
 English, "Stunde" in German. */
   hourLabel?: (HelixHeadlessTimePicker["hourLabel"]) | undefined;
-  /** Whether the current selection fails validation.
-
-A flag rather than a message, the same split Date Picker draws. A flat
-picker has no room of its own for a sentence: the field that wraps one owns
-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?: (HelixHeadlessTimePicker["invalid"]) | undefined;
   /** Accessible name for the list, which has no visible one of its own.
 
 An `aria-label` or `aria-labelledby` on the host names the list instead. */
   label?: (HelixHeadlessTimePicker["label"]) | undefined;
-  /** Language tag the times are written in.
+  /** Language tag the times and the wheels' names are written in.
 
-Absent uses the runtime's own. */
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixHeadlessTimePicker["locale"]) | undefined;
   /** Stops the arrow keys in the list from choosing each time they move to.
 Enter, Space or a click chooses.
@@ -13442,6 +14051,19 @@ not touch, and React reads that as a hydration mismatch. The absent
 attribute *is* the list, which the stylesheet reads as the base rule, so
 only the departure has to be named. */
   variant?: (HelixHeadlessTimePicker["variant"]) | undefined;
+  /** A message under the picker, such as what is wrong with the answer.
+
+While set, the picker is invalid and does not submit, as a field's
+`feedback` is, it is marked invalid to a reader and to CSS, and the
+controls a reader answers with are described by it. */
+  feedback?: (HelixHeadlessTimePicker["feedback"]) | undefined;
+  /** Whether the answer fails validation, marked on the controls a reader
+answers with and as `:state(invalid)`.
+
+A flag a field that wraps the picker sets, since that field owns the
+label, the hint and the message; on its own, `feedback` both marks the
+picker and says why. */
+  invalid?: (HelixHeadlessTimePicker["invalid"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value,
 and to the `value` attribute where this one is not written, as a native
 control resets to the `value` it declares. */
@@ -14440,6 +15062,30 @@ export type HelixHeadlessTrendVueProps = {
   "down-label"?: (HelixHeadlessTrend["downLabel"]) | undefined;
   /** The word read out for a move down. */
   downLabel?: (HelixHeadlessTrend["downLabel"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, as React Aria's
+NumberField takes them: a percent, a currency, a unit or a number of
+decimals. Written as JSON in the attribute.
+
+```html
+<helix-trend value="-0.084" format-options='{"style":"percent","maximumFractionDigits":1}'></helix-trend>
+```
+
+The example says "Down 8.4%". The size is written without a sign, since
+the arrow and the word say which way; set `signDisplay` for one. Absent
+writes the number as the locale writes any number. */
+  "format-options"?: (HelixHeadlessTrend["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, as React Aria's
+NumberField takes them: a percent, a currency, a unit or a number of
+decimals. Written as JSON in the attribute.
+
+```html
+<helix-trend value="-0.084" format-options='{"style":"percent","maximumFractionDigits":1}'></helix-trend>
+```
+
+The example says "Down 8.4%". The size is written without a sign, since
+the arrow and the word say which way; set `signDisplay` for one. Absent
+writes the number as the locale writes any number. */
+  formatOptions?: (HelixHeadlessTrend["formatOptions"]) | undefined;
   /** Which movement counts as an improvement for this metric.
 
 Absent states the movement without judging it, which is the honest default:
@@ -14447,6 +15093,11 @@ revenue up is good news and latency up is bad news, and only the consumer
 knows which one this is. Set it once per metric and it holds while the
 movement changes underneath. */
   good?: (HelixHeadlessTrend["good"]) | undefined;
+  /** The locale `value` is written in, such as `de` for `1.234,5`.
+
+Absent uses the runtime's own. Set it on a page rendered on a server, so
+the server and the browser write the figure alike. */
+  locale?: (HelixHeadlessTrend["locale"]) | undefined;
   /** Which way the measurement moved.
 
 Absent is neutral, so a trend with nothing to report draws a bar rather
@@ -14465,6 +15116,14 @@ three. */
   "up-label"?: (HelixHeadlessTrend["upLabel"]) | undefined;
   /** The word read out for a move up. */
   upLabel?: (HelixHeadlessTrend["upLabel"]) | undefined;
+  /** The change as a signed number, such as `0.12` or `-8`, which sets the
+movement by its sign and is written as the metric.
+
+Above zero is up, below is down, and zero is neutral; `movement` wins when
+both are written. The size is written in the `value` part with
+`format-options` and `locale`, in place of a slotted metric. Absent leaves
+the movement to `movement` and the metric to the slot. */
+  value?: (HelixHeadlessTrend["value"]) | undefined;
   /** The word read out after the direction when the move is a setback. */
   "worse-label"?: (HelixHeadlessTrend["worseLabel"]) | undefined;
   /** The word read out after the direction when the move is a setback. */
@@ -14587,7 +15246,7 @@ Ignored once `active` is written. */
 };
 
 export type HelixHeadlessVideoPlaylistVueEvents = {
-  /** The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. */
+  /** The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. `currentEntry` is the entry itself, with its `src`, `poster` and name. */
   "helix-activate": HelixHeadlessVideoPlaylistHelixActivateElementEvent;
   /** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
   "helix-before-activate": HelixHeadlessVideoPlaylistHelixBeforeActivateElementEvent;
@@ -14697,7 +15356,11 @@ assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
 The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
-`previous` and `next`.
+`previous` and `next`. `full` stands for `rewind`, `forward`, `speed`,
+`pip` and `remote` in that order, the controls that act on the video by
+themselves, as Web Awesome's `full` preset does, and a name it already
+holds is drawn once. `extra-controls="full"` is the whole bar, and
+`overflow-controls="full"` puts all of it behind one button.
 
 **`previous` and `next` do nothing to the video, and are offered anyway.**
 They announce `helix-previous` and `helix-next` and stop there, so what
@@ -14727,7 +15390,11 @@ assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
 The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
-`previous` and `next`.
+`previous` and `next`. `full` stands for `rewind`, `forward`, `speed`,
+`pip` and `remote` in that order, the controls that act on the video by
+themselves, as Web Awesome's `full` preset does, and a name it already
+holds is drawn once. `extra-controls="full"` is the whole bar, and
+`overflow-controls="full"` puts all of it behind one button.
 
 **`previous` and `next` do nothing to the video, and are offered anyway.**
 They announce `helix-previous` and `helix-next` and stop there, so what
@@ -15038,6 +15705,10 @@ export type HelixHeadlessVirtualListHelixRangeChangeElementEvent =
   HelixHeadlessVirtualListElementEvent<HelixRangeChangeEvent>;
 
 export type HelixHeadlessVirtualListVueProps = {
+  /** How many items a line holds. One, the default, is a list; more lays the
+items out as a grid of that many equal columns, windowed a line at a
+time, with Left and Right moving along a line. */
+  columns?: (HelixHeadlessVirtualList["columns"]) | undefined;
   /** The height of one row, in pixels, used to find the row at a scroll offset.
 
 An estimate rather than a measurement while `measured` is off, which is
@@ -15136,6 +15807,8 @@ export type CustomCssProperties = {
   "--bar-chart-secondary"?: (string) | undefined;
   /** The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash="gradient"` is set. */
   "--chart-bar-wash"?: (string) | undefined;
+  /** Written on the control inside each toggle button of a group with `selection-mode`: `1` while it is pressed and `0` while it is not. Read it in a `::part(button)` rule to draw the pressed look. */
+  "--button-group-pressed"?: (string) | undefined;
   /** Space between slides. Your stylesheet sets it, and the component uses it to measure the run. */
   "--carousel-gap"?: (string) | undefined;
   /** The size of one pane. Your stylesheet sets it, and the component uses it to measure the run. */
@@ -15224,6 +15897,10 @@ export type CustomCssProperties = {
   "--megamenu-surface-inline-size"?: (string) | undefined;
   /** Where the panel starts, measured from the bar above it. */
   "--megamenu-top"?: (string) | undefined;
+  /** The trigger's width, written on the panel while it is open, as in `min-inline-size: var(--floating-anchor-inline-size)`. Read it; a value set here is written over. */
+  "--floating-anchor-inline-size"?: (string) | undefined;
+  /** The room between the panel and the edge of the screen it opens toward, written on the panel while it is open. Read it; a value set here is written over. */
+  "--floating-available-block-size"?: (string) | undefined;
   /** Where a bound sits on the arc, as a length along it. */
   "--meter-along"?: (string) | undefined;
   /** Where a bound sits on a linear track, as a percentage. */
@@ -15244,6 +15921,8 @@ export type CustomCssProperties = {
   "--rating-step"?: (string) | undefined;
   /** The number of steps in the whole row: `max` divided by `step`. */
   "--rating-steps"?: (string) | undefined;
+  /** How large a point is drawn under `size-by`, from 0 to 1, by area. The component writes it, and the stylesheet that sizes the point reads it. */
+  "--chart-point-weight"?: (string) | undefined;
   /** A point's horizontal position, as a percentage. The component writes it. */
   "--chart-point-x"?: (string) | undefined;
   /** A point's vertical position, as a percentage from the top. The component writes it. */
@@ -15254,6 +15933,8 @@ export type CustomCssProperties = {
   "--scroll-area-scroll-fraction"?: (string) | undefined;
   /** The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part. */
   "--scroll-area-thumb-fraction"?: (string) | undefined;
+  /** Where a bubble's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` part. */
+  "--slider-at"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. */
   "--slider-fraction"?: (string) | undefined;
   /** Where the filled span starts, as a fraction of the track, 0 to 1: a range's lower thumb, or a single thumb's `origin`. */
@@ -15298,19 +15979,19 @@ export type CustomCssProperties = {
 // Note: Some tooling expects this augmentation under "@vue/runtime-core", while
 // other docs/examples use "vue". We emit both for compatibility.
 export interface WcToolkitVueGlobalComponents {
-  /** Holds its own open state. Used alone, outside an accordion, it works as a disclosure.  The trigger sits inside a heading, so a screen reader lists the section with the page's headings. The level is the item's 'heading-level', then the accordion's, then 3.  Content stays mounted when the item is closed, so it can animate and its text is present in server-rendered HTML. Closed content has both 'hidden' and 'inert'. 'hidden' collapses it when no stylesheet is loaded. 'inert' keeps it out of the tab order and the accessibility tree after the styled tier's 'display' overrides 'hidden'.  While it is open, the content part carries the content's height as '--accordion-content-height', as Radix's accordion does, for a stylesheet that animates the section open with keyframes of its own.  Set 'hidden-until-found' and the browser's find in page searches a closed section too: a match opens it, with 'helix-before-open' first, as React Aria's disclosure does. The content is then 'hidden="until-found"' while closed, and not 'inert', since an inert region is never searched. */
+  /** Holds its own open state. Used alone, outside an accordion, it works as a disclosure.  The trigger sits inside a heading, so a screen reader lists the section with the page's headings. The level is the item's 'heading-level', then the accordion's, then 3.  Content stays mounted when the item is closed, so it can animate and its text is present in server-rendered HTML.  The browser's find in page searches a closed section, and a match opens it, with 'helix-before-open' first, as React Aria's disclosure does. Closed content is 'hidden="until-found"', which hides it with no stylesheet loaded and keeps it out of the tab order and the accessibility tree. A section that closes keeps its content drawn until the content part's animations and transitions end, so a sheet that animates the section closed shows the content shrinking rather than an empty box. Set 'hidden-until-found="false"' and a closed section is 'hidden' and 'inert' instead, and find in page skips it.  While it is open, the content part carries the content's height as '--accordion-content-height', as Radix's accordion does, for a stylesheet that animates the section open with keyframes of its own. */
   "helix-headless-accordion-item": DefineCustomElement<
     HelixHeadlessAccordionItem,
     HelixHeadlessAccordionItemVueProps,
     HelixHeadlessAccordionItemVueEvents
   >;
-  /** Holds the mode. Each item coordinates itself: when you click an item, it finds the nearest accordion, reads the mode, and closes the other items.  The accordion does not listen for items opening. 'helix-before-open' does not bubble and is not composed, because overlays nest and an inner overlay's events must stay separate from the outer one's.  Items are found when they are clicked, so there is no registry to keep up to date. An item added after render coordinates on its first click. Items are matched with 'instanceof HelixHeadlessAccordionItem', so the headless tier does not depend on the styled tier's tag names.  Keys, on a trigger: Up and Down Arrow move to the previous and the next trigger, and so do Left and Right, wrapping at the ends; Home and End go to the first and the last. Enter and Space open and close the section. Disabled sections are passed over.  Each trigger is a button with 'aria-expanded' and 'aria-controls', inside a heading, level 3 unless 'heading-level' says otherwise, so the sections are in a screen reader's list of headings. An open section is a region named by its trigger. Set the level that fits the page's outline. */
+  /** Holds the mode. Each item coordinates itself: when you click an item, it finds the nearest accordion, reads the mode, and closes the other items.  The accordion does not listen for items opening. 'helix-before-open' does not bubble and is not composed, because overlays nest and an inner overlay's events must stay separate from the outer one's.  Items are found when they are clicked, so there is no registry to keep up to date. An item added after render coordinates on its first click. Items are matched with 'instanceof HelixHeadlessAccordionItem', so the headless tier does not depend on the styled tier's tag names.  Keys, on a trigger: Up and Down Arrow move to the previous and the next trigger, and so do Left and Right, wrapping at the ends; Home and End go to the first and the last. Enter and Space open and close the section. Disabled sections are passed over.  Each trigger is a button with 'aria-expanded' and 'aria-controls', inside a heading, level 3 unless 'heading-level' says otherwise, so the sections are in a screen reader's list of headings. An open section is a region named by its trigger. Set the level that fits the page's outline.  Find in page searches the closed sections too, and opens the one it matches in. 'hidden-until-found="false"' turns that off. */
   "helix-headless-accordion": DefineCustomElement<
     HelixHeadlessAccordion,
     HelixHeadlessAccordionVueProps,
     HelixHeadlessAccordionVueEvents
   >;
-  /** An announcement is a banner above the page header with news about the whole site or session, such as a trial ending, a degraded service, or a change of terms. For a passage inside a document, use 'Callout', which stays where it is placed and cannot be dismissed.  The announcement is always a polite live region, whatever its 'tone'. 'role="alert"' is assertive and interrupts a screen reader, so an announcement served with the page would interrupt on every page load.  The live region is its own part. When the announcement appears after the page has loaded, the message is written into the region one frame later, so screen readers read it reliably, and the region is emptied seven seconds later. While the region holds the copy, the message itself is hidden from screen readers, so it is in the page once. When the announcement is in the served HTML, the region stays empty and nothing is read out.  The dismiss button fires 'helix-dismiss', and the announcement stays in the document, so remove it in your listener. The event is cancelable, and 'dismiss()' returns 'false' when a listener calls 'preventDefault()'. When your listener removes an announcement whose dismiss button has focus, focus moves to the dismiss button of the announcement beside it. With no other announcement beside it, move focus yourself, for example to the page's main heading.  Set 'duration' to dismiss it after a time. The clock stops while the pointer or focus is on the announcement, and continues from what was left, so a reader partway through is not cut off. When the time runs out it sends 'helix-dismiss', as the button does. */
+  /** An announcement is a banner above the page header with news about the whole site or session, such as a trial ending, a degraded service, or a change of terms. For a passage inside a document, use 'Callout', which stays where it is placed and cannot be dismissed.  The announcement is always a polite live region, whatever its 'tone'. 'role="alert"' is assertive and interrupts a screen reader, so an announcement served with the page would interrupt on every page load.  The live region is its own part. When the announcement appears after the page has loaded, the message is written into the region one frame later, so screen readers read it reliably, and the region is emptied seven seconds later. While the region holds the copy, the message itself is hidden from screen readers, so it is in the page once. When the announcement is in the served HTML, the region stays empty and nothing is read out.  The dismiss button fires 'helix-dismiss', and the announcement stays in the document, so remove it in your listener. The event is cancelable, and 'dismiss()' returns 'false' when a listener calls 'preventDefault()'. When your listener removes an announcement whose dismiss button has focus, focus moves to the dismiss button of the announcement beside it. With no other announcement beside it, move focus yourself, for example to the page's main heading.  **The announcement is a landmark region**, named by 'label', "Announcement" unless you set it, so a screen reader lists it among the page's regions. 'hotkey', F6 unless you set it, moves focus to the announcement's first control, an action or the dismiss button, and pressed there moves focus back to where it was, as React Aria's toast region does. An announcement with no control leaves the key to the browser. When an announcement that the key moved focus into is removed with focus still inside, focus goes back to where it was before the key.  **Set 'queued' to show several announcements one at a time.** A queued announcement waits while a queued announcement before it in the same parent is still there, and shows when that one is removed: its message is then read out, and its 'duration' starts. While it waits it renders nothing, is no region, and carries ':state(waiting)'. A server cannot see the announcements beside it, so a served page shows every one until the script runs.  Set 'duration' to dismiss it after a time. The clock stops while the pointer or focus is on the announcement, and continues from what was left, so a reader partway through is not cut off. It stops while the page is hidden too, in another tab or a minimized window, so the message is not spent where nobody can see it. While the clock is stopped the announcement carries ':state(paused)'. When the time runs out it sends 'helix-dismiss', as the button does. */
   "helix-headless-announcement": DefineCustomElement<
     HelixHeadlessAnnouncement,
     HelixHeadlessAnnouncementVueProps,
@@ -15322,7 +16003,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 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. */
+  /** 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.  'overlap' draws every band from zero, one in front of another, so each part's own amount is its height: the first column is in front. Use it to compare the parts with each other; the scale then fits the largest part rather than the total.  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,
@@ -15334,13 +16015,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAvatarGroupVueProps,
     HelixHeadlessAvatarGroupVueEvents
   >;
-  /** Shows 'src' until it fails to load. Without an image, or after a failure, the default slot is shown, and its own fallback is the initials.  The host carries the accessible name, taken from 'name'. The '<img>' has an empty 'alt' and the initials are hidden from assistive technology, so the name is announced once. Set 'aria-label' on the host to override 'name' when a person's name does not describe what the avatar stands for.  'load' and 'error' are re-dispatched from the host, because they are not composed and would otherwise stop at the shadow boundary. */
+  /** Shows 'src' until it fails to load. Without an image, or after a failure, the default slot is shown, and its own fallback is the initials.  The host carries the accessible name, taken from 'name'. The '<img>' has an empty 'alt' and the initials are hidden from assistive technology, so the name is announced once. Set 'aria-label' on the host to override 'name' when a person's name does not describe what the avatar stands for.  'load' and 'error' are re-dispatched from the host, because they are not composed and would otherwise stop at the shadow boundary. 'status' says which of the two happened, for a listener that arrives after it, and the 'loading', 'loaded' and 'error' custom states say the same to a stylesheet.  **On a server the avatar sends the picture's place**, an '<img>' that the browser fetches while it reads the page. The initials stand in only on the client: at once where the picture failed before the page hydrated, and after 'fallback-delay' where it is still on its way. 'load' or 'error' for a picture that settled before hydration is sent a task after the avatar hydrates, so a page's own scripts are listening by then. */
   "helix-headless-avatar": DefineCustomElement<
     HelixHeadlessAvatar,
     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.  **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. */
+  /** 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.  'format-options' writes a count with 'Intl.NumberFormat', in 'locale': 'format-options='{"notation":"compact"}'' shows 1,200 as '1.2K'. Absent, the count is shown as it was given.  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 describes it.** The control is the first element in the badge that takes focus, and its description is the badge's words, so focusing '<helix-badge value="8" label="{count} unread"><button>Inbox </button></helix-badge>' announces "Inbox, button, 8 unread", current as the count changes. A control that already has a description keeps its own. The count is also a status of its own, read when it changes.  **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,
@@ -15352,7 +16033,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessBarChartVueProps,
     HelixHeadlessBarChartVueEvents
   >;
-  /** Renders a '<figure>' holding the '<blockquote>' and a '<figcaption>' for the attribution, the structure the HTML spec describes. The attribution sits outside the quotation because it is about the quotation, and it names the figure, so a screen reader reads the source as the figure's caption.  The figure keeps the browser's default margins on this tier. Set '::part(figure) { margin: 0 }' where they are unwanted.  For a quotation inside a sentence, use 'Quote'. */
+  /** Renders a figure holding the '<blockquote>' and a caption for the attribution, the structure the HTML spec describes. The attribution sits outside the quotation because it is about the quotation, and it names the figure, so a screen reader reads the source as the figure's caption.  **The figure is a '<div role="figure">'**, so the headless tier draws no space around the quotation. A '<figure>' takes a 40px indent and a line of space above and below from the browser's own sheet, which every page had to reset. The '<blockquote>' keeps its own margins, as a bare one does. A screen reader meets the same figure, named by its caption.  **A figure only while there is an attribution.** With nothing in the caption the figure has no name and nothing to say, so the role and its name are dropped and a reader meets the quotation alone. A server cannot see what is slotted, so it serves the figure, and the client drops it after hydration; an 'attribution' written as words is served exactly.  **Quotation marks follow the language**, under 'marks'. The opening mark is the one the browser sets for a '<q>' in the element's language, „ under 'lang="de"' and « under 'lang="fr"', and a 'Quote' inside the passage takes the inner marks. The mark is drawn, not read: a screen reader hears the passage. A passage under 'marks' that starts with a mark typed into the text would show two, and warns once, with the runtime kind 'typed-marks'.  **'cite' is the source's URL**, which the browser keeps and does not show. Words in it, such as the author's name, warn once, with the runtime kind 'cite-not-url'.  For a quotation inside a sentence, use 'Quote'. */
   "helix-headless-blockquote": DefineCustomElement<
     HelixHeadlessBlockquote,
     HelixHeadlessBlockquoteVueProps,
@@ -15370,13 +16051,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessBreadcrumbsVueProps,
     HelixHeadlessBreadcrumbsVueEvents
   >;
-  /** Sets 'role="group"' on the host through internals, and 'label' names the group. Without a name, a screen reader announces the buttons as separate controls, and a development build warns once with the kind 'missing-name'.  The group does not manage focus, so each button keeps its own tab stop. For one tab stop with arrow keys between the buttons, the APG toolbar pattern, use Toolbar.  Buttons are slotted, so they stay your own elements and keep their own appearance and size. */
+  /** Sets 'role="group"' on the host through internals, and 'label' names the group. Without a name, a screen reader announces the buttons as separate controls, and a development build warns once with the kind 'missing-name'.  The group does not manage focus, so each button keeps its own tab stop. For one tab stop with arrow keys between a mix of controls, the APG toolbar pattern, use Toolbar.  Buttons are slotted, so they stay your own elements and keep their own appearance and size.  **Buttons that stay pressed.** With 'selection-mode', each button with a 'value' is a toggle button: a press presses or releases it, and it says so with 'aria-pressed'. 'single' keeps one pressed at a time, and a press on the pressed one releases it. 'multiple' lets any number be pressed. 'value' is the pressed values, comma separated. A press sends a cancelable 'helix-before-change' with the value it would leave, then 'change'.  The pressed state is written on the control inside each button's shadow root, so the markup you rendered is never changed and a framework hydrating it sees what its server sent. That is also why only Helix buttons are toggles: a native '<button>' or a button without a 'value' stays a plain action button in the group, and a native one without its own 'aria-pressed' warns once, with the runtime kind 'untold-toggle'. The inner control also carries '--button-group-pressed', '1' or '0', for a '::part(button)' rule of yours.  Use Toggle Group instead for a choice that belongs in a form, or one where the arrow keys choose as they move: it is a 'radiogroup' of options with a form value, 'required' and validation. A Button Group in a selection mode is a set of actions that stay on, such as bold and italic, or a view that a press switches, and it submits nothing.  **Keyboard.** In a selection mode the group is one tab stop: the button focus was last on, then the first pressed one, then the first one.  | Key | What it does | |---|---| | Right, Down | Moves to the next button, from the last back to the first. | | Left, Up | Moves to the button before, from the first round to the last. | | Home, End | Moves to the first or the last button. | | Space, Enter | Presses or releases the focused button. |  Left and Right swap on a right-to-left page, and a disabled button is passed over. In a selection mode the group is a 'toolbar', with 'aria-orientation' under 'orientation="vertical"'. Inside a toolbar it stays a named 'group', and the toolbar's own arrow keys walk its buttons, so a reader meets one toolbar. */
   "helix-headless-button-group": DefineCustomElement<
     HelixHeadlessButtonGroup,
     HelixHeadlessButtonGroupVueProps,
     HelixHeadlessButtonGroupVueEvents
   >;
-  /** Renders a real '<button>', so activation, focus, and other browser behavior come from the platform.  **It never renders an anchor.** A router renders its own '<a>' to intercept a click, and it cannot render one inside the button's shadow root. For a link that looks like a button, use the base layer recipe on your own anchor: '<Link data-button="solid">' draws the same control.  'delegatesFocus' moves focus to the inner control. It is serialized into the server markup, so the button is reachable by keyboard before any JavaScript loads.  The inner control is always 'type="button"', because a '<button type="submit">' inside a shadow root cannot submit a form outside it. To submit, the button calls 'requestSubmit()' on its form, which runs validation, unlike 'submit()'.  A 'submit' listener reads 'event.submitter' as 'null', because the platform accepts only a native submit button there. The button's 'name' and 'value' are in the form data, so read them from 'new FormData(form)' to tell two submit buttons apart.  As the first submit button in its form, it is the form's default button: Enter in a text field of the form presses it, as it presses a native one.  Set 'pending' while the action a press started is still running. The button keeps focus and refuses presses, and a reader on it hears 'pending-label'.  Every press that acts sends 'helix-press' with what pressed it in 'detail.pointerType': 'mouse', 'pen', 'touch', 'keyboard', or 'virtual' for a screen reader's press or a script's 'click()', as React Aria's 'onPress' does. It is sent once the press has done its own work, before 'click' reaches listeners on the element, and never for a disabled or pending button.  **Keyboard.** Enter and Space press the button, as on a native one. */
+  /** 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 puts a hidden native submit button carrying its 'name', 'value' and 'form*' overrides into the form, calls 'requestSubmit()' with it, which runs validation, unlike 'submit()', and takes it out again, as Shoelace and Web Awesome do. A 'submit' listener reads that button as 'event.submitter', so 'event.submitter.value' and 'new FormData(form, event.submitter)' tell two submit buttons apart.  As the first submit button in its form, it is the form's default button: Enter in a text field of the form presses it, as it presses a native one.  Set 'pending' while the action a press started is still running. The button keeps focus and refuses presses, and a reader on it hears 'pending-label'.  Every press that acts sends 'helix-press' with what pressed it in 'detail.pointerType': 'mouse', 'pen', 'touch', 'keyboard', or 'virtual' for a screen reader's press or a script's 'click()', as React Aria's 'onPress' does. It is sent once the press has done its own work, before 'click' reaches listeners on the element, and never for a disabled or pending button.  **Keyboard.** Enter and Space press the button, as on a native one. */
   "helix-headless-button": DefineCustomElement<
     HelixHeadlessButton,
     HelixHeadlessButtonVueProps,
@@ -15400,13 +16081,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasNodeVueProps,
     HelixHeadlessCanvasNodeVueEvents
   >;
-  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - Shift with an arrow key moves the card. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
+  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
   "helix-headless-canvas": DefineCustomElement<
     HelixHeadlessCanvas,
     HelixHeadlessCanvasVueProps,
     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 'label', as a Stat Group is named, or with 'aria-label' or 'aria-labelledby'. These are the only names that work with server rendering, because reading a title from the light DOM needs a DOM, and the server has none. 'label' is set through 'ElementInternals', so it writes no attribute onto the card. **A named card is a group**, so a reader entering it hears its name; an unnamed one has no role, since a group with no name only adds "group" to what a reader says.  Each region's slot is a part of the same name, 'body' for the main content, as Web Awesome's card names its regions. A slot draws no box, so a part passes inherited properties to what is slotted, and a page wanting a box there gives it one with 'display'.  'header-actions' and 'footer-actions' hold controls at the end of the header's and the footer's line, as Web Awesome's card does. While one holds something, its line is a 'header-row' or 'footer-row' part; otherwise there is no wrapper and every region is a bare slot. A server cannot see slotted content, so served actions sit on their own line until the script runs. */
+  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with 'label', as a Stat Group is named, or with 'aria-label' or 'aria-labelledby'. These are the only names that work with server rendering, because reading a title from the light DOM needs a DOM, and the server has none. 'label' is set through 'ElementInternals', so it writes no attribute onto the card. **A named card is a group**, so a reader entering it hears its name; an unnamed one has no role, since a group with no name only adds "group" to what a reader says.  Each region's slot is a part of the same name, 'body' for the main content, as Web Awesome's card names its regions. A slot draws no box, so a part passes inherited properties to what is slotted, and a page wanting a box there gives it one with 'display'.  'header-actions' and 'footer-actions' hold controls at the end of the header's and the footer's line, as Web Awesome's card does. While one holds something, its line is a 'header-row' or 'footer-row' part; otherwise there is no wrapper and every region is a bare slot. A server cannot see slotted content, so served actions sit on their own line until the script runs.  **The card says which regions it holds**, as ':state(has-media)', ':state(has-header)' and ':state(has-footer)', so a sheet can draw a card with a header differently, as Web Awesome's 'with-header' does, with no attribute written onto the card. Read in the browser, so a served card carries none until the script runs. */
   "helix-headless-card": DefineCustomElement<
     HelixHeadlessCard,
     HelixHeadlessCardVueProps,
@@ -15430,7 +16111,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessChatMessageVueProps,
     HelixHeadlessChatMessageVueEvents
   >;
-  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened.  Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own.  **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. When the other side types, set 'typing' to their name: the status band draws three dots and "Ada is typing" ('typing-label'), which a screen reader hears, and clearing it takes them away. Anything slotted into 'status' is drawn first.  A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn with neither an author label nor a time is named by 'turn-label', "Message".  A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, pass the turns as children. */
+  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened.  Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own.  **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. When the other side types, set 'typing' to their name: the status band draws three dots and "Ada is typing" ('typing-label'), which a screen reader hears, and clearing it takes them away. Anything slotted into 'status' is drawn first.  A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn with neither an author label nor a time is named by 'turn-label', "Message".  A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, give 'author-styles' the declarations for each author, such as '{"ada": "--chat-message-background-color: …"}': the message drawn for each of their turns takes them as its 'style', so the message's custom properties change for that author alone. Turns passed as children are styled by their 'author', such as 'helix-chat-message[author="ada"]'. */
   "helix-headless-chat": DefineCustomElement<
     HelixHeadlessChat,
     HelixHeadlessChatVueProps,
@@ -15448,7 +16129,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCheckboxVueProps,
     HelixHeadlessCheckboxVueEvents
   >;
-  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; the code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded, and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
+  /** 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; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. 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,
@@ -15472,7 +16153,7 @@ export interface WcToolkitVueGlobalComponents {
     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. 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. */
+  /** 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. As typing narrows the list, a screen reader hears how many options are left, such as "3 results". Emptying the field and leaving it clears a single choice.  **Keyboard.**  | Key | What it does | |---|---| | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. | | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. | | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with 'creatable', or takes it with 'allows-custom-value'. On a closed field, submits the form. | | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. | | Tab | Closes the list and moves on. | | Backspace | With 'multiple', on an empty field, removes the last tag. | | Space, Home, End, letters | Edit the text. |  **ARIA.** The input is the 'combobox', named by the label, with 'aria-expanded', 'aria-controls' naming the list, 'aria-autocomplete' ('both' with 'suggest', 'list' otherwise) and 'aria-activedescendant' on the highlighted option. The list is the listbox 'Listbox' describes.  On Apple devices, where VoiceOver does not read the option the field points to, the field says it in a live region as the highlight moves, says how many options there are as the list opens, and says a choice once it is made, as React Aria's combobox does there.  Set 'autocomplete' to let a browser's autofill choose an option.  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,
@@ -15484,7 +16165,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCommandVueProps,
     HelixHeadlessCommandVueEvents
   >;
-  /** Copies text to the clipboard and confirms the copy. The platform gives no feedback for a clipboard write, so without a confirmation a press that copies looks the same as one that fails.  The confirmation and the event wait for the write to finish. The browser can refuse a clipboard write, for example on an insecure origin, in a document that is not focused, or after a gesture that does not qualify. A refused write, or nothing to copy, names the button with 'error-label' for the same moment a copy shows 'copied-label', draws a cross, and sends 'helix-copy-error'.  'from' copies from another element on the page: its text, an attribute written 'id[attribute]', or a property written 'id.property', read at the press. It takes the place of 'value'.  It replaces Button's render and its press, so it never submits a form or sends a command: 'type', 'command', 'commandfor' and the 'form*' overrides have no effect, and the 'start' and 'end' slots and the 'text' part are not rendered. An 'aria-label' on the element names it before a copy, in place of 'label'. */
+  /** Copies text to the clipboard and confirms the copy. The platform gives no feedback for a clipboard write, so without a confirmation a press that copies looks the same as one that fails.  The confirmation and the event wait for the write to finish. The browser can refuse a clipboard write, for example on an insecure origin, in a document that is not focused, or after a gesture that does not qualify. A refused write, or nothing to copy, names the button with 'error-label' for the same moment a copy shows 'copied-label', draws a cross, and sends 'helix-copy-error'.  'from' copies from another element on the page: its text, an attribute written 'id[attribute]', or a property written 'id.property', read at the press. It takes the place of 'value'.  It replaces Button's render and its press, so it never submits a form or sends a command: 'type', 'command', 'commandfor' and the 'form*' overrides have no effect, and the 'start' and 'end' slots and the 'text' part are not rendered. An 'aria-label' on the element names it before a copy, in place of 'label'.  **Keyboard.** Enter and Space copy, as they press a native button.  The button is named 'label', or the host's 'aria-label', and its name changes to 'copied-label' or 'error-label' for the moment after a press, which is what a screen reader on it hears. The tooltip shows the same words. */
   "helix-headless-copy-button": DefineCustomElement<
     HelixHeadlessCopyButton,
     HelixHeadlessCopyButtonVueProps,
@@ -15508,7 +16189,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDatePickerVueProps,
     HelixHeadlessDatePickerVueEvents
   >;
-  /** Each pair is its own element: the label is the '<dt>' and the value its '<dd>', and a screen reader hears them together however the list lays them out.  The value is the default slot, because it varies and is often more than text, such as a tag, an avatar, or a link. The label is almost always text, so it is also a property.  **For a label with several values, write each value as a '<dd>'**, such as the authors of a paper. The item then puts your '<dd>' elements after its '<dt>' in place of its own, so a screen reader hears one term and each of its descriptions, as in a native '<dl>'. A server cannot see your elements, so the served item wraps them in its own '<dd>' until it runs. */
+  /** Each pair is its own element: the label is the '<dt>' and the value its '<dd>', and a screen reader hears them together however the list lays them out.  The value is the default slot, because it varies and is often more than text, such as a tag, an avatar, or a link. The label is almost always text, so it is also a property.  **For a label with several values, write each value as a '<dd>'**, such as the authors of a paper. The item then puts your '<dd>' elements after its '<dt>' in place of its own, so a screen reader hears one term and each of its descriptions, as in a native '<dl>'. A server cannot see your elements, so set 'several' as well, and the served item leaves them unwrapped too. Without it, the served item wraps them in its own '<dd>' until it runs.  **Controls that act on the value**, such as a copy button, go in the 'actions' slot, drawn after the value inside its '<dd>', as Radix Themes' data list puts an icon button beside a value. A screen reader hears them as part of the description they act on. With several values, put each control inside the '<dd>' it acts on. */
   "helix-headless-description-list-item": DefineCustomElement<
     HelixHeadlessDescriptionListItem,
     HelixHeadlessDescriptionListItemVueProps,
@@ -15526,7 +16207,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDialogVueProps,
     HelixHeadlessDialogVueEvents
   >;
-  /** The separator role is on the rule inside the shadow root. A role does not need to cross the shadow boundary the way an IDREF does, so it can sit on the rendered element. The semantics are then in the server-rendered markup, with no attribute written by script after the element connects.  Set 'announced' for a line that divides one thing from another, and it is read as a separator, named by any content set into it.  Use 'orientation="vertical"' between items on one line, such as inside a toolbar. A vertical divider stretches to fit its flex parent and sets no height of its own. */
+  /** The separator role is on the rule inside the shadow root. A role does not need to cross the shadow boundary the way an IDREF does, so it can sit on the rendered element. The semantics are then in the server-rendered markup, with no attribute written by script after the element connects.  **The line is a separator**, as '<hr>' is, and as Radix Separator, React Aria Separator, and Web Awesome's divider are. It is named by any content set into it, so a screen reader says "Or, separator" where you wrote "Or" on the line. Set 'decorative' on a rule that separates nothing, such as one under a heading or between the facts of a byline, and it leaves the accessibility tree.  Use 'orientation="vertical"' between items on one line. A vertical divider stretches to fit its flex parent and sets no height of its own.  **Inside a toolbar it runs across the toolbar** without being told: vertical in a horizontal toolbar and horizontal in a vertical one, with 'aria-orientation' to match, as React Aria's separator does inside a toolbar. Inside means a child of Toolbar or of the page's own 'role="toolbar"'. An 'orientation' you write still wins. A server cannot see the toolbar, so the turn arrives with hydration, inside the shadow root. */
   "helix-headless-divider": DefineCustomElement<
     HelixHeadlessDivider,
     HelixHeadlessDividerVueProps,
@@ -15538,13 +16219,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDonutChartVueProps,
     HelixHeadlessDonutChartVueEvents
   >;
-  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape, in a browser without 'closedby' as well.  **A touch or a pen swipes it away**, toward the edge it came from, resolved against the writing direction. A swipe past halfway, or a quick one, closes it through the same request as every other way out. 'snap-points' lists the fractions of the panel a reader can leave on screen, such as '0.5 1' for a sheet that rests half open: it opens at the smallest, and a swipe settles at the nearest. While a swipe moves the panel, the distance is written on it as '--drawer-swipe-x' and '--drawer-swipe-y'. 'swipe="false"' turns swiping off.  'snap' is the snap point the panel rests at, and ':state(snapped)' is on the host while that is less than the whole panel. 'snapTo()' moves it to another. **Focus moving to a control past the window's edge opens the panel to its largest snap point**, so a reader moving through a half open sheet with 'Tab' never lands on a control they cannot see.  Set 'dismissible' to draw a close control in the corner, labeled by 'dismiss-label', as 'Dialog' draws one.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names.  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> ''' */
+  /** Uses 'MixinControllerOpen', so 'open', 'defaultOpen', and the 'helix-before-open' and 'helix-before-close' events work the same way as on an accordion item.  The drawer is modal by default, which means four things:  - focus is trapped inside: 'Tab' from the last control goes to the first,   and 'Shift+Tab' from the first to the last, as in 'Dialog' - Escape and a press outside close it - the page behind is covered - the page behind does not scroll  A drawer with 'modal="false"' leaves the page usable and still closes on Escape, in a browser without 'closedby' as well.  **A touch or a pen swipes it away**, toward the edge it came from, resolved against the writing direction. A swipe past halfway, or a quick one, closes it through the same request as every other way out. 'snap-points' lists the fractions of the panel a reader can leave on screen, such as '0.5 1' for a sheet that rests half open: it opens at the smallest, and a swipe settles at the nearest. While a swipe moves the panel, the distance is written on it as '--drawer-swipe-x' and '--drawer-swipe-y'. 'swipe="false"' turns swiping off.  'snap' is the snap point the panel rests at, and ':state(snapped)' is on the host while that is less than the whole panel. 'snapTo()' moves it to another. **Focus moving to a control past the window's edge opens the panel to its largest snap point**, so a reader moving through a half open sheet with 'Tab' never lands on a control they cannot see.  Set 'dismissible' to draw a close control in the corner, labeled by 'dismiss-label', as 'Dialog' draws one.  The panel's name is 'label' when you set it. Otherwise it is the heading in the 'header' slot, or the elements an 'aria-labelledby' on the host names.  Content stays mounted when the drawer is closed, so it is in the server markup and can animate. A closed '<dialog>' is already out of the tab order and the accessibility tree, so the drawer does not write 'inert'. The 'role', 'aria-modal', and the scrim also come from the '<dialog>' element. 'drawer-root.ssr.spec.ts' checks that the panel has no hand-written 'inert' or 'role'.  Open the drawer declaratively with the platform's invoker attributes:  '''html <helix-headless-button commandfor="nav" command="--toggle">Menu</helix-headless-button> <helix-headless-drawer id="nav">…</helix-headless-drawer> ''' */
   "helix-headless-drawer": DefineCustomElement<
     HelixHeadlessDrawer,
     HelixHeadlessDrawerVueProps,
     HelixHeadlessDrawerVueEvents
   >;
-  /** A row that opens a page contains that page: the page's rows are this row's own children, assigned to the 'page' slot. There are no ids to wire, and moving a row moves its page with it.  What the item renders depends on the stack:  - On the page that is showing, it renders its row. - When its own page is showing, it renders only that page's rows. Its row   belongs to the page above. - Otherwise it renders nothing. The rows stay in the light DOM untouched, so   there is no state to keep.  Choosing a row dispatches an event, and the stack decides whether that drills in or runs a command.  A row that opens a page shows a caret after its text and sets 'aria-haspopup', the same way 'Menu' marks a row with a submenu. The server render leaves both out, because the server cannot see the children. */
+  /** A row that opens a page contains that page: the page's rows are this row's own children, assigned to the 'page' slot. There are no ids to wire, and moving a row moves its page with it.  What the item renders depends on the stack:  - On the page that is showing, it renders its row. - When its own page is showing, it renders only that page's rows. Its row   belongs to the page above. - When a page further down its own is showing, it renders its page's slot   alone, so the rows below reach the page. - Otherwise it renders nothing. The rows stay in the light DOM untouched, so   there is no state to keep.  Choosing a row dispatches an event, and the stack decides whether that drills in or runs a command.  A row that opens a page shows a caret after its text and sets 'aria-haspopup', the same way 'Menu' marks a row with a submenu. The server render leaves both out, because the server cannot see the children.  The row is named by its label alone. Words in 'description', a line under the label, and in 'end' describe it instead, through 'aria-describedby', as 'Menu.Item' does: a reader hears "Theme", then "Dark". */
   "helix-headless-drilldown-item": DefineCustomElement<
     HelixHeadlessDrilldownItem,
     HelixHeadlessDrilldownItemVueProps,
@@ -15556,7 +16237,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDrilldownVueProps,
     HelixHeadlessDrilldownVueEvents
   >;
-  /** Shows what would be in a region and the one action that would fill it, so an empty region does not look like one that failed to load.  The message is announced, because an empty view often replaces content that was loading, and the announcement tells a screen reader user that the search returned nothing. It is announced from a status region of its own, which is rendered empty and filled a frame after the view appears. Screen readers read a region that arrives with its text already in it inconsistently. For the seven seconds the region holds its copy, the heading and the message are hidden from screen readers, so the words are in the page once.  Every region is a bare slot. There is no 'empty-state-heading' or 'empty-state-actions' element: assign your own heading and actions to the slots. */
+  /** Shows what would be in a region and the one action that would fill it, so an empty region does not look like one that failed to load.  The message is announced, because an empty view often replaces content that was loading, and the announcement tells a screen reader user that the search returned nothing. It is announced from a status region of its own, which is rendered empty and filled a frame after the view appears. Screen readers read a region that arrives with its text already in it inconsistently. For the seven seconds the region holds its copy, the heading and the message are hidden from screen readers, so the words are in the page once.  Every region is a bare slot. There is no 'empty-state-heading' or 'empty-state-actions' element: assign your own heading and actions to the slots.  **Or give the heading as words.** 'heading' draws them in a 'heading' part that is a heading at 'heading-level', 3 where it is not set, so a page rendering from data or on a server gets a heading a reader finds in the outline without writing the element. A heading slotted in replaces it.  **Whatever is slotted into 'heading' is read as a heading.** An element that is no heading, such as a '<span>' or a '<p>', is set inside the 'heading' part at 'heading-level', so a screen reader still finds it in the outline. A heading element, or an element holding one, keeps its own level. A server cannot see the slotted element, so a served '<span>' becomes a heading once the script runs. */
   "helix-headless-empty": DefineCustomElement<
     HelixHeadlessEmpty,
     HelixHeadlessEmptyVueProps,
@@ -15568,7 +16249,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFileInputVueProps,
     HelixHeadlessFileInputVueEvents
   >;
-  /** Shows one filter declared by a 'FilterField': the field, the operator, and the values, with a control to remove the filter.  The operator is shown only when it is not the field's default:  ''' Disposition   refunded, chargeback         default operator, hidden Disposition   is not   refunded            chosen operator, shown Created       after    1 Aug               a scalar field has no default '''  Omit 'operator-label' for the field's default operator and pass it for every other operator. The code that builds the chip has the field, and the field defines its default.  The chip shows a filter and does not apply it. Dismissing fires 'helix-dismiss' as a request, as on 'Tag' and 'Announcement'. The chip is your element in your list, so you remove it, which keeps your model and the document in step. Call 'preventDefault()' on 'helix-dismiss' to cancel the dismissal, which is also how you take control of the interaction for one press. 'requestChange' documents the pattern.  To let the user change the operator, slot a menu trigger into 'operator'. With the text fallback, the operator is a label. The chip does not interpret operators: their meaning belongs to your domain, as 'FilterOperator' explains. */
+  /** Shows one filter declared by a 'FilterField': the field, the operator, and the values, with a control to remove the filter.  The operator is shown only when it is not the field's default:  ''' Disposition   refunded, chargeback         default operator, hidden Disposition   is not   refunded            chosen operator, shown Created       after    1 Aug               a scalar field has no default '''  Omit 'operator-label' for the field's default operator and pass it for every other operator. The code that builds the chip has the field, and the field defines its default.  The chip shows a filter and does not apply it. Dismissing fires 'helix-dismiss' as a request, as on 'Tag' and 'Announcement'. The chip is your element in your list, so you remove it, which keeps your model and the document in step. Call 'preventDefault()' on 'helix-dismiss' to cancel the dismissal, which is also how you take control of the interaction for one press. 'requestChange' documents the pattern.  **Keyboard.** The remove button is a tab stop of its own, and Enter or Space on it asks to remove the filter. In a 'FilterInput', Backspace in the empty field asks to remove the last chip.  The remove button is named 'dismiss-label' followed by the chip's words, such as "Remove filter Status is not open", so a row of chips says which filter each button removes. Write '{label}' in 'dismiss-label' to put the words elsewhere.  To let the user change the operator, slot a menu trigger into 'operator'. With the text fallback, the operator is a label. The chip does not interpret operators: their meaning belongs to your domain, as 'FilterOperator' explains. */
   "helix-headless-filter-chip": DefineCustomElement<
     HelixHeadlessFilterChip,
     HelixHeadlessFilterChipVueProps,
@@ -15598,7 +16279,7 @@ export interface WcToolkitVueGlobalComponents {
     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.  **'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. */
+  /** 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. 'frozen' draws the reading once and leaves it.  **'fields' draws each field of a date as a part of its own**, such as 'day', 'month' and 'year', so a stylesheet can set the year in a lighter ink or the weekday in capitals with '::part()'. The text between the fields is the locale's own and has no part. An 'elapsed' or 'relative' reading is one phrase, with no parts inside it.  **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,
@@ -15610,7 +16291,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-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. PageUp and PageDown move four columns, which is four weeks with 'rows="7"'.  **The strip describes itself.** The 'overview' part says the busiest reading and the total of the readings drawn, "Busiest: 11 Jun 12; Total 84", and the strip is described by it, as every chart is by its summary. Hide it visually. The 'summary' slot is still yours, for words of your own. */
+  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. PageUp and PageDown move a month, to the same day, where each row's header carries its date as a '<time datetime>', and four columns otherwise, which is four weeks with 'rows="7"'.  **The strip describes itself.** The 'overview' part says the busiest reading and the total of the readings drawn, "Busiest: 11 Jun, 12; Total 84", and the strip is described by it, as every chart is by its summary. Hide it visually. The 'summary' slot is still yours, for words of your own.  **'selection-mode' lets a reader select cells**: 'single' one at a time and 'multiple' any number. Space, Enter or a press selects the cell the keys or the pointer rest on, or lets it go, and under 'multiple' Shift with an arrow, Home, End, PageUp or PageDown takes in every cell from the last one pressed to where the key went. 'value' holds the selected days, by the names their rows have in the table, separated by commas. A change asks with 'helix-before-change' and tells with 'change', and the 'selection' part says how many are selected, in 'selection-label'. */
   "helix-headless-heatmap": DefineCustomElement<
     HelixHeadlessHeatmap,
     HelixHeadlessHeatmapVueProps,
@@ -15622,31 +16303,31 @@ 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 is looked up in a registry.** The family's entry registers the whole set, so any name in it draws. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  A name with no match renders nothing, and the element fires 'error', so a typo in a name can be heard. It waits until the page has loaded and painted first, so a library a later module registers is not taken for a typo.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name. */
+  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers the whole set, so any name in it draws. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  A name with no match renders nothing, and the element fires 'error', so a typo in a name can be heard. It waits until the page has loaded and painted first, so a library a later module registers is not taken for a typo.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name.  **A decorative icon that is all a control holds is reported.** In a development build, a button or a link whose only content is an icon with no 'label', and which has no name of its own, warns 'missing-name' once, through the runtime channel every Helix warning uses. */
   "helix-headless-icon": DefineCustomElement<
     HelixHeadlessIcon,
     HelixHeadlessIconVueProps,
     HelixHeadlessIconVueEvents
   >;
-  /** Image handles the part CSS cannot: when the picture has loaded, or that it failed. 'aspect-ratio' in your stylesheet reserves the box. The element tracks three states and relays the two events that move between them, and leaves the box to the stylesheet.  The 'placeholder' slot is empty by default, so the headless tier does not depend on 'Skeleton', which it does not ship.  The placeholder is hidden from screen readers, the picture having a name of its own. The fallback is read once the picture fails, after the picture's 'alt', so a reader hears that it did not load, as a sighted reader sees. */
+  /** Image handles the part CSS cannot: when the picture has loaded, or that it failed. 'aspect-ratio' in your stylesheet reserves the box. The element tracks three states and relays the two events that move between them, and leaves the box to the stylesheet.  The 'placeholder' slot is empty by default, so the headless tier does not depend on 'Skeleton', which it does not ship.  The placeholder is hidden from screen readers, the picture having a name of its own. The fallback is read once the picture fails, after the picture's 'alt', so a reader hears that it did not load, as a sighted reader sees.  **An image with no 'alt' says so.** At its first render it reports a 'missing-alt' warning, printed in the console and counted by '@fusion.dev/helix-diagnostics', which names the fix: describe the picture in 'alt', or write 'alt=""' for one that is decoration. An image hidden with 'aria-hidden="true"' needs neither and is not reported.  A sheet of yours reads the state as ':state(loading)', ':state(loaded)', ':state(error)', and ':state(waiting)', the last while 'placeholder-delay' holds the placeholder back. It can also read 'data-status' on the host once the picture has loaded or failed. */
   "helix-headless-image": DefineCustomElement<
     HelixHeadlessImage,
     HelixHeadlessImageVueProps,
     HelixHeadlessImageVueEvents
   >;
-  /** Renders a real '<input>', so the caret, selection, autofill, spellcheck, password managers, and a phone's on-screen keyboard all work natively. The field is in the server markup, so it works before any script loads.  An input inside a shadow root does not submit with a form outside it, so the host is form-associated and reports its value through 'ElementInternals'. That also carries validity and handles a form reset.  'value' and 'defaultValue' work like 'checked' and 'defaultChecked'. 'value' is what is in the field now, and 'defaultValue' is the value from the markup, which a reset restores.  Validity comes from the browser. 'type' and 'required' are set on the real input, and its 'validity' is copied to the host. 'validate' adds your own rule, run on every change once the browser finds nothing wrong, as React Aria's TextField 'validate' does. What it returns is the message the field shows once the user has edited it, and the message a submit raises. */
+  /** Renders a real '<input>', so the caret, selection, autofill, spellcheck, password managers, and a phone's on-screen keyboard all work natively. The field is in the server markup, so it works before any script loads.  An input inside a shadow root does not submit with a form outside it, so the host is form-associated and reports its value through 'ElementInternals'. That also carries validity and handles a form reset.  'value' and 'defaultValue' work like 'checked' and 'defaultChecked'. 'value' is what is in the field now, and 'defaultValue' is the value from the markup, which a reset restores.  Validity comes from the browser. 'type' and 'required' are set on the real input, and its 'validity' is copied to the host. 'validate' adds your own rule, run on every change once the browser finds nothing wrong, as React Aria's TextField 'validate' does. What it returns is the message the field shows once the user has edited it, and the message a submit raises.  **Keyboard.** The field's own keys are the platform's. Enter submits the form through its default button, as in a native field. The clear button under 'clearable' and the reveal button under 'reveal' are tab stops of their own after the field, so a keyboard reaches them.  The inner input is named by 'label', or by a host 'aria-label', 'aria-labelledby' or '<label for>', and is described by the hint and the message, with 'aria-invalid' while a message shows. The clear button is named 'clear-label', and the reveal button 'reveal-label' with 'aria-pressed' while the password shows. */
   "helix-headless-input": DefineCustomElement<
     HelixHeadlessInput,
     HelixHeadlessInputVueProps,
     HelixHeadlessInputVueEvents
   >;
-  /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing.  **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added.  'caps' draws a chord as a key per key: each is a 'key' part and the '+' between two a 'separator' part, so a sheet can draw a cap for each. 'key-labels' renames any key, on every platform, such as 'key-labels='{"mod":"Command"}''. */
+  /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing.  **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added.  'caps' draws a chord as a key per key: each is a 'key' part and the '+' between two a 'separator' part, so a sheet can draw a cap for each. 'key-labels' renames any key, on every platform, such as 'key-labels='{"mod":"Command"}''. On an Apple keyboard a word joins the next key with a hyphen, as in 'Command-K'.  **'activate' makes the shortcut work the control 'for' names**, with no script: 'activate="focus"' moves focus to it, as '/' does to a search field, and 'activate="click"' presses it. It acts once 'helix-shortcut' has gone out and no listener canceled it, and only where 'within' listens. */
   "helix-headless-kbd": DefineCustomElement<
     HelixHeadlessKbd,
     HelixHeadlessKbdVueProps,
     HelixHeadlessKbdVueEvents
   >;
-  /** Renders a legend as a list, separate from any chart, so any chart can use one. Set 'for' to the table the chart reads, and the legend takes its entries from that table, so the two always match.  'entries' sets how the table is read:  - 'series': one entry per data column, named by the header row. Use it for a   line or bar chart. - 'categories': one entry per body row. Use it for a donut, whose slices are   the rows and which has no axis to name them on. - 'measures': drops the first data column. Use it for a scatter.  The table is resolved on the client. There is no server pass.  **'toggles' makes each entry a button that hides its series.** Every chart reading the same table draws without a hidden series and fits its scale to the rest, and the series keeps its color. The button says whether its series is shown with 'aria-pressed'. The buttons are one tab stop: the arrow keys move between them, Home and End go to the first and the last, and a typed letter goes to the next name starting with it. 'hidden-series' holds the hidden names, so a page can start with some hidden or read which are. Two legends on one table show the same hidden series: the list written last wins, and the other legend takes it for its own entries. */
+  /** Renders a legend as a list, separate from any chart, so any chart can use one. Set 'for' to the table the chart reads, and the legend takes its entries from that table, so the two always match.  'entries' sets how the table is read:  - 'series': one entry per data column, named by the header row. Use it for a   line or bar chart. - 'categories': one entry per body row. Use it for a donut, whose slices are   the rows and which has no axis to name them on. - 'measures': drops the first data column. Use it for a scatter.  The table is resolved on the client. There is no server pass.  **'toggles' makes each entry a button that hides its series.** Every chart reading the same table draws without a hidden series and fits its scale to the rest, and the series keeps its color. The button says whether its series is shown with 'aria-pressed'. The buttons are a 'toolbar', named as the list is, and one tab stop: the arrow keys move between them, Home and End go to the first and the last, and a typed letter goes to the next name starting with it. 'hidden-series' holds the hidden names, so a page can start with some hidden or read which are. Two legends on one table show the same hidden series: the list written last wins, and the other legend takes it for its own entries. */
   "helix-headless-legend": DefineCustomElement<
     HelixHeadlessLegend,
     HelixHeadlessLegendVueProps,
@@ -15658,13 +16339,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessLightboxItemVueProps,
     HelixHeadlessLightboxItemVueEvents
   >;
-  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label', whose glyphs you can replace in the 'previous-icon', 'next-icon' and 'dismiss-icon' slots. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  **Set 'max-zoom' to let a reader zoom into the shown item**, such as '3'. Two fingers pinch it, a double click or a double tap zooms all the way in about the point pressed and back out, and once zoomed one pointer drags it about. '+' and '-' zoom in and out from the keyboard, and '0' puts it back. The scale and the offset are on the 'viewport' part as '--lightbox-zoom', '--lightbox-pan-x' and '--lightbox-pan-y', written only while zoomed, and a swipe moves to the next item only while the item is at its own size.  Each item is a slide: a 'group' with the role description in 'slide-role-label', named by its 'label' or by 'slide-label'. A touch or a pen swiped across the picture shows the next or the previous item, the way the line of text runs.  The chrome hides when there is no input, through 'IdleController', and comes back on a pointer move, a key press, or a focus. It stays while focus is on a control in the header or the footer, so a keyboard reader is never left on a control that has gone. 'fullscreen' uses 'FullscreenController', as 'Video' does. While the viewer is open, the page behind it does not scroll. */
+  /** The frame around content you open, such as a picture, a video frame, or a chart. The lightbox draws no content of its own. It provides the frame, the keyboard behavior, and text that states the current position in the set.  The modal behavior comes from a native '<dialog>' opened with 'showModal()', which provides the top layer, a backdrop, Escape to close, and 'inert' on the rest of the document. Every way of closing goes through 'requestOpen', as in 'Dialog' and 'Drawer'.  A lightbox shows one item at a time and has no scrolling track, so 'active' holds the current item, as in 'Tabs'. The arrow keys change the item while focus stays in the dialog.  Set 'controls' for the viewer's own previous, next and close controls, named by 'previous-label', 'next-label' and 'dismiss-label', whose glyphs you can replace in the 'previous-icon', 'next-icon' and 'dismiss-icon' slots. Without it, compose the chrome yourself in the 'header' and 'footer' slots, with buttons that send '--previous', '--next' and '--close'.  **Set 'max-zoom' to let a reader zoom into the shown item**, such as '3'. Two fingers pinch it, a double click or a double tap zooms all the way in about the point pressed and back out, and once zoomed one pointer drags it about. '+' and '-' zoom in and out from the keyboard, and '0' puts it back. The scale and the offset are on the 'viewport' part as '--lightbox-zoom', '--lightbox-pan-x' and '--lightbox-pan-y', written only while zoomed, and a swipe moves to the next item only while the item is at its own size. With 'controls', the viewer also draws zoom-out and zoom-in controls, for a pointer with no wheel and no second finger. Once a reader stops zooming, the live region says the new scale in the words of 'zoom-status-label', such as "Zoomed to 150%".  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 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. */
+  /** 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.  'dashed' names the series drawn as a dashed line, such as a forecast or a target beside the readings: 'dashed="Forecast"'. Each takes a 'line-dashed' part beside 'line'.  '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,
@@ -15676,13 +16357,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessListItemVueProps,
     HelixHeadlessListItemVueEvents
   >;
-  /** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7".  **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. 'single' selects one row at a time and 'multiple' any number, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. 'none' selects nothing, so a press acts on the row. A 'disabled' row is passed over. Each row is named by its label and described by its description, so the words of the controls in 'end' are not read as part of its name.  'selection-behavior' says what a press does to the rows already selected. 'toggle', the default, adds or takes out the row. 'replace' selects the row alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press then adds or takes out one row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. Under 'replace', selects it. | | Home, End | Moves to the first or the last row. Under 'replace', selects it. | | A letter or a word | Moves to the next row whose words start with what you typed. | | Left, Right | Moves between the row and the controls in its 'end' slot. | | Space | Selects the row, or lets it go. | | Shift with Down, Up, Home, End or Space | Selects every row from the last one pressed, in 'multiple'. | | Control or Command with Down, Up, Home or End | Moves without selecting, under 'replace'. | | Control or Command with A | Selects every row, in 'multiple'. | | Enter | Acts on the row: follows its link, or sends 'helix-action' from it. |  A press with Shift selects every row from the last one pressed, and a press with Control or Command adds or takes out one row under 'replace'.  **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order.  'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs. */
+  /** Sets 'role="list"' on the host, so a screen reader counts the rows and announces each one's position, such as "1 of 7".  **'selection-mode' makes the list interactive**, in the way of a grid list: a grid of rows that is one tab stop. 'single' selects one row at a time and 'multiple' any number, and 'value' holds the selected rows' values, separated by commas. A change asks with 'helix-before-change' and tells with 'change'. 'none' selects nothing, so a press acts on the row. A 'disabled' row is passed over. Each row is named by its label and described by its description, so the words of the controls in 'end' are not read as part of its name.  'selection-behavior' says what a press does to the rows already selected. 'toggle', the default, adds or takes out the row. 'replace' selects the row alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press then adds or takes out one row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. Under 'replace', selects it. | | Home, End | Moves to the first or the last row. Under 'replace', selects it. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. Under 'replace', selects the row it lands on. | | A letter or a word | Moves to the next row whose words start with what you typed. | | Left, Right | Moves between the row and the controls in its 'end' slot. | | Space | Selects the row, or lets it go. | | Shift with Down, Up, Home, End, Page Down, Page Up or Space | Selects every row from the last one pressed, in 'multiple'. | | Control or Command with Down, Up, Home, End, Page Down or Page Up | Moves without selecting, under 'replace'. | | Control or Command with A | Selects every row, in 'multiple'. | | Escape | Lets go of every selected row, asking first, and keeps the key from the dialog or menu around the list. With nothing selected, the key goes on to them. | | Enter | Acts on the row: follows its link, or sends 'helix-action' from it. |  A press with Shift selects every row from the last one pressed, and a press with Control or Command adds or takes out one row under 'replace'.  **Leave 'selection-mode' unset for a list a reader reads**, and set it for one a reader chooses from or acts on. The rows of an interactive list are grid rows, which hold controls as a list box option cannot. Give a control in 'end' 'tabindex="-1"' to leave it to the arrow keys and out of the tab order.  'start' and 'reversed' number an ordered list as '<ol>' does. The list writes where the numbers start and which way they run as '--list-first' and '--list-step' on its slot, which the styled tier counts from. Reversed with no 'start' counts down from the number of rows, which a server cannot know, so served markup counts from one until the list runs. */
   "helix-headless-list": DefineCustomElement<
     HelixHeadlessList,
     HelixHeadlessListVueProps,
     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, 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'. */
+  /** 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.  **Keyboard.** The list is one tab stop, or its filter field is where there is one. In a single-choice list the highlight is the choice unless 'manual' is set; then Enter, Space or a click chooses.  | Key | What it does | |---|---| | Down, Up | Moves the highlight to the next or the previous option, round from the last to the first. With 'layout="grid"', to the option below or above, stopping at the edge. | | Right, Left | With 'layout="grid"', moves to the next or the previous option, mirrored right to left. In a filter field, moves the caret. | | Home, End | Moves to the first or the last option. In a filter field, moves the caret. | | Page Down, Page Up | Moves by as many options as the list shows at once. | | A letter or a word | Moves to the next option whose words start with what you typed. In a filter field, types it. | | Enter | Chooses the highlighted option, or follows it where it is a link. | | Space | Chooses the highlighted option, or with 'multiple' toggles it. In a filter field, types a space. | | Shift with Down or Up | With 'multiple', adds the option the highlight moves to. In a filter field, moves the highlight and leaves the value. | | Shift with Space | With 'multiple', adds every option from the one last chosen to the highlighted one. In a filter field, types a space. | | Shift with Home or End | With 'multiple', adds every option from the highlight to that end. In a filter field, hold Control as well. | | Control or Command with A | With 'multiple', chooses every option, or none where all are chosen. In a filter field, selects the text. | | Escape | In a filter field, clears the filter. |  **ARIA.** The 'items' part is the 'listbox', named by the label and described by the hint and the message, with 'aria-multiselectable' under 'multiple', 'aria-required', 'aria-invalid', and 'aria-busy' while loading. Each option is an 'option' with 'aria-selected'. The list, or its filter field, points 'aria-activedescendant' at the highlighted option; the field is 'aria-autocomplete="list"' and controls the list.  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,
@@ -15718,7 +16399,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMapLandcoverVueProps,
     HelixHeadlessMapLandcoverVueEvents
   >;
-  /** A button placed at a latitude and longitude. 'connectMap' positions it on the map and moves it as the map moves. Its name shows beside it on hover and focus.  Pressing a marker sends 'helix-activate' from the frame with the marker's 'name', or its 'label' if it has no name.  All the markers in a map share one tab stop. The arrow keys move between them in the order they are written. */
+  /** A button placed at a latitude and longitude. 'connectMap' positions it on the map and moves it as the map moves. Its name shows beside it on hover and focus.  Pressing a marker sends 'helix-activate' from the frame with the marker's 'name', or its 'label' if it has no name.  All the markers in a map share one tab stop. The arrow keys move between them in the order they are written. Taking away the marker that has focus moves focus to the next one, or to the one before where it was the last. */
   "helix-headless-map-marker": DefineCustomElement<
     HelixHeadlessMapMarker,
     HelixHeadlessMapMarkerVueProps,
@@ -15760,7 +16441,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMapTerrainVueProps,
     HelixHeadlessMapTerrainVueEvents
   >;
-  /** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands.  It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write.  It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section.  When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does. Moving toward the end of the bar, the one opening is ':state(from-end)' and the one closing is ':state(to-start)'; moving back, they are ':state(from-start)' and ':state(to-end)'. A stylesheet slides them on that. Start and end follow the reading direction, so on a right-to-left page the end is on the left. A panel that opens or closes on its own carries none of the four. A press on another megamenu's trigger hands over the same way as hovering it.  While a panel is open its surface carries its own size, as '--megamenu-surface-inline-size' and '--megamenu-surface-block-size', and a panel that took over from another also carries that one's size, as '--megamenu-from-inline-size' and '--megamenu-from-block-size'. Radix's navigation menu publishes the same pair from its shared viewport, so a stylesheet can grow or shrink one panel into the next.  Put megamenus in a 'Navigation' with 'arrows' and the arrow keys move between their triggers. Down Arrow on the trigger of an open panel moves focus to the panel's first link, Escape closes the panel and returns focus to its trigger, and Tab moves through the panel's links and closes it on the way out. The trigger says 'aria-expanded', and the panel is a group named by 'label'. */
+  /** A disclosure: a button that shows and hides a region of your own links. It does not use 'role="menu"' or 'menuitem', which are for application commands. Those roles take over the arrow keys, announce "menu" to someone looking for navigation, and put every link inside a role that is not a link. As a disclosure, middle clicks, modified clicks, and the status bar keep working. Use 'Menu' for a row of commands.  It renders no links. A router renders its own anchors and cannot render them inside this shadow root, so the panel is a slot for the lists and headings you write.  It opens on hover by default, and a press always opens it too. 'open-on' sets which. Hover is the default because in a navigation bar people expect to move along the row and see each section.  When one panel opens in place of another, each says which way the reader moved, as Radix's 'data-motion' does. Moving toward the end of the bar, the one opening is ':state(from-end)' and the one closing is ':state(to-start)'; moving back, they are ':state(from-start)' and ':state(to-end)'. A stylesheet slides them on that. Start and end follow the reading direction, so on a right-to-left page the end is on the left. A panel that opens or closes on its own carries none of the four. A press on another megamenu's trigger hands over the same way as hovering it.  While a panel is open its surface carries its own size, as '--megamenu-surface-inline-size' and '--megamenu-surface-block-size', and a panel that took over from another also carries that one's size, as '--megamenu-from-inline-size' and '--megamenu-from-block-size'. Radix's navigation menu publishes the same pair from its shared viewport, so a stylesheet can grow or shrink one panel into the next.  The panel's default slot is the 'columns' part and draws no box, so a sheet can give the columns one of their own. While a panel is open, an 'indicator' slot is rendered beside its trigger, as Radix's indicator marks the open one: slot a mark of your own, such as a bar or an arrow pointing at the panel, and it shows only while the panel is open. The styled tier rests it on the trigger's bottom edge.  Left and Right Arrow move between the triggers of the megamenus beside this one, and Home and End go to the first and the last, as Radix's navigation menu does. In a 'Navigation', which holds them in a slot, the arrows are the navigation's, and move between its destinations under its 'arrows'. Down Arrow on the trigger of an open panel moves focus to the panel's first link, Escape closes the panel and returns focus to its trigger, and Tab moves through the panel's links and closes it on the way out. The trigger says 'aria-expanded', and the panel is a group named by 'label'. */
   "helix-headless-megamenu": DefineCustomElement<
     HelixHeadlessMegamenu,
     HelixHeadlessMegamenuVueProps,
@@ -15772,7 +16453,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMenuItemVueProps,
     HelixHeadlessMenuItemVueEvents
   >;
-  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open. A plain '<button>' can only be told by writing attributes onto your markup, which the menu does not do, so give it 'aria-haspopup="menu"' and set its 'aria-expanded' from the 'toggle' event.  Submenus drill down. A submenu replaces the panel's content, and a back row returns to the previous page. One panel avoids the diagonal pointer path that side-by-side panels need, stays inside a narrow window, and works on touch screens, which have no hover.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider announced>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose, Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page, and Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. */
+  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open. A plain '<button>' can only be told by writing attributes onto your markup, which the menu does not do, so give it 'aria-haspopup="menu"' and set its 'aria-expanded' from the 'toggle' event.  Submenus drill down. A submenu replaces the panel's content, and a back row returns to the previous page. One panel avoids the diagonal pointer path that side-by-side panels need, stays inside a narrow window, and works on touch screens, which have no hover.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose, Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page, and Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,
@@ -15784,7 +16465,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMenuSectionVueProps,
     HelixHeadlessMenuSectionVueEvents
   >;
-  /** A meter shows a level within a range. Use 'Progress' to show how far along a task is. A progress bar starts empty and ends full, and full is always the good end. For a meter, which end is good depends on what is measured. There is no 'indeterminate', because a meter always has a value.  **Set 'low', 'high', and 'optimum'**, as defined in the HTML specification. 'low' and 'high' divide the range into a low band, a middle band, and a high band. 'optimum' sets the preferred band. The band next to it is fair, and the band two away is poor. */
+  /** A meter shows a level within a range. Use 'Progress' to show how far along a task is. A progress bar starts empty and ends full, and full is always the good end. For a meter, which end is good depends on what is measured. There is no 'indeterminate', because a meter always has a value.  **Set 'low', 'high', and 'optimum'**, as defined in the HTML specification. 'low' and 'high' divide the range into a low band, a middle band, and a high band. 'optimum' sets the preferred band. The band next to it is fair, and the band two away is poor.  The band is a custom state on the meter, 'good', 'fair' or 'poor', beside 'over' and 'under' for a value past an end, so a page styles the meter around the fill as well as the fill.  **'live' says the reading when it moves into another band**, such as "92%, Poor", in a polite region, for a meter whose value changes while a reader is on the page: a disk filling or a battery draining. The band's word comes from 'band-labels'. */
   "helix-headless-meter": DefineCustomElement<
     HelixHeadlessMeter,
     HelixHeadlessMeterVueProps,
@@ -15808,7 +16489,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationVueProps,
     HelixHeadlessNotificationVueEvents
   >;
-  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting.  **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it.  **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. While the feed is loading the button stays, so focus stays on it, and it is 'aria-disabled' and sends nothing. */
+  /** Notifications are slotted children. Each one is your own markup, with an avatar, a link, or a button in it. Feeds usually hold tens of items, so writing them out lets an item hold anything.  The list does not virtualize. Windowing needs the list to own the data, and here you own it, so N notifications are N elements. For a feed of thousands, use a data table with a custom cell.  Read state is reported to you. Marking read goes from the root to the item and from the item to you, so a canceled 'helix-read' changes nothing, and if you own 'read', nothing changes until you set it. 'unread' is derived from the items and written to an attribute, so a stylesheet and a badge can both use it without counting.  **The feed is one 'Tab' stop for its rows.** Each row takes focus itself and is read by its label. 'ArrowDown' and 'ArrowUp' move to the next and the previous row, 'Home' and 'End' to the first and the last, and 'PageDown' and 'PageUp' move a row on or back from anywhere inside one, as in the APG feed pattern. The controls inside a row stay in the 'Tab' order. Set 'total' when the feed holds one page of a longer list, and each row says its place in the whole of it.  **'load-more' adds a button after the list** that sends 'helix-load-more', for a feed that holds one page of a longer list. Append the next page, set 'loading' while it is on its way, and take 'load-more' off once there is nothing more. While the feed is loading the button stays, so focus stays on it, and it is 'aria-disabled' and sends nothing.  **'load-error' says a page could not be fetched**, such as "Could not load notifications": it shows under the rows there are, in the 'error' part, in place of the empty and loading lines, and a screen reader hears it. Clear it when you ask again. */
   "helix-headless-notifications": DefineCustomElement<
     HelixHeadlessNotifications,
     HelixHeadlessNotificationsVueProps,
@@ -15820,7 +16501,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNumberInputVueProps,
     HelixHeadlessNumberInputVueEvents
   >;
-  /** Object Inspector shows a structured value, such as an API response, a config, or a raw record, as a read-only tree with each entry's type visible.  Pass the object to 'value', or name a '<script type="application/json">' by id with 'for', the same source 'VirtualList' and the charts read. JSON text works with server rendering and with React hydration, which skips object properties. 'value' wins when both are set.  **Keyboard.** The tree is one tab stop, and focus moves from row to row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. | | Right | Opens a closed branch, or moves into an open one. Left on a right-to-left page. | | Left | Closes an open branch, or moves to the parent. Right on a right-to-left page. | | Home, End | Moves to the first or the last row. | | Enter, Space | Opens or closes a branch. | | '*' | Opens every branch beside the active row. | | A letter or a word | Moves to the next row whose key starts with what you typed. | | Command+C, Control+C | Copies the active row, where no text is selected. |  The tree is a 'treegrid', as React Aria's Tree is: each entry is a 'row' with one cell, and carries its real level, position, and set size, including in a windowed tree. Nothing in it is chosen, so no row carries 'aria-selected', and a focused row is not announced as selected.  A reader opening or closing a branch sends 'helix-before-open' or 'helix-before-close', which you can cancel, and then 'toggle' with 'newState' and 'oldState', as '<details>' does. The branch is the active row, and 'expanded' holds every open branch. '*' asks once for all the branches it opens. A script writing 'expanded' or 'active' sends nothing.  'active' is the active row's path, written the way a JSON Pointer writes it: the empty string for the root and '/meta/tags/0' for an entry under it. Moving to another row sends 'helix-before-activate', which you can cancel, and then 'helix-activate', both with the path. Writing 'active' moves there and opens the branches around it, and sends nothing. 'expanded' holds the open branches by path, and writing it opens those and closes the rest. A row that closes around the active one hands it to the nearest open branch.  'filter' narrows the tree to the entries whose key or value holds the text, ignoring case, and the branches that lead to them, which it opens. A matched branch keeps everything under it. Each matched row carries 'row-match', and a screen reader hears how many entries matched from 'result-label' and 'results-label'. 'filterable' adds a field that sets it: typing sends 'helix-filter', which you can cancel, and then 'helix-filtered', and Down moves from the field to the tree.  A new 'value' keeps the branches a reader opened or closed, and the active row, where the new value still has them. A branch the old value did not have opens to 'default-depth'.  The copy button copies the active row, a branch as JSON and a string as its text. So do Command+C and Control+C while the tree has focus and no text is selected. The button sits beside the tree, because assistive technology cannot reliably reach a button inside a tree item.  'windowed' draws only the rows in view, for values with thousands of entries. The box needs a height for windowing to work. The styled tier sets one, and in the headless tier you set it yourself. */
+  /** Object Inspector shows a structured value, such as an API response, a config, or a raw record, as a read-only tree with each entry's type visible.  Pass the object to 'value', or name a '<script type="application/json">' by id with 'for', the same source 'VirtualList' and the charts read. JSON text works with server rendering and with React hydration, which skips object properties. 'value' wins when both are set.  **Keyboard.** The tree is one tab stop, and focus moves from row to row.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous row. | | Right | Opens a closed branch, or moves into an open one. Left on a right-to-left page. | | Left | Closes an open branch, or moves to the parent. Right on a right-to-left page. | | Home, End | Moves to the first or the last row. | | Page Down, Page Up | Moves a box's height of rows, so the row at one edge lands at the other. | | Enter, Space | Opens or closes a branch. | | '*' | Opens every branch beside the active row. | | A letter or a word | Moves to the next row whose key starts with what you typed. | | Command+C, Control+C | Copies the active row, where no text is selected. |  The tree is a 'treegrid', as React Aria's Tree is: each entry is a 'row' with one cell, and carries its real level, position, and set size, including in a windowed tree. Nothing in it is chosen, so no row carries 'aria-selected', and a focused row is not announced as selected.  A reader opening or closing a branch sends 'helix-before-open' or 'helix-before-close', which you can cancel, and then 'toggle' with 'newState' and 'oldState', as '<details>' does. The branch is the active row, and 'expanded' holds every open branch. '*' asks once for all the branches it opens. A script writing 'expanded' or 'active' sends nothing.  'active' is the active row's path, written the way a JSON Pointer writes it: the empty string for the root and '/meta/tags/0' for an entry under it. Moving to another row sends 'helix-before-activate', which you can cancel, and then 'helix-activate', both with the path. Writing 'active' moves there and opens the branches around it, and sends nothing. 'expanded' holds the open branches by path, and writing it opens those and closes the rest. A row that closes around the active one hands it to the nearest open branch.  'filter' narrows the tree to the entries whose key or value holds the text, ignoring case, and the branches that lead to them, which it opens. A matched branch keeps everything under it. Each matched row carries 'row-match', and a screen reader hears how many entries matched from 'result-label' and 'results-label'. 'filterable' adds a field that sets it: typing sends 'helix-filter', which you can cancel, and then 'helix-filtered', and Down moves from the field to the tree.  A new 'value' keeps the branches a reader opened or closed, and the active row, where the new value still has them. A branch the old value did not have opens to 'default-depth'.  The copy button copies the active row, a branch as JSON and a string as its text. So do Command+C and Control+C while the tree has focus and no text is selected. The button sits beside the tree, because assistive technology cannot reliably reach a button inside a tree item.  'windowed' draws only the rows in view, for values with thousands of entries. The box needs a height for windowing to work. The styled tier sets one, and in the headless tier you set it yourself. */
   "helix-headless-object-inspector": DefineCustomElement<
     HelixHeadlessObjectInspector,
     HelixHeadlessObjectInspectorVueProps,
@@ -15838,7 +16519,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessOptionVueProps,
     HelixHeadlessOptionVueEvents
   >;
-  /** Outline is a table of contents for a document. 'Navigation' does the same job for a site.  The links are your own anchors. A router renders its own '<a>' and cannot render one inside the outline's shadow root, and the hrefs are fragments on the same page.  Write the anchors flat, with 'data-level' for their depth, or nested in lists, '<ul><li><a>'. A screen reader hears the levels either way: the outline puts a flat run into lists inside list items of its own, nested by 'data-level', and leaves the links where they are. A link without 'data-level' is at the top level.  A heading slotted into 'heading' names the navigation, in place of 'label'.  In a contents rail with a scrollbar of its own, 'follow' keeps the link of the section in view showing as the reader scrolls the page.  The current section is decided by the headings' positions. An 'IntersectionObserver' with a band near the top fails both ways: when headings are far apart, none is in the band and no section is marked, and when they are close together, several are in the band at once. */
+  /** Sets one run of options apart from the next where a heading would say too much, as React Aria's ListBox takes a 'Separator': actions apart from choices in a command palette, say, or the options a reader uses most apart from the rest.  It has 'role="separator"', so a screen reader can say where one run ends, and it is no stop: the arrow keys move from the option before it to the one after. The list hides it while a filter is narrowing the options, since a rule between two runs of which only some options are left separates nothing. */
+  "helix-headless-option-separator": DefineCustomElement<
+    HelixHeadlessOptionSeparator,
+    HelixHeadlessOptionSeparatorVueProps,
+    HelixHeadlessOptionSeparatorVueEvents
+  >;
+  /** Outline is a table of contents for a document. 'Navigation' does the same job for a site.  The links are your own anchors. A router renders its own '<a>' and cannot render one inside the outline's shadow root, and the hrefs are fragments on the same page.  Write the anchors flat, with 'data-level' for their depth, or nested in lists, '<ul><li><a>'. A screen reader hears the levels either way: the outline puts a flat run into lists inside list items of its own, nested by 'data-level', and leaves the links where they are. A link without 'data-level' is at the top level.  A heading slotted into 'heading' names the navigation, in place of 'label'.  In a contents rail with a scrollbar of its own, 'follow' keeps the link of the section in view showing as the reader scrolls the page.  **Keyboard.** The links are your anchors, in the tab order as you wrote them, so the outline adds no keys of its own: Tab moves through the links and Enter follows one. Following a link moves focus to its section, so the next Tab goes on from the heading, also with 'behavior' set.  **What a screen reader hears.** A navigation landmark named by 'label', "On this page", or by the slotted heading. The links are lists, nested by level, so a reader hears how many links a level holds and where each one is. The link to the section in view carries 'aria-current="location"', read as "current location", and it moves as the page scrolls without announcing, which would interrupt the reading it follows.  The current section is decided by the headings' positions. An 'IntersectionObserver' with a band near the top fails both ways: when headings are far apart, none is in the band and no section is marked, and when they are close together, several are in the band at once. */
   "helix-headless-outline": DefineCustomElement<
     HelixHeadlessOutline,
     HelixHeadlessOutlineVueProps,
@@ -15850,7 +16537,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessPaginationVueProps,
     HelixHeadlessPaginationVueEvents
   >;
-  /** A separate element that you place beside 'Pagination', like 'Pagination.Summary', so you choose the direction and order of your footer.  It uses 'Select', so it matches a table's filter dropdowns in the same footer, both open and closed. The caret is 'Select''s, so it follows 'currentColor', and the label is a real '<label for>' pointing at the trigger's id.  The label sits on the same row as the select. 'Select''s host is a column, and an outer-tree rule overrides a ':host' rule, so the row layout needs no property on 'Select' and nothing added to your markup.  An empty 'sizes' renders nothing and does not fall back to the built-in list. 'Pagination' does the same with a single page, and both report it through 'ElementInternals.states'.  'value' is the current size, and 'default-value' is the size from the markup. Changing it dispatches 'helix-before-change', and then 'input' and 'change' once the size has moved, as a native '<select>' sends them together. Re-querying and returning to page one is up to you, because only you know whether the current position should be kept.  It takes part in a form. Give it a 'name' and the size in force is submitted under that name, so a 'GET' form carries it in the address beside the page. A form reset returns it to 'default-value', and 'disabled', or a disabled '<fieldset>' around it, turns the select off. */
+  /** A separate element that you place beside 'Pagination', like 'Pagination.Summary', so you choose the direction and order of your footer.  It uses 'Select', so it matches a table's filter dropdowns in the same footer, both open and closed. The caret is 'Select''s, so it follows 'currentColor', and the label is a real '<label for>' pointing at the trigger's id.  A '<label for>' pointing at this element, or its own 'aria-label' or 'aria-labelledby', names the select in place of 'label', so a reader hears the page's words for it, and the select draws no label of its own beside the page's.  The label sits on the same row as the select. 'Select''s host is a column, and an outer-tree rule overrides a ':host' rule, so the row layout needs no property on 'Select' and nothing added to your markup.  An empty 'sizes' renders nothing and does not fall back to the built-in list. 'Pagination' does the same with a single page, and both report it through 'ElementInternals.states'.  'value' is the current size, and 'default-value' is the size from the markup. Changing it dispatches 'helix-before-change', and then 'input' and 'change' once the size has moved, as a native '<select>' sends them together. Re-querying and returning to page one is up to you, because only you know whether the current position should be kept.  It takes part in a form. Give it a 'name' and the size in force is submitted under that name, so a 'GET' form carries it in the address beside the page. A form reset returns it to 'default-value', and 'disabled', or a disabled '<fieldset>' around it, turns the select off. */
   "helix-headless-pagination-size": DefineCustomElement<
     HelixHeadlessPaginationSize,
     HelixHeadlessPaginationSizeVueProps,
@@ -15862,7 +16549,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessPaginationSummaryVueProps,
     HelixHeadlessPaginationSummaryVueEvents
   >;
-  /** Each cell is its own '<input>', so every box has a real focus ring, caret, and tab stop.  Input longer than one character is treated as a paste, in any cell. This covers pasting, a browser autofilling an SMS code, and a password manager, which all put the whole code into the focused box. A six-character code that arrives in cell three fills from cell three.  The code is one value to a form. The cells are in a shadow root and submit nothing. The host is form-associated and submits the joined string, which also carries validity and responds to a form reset.  Only the first cell has 'autocomplete="one-time-code"', because the hint applies to the whole field.  'autosubmit' submits the form once the last box is filled, through the form's default button where there is one. 'format' draws separators between the boxes, such as the dash in '###-###', as text a screen reader skips. Delete removes the character in the focused box and pulls the rest of the code back, as Backspace removes the one before it.  The row of cells always runs left to right, with 'dir="ltr"', including in Arabic and Hebrew. The first box is the leftmost, a paste fills to the right, and the right arrow moves to the next box. The label, hint, and feedback follow the page's direction.  **Keyboard.** Each box is a tab stop of its own, as each is a real input.  | Key | What it does | |---|---| | A character | Fills the box and moves to the next one. A longer run is read as a paste. | | Left, Right | Moves to the box before or after. | | Home, End | Moves to the first box, or to the box after the last character. | | Backspace | In an empty box, clears the box before it and moves there. | | Delete | Removes the character in the box and pulls the rest of the code back. | | Enter | Submits the form. |  The row has 'role="group"' and the field's name, and each box is named by 'cell-label', such as "Character 2 of 6". 'helix-complete' is a 'HelixCompleteEvent' sent once the last box is filled. */
+  /** One real '<input>' holds the code, and the boxes are drawn from it, as Web Awesome's OTP input does. A screen reader meets one field, named by the label, and the code never sits in a row of separate fields. The boxes are hidden from it.  The caret is drawn in the box it is in, and the box is marked with 'cell-active' while the field has focus. A filled box selects its character, so typing replaces it and moves on.  Input longer than one character is treated as a paste. This covers pasting, a browser autofilling an SMS code, and a password manager. A six-character code pasted into an empty field fills from the first box.  The code is one value to a form. The field is in a shadow root and submits nothing. The host is form-associated and submits the code, which also carries validity and responds to a form reset. The field carries 'autocomplete="one-time-code"', which lets a phone offer the code from a message.  '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. 'mask' makes the field a password field and draws 'mask-character' in each filled box, so the code is never drawn as text.  The row of boxes always runs left to right, with 'dir="ltr"', including in Arabic and Hebrew. The first box is the leftmost, a paste fills to the right, and the right arrow moves to the next box. The label, hint, and feedback follow the page's direction.  **Keyboard.** The field is one tab stop.  | Key | What it does | |---|---| | A character | Fills the box and moves to the next one. A longer run is read as a paste. | | Left, Right | Moves to the box before or after. | | Home, End | Moves to the first box, or to the box after the last character. | | Backspace | Removes the character in the box, or in an empty box the one before it, and moves there. | | Delete | Removes the character in the box and pulls the rest of the code back. | | Enter | Submits the form. |  The field is a text field, or a password field under 'mask', named by the label and described by the hint and the message, with 'aria-invalid' while a message shows and 'aria-required' under 'required'. 'helix-complete' is a 'HelixCompleteEvent' sent once the last box is filled. */
   "helix-headless-pin-input": DefineCustomElement<
     HelixHeadlessPinInput,
     HelixHeadlessPinInputVueProps,
@@ -15874,13 +16561,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessPopoverVueProps,
     HelixHeadlessPopoverVueEvents
   >;
-  /** Determinate by default. Set 'indeterminate' for a task whose total is not known yet. Use 'Loader' for a short wait or one with no place of its own on the page.  The indeterminate bar runs a segment across the track and does not fill, so it shows that work is happening without claiming a proportion. 'aria-valuenow' is omitted in that state, which is the platform's signal for the same thing.  The fill is a fraction of the track, written as a custom property. */
+  /** Determinate by default. Set 'indeterminate' for a task whose total is not known yet. Use 'Loader' for a short wait or one with no place of its own on the page.  The indeterminate bar runs a segment across the track and does not fill, so it shows that work is happening without claiming a proportion. 'aria-valuenow' is omitted in that state, which is the platform's signal for the same thing.  The fill is a fraction of the track, written as a custom property.  **Reaching 'max' is said and sent.** When the value arrives at 'max' from below, the bar says 'complete-label', "Complete" by default, in a polite 'live' region and sends 'helix-complete', so a reader hears that the work is done and a page can move on. A bar that starts full says nothing, and an empty 'complete-label' keeps it quiet. The 'complete' custom state is set while the bar is full. */
   "helix-headless-progress": DefineCustomElement<
     HelixHeadlessProgress,
     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: the element fires 'error', carries ':state(overflow)', and shows what is in the 'fallback' slot, such as the link written out.  'toSvg()', 'toPng()' and 'download()' give the drawn code as a file of its own, in the colors it is drawn in, with a slotted image or SVG logo where it sits, for a page that offers it to save or print, as Zag's download trigger does. */
+  /** 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 'label' to what the code is for, such as "Open the menu". With no 'label', a code is named by 'code-label', "QR code", followed by its value where the value is a web address, which a URL read aloud makes a destination. Any other value is never read out: a code that sets up an authenticator or joins a network carries a secret in it.  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 code that holds a logo at a 'correction' below 'H' warns once with the kind 'unscannable-logo'.  A higher level holds fewer characters, so a value that fits at 'M' can be too long once a logo raises the level to 'H'. A value too long for the level draws no code: the element fires 'error', carries ':state(overflow)', and shows what is in the 'fallback' slot, such as the link written out.  'toSvg()', 'toPng()' and 'download()' give the drawn code as a file of its own, in the colors it is drawn in, with a slotted image or SVG logo where it sits, for a page that offers it to save or print, as Zag's download trigger does. 'download()' saves an SVG for a name ending in '.svg', and a PNG for any other. */
   "helix-headless-qr-code": DefineCustomElement<
     HelixHeadlessQrCode,
     HelixHeadlessQrCodeVueProps,
@@ -15892,7 +16579,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'.  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. */
+  /** 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.  **Keyboard.** The group is one tab stop: the chosen radio, or the first that can be chosen.  | Key | What it does | |---|---| | Right, Down | Chooses the next radio, from the last back to the first. | | Left, Up | Chooses the radio before, from the first round to the last. | | Home, End | Chooses the first or the last radio. | | Space, Enter | Chooses the focused radio. |  Left and Right swap on a right-to-left page, and a disabled radio is passed over. Under 'readonly' the arrows move focus and choose nothing. The group is a 'radiogroup' named by 'label', and each radio is a 'role="radio"' button with 'aria-checked'. */
   "helix-headless-radio-group": DefineCustomElement<
     HelixHeadlessRadioGroup,
     HelixHeadlessRadioGroupVueProps,
@@ -15904,13 +16591,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.  With 'clearable', pressing the chosen score again, or Backspace or Delete on the marks, takes the rating back to unrated and sends 'helix-clear'. */
+  /** 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'.  **Keyboard.** The marks are one tab stop, on the chosen score or the first.  | Key | What it does | |---|---| | Right, Down | Chooses the next score up, and stops at the highest. | | Left, Up | Chooses the next score down, and stops at the lowest. | | Home, End | Chooses the lowest or the highest score. | | Space, Enter | Chooses the focused score, or clears it under 'clearable' when it is already chosen. | | Backspace, Delete | Clears the rating, under 'clearable'. |  Left and Right swap on a right-to-left page. The marks are a 'radiogroup' named by 'label', and each score is a 'radio' named by 'option-label', such as "3 out of 5". A read-only rating is one 'img' named by its score. */
   "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.  'trend' draws each series' line of best fit, by least squares, across the plot in the series' color.  The summary gives each series' correlation coefficient and its number of points. The table has every number, and the drawing is hidden from screen readers.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from row to row in the table's order, Home and End go to the first and the last, and the up and down arrows move among the series of a row. The tooltip sits on that point, the 'live' part says the row in words, and Escape puts the tooltip away.  Each point is a '<span>' placed by percentage over the drawing, as 'LineChart' places its end points, so points stay round when the drawing stretches.  The plot runs left to right in every text direction, as a number line does. The plot, its axes, and the axis names sit in a 'plane' part with 'dir="ltr"'. The axis names carry 'dir="auto"', so a name in Arabic or Hebrew reads in its own direction. The summary and the tooltip bubble follow the page's direction. */
+  /** A scatter chart shows how two measures relate. The table's first numeric column is measured across, every other numeric column is measured up, and each row is one point. A table of countries with an income column and a life expectancy column draws one point for each country. Each additional numeric column is another series, in its own color.  Both axes are labeled, because both positions are values. The ticks sit at round numbers, and the range extends to them.  'trend' draws each series' line of best fit, by least squares, across the plot in the series' color.  **'size-by' names a third measure, drawn as each point's size**, as a bubble chart does: 'size-by="Population"' takes that column out of the series and gives each point an area in proportion to its row's number there. The tooltip and the table still say the number.  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,
@@ -15922,7 +16609,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessScrollAreaVueProps,
     HelixHeadlessScrollAreaVueEvents
   >;
-  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  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.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
   "helix-headless-select": DefineCustomElement<
     HelixHeadlessSelect,
     HelixHeadlessSelectVueProps,
@@ -15946,25 +16633,31 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSliderVueProps,
     HelixHeadlessSliderVueEvents
   >;
-  /** Takes its numbers from the 'values' attribute. The other charts read a table, but a table behind a small trend line would be read aloud row by row. Set 'values' to the data and 'label' to the one sentence a screen reader announces.  Use 'for' when a sparkline has a real table behind it. 'for' wins when both are set.  Without a 'label' the sparkline is decorative and 'aria-hidden', for example beside a stat that already says "Sessions, 1,102". With a 'label' it is named by that sentence and read by key, as every chart is: the drawing takes focus, the arrow keys walk the readings, Home and End go to the first and the last, Escape puts the reading away, and the 'live' part says each reading with where it stands, such as "Mon: 12 (3 of 7)".  A pointer resting on the drawing shows the reading under it: the 'cursor' part marks it and the 'readout' part writes it. 'marks' adds a mark on the highest and the lowest reading. A blank cell in a 'for' table is a gap in the line.  Place it beside a 'Stat', because a change beside a figure is a second fact, as 'Stat''s own spec says. 'Trend' is composed the same way.  The component writes the properties listed below, and the stylesheet that draws the sparkline reads them. Do not set them yourself. They carry numbers the component computes and CSS cannot, so a stylesheet can draw the sparkline without measuring anything. */
+  /** Takes its numbers from the 'values' attribute. The other charts read a table, but a table behind a small trend line would be read aloud row by row. Set 'values' to the data and 'label' to the one sentence a screen reader announces.  Use 'for' when a sparkline has a real table behind it. 'for' wins when both are set.  Without a 'label' the sparkline is decorative and 'aria-hidden', for example beside a stat that already says "Sessions, 1,102". With a 'label' it is named by that sentence and read by key, as every chart is: the drawing takes focus, the arrow keys walk the readings, Home and End go to the first and the last, Escape puts the reading away, and the 'live' part says each reading with where it stands, such as "Mon: 12 (3 of 7)".  **A named sparkline describes itself.** Beside its name, a screen reader hears what the readings come to, the first and the last, the highest and the lowest, in 'overview-label': "From 12 to 20, highest 30, lowest 8". An 'aria-label' on the element names it as 'label' does.  A pointer resting on the drawing shows the reading under it: the 'cursor' part marks it and the 'readout' part writes it. 'marks' adds a mark on the highest and the lowest reading, and 'range' draws a band between two values, such as a normal range. A blank cell in a 'for' table is a gap in the line, and a reading alone between two blanks is a 'lone' mark.  Place it beside a 'Stat', because a change beside a figure is a second fact, as 'Stat''s own spec says. 'Trend' is composed the same way.  The component writes the properties listed below, and the stylesheet that draws the sparkline reads them. Do not set them yourself. They carry numbers the component computes and CSS cannot, so a stylesheet can draw the sparkline without measuring anything. */
   "helix-headless-sparkline": DefineCustomElement<
     HelixHeadlessSparkline,
     HelixHeadlessSparklineVueProps,
     HelixHeadlessSparklineVueEvents
   >;
-  /** Each item is a command, so it has the 'menuitem' role. A megamenu holds destinations, so it is a disclosure of links. A speed dial holds actions, which is what 'role="menu"' is for.  The name is text rendered beside the icon, and it is the accessible name. A 'title' on an icon shows only on hover. Visible text is read, searched, and translated like other text. */
+  /** A 'group' of the dial's menu, named by its label, as React Aria's menu sections and Menu's groups are: a reader hears the name on entering the set, and the arrow keys walk through every group's actions in order, from the last action of one group to the first of the next.  Put actions straight into the group, and the group straight into the dial. Anything else slotted here is drawn and is not an action. */
+  "helix-headless-speed-dial-group": DefineCustomElement<
+    HelixHeadlessSpeedDialGroup,
+    HelixHeadlessSpeedDialGroupVueProps,
+    HelixHeadlessSpeedDialGroupVueEvents
+  >;
+  /** Each item is a command, so it has the 'menuitem' role. A megamenu holds destinations, so it is a disclosure of links. A speed dial holds actions, which is what 'role="menu"' is for.  The name is text rendered beside the icon, and it is the accessible name. A 'title' on an icon shows only on hover. Visible text is read, searched, and translated like other text.  'shortcut' gives the action's keyboard shortcut as a chord, such as 'mod+s', the grammar Menu's rows use. The action carries it as 'aria-keyshortcuts' and draws it after the name in the platform's glyphs or words, '⌘S' on an Apple keyboard and 'Ctrl+S' elsewhere, as Menu draws its rows' shortcuts. Put a 'Kbd' in the 'shortcut' slot to draw it as keys instead; the dial imports no 'Kbd' of its own. Showing a shortcut does not bind it. */
   "helix-headless-speed-dial-item": DefineCustomElement<
     HelixHeadlessSpeedDialItem,
     HelixHeadlessSpeedDialItemVueProps,
     HelixHeadlessSpeedDialItemVueEvents
   >;
-  /** A speed dial is a menu. Its items are commands, so it uses 'role="menu"' and 'menuitem', and it is built from the same pieces as 'Menu': - 'KeyboardNavigationController' for the arrow keys - 'PopoverController' for the panel - 'MixinControllerOpen' for open and closed  It is a separate component because a speed dial has no submenus, headers, or checkable items.  You slot the trigger. The usual floating action button is 'IconButton' with 'shape="circle"' and 'raised'. There is no 'helix-fab', because 'IconButton' already has 'emphasis', 'tone', 'label', and a size. Position the button with 'data-dock' in the base layer.  All four arrow keys move through the actions, because a speed dial has no nested levels to reserve the horizontal pair for. This is the default behavior of the keyboard controller. Typing a letter moves to the next action whose name starts with it. The actions are one tab stop, and Tab closes the dial and moves on. */
+  /** A speed dial is a menu. Its items are commands, so it uses 'role="menu"' and 'menuitem', and it is built from the same pieces as 'Menu': - 'KeyboardNavigationController' for the arrow keys - 'PopoverController' for the panel - 'MixinControllerOpen' for open and closed  It is a separate component because a speed dial has no submenus, headers, or checkable items.  You slot the trigger. The usual floating action button is 'IconButton' with 'shape="circle"' and 'raised'. There is no 'helix-fab', because 'IconButton' already has 'emphasis', 'tone', 'label', and a size. Position the button with 'data-dock' in the base layer.  All four arrow keys move through the actions, because a speed dial has no nested levels to reserve the horizontal pair for. This is the default behavior of the keyboard controller. Typing a letter moves to the next action whose name starts with it. The actions are one tab stop, and Tab closes the dial and moves on.  **Keyboard.** On the trigger, Enter, Space or a press opens the dial on its first action. With the dial open:  | Key | What it does | |---|---| | Down, Right | Moves to the next action, from the last back to the first. | | Up, Left | Moves to the action before, from the first round to the last. | | Home, End | Moves to the first or the last action. | | A letter | Moves to the next action whose name starts with it. | | Enter, Space | Chooses the action, and the dial closes. | | Escape | Closes the dial and puts focus back on the trigger. | | Tab | Closes the dial and moves on. |  **Groups.** Put actions in 'Speed Dial.Group', named by its 'label', to set them apart as Menu's sections do: each is a 'group' of the menu, and the arrow keys walk through every group's actions in order.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, such as composing a message, and holding it for half a second opens the dial, as React Aria's menu trigger does with 'trigger="longPress"'. Alt+Down or Alt+Up opens it from the keyboard, and the trigger says so in its description, 'long-press-label', the drawn one and a slotted one alike. A press that has opened the dial does not also do the trigger's action. */
   "helix-headless-speed-dial": DefineCustomElement<
     HelixHeadlessSpeedDial,
     HelixHeadlessSpeedDialVueProps,
     HelixHeadlessSpeedDialVueEvents
   >;
-  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'. */
+  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', with 'aria-valuetext' saying the start pane's share as a percentage in the reader's locale, and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'. */
   "helix-headless-splitter": DefineCustomElement<
     HelixHeadlessSplitter,
     HelixHeadlessSplitterVueProps,
@@ -15982,7 +16675,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessStatVueProps,
     HelixHeadlessStatVueEvents
   >;
-  /** 'active' sets where the user is, and 'complete' stays on each step. Returning to stage one of three leaves stages one and two finished, so the root sets 'current' on the steps and never changes 'complete'.  'active' is optional. Without it, each step keeps its own 'current', so the sequence is correct in the server's markup, where the root cannot count its slotted children.  'linear' keeps a reader from passing a stage they have not finished, as Ark UI's linear steps do: a stage ahead is out of reach, and its button disabled, until every stage before it is 'complete' or 'optional'. Going back is always allowed. 'next()' and 'previous()' move one stage either way, under the same rules, for your own buttons.  To check a stage before a reader moves on from it, set 'validate' to a function that answers whether the stage is valid, as Ark UI's 'isStepValid' does. Moving forward asks it about the stage the reader is on, and where it answers 'false' the reader stays and the stage is ':state(invalid)' until it answers 'true'. An 'optional' stage is not asked. 'helix-before-activate' is still sent for every move, for a check of your own.  'progress' is how far through the sequence is, from 0 to 100: the share of its stages that are 'complete'. The 'progress' part carries it as a 'progressbar' and as '--steps-progress', and is hidden until a stylesheet gives it a 'display', so a bar of your own costs nothing until you draw it. The sequence is ':state(complete)' once every stage is.  The sequence is a list named by 'label', and each step a list item. The current stage's button says 'aria-current="step"', and a finished stage's button is described by its 'complete-label'. */
+  /** 'active' sets where the user is, and 'complete' stays on each step. Returning to stage one of three leaves stages one and two finished, so the root sets 'current' on the steps and never changes 'complete'.  'active' is optional. Without it, each step keeps its own 'current', so the sequence is correct in the server's markup, where the root cannot count its slotted children.  'linear' keeps a reader from passing a stage they have not finished, as Ark UI's linear steps do: a stage ahead is out of reach, and its button disabled, until every stage before it is 'complete' or 'optional'. Going back is always allowed. 'next()' and 'previous()' move one stage either way, under the same rules, for your own buttons.  To check a stage before a reader moves on from it, set 'validate' to a function that answers whether the stage is valid, as Ark UI's 'isStepValid' does. Moving forward asks it about the stage the reader is on, and where it answers 'false' the reader stays and the stage is ':state(invalid)' until it answers 'true'. An 'optional' stage is not asked. 'helix-before-activate' is still sent for every move, for a check of your own.  'progress' is how far through the sequence is, from 0 to 100: the share of its stages that are 'complete'. The 'progress' part carries it as a 'progressbar' and as '--steps-progress', and is hidden until a stylesheet gives it a 'display', so a bar of your own costs nothing until you draw it. A screen reader hears it as 'progress-label' says, "33% complete" unless set, as Ark UI's steps write it. The sequence is ':state(complete)' once every stage is.  The sequence is a list named by 'label', and each step a list item. The current stage's button says 'aria-current="step"', and a finished stage's button is described by its 'complete-label'. */
   "helix-headless-steps": DefineCustomElement<
     HelixHeadlessSteps,
     HelixHeadlessStepsVueProps,
@@ -16000,7 +16693,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSwitchVueProps,
     HelixHeadlessSwitchVueEvents
   >;
-  /** Sets its own role, because a grid of elements has no table structure for assistive technology otherwise. 'header' makes the cell a header, so a screen reader announces it with the values it heads:  - In a row that holds a cell without 'header', it is a 'rowheader' and names   its row, for example "web-app" in a row of a service's values. - In a row of 'header' cells alone, it is a 'columnheader', which is what a   table with no 'TableColumn' heads its columns with.  The role is on the host so the cell stays a child of its row in the flat tree, which keeps the table structure intact. */
+  /** Sets its own role, because a grid of elements has no table structure for assistive technology otherwise. 'header' makes the cell a header, so a screen reader announces it with the values it heads:  - In a row that holds a cell without 'header', it is a 'rowheader' and names   its row, for example "web-app" in a row of a service's values. - In a row of 'header' cells alone, it is a 'columnheader', which is what a   table with no 'TableColumn' heads its columns with.  The role is on the host so the cell stays a child of its row in the flat tree, which keeps the table structure intact. In a 'grid' table a value is a 'gridcell', and the table gives the cell a 'tabindex' so focus can rest on it. */
   "helix-headless-table-cell": DefineCustomElement<
     HelixHeadlessTableCell,
     HelixHeadlessTableCellVueProps,
@@ -16012,13 +16705,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTableColumnVueProps,
     HelixHeadlessTableColumnVueEvents
   >;
-  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. For a grid a reader moves through with the arrow keys, with typeahead and range selection, use 'DataTable'. To act on one row, put a link or a button in a cell.  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
+  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one. For typeahead and range selection, use 'DataTable'.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Tab | Leaves the table. |  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
   "helix-headless-table": DefineCustomElement<
     HelixHeadlessTable,
     HelixHeadlessTableVueProps,
     HelixHeadlessTableVueEvents
   >;
-  /** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive.  In a 'selectable' table the row draws a checkbox cell before its own cells, and 'value' is the key the table's 'selected' lists it by. */
+  /** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive.  In a 'selectable' table the row draws a checkbox cell before its own cells, and 'value' is the key the table's 'selected' lists it by.  **'href' makes the whole row a link**, as a row action does in React Aria's table: a press anywhere on the row follows it, except on a link or a control of the row's own, and Control, Command or Shift open it the way they open a link. A drag that selects text follows nothing. A row in a table is not a stop of its own, so put the same link in a cell, usually the row header, which is what the keyboard and a screen reader reach. In a 'grid' table, Enter on any cell of the row follows it as well. */
   "helix-headless-table-row": DefineCustomElement<
     HelixHeadlessTableRow,
     HelixHeadlessTableRowVueProps,
@@ -16030,7 +16723,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTabPanelVueProps,
     HelixHeadlessTabPanelVueEvents
   >;
-  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link, and the arrow keys move focus without choosing, so arrowing past a tab never leaves the page. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
+  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
   "helix-headless-tabs": DefineCustomElement<
     HelixHeadlessTabs,
     HelixHeadlessTabsVueProps,
@@ -16042,7 +16735,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTabVueProps,
     HelixHeadlessTabVueEvents
   >;
-  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over. A selected tag that is removed leaves 'value', which then sends 'change'.  Name the set with 'label'. Each tag is named by its words alone, without its remove button.  **Removing the last tag keeps focus in the group.** With no tags left the set is a 'group', and focus moves to its 'empty' part, which holds the 'empty' slot: put words there such as "No filters" for a reader to hear. */
+  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over. A selected tag that is removed leaves 'value', which then sends 'change'.  Name the set with 'label'. Each tag is named by its words alone, without its remove button. 'value' takes an array of values on the property as well, as React sets 'value={['Apple']}'; a press writes it back as a string.  **Removing the last tag keeps focus in the group.** With no tags left the set is a 'group', and focus moves to its 'empty' part, which holds the 'empty' slot: put words there such as "No filters" for a reader to hear. With nothing slotted it says 'empty-label', "No tags". */
   "helix-headless-tag-group": DefineCustomElement<
     HelixHeadlessTagGroup,
     HelixHeadlessTagGroupVueProps,
@@ -16054,7 +16747,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTagVueProps,
     HelixHeadlessTagVueEvents
   >;
-  /** Renders a '<textarea>', so the caret, selection, spellcheck, resize handle, and phone keyboard come from the platform. It is in the server markup, so the field works before any script loads.  It is a separate element from 'Input' because Enter inserts a line break here. In a single-line field, Enter submits the form.  'rows' sets the starting height, and 'auto-grow' makes the field grow with its content. You can use both: 'rows' sets where an empty field begins. 'max-rows' stops the growth at that many lines, and the field scrolls past them.  'clearable' draws a button that empties the field while it holds text, and sends 'helix-clear', as 'Input' does. 'validate' adds your own rule, run on every change once the browser finds nothing wrong, as React Aria's TextField 'validate' does. */
+  /** Renders a '<textarea>', so the caret, selection, spellcheck, resize handle, and phone keyboard come from the platform. It is in the server markup, so the field works before any script loads.  It is a separate element from 'Input' because Enter inserts a line break here. In a single-line field, Enter submits the form.  'rows' sets the starting height, and 'auto-grow' makes the field grow with its content. You can use both: 'rows' sets where an empty field begins. 'max-rows' stops the growth at that many lines, and the field scrolls past them.  'clearable' draws a button that empties the field while it holds text, and sends 'helix-clear', as 'Input' does. 'validate' adds your own rule, run on every change once the browser finds nothing wrong, as React Aria's TextField 'validate' does.  **Keyboard.** The field's own keys are the platform's, and Enter starts a new line. The clear button under 'clearable' is a tab stop of its own after the field.  The inner textarea is named by 'label', or by a host 'aria-label', 'aria-labelledby' or '<label for>', and is described by the hint and the message, with 'aria-invalid' while a message shows. The clear button is named 'clear-label'. */
   "helix-headless-textarea": DefineCustomElement<
     HelixHeadlessTextarea,
     HelixHeadlessTextareaVueProps,
@@ -16090,19 +16783,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTimelineVueProps,
     HelixHeadlessTimelineVueEvents
   >;
-  /** Each message is an element because it has a timeout, a tone, a dismiss control, and a lifetime that pauses.  **Each item runs its own timer.** A timer held by the region would restart with each new message, and the last of three messages would stay for nine seconds.  **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. Give it a 'heading' and a 'description', and the heading names it and the description describes it, for a message with a title and a line of detail. A 'danger' message is its own assertive live region, so it is announced at once; every other one is announced politely by the region.  A touch or a pen swipes a message toward the end of the line, and past halfway, or quickly, dismisses it through the same 'helix-dismiss' as its control. While it moves, the distance is on the 'item' part as '--toast-swipe-x'.  **Messages are inverted by default.** The item flips 'color-scheme', so a new message stands out from the page without using a color that carries meaning. */
+  /** 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. It pauses while the pointer or focus is on the message, and while the page is hidden, so a message is not spent in a background tab.  **Each message is an 'alertdialog' named by its words**, which is how a reader who moves into the stack hears which message they are on. Give it a 'heading' and a 'description', and the heading names it and the description describes it, for a message with a title and a line of detail. The region says each message once as it arrives, a 'danger' one assertively, so a message is never a live region of its own.  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 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. */
+  /** 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 it says each message once as it arrives**: a 'danger' message assertively, and every other one politely. It says the word for the tone, the heading, the description and the text, and not the actions, through two live regions of its own, the 'live' parts, which it empties again a moment later. The stack itself is not a live region, so a message is never said twice, and changing the words of a message already showing says nothing. 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.  'selection-mode="multiple"' makes the group a toolbar of buttons that each say whether they are pressed with 'aria-pressed', as React Aria's ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases one item, the arrow keys move focus without pressing, and 'value' is the pressed values, comma separated, which 'values' also gives as a list. Use 'values' where an item's value holds a comma. The form receives one entry per pressed value, and a page the browser brings back presses the same items again. The indicator stays hidden, and each pressed item is marked with ':state(pressed)'. Inside a toolbar it is a named group of that toolbar's controls instead, so a reader meets one toolbar.  'orientation="vertical"' runs the items down a column, says so to the accessibility tree, and the up and down arrows move between them. */
+  /** The indicator is one element that moves to the selected item. A single moving object is easier to follow than a fill that swaps, and it shows where the selection came from.  Its size and position are measured from the selected item and written to the indicator as custom properties, because labels have different lengths. Measurement happens on the client, so the server renders the indicator hidden and it fades in once measured.  'selection-mode="multiple"' makes the group a toolbar of buttons that each say whether they are pressed with 'aria-pressed', as React Aria's ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases one item, the arrow keys move focus without pressing, and 'value' is the pressed values, comma separated, which 'values' also gives as a list. Use 'values' where an item's value holds a comma. The form receives one entry per pressed value, and a page the browser brings back presses the same items again. The indicator stays hidden, and each pressed item is marked with ':state(pressed)'. Inside a toolbar it is a named group of that toolbar's controls instead, so a reader meets one toolbar.  'orientation="vertical"' runs the items down a column, says so to the accessibility tree, and the up and down arrows move between them.  **Keyboard.** The group is one tab stop: the chosen item, or the first that can be chosen, as in a radio group, and in a multiple group the item focus was last on.  | Key | What it does | |---|---| | Right, Down | Moves to the next item, from the last back to the first. In a single group, chooses it. | | Left, Up | Moves to the item before, from the first round to the last. In a single group, chooses it. | | Home, End | Moves to the first or the last item. In a single group, chooses it. | | Space, Enter | Chooses the focused item, or presses or releases it in a multiple group. |  Left and Right swap on a right-to-left page, and a disabled item is passed over. A single group is a 'radiogroup' of items with 'role="radio"' and 'aria-checked'. A multiple group is a 'toolbar' of buttons with 'aria-pressed', or a 'group' inside a toolbar. The group is named by 'label' and carries 'aria-orientation' under 'orientation'. */
   "helix-headless-toggle-group": DefineCustomElement<
     HelixHeadlessToggleGroup,
     HelixHeadlessToggleGroupVueProps,
@@ -16114,19 +16807,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessToggleVueProps,
     HelixHeadlessToggleVueEvents
   >;
-  /** A toolbar holds a mix of controls, such as buttons, toggles, and menus. A button group holds one kind, so the two are separate components.  The toolbar is one tab stop, and the arrow keys move between its controls, so three toolbars take three presses of Tab to pass. Any element the browser can focus counts as a control, including your own elements. A child that takes no focus, such as a divider, is skipped. A menu is reached at its trigger.  Controls inside a plain wrapper, such as a 'Button Group', are each a stop of the toolbar's own, as React Aria's toolbar flattens a group: the arrows walk through the group's buttons and on past it, and the group takes no tab stop of its own.  The arrows wrap from the last control to the first. Set 'stop-at-ends' to keep them at the ends, as Radix's 'loop' set to false does.  A nested composite, such as a toggle group, is one stop on the toolbar's axis: the toolbar's arrows move past it, and the arrows across the toolbar move inside it. A composite with a 'focusable' property, as Toggle Group has, gives up its own tab stop while the toolbar's is elsewhere, so Tab stops once in the toolbar. A composite without one keeps its own tab stop. */
+  /** A toolbar holds a mix of controls, such as buttons, toggles, and menus. A button group holds one kind, so the two are separate components.  The toolbar is one tab stop, and the arrow keys move between its controls, so three toolbars take three presses of Tab to pass. Any element the browser can focus counts as a control, including your own elements. A child that takes no focus, such as a divider, is skipped. A menu is reached at its trigger.  A Divider in the toolbar is a separator across the toolbar's axis, as React Aria's is: vertical in a horizontal toolbar and horizontal in a vertical one, without an 'orientation' of its own.  Controls inside a plain wrapper, such as a 'Button Group', are each a stop of the toolbar's own, as React Aria's toolbar flattens a group: the arrows walk through the group's buttons and on past it, and the group takes no tab stop of its own.  The arrows wrap from the last control to the first. Set 'stop-at-ends' to keep them at the ends, as Radix's 'loop' set to false does.  **Keyboard.** Tab enters the toolbar on the control that last had focus, the first control at the start, and the next Tab leaves it.  | Key | What it does | |---|---| | Right | Moves to the next control in a horizontal toolbar, from the last back to the first. | | Left | Moves to the control before in a horizontal toolbar, from the first round to the last. | | Down, Up | The same in a vertical toolbar. | | Home, End | Moves to the first or the last control. |  Left and Right swap on a right-to-left page, where the first control is on the right. The arrows across the toolbar's axis are left to the control that has focus, so a radio-style toggle group or a select answers them itself. The toolbar is 'role="toolbar"' with 'aria-orientation', named by 'label'.  The stop moves through a control's own 'focusable' property where it has one, as Button, Select and Toggle Group do. A control without one has 'tabindex' written on the element that takes focus: a native element itself, or the control inside a custom element's open shadow root, so the host keeps the markup you rendered. Only a custom element whose shadow root is closed takes it on the host.  A toggle group of pressed buttons, 'selection-mode="multiple"', is walked through the same way, each toggle a stop on the toolbar's axis, as React Aria's toolbar walks its toggle buttons. Another nested composite, such as a radio-style toggle group, is one stop on the toolbar's axis: the toolbar's arrows move past it, and the arrows across the toolbar move inside it. A composite with a 'focusable' property, as Toggle Group has, gives up its own tab stop while the toolbar's is elsewhere, so Tab stops once in the toolbar. A composite without one keeps its own tab stop.  A toolbar inside another toolbar, a Helix one or the page's own 'role="toolbar"', is a 'group' of the outer one, as React Aria's is: the outer toolbar's arrows walk through its controls and on past them, and it takes no keys and no tab stop of its own. A server renders it as a toolbar, having no parent to read, until it upgrades. */
   "helix-headless-toolbar": DefineCustomElement<
     HelixHeadlessToolbar,
     HelixHeadlessToolbarVueProps,
     HelixHeadlessToolbarVueEvents
   >;
-  /** The trigger is slotted and stays your own element. The bubble renders in the top layer through the popover API, so an ancestor with 'overflow: hidden' does not clip it and no 'z-index' is needed. 'FloatingController' positions it and flips it to another side when the preferred side does not fit.  **The tooltip describes its trigger itself, in both forms.** Wrap the trigger, or place the tooltip beside it and name the trigger with 'for':  '''html <helix-headless-button id="save">Save</helix-headless-button> <helix-headless-tooltip for="save" content="Save your work"></helix-headless-tooltip> '''  The link is an element reference on the control that takes focus, and it is never written into your markup before a reader has acted. A trigger that is a Helix component is described at once, inside its own shadow root. A plain element in your markup is described when a reader first points at it or focuses it, which is after any hydration, and only where you have written no 'aria-describedby' or 'aria-labelledby' of your own. Write 'aria-describedby' pointing at the tooltip yourself to have the link in the server's markup. Where the browser has no element references, write it yourself; the tooltip warns once on first open if nothing links the two.  The tooltip shows on hover and on focus. It hides on pointer leave, on blur, on Escape, and when the trigger is activated. The pointer can move from the trigger onto the bubble and the bubble stays, unless you set 'hoverable="false"'. 'delay' is how long the pointer rests before it shows, and 'delay-out' how long it stays once the pointer leaves.  Once one tooltip is showing, moving to another trigger shows its tooltip with no 'delay', and the first one hides. The same holds for 'skip-delay' milliseconds after a tooltip hides, 300 unless you set it. 'show-on="focus"' shows the tooltip on keyboard focus only, for a hint a pointer does not need. */
+  /** The trigger 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. In the 'for' form the tooltip itself is out of the accessibility tree while its bubble is down, so a reader walking the page meets its words once, as the trigger's description.  The tooltip shows on hover and on focus. It hides on pointer leave, on blur, on Escape, and when the trigger is activated. The pointer can move from the trigger onto the bubble and the bubble stays, unless you set 'hoverable="false"'. 'delay' is how long the pointer rests before it shows, and 'delay-out' how long it stays once the pointer leaves.  Once one tooltip is showing, moving to another trigger shows its tooltip with no 'delay', and the first one hides. The same holds for 'skip-delay' milliseconds after a tooltip hides, 300 unless you set it. 'show-on="focus"' shows the tooltip on keyboard focus only, for a hint a pointer does not need. */
   "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.  The box the light falls on is on the 'spotlight' part as '--tour-spotlight-x', '--tour-spotlight-y', '--tour-spotlight-width' and '--tour-spotlight-height', for a sheet that draws its own light, such as a ring around the target.  Each stop is told its place in the run, from 'progress-label', such as "2 of 5". It describes the stop's panel, so a screen reader says it at every stop, and 'progress' draws it in the panel as well. A dialog or a floating stop, which has nothing to light, is shown over the 'backdrop' part. At a 'wait' stop the run waits for that stop's target to be on the page, and moves on by itself.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes. */
+  /** The root holds the order of the stops: which stop is current, what Next and Back do, and when the tour is finished. Each stop holds its target, and you write all the text.  **The spotlight is a shadow.** The scrim is a box the size of the current target with a very large 'box-shadow' spread, and the shadow paints the darkness. A 'clip-path' on a full-screen scrim breaks as soon as an element between the scrim and the viewport is transformed.  The root measures the target's position in the browser. Nothing is measured on the server, because a tour starts only on request.  'open', 'default-open', 'helix-before-open', 'helix-before-close' and 'toggle' work as they do on 'Dialog'. Setting 'open' starts the run, and 'skip()' and 'requestOpen(false)' end it early.  The box the light falls on is on the 'spotlight' part as '--tour-spotlight-x', '--tour-spotlight-y', '--tour-spotlight-width' and '--tour-spotlight-height', for a sheet that draws its own light, such as a ring around the target.  Each stop is told its place in the run, from 'progress-label', such as "2 of 5". It describes the stop's panel, so a screen reader says it at every stop, and 'progress' draws it in the panel as well. A dialog or a floating stop, which has nothing to light, is shown over the 'backdrop' part. At a 'wait' stop the run waits for that stop's target to be on the page, and moves on by itself.  **Focus follows the run.** Opening moves focus to the first stop's panel, and moving on from a control in a stop moves it to the next one. Ending the tour puts focus back on the element that had it when the tour opened, unless you have moved it somewhere else on the page. A stop does not trap focus, so you can still 'Tab' out to the element it describes.  **The arrow keys move between stops** while focus is in one: the arrow that points the way the line runs goes on, and the other goes back, so on a right-to-left page 'ArrowLeft' goes on. Neither finishes the tour at the last stop, and a text field in a stop keeps its own arrows. 'Escape' skips the tour. */
   "helix-headless-tour": DefineCustomElement<
     HelixHeadlessTour,
     HelixHeadlessTourVueProps,
@@ -16150,7 +16843,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTreeVueProps,
     HelixHeadlessTreeVueEvents
   >;
-  /** A trend has three parts: a 'movement' of up, down, or neutral, the metric that moved, and a label for the period it moved over. The arrow shows the movement and its color shows whether the change is good. Movement and judgment are separate properties because they are separate facts.  'good' is unset by default, so a trend with no judgment is gray. For churn, latency, error rate, cost, and bounce rate, up is bad. Set the metric's polarity once with 'good', and the component picks the color from the movement. The judgment is also a custom state, 'better' or 'worse', for a sheet of your own.  The movement is also written as a word, so a screen reader reads it. The styled tier hides 'part="direction"' visually and keeps it in the accessibility tree. The words are properties, 'up-label' through 'worse-label', so a page in another language can set its own. The arrow and any glyph slotted in its place are hidden from screen readers.  Slot one glyph per movement into 'up-icon', 'down-icon' and 'neutral-icon', and the trend shows the one that matches; a glyph in 'icon' stands in for all three. Inside a 'Stat', put the trend in the stat's 'trend' slot so it is read with the figure it qualifies.  The metric and the label are bare slots. An element that assigned its own slot on connect would add an attribute to its host after upgrade, which the React server markup did not have. */
+  /** A trend has three parts: a 'movement' of up, down, or neutral, the metric that moved, and a label for the period it moved over. The arrow shows the movement and its color shows whether the change is good. Movement and judgment are separate properties because they are separate facts.  'good' is unset by default, so a trend with no judgment is gray. For churn, latency, error rate, cost, and bounce rate, up is bad. Set the metric's polarity once with 'good', and the component picks the color from the movement. The judgment is also a custom state, 'better' or 'worse', for a sheet of your own.  The movement is also written as a word, so a screen reader reads it. The styled tier hides 'part="direction"' visually and keeps it in the accessibility tree. The words are properties, 'up-label' through 'worse-label', so a page in another language can set its own. The arrow and any glyph slotted in its place are hidden from screen readers.  **Or give the change as a number.** 'value' is the signed change, such as '0.12' or '-8': its sign is the movement, and its size is written as the metric with 'Intl.NumberFormat', in 'locale' and with 'format-options', such as '{"style":"percent"}' for '12%'. 'movement' still wins when it is written. Without 'value' the metric is what the page slots.  Slot one glyph per movement into 'up-icon', 'down-icon' and 'neutral-icon', and the trend shows the one that matches; a glyph in 'icon' stands in for all three. Inside a 'Stat', put the trend in the stat's 'trend' slot so it is read with the figure it qualifies.  The metric and the label are bare slots. An element that assigned its own slot on connect would add an attribute to its host after upgrade, which the React server markup did not have. */
   "helix-headless-trend": DefineCustomElement<
     HelixHeadlessTrend,
     HelixHeadlessTrendVueProps,
@@ -16180,7 +16873,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessVideoVueProps,
     HelixHeadlessVideoVueEvents
   >;
-  /** The items arrive as data, in one of two ways:  - 'items' takes an array. A framework sets it as a property, and React   hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which   a server sends as markup.  Each item is drawn into a row in one of two ways:  - 'renderItem' is a function from an item and its index to the row's   content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element   with the item's 'name' as text, and 'data-field-href="url"' writes the   item's 'url' into 'href', the same for any attribute. A field may be a path   of keys, such as 'author.name'.  Rows are your markup in the light DOM, so your stylesheet styles them.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, Up, Down, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'.  **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
+  /** The items arrive as data, in one of two ways:  - 'items' takes an array. A framework sets it as a property, and React   hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which   a server sends as markup.  Each item is drawn into a row in one of two ways:  - 'renderItem' is a function from an item and its index to the row's   content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element   with the item's 'name' as text, and 'data-field-href="url"' writes the   item's 'url' into 'href', the same for any attribute. A field may be a path   of keys, such as 'author.name'.  Rows are your markup in the light DOM, so your stylesheet styles them.  **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'.  **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
   "helix-headless-virtual-list": DefineCustomElement<
     HelixHeadlessVirtualList,
     HelixHeadlessVirtualListVueProps,