@fusion.dev/helix-headless 0.153.0 → 0.155.0

package/types/vue.d.ts

@@ -177,6 +177,7 @@ import type {
   HelixScrolledEvent,
   HelixReadingChangeEvent,
   HelixReadingPressEvent,
+  HelixSelectEvent,
   HelixBeforeChangeEvent,
   HelixPressEvent,
   HelixBeforeMoveEvent,
@@ -191,7 +192,6 @@ import type {
   HelixReconnectEvent,
   HelixRelabelEvent,
   HelixRemoveEvent,
-  HelixSelectEvent,
   HelixActivateEvent,
   HelixSendEvent,
   HelixTypingEvent,
@@ -1148,6 +1148,15 @@ element's language. Leave the marks out of the text. */
 
 export type HelixHeadlessBlockquoteVueEvents = {};
 
+/** `HelixHeadlessBreadcrumb` component event */
+export type HelixHeadlessBreadcrumbElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessBreadcrumb,
+  E
+>;
+/** `helix-select` event type */
+export type HelixHeadlessBreadcrumbHelixSelectElementEvent =
+  HelixHeadlessBreadcrumbElementEvent<HelixSelectEvent>;
+
 export type HelixHeadlessBreadcrumbVueProps = {
   /** Marks this item as the page you are on. */
   current?: (HelixHeadlessBreadcrumb["current"]) | undefined;
@@ -1177,7 +1186,10 @@ The consumer's decision. */
   target?: (HelixHeadlessBreadcrumb["target"]) | undefined;
 };
 
-export type HelixHeadlessBreadcrumbVueEvents = {};
+export type HelixHeadlessBreadcrumbVueEvents = {
+  /** A plain press on the crumb's link, with its `href` as the value, before the browser follows it. Cancelable: cancel it to keep the browser from following, as a client-side router does. */
+  "helix-select": HelixHeadlessBreadcrumbHelixSelectElementEvent;
+};
 
 export type HelixHeadlessBreadcrumbsVueProps = {
   /** The name of the button that shows a folded trail's hidden crumbs. `{count}`
@@ -2163,10 +2175,6 @@ twice what this says once.
 Reflected and undefaulted, so a card that has not asked reads as a card
 with no attribute on it and the stylesheet only describes the departure. */
   mediaPlacement?: (HelixHeadlessCard["mediaPlacement"]) | undefined;
-  /**  */
-  "aria-labelledby"?: unknown;
-  /**  */
-  "aria-label"?: unknown;
 };
 
 export type HelixHeadlessCardVueEvents = {};
@@ -2983,6 +2991,22 @@ export type HelixHeadlessCheckboxVueEvents = {
 };
 
 export type HelixHeadlessCodeBlockVueProps = {
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  "code-label"?: (HelixHeadlessCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  codeLabel?: (HelixHeadlessCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  "code-name-label"?: (HelixHeadlessCodeBlock["codeNameLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  codeNameLabel?: (HelixHeadlessCodeBlock["codeNameLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
   "collapse-label"?: (HelixHeadlessCodeBlock["collapseLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
@@ -3176,7 +3200,8 @@ Passed to the panel, whose square, hue ramp and presets say the color's
 name, and read by the swatch in `swatch`, which says it before the value.
 Color Picker lists the keys. */
   colorWords?: (HelixHeadlessColorInput["colorWords"]) | undefined;
-  /** The syntax the value is written in: `hex`, `rgb`, or `hsl`.
+  /** The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or
+`hsb`, as Color Picker's `format`.
 
 **Undefaulted, because it reflects.** The two together stamp an attribute
 onto every host anybody renders, including the ones nobody configured: the
@@ -3411,8 +3436,9 @@ language hears its own rather than English between its own labels. */
   brightnessLabel?: (HelixHeadlessColorPicker["brightnessLabel"]) | undefined;
   /** Whether the picker shows a number field for each channel of the color, as
 React Aria's ColorField does with `channel`: red, green and blue for hex
-and rgb, hue, saturation and lightness for hsl, and the opacity with
-`alpha`.
+and rgb, hue, saturation and lightness for hsl, hue, saturation and
+brightness for hsb, lightness, chroma and hue for oklch, and the opacity
+with `alpha`.
 
 For a reader who has the numbers from a brand guide, and for a keyboard,
 where typing 128 is quicker than holding an arrow key. The fields follow
@@ -3420,13 +3446,20 @@ the syntax the format toggle sets. */
   "channel-fields"?: (HelixHeadlessColorPicker["channelFields"]) | undefined;
   /** Whether the picker shows a number field for each channel of the color, as
 React Aria's ColorField does with `channel`: red, green and blue for hex
-and rgb, hue, saturation and lightness for hsl, and the opacity with
-`alpha`.
+and rgb, hue, saturation and lightness for hsl, hue, saturation and
+brightness for hsb, lightness, chroma and hue for oklch, and the opacity
+with `alpha`.
 
 For a reader who has the numbers from a brand guide, and for a keyboard,
 where typing 128 is quicker than holding an arrow key. The fields follow
 the syntax the format toggle sets. */
   channelFields?: (HelixHeadlessColorPicker["channelFields"]) | undefined;
+  /** What the chroma channel's field is called, in `channel-fields` with
+oklch. */
+  "chroma-label"?: (HelixHeadlessColorPicker["chromaLabel"]) | undefined;
+  /** What the chroma channel's field is called, in `channel-fields` with
+oklch. */
+  chromaLabel?: (HelixHeadlessColorPicker["chromaLabel"]) | undefined;
   /** The words a color's name is spoken in, as JSON keyed by their English,
 such as `{"red": "rot", "vibrant": "kräftiges"}`.
 
@@ -3467,10 +3500,16 @@ the color. */
   "eyedropper-label"?: (HelixHeadlessColorPicker["eyedropperLabel"]) | undefined;
   /** What the eyedropper is called. */
   eyedropperLabel?: (HelixHeadlessColorPicker["eyedropperLabel"]) | undefined;
-  /** The syntax the value is written in: `hex`, `rgb`, or `hsl`.
+  /** The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or
+`hsb`.
 
 Only what is written. Everything is read whatever this says, so a picker on
-`hex` still takes an `rgb()` handed to it and stores the hex for it. */
+`hex` still takes an `rgb()` or an `oklch()` handed to it and stores the
+hex for it. `oklch` writes the sRGB color the picker holds, such as
+`oklch(62.8% 0.258 29.2)`; a color outside sRGB that is handed in is
+clipped to it. `hsb` writes the picker's own model, `hsb(0, 100%, 100%)`,
+as React Aria's and Zag's color strings do. It is not CSS, so the toggle
+walks the other four. */
   format?: (HelixHeadlessColorPicker["format"]) | undefined;
   /** What the syntax toggle is called, with `{format}` filled in. */
   "format-label"?: (HelixHeadlessColorPicker["formatLabel"]) | undefined;
@@ -3480,15 +3519,21 @@ Only what is written. Everything is read whatever this says, so a picker on
   "green-label"?: (HelixHeadlessColorPicker["greenLabel"]) | undefined;
   /** What the green channel's field is called, in `channel-fields`. */
   greenLabel?: (HelixHeadlessColorPicker["greenLabel"]) | undefined;
+  /** Help under the picker, such as what the color is used for. The `hint`
+slot takes richer content. */
+  hint?: (HelixHeadlessColorPicker["hint"]) | undefined;
   /** What the hue channel is called. */
   "hue-label"?: (HelixHeadlessColorPicker["hueLabel"]) | undefined;
   /** What the hue channel is called. */
   hueLabel?: (HelixHeadlessColorPicker["hueLabel"]) | undefined;
+  /** The name above the picker, such as "Brand color". The picker is then a
+group with this name. The `label` slot takes richer content. */
+  label?: (HelixHeadlessColorPicker["label"]) | undefined;
   /** What the lightness channel's field is called, in `channel-fields` with
-hsl. */
+hsl and oklch. */
   "lightness-label"?: (HelixHeadlessColorPicker["lightnessLabel"]) | undefined;
   /** What the lightness channel's field is called, in `channel-fields` with
-hsl. */
+hsl and oklch. */
   lightnessLabel?: (HelixHeadlessColorPicker["lightnessLabel"]) | undefined;
   /** Hides the eyedropper. Without it, the eyedropper appears in browsers that
 support one. */
@@ -5254,15 +5299,22 @@ speaks it. Unset is the sentence registered for the page's language, then
 the English. `{mode}` is `single`, `range` or `multiple`, so each can have
 its own sentence. */
   badInputMessage?: (HelixHeadlessDatePicker["badInputMessage"]) | undefined;
-  /** The calendar the heading, the days, and the months are written in:
-`gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, the five whose
-months are the Gregorian months.
-
-Absent is the locale's own where it is one of the five, such as
-`buddhist` for `th-TH` or `japanese` for `ja-JP-u-ca-japanese`, and
-`gregory` for every other, such as `persian` for `fa-IR`, so the heading
-names the Gregorian month the grid shows. The value is `YYYY-MM-DD` in
-every calendar. */
+  /** The calendar the heading, the days, and the months are written in.
+
+`gregory`, `buddhist`, `japanese`, `roc`, and `iso8601` are the five
+whose months are the Gregorian months. Absent is the locale's own where
+it is one of the five, such as `buddhist` for `th-TH` or `japanese` for
+`ja-JP-u-ca-japanese`, and `gregory` for every other, such as `persian`
+for `fa-IR`.
+
+`persian`, `hebrew`, `islamic-umalqura`, `islamic-civil`, `ethiopic`,
+`coptic`, and `indian` draw a calendar with months of its own, as React
+Aria's calendars do: each grid is one of that calendar's months, the
+Hebrew leap month and Ethiopia's five-day thirteenth month included, and
+Previous, Next and the page keys move by those months. `month` and
+`helix-navigate` then name a month by its first day, `YYYY-MM-DD`. The
+heading stays text, as the months and years views are drawn in Gregorian
+months only. The value is `YYYY-MM-DD` in every calendar. */
   calendar?: (HelixHeadlessDatePicker["calendar"]) | undefined;
   /** The month to open on when `month` is not set. */
   "default-month"?: (HelixHeadlessDatePicker["defaultMonth"]) | undefined;
@@ -5321,8 +5373,9 @@ its days. */
   min?: (HelixHeadlessDatePicker["min"]) | undefined;
   /** How many dates can be held at once. */
   mode?: (HelixHeadlessDatePicker["mode"]) | undefined;
-  /** The month shown, as `YYYY-MM`. When it is not set, it follows `value`,
-then the current month.
+  /** The month shown, as `YYYY-MM`, or as its first day, `YYYY-MM-DD`, under a
+`calendar` with months of its own. When it is not set, it follows
+`value`, then the current month.
 
 Separate from `value` on purpose, so paging selects nothing and a consumer
 can drive the view. Reading gives the month on show; writing sets it, and
@@ -5424,6 +5477,22 @@ date including the one already chosen. */
   "step-mismatch-message"?: (HelixHeadlessDatePicker["stepMismatchMessage"]) | undefined;
   /** The validation message for a date that `step` skips. */
   stepMismatchMessage?: (HelixHeadlessDatePicker["stepMismatchMessage"]) | undefined;
+  /** The time zone today is read in, such as `America/New_York`, as React
+Aria's `today(timeZone)` reads it. Empty is the reader's own.
+
+Dates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:
+the day marked `aria-current` and `day-today`, and the month a picker
+with no value opens on. A desk in Tokyo booking for an office in New York
+sets `America/New_York`, and today is the office's. */
+  "time-zone"?: (HelixHeadlessDatePicker["timeZone"]) | undefined;
+  /** The time zone today is read in, such as `America/New_York`, as React
+Aria's `today(timeZone)` reads it. Empty is the reader's own.
+
+Dates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:
+the day marked `aria-current` and `day-today`, and the month a picker
+with no value opens on. A desk in Tokyo booking for an office in New York
+sets `America/New_York`, and today is the office's. */
+  timeZone?: (HelixHeadlessDatePicker["timeZone"]) | undefined;
   /** The validation message for a date that `disable-dates` or `disable-days`
 bars. */
   "unavailable-message"?: (HelixHeadlessDatePicker["unavailableMessage"]) | undefined;
@@ -7538,6 +7607,11 @@ the value instead.
 A name written `prefix:name` asks the library registered under that
 prefix. */
   name?: (HelixHeadlessIcon["name"]) | undefined;
+  /** The URL of an SVG file to draw, fetched once a page and drawn in
+`currentColor` where the file does not color its shapes.
+
+Wins over `name`; `icon` wins over both. Absent draws `name`. */
+  src?: (HelixHeadlessIcon["src"]) | undefined;
   /** The icon to draw, as an object you import.
 
 **The scalable door, and the one this library uses internally.** An icon is
@@ -7554,9 +7628,9 @@ for. Set both and this wins, the value being the more specific statement. */
 };
 
 export type HelixHeadlessIconVueEvents = {
-  /** `name` matches no registered icon and no library answers it, so nothing is drawn. */
+  /** `name` matches no registered icon and no library answers it, or `src` is no SVG, so nothing is drawn. */
   error: HelixHeadlessIconElementEvent;
-  /** A glyph a library gave later for `name` is drawn. */
+  /** A glyph a library gave later for `name`, or the file at `src`, is drawn. */
   load: HelixHeadlessIconElementEvent;
 };
 
@@ -11784,6 +11858,20 @@ export type HelixHeadlessQrCodeVueEvents = {
 export type HelixHeadlessQuoteVueProps = {
   /** URL identifying where the quotation came from. */
   cite?: (HelixHeadlessQuote["cite"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  "no-marks"?: (HelixHeadlessQuote["noMarks"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  noMarks?: (HelixHeadlessQuote["noMarks"]) | undefined;
 };
 
 export type HelixHeadlessQuoteVueEvents = {};
@@ -12563,6 +12651,18 @@ the stop moves on the trigger inside the shadow root, as Button's does.
 No attribute, because it is coordination between elements rather than
 anything a consumer sets. */
   focusable?: (HelixHeadlessSelect["focusable"]) | undefined;
+  /** The options as data, for a list too long to draw whole: each a value,
+which is also its words, or a record with a `value`, a `label` and
+`disabled`. Passed to the list, which draws only the options in sight,
+as Listbox's `items` does. Set, the options you write as children are
+not read.
+
+The trigger shows the chosen options' labels, the letters and the Left
+and Right keys on the closed trigger choose over the whole set, and a
+chosen value whose option leaves `items` drops out of `value`.
+`value-content` is not called for `items`. Import the Option family as
+well, whose elements are drawn. */
+  items?: (HelixHeadlessSelect["items"]) | undefined;
   /** What the trigger shows for the chosen options: a function given them, in
 the order they appear, that returns text, an element or a Lit template.
 
@@ -12727,9 +12827,11 @@ between its thumbs and ignores it. */
   origin?: (HelixHeadlessSlider["origin"]) | undefined;
   /** Adds a second thumb, so the value is a pair.
 
-The pair is one string, `"10,50"`, which is what a form submits and what
-`MixinControllerValue` already holds. `valueAsNumber` reads the lower of
-the two, since a range has no single number. */
+The pair is one string, `"10,50"`, which is what `value` and
+`MixinControllerValue` hold. A form receives two entries under the name,
+`price=10&price=50`, as React Aria's two thumbs send theirs.
+`valueAsNumber` reads the lower of the two, since a range has no single
+number. */
   range?: (HelixHeadlessSlider["range"]) | undefined;
   /** How the readout joins a range's two values, with `{start}` and `{end}`
 filled in. Write it in the page's language, such as `{start} bis {end}`. */
@@ -12737,12 +12839,34 @@ filled in. Write it in the page's language, such as `{start} bis {end}`. */
   /** How the readout joins a range's two values, with `{start}` and `{end}`
 filled in. Write it in the page's language, such as `{start} bis {end}`. */
   rangeText?: (HelixHeadlessSlider["rangeText"]) | undefined;
+  /** Whether a reader can see and focus the value and cannot change it. A
+read-only slider still submits its value.
+
+React Aria's `isReadOnly`. Each thumb stays a tab stop and says
+`aria-readonly`. The arrow keys, the page keys, Home, End, and a drag
+leave the value where it is. A script can still set `value`. */
+  readonly?: (HelixHeadlessSlider["readOnly"]) | undefined;
+  /** Whether a reader can see and focus the value and cannot change it. A
+read-only slider still submits its value.
+
+React Aria's `isReadOnly`. Each thumb stays a tab stop and says
+`aria-readonly`. The arrow keys, the page keys, Home, End, and a drag
+leave the value where it is. A script can still set `value`. */
+  readOnly?: (HelixHeadlessSlider["readOnly"]) | undefined;
   /** Shows the chosen value beside the track. */
   "show-value"?: (HelixHeadlessSlider["showValue"]) | undefined;
   /** Shows the chosen value beside the track. */
   showValue?: (HelixHeadlessSlider["showValue"]) | undefined;
   /** How far one press of an arrow key moves the thumb. */
   step?: (HelixHeadlessSlider["step"]) | undefined;
+  /** The name of a thumb between a range's first and last, read after the
+slider's label, with `{index}` filled in: its place, counted from 1. The
+first is `minimum-label` and the last `maximum-label`. */
+  "thumb-label"?: (HelixHeadlessSlider["thumbLabel"]) | undefined;
+  /** The name of a thumb between a range's first and last, read after the
+slider's label, with `{index}` filled in: its place, counted from 1. The
+first is `minimum-label` and the last `maximum-label`. */
+  thumbLabel?: (HelixHeadlessSlider["thumbLabel"]) | undefined;
   /** Whether each thumb shows its value in a bubble beside it, as Web
 Awesome's `with-tooltip`. The styled slider shows the bubbles while the
 slider is under the pointer or holds focus. They repeat what each thumb
@@ -12992,10 +13116,20 @@ export type HelixHeadlessSpeedDialItemHelixSelectElementEvent =
 export type HelixHeadlessSpeedDialItemVueProps = {
   /** Whether the action is disabled, so it cannot be chosen. */
   disabled?: (HelixHeadlessSpeedDialItem["disabled"]) | undefined;
+  /** Whether the link downloads the file when the action is chosen. Only
+meaningful beside an `href`, and only for a file served from the page's
+origin. */
+  download?: (HelixHeadlessSpeedDialItem["download"]) | undefined;
+  /** The URL the action links to. Setting it draws the action as a link. */
+  href?: (HelixHeadlessSpeedDialItem["href"]) | undefined;
+  /** The link's `rel`. Set it whenever you set `target="_blank"`. */
+  rel?: (HelixHeadlessSpeedDialItem["rel"]) | undefined;
   /** The action's keyboard shortcut as a chord, such as `mod+s`, carried as
 `aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
 keyboard and Control elsewhere. Showing a shortcut does not bind it. */
   shortcut?: (HelixHeadlessSpeedDialItem["shortcut"]) | undefined;
+  /** Where the link opens, such as `_blank` for a new tab. */
+  target?: (HelixHeadlessSpeedDialItem["target"]) | undefined;
   /** The action's value, sent in `helix-select` when the action is chosen. */
   value?: (HelixHeadlessSpeedDialItem["value"]) | undefined;
 };
@@ -13044,13 +13178,17 @@ you described or labeled it yourself. */
   longPressLabel?: (HelixHeadlessSpeedDial["longPressLabel"]) | undefined;
   /** Space between the trigger and the actions, in pixels. */
   offset?: (HelixHeadlessSpeedDial["offset"]) | undefined;
-  /** What opens the dial. `click` opens it on a press of the trigger. Under
-`long-press`, a press is the trigger's own action, and the dial opens on a
-press held for half a second, or on Alt+Down or Alt+Up. */
+  /** What opens the dial. `click` opens it on a press of the trigger. `hover`
+also opens it while a mouse rests on the trigger, and closes it once the
+mouse has left. Under `long-press`, a press is the trigger's own action,
+and the dial opens on a press held for half a second, or on Alt+Down or
+Alt+Up. */
   "open-on"?: (HelixHeadlessSpeedDial["openOn"]) | undefined;
-  /** What opens the dial. `click` opens it on a press of the trigger. Under
-`long-press`, a press is the trigger's own action, and the dial opens on a
-press held for half a second, or on Alt+Down or Alt+Up. */
+  /** What opens the dial. `click` opens it on a press of the trigger. `hover`
+also opens it while a mouse rests on the trigger, and closes it once the
+mouse has left. Under `long-press`, a press is the trigger's own action,
+and the dial opens on a press held for half a second, or on Alt+Down or
+Alt+Up. */
   openOn?: (HelixHeadlessSpeedDial["openOn"]) | undefined;
   /** The direction the actions open in. They move to another side if that side
 does not fit.
@@ -13245,7 +13383,10 @@ export type HelixHeadlessSplitterVueEvents = {
 };
 
 export type HelixHeadlessStatGroupVueProps = {
-  /** Accessible name for the group. */
+  /** Accessible name for the group, which makes it a group.
+
+Absent leaves the stats with no group around them, unless `aria-label` or
+`aria-labelledby` names it. */
   label?: (HelixHeadlessStatGroup["label"]) | undefined;
 };
 
@@ -13278,6 +13419,29 @@ reports a hydration mismatch. The absent attribute is the column, which the
 stylesheet reads as the base case, and the server spec asserts the host
 carries nothing nobody wrote. */
   direction?: (HelixHeadlessStat["direction"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  "format-options"?: (HelixHeadlessStat["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  formatOptions?: (HelixHeadlessStat["formatOptions"]) | undefined;
+  /** The locale `value` is written in, such as `de` for `1.234.567`.
+
+Absent reads the nearest `lang`, then the runtime's own. Set it on a page
+rendered on a server, so the server and the browser write the figure
+alike. */
+  locale?: (HelixHeadlessStat["locale"]) | undefined;
+  /** The figure as a number, written with `format-options` in `locale` in
+place of a slotted value.
+
+Absent leaves the figure to the slot. */
+  value?: (HelixHeadlessStat["value"]) | undefined;
 };
 
 export type HelixHeadlessStatVueEvents = {};
@@ -13298,6 +13462,16 @@ export type HelixHeadlessStepsHelixSelectElementEvent =
   HelixHeadlessStepsElementEvent<HelixSelectEvent>;
 
 export type HelixHeadlessStepsVueProps = {
+  /** Whether the arrow keys move focus between the stages' names, along the
+way the steps run. Off by default, so the arrows keep scrolling the page. */
+  arrows?: (HelixHeadlessSteps["arrows"]) | undefined;
+  /** What marks a stage `complete`.
+
+Absent, you do: each step's `complete` is yours, because a reader who
+steps back has finished more stages than the one they are on. `passed`
+marks every stage before the one a reader moves to, and leaves the marks
+when they go back. */
+  completion?: (HelixHeadlessSteps["completion"]) | undefined;
   /** The sequence's name, read by screen readers.
 
 A list of stages is a landmark a reader arrives at out of order, so it
@@ -14019,6 +14193,12 @@ panels and tells a screen reader the list is vertical.
 
 Optional, so the resting row writes no attribute onto the host. */
   orientation?: (HelixHeadlessTabs["orientation"]) | undefined;
+  /** Whether a strip with more tabs than fit shows a button at each end it can
+scroll toward. */
+  "scroll-controls"?: (HelixHeadlessTabs["scrollControls"]) | undefined;
+  /** Whether a strip with more tabs than fit shows a button at each end it can
+scroll toward. */
+  scrollControls?: (HelixHeadlessTabs["scrollControls"]) | undefined;
   /** How the row of tabs is drawn.
 
 Unset is a raised pill on the selected tab with nothing behind the row,
@@ -14075,11 +14255,22 @@ export type HelixHeadlessTabElementEvent<E = Event> = TypedEvent<
   HelixHeadlessTab,
   E
 >;
+/** `helix-dismiss` event type */
+export type HelixHeadlessTabHelixDismissElementEvent =
+  HelixHeadlessTabElementEvent<HelixDismissEvent>;
 /** `helix-select` event type */
 export type HelixHeadlessTabHelixSelectElementEvent =
   HelixHeadlessTabElementEvent<HelixSelectEvent>;
 
 export type HelixHeadlessTabVueProps = {
+  /** The tooltip on the mark that closes a `dismissible` tab. The mark is for
+the pointer and hidden from screen readers, which hear the Delete key
+through `aria-keyshortcuts`. */
+  "dismiss-label"?: (HelixHeadlessTab["dismissLabel"]) | undefined;
+  /** The tooltip on the mark that closes a `dismissible` tab. The mark is for
+the pointer and hidden from screen readers, which hear the Delete key
+through `aria-keyshortcuts`. */
+  dismissLabel?: (HelixHeadlessTab["dismissLabel"]) | undefined;
   /** The URL the tab links to. Setting it renders the tab as a link, for a set
 of tabs that are pages of a site. */
   href?: (HelixHeadlessTab["href"]) | undefined;
@@ -14087,6 +14278,8 @@ of tabs that are pages of a site. */
   rel?: (HelixHeadlessTab["rel"]) | undefined;
   /** Where the link opens, such as `_blank`, for a tab with an `href`. */
   target?: (HelixHeadlessTab["target"]) | undefined;
+  /** Whether the element shows a control that dismisses it. */
+  dismissible?: (HelixHeadlessTab["dismissible"]) | undefined;
   /** Whether the item is disabled and cannot be chosen. */
   disabled?: (HelixHeadlessTab["disabled"]) | undefined;
   /** Whether the item is selected.
@@ -14101,6 +14294,8 @@ submits. */
 };
 
 export type HelixHeadlessTabVueEvents = {
+  /** A `dismissible` tab was asked to close. The tab does not remove itself, so remove it and its panel in response. Cancelable. */
+  "helix-dismiss": HelixHeadlessTabHelixDismissElementEvent;
   /** Fired when the tab is chosen. Cancelable: canceling it stops the change and leaves the decision to you. */
   "helix-select": HelixHeadlessTabHelixSelectElementEvent;
 };
@@ -14118,6 +14313,14 @@ export type HelixHeadlessTagGroupHelixDismissElementEvent =
   HelixHeadlessTagGroupElementEvent<HelixDismissEvent>;
 
 export type HelixHeadlessTagGroupVueProps = {
+  /** Keeps at least one tag selected once one is, as React Aria's
+`disallowEmptySelection`: a press or a key that would leave none selected
+is refused. Removing the last selected tag still takes it out of `value`. */
+  "disallow-empty-selection"?: (HelixHeadlessTagGroup["disallowEmptySelection"]) | undefined;
+  /** Keeps at least one tag selected once one is, as React Aria's
+`disallowEmptySelection`: a press or a key that would leave none selected
+is refused. Removing the last selected tag still takes it out of `value`. */
+  disallowEmptySelection?: (HelixHeadlessTagGroup["disallowEmptySelection"]) | undefined;
   /** The words the group shows and says once its last tag is removed, where
 nothing is in the `empty` slot. */
   "empty-label"?: (HelixHeadlessTagGroup["emptyLabel"]) | undefined;
@@ -14127,6 +14330,20 @@ nothing is in the `empty` slot. */
   /** The name of the set, such as "Filters", which a screen reader announces
 before its tags. */
   label?: (HelixHeadlessTagGroup["label"]) | undefined;
+  /** What a press, Space, or a move does to the tags already selected.
+`toggle`, the default, keeps them: a press adds or takes out the tag, and
+the arrow keys move focus alone. `replace` selects the tag alone, as a
+file list does, and the arrow keys carry the selection with focus.
+Control or Command with a press or Space adds or takes out one tag in
+`multiple`, and with an arrow moves focus without selecting. */
+  "selection-behavior"?: (HelixHeadlessTagGroup["selectionBehavior"]) | undefined;
+  /** What a press, Space, or a move does to the tags already selected.
+`toggle`, the default, keeps them: a press adds or takes out the tag, and
+the arrow keys move focus alone. `replace` selects the tag alone, as a
+file list does, and the arrow keys carry the selection with focus.
+Control or Command with a press or Space adds or takes out one tag in
+`multiple`, and with an arrow moves focus without selecting. */
+  selectionBehavior?: (HelixHeadlessTagGroup["selectionBehavior"]) | undefined;
   /** How many tags a reader can select: `single`, `multiple`, or none.
 
 Absent selects nothing, and the tags carry no selected state at all. */
@@ -15953,6 +16170,18 @@ refused, in a `reorderable` tree. */
 An `aria-label` or `aria-labelledby` on the host names the tree too, and
 wins over this. */
   label?: (HelixHeadlessTree["label"]) | undefined;
+  /** What screen readers hear when an item moves into another branch, in a
+`reorderable` tree. `{name}` is the item's words, `{parent}` the words of
+the branch it moved into, or the tree's `label` for the top level,
+`{position}` its place there, counting from 1, and `{count}` the number of
+items there. */
+  "moved-into-label"?: (HelixHeadlessTree["movedIntoLabel"]) | undefined;
+  /** What screen readers hear when an item moves into another branch, in a
+`reorderable` tree. `{name}` is the item's words, `{parent}` the words of
+the branch it moved into, or the tree's `label` for the top level,
+`{position}` its place there, counting from 1, and `{count}` the number of
+items there. */
+  movedIntoLabel?: (HelixHeadlessTree["movedIntoLabel"]) | undefined;
   /** What screen readers hear each time an item moves, in a `reorderable`
 tree. `{name}` is the item's words, `{position}` its place among its
 siblings, counting from 1, and `{count}` the number of siblings. */
@@ -16992,7 +17221,7 @@ export type CustomCssProperties = {
   "--scroll-area-scroll-fraction"?: (string) | undefined;
   /** The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part. */
   "--scroll-area-thumb-fraction"?: (string) | undefined;
-  /** Where a bubble's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` part. */
+  /** Where a bubble's or a thumb box's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` and `thumb` part. */
   "--slider-at"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. */
   "--slider-fraction"?: (string) | undefined;
@@ -17038,13 +17267,13 @@ export type CustomCssProperties = {
 // Note: Some tooling expects this augmentation under "@vue/runtime-core", while
 // other docs/examples use "vue". We emit both for compatibility.
 export interface WcToolkitVueGlobalComponents {
-  /** Holds its own open state. Used alone, outside an accordion, it works as a disclosure.  The trigger sits inside a heading, so a screen reader lists the section with the page's headings. The level is the item's 'heading-level', then the accordion's, then 3.  Content stays mounted when the item is closed, so it can animate and its text is present in server-rendered HTML.  The browser's find in page searches a closed section, and a match opens it, with 'helix-before-open' first, as React Aria's disclosure does. Closed content is 'hidden="until-found"', which hides it with no stylesheet loaded and keeps it out of the tab order and the accessibility tree. A section that closes keeps its content drawn until the content part's animations and transitions end, so a sheet that animates the section closed shows the content shrinking rather than an empty box. Set 'hidden-until-found="false"' and a closed section is 'hidden' and 'inert' instead, and find in page skips it.  While it is open, the content part carries the content's height as '--accordion-content-height', as Radix's accordion does, for a stylesheet that animates the section open with keyframes of its own. */
+  /** Holds its own open state. Used alone, outside an accordion, it works as a disclosure.  The trigger sits inside a heading, so a screen reader lists the section with the page's headings. The level is the item's 'heading-level', then the accordion's, then 3.  Content stays mounted when the item is closed, so it can animate and its text is present in server-rendered HTML.  The browser's find in page searches a closed section, and a match opens it, with 'helix-before-open' first, as React Aria's disclosure does. Closed content is 'hidden="until-found"', which hides it with no stylesheet loaded and keeps it out of the tab order and the accessibility tree. A section that closes keeps its content drawn until the content part's animations and transitions end, so a sheet that animates the section closed shows the content shrinking rather than an empty box. Set 'hidden-until-found="false"' and a closed section is 'hidden' and 'inert' instead, and find in page skips it.  A section whose trigger has no words, with nothing in its 'summary' slot, is announced as a bare button, and a development build warns once with the kind 'missing-name'.  While it is open, the content part carries the content's height as '--accordion-content-height', as Radix's accordion does, for a stylesheet that animates the section open with keyframes of its own. */
   "helix-headless-accordion-item": DefineCustomElement<
     HelixHeadlessAccordionItem,
     HelixHeadlessAccordionItemVueProps,
     HelixHeadlessAccordionItemVueEvents
   >;
-  /** Holds the mode. Each item coordinates itself: when you click an item, it finds the nearest accordion, reads the mode, and closes the other items.  The accordion does not listen for items opening. 'helix-before-open' does not bubble and is not composed, because overlays nest and an inner overlay's events must stay separate from the outer one's.  Items are found when they are clicked, so there is no registry to keep up to date. An item added after render coordinates on its first click. Items are matched with 'instanceof HelixHeadlessAccordionItem', so the headless tier does not depend on the styled tier's tag names.  Keys, on a trigger: Up and Down Arrow move to the previous and the next trigger, and so do Left and Right, wrapping at the ends; Home and End go to the first and the last. Enter and Space open and close the section. Disabled sections are passed over.  Each trigger is a button with 'aria-expanded' and 'aria-controls', inside a heading, level 3 unless 'heading-level' says otherwise, so the sections are in a screen reader's list of headings. An open section is a region named by its trigger. Set the level that fits the page's outline.  Find in page searches the closed sections too, and opens the one it matches in. 'hidden-until-found="false"' turns that off. */
+  /** Holds the mode. Each item coordinates itself: when you click an item, it finds the nearest accordion, reads the mode, and closes the other items.  The accordion does not listen for items opening. 'helix-before-open' does not bubble and is not composed, because overlays nest and an inner overlay's events must stay separate from the outer one's.  Items are found when they are clicked, so there is no registry to keep up to date. An item added after render coordinates on its first click. Items are matched with 'instanceof HelixHeadlessAccordionItem', so the headless tier does not depend on the styled tier's tag names.  Keys, on a trigger: Up and Down Arrow move to the previous and the next trigger, and so do Left and Right, wrapping at the ends; Home and End go to the first and the last. Enter and Space open and close the section. Disabled sections are passed over. Under 'single' the open section's trigger is 'aria-disabled', because a press cannot close it.  Each trigger is a button with 'aria-expanded' and 'aria-controls', inside a heading, level 3 unless 'heading-level' says otherwise, so the sections are in a screen reader's list of headings. An open section is a region named by its trigger. Set the level that fits the page's outline.  Find in page searches the closed sections too, and opens the one it matches in. 'hidden-until-found="false"' turns that off. */
   "helix-headless-accordion": DefineCustomElement<
     HelixHeadlessAccordion,
     HelixHeadlessAccordionVueProps,
@@ -17080,7 +17309,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAvatarVueProps,
     HelixHeadlessAvatarVueEvents
   >;
-  /** Badge wraps the element it decorates and pins an indicator to its corner, so the wrapped element keeps its place in the layout.  What the indicator shows depends on 'value':  - A 'value' of zero shows no indicator. - No 'value' shows a dot. - Any other value shows the value. Above 'max', the indicator shows '{max}+',   so its width stays the same as the count grows.  '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. */
+  /** 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.  **An icon goes inside the mark** through the 'icon' slot, before the count, as Web Awesome's badge takes one at its start. With no 'value' the icon is the whole mark, such as a check on an avatar, drawn where the dot would be. The icon is hidden from screen readers: the count and 'label' are what the mark says. */
   "helix-headless-badge": DefineCustomElement<
     HelixHeadlessBadge,
     HelixHeadlessBadgeVueProps,
@@ -17098,13 +17327,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessBlockquoteVueProps,
     HelixHeadlessBlockquoteVueEvents
   >;
-  /** Each crumb renders its separator and sets its list-item role. It hides its own separator with ':host(:first-child)', so the trail needs no index from the parent.  Set 'href' to make the whole crumb an anchor, which works with Enter, middle click, and the status bar, and before any JavaScript runs. A router cannot reach an anchor inside a shadow root, so intercept the click for client-side navigation, as with 'Tree.Item' and 'List.Item'. A trail that collapses also reads 'href' to rebuild its hidden crumbs elsewhere.  Without 'href', the crumb renders a plain '<span>' around what you slot, including your own anchor.  The current page is plain text, and 'aria-current="page"' on the host conveys the position. In a trail where no crumb is 'current', the last one is said to be the current page, and keeps its link. An 'aria-current' you write on the host, such as 'aria-current="location"', replaces the one the crumb gives itself. */
+  /** Each crumb renders its separator and sets its list-item role. It hides its own separator with ':host(:first-child)', so the trail needs no index from the parent.  Set 'href' to make the whole crumb an anchor, which works with Enter, middle click, and the status bar, and before any JavaScript runs. A router cannot reach an anchor inside a shadow root, so intercept the click for client-side navigation, as with 'Tree.Item' and 'List.Item': a plain press on the link sends 'helix-select' with the 'href' as its value first, and canceling it keeps the browser from following, so a client-side router follows it instead, as React Aria's 'onAction' lets a router do. A press with a modifier opens the link where the browser opens it and sends nothing.  Without 'href', the crumb renders a plain '<span>' around what you slot, including your own anchor.  The current page is plain text, and 'aria-current="page"' on the host conveys the position. In a trail where no crumb is 'current', the last one is said to be the current page, and keeps its link. An 'aria-current' you write on the host, such as 'aria-current="location"', replaces the one the crumb gives itself. */
   "helix-headless-breadcrumb": DefineCustomElement<
     HelixHeadlessBreadcrumb,
     HelixHeadlessBreadcrumbVueProps,
     HelixHeadlessBreadcrumbVueEvents
   >;
-  /** The host is the navigation landmark, named "Breadcrumb" by default. An 'aria-label' on the host names the trail instead, and so does 'label'. When a page has more than one navigation landmark, screen reader users choose between them by name.  The '<ol>' has an explicit 'role="list"', because Safari removes list semantics from a list with 'list-style: none', and the trail always hides its markers.  The items are slotted directly, so they are '<ol>' children in the flat tree, and each item sets 'role="listitem"' on itself. Where no slotted crumb is 'current', the last one is said to be the current page.  The trail does not measure itself, and you write its overflow in markup: put the crumb that holds the folded items where the gap should appear.  A trail built from data, such as a router's matched routes, takes 'items': an array of '{ label, href }', drawn as crumbs in order, the last one as the current page. Slotted crumbs follow them. Use one way or the other in a trail.  With 'max-items', a trail drawn from 'items' that is longer folds its middle into one crumb: the first crumb, a button, then the last 'max-items' less one. The button is named by 'expand-label' and shows the whole trail, moving focus to the first crumb it brought back. A new 'items' folds again. Slotted crumbs do not fold; write the folded crumb where the gap should be.  **Keyboard.** Each crumb with an 'href' is a link and one tab stop, and Enter follows it. The current page and the separators are not in the tab order. In a folded trail, Enter or Space on the fold's button shows the whole trail and moves focus to the first crumb it brought back. */
+  /** The host is the navigation landmark, named "Breadcrumb" by default. An 'aria-label' on the host names the trail instead, and so does 'label'. When a page has more than one navigation landmark, screen reader users choose between them by name.  The '<ol>' has an explicit 'role="list"', because Safari removes list semantics from a list with 'list-style: none', and the trail always hides its markers.  The items are slotted directly, so they are '<ol>' children in the flat tree, and each item sets 'role="listitem"' on itself. Where no slotted crumb is 'current', the last one is said to be the current page.  The trail does not measure itself, and you write its overflow in markup: put the crumb that holds the folded items where the gap should appear.  A trail built from data, such as a router's matched routes, takes 'items': an array of '{ label, href }', drawn as crumbs in order, the last one as the current page. Slotted crumbs follow them. Use one way or the other in a trail.  With 'max-items', a trail that is longer folds its middle into one place: the first crumb, a button, then the last 'max-items' less one. The button is named by 'expand-label' and shows the whole trail, moving focus to the first crumb it brought back. A trail drawn from 'items' draws the button as a crumb of its own, and a new 'items' folds again. A slotted trail hides the crumbs it folds, which take no room, and its first crumb draws the button after its link; a change to the crumbs folds again.  **Keyboard.** Each crumb with an 'href' is a link and one tab stop, and Enter follows it. The current page and the separators are not in the tab order. In a folded trail, Enter or Space on the fold's button shows the whole trail and moves focus to the first crumb it brought back. */
   "helix-headless-breadcrumbs": DefineCustomElement<
     HelixHeadlessBreadcrumbs,
     HelixHeadlessBreadcrumbsVueProps,
@@ -17146,7 +17375,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasVueProps,
     HelixHeadlessCanvasVueEvents
   >;
-  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with '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. */
+  /** 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'. '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.  **With none of those, a heading in 'header' names the card**, such as the '<h2>' of its title, by reference, so the name follows the heading's words. Reading a heading needs a DOM, so a served card is named by it once the script runs; 'label', 'aria-label' and 'aria-labelledby' are the names a server writes.  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 a served card has no row; the styled tier sets served actions at the end of their line from the stylesheet alone, so they do not move when 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,
@@ -17188,25 +17417,25 @@ 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; 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. */
+  /** 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.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
   "helix-headless-code-block": DefineCustomElement<
     HelixHeadlessCodeBlock,
     HelixHeadlessCodeBlockVueProps,
     HelixHeadlessCodeBlockVueEvents
   >;
-  /** Renders a real '<code>' element, which marks the text as code for translation tools and document search. A styled span carries no such meaning, and a screen reader announces nothing about it.  'Code' is inline only and never scrolls. For a block of code with its own box, its own overflow, and copying, use 'CodeBlock', which is a separate family. */
+  /** Renders a real '<code>' element, which marks the text as code for translation tools and document search. A styled span carries no such meaning, and a screen reader announces nothing about it.  **Set 'translate="no"' on the element to keep a page translator off the code.** A translator that rewrites prose would also rewrite an identifier. The slotted text takes its translation mode from the element, its parent in the page, and the element writes nothing onto itself, so the attribute is yours to set. The '<code>' inside carries 'translate="no"' for anything the element draws itself.  'Code' is inline only and never scrolls. For a block of code with its own box, its own overflow, and copying, use 'CodeBlock', which is a separate family. */
   "helix-headless-code": DefineCustomElement<
     HelixHeadlessCode,
     HelixHeadlessCodeVueProps,
     HelixHeadlessCodeVueEvents
   >;
-  /** A text field with a button that opens 'ColorPicker' in an overlay. 'ColorPicker' provides the square, the ramps, the eyedropper, and the syntax toggle, and you can also use it on its own, flat on the page. Color Input adds the field, the overlay, and the form value, the same arrangement Date Input has with 'DatePicker'.  You can type or paste a color into the field without opening the picker. Color Input is a custom control, unlike '<input type="color">', so you can style the panel to match your interface.  The field reads every color syntax, including '#f00', '#ff0000', 'rgb(255 0 0)', 'rgba(255,0,0,.5)', 'rgb(255 0 0 / 50%)', and 'hsl(0 100% 50%)'. It writes colors in the syntax that 'format' names. The field shows the value without reformatting it, because half-typed input does not survive a round trip through a formatter. Date Input does the same with dates.  Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does, so the message about a color it cannot read waits until you are done. Dragging in the panel sends 'input' as the color moves and 'change' when it settles.  The trigger and ArrowDown open the panel with focus in the square. Tab moves between the panel's controls without leaving it, and Escape closes it and returns focus to the field.  The component sets '--color-input-swatch', so do not set it yourself. It holds the resolved color, so the styled tier can paint the swatch without parsing the value. */
+  /** A text field with a button that opens 'ColorPicker' in an overlay. 'ColorPicker' provides the square, the ramps, the eyedropper, and the syntax toggle, and you can also use it on its own, flat on the page. Color Input adds the field, the overlay, and the form value, the same arrangement Date Input has with 'DatePicker'.  You can type or paste a color into the field without opening the picker. Color Input is a custom control, unlike '<input type="color">', so you can style the panel to match your interface.  The field reads every color syntax, including '#f00', '#ff0000', 'rgb(255 0 0)', 'rgba(255,0,0,.5)', 'rgb(255 0 0 / 50%)', 'hsl(0 100% 50%)', 'oklch(62.8% 0.258 29.2)', and 'hsb(0, 100%, 100%)'. It writes colors in the syntax that 'format' names. The field shows the value without reformatting it, because half-typed input does not survive a round trip through a formatter. Date Input does the same with dates.  Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does, so the message about a color it cannot read waits until you are done. Dragging in the panel sends 'input' as the color moves and 'change' when it settles.  The trigger and ArrowDown open the panel with focus in the square. Tab moves between the panel's controls without leaving it, and Escape closes it and returns focus to the field.  The component sets '--color-input-swatch', so do not set it yourself. It holds the resolved color, so the styled tier can paint the swatch without parsing the value. */
   "helix-headless-color-input": DefineCustomElement<
     HelixHeadlessColorInput,
     HelixHeadlessColorInputVueProps,
     HelixHeadlessColorInputVueEvents
   >;
-  /** The picker on its own, with no field around it, for a settings pane or a toolbar. Color Input shows this element in a panel behind a text field.  The saturation and brightness square is two '<input type="range">' elements, laid over the square and made invisible, and the handle is drawn from their values. The keyboard behavior, the announcements, and the touch targets come from the platform, and there is no 'role="application"'.  The picker works in HSB and derives the value from it. A value set from outside is read into the model once. Black is 'brightness: 0', which has no hue or saturation, so a model read back from the value would turn red into gray after you drag to the bottom of the square and back.  The square is one tab stop. In it, the up and down arrows move brightness and the left and right arrows move saturation, and PageUp and PageDown move brightness by ten. The picker sends 'input' as the color moves and 'change' when a drag, a key, a typed value or a preset settles it, as '<input type="color">' does.  A screen reader hears the color's name, such as "vibrant red", after the two numbers on the square and after the number on the hue ramp, and each preset is named by its color. The opacity ramp is heard as a percentage. Set 'color-words' to speak the names in another language.  The presets are a listbox with the current color selected, and one tab stop. The arrow keys move between them, Home and End go to the ends, and Enter, Space or a press chooses one. */
+  /** The picker on its own, with no field around it, for a settings pane or a toolbar. Color Input shows this element in a panel behind a text field.  The saturation and brightness square is two '<input type="range">' elements, laid over the square and made invisible, and the handle is drawn from their values. The keyboard behavior, the announcements, and the touch targets come from the platform, and there is no 'role="application"'.  The picker works in HSB and derives the value from it. A value set from outside is read into the model once. Black is 'brightness: 0', which has no hue or saturation, so a model read back from the value would turn red into gray after you drag to the bottom of the square and back.  The square is one tab stop. In it, the up and down arrows move brightness and the left and right arrows move saturation, and PageUp and PageDown move brightness by ten. The picker sends 'input' as the color moves and 'change' when a drag, a key, a typed value or a preset settles it, as '<input type="color">' does.  A screen reader hears the color's name, such as "vibrant red", after the two numbers on the square and after the number on the hue ramp, and each preset is named by its color. The opacity ramp is heard as a percentage. Set 'color-words' to speak the names in another language.  'label' names the picker, which is then a group with that name, and the square's ramps say it before their own, as "Brand, Saturation". 'hint' writes help under the picker, which the square, the ramps and the value field are described by. Inside Color Input the field carries both.  The presets are a listbox with the current color selected, and one tab stop. The arrow keys move between them, Home and End go to the ends, and Enter, Space or a press chooses one. */
   "helix-headless-color-picker": DefineCustomElement<
     HelixHeadlessColorPicker,
     HelixHeadlessColorPickerVueProps,
@@ -17296,7 +17525,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.  **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. */
+  /** 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. The icon, the message and the actions slots are parts of the same names, as Card's regions are. A slot draws no box, so a part passes inherited properties, such as color and font, to what is slotted, and a page wanting a box there gives it one with 'display', such as a row of actions with 'display: flex'.  **The view says which regions it holds**, as ':state(has-icon)' and ':state(has-actions)', so a sheet can space a view with no icon or no actions differently. Read in the browser, so a served view carries neither until the script runs.  **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,
@@ -17362,7 +17591,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessIconButtonVueProps,
     HelixHeadlessIconButtonVueEvents
   >;
-  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name 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. */
+  /** 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.  **Or point 'src' at an SVG file**, such as 'src="/icons/rocket.svg"', and the element fetches it and draws its shapes in 'currentColor' where the file does not color them. A file is fetched once a page, however many icons name it, and 'load' fires when it is drawn. Scripts, event handlers and 'javascript:' links in the file are taken out before it is drawn. A server fetches nothing, so a served icon with a 'src' is drawn once the script runs.  A name with no match, or a 'src' that is no SVG, 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,
@@ -17530,7 +17759,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMeterVueProps,
     HelixHeadlessMeterVueEvents
   >;
-  /** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar.  **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root.  The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker. Any value but 'false' counts, so a sidebar of sections on one page can mark the section in view with 'aria-current="location"'. Where several are marked, 'page' wins.  **The destinations can be a list.** Slot a '<ul>' or an '<ol>' of '<li>' elements, each holding a link, and a screen reader says how many there are and where each one is, as in Radix's 'NavigationMenu.List'. The marker and the arrow keys work on the list items as they do on bare links. Give the list 'role="list"' as well, since Safari drops the semantics of a list drawn without bullets.  Set 'orientation="vertical"' to stack the destinations in a column, for a sidebar.  Set 'arrows' and the arrow keys move focus between the destinations, as Radix's navigation menu does: left and right along a row, up and down a column, Home and End to the ends. A 'Megamenu' among them is reached at its trigger. Tab still stops at every link, since a navigation is a list of links and not a single control, and the keys across the other axis are left to the page and to an open panel. */
+  /** Renders a real '<nav>', the landmark that screen reader users jump to. Navigation is its own component, separate from 'AppHeader', so you can use it in a header, a footer, or a sidebar.  **It renders no links.** Bring your own, mark the current one with 'aria-current="page"', and style them with the 'data-navigation-item' recipe. A router renders its own anchors and cannot render them inside the component's shadow root.  The component moves a marker to the current item. It finds the current item by reading 'aria-current', so the attribute that screen readers announce also places the marker. Any value but 'false' counts, so a sidebar of sections on one page can mark the section in view with 'aria-current="location"'. Where several are marked, 'page' wins.  **The destinations can be a list.** Slot a '<ul>' or an '<ol>' of '<li>' elements, each holding a link, and a screen reader says how many there are and where each one is, as in Radix's 'NavigationMenu.List'. The marker and the arrow keys work on the list items as they do on bare links. Give the list 'role="list"' as well, since Safari drops the semantics of a list drawn without bullets.  Set 'orientation="vertical"' to stack the destinations in a column, for a sidebar.  Set 'arrows' and the arrow keys move focus between the destinations, as Radix's navigation menu does: left and right along a row, up and down a column, Home and End to the ends. A 'Megamenu' among them is reached at its trigger. Tab still stops at every link, since a navigation is a list of links and not a single control, and the keys across the other axis are left to the page and to an open panel.  While a 'Megamenu', or another disclosure among the destinations, is open, the navigation is ':state(open)', so a page can dim what lies under the panel, as Radix's navigation menu marks its open state.  A screen reader lists the page's navigation landmarks by name, so two named alike cannot be told apart. Where another navigation in the same document has the same name, "Main" for two with no 'label', the later one warns once with the kind 'duplicate-name'. */
   "helix-headless-navigation": DefineCustomElement<
     HelixHeadlessNavigation,
     HelixHeadlessNavigationVueProps,
@@ -17632,7 +17861,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessQrCodeVueProps,
     HelixHeadlessQrCodeVueEvents
   >;
-  /** Renders a real '<q>', so the browser supplies the quotation marks. It inserts the correct marks for the document's language and nests them correctly when one quotation sits inside another. Do not type quotation marks into the content: one that starts or ends with a typed mark warns once, with the runtime kind 'typed-marks'. A quotation in a language other than the page's takes 'lang' on the element, and its marks follow it: 'lang="de"' sets „…“ and 'lang="fr"' «…» inside an English page.  For a passage set off from the surrounding text, use a blockquote. */
+  /** Renders a real '<q>', so the browser supplies the quotation marks. It inserts the correct marks for the document's language and nests them correctly when one quotation sits inside another. Do not type quotation marks into the content: one that starts or ends with a typed mark warns once, with the runtime kind 'typed-marks'. A quotation in a language other than the page's takes 'lang' on the element, and its marks follow it: 'lang="de"' sets „…“ and 'lang="fr"' «…» inside an English page.  **'no-marks' leaves the marks off**, for a quotation set where the page draws its own, such as a pull quote with a large decorative mark beside it or a table of sayings. The quotation still counts toward nesting, so a quote inside it takes the inner marks it would have had. Text with marks typed into it raises no warning under 'no-marks'.  For a passage set off from the surrounding text, use a blockquote. */
   "helix-headless-quote": DefineCustomElement<
     HelixHeadlessQuote,
     HelixHeadlessQuoteVueProps,
@@ -17668,7 +17897,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessScrollAreaVueProps,
     HelixHeadlessScrollAreaVueEvents
   >;
-  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
+  /** A trigger that opens a 'Listbox'. The list is the same element you can use on its own, with the same keyboard behavior, filtering, and multi-select rules. Select adds a trigger that shows what is chosen, a floating surface, and a place for focus to return to when the list closes.  Your options stay in your light DOM and are slotted through into the listbox, so the listbox looks through slots to find them. For a list too long to draw whole, set 'items' instead: the list draws only the options in sight, as Listbox's 'items' does, and the trigger, its keys and the form read the whole set.  'Select' owns the value, passes it down to the listbox, and takes changes back, so the value lives in one place.  Set 'valueContent' to draw the trigger's content from the chosen options, and several chosen options are written as a list in the reader's language.  **Keyboard.** On the closed trigger:  | Key | What it does | |---|---| | Down, Enter, Space | Opens the list on the chosen option, or the first. | | Up | Opens the list on the chosen option, or the last. | | Home, End | Opens the list on the first or the last option. | | Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. | | A letter or a word | Chooses the option whose words start with what you typed, as a native '<select>' does. With 'multiple', opens the list on it. |  In the open list, which is a 'Listbox':  | Key | What it does | |---|---| | Down, Up, Home, End, Page Down, Page Up | Moves the highlight. | | A letter or a word | Moves the highlight to the next option whose words start with what you typed. | | Enter, Space | Chooses the highlighted option and closes the list. With 'multiple', toggles it and leaves the list open. | | Escape | Closes the list and puts focus back on the trigger. | | Tab | Closes the list and moves on. |  A choice made on the closed trigger is said aloud on Apple devices, where VoiceOver does not read the trigger's new name.  **ARIA.** The trigger is a 'button' with 'aria-haspopup="listbox"' and 'aria-expanded', named by the label and then the chosen words, as a native '<select>' is. The list is the listbox 'Listbox' describes, named by the label, or by 'list-label' where there is none.  Set 'autocomplete' to let a browser's autofill choose, as a native '<select>' with the same attribute would. */
   "helix-headless-select": DefineCustomElement<
     HelixHeadlessSelect,
     HelixHeadlessSelectVueProps,
@@ -17686,7 +17915,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSkipLinkVueProps,
     HelixHeadlessSkipLinkVueEvents
   >;
-  /** Renders a native '<input type="range">', so the drag, the arrow keys, Home, End, the page keys, and the touch target come from the platform. A native range has a hit area larger than its thumb, sized for a finger.  The value is a string, like every other form control's, and 'MixinControllerValue' holds text. Use 'valueAsNumber' for arithmetic.  Marks are drawn by the component. The ticks of a '<datalist>' cannot be styled, and Firefox does not render them for a range. Marks are decoration. 'step' sets where the value can land, and the input enforces it whether or not marks are drawn. 'markers' is a count, so a slider from zero to a hundred does not draw a hundred and one marks by accident.  A range with two thumbs is two inputs stacked on one track, because there is no native two-thumb range. Each thumb keeps its own value. 'min-steps-between-thumbs' keeps them that many steps apart, and the readout joins the two as 'range-text' writes them.  'origin' sets where a single thumb's fill starts: at 'min', at the middle of the track, or at 'max'. A balance or an offset from zero fills from the middle, as Zag's slider 'origin' does. The fill's ends are published as '--slider-from' and '--slider-to'.  'format-options' writes the value with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, and 'formatter' writes it with a function of your own, such as words for a scale. Either one is what a screen reader hears, what the readout shows and what the marker labels say. 'value-text' still wraps it in a sentence, with the formatted value in its place.  'required' comes with the field mixin and cannot fail. A range is never empty: the platform shows its midpoint when no value is set, and 'willUpdate' seeds that midpoint into 'defaultValue', so the value matches the handle from the first render. HTML does not apply 'required' to a range either, so it is not set on the input. It only adds the marker beside the label.  **Keyboard.** Each thumb is one tab stop, and its keys are the native range's.  | Key | What it does | |---|---| | Right, Up | Moves the thumb up by 'step'. | | Left, Down | Moves the thumb down by 'step'. | | Page Up, Page Down | Moves the thumb by a larger step. | | Home, End | Moves the thumb to its lowest or highest value. |  Each thumb is an '<input type="range">' with 'aria-valuetext' where the value is formatted or worded. A range's thumbs say they stop at each other with 'aria-valuemin' and 'aria-valuemax'. */
+  /** Renders a native '<input type="range">', so the drag, the arrow keys, Home, End, the page keys, and the touch target come from the platform. A native range has a hit area larger than its thumb, sized for a finger.  The value is a string, like every other form control's, and 'MixinControllerValue' holds text. Use 'valueAsNumber' for arithmetic.  Marks are drawn by the component. The ticks of a '<datalist>' cannot be styled, and Firefox does not render them for a range. Marks are decoration. 'step' sets where the value can land, and the input enforces it whether or not marks are drawn. 'markers' is a count, so a slider from zero to a hundred does not draw a hundred and one marks by accident.  A range with two thumbs is two inputs stacked on one track, because there is no native two-thumb range. Each thumb keeps its own value, and a named range submits one entry per thumb under its name, the lowest first. A range given more than two values, such as 'default-value="20,50,80"', has a thumb for each, as React Aria's slider takes any number of thumbs: each stops at its neighbors, and the ones between the first and the last are named by 'thumb-label'. 'min-steps-between-thumbs' keeps them that many steps apart, and the readout joins the two as 'range-text' writes them.  'origin' sets where a single thumb's fill starts: at 'min', at the middle of the track, or at 'max'. A balance or an offset from zero fills from the middle, as Zag's slider 'origin' does. The fill's ends are published as '--slider-from' and '--slider-to'.  'format-options' writes the value with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, and 'formatter' writes it with a function of your own, such as words for a scale. Either one is what a screen reader hears, what the readout shows and what the marker labels say. 'value-text' still wraps it in a sentence, with the formatted value in its place.  'required' comes with the field mixin and cannot fail. A range is never empty: the platform shows its midpoint when no value is set, and 'willUpdate' seeds that midpoint into 'defaultValue', so the value matches the handle from the first render. HTML does not apply 'required' to a range either, so it is not set on the input. It only adds the marker beside the label.  **Keyboard.** Each thumb is one tab stop, and its keys are the native range's.  | Key | What it does | |---|---| | Right, Up | Moves the thumb up by 'step'. | | Left, Down | Moves the thumb down by 'step'. | | Page Up, Page Down | Moves the thumb by a larger step. | | Home, End | Moves the thumb to its lowest or highest value. |  Under 'readonly' none of these move the thumb, and Tab still reaches it.  Each thumb is an '<input type="range">' with 'aria-valuetext' where the value is formatted or worded. A range's thumbs say they stop at each other with 'aria-valuemin' and 'aria-valuemax'. */
   "helix-headless-slider": DefineCustomElement<
     HelixHeadlessSlider,
     HelixHeadlessSliderVueProps,
@@ -17704,37 +17933,37 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSpeedDialGroupVueProps,
     HelixHeadlessSpeedDialGroupVueEvents
   >;
-  /** Each item is a command, so it has the 'menuitem' role. A megamenu holds destinations, so it is a disclosure of links. A speed dial holds actions, which is what 'role="menu"' is for.  The name is text rendered beside the icon, and it is the accessible name. A 'title' on an icon shows only on hover. Visible text is read, searched, and translated like other text.  'shortcut' gives the action's keyboard shortcut as a chord, such as 'mod+s', the grammar Menu's rows use. The action carries it as 'aria-keyshortcuts' and draws it after the name in the platform's glyphs or words, '⌘S' on an Apple keyboard and 'Ctrl+S' elsewhere, as Menu draws its rows' shortcuts. Put a 'Kbd' in the 'shortcut' slot to draw it as keys instead; the dial imports no 'Kbd' of its own. Showing a shortcut does not bind it. */
+  /** Each item is a command, so it has the 'menuitem' role. A megamenu holds destinations, so it is a disclosure of links. A speed dial holds actions, which is what 'role="menu"' is for.  The name is text rendered beside the icon, and it is the accessible name. A 'title' on an icon shows only on hover. Visible text is read, searched, and translated like other text.  'shortcut' gives the action's keyboard shortcut as a chord, such as 'mod+s', the grammar Menu's rows use. The action carries it as 'aria-keyshortcuts' and draws it after the name in the platform's glyphs or words, '⌘S' on an Apple keyboard and 'Ctrl+S' elsewhere, as Menu draws its rows' shortcuts. Put a 'Kbd' in the 'shortcut' slot to draw it as keys instead; the dial imports no 'Kbd' of its own. Showing a shortcut does not bind it.  'href' makes the action a link, as Menu's rows take one: the 'item' part is then an '<a>' carrying 'menuitem', so the browser follows it, opens it in a new tab on a middle press, and offers its own menu for it. Choosing it still sends 'helix-select' and closes the dial. A disabled action draws no link. */
   "helix-headless-speed-dial-item": DefineCustomElement<
     HelixHeadlessSpeedDialItem,
     HelixHeadlessSpeedDialItemVueProps,
     HelixHeadlessSpeedDialItemVueEvents
   >;
-  /** A speed dial is a menu. Its items are commands, so it uses 'role="menu"' and 'menuitem', and it is built from the same pieces as 'Menu': - 'KeyboardNavigationController' for the arrow keys - 'PopoverController' for the panel - 'MixinControllerOpen' for open and closed  It is a separate component because a speed dial has no submenus, headers, or checkable items.  You slot the trigger. The usual floating action button is 'IconButton' with 'shape="circle"' and 'raised'. There is no 'helix-fab', because 'IconButton' already has 'emphasis', 'tone', 'label', and a size. Position the button with 'data-dock' in the base layer.  All four arrow keys move through the actions, because a speed dial has no nested levels to reserve the horizontal pair for. This is the default behavior of the keyboard controller. Typing a letter moves to the next action whose name starts with it. The actions are one tab stop, and Tab closes the dial and moves on.  **Keyboard.** On the trigger, Enter, Space or a press opens the dial on its first action. With the dial open:  | Key | What it does | |---|---| | Down, Right | Moves to the next action, from the last back to the first. | | Up, Left | Moves to the action before, from the first round to the last. | | Home, End | Moves to the first or the last action. | | A letter | Moves to the next action whose name starts with it. | | Enter, Space | Chooses the action, and the dial closes. | | Escape | Closes the dial and puts focus back on the trigger. | | Tab | Closes the dial and moves on. |  **Groups.** Put actions in 'Speed Dial.Group', named by its 'label', to set them apart as Menu's sections do: each is a 'group' of the menu, and the arrow keys walk through every group's actions in order.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, such as composing a message, and holding it for half a second opens the dial, as React Aria's menu trigger does with 'trigger="longPress"'. Alt+Down or Alt+Up opens it from the keyboard, and the trigger says so in its description, 'long-press-label', the drawn one and a slotted one alike. A press that has opened the dial does not also do the trigger's action. */
+  /** A speed dial is a menu. Its items are commands, so it uses 'role="menu"' and 'menuitem', and it is built from the same pieces as 'Menu': - 'KeyboardNavigationController' for the arrow keys - 'PopoverController' for the panel - 'MixinControllerOpen' for open and closed  It is a separate component because a speed dial has no submenus, headers, or checkable items.  You slot the trigger. The usual floating action button is 'IconButton' with 'shape="circle"' and 'raised'. There is no 'helix-fab', because 'IconButton' already has 'emphasis', 'tone', 'label', and a size. Position the button with 'data-dock' in the base layer.  All four arrow keys move through the actions, because a speed dial has no nested levels to reserve the horizontal pair for. This is the default behavior of the keyboard controller. Typing a letter moves to the next action whose name starts with it. The actions are one tab stop, and Tab closes the dial and moves on.  **Keyboard.** On the trigger, Enter, Space, Down or a press opens the dial on its first action, and Up opens it on its last, as an APG menu button does. With the dial open:  | Key | What it does | |---|---| | Down, Right | Moves to the next action, from the last back to the first. | | Up, Left | Moves to the action before, from the first round to the last. | | Home, End | Moves to the first or the last action. | | A letter | Moves to the next action whose name starts with it. | | Enter, Space | Chooses the action, and the dial closes. | | Escape | Closes the dial and puts focus back on the trigger. | | Tab | Closes the dial and moves on. |  **Groups.** Put actions in 'Speed Dial.Group', named by its 'label', to set them apart as Menu's sections do: each is a 'group' of the menu, and the arrow keys walk through every group's actions in order.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, such as composing a message, and holding it for half a second opens the dial, as React Aria's menu trigger does with 'trigger="longPress"'. Alt+Down or Alt+Up opens it from the keyboard, and the trigger says so in its description, 'long-press-label', the drawn one and a slotted one alike. A press that has opened the dial does not also do the trigger's action.  **Open on hover.** With 'open-on="hover"', a mouse resting on the trigger opens the dial, as Material's speed dial does, and the dial closes a moment after the mouse leaves both the trigger and the actions. A press, a touch and the keyboard open it as under 'click', and a press on the trigger of a dial already open moves focus to its first action, so the press a mouse makes after hovering keeps the dial open. */
   "helix-headless-speed-dial": DefineCustomElement<
     HelixHeadlessSpeedDial,
     HelixHeadlessSpeedDialVueProps,
     HelixHeadlessSpeedDialVueEvents
   >;
-  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', with 'aria-valuetext' saying the start pane's share as a percentage in the nearest 'lang', or in the reader's locale where no 'lang' is set, and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'.  Set 'primary' to the pane that keeps its size when the splitter's own size changes, such as a sidebar beside a window being resized. The other pane takes all of the change, as Web Awesome's split panel does. Without it, both panes keep their share.  **Keyboard.** The divider is one tab stop.  | Key | What it does | |---|---| | Left, Right | Moves a side-by-side divider by 'step'. On a right-to-left page, Left moves it toward the end. | | Up, Down | Moves a stacked divider by 'step'. | | Home, End | Moves the divider to its bounds. | | Enter | Collapses the start pane, and opens it again. | | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. | */
+  /** A splitter has one axis. Nest splitters to get two axes and three-pane or four-pane layouts.  When a splitter is slotted into a pane of another at a right angle, a corner handle appears where the dividers cross. It shows the 'move' cursor, responds to both arrow axes, and a drag moves both dividers at once. The corner is added at 'firstUpdated' and is not in the server markup. Before it appears, both dividers work on their own.  The divider has 'role="separator"' and 'aria-valuenow', with 'aria-valuetext' saying the start pane's share as a percentage in the nearest 'lang', or in the reader's locale where no 'lang' is set, and 'aria-controls' names the start pane. Drag it with a pointer or move it with the arrow keys, press 'Home' or 'End' to move it to its bounds, and press 'Enter' to collapse the start pane and open it again. A drag in progress is tracked as a state, so both dividers a corner moves stay lit for as long as they move.  By default, 'min' and 'max' let the divider reach either edge, so you can drag a pane fully closed. Set them to limit the range.  A pane can be collapsed, which is a separate state from a divider at the edge. 'collapsed' names the shut pane, 'start' or 'end', and the pane opens back to the position where the collapsing gesture began. A drag records that position on press, and every other way of collapsing records it in 'settle'. 'collapsed-size' keeps a sliver of the pane visible, such as a tab strip. Collapsing overrides 'min' and 'max'.  Set 'primary' to the pane that keeps its size when the splitter's own size changes, such as a sidebar beside a window being resized. The other pane takes all of the change, as Web Awesome's split panel does. Without it, both panes keep their share.  **Three or more panes along one axis are splitters nested on that axis**, a splitter in the 'end' pane of another for three columns. The nested one keeps the pane on its far side the size it was while the outer divider moves, so a divider resizes only the two panes beside it, as Zag's splitter does with any number of panels. Where the whole row is resized, every pane keeps its share, unless 'primary' says otherwise.  **Keyboard.** The divider is one tab stop.  | Key | What it does | |---|---| | Left, Right | Moves a side-by-side divider by 'step'. On a right-to-left page, Left moves it toward the end. | | Up, Down | Moves a stacked divider by 'step'. | | Home, End | Moves the divider to its bounds. | | Enter | Collapses the start pane, and opens it again. | | F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. | */
   "helix-headless-splitter": DefineCustomElement<
     HelixHeadlessSplitter,
     HelixHeadlessSplitterVueProps,
     HelixHeadlessSplitterVueEvents
   >;
-  /** Screen readers announce the stats as a group. The figures are read together and their order has no meaning, so the group does not announce positions such as "1 of 4". */
+  /** **A named group is a group**, so a screen reader announces the stats together under its name, such as "Usage, group". Name it with 'label', 'aria-label' or 'aria-labelledby'. An unnamed one has no role, since a group with no name only adds "group" to what a reader says, as an unnamed Card has none. The figures are read together and their order has no meaning, so the group does not announce positions such as "1 of 4". */
   "helix-headless-stat-group": DefineCustomElement<
     HelixHeadlessStatGroup,
     HelixHeadlessStatGroupVueProps,
     HelixHeadlessStatGroupVueEvents
   >;
-  /** The label comes first in the markup and the value after it, so a screen reader reads what the figure counts before the number. Visually, the number stands out either way.  Both are bare slots. An element that assigned itself a slot on connect would add an attribute after upgrade, which markup rendered on the server by React does not have.  **A stat with a label is a group named by it**, so a reader moving through a dashboard hears "Revenue, group" and then the figure, its unit and its trend as one reading, rather than a run of loose words. The role and the name are set through 'ElementInternals' once the label is known, which writes no attribute; a stat with no label has no role. Put a 'Trend' in the 'trend' slot to have it read inside the group, after the figure it qualifies. */
+  /** The label comes first in the markup and the value after it, so a screen reader reads what the figure counts before the number. Visually, the number stands out either way.  Both are bare slots. An element that assigned itself a slot on connect would add an attribute after upgrade, which markup rendered on the server by React does not have.  **A stat with a label is a group named by it**, so a reader moving through a dashboard hears "Revenue, group" and then the figure, its unit and its trend as one reading, rather than a run of loose words. The role and the name are set through 'ElementInternals' once the label is known, which writes no attribute; a stat with no label has no role. Put a 'Trend' in the 'trend' slot to have it read inside the group, after the figure it qualifies.  **Or give the figure as a number.** 'value' is written with 'Intl.NumberFormat', in 'locale' and with 'format-options', so 'value="1234567" format-options='{"notation":"compact"}'' shows '1.2M', and a server writes it as the browser does. A number in 'value' takes the place of a slotted figure.  **Each slot is a part of the same name**, and 'value' for the figure, so a page reaches the label, the unit and the trend from outside. A slot draws no box, so a part passes inherited properties to what is slotted. **The stat says which pieces it holds**, as ':state(has-label)', ':state(has-unit)' and ':state(has-trend)', read in the browser, so a served stat carries none until the script runs. */
   "helix-headless-stat": DefineCustomElement<
     HelixHeadlessStat,
     HelixHeadlessStatVueProps,
     HelixHeadlessStatVueEvents
   >;
-  /** 'active' sets where the user is, and 'complete' stays on each step. Returning to stage one of three leaves stages one and two finished, so the root sets 'current' on the steps and never changes 'complete'.  'active' is optional. Without it, each step keeps its own 'current', so the sequence is correct in the server's markup, where the root cannot count its slotted children.  'linear' keeps a reader from passing a stage they have not finished, as Ark UI's linear steps do: a stage ahead is out of reach, and its button disabled, until every stage before it is 'complete' or 'optional'. Going back is always allowed. 'next()' and 'previous()' move one stage either way, under the same rules, for your own buttons.  To check a stage before a reader moves on from it, set 'validate' to a function that answers whether the stage is valid, as Ark UI's 'isStepValid' does. Moving forward asks it about the stage the reader is on, and where it answers 'false' the reader stays and the stage is ':state(invalid)' until it answers 'true'. An 'optional' stage is not asked. 'helix-before-activate' is still sent for every move, for a check of your own.  'progress' is how far through the sequence is, from 0 to 100: the share of its stages that are 'complete'. The 'progress' part carries it as a 'progressbar' and as '--steps-progress', and is hidden until a stylesheet gives it a 'display', so a bar of your own costs nothing until you draw it. A screen reader hears it as 'progress-label' says, "33% complete" unless set, as Ark UI's steps write it. The sequence is ':state(complete)' once every stage is.  The sequence is a list named by 'label', and each step a list item. The current stage's button says 'aria-current="step"', and a finished stage's button is described by its 'complete-label'. */
+  /** 'active' sets where the user is, and 'complete' stays on each step. Returning to stage one of three leaves stages one and two finished, so the root sets 'current' on the steps and never changes 'complete'.  'active' is optional. Without it, each step keeps its own 'current', so the sequence is correct in the server's markup, where the root cannot count its slotted children.  'linear' keeps a reader from passing a stage they have not finished, as Ark UI's linear steps do: a stage ahead is out of reach, and its button disabled, until every stage before it is 'complete' or 'optional'. Going back is always allowed. 'next()' and 'previous()' move one stage either way, under the same rules, for your own buttons. 'reset()' goes back to the first stage and clears every stage's 'complete', as Ark UI's 'resetStep' does.  'completion="passed"' marks a stage 'complete' once a reader moves past it, as Ark UI counts a stage before the current one as completed. Going back leaves it complete. In a 'linear' sequence the next stage is then in reach from the current one, and 'validate' decides whether the reader may go.  To check a stage before a reader moves on from it, set 'validate' to a function that answers whether the stage is valid, as Ark UI's 'isStepValid' does. Moving forward asks it about the stage the reader is on, and where it answers 'false' the reader stays and the stage is ':state(invalid)' until it answers 'true'. An 'optional' stage is not asked. 'helix-before-activate' is still sent for every move, for a check of your own.  'progress' is how far through the sequence is, from 0 to 100: the share of its stages that are 'complete'. The 'progress' part carries it as a 'progressbar' and as '--steps-progress', and is hidden until a stylesheet gives it a 'display', so a bar of your own costs nothing until you draw it. A screen reader hears it as 'progress-label' says, "33% complete" unless set, as Ark UI's steps write it. The sequence is ':state(complete)' once every stage is.  The sequence is a list named by 'label', and each step a list item. The current stage's button says 'aria-current="step"', and a finished stage's button is described by its 'complete-label'.  **Keyboard.** Each stage's name is a button and its own tab stop, and Enter or Space goes to the stage. Set 'arrows' and the arrow keys move focus between the names as well, as Ark UI's steps do: Left and Right along a row, Up and Down a column, Home and End to the first and the last. The arrows pass over a disabled stage and one a linear sequence holds out of reach, and they move focus without going to the stage. */
   "helix-headless-steps": DefineCustomElement<
     HelixHeadlessSteps,
     HelixHeadlessStepsVueProps,
@@ -17782,19 +18011,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTabPanelVueProps,
     HelixHeadlessTabPanelVueEvents
   >;
-  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  **Keyboard.**  | Key | What it does | |---|---| | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless 'manual' is set or a tab is a link. | | Left, Up | Moves to the tab before, from the first round to the last. | | Home, End | Moves to the first or the last tab. | | Enter, Space | Selects the tab with focus, or follows its link. | | Tab | Leaves the list for the selected panel. |  Removing the selected tab selects the first enabled tab that is left, and 'active' says so, with 'helix-activate'. Where the removed tab had focus, focus moves to the tab now selected.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
+  /** Selection works through an event, the same as in the accordion and the tree. A tab dispatches 'helix-select', and the root pairs it with the panel of the same value. Nothing registers with anything, so tabs added later work with no extra setup.  The tab list is a single tab stop, and the arrow keys move between tabs through 'KeyboardNavigationController', the same as in the radio and toggle groups. Selection follows focus, which suits a small set where showing a panel is cheap. Set 'manual' when showing a panel is expensive, so focus can move without selecting.  'orientation="vertical"' sets the tabs in a column beside the panels, and the tab list says 'aria-orientation="vertical"'. The arrow keys of both axes move between tabs either way.  A tab with an 'href' is a link, for tabs that are pages of a site. Pressing it follows the link. Where any tab is a link, the arrow keys move focus without choosing on every tab of the list, as under 'manual', so arrowing past a tab never leaves the page and the list answers the keys one way. Mark the tab of the page you are on with 'selected', or set 'active' to its value.  Each tab says which panel it controls through 'aria-controls', set as an element reference to the panel's host, where the engine has reflection.  Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up and Down; Home and End go to the first and the last. The horizontal arrows follow the reading direction, so on a right-to-left page Left moves on. Disabled tabs are passed over. Tab leaves the list for the selected panel, which is a tab stop only while it holds nothing focusable.  **Keyboard.**  | Key | What it does | |---|---| | Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless 'manual' is set or a tab is a link. | | Left, Up | Moves to the tab before, from the first round to the last. | | Home, End | Moves to the first or the last tab. | | Enter, Space | Selects the tab with focus, or follows its link. | | Tab | Leaves the list for the selected panel. |  Removing the selected tab selects the first enabled tab that is left, and 'active' says so, with 'helix-activate'. Where the removed tab had focus, focus moves to the tab now selected.  **More tabs than fit.** With 'scroll-controls', a strip that scrolls shows a button at each end it can scroll toward, as Web Awesome's tab group does, and a press scrolls it most of its own length. The buttons are for the pointer, so they are out of the tab order and hidden from screen readers; the arrow keys already reach every tab, and the strip scrolls the selected tab into view. A strip scrolls once a stylesheet gives the 'tabs' part an 'overflow', as the styled tier does.  A tab with 'dismissible' can be closed: see 'Tabs.Tab'.  The 'indicator' part moves to the selected tab and carries its place and size, so a mark of your own can be drawn there: style the part, or slot an element into 'indicator', which sits inside the part and reads the same properties. */
   "helix-headless-tabs": DefineCustomElement<
     HelixHeadlessTabs,
     HelixHeadlessTabsVueProps,
     HelixHeadlessTabsVueEvents
   >;
-  /** A tab is an element, because it manages selection and its own tab stop.  With an 'href', the tab is a link: 'role="tab"' on an '<a>', which a press, Enter and the browser's own link gestures follow. 'helix-select' is sent first, and canceling it keeps the browser from following, so a client-side router follows it instead. */
+  /** A tab is an element, because it manages selection and its own tab stop.  With an 'href', the tab is a link: 'role="tab"' on an '<a>', which a press, Enter and the browser's own link gestures follow. 'helix-select' is sent first, and canceling it keeps the browser from following, so a client-side router follows it instead.  With 'dismissible', the tab can be closed, as Web Awesome's closable tab can: a press on its 'dismiss' mark, or Delete or Backspace while the tab has focus, sends 'helix-dismiss'. The tab does not remove itself, because your code owns the set, so remove the tab and its panel in your handler. Focus moves to the tab beside it, and the tab set selects a tab that is left. The tab says the key through 'aria-keyshortcuts', and the mark is for the pointer, hidden from screen readers. */
   "helix-headless-tab": DefineCustomElement<
     HelixHeadlessTab,
     HelixHeadlessTabVueProps,
     HelixHeadlessTabVueEvents
   >;
-  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. In 'multiple', Shift with an arrow, Home or End selects the range from the tag last pressed to the tag focus moves to, and Control or Command with A selects every tag that is not disabled. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over. A selected tag that is removed leaves 'value', which then sends 'change'.  Name the set with 'label'. Each tag is named by its words alone, without its remove button. 'value' takes an array of values on the property as well, as React sets 'value={['Apple']}'; a press writes it back as a string.  **Removing the last tag keeps focus in the group.** With no tags left the set is a 'group', and focus moves to its 'empty' part, which holds the 'empty' slot: put words there such as "No filters" for a reader to hear. With nothing slotted it says 'empty-label', "No tags". Where only disabled tags are left, the first of them holds the tab stop and takes focus, so the reader stays in the set. */
+  /** A part of 'Tag' that holds tags as one control: a grid of rows, one tab stop for the whole set. The arrow keys move between tags, Home and End go to the first and the last, and a typed letter goes to the next tag starting with it. Delete or Backspace removes the focused tag where it is 'dismissible', by sending its 'helix-dismiss': remove it from your list in the handler, and focus moves to the next tag, or the previous one after the last.  'selection-mode' lets a reader select tags, with Space, Enter or a press: 'single' selects one at a time and 'multiple' any number. In 'multiple', Shift with an arrow, Home or End selects the range from the tag last pressed to the tag focus moves to, Shift with a press or Space selects the range to that tag, and Control or Command with A selects every tag that is not disabled. 'selection-behavior="replace"' selects the tag a reader presses or moves to alone, as a file list does, and Control or Command with a press or Space adds or takes out one tag. 'disallow-empty-selection' keeps one tag selected once one is. 'value' holds the selected tags' values, separated by commas, and a change asks with 'helix-before-change' and tells with 'change'. Enter on a tag with an 'href' follows its link. A 'disabled' tag is passed over. A selected tag that is removed leaves 'value', which then sends 'change'.  Name the set with 'label'. Each tag is named by its words alone, without its remove button. 'value' takes an array of values on the property as well, as React sets 'value={['Apple']}'; a press writes it back as a string.  **Removing the last tag keeps focus in the group.** With no tags left the set is a 'group', and focus moves to its 'empty' part, which holds the 'empty' slot: put words there such as "No filters" for a reader to hear. With nothing slotted it says 'empty-label', "No tags". Where only disabled tags are left, the first of them holds the tab stop and takes focus, so the reader stays in the set. */
   "helix-headless-tag-group": DefineCustomElement<
     HelixHeadlessTagGroup,
     HelixHeadlessTagGroupVueProps,
@@ -17896,7 +18125,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTreeItemVueProps,
     HelixHeadlessTreeItemVueEvents
   >;
-  /** The tree is a single tab stop, and arrow keys move focus between items, as the tree pattern requires, so Tab moves past a long sidebar in one press. The tree moves the tab stop to the focused item, so the browser's focus order stays intact.  Items are found with 'instanceof', never by tag name, so the headless tier does not depend on the styled one.  Typing a letter moves to the next visible item whose name starts with it, and '*' opens every branch beside the focused item.  'selection-mode="multiple"' draws a check mark on every row and lets a reader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking a branch checks every item under it, and a branch some of whose items are checked is partly checked. Space or a press on the mark checks the focused row, and Enter or a press on a branch's row opens it. 'active' then holds the checked values, comma separated, which 'values' also gives as a list, and the tree says 'aria-multiselectable'.  'selection-mode="leaf"' chooses one item at a time and only the items at the ends: a press, Enter or Space on a branch opens or closes it and chooses nothing, as Web Awesome's 'leaf' mode does.  Keys: Up and Down Arrow move between the items a reader can see; Right Arrow opens a shut branch and then moves into it, and Left Arrow shuts an open one and then moves to its parent, the two swapping on a right-to-left page. Home and End go to the first and the last item, Enter and Space choose or open, and the tree's one tab stop stays on the item last reached. In a tree of check marks, Control+A (Command+A on an Apple keyboard) checks every item or clears them all, and Shift with Up or Down Arrow moves and checks.  Removing the item that has focus moves focus to the item after it among its siblings, or the one before, or its parent, so focus stays in the tree.  **'reorderable' lets you move items among their siblings.** Alt with Up or Down moves the focused item a place, and Alt with Home or End to the first or the last place among its siblings, as the APG's rearrangeable listbox does. Each row gets a grip at its far end: drag it to move the item, and the tree scrolls near an edge. A click on a grip picks the item up and a click on one of its siblings drops it there, which needs no drag. The arrows move an item picked up that way, Enter or Space drops it, and Escape puts it back. The tree says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold the siblings in the new order. **You move the items**: the tree moves no element of yours, and focus follows the moved item once you have. Moving an item into another branch is not part of this. */
+  /** The tree is a single tab stop, and arrow keys move focus between items, as the tree pattern requires, so Tab moves past a long sidebar in one press. The tree moves the tab stop to the focused item, so the browser's focus order stays intact.  Items are found with 'instanceof', never by tag name, so the headless tier does not depend on the styled one.  Typing a letter moves to the next visible item whose name starts with it, and '*' opens every branch beside the focused item.  'selection-mode="multiple"' draws a check mark on every row and lets a reader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking a branch checks every item under it, and a branch some of whose items are checked is partly checked. Space or a press on the mark checks the focused row, and Enter or a press on a branch's row opens it. 'active' then holds the checked values, comma separated, which 'values' also gives as a list, and the tree says 'aria-multiselectable'.  'selection-mode="leaf"' chooses one item at a time and only the items at the ends: a press, Enter or Space on a branch opens or closes it and chooses nothing, as Web Awesome's 'leaf' mode does.  Keys: Up and Down Arrow move between the items a reader can see; Right Arrow opens a shut branch and then moves into it, and Left Arrow shuts an open one and then moves to its parent, the two swapping on a right-to-left page. Home and End go to the first and the last item, Enter and Space choose or open, and the tree's one tab stop stays on the item last reached. In a tree of check marks, Control+A (Command+A on an Apple keyboard) checks every item or clears them all, and Shift with Up or Down Arrow moves and checks. Shift+Space checks every item from the one last checked to the focused one, and Control+Shift+Home or End checks every item from the focused one to the first or the last, then moves there, as the tree pattern's range keys do.  A tree with no name of its own is announced as "Tree", which says nothing about what it holds, so a development build warns once with the kind 'missing-name' where neither 'label' nor an 'aria-label' names it.  Removing the item that has focus moves focus to the item after it among its siblings, or the one before, or its parent, so focus stays in the tree.  **'reorderable' lets you move items among their siblings.** Alt with Up or Down moves the focused item a place, and Alt with Home or End to the first or the last place among its siblings, as the APG's rearrangeable listbox does. Each row gets a grip at its far end: drag it to move the item, and the tree scrolls near an edge. A click on a grip picks the item up and a click on one of its siblings drops it there, which needs no drag. The arrows move an item picked up that way, Enter or Space drops it, and Escape puts it back. The tree says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder', whose 'keys' hold the siblings in the new order. **You move the items**: the tree moves no element of yours, and focus follows the moved item once you have.  **Alt with the arrow along the line moves an item into another branch.** Alt with the arrow that opens a branch (Right on a left-to-right page) puts the focused item last inside the item before it, and opens that item; Alt with the other arrow puts it after its parent, a level out. The same 'helix-before-reorder' and 'helix-reorder' are sent, with 'parent' naming the branch it moves into by its key, '''' for the top level, and 'keys' holding that branch's items in their new order. The tree says the move with 'moved-into-label'. */
   "helix-headless-tree": DefineCustomElement<
     HelixHeadlessTree,
     HelixHeadlessTreeVueProps,