@fusion.dev/helix-headless 0.159.0 → 0.161.0

package/types/vue.d.ts

@@ -199,6 +199,7 @@ import type {
   HelixHistoryEvent,
   HelixPinEvent,
   HelixBeforeToggleEvent,
+  HelixToggleEvent,
   HelixCopyEvent,
   HelixSampleEndEvent,
   HelixSampleStartEvent,
@@ -215,6 +216,7 @@ import type {
   HelixSelectedEvent,
   HelixSortEvent,
   HelixSortedEvent,
+  HelixClearEvent,
   HelixRejectEvent,
   HelixFacetEvent,
   HelixBeforeActivateEvent,
@@ -226,7 +228,6 @@ import type {
   HelixGraphSignalEvent,
   HelixGraphZoomEvent,
   HelixResizeEvent,
-  HelixClearEvent,
   HelixShortcutEvent,
   HelixActionEvent,
   HelixMapPartChangeEvent,
@@ -236,7 +237,6 @@ import type {
   HelixMapRotateEvent,
   HelixMapTiltEvent,
   HelixMapZoomEvent,
-  HelixToggleEvent,
   HelixBandEvent,
   HelixReadEvent,
   HelixCompleteEvent,
@@ -1826,6 +1826,10 @@ what the controls drive rather than the mechanism. */
   /** The name of the group of controls, read by screen readers, which names
 what the controls drive rather than the mechanism. */
   controlsLabel?: (HelixHeadlessCanvas["controlsLabel"]) | undefined;
+  /** What screen readers hear after a copy, with `{count}` for the cards copied. */
+  "copied-label"?: (HelixHeadlessCanvas["copiedLabel"]) | undefined;
+  /** What screen readers hear after a copy, with `{count}` for the cards copied. */
+  copiedLabel?: (HelixHeadlessCanvas["copiedLabel"]) | undefined;
   /** The board's name where `label` is empty. */
   "fallback-label"?: (HelixHeadlessCanvas["fallbackLabel"]) | undefined;
   /** The board's name where `label` is empty. */
@@ -1913,6 +1917,10 @@ walk the cards. */
   /** The text announced when a connection's end is picked up, with `{from}` and
 `{to}`. */
   reconnectingLabel?: (HelixHeadlessCanvas["reconnectingLabel"]) | undefined;
+  /** What screen readers hear after a move or a resize is made again. */
+  "redone-label"?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
+  /** What screen readers hear after a move or a resize is made again. */
+  redoneLabel?: (HelixHeadlessCanvas["redoneLabel"]) | undefined;
   /** What screen readers hear after a key resizes a card, with `{name}` for the
 card and `{width}` and `{height}` for its new size, in the document's
 units. */
@@ -2015,6 +2023,10 @@ told the same. A tone left out is not read. */
   "two-finger-hint-label"?: (HelixHeadlessCanvas["twoFingerHintLabel"]) | undefined;
   /** The hint shown when one finger swipes over the board with `gestures="cooperative"`. */
   twoFingerHintLabel?: (HelixHeadlessCanvas["twoFingerHintLabel"]) | undefined;
+  /** What screen readers hear after a move or a resize is undone. */
+  "undone-label"?: (HelixHeadlessCanvas["undoneLabel"]) | undefined;
+  /** What screen readers hear after a move or a resize is undone. */
+  undoneLabel?: (HelixHeadlessCanvas["undoneLabel"]) | undefined;
   /** The line shown while the board, with `gestures="activate"`, has the gestures. */
   "using-label"?: (HelixHeadlessCanvas["usingLabel"]) | undefined;
   /** The line shown while the board, with `gestures="activate"`, has the gestures. */
@@ -2798,6 +2810,10 @@ is the way back, and that is a part inside the shadow tree where a
 stylesheet can already reach it. Measured rather than assumed: `label,
 pinned` after upgrade against `label` from the server. */
   pinned?: (HelixHeadlessChat["pinned"]) | undefined;
+  /** The words on the button that returns to the newest turn, where `resume` is empty. */
+  "resume-label"?: (HelixHeadlessChat["resumeLabel"]) | undefined;
+  /** The words on the button that returns to the newest turn, where `resume` is empty. */
+  resumeLabel?: (HelixHeadlessChat["resumeLabel"]) | undefined;
   /** How near the bottom still counts as being at it, in pixels.
 
 A hook rather than a constant, because the right number depends on how tall
@@ -3117,6 +3133,18 @@ export type HelixHeadlessCheckboxVueEvents = {
   input: HelixHeadlessCheckboxElementEvent;
 };
 
+/** `HelixHeadlessCodeBlock` component event */
+export type HelixHeadlessCodeBlockElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessCodeBlock,
+  E
+>;
+/** `helix-before-toggle` event type */
+export type HelixHeadlessCodeBlockHelixBeforeToggleElementEvent =
+  HelixHeadlessCodeBlockElementEvent<HelixBeforeToggleEvent>;
+/** `helix-toggle` event type */
+export type HelixHeadlessCodeBlockHelixToggleElementEvent =
+  HelixHeadlessCodeBlockElementEvent<HelixToggleEvent>;
+
 export type HelixHeadlessCodeBlockVueProps = {
   /** The name of a block that scrolls, which is a tab stop while it does.
 
@@ -3203,6 +3231,14 @@ copy, which takes the code alone. Reflected, because the stylesheet lays
 the gutter out beside the code. A diff numbers its lines from its hunks
 whether or not this is set. */
   lineNumbers?: (HelixHeadlessCodeBlock["lineNumbers"]) | undefined;
+  /** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
+Each run is drawn as a band behind its lines. Not for a diff, which marks
+its own changes. */
+  "mark-lines"?: (HelixHeadlessCodeBlock["markLines"]) | undefined;
+  /** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
+Each run is drawn as a band behind its lines. Not for a diff, which marks
+its own changes. */
+  markLines?: (HelixHeadlessCodeBlock["markLines"]) | undefined;
   /** Whether to leave the copy button off.
 
 Negative, which is not a style choice. A boolean attribute is true whenever
@@ -3249,6 +3285,22 @@ Absent is unified, each removal above its replacement, which fits any
 width. `split` sets the old version beside the new one. Optional rather
 than defaulted, so the host carries no attribute the consumer did not write. */
   variant?: (HelixHeadlessCodeBlock["variant"]) | undefined;
+  /** Whether long lines wrap. Without it they scroll.
+
+Off by default, so long lines scroll, because a line break can be
+significant in code and a wrapped line reads as two. For prose-like code,
+such as a long command or a log line, a wrap reads better than a scroll.
+With `line-numbers`, each number stands beside the line it numbers
+however many rows that line takes. Reflected, because the stylesheet
+wraps the lines. */
+  wrap?: (HelixHeadlessCodeBlock["wrap"]) | undefined;
+  /** The wrap button's name, which it keeps whether it is pressed or not. */
+  "wrap-label"?: (HelixHeadlessCodeBlock["wrapLabel"]) | undefined;
+  /** The wrap button's name, which it keeps whether it is pressed or not. */
+  wrapLabel?: (HelixHeadlessCodeBlock["wrapLabel"]) | undefined;
+  /** Whether the header has a button that wraps the lines and unwraps them. The
+block draws a header for it even with no name. */
+  wrappable?: (HelixHeadlessCodeBlock["wrappable"]) | undefined;
   /** Turns the code into highlighted markup, which the block draws in place of
 the plain text.
 
@@ -3273,7 +3325,12 @@ read, nor for a diff. */
   highlight?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
 };
 
-export type HelixHeadlessCodeBlockVueEvents = {};
+export type HelixHeadlessCodeBlockVueEvents = {
+  /** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
+  "helix-before-toggle": HelixHeadlessCodeBlockHelixBeforeToggleElementEvent;
+  /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
+  "helix-toggle": HelixHeadlessCodeBlockHelixToggleElementEvent;
+};
 
 export type HelixHeadlessCodeVueProps = {};
 
@@ -5078,37 +5135,56 @@ export type HelixHeadlessDateInputHelixBeforeCloseElementEvent =
 /** `helix-before-open` event type */
 export type HelixHeadlessDateInputHelixBeforeOpenElementEvent =
   HelixHeadlessDateInputElementEvent<HelixBeforeOpenEvent>;
+/** `helix-clear` event type */
+export type HelixHeadlessDateInputHelixClearElementEvent =
+  HelixHeadlessDateInputElementEvent<HelixClearEvent>;
 /** `toggle` event type */
 export type HelixHeadlessDateInputToggleElementEvent =
   HelixHeadlessDateInputElementEvent<ToggleEvent>;
 
 export type HelixHeadlessDateInputVueProps = {
-  /** What the browser may autofill here, as one of the platform's own tokens.
+  /** What the browser may autofill here, as one of the platform's own tokens,
+such as `bday`.
 
 Empty leaves the attribute off, which is the browser's default and is what
 lets autofill work at all: hardcoding `off` here means a birthday or a
-postal code can never be filled in for a reader. */
+postal code can never be filled in for a reader. With `segmented`, a
+hidden native date input carries it, since no browser fills the segments. */
   autocomplete?: (HelixHeadlessDateInput["autocomplete"]) | undefined;
-  /** The calendar the written date and the calendar's days are in: `gregory`,
-`buddhist`, `japanese`, `roc`, or `iso8601`.
-
-Absent is the locale's own where it is one of the five, and `gregory` for
-every other, as Date Picker's `calendar` is. The value is `YYYY-MM-DD` in
-every calendar, and a focused field is ISO in every calendar. In
-`segmented`, the segments are the Gregorian day, month, and year, in the
-order the locale writes them, or ISO order for `iso8601`. */
+  /** The calendar the written date, the segments, and the calendar's days are
+in: `gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, or a calendar
+with months of its own that Date Picker's `calendar` names, such as
+`persian`, `hebrew`, `islamic-umalqura`, `ethiopic`, or `chinese`.
+
+Absent is the locale's own where its months are the Gregorian months, and
+`gregory` for every other, as Date Picker's `calendar` is. The value is
+`YYYY-MM-DD` in every calendar, and a focused text field is ISO in every
+calendar. In `segmented`, the segments are the day, month, and year as
+the calendar counts them, in the order the locale writes them: Mehr 14,
+1405 is month 7 and day 14 of 1405 under `persian`. Under the five with
+Gregorian months they are the Gregorian day, month, and year, or ISO order
+for `iso8601`. */
   calendar?: (HelixHeadlessDateInput["calendar"]) | undefined;
   /** The name of the calendar's grid of days, read by screen readers. */
   "calendar-label"?: (HelixHeadlessDateInput["calendarLabel"]) | undefined;
   /** The name of the calendar's grid of days, read by screen readers. */
   calendarLabel?: (HelixHeadlessDateInput["calendarLabel"]) | undefined;
+  /** Whether the field shows a button that empties it, as Input's `clearable`
+does. Shown only while the field holds something to clear and is neither
+disabled nor read-only. */
+  clearable?: (HelixHeadlessDateInput["clearable"]) | undefined;
+  /** The accessible name of the clear button, which shows only an icon. */
+  "clear-label"?: (HelixHeadlessDateInput["clearLabel"]) | undefined;
+  /** The accessible name of the clear button, which shows only an icon. */
+  clearLabel?: (HelixHeadlessDateInput["clearLabel"]) | undefined;
   /** How a date is written in the field: `short` through `full`, or ISO.
 
 **The field renders when it is idle and holds the value when it is being
 edited.** A written date is a rendering, and a document being edited must
 not be a rendering of something else: `Intl.DateTimeFormat` formats and does
-not parse, so `4 August 2026` cannot be typed back, and writing a parser per
-locale is how a field ends up rejecting what it just displayed.
+not parse, so a rendering such as `Tuesday, August 4, 2026` is no text to
+edit. The field does read a date typed in the locale's order and digits as
+you leave it, which covers what a reader types.
 
 The way out is not to choose between the two but to separate them in time.
 Idle, the field shows `4 August 2026`, which is what a date is for reading.
@@ -5130,8 +5206,9 @@ submits and what `min` and `max` compare against. */
 **The field renders when it is idle and holds the value when it is being
 edited.** A written date is a rendering, and a document being edited must
 not be a rendering of something else: `Intl.DateTimeFormat` formats and does
-not parse, so `4 August 2026` cannot be typed back, and writing a parser per
-locale is how a field ends up rejecting what it just displayed.
+not parse, so a rendering such as `Tuesday, August 4, 2026` is no text to
+edit. The field does read a date typed in the locale's order and digits as
+you leave it, which covers what a reader types.
 
 The way out is not to choose between the two but to separate them in time.
 Idle, the field shows `4 August 2026`, which is what a date is for reading.
@@ -5269,6 +5346,14 @@ the date.
 **The name goes in**, so a row of them is heard as which one each
 removes rather than as "Remove" said once per date. */
   removeLabel?: (HelixHeadlessDateInput["removeLabel"]) | undefined;
+  /** What a screen reader hears about the dates chosen in the calendar, with
+`{kind}`, `{start}`, `{end}` and `{count}` filled in as Date Picker's
+`selection-label` says. */
+  "selection-label"?: (HelixHeadlessDateInput["selectionLabel"]) | undefined;
+  /** What a screen reader hears about the dates chosen in the calendar, with
+`{kind}`, `{start}`, `{end}` and `{count}` filled in as Date Picker's
+`selection-label` says. */
+  selectionLabel?: (HelixHeadlessDateInput["selectionLabel"]) | undefined;
   /** How far apart the selectable dates are, in days.
 
 `<input type="date" step>`'s own unit, handed to the calendar this renders
@@ -5280,6 +5365,14 @@ platform's base. */
   "step-mismatch-message"?: (HelixHeadlessDateInput["stepMismatchMessage"]) | undefined;
   /** The message shown when a date is not on `step`. */
   stepMismatchMessage?: (HelixHeadlessDateInput["stepMismatchMessage"]) | undefined;
+  /** The time zone today is read in, such as `America/New_York`, handed to the
+calendar: the day marked today, and the month an empty field opens on.
+Empty is the reader's own. Dates are plain `YYYY-MM-DD` and carry no zone. */
+  "time-zone"?: (HelixHeadlessDateInput["timeZone"]) | undefined;
+  /** The time zone today is read in, such as `America/New_York`, handed to the
+calendar: the day marked today, and the month an empty field opens on.
+Empty is the reader's own. Dates are plain `YYYY-MM-DD` and carry no zone. */
+  timeZone?: (HelixHeadlessDateInput["timeZone"]) | undefined;
   /** The name of the button that opens the calendar, read by screen readers. */
   "trigger-label"?: (HelixHeadlessDateInput["triggerLabel"]) | undefined;
   /** The name of the button that opens the calendar, read by screen readers. */
@@ -5288,6 +5381,12 @@ platform's base. */
   "unavailable-message"?: (HelixHeadlessDateInput["unavailableMessage"]) | undefined;
   /** The message shown when `disable-dates` or `disable-days` bars a date. */
   unavailableMessage?: (HelixHeadlessDateInput["unavailableMessage"]) | undefined;
+  /** The message for text that is no date, where `bad-input-message` is not
+set. `{mode}` is `single`, `range`, or `multiple`. */
+  "unreadable-message"?: (HelixHeadlessDateInput["unreadableMessage"]) | undefined;
+  /** The message for text that is no date, where `bad-input-message` is not
+set. `{mode}` is `single`, `range`, or `multiple`. */
+  unreadableMessage?: (HelixHeadlessDateInput["unreadableMessage"]) | undefined;
   /** The name of the calendar's heading where it shows a page of years, with
 `{heading}` filled in. */
   "year-view-label"?: (HelixHeadlessDateInput["yearViewLabel"]) | undefined;
@@ -5316,6 +5415,18 @@ are not, where `bad-input-message` is not set. `{kind}` is `date` or
 are not, where `bad-input-message` is not set. `{kind}` is `date` or
 `time`. */
   incompleteMessage?: (HelixHeadlessDateInput["incompleteMessage"]) | undefined;
+  /** What a screen reader hears before the segments of a range's second date
+or time, after each segment's own name. */
+  "range-end-label"?: (HelixHeadlessDateInput["rangeEndLabel"]) | undefined;
+  /** What a screen reader hears before the segments of a range's second date
+or time, after each segment's own name. */
+  rangeEndLabel?: (HelixHeadlessDateInput["rangeEndLabel"]) | undefined;
+  /** What a screen reader hears before the segments of a range's first date
+or time, after each segment's own name: "month, Start, Stay". */
+  "range-start-label"?: (HelixHeadlessDateInput["rangeStartLabel"]) | undefined;
+  /** What a screen reader hears before the segments of a range's first date
+or time, after each segment's own name: "month, Start, Stay". */
+  rangeStartLabel?: (HelixHeadlessDateInput["rangeStartLabel"]) | undefined;
   /** Whether the field is a row of segments, one for each part of the date or
 time, in place of a line of text.
 
@@ -5539,6 +5650,8 @@ export type HelixHeadlessDateInputVueEvents = {
   "helix-before-close": HelixHeadlessDateInputHelixBeforeCloseElementEvent;
   /** Fired before the calendar opens. Cancelable: call `preventDefault()` to keep it closed. */
   "helix-before-open": HelixHeadlessDateInputHelixBeforeOpenElementEvent;
+  /** Fired after the clear button has emptied the field, after `input` and `change`. */
+  "helix-clear": HelixHeadlessDateInputHelixClearElementEvent;
   /** Fired after the value changes. */
   input: HelixHeadlessDateInputElementEvent;
   /** Fired when the calendar opens or closes, with `newState` and `oldState`. */
@@ -5582,14 +5695,16 @@ 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
+`persian`, `hebrew`, `islamic`, `islamic-umalqura`, `islamic-civil`,
+`islamic-tbla`, `islamic-rgsa`, `ethiopic`, `ethioaa`, `coptic`,
+`indian`, `chinese`, and `dangi` 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 and Chinese leap months and Ethiopia's five-day thirteenth
+month included, and Previous, Next and the page keys move by those
+months. With `max-view`, the months view shows that calendar's year, of
+twelve or thirteen months, and the years view its years. `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. */
+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;
@@ -5736,6 +5851,18 @@ else set needs. */
   readOnly?: (HelixHeadlessDatePicker["readOnly"]) | undefined;
   /** Stops the form from submitting while no date is chosen. */
   required?: (HelixHeadlessDatePicker["required"]) | undefined;
+  /** What a screen reader hears about the chosen dates: the grid's
+description, said again whenever the dates change. `{kind}` is `date`,
+`start` while a range holds one end, `range`, or `dates` for `multiple`.
+`{start}` and `{end}` are dates written in `locale`, and `{count}` is how
+many dates are chosen. */
+  "selection-label"?: (HelixHeadlessDatePicker["selectionLabel"]) | undefined;
+  /** What a screen reader hears about the chosen dates: the grid's
+description, said again whenever the dates change. `{kind}` is `date`,
+`start` while a range holds one end, `range`, or `dates` for `multiple`.
+`{start}` and `{end}` are dates written in `locale`, and `{count}` is how
+many dates are chosen. */
+  selectionLabel?: (HelixHeadlessDatePicker["selectionLabel"]) | undefined;
   /** How far apart the selectable dates are, in days.
 
 `<input type="date" step>`'s own unit, counted from `min` where there is
@@ -7080,12 +7207,14 @@ export type HelixHeadlessFilterInputVueEvents = {
 
 export type HelixHeadlessFormatDateVueProps = {
   /** The calendar a date is written in: `gregory`, `buddhist`, `japanese`,
-`roc`, or `iso8601`, the calendars Date Picker and Date Input draw.
-
-Absent is the locale's own where it is one of the five, such as
-`buddhist` for `th-TH`, and `gregory` for every other, such as `persian`
-for `fa-IR`, so a date written here reads as the same date a Date Picker
-beside it shows. */
+`roc`, or `iso8601`, or a calendar with months of its own, such as
+`persian`, `hebrew`, `islamic-umalqura`, `ethiopic`, or `chinese`: every
+calendar Date Picker and Date Input draw.
+
+Absent is the locale's own where its months are the Gregorian months,
+such as `buddhist` for `th-TH`, and `gregory` for every other, such as
+`persian` for `fa-IR`, so a date written here reads as the same date a
+Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405. */
   calendar?: (HelixHeadlessFormatDate["calendar"]) | undefined;
   /** The timestamp, in any format `Date` can parse.
 
@@ -7111,6 +7240,14 @@ browser may use either. */
   dateStyle?: (HelixHeadlessFormatDate["dateStyle"]) | undefined;
   /** How the day of the month is written, where a date is shown. */
   day?: (HelixHeadlessFormatDate["day"]) | undefined;
+  /** Writes the part of the day in words, such as "in the morning" or "at
+night", in its `long`, `short`, or `narrow` form, where `hour` is on a
+twelve-hour clock. */
+  "day-period"?: (HelixHeadlessFormatDate["dayPeriod"]) | undefined;
+  /** Writes the part of the day in words, such as "in the morning" or "at
+night", in its `long`, `short`, or `narrow` form, where `hour` is on a
+twelve-hour clock. */
+  dayPeriod?: (HelixHeadlessFormatDate["dayPeriod"]) | undefined;
   /** Shows how long ago the timestamp was, in a compact form such as "3h", in
 place of the date.
 
@@ -7128,6 +7265,12 @@ Off by default, which draws the date as one run of text, as Shoelace and
 Web Awesome do. An `elapsed` or `relative` reading is one phrase either
 way. */
   fields?: (HelixHeadlessFormatDate["fields"]) | undefined;
+  /** How many digits of a fraction of a second to write after `second`: 1, 2,
+or 3, as in 09:41:07.250. */
+  "fractional-second-digits"?: (HelixHeadlessFormatDate["fractionalSecondDigits"]) | undefined;
+  /** How many digits of a fraction of a second to write after `second`: 1, 2,
+or 3, as in 09:41:07.250. */
+  fractionalSecondDigits?: (HelixHeadlessFormatDate["fractionalSecondDigits"]) | undefined;
   /** Draws an `elapsed` or `relative` reading once and leaves it, where it
 would otherwise move on as it goes stale.
 
@@ -7190,9 +7333,13 @@ Empty is the runtime's own. */
 
 Empty is the runtime's own. */
   timeZone?: (HelixHeadlessFormatDate["timeZone"]) | undefined;
-  /** Shows the name of the time zone, in its `long` or `short` form. */
+  /** Shows the name of the time zone: `long` or `short`, as Pacific Daylight
+Time or PDT, `longOffset` or `shortOffset`, as GMT-07:00 or GMT-7, or
+`longGeneric` or `shortGeneric`, as Pacific Time or PT. */
   "time-zone-name"?: (HelixHeadlessFormatDate["timeZoneName"]) | undefined;
-  /** Shows the name of the time zone, in its `long` or `short` form. */
+  /** Shows the name of the time zone: `long` or `short`, as Pacific Daylight
+Time or PDT, `longOffset` or `shortOffset`, as GMT-07:00 or GMT-7, or
+`longGeneric` or `shortGeneric`, as Pacific Time or PT. */
   timeZoneName?: (HelixHeadlessFormatDate["timeZoneName"]) | undefined;
   /** How the weekday is written, where one is shown. */
   weekday?: (HelixHeadlessFormatDate["weekday"]) | undefined;
@@ -13527,6 +13674,14 @@ rather than a thumb sitting on nothing. */
 middle of the track, or `end` at `max`. Absent is `start`. A range fills
 between its thumbs and ignores it. */
   origin?: (HelixHeadlessSlider["origin"]) | undefined;
+  /** How far Page Up and Page Down move a thumb, in the slider's own units, as
+React Aria's `pageSize` and Zag's `largeStep` do. Absent leaves the keys
+to the platform, which moves a tenth of the track. */
+  "page-step"?: (HelixHeadlessSlider["pageStep"] | `${number}`) | undefined;
+  /** How far Page Up and Page Down move a thumb, in the slider's own units, as
+React Aria's `pageSize` and Zag's `largeStep` do. Absent leaves the keys
+to the platform, which moves a tenth of the track. */
+  pageStep?: (HelixHeadlessSlider["pageStep"]) | undefined;
   /** Adds a second thumb, so the value is a pair.
 
 The pair is one string, `"10,50"`, which is what `value` and
@@ -14019,6 +14174,22 @@ consumer's to set. */
   "corner-label"?: (HelixHeadlessSplitter["cornerLabel"]) | undefined;
   /** The name of the handle where two dividers cross, read by screen readers. */
   cornerLabel?: (HelixHeadlessSplitter["cornerLabel"]) | undefined;
+  /** What the handle where two dividers cross says it is set to, both dividers
+at once: `{across}` is where the divider that runs down stands, and
+`{down}` where the one that runs across stands, each a percentage.
+
+**Both, because the handle moves both**, and a number names one: the
+handle's `aria-valuenow` is the divider its `aria-orientation` names, and
+these words are the whole of where it is. */
+  "corner-value-label"?: (HelixHeadlessSplitter["cornerValueLabel"]) | undefined;
+  /** What the handle where two dividers cross says it is set to, both dividers
+at once: `{across}` is where the divider that runs down stands, and
+`{down}` where the one that runs across stands, each a percentage.
+
+**Both, because the handle moves both**, and a number names one: the
+handle's `aria-valuenow` is the divider its `aria-orientation` names, and
+these words are the whole of where it is. */
+  cornerValueLabel?: (HelixHeadlessSplitter["cornerValueLabel"]) | undefined;
   /** Which pane starts shut, when `collapsed` is not set. */
   "default-collapsed"?: (HelixHeadlessSplitter["defaultCollapsed"]) | undefined;
   /** Which pane starts shut, when `collapsed` is not set. */
@@ -14674,6 +14845,12 @@ export type HelixHeadlessTableElementEvent<E = Event> = TypedEvent<
 /** `helix-before-reorder` event type */
 export type HelixHeadlessTableHelixBeforeReorderElementEvent =
   HelixHeadlessTableElementEvent<HelixBeforeReorderEvent>;
+/** `helix-before-toggle` event type */
+export type HelixHeadlessTableHelixBeforeToggleElementEvent =
+  HelixHeadlessTableElementEvent<HelixBeforeToggleEvent>;
+/** `helix-load-more` event type */
+export type HelixHeadlessTableHelixLoadMoreElementEvent =
+  HelixHeadlessTableElementEvent<HelixLoadMoreEvent>;
 /** `helix-reorder` event type */
 export type HelixHeadlessTableHelixReorderElementEvent =
   HelixHeadlessTableElementEvent<HelixReorderEvent>;
@@ -14689,6 +14866,9 @@ export type HelixHeadlessTableHelixSortElementEvent =
 /** `helix-sorted` event type */
 export type HelixHeadlessTableHelixSortedElementEvent =
   HelixHeadlessTableElementEvent<HelixSortedEvent>;
+/** `helix-toggle` event type */
+export type HelixHeadlessTableHelixToggleElementEvent =
+  HelixHeadlessTableElementEvent<HelixToggleEvent>;
 
 export type HelixHeadlessTableVueProps = {
   /** The word for an ascending sort, in a `sorted-label` that writes `{order}`. */
@@ -14730,6 +14910,12 @@ and a list here would be a second way to say what that says. This table's
 cells are markup, and a table written as rows of cells with no column
 declared in it has nowhere else to be sized from. */
   columns?: (HelixHeadlessTable["columns"]) | undefined;
+  /** The keys of the rows whose rows are shown at the start, separated by
+commas. Used until `expanded` is set. */
+  "default-expanded"?: (HelixHeadlessTable["defaultExpanded"]) | undefined;
+  /** The keys of the rows whose rows are shown at the start, separated by
+commas. Used until `expanded` is set. */
+  defaultExpanded?: (HelixHeadlessTable["defaultExpanded"]) | undefined;
   /** The keys selected at the start, separated by commas. Used until `selected`
 is set. */
   "default-selected"?: (HelixHeadlessTable["defaultSelected"]) | undefined;
@@ -14764,6 +14950,18 @@ While it is set, a line after the rows shows it, or your own content in the
 `error` slot, in place of the empty and loading lines, and the live region
 says it. */
   errorText?: (HelixHeadlessTable["errorText"]) | undefined;
+  /** The name of the heading over the disclosure buttons. */
+  "expand-column-label"?: (HelixHeadlessTable["expandColumnLabel"]) | undefined;
+  /** The name of the heading over the disclosure buttons. */
+  expandColumnLabel?: (HelixHeadlessTable["expandColumnLabel"]) | undefined;
+  /** The keys of the rows whose rows are shown, separated by commas, in a table
+whose rows nest. A press on a row's disclosure button asks first, and
+`default-expanded` seeds what this element then owns. */
+  expanded?: (HelixHeadlessTable["expanded"]) | undefined;
+  /** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
+  "expand-row-label"?: (HelixHeadlessTable["expandRowLabel"]) | undefined;
+  /** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
+  expandRowLabel?: (HelixHeadlessTable["expandRowLabel"]) | undefined;
   /** The table's name where neither `label` nor an `aria-label` or
 `aria-labelledby` on the host gives it one. */
   "fallback-label"?: (HelixHeadlessTable["fallbackLabel"]) | undefined;
@@ -14783,6 +14981,12 @@ cells, which is the one way a cell of your markup can take focus. */
 An `aria-label` or `aria-labelledby` on the host names the table too, and
 wins over this. */
   label?: (HelixHeadlessTable["label"]) | undefined;
+  /** Sends `helix-load-more` once the end of the table comes within a screen
+of view, so you can add the next rows as a reader nears them. */
+  "load-more"?: (HelixHeadlessTable["loadMore"]) | undefined;
+  /** Sends `helix-load-more` once the end of the table comes within a screen
+of view, so you can add the next rows as a reader nears them. */
+  loadMore?: (HelixHeadlessTable["loadMore"]) | undefined;
   /** What screen readers hear each time a key moves a held row, in a
 `reorderable` table. `{name}` is the row's words, `{position}` the place it
 would go, counting from 1, and `{count}` the number of rows. */
@@ -14817,6 +15021,12 @@ table moves no row itself: you move your rows on `helix-reorder`. */
   "select-all-label"?: (HelixHeadlessTable["selectAllLabel"]) | undefined;
   /** The name of the checkbox in the heading that selects every row. */
   selectAllLabel?: (HelixHeadlessTable["selectAllLabel"]) | undefined;
+  /** The name of the heading over the checkboxes under
+`selection-mode="single"`, where it holds no checkbox of its own. */
+  "select-column-label"?: (HelixHeadlessTable["selectColumnLabel"]) | undefined;
+  /** The name of the heading over the checkboxes under
+`selection-mode="single"`, where it holds no checkbox of its own. */
+  selectColumnLabel?: (HelixHeadlessTable["selectColumnLabel"]) | undefined;
   /** The keys of the selected rows, separated by commas.
 
 A reader's press fires `helix-select` first, and refusing it leaves the
@@ -14833,6 +15043,20 @@ rows are chosen, written in the locale, and a language that needs plural
 forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
 {# wybranych} other {# wybranego}}`. */
   selectedLabel?: (HelixHeadlessTable["selectedLabel"]) | undefined;
+  /** What a press on a row, or in a `grid` table a key that moves to one, does
+to the rows already selected: `toggle`, the default, leaves them to the
+checkboxes, and `replace` selects the row alone. */
+  "selection-behavior"?: (HelixHeadlessTable["selectionBehavior"]) | undefined;
+  /** What a press on a row, or in a `grid` table a key that moves to one, does
+to the rows already selected: `toggle`, the default, leaves them to the
+checkboxes, and `replace` selects the row alone. */
+  selectionBehavior?: (HelixHeadlessTable["selectionBehavior"]) | undefined;
+  /** How many rows a `selectable` table selects: `multiple`, the default, or
+`single`, one at a time. */
+  "selection-mode"?: (HelixHeadlessTable["selectionMode"]) | undefined;
+  /** How many rows a `selectable` table selects: `multiple`, the default, or
+`single`, one at a time. */
+  selectionMode?: (HelixHeadlessTable["selectionMode"]) | undefined;
   /** The name of a row's checkbox. `{row}` is replaced with the words of the
 row's first cell. */
   "select-row-label"?: (HelixHeadlessTable["selectRowLabel"]) | undefined;
@@ -14880,6 +15104,10 @@ say that without the component knowing what a row looks like. */
 export type HelixHeadlessTableVueEvents = {
   /** Fired when a row is dropped at a new place, in a `reorderable` table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is. */
   "helix-before-reorder": HelixHeadlessTableHelixBeforeReorderElementEvent;
+  /** Fired from a row when its disclosure button is pressed, with whether it would be open in `detail.checked`. Cancelable: cancel it to keep the row as it is. */
+  "helix-before-toggle": HelixHeadlessTableHelixBeforeToggleElementEvent;
+  /** Fired, in a table with `load-more`, when the end of the table comes within a screen of view, once for each number of rows. */
+  "helix-load-more": HelixHeadlessTableHelixLoadMoreElementEvent;
   /** Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen. */
   "helix-reorder": HelixHeadlessTableHelixReorderElementEvent;
   /** The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection. */
@@ -14890,6 +15118,8 @@ export type HelixHeadlessTableVueEvents = {
   "helix-sort": HelixHeadlessTableHelixSortElementEvent;
   /** Fired after the sort order changes, with the new order. */
   "helix-sorted": HelixHeadlessTableHelixSortedElementEvent;
+  /** Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`. */
+  "helix-toggle": HelixHeadlessTableHelixToggleElementEvent;
 };
 
 export type HelixHeadlessTableRowVueProps = {
@@ -14903,6 +15133,10 @@ reached. */
   /** The URL a press on the row follows, which makes the whole row a link.
 Empty, the default, leaves presses to the row's cells. */
   href?: (HelixHeadlessTableRow["href"]) | undefined;
+  /** The key of the row this one sits under, in a table whose rows nest: that
+row's `value`, or its place among the rows where it has none. Empty, the
+default, is a row at the top. */
+  parent?: (HelixHeadlessTableRow["parent"]) | undefined;
   /** The `rel` of the row's link. You set it yourself, as on an anchor. */
   rel?: (HelixHeadlessTableRow["rel"]) | undefined;
   /** Where the row's link opens, such as `_blank`. */
@@ -15463,6 +15697,9 @@ export type HelixHeadlessTimeInputHelixBeforeCloseElementEvent =
 /** `helix-before-open` event type */
 export type HelixHeadlessTimeInputHelixBeforeOpenElementEvent =
   HelixHeadlessTimeInputElementEvent<HelixBeforeOpenEvent>;
+/** `helix-clear` event type */
+export type HelixHeadlessTimeInputHelixClearElementEvent =
+  HelixHeadlessTimeInputElementEvent<HelixClearEvent>;
 /** `toggle` event type */
 export type HelixHeadlessTimeInputToggleElementEvent =
   HelixHeadlessTimeInputElementEvent<ToggleEvent>;
@@ -15473,6 +15710,14 @@ export type HelixHeadlessTimeInputVueProps = {
 Empty leaves the attribute off, which is the browser's default and is what
 lets autofill work at all. */
   autocomplete?: (HelixHeadlessTimeInput["autocomplete"]) | undefined;
+  /** Whether the field shows a button that empties it, as Input's `clearable`
+does. Shown only while the field holds something to clear and is neither
+disabled nor read-only. */
+  clearable?: (HelixHeadlessTimeInput["clearable"]) | undefined;
+  /** The accessible name of the clear button, which shows only an icon. */
+  "clear-label"?: (HelixHeadlessTimeInput["clearLabel"]) | undefined;
+  /** The accessible name of the clear button, which shows only an icon. */
+  clearLabel?: (HelixHeadlessTimeInput["clearLabel"]) | undefined;
   /** Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
 
 Handed to the list, which offers them as unavailable, and checked against
@@ -15576,6 +15821,12 @@ never something this element would refuse to read back. */
   "unavailable-message"?: (HelixHeadlessTimeInput["unavailableMessage"]) | undefined;
   /** The message shown when `disable-times` bars a time. */
   unavailableMessage?: (HelixHeadlessTimeInput["unavailableMessage"]) | undefined;
+  /** The message for text that is no time, where `bad-input-message` is not
+set. `{mode}` is `single`, `range`, or `multiple`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`. */
+  "unreadable-message"?: (HelixHeadlessTimeInput["unreadableMessage"]) | undefined;
+  /** The message for text that is no time, where `bad-input-message` is not
+set. `{mode}` is `single`, `range`, or `multiple`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`. */
+  unreadableMessage?: (HelixHeadlessTimeInput["unreadableMessage"]) | undefined;
   /** Whether the panel shows one list of times or a column for each part of the
 time.
 
@@ -15613,6 +15864,18 @@ are not, where `bad-input-message` is not set. `{kind}` is `date` or
 are not, where `bad-input-message` is not set. `{kind}` is `date` or
 `time`. */
   incompleteMessage?: (HelixHeadlessTimeInput["incompleteMessage"]) | undefined;
+  /** What a screen reader hears before the segments of a range's second date
+or time, after each segment's own name. */
+  "range-end-label"?: (HelixHeadlessTimeInput["rangeEndLabel"]) | undefined;
+  /** What a screen reader hears before the segments of a range's second date
+or time, after each segment's own name. */
+  rangeEndLabel?: (HelixHeadlessTimeInput["rangeEndLabel"]) | undefined;
+  /** What a screen reader hears before the segments of a range's first date
+or time, after each segment's own name: "month, Start, Stay". */
+  "range-start-label"?: (HelixHeadlessTimeInput["rangeStartLabel"]) | undefined;
+  /** What a screen reader hears before the segments of a range's first date
+or time, after each segment's own name: "month, Start, Stay". */
+  rangeStartLabel?: (HelixHeadlessTimeInput["rangeStartLabel"]) | undefined;
   /** Whether the field is a row of segments, one for each part of the date or
 time, in place of a line of text.
 
@@ -15825,6 +16088,8 @@ export type HelixHeadlessTimeInputVueEvents = {
   "helix-before-close": HelixHeadlessTimeInputHelixBeforeCloseElementEvent;
   /** Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you. */
   "helix-before-open": HelixHeadlessTimeInputHelixBeforeOpenElementEvent;
+  /** Fired after the clear button has emptied the field, after `input` and `change`. */
+  "helix-clear": HelixHeadlessTimeInputHelixClearElementEvent;
   /** Fired after the value changes. */
   input: HelixHeadlessTimeInputElementEvent;
   /** Fired after the list opens or closes, with `newState` and `oldState`. */
@@ -16175,13 +16440,35 @@ Whatever `<time>` accepts, which is a date, a time, both, a duration or a
 week. Unset, the label is written as it was given and nothing claims to
 know what instant it names. */
   datetime?: (HelixHeadlessTimelineItem["datetime"]) | undefined;
+  /** Marks an event that has not happened yet, such as one that is scheduled.
+The mark is the open circle, and a screen reader hears `pending-label`. */
+  pending?: (HelixHeadlessTimelineItem["pending"]) | undefined;
+  /** What a screen reader hears for an entry that is `pending`. */
+  "pending-label"?: (HelixHeadlessTimelineItem["pendingLabel"]) | undefined;
+  /** What a screen reader hears for an entry that is `pending`. */
+  pendingLabel?: (HelixHeadlessTimelineItem["pendingLabel"]) | undefined;
   /** Writes the time as how long ago it was, or how long until it, from
 `datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
 `short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
 `long`. The words move on as they go stale. */
   relative?: (HelixHeadlessTimelineItem["relative"]) | undefined;
-  /** The kind of event. It sets the color of the mark and nothing else. */
+  /** The kind of event. It sets the color of the mark, and a screen reader
+hears it as the word `tone-labels` gives it. */
   tone?: (HelixHeadlessTimelineItem["tone"]) | undefined;
+  /** What a screen reader is told this entry's tone is, such as "Failed".
+Absent is the tone's word in `tone-labels`. */
+  "tone-label"?: (HelixHeadlessTimelineItem["toneLabel"]) | undefined;
+  /** What a screen reader is told this entry's tone is, such as "Failed".
+Absent is the tone's word in `tone-labels`. */
+  toneLabel?: (HelixHeadlessTimelineItem["toneLabel"]) | undefined;
+  /** What a screen reader is told each tone is, by the tone's name, written as
+JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
+word is not read, which is `neutral` and `primary` in English. */
+  "tone-labels"?: (HelixHeadlessTimelineItem["toneLabels"]) | undefined;
+  /** What a screen reader is told each tone is, by the tone's name, written as
+JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
+word is not read, which is `neutral` and `primary` in English. */
+  toneLabels?: (HelixHeadlessTimelineItem["toneLabels"]) | undefined;
 };
 
 export type HelixHeadlessTimelineItemVueEvents = {};
@@ -16337,6 +16624,18 @@ export type HelixHeadlessToggleGroupHelixSelectElementEvent =
   HelixHeadlessToggleGroupElementEvent<HelixSelectEvent>;
 
 export type HelixHeadlessToggleGroupVueProps = {
+  /** Whether a press on the chosen item, or Space or Enter on it, takes it
+back so nothing is chosen, as React Aria's `ToggleButtonGroup` and
+Radix's `ToggleGroup` do in a single group. Absent, a single group always
+keeps its choice once it has one, as a radio group does. A multiple group
+releases a pressed item either way. */
+  "allow-empty-selection"?: (HelixHeadlessToggleGroup["allowEmptySelection"]) | undefined;
+  /** Whether a press on the chosen item, or Space or Enter on it, takes it
+back so nothing is chosen, as React Aria's `ToggleButtonGroup` and
+Radix's `ToggleGroup` do in a single group. Absent, a single group always
+keeps its choice once it has one, as a radio group does. A multiple group
+releases a pressed item either way. */
+  allowEmptySelection?: (HelixHeadlessToggleGroup["allowEmptySelection"]) | undefined;
   /** Where the group's label sits. `start` puts it on the track's line.
 
 Absent is above, which is what a field looks like and what almost every
@@ -17344,6 +17643,13 @@ Written by the playlist rather than by the entry, the way an option's
 selection is: an entry that made itself current would be a second answer to
 which one is playing. */
   current?: (HelixHeadlessVideoPlaylistItem["current"]) | undefined;
+  /** Whether the entry holds the playlist's tab stop. Unset, every entry is in
+the tab order, which is what a server renders.
+
+**Written by the playlist, with no attribute, and it reaches the button.**
+The playlist gives the stop to the entry a reader last focused, or to the
+current one, and the arrow keys reach the rest. */
+  focusable?: (HelixHeadlessVideoPlaylistItem["focusable"]) | undefined;
 };
 
 export type HelixHeadlessVideoPlaylistItemVueEvents = {
@@ -17394,8 +17700,20 @@ export type HelixHeadlessVideoPlaylistHelixEndElementEvent =
   HelixHeadlessVideoPlaylistElementEvent<HelixEndEvent>;
 
 export type HelixHeadlessVideoPlaylistVueProps = {
+  /** What the playlist says while it has no entries. The `empty` slot replaces it. */
+  "empty-label"?: (HelixHeadlessVideoPlaylist["emptyLabel"]) | undefined;
+  /** What the playlist says while it has no entries. The `empty` slot replaces it. */
+  emptyLabel?: (HelixHeadlessVideoPlaylist["emptyLabel"]) | undefined;
   /** The list's name, read by screen readers. */
   label?: (HelixHeadlessVideoPlaylist["label"]) | undefined;
+  /** Stays on an entry when its clip ends, where the playlist would otherwise
+play the next one. The player's controls, a press, and `next()` still
+move. `repeat="one"` still plays the entry again. */
+  "no-advance"?: (HelixHeadlessVideoPlaylist["noAdvance"]) | undefined;
+  /** Stays on an entry when its clip ends, where the playlist would otherwise
+play the next one. The player's controls, a press, and `next()` still
+move. `repeat="one"` still plays the entry again. */
+  noAdvance?: (HelixHeadlessVideoPlaylist["noAdvance"]) | undefined;
   /** What the live region says when the playlist moves to another entry.
 `{title}` is the entry's name.
 
@@ -17444,7 +17762,7 @@ Ignored once `active` is written. */
 export type HelixHeadlessVideoPlaylistVueEvents = {
   /** The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. `currentEntry` is the entry itself, with its `src`, `poster` and name. */
   "helix-activate": HelixHeadlessVideoPlaylistHelixActivateElementEvent;
-  /** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
+  /** The current entry is about to change, and `detail.cause` says why: `press`, `next`, `previous`, `ended`, or `removed`. Cancelable: cancel it to keep the current entry. */
   "helix-before-activate": HelixHeadlessVideoPlaylistHelixBeforeActivateElementEvent;
   /** The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set. */
   "helix-end": HelixHeadlessVideoPlaylistHelixEndElementEvent;
@@ -17951,6 +18269,12 @@ export type HelixHeadlessVirtualListVueProps = {
 items out as a grid of that many equal columns, windowed a line at a
 time, with Left and Right moving along a line. */
   columns?: (HelixHeadlessVirtualList["columns"]) | undefined;
+  /** The keys of the items a reader cannot choose or move to, separated by
+commas, as `value` writes keys. Their rows carry `aria-disabled`. */
+  "disabled-keys"?: (HelixHeadlessVirtualList["disabledKeys"]) | undefined;
+  /** The keys of the items a reader cannot choose or move to, separated by
+commas, as `value` writes keys. Their rows carry `aria-disabled`. */
+  disabledKeys?: (HelixHeadlessVirtualList["disabledKeys"]) | undefined;
   /** The text of the row shown when there are no items and none are loading,
 where the `empty` slot is empty. Empty, the default, shows no row. */
   "empty-label"?: (HelixHeadlessVirtualList["emptyLabel"]) | undefined;
@@ -17965,6 +18289,11 @@ right whenever the rows really are one height and is the cheaper of the two. */
   /** The id of the script element that holds the items as JSON. `items` wins
 where both are set. */
   for?: (HelixHeadlessVirtualList["for"]) | undefined;
+  /** The space between two rows, and between two columns in a grid, in
+pixels. The list counts it in each row's place, so a gap does not walk
+the rows away from the scroll position the way a margin on each row
+would. */
+  gap?: (HelixHeadlessVirtualList["gap"]) | undefined;
   /** The field of each item that is its key in `value`, as a key or a path of
 keys. Empty reads a string or a number item as its own key, and any
 other item by its place in the set. */
@@ -18000,6 +18329,22 @@ disagree with itself; measuring is what a set of genuinely different
 heights needs and costs a read of each row as it renders. A list of
 one-line rows should leave this alone. */
   measured?: (HelixHeadlessVirtualList["measured"]) | undefined;
+  /** The narrowest a column of a grid may be, in pixels. Set, the list lays
+out as many columns as fit the box at that width, at least one, and
+follows the box as it resizes, which `columns` then does not decide. */
+  "min-column-width"?: (HelixHeadlessVirtualList["minColumnWidth"] | `${number}`) | undefined;
+  /** The narrowest a column of a grid may be, in pixels. Set, the list lays
+out as many columns as fit the box at that width, at least one, and
+follows the box as it resizes, which `columns` then does not decide. */
+  minColumnWidth?: (HelixHeadlessVirtualList["minColumnWidth"]) | undefined;
+  /** What a press does to the items already chosen: `toggle` adds or takes out
+the item, and `replace` selects it alone and lets the arrow keys carry the
+selection, with Control or Command adding or taking out one item. */
+  "selection-behavior"?: (HelixHeadlessVirtualList["selectionBehavior"]) | undefined;
+  /** What a press does to the items already chosen: `toggle` adds or takes out
+the item, and `replace` selects it alone and lets the arrow keys carry the
+selection, with Control or Command adding or taking out one item. */
+  selectionBehavior?: (HelixHeadlessVirtualList["selectionBehavior"]) | undefined;
   /** Makes the list a list box a reader chooses from: `single` selects one
 item, and `multiple` any number. Unset is a list a reader reads. */
   "selection-mode"?: (HelixHeadlessVirtualList["selectionMode"]) | undefined;
@@ -18072,6 +18417,14 @@ export type CustomCssProperties = {
   "--carousel-run-end"?: (string) | undefined;
   /** The narrowest a slide may be. `per-view="auto"` uses it to fit slides into the track. It must be a length, because the stylesheet divides by it. When unset, it is the whole track, which shows one slide across. */
   "--carousel-slide-min"?: (string) | undefined;
+  /** Written by the block on each `number` in a `wrap` block with `line-numbers`: how tall the line it numbers is laid out. Do not set it. */
+  "--code-block-line-size"?: (string) | undefined;
+  /** Written by the block on each `mark`: how wide the code is, scrolled part included. Do not set it. */
+  "--code-block-mark-inline-size"?: (string) | undefined;
+  /** Written by the block on each `mark`: how tall its run of lines is. Do not set it. */
+  "--code-block-mark-size"?: (string) | undefined;
+  /** Written by the block on each `mark`: how far down the code its run of lines starts. Do not set it. */
+  "--code-block-mark-start"?: (string) | undefined;
   /** The chosen color, painted over the checkerboard that shows transparency. */
   "--color-input-swatch"?: (string) | undefined;
   /** The chosen brightness, 0 to 100, as a percentage. */
@@ -18208,6 +18561,8 @@ export type CustomCssProperties = {
   "--table-cell-align"?: (string) | undefined;
   /** The column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set `columns` to change the tracks. */
   "--table-template"?: (string) | undefined;
+  /** Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it. */
+  "--table-row-level"?: (string) | undefined;
   /** How long this message stays, in milliseconds, for a progress hint. */
   "--toast-duration"?: (string) | undefined;
   /** How far a swipe has moved the message across, in pixels, toward the right. */
@@ -18338,7 +18693,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasNodeVueProps,
     HelixHeadlessCanvasNodeVueEvents
   >;
-  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
+  /** A board of cards and connectors, drawn by Helix. On a canvas every position is data that someone placed, so drawing is arithmetic over rectangles with no layout to compute. 'Map' takes a slotted map, because another renderer draws its tiles.  The format is [JSON Canvas](https://jsoncanvas.org), an open format. Each node has an 'x', 'y', 'width', 'height', and a type. Each edge names the two nodes it joins and the sides it leaves and arrives on. A card belongs to a group when it sits inside the group's bounds.  The cards are text in the DOM, so a screen reader can read them. The family adds a reading order and states each card's connections as text. 'order' sets the reading order: - 'spatial' bands the cards into rows. - 'edges' follows the arrows, starting from the cards that nothing points to.  **Cards move by default.** The board writes the new 'x' and 'y' onto the card, the way an input writes its own value, and dispatches two events: - 'helix-before-move' for every step. Cancel it to hold the positions in your   own state and apply them yourself. - 'helix-move' once the move is finished.  A resize dispatches the same pair with a size. Set 'readonly' on the board to keep every card in place, such as on a published board. Set 'readonly' on one card or connection to keep only that one in place.  Set 'snap' to a length in the document's units, such as '32', and a card that is moved or resized lands on a multiple of it. Carrying a card, a corner, a connection, or the selection box near the edge of the board moves the board under it, so a card can be taken to a place off screen in one drag. A connection let go within 20 pixels of a card arrives at it. A double click on the empty board zooms in about that point, and Shift with a double click zooms out.  Keyboard behavior: - One card holds the board's tab stop. - The arrow keys move through the cards in reading order. The card you land   on scrolls into view, and its connections are announced with it. - The card you land on is selected. Control or Command with an arrow key,   Home, or End moves without changing the selection, and Space adds the card   to the selection or takes it out, so you can select cards that are not   next to each other. - Shift with an arrow key moves the card: by 16 units, or to the next   multiple of 'snap' where it is set. Alt with an arrow key resizes it from   its bottom right corner the same way. - The connections leaving a card are stops of their own, straight after it.   Enter on one moves to the card it arrives at. - What a key changes that a reader cannot see is said: where a card moved   to, its new size, how many cards are selected, and the zoom. A selected   card or connection says so when a reader arrives on it. - Control or Command with C copies the selected cards, and the connections   between them, as a JSON Canvas document in text, which another board or   an app that reads the format takes. A paste is your page's: listen for   'paste' on the board, read the text with 'fromJsonCanvas', and add the   cards it holds. - Control or Command with Z undoes the last move or resize the board made,   and with Shift, or Control with Y, makes it again. 'undo()' and 'redo()'   do the same from a script. Each asks with 'helix-before-move' and tells   with 'helix-move', as a move does, so a board that holds its positions in   your state is undone through your state.  Every drag also works with clicks, as WCAG 2.5.7 requires for a pointer that cannot hold a button down. Click a selected card's move handle, a corner, a card's connection point, or the end of a selected connection to pick it up. It follows the pointer with no button held, and the next click puts it down where a drag would have. On touch, the next tap sets where it lands. Escape, or a press outside the board, puts it back. So a finger connects two cards with three taps: the card, one of its points, and the card to connect to.  Connecting and removing dispatch requests, and your code applies them: - Drawing from a card's handle to another card, or pressing C on one card and   Enter on another, dispatches 'helix-connect'. - Delete on a card or a connection dispatches 'helix-remove'. The event names   every connection that removing the card would leave without an end.  Once your page removes what Delete asked for, focus moves to the next stop, to the one before where it was the last, and to the board where none is left. A focused card your page removes for its own reasons hands focus on the same way, unless the reader has already moved focus somewhere else.  The board applies a move itself, because the card already exists. A connection is a new element, and React discards an element the board adds to its markup on the next render, so you write the connection.  Cards and connections are 'helix-canvas-node' and 'helix-canvas-edge' elements, so they are in the served markup whichever renderer wrote them. The library fetches nothing, and an array passed to an element is missing from the first paint of a server-rendered React page. 'fromJsonCanvas' turns a JSON Canvas document into their props, and 'toJsonCanvas()' writes a board back out. */
   "helix-headless-canvas": DefineCustomElement<
     HelixHeadlessCanvas,
     HelixHeadlessCanvasVueProps,
@@ -18368,7 +18723,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessChatMessageVueProps,
     HelixHeadlessChatMessageVueEvents
   >;
-  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened. A turn is said with its author first, such as "Ada: It ships today" ('arrival-label'), where its author can be named.  Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own.  **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. When the other side types, set 'typing' to their name: the status band draws three dots and "Ada is typing" ('typing-label'), which a screen reader hears, and clearing it takes them away. Anything slotted into 'status' is drawn first.  A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn with neither an author label nor a time is named by 'turn-label', "Message".  A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, give 'author-styles' the declarations for each author, such as '{"ada": "--chat-message-background-color: …"}': the message drawn for each of their turns takes them as its 'style', so the message's custom properties change for that author alone. Turns passed as children are styled by their 'author', such as 'helix-chat-message[author="ada"]'. */
+  /** Chat has no positioning, no backdrop, and no trigger, so you can put it in any container, such as a page, a sidebar, a modal, or a floating panel.  The transcript stays pinned to the bottom, including while a streamed answer grows, until the user scrolls more than 'threshold' away from it.  With 'history' set to 'more', reaching the top fires 'helix-history'. Set 'loading' while you fetch, then prepend the older turns. The turn the user was reading stays in place on screen.  The log is 'aria-live="off"'. A separate status region announces each new turn once, when it has finished arriving. It skips the user's own turns unless they failed to send, turns loaded as history, and the turns already there when the transcript opened. A turn is said with its author first, such as "Ada: It ships today" ('arrival-label'), where its author can be named.  Pass the turns as children or as 'turns' data. Do not use both. Children render from the server and suit most conversations. 'turns' draws a long transcript one window at a time, so the log needs a block size of its own.  **A conversation is built from three elements.** The chat holds the transcript, a 'Chat.Message' stands for each turn, and a 'Chat.Composer' sits in the 'composer' slot. When the user sends, 'helix-send' reaches the chat: add their turn with 'author="me"' and 'state="sending"', then set 'state' to 'sent' or 'failed' when your server answers. Add the reply as a turn with 'state="streaming"', write its text as it arrives, and set 'state' to 'sent' when it is complete. While the user types, the composer sends 'helix-typing', which you can pass on to the other side. When the other side types, set 'typing' to their name: the status band draws three dots and "Ada is typing" ('typing-label'), which a screen reader hears, and clearing it takes them away. Anything slotted into 'status' is drawn first.  **Keyboard.** The transcript moves between turns the way a feed does. Each turn says its place, such as "3 of 40", windowed or not.  | Key | What it does | |---|---| | Page Down, Page Up | On a turn or inside one, moves focus to the next or the previous turn. On the transcript itself, moves focus to the turn at the top of the view. | | Control with End | Moves focus to the composer. | | Control with Home | Moves focus to the first control above the transcript, or to the transcript. |  While you are scrolled away from the newest turn, the 'resume' region shows a button that takes you back, named by 'resume-label', "Jump to latest". Slot your own control into 'resume' to replace it.  A screen reader names each turn by its author and its time, such as "You, 2 minutes ago". Set 'me-label' and 'message-label' to say it in your language, and give each turn by 'them' an 'author-label'. A turn with neither an author label nor a time is named by 'turn-label', "Message".  A turn from 'turns' is drawn in the chat's shadow root, so style it through the forwarded 'message-*' parts. A turn by 'me' also gets each part with '-mine' added, and the turn's state adds 'message-meta-failed', 'message-content-sending', and 'message-content-streaming'. To style each participant differently, give 'author-styles' the declarations for each author, such as '{"ada": "--chat-message-background-color: …"}': the message drawn for each of their turns takes them as its 'style', so the message's custom properties change for that author alone. Turns passed as children are styled by their 'author', such as 'helix-chat-message[author="ada"]'. */
   "helix-headless-chat": DefineCustomElement<
     HelixHeadlessChat,
     HelixHeadlessChatVueProps,
@@ -18386,7 +18741,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCheckboxVueProps,
     HelixHeadlessCheckboxVueEvents
   >;
-  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; 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. */
+  /** 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 'mark-lines' to mark lines a reader should look at, such as '2, 4-6': the block draws a band behind each run, placed where the lines are laid out, so it follows a highlighter's markup and lines that wrap. Set 'wrap' to wrap long lines rather than scroll them; a gutter then numbers each line where it starts. Set 'wrappable' for a button in the header that turns 'wrap' on and off, pressed while the lines wrap.  The header holds the name, the 'actions' slot, and the copy button. Slot a control into 'actions', such as a button that sets 'wrap' or one that opens the code in an editor, and the block draws a header for it even with no name. 'copy-icon' and 'copied-icon' replace the copy button's two icons. 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,
@@ -18434,13 +18789,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDataTableVueProps,
     HelixHeadlessDataTableVueEvents
   >;
-  /** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them.  You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both.  The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar.  With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment.  Text that is not a date gives the form an empty value, as a native date field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the calendar with focus on the chosen day. | | Alt with Down | Opens the calendar, from the text field or a segment. | | Enter | In the text field, takes the typed date and submits the form, as a native field does. | | Escape | Closes the calendar and puts focus back in the field. | | Tab | In the open calendar, moves between its controls. Out of the field, closes it. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the calendar, the keys are 'DatePicker''s: the arrows move by a day or a week, Page Up and Page Down by a month, with Shift by a year, and Home and End to the start and the end of the week. */
+  /** The calendar is 'DatePicker', which handles months, ranges, disabled days, the first day of the week, and the grid's keyboard behavior. The date input adds the field, the overlay, and the connection between them.  You can type a date as well as pick one. The native '<input type="date">' gives a picker and locale formatting but allows almost no styling, so the field is a text field. Typing sends 'input' on each keystroke and 'change' when you leave the field, as a text field does. A date picked from the calendar sends both. The field reads ISO, '2026-08-04', and a date written in the order, the digits, and the month names of 'locale', '8/4/2026' or 'Aug 4, 2026' in 'en-US' and '4.8.2026' in 'de-DE', which becomes the value as you leave the field.  The trigger and ArrowDown open the calendar with focus on the selected day, Tab moves between the calendar's controls without leaving it, and Escape closes it and returns focus to the field. A press into the field opens the calendar too. Tab into the field opens nothing, and Tab out of the field closes the calendar. The text field is a 'combobox' with 'aria-haspopup="dialog"', 'aria-expanded', and 'aria-controls', as in the APG date picker combobox, since Down opens the calendar from it.  With 'segmented', the field is a row of segments in place of the text: a month, a day and a year in the order the locale writes them, each set with digits or the arrow keys. Alt+Down opens the calendar from a segment. A 'range' is two rows with a dash between them, the start and the end, as React Aria's DateRangePicker draws them, and 'multiple' keeps the text.  Text that is not a date gives the form an empty value, as a native date field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the calendar with focus on the chosen day. | | Alt with Down | Opens the calendar, from the text field or a segment. | | Enter | In the text field, takes the typed date and submits the form, as a native field does. | | Escape | Closes the calendar and puts focus back in the field. | | Tab | In the open calendar, moves between its controls. Out of the field, closes it. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the calendar, the keys are 'DatePicker''s: the arrows move by a day or a week, Page Up and Page Down by a month, with Shift by a year, and Home and End to the start and the end of the week. */
   "helix-headless-date-input": DefineCustomElement<
     HelixHeadlessDateInput,
     HelixHeadlessDateInputVueProps,
     HelixHeadlessDateInputVueEvents
   >;
-  /** A grid of days that follows the APG date grid pattern:  - The grid is one tab stop. Only the focused cell is in the tab sequence. - Arrow keys move by day and by week. - 'PageUp' and 'PageDown' move by month. - 'Home' and 'End' move to the start and end of the week.  **Dates are 'YYYY-MM-DD' strings, and every calculation is in UTC**, because a local-time 'Date' shifts across a time zone or daylight-saving boundary.  **The days are the Gregorian calendar's**, written in 'calendar': the locale's own where its months are the Gregorian months, as 'th-TH' writes 2569 for 2026, and 'gregory' where they are not, as for 'fa-IR'.  'month' sets which month the grid shows, separately from 'value', so paging selects nothing and you can control the view. When unset, it follows the first selected date, then the current month.  'mode' sets how many dates are held. Unset holds one, 'range' holds two and marks the dates between them, and 'multiple' toggles each date. All three read and write the same comma-separated 'value'.  'max-view' makes the heading a button that steps back to the months of the year, and with 'year' to a page of years, as Zag's date picker does. The arrows, Home, End and the page keys move there, Enter or a press chooses, and Escape goes back to the days.  'isDateUnavailable' and 'dayContent' are properties for a script: a rule that bars dates, and what each day shows in place of its number.  The month heading is a live region, so a screen reader hears the new month when Previous or Next is pressed. Neither moves past 'min' or 'max', and the keys stop at them too. A value outside the bounds, on a barred day, or off 'step' reports 'rangeUnderflow', 'rangeOverflow', 'badInput' or 'stepMismatch', so a form does not submit it. */
+  /** A grid of days that follows the APG date grid pattern:  - The grid is one tab stop. Only the focused cell is in the tab sequence. - Arrow keys move by day and by week. - 'PageUp' and 'PageDown' move by month. - 'Home' and 'End' move to the start and end of the week.  **Dates are 'YYYY-MM-DD' strings, and every calculation is in UTC**, because a local-time 'Date' shifts across a time zone or daylight-saving boundary.  **The months are the ones 'calendar' counts**: the Gregorian months for the locale's own calendar where its months are the Gregorian months, as 'th-TH' writes 2569 for 2026, and 'gregory' where they are not, as for 'fa-IR' with no 'calendar'. Name a calendar with months of its own, such as 'persian', and every view counts its days, months, and years from 'Intl'.  'month' sets which month the grid shows, separately from 'value', so paging selects nothing and you can control the view. When unset, it follows the first selected date, then the current month.  'mode' sets how many dates are held. Unset holds one, 'range' holds two and marks the dates between them, and 'multiple' toggles each date. All three read and write the same comma-separated 'value'. With a 'mode', the grid carries 'aria-multiselectable'. While a range holds one end, the grid draws the range to the day under the pointer or the focus, marking those cells 'data-range-preview'.  The chosen date, range, or count of dates is the grid's description, in a region screen readers announce when it changes, as React Aria's calendars do. 'selection-label' words it.  'max-view' makes the heading a button that steps back to the months of the year, and with 'year' to a page of years, as Zag's date picker does. The arrows, Home, End and the page keys move there, Enter or a press chooses, and Escape goes back to the days.  'isDateUnavailable' and 'dayContent' are properties for a script: a rule that bars dates, and what each day shows in place of its number.  The month heading is a live region, so a screen reader hears the new month when Previous or Next is pressed. Neither moves past 'min' or 'max', and the keys stop at them too. A value outside the bounds, on a barred day, or off 'step' reports 'rangeUnderflow', 'rangeOverflow', 'badInput' or 'stepMismatch', so a form does not submit it. */
   "helix-headless-date-picker": DefineCustomElement<
     HelixHeadlessDatePicker,
     HelixHeadlessDatePickerVueProps,
@@ -18536,7 +18891,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFilterInputVueProps,
     HelixHeadlessFilterInputVueEvents
   >;
-  /** Formats a date with 'Intl' where it is shown, so you do not write the same 'Intl' call and options in your own code.  **'elapsed' shows compact relative time for a feed**, such as "42m", "3h", or "1d". After six days it shows a date. In en-US, 'Intl.NumberFormat' narrow renders both 'minute' and 'month' as 'm', so a compact "3m" could mean three minutes or three months. 'elapsedTime' in 'helix/core' does the measurement.  **'relative' shows the same reading in words**, such as "3 hours ago" at 'long', "3 hr. ago" at 'short' and "3h ago" at 'narrow', the styles 'sl-relative-time' offers. 'numeric="always"' says "1 day ago" where the default says "yesterday".  **'date-style' and 'time-style' take each locale's own pattern**, such as "Tuesday, August 4, 2026" at 'full', and stand in for the separate fields, which 'Intl' refuses beside them. 'hour-cycle' sets a twelve or twenty-four hour clock either way.  **The text refreshes on one timer shared by the page.** Each element schedules an update for when its current reading expires, and an element showing a date schedules none, so a long feed left open costs almost nothing. 'frozen' draws the reading once and leaves it.  **'fields' draws each field of a date as a part of its own**, such as 'day', 'month' and 'year', so a stylesheet can set the year in a lighter ink or the weekday in capitals with '::part()'. The text between the fields is the locale's own and has no part. An 'elapsed' or 'relative' reading is one phrase, with no parts inside it.  **The output is always '<time datetime>'**, so copy and paste and scripts parsing the page get the exact instant, whatever the visible text says. A screen reader reads the text, so an 'elapsed' reading is named in full, such as "3 hours ago", and carries the whole date as its title.  **A date with no time, such as '2026-08-04', is that day everywhere.** It is formatted in UTC unless 'time-zone' says otherwise, as Date Input and Date Picker format their dates, so a reader west of UTC sees August 4 and not August 3.  **A date is written in a calendar Date Picker draws**: the locale's own where its months are the Gregorian months, as 'th-TH' writes 2569 for 2026, and 'gregory' where they are not, as for 'fa-IR'. 'calendar' picks one of the five. */
+  /** Formats a date with 'Intl' where it is shown, so you do not write the same 'Intl' call and options in your own code.  **'elapsed' shows compact relative time for a feed**, such as "42m", "3h", or "1d". After six days it shows a date. In en-US, 'Intl.NumberFormat' narrow renders both 'minute' and 'month' as 'm', so a compact "3m" could mean three minutes or three months. 'elapsedTime' in 'helix/core' does the measurement.  **'relative' shows the same reading in words**, such as "3 hours ago" at 'long', "3 hr. ago" at 'short' and "3h ago" at 'narrow', the styles 'sl-relative-time' offers. 'numeric="always"' says "1 day ago" where the default says "yesterday".  **'date-style' and 'time-style' take each locale's own pattern**, such as "Tuesday, August 4, 2026" at 'full', and stand in for the separate fields, which 'Intl' refuses beside them. 'hour-cycle' sets a twelve or twenty-four hour clock either way.  **The text refreshes on one timer shared by the page.** Each element schedules an update for when its current reading expires, and an element showing a date schedules none, so a long feed left open costs almost nothing. 'frozen' draws the reading once and leaves it.  **'fields' draws each field of a date as a part of its own**, such as 'day', 'month' and 'year', so a stylesheet can set the year in a lighter ink or the weekday in capitals with '::part()'. The text between the fields is the locale's own and has no part. An 'elapsed' or 'relative' reading is one phrase, with no parts inside it.  **The output is always '<time datetime>'**, so copy and paste and scripts parsing the page get the exact instant, whatever the visible text says. A screen reader reads the text, so an 'elapsed' reading is named in full, such as "3 hours ago", and carries the whole date as its title.  **A date with no time, such as '2026-08-04', is that day everywhere.** It is formatted in UTC unless 'time-zone' says otherwise, as Date Input and Date Picker format their dates, so a reader west of UTC sees August 4 and not August 3.  **A date is written in a calendar Date Picker draws**: the locale's own where its months are the Gregorian months, as 'th-TH' writes 2569 for 2026, and 'gregory' where they are not, as for 'fa-IR'. 'calendar' picks any of them, 'persian' and 'hebrew' included. */
   "helix-headless-format-date": DefineCustomElement<
     HelixHeadlessFormatDate,
     HelixHeadlessFormatDateVueProps,
@@ -18884,7 +19239,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, 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'. */
+  /** 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.  A press on a range's track takes the nearest thumb to the point pressed, and moving the pointer drags it, as React Aria's and Web Awesome's sliders do. The thumb takes focus, and 'change' is sent as the press ends.  '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 'page-step', or by the platform's larger step where it is not set. | | 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,
@@ -18962,13 +19317,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTableColumnVueProps,
     HelixHeadlessTableColumnVueEvents
   >;
-  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. |  When the rows did not load, set 'error-text', such as "The orders did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
+  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  'selection-mode="single"' selects one row at a time: ticking a row lets go of the one before, the heading holds no checkbox, and Shift and Control with A take in nothing more. 'selection-behavior="replace"' makes a press on a row, anywhere but its own controls, select it alone, as a file list does, and in a 'grid' table the arrow keys carry the selection with them. Control or Command with a press adds or takes out the row, and with an arrow moves without selecting. Shift with a press takes in the rows from the one last chosen.  **Nesting rows.** A row with 'parent' sits under the row of that key, as a file sits in a folder. The table then draws a column of disclosure buttons, under a heading named by 'expand-column-label': a row with rows under it has a button named by 'expand-row-label' ("Expand {row}") that says with 'aria-expanded' whether it is open, and the rows under a shut row are not drawn. 'expanded' holds the open rows' keys, comma separated, and 'default-expanded' is where it starts. A press asks with 'helix-before-toggle' and tells with 'helix-toggle', both from the row, so you can refuse it or load the rows on the way. A sort orders the rows under each row among themselves, and in a 'grid' table the table is a 'treegrid' whose rows say their depth.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a disclosure cell | Shows or hides the rows under the row, in a table whose rows nest. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. |  **Loading more.** 'load-more' sends 'helix-load-more' once the end of the table comes within a screen of view, in the box that scrolls it or the page, once for each number of rows: add rows and it can send it again. Set 'loading' while you fetch, and the table asks for nothing until it clears.  When the rows did not load, set 'error-text', such as "The orders did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
   "helix-headless-table": DefineCustomElement<
     HelixHeadlessTable,
     HelixHeadlessTableVueProps,
     HelixHeadlessTableVueEvents
   >;
-  /** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive.  In a 'selectable' table the row draws a checkbox cell before its own cells, and 'value' is the key the table's 'selected' lists it by. 'disabled' keeps the row out of the selection and out of its link.  In a 'reorderable' table the row draws a grip cell before those, holding a button named by the table's 'move-row-label', and 'value' is the key 'helix-reorder' lists it by. The table says which row is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states.  **'href' makes the whole row a link**, as a row action does in React Aria's table: a press anywhere on the row follows it, except on a link or a control of the row's own, and Control, Command or Shift open it the way they open a link. A drag that selects text follows nothing. A row in a table is not a stop of its own, so put the same link in a cell, usually the row header, which is what the keyboard and a screen reader reach. In a 'grid' table, Enter on any cell of the row follows it as well. */
+  /** The row renders its cells straight through and lays out none of them, so a stylesheet can place them in the table's grid and every column lines up across rows. The row still exists as an element, so you can style it, hide it, or make it interactive.  In a 'selectable' table the row draws a checkbox cell before its own cells, and 'value' is the key the table's 'selected' lists it by. 'disabled' keeps the row out of the selection and out of its link.  In a 'reorderable' table the row draws a grip cell before those, holding a button named by the table's 'move-row-label', and 'value' is the key 'helix-reorder' lists it by. The table says which row is moving and where the drop indicator is, with the 'dragging', 'drop-before', and 'drop-after' states.  **'parent' nests the row under another**, by that row's key. The table then draws a column of disclosure buttons: a row with rows under it has one, named by the table's 'expand-row-label' and saying whether it is open with 'aria-expanded', and its rows are drawn only while it is open. The cell is indented by the row's depth through '--table-row-level'.  **'href' makes the whole row a link**, as a row action does in React Aria's table: a press anywhere on the row follows it, except on a link or a control of the row's own, and Control, Command or Shift open it the way they open a link. A drag that selects text follows nothing. A row in a table is not a stop of its own, so put the same link in a cell, usually the row header, which is what the keyboard and a screen reader reach. In a 'grid' table, Enter on any cell of the row follows it as well. */
   "helix-headless-table-row": DefineCustomElement<
     HelixHeadlessTableRow,
     HelixHeadlessTableRowVueProps,
@@ -19010,13 +19365,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTextareaVueProps,
     HelixHeadlessTextareaVueEvents
   >;
-  /** The list is a 'TimePicker', which you can also use on its own, for example in a settings pane. This element adds the field, the overlay, and the form association, the same arrangement Date Input has with 'DatePicker' and Color Input has with 'ColorPicker'.  You can type a time or pick one. The list offers times at a step, and the field lets you enter any time, such as '09:07'.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds', because that is what the form submits, what 'min' and 'max' compare against, and what sorts correctly as a string. While idle, the field shows the time in the user's locale format. Once the caret is in the field, it shows the value itself, because a formatted time such as '2:30 PM' cannot be typed back and 'Intl' has no parser for it.  Typing sends 'input' on each keystroke and 'change' when you leave the field. The trigger and ArrowDown open the list, and so does a press into the field; Tab into the field opens nothing. In the list, the arrow keys, typed digits and PageUp and PageDown move through the times, and Enter, Space or a click chooses one and closes the panel. With 'variant="wheels"' each wheel moves the time as you turn it, the panel stays open, and Enter or Escape closes it.  With 'segmented', the field is a row of segments in place of the text: an hour, a minute, and AM or PM where the clock has them, each set with digits or the arrow keys. Alt+Down opens the list from a segment.  Text that is not a time gives the form an empty value, as a native time field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the list on the chosen time. | | Alt with Down | Opens the list, from the text field or a segment. | | Enter | In the text field, takes the typed time and submits the form, as a native field does. In the list, chooses the highlighted time. | | Escape | Closes the list and puts focus back in the field. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: two hours, or fifteen minutes or seconds. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the list, the keys are 'TimePicker''s. */
+  /** The list is a 'TimePicker', which you can also use on its own, for example in a settings pane. This element adds the field, the overlay, and the form association, the same arrangement Date Input has with 'DatePicker' and Color Input has with 'ColorPicker'.  You can type a time or pick one. The list offers times at a step, and the field lets you enter any time, such as '09:07'.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds', because that is what the form submits, what 'min' and 'max' compare against, and what sorts correctly as a string. While idle, the field shows the time in the user's locale format. Once the caret is in the field, it shows the value itself. You can type '14:30', or a time as you write one, such as '2:30 PM', '2.30pm', or '14h30', and the field reads it as you leave it, with AM and PM in the locale's words.  Typing sends 'input' on each keystroke and 'change' when you leave the field. The trigger and ArrowDown open the list, and so does a press into the field; Tab into the field opens nothing. The text field is a 'combobox' with 'aria-haspopup="dialog"', 'aria-expanded', and 'aria-controls', since Down opens the list from it. In the list, the arrow keys, typed digits and PageUp and PageDown move through the times, and Enter, Space or a click chooses one and closes the panel. With 'variant="wheels"' each wheel moves the time as you turn it, the panel stays open, and Enter or Escape closes it.  With 'segmented', the field is a row of segments in place of the text: an hour, a minute, and AM or PM where the clock has them, each set with digits or the arrow keys. Alt+Down opens the list from a segment. A 'range' is two rows with a dash between them, the start and the end, and 'multiple' keeps the text.  Text that is not a time gives the form an empty value, as a native time field does, and 'value' keeps the text so it can be corrected.  **Keyboard.** The field is one tab stop, or each segment is with 'segmented', and the trigger is one more.  | Key | What it does | |---|---| | Down | In the text field, opens the list on the chosen time. | | Alt with Down | Opens the list, from the text field or a segment. | | Enter | In the text field, takes the typed time and submits the form, as a native field does. In the list, chooses the highlighted time. | | Escape | Closes the list and puts focus back in the field. | | Up, Down on a segment | Steps the segment by one, round from its last value to its first. | | Page Up, Page Down on a segment | Steps by a page: two hours, or fifteen minutes or seconds. | | Home, End on a segment | Goes to the segment's first or last value. | | Digits on a segment | Fill it, and move to the next once it can take no more. | | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. | | Backspace, Delete on a segment | Empty the segment. | | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |  In the list, the keys are 'TimePicker''s. */
   "helix-headless-time-input": DefineCustomElement<
     HelixHeadlessTimeInput,
     HelixHeadlessTimeInputVueProps,
     HelixHeadlessTimeInputVueEvents
   >;
-  /** Shows the times at each 'step' as a 'Listbox', which provides the keyboard behavior, typeahead, scrolling into view, and announcements for a set of options. 'variant="wheels"' shows a column each for the hour, the minute, and the meridiem, and one for the second with 'seconds'. Left and Right move between the wheels, and Tab does too.  'hour-cycle' writes every time on a twelve or a twenty-four hour clock whatever the locale, and 'seconds' holds times to the second.  The step keeps the list usable. At the default of 15 minutes a day is 96 rows, which people can scroll or type into. At 1 minute it is 1,440. Use the list for the times your product offers, and Time Input for any time, the same way Date Input separates typing a date from picking one on the calendar.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds'. A form submits that shape, 'min' and 'max' compare against it, and it sorts as a string. Each row's text follows the person's own conventions, from 'Intl'.  The chosen row is marked in the served markup. The listbox gets the answer as '.value', and Lit SSR serializes no property binding, so without more the 96 served rows would carry no mark until the listbox upgrades and runs 'place'. Each option also gets 'selected', an attribute binding that does serialize, and 'place' then writes the same answer from the same value. This is the same 'selected' you write on 'Option' elsewhere in Helix, and Date Picker marks its choice in markup for the same reason. The list and the wheels both do this, because each wheel is also a listbox.  **Keyboard.** The list is one tab stop, and each wheel is one.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous time, or in a wheel to the next or the previous hour, minute, second, or half of the day. | | Home, End | Moves to the first or the last time, or the first or the last in a wheel. | | Page Down, Page Up | Moves by as many times as the list shows at once. | | Digits | Moves to the next time that starts with what you typed, such as '9' for 9:00. | | Enter, Space | Chooses the highlighted time. Moving chooses too, except under 'manual' or with a 'mode'. With a 'mode', Space adds or removes the time. | | Right, Left | In the wheels, moves to the next or the previous wheel, mirrored right to left. | | Tab | Moves to the next wheel, then out of the picker. |  **ARIA.** The list is a 'listbox' named by 'label', a slotted label, the host's 'aria-label' or its 'aria-labelledby'. A development build warns where all four are empty. The list is described by the hint, or by the message in 'feedback' in its place, and carries 'aria-multiselectable' with a 'mode' and 'aria-invalid' while 'feedback' says what is wrong. The wheels are a 'group' with that name, holding one 'listbox' per wheel, named "Hour", "Minute", "Second" and "AM/PM" in the page's language, and each described the same way. */
+  /** Shows the times at each 'step' as a 'Listbox', which provides the keyboard behavior, typeahead, scrolling into view, and announcements for a set of options. 'variant="wheels"' shows a column each for the hour, the minute, and the meridiem, and one for the second with 'seconds'. Left and Right move between the wheels, and Tab does too.  'hour-cycle' writes every time on a twelve or a twenty-four hour clock whatever the locale, and 'seconds' holds times to the second.  The step keeps the list usable. At the default of 15 minutes a day is 96 rows, which people can scroll or type into. At 1 minute it is 1,440. Use the list for the times your product offers, and Time Input for any time, the same way Date Input separates typing a date from picking one on the calendar.  The value is always 'HH:mm' on a 24-hour clock, or 'HH:mm:ss' with 'seconds'. A form submits that shape, 'min' and 'max' compare against it, and it sorts as a string. Each row's text follows the person's own conventions, from 'Intl'.  The chosen row is marked in the served markup. The listbox gets the answer as '.value', and Lit SSR serializes no property binding, so without more the 96 served rows would carry no mark until the listbox upgrades and runs 'place'. Each option also gets 'selected', an attribute binding that does serialize, and 'place' then writes the same answer from the same value. This is the same 'selected' you write on 'Option' elsewhere in Helix, and Date Picker marks its choice in markup for the same reason. The list and the wheels both do this, because each wheel is also a listbox.  **Keyboard.** The list is one tab stop, and each wheel is one.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous time, or in a wheel to the next or the previous hour, minute, second, or half of the day. | | Home, End | Moves to the first or the last time, or the first or the last in a wheel. | | Page Down, Page Up | Moves by as many times as the list shows at once. | | Digits | Moves to the next time that starts with what you typed, such as '9' for 9:00. | | Enter, Space | Chooses the highlighted time. Moving chooses too, except under 'manual' or with a 'mode'. With a 'mode', Space adds or removes the time. | | Right, Left | In the wheels, moves to the next or the previous wheel, mirrored right to left. | | Tab | Moves to the next wheel, then out of the picker. |  **ARIA.** The list is a 'listbox' named by 'label', a slotted label, the host's 'aria-label' or its 'aria-labelledby'. A development build warns where all four are empty. The list is described by the hint, or by the message in 'feedback' in its place, and carries 'aria-multiselectable' with a 'mode'. It carries 'aria-invalid' while 'feedback' says what is wrong, while it holds a time outside 'min' and 'max' or one the picker does not offer, and, for a 'required' picker with no time, once the reader has chosen one or a form has refused the picker. The wheels are a 'group' with that name, holding one 'listbox' per wheel, named "Hour", "Minute", "Second" and "AM/PM" in the page's language, and each described the same way. */
   "helix-headless-time-picker": DefineCustomElement<
     HelixHeadlessTimePicker,
     HelixHeadlessTimePickerVueProps,
@@ -19028,7 +19383,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTimelineGroupVueProps,
     HelixHeadlessTimelineGroupVueEvents
   >;
-  /** Given 'datetime', the label you write is wrapped in a '<time>' element, so a machine-readable value such as "2026-08-19" travels with a label such as "yesterday". Without 'datetime', the label is a '<span>'.  **'relative' writes the time for you** as how long ago it was, such as "3 hours ago", from 'datetime', where the 'time' slot is empty. The words move on as they go stale, "3 hours ago" becoming "4 hours ago", with one wakeup shared by every reading on the page, as 'FormatDate' keeps its own. They are in the language of the page, or of the nearest 'lang'.  Each entry draws the connector line that arrives at it and hides it when it is the first entry, using ':host(:first-child)'. This needs no index, no counting parent, and no script. 'Steps' and 'Breadcrumbs' work the same way.  'tone' sets the kind of event and is the only thing that colors the mark. It uses the same values as 'Announcement'. */
+  /** Given 'datetime', the label you write is wrapped in a '<time>' element, so a machine-readable value such as "2026-08-19" travels with a label such as "yesterday". Without 'datetime', the label is a '<span>'.  **'relative' writes the time for you** as how long ago it was, such as "3 hours ago", from 'datetime', where the 'time' slot is empty. The words move on as they go stale, "3 hours ago" becoming "4 hours ago", with one wakeup shared by every reading on the page, as 'FormatDate' keeps its own. They are in the language of the page, or of the nearest 'lang'.  Each entry draws the connector line that arrives at it and hides it when it is the first entry, using ':host(:first-child)'. This needs no index, no counting parent, and no script. 'Steps' and 'Breadcrumbs' work the same way.  'tone' sets the kind of event and is the only thing that colors the mark. It uses the same values as 'Announcement'. **A screen reader hears the tone as a word**, from 'tone-labels': the mark is an image named "Error", "Information", "Success" or "Warning", so the color is not the only place the meaning is. 'neutral' and 'primary' say nothing unless you name them.  **'pending' marks an event that has not happened yet**, such as one that is scheduled. The mark is the open circle, and a screen reader hears 'pending-label', "Scheduled", with the tone's word. */
   "helix-headless-timeline-item": DefineCustomElement<
     HelixHeadlessTimelineItem,
     HelixHeadlessTimelineItemVueProps,
@@ -19052,7 +19407,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessToastVueProps,
     HelixHeadlessToastVueEvents
   >;
-  /** The indicator is one element that moves to the selected item. A single moving object is easier to follow than a fill that swaps, and it shows where the selection came from.  Its size and position are measured from the selected item and written to the indicator as custom properties, because labels have different lengths. Measurement happens on the client, so the server renders the indicator hidden and it fades in once measured.  'selection-mode="multiple"' makes the group a toolbar of buttons that each say whether they are pressed with 'aria-pressed', as React Aria's ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases one item, the arrow keys move focus without pressing, and 'value' is the pressed values, comma separated, which 'values' also gives as a list. Use 'values' where an item's value holds a comma. The form receives one entry per pressed value, and a page the browser brings back presses the same items again. The indicator stays hidden, and each pressed item is marked with ':state(pressed)'. Inside a toolbar it is a named group of that toolbar's controls instead, so a reader meets one toolbar.  'orientation="vertical"' runs the items down a column, says so to the accessibility tree, and the up and down arrows move between them.  **Keyboard.** The group is one tab stop: the chosen item, or the first that can be chosen, as in a radio group, and in a multiple group the item focus was last on.  | Key | What it does | |---|---| | Right, Down | Moves to the next item, from the last back to the first. In a single group, chooses it. | | Left, Up | Moves to the item before, from the first round to the last. In a single group, chooses it. | | Home, End | Moves to the first or the last item. In a single group, chooses it. | | Space, Enter | Chooses the focused item, or presses or releases it in a multiple group. |  Left and Right swap on a right-to-left page, and a disabled item is passed over. A single group is a 'radiogroup' of items with 'role="radio"' and 'aria-checked'. A multiple group is a 'toolbar' of buttons with 'aria-pressed', or a 'group' inside a toolbar. The group is named by 'label' and carries 'aria-orientation' under 'orientation'. */
+  /** The indicator is one element that moves to the selected item. A single moving object is easier to follow than a fill that swaps, and it shows where the selection came from.  Its size and position are measured from the selected item and written to the indicator as custom properties, because labels have different lengths. Measurement happens on the client, so the server renders the indicator hidden and it fades in once measured.  'selection-mode="multiple"' makes the group a toolbar of buttons that each say whether they are pressed with 'aria-pressed', as React Aria's ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases one item, the arrow keys move focus without pressing, and 'value' is the pressed values, comma separated, which 'values' also gives as a list. Use 'values' where an item's value holds a comma. The form receives one entry per pressed value, and a page the browser brings back presses the same items again. The indicator stays hidden, and each pressed item is marked with ':state(pressed)'. Inside a toolbar it is a named group of that toolbar's controls instead, so a reader meets one toolbar.  'orientation="vertical"' runs the items down a column, says so to the accessibility tree, and the up and down arrows move between them.  **Keyboard.** The group is one tab stop: the chosen item, or the first that can be chosen, as in a radio group, and in a multiple group the item focus was last on.  | Key | What it does | |---|---| | Right, Down | Moves to the next item, from the last back to the first. In a single group, chooses it. | | Left, Up | Moves to the item before, from the first round to the last. In a single group, chooses it. | | Home, End | Moves to the first or the last item. In a single group, chooses it. | | Space, Enter | Chooses the focused item, or presses or releases it in a multiple group. With 'allow-empty-selection', takes back the chosen item. |  Left and Right swap on a right-to-left page, and a disabled item is passed over. A single group is a 'radiogroup' of items with 'role="radio"' and 'aria-checked'. A multiple group is a 'toolbar' of buttons with 'aria-pressed', or a 'group' inside a toolbar. The group is named by 'label' and carries 'aria-orientation' under 'orientation'. */
   "helix-headless-toggle-group": DefineCustomElement<
     HelixHeadlessToggleGroup,
     HelixHeadlessToggleGroupVueProps,
@@ -19118,7 +19473,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessVideoPlaylistMenuVueProps,
     HelixHeadlessVideoPlaylistMenuVueEvents
   >;
-  /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way.  **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside.  **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when:  - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end.  On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order.  **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry.  **Keyboard.** Each entry is a button in the tab order, and Enter or Space plays it. The arrow keys move focus to the entry before or after, and Home and End to the first and the last, passing over disabled entries. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them, and Shift with N or P plays the next or the previous entry. The player's previous and next controls move through the entries in the same order the playlist does.  **What a screen reader hears.** A list named by 'label', with a button for each entry. When the playlist moves to another entry, by a press, by the player's controls, or at the end of a clip, a live region says 'playing-label', "Now playing" and the entry's name. */
+  /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way.  **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside.  **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when:  - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end.  On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'no-advance' turns that off, and the playlist stays on the entry that ended. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order.  **'helix-before-activate' says why the playlist is moving**, in 'detail.cause': 'press' for an entry or a menu choice, 'next' and 'previous' for the player's controls and the methods, 'ended' at the end of a clip, and 'removed' when the current entry leaves the playlist. Cancel an 'ended' move to show your own "Up next" countdown, then call 'next()'.  **Removing the current entry moves the playlist on**, to the entry after it, or to the one before it when it was the last. A clip that was playing keeps playing in the entry that takes its place.  **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry.  **Keyboard.** The entries take one stop in the tab order: the entry you last focused, or the current entry before you have focused one. Enter or Space plays it. The arrow keys move focus to the entry before or after, and Home and End to the first and the last, passing over disabled entries. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them, and Shift with N or P plays the next or the previous entry. The player's previous and next controls move through the entries in the same order the playlist does.  **What a screen reader hears.** A list named by 'label', with a button for each entry. When the playlist moves to another entry, by a press, by the player's controls, or at the end of a clip, a live region says 'playing-label', "Now playing" and the entry's name. */
   "helix-headless-video-playlist": DefineCustomElement<
     HelixHeadlessVideoPlaylist,
     HelixHeadlessVideoPlaylistVueProps,
@@ -19130,7 +19485,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessVideoVueProps,
     HelixHeadlessVideoVueEvents
   >;
-  /** The items arrive as data, in one of two ways:  - 'items' takes an array. A framework sets it as a property, and React   hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which   a server sends as markup.  Each item is drawn into a row in one of two ways:  - 'renderItem' is a function from an item and its index to the row's   content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element   with the item's 'name' as text, and 'data-field-href="url"' writes the   item's 'url' into 'href', the same for any attribute. A field may be a path   of keys, such as 'author.name'.  Rows are your markup in the light DOM, so your stylesheet styles them.  **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. Space the items with padding inside each one, which the list measures with the line.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'.  **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none.  The list takes the 'empty' state while it has read its items and holds none, and the 'loading' state while 'loading' is set, so your stylesheet can change the box around it for either. A list with no name is reported once in a development build. Name it with 'label' or 'aria-label'.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
+  /** The items arrive as data, in one of two ways:  - 'items' takes an array. A framework sets it as a property, and React   hydration keeps it. - 'for' names a '<script type="application/json">' that holds an array, which   a server sends as markup.  Each item is drawn into a row in one of two ways:  - 'renderItem' is a function from an item and its index to the row's   content: a Lit template, a string, or a DOM node. - A '<template>' child defines one row. 'data-field="name"' fills an element   with the item's 'name' as text, and 'data-field-href="url"' writes the   item's 'url' into 'href', the same for any attribute. A field may be a path   of keys, such as 'author.name'.  Rows are your markup in the light DOM, so your stylesheet styles them.  **A grid.** 'columns' lays the items out that many to a line, as a grid of equal columns, and windows the set a line at a time, as React Aria's grid layout does. Each item draws one element, a cell of the grid, and 'estimate' is the height of a line. 'min-column-width' lays out as many columns as fit the box instead, as React Aria's grid layout does with its smallest item size, and follows the box as it resizes. 'gap' spaces the rows, and the columns of a grid, by a number of pixels the list counts in each row's place.  **Keyboard.** The list is one tab stop.  | Key | What it does | |---|---| | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. | | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. | | Home, End | Moves to the first or the last item. | | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. | | A letter or a word | Moves to the next item whose text starts with what you typed. | | Escape | Lets go of every chosen item, in a list with 'selection-mode'. | | Tab | Moves into the focused row's own links and buttons, then out of the list. |  An item that is not drawn is scrolled into view and focused, so a keyboard reaches the whole set. When the row holding the tab stop scrolls away, the stop moves to the first row on screen. Typing matches each item's 'text-field', which is the first 'data-field' of the row template by default, or the item itself when it is a string or a number.  Each row says its place in the whole set with 'aria-posinset' and 'aria-setsize', so a screen reader says "4,000 of 10,000". The row holding focus stays drawn when it scrolls out.  **Selecting.** 'selection-mode' makes the list a list box a reader chooses from: 'single' selects one item and 'multiple' any number. Space or a press selects an item, Shift with Space, an arrow, Home, End or a press takes in the items from the last one chosen, and Control or Command with A selects them all, in 'multiple'. Escape lets go of every chosen item, and keeps the key from the dialog or menu around the list while there was something to let go of. 'value' holds the chosen items' keys, separated by commas, in the order of the set: 'key-field' names each item's key, and a string or a number item is its own key. A change asks with 'helix-before-change' and tells with 'change'. Each row is an 'option' marked 'aria-selected', so a row's own links and buttons are not reached there: keep those to a list without 'selection-mode'.  'selection-behavior="replace"' selects the item pressed alone, as a file list does, and the arrow keys carry the selection with them. Control or Command with a press or with Space adds or takes out one item, and with an arrow moves without selecting.  **Disabled items.** 'disabled-keys' names items by their keys, separated by commas. Their rows carry 'aria-disabled', the keys and typing pass over them, and a press, Space, or Control with A does not select them.  **Loading more.** 'helix-range-change' fires as the items on screen change, and 'range' holds them. 'helix-load-more' fires once a reader is within one screen of the end, once for each length of the set: add to 'items' and it can fire again. While you fetch, set 'loading': the list is busy, and a row after the last item says "Loading more" ('loading-label', or your own content in the 'loading' slot). 'scrollToIndex' takes a reader to an item.  **An empty list.** Set 'empty-label', or put your own content in the 'empty' slot, for a row shown when there are no items and none are loading, such as "No messages yet" and a link to write one. Without either, an empty list shows nothing, since a list whose items have not arrived yet has not said it has none.  The list takes the 'empty' state while it has read its items and holds none, and the 'loading' state while 'loading' is set, so your stylesheet can change the box around it for either. A list with no name is reported once in a development build. Name it with 'label' or 'aria-label'.  **Row height.** Rows are placed by 'estimate' until they are drawn. Then the list reads the drawn rows' height once and places every row by it, so a wrong estimate still reaches the last item. Set 'measured' for rows of different heights. Once the list draws rows of different heights, such as rows that wrap on a narrow screen, it places each row by its own height whether 'measured' is set or not.  The list follows its source. A new 'items' array, an edit to the script's text, or a script replaced under the same id draws the new rows. A row that stays in view keeps its element as the list scrolls.  The viewport scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root, so 'scrollTop' works with no stylesheet. You still need to set a block size. */
   "helix-headless-virtual-list": DefineCustomElement<
     HelixHeadlessVirtualList,
     HelixHeadlessVirtualListVueProps,