@fusion.dev/helix-headless 0.159.0 → 0.160.0

package/types/vue.d.ts

@@ -215,6 +215,7 @@ import type {
   HelixSelectedEvent,
   HelixSortEvent,
   HelixSortedEvent,
+  HelixClearEvent,
   HelixRejectEvent,
   HelixFacetEvent,
   HelixBeforeActivateEvent,
@@ -226,7 +227,6 @@ import type {
   HelixGraphSignalEvent,
   HelixGraphZoomEvent,
   HelixResizeEvent,
-  HelixClearEvent,
   HelixShortcutEvent,
   HelixActionEvent,
   HelixMapPartChangeEvent,
@@ -5078,37 +5078,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 +5149,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 +5289,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 +5308,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 +5324,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 +5358,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 +5593,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 +5638,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 +5794,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 +7150,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 +7183,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 +7208,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 +7276,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 +13617,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
@@ -15463,6 +15561,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 +15574,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 +15685,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 +15728,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 +15952,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`. */
@@ -16337,6 +16466,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
@@ -18434,13 +18575,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 +18677,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 +19025,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,
@@ -19010,13 +19151,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,
@@ -19052,7 +19193,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,