@fusion.dev/helix 0.147.0 → 0.148.0

package/types/vue.d.ts

@@ -119,6 +119,7 @@ import type {
   HelixSkipLink,
   HelixSlider,
   HelixSparkline,
+  HelixSpeedDialGroup,
   HelixSpeedDialItem,
   HelixSpeedDial,
   HelixSplitter,
@@ -165,6 +166,7 @@ import type {
   HelixDismissEvent,
   HelixScrolledEvent,
   HelixAuraFallbackEvent,
+  HelixBeforeChangeEvent,
   HelixPressEvent,
   HelixBeforeMoveEvent,
   HelixBeforeReconnectEvent,
@@ -185,7 +187,6 @@ import type {
   HelixBeforePinEvent,
   HelixHistoryEvent,
   HelixPinEvent,
-  HelixBeforeChangeEvent,
   HelixBeforeToggleEvent,
   HelixCopyEvent,
   HelixSampleEndEvent,
@@ -504,6 +505,22 @@ would catch. */
 Read once when the announcement is first rendered, as `Toast` reads its
 own. The clock stops while the pointer or focus is on the announcement. */
   duration?: (HelixAnnouncement["duration"]) | undefined;
+  /** The key that moves focus to the announcement's first control, and back
+to where it was, written as keys joined by `+`, such as `F6` or `Alt+A`.
+
+F6 by default, the key React Aria's regions answer to. Empty turns it
+off. With several announcements, the first one in the page takes focus. */
+  hotkey?: (HelixAnnouncement["hotkey"]) | undefined;
+  /** The name of the announcement's region, which screen readers list among
+the page's landmarks. Translate it with the rest of your interface.
+
+Empty leaves the announcement no region. */
+  label?: (HelixAnnouncement["label"]) | undefined;
+  /** Whether the announcement waits its turn behind the queued announcements
+before it in the same parent, showing when the last of them is removed.
+
+Off by default, so every announcement on a page shows at once. */
+  queued?: (HelixAnnouncement["queued"]) | undefined;
   /** The band's color.
 
 Paint only: unlike `Callout`, no value here draws a mark, changes the label,
@@ -1266,8 +1283,19 @@ second scale stack among themselves. */
 export type HelixBarChartVueEvents = {};
 
 export type HelixBlockquoteVueProps = {
-  /** The URL of the source the passage came from. */
+  /** Who said it, and where, as words, such as "Maria Lopez, operations
+manager". The `attribution` slot replaces them, for markup such as a link.
+
+Words are served with the figure they name, where a server cannot see a
+slotted attribution. */
+  attribution?: (HelixBlockquote["attribution"]) | undefined;
+  /** The URL of the source the passage came from. Who said it goes in
+`attribution`: a `cite` with words in it warns once, with the runtime kind
+`cite-not-url`. */
   cite?: (HelixBlockquote["cite"]) | undefined;
+  /** Whether to draw an opening quotation mark before the passage, in the
+element's language. Leave the marks out of the text. */
+  marks?: (HelixBlockquote["marks"]) | undefined;
 };
 
 export type HelixBlockquoteVueEvents = {};
@@ -1342,7 +1370,20 @@ attribute would put the whole path into the markup twice. */
 
 export type HelixBreadcrumbsVueEvents = {};
 
+/** `HelixButtonGroup` component event */
+export type HelixButtonGroupElementEvent<E = Event> = TypedEvent<
+  HelixButtonGroup,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixButtonGroupHelixBeforeChangeElementEvent =
+  HelixButtonGroupElementEvent<HelixBeforeChangeEvent>;
+
 export type HelixButtonGroupVueProps = {
+  /** The size of every button in the group: their height, text, padding and
+icons, from the density steps. Unset, the buttons take the size of the
+region around the group. */
+  size?: (HelixButtonGroup["size"]) | undefined;
   /** Whether the buttons are one bar or a spaced row.
 
 Joined by default: one control made of parts, sharing borders, reading as a
@@ -1376,9 +1417,32 @@ buttons sharing edges as one shape, and a wrapped row carries the corners of
 a first row into a second. Stacked, the same three keep one shape and one
 column. */
   orientation?: (HelixButtonGroup["orientation"]) | undefined;
+  /** Whether the buttons stay pressed: `single` keeps one pressed at a time and
+`multiple` any number. Unset, they are action buttons, each its own tab
+stop, as before.
+
+Optional, so the attribute is absent until a consumer writes it. */
+  "selection-mode"?: (HelixButtonGroup["selectionMode"]) | undefined;
+  /** Whether the buttons stay pressed: `single` keeps one pressed at a time and
+`multiple` any number. Unset, they are action buttons, each its own tab
+stop, as before.
+
+Optional, so the attribute is absent until a consumer writes it. */
+  selectionMode?: (HelixButtonGroup["selectionMode"]) | undefined;
+  /** The values of the pressed buttons, comma separated, in a selection mode.
+A button's own `value` names it, so a value holds no comma.
+
+The attribute is the seed, and a press changes the property, which does
+not reflect, as a native control's `value` does not. */
+  value?: (HelixButtonGroup["value"]) | undefined;
 };
 
-export type HelixButtonGroupVueEvents = {};
+export type HelixButtonGroupVueEvents = {
+  /** Fired after a press changes `value`, in a selection mode. */
+  change: HelixButtonGroupElementEvent;
+  /** Fired before a press changes `value`, with the value it would leave in `detail.value`. Cancelable: call `preventDefault()` to keep the buttons as they are. */
+  "helix-before-change": HelixButtonGroupHelixBeforeChangeElementEvent;
+};
 
 /** `HelixButton` component event */
 export type HelixButtonElementEvent<E = Event> = TypedEvent<HelixButton, E>;
@@ -2115,6 +2179,20 @@ as the list.
 The list is joined the way the page's language joins one, "Second and
 Third", rather than with a comma this component chose. */
   leadsToLabel?: (HelixCanvas["leadsToLabel"]) | undefined;
+  /** What screen readers hear after a key moves a card, with `{name}` for the
+card and `{x}` and `{y}` for where it now is, in the document's units.
+
+**A move a reader cannot see has to be said.** Shift with an arrow moved
+the card and said nothing, so a reader moving one by keys could not tell
+whether it had moved, or how far. */
+  "moved-label"?: (HelixCanvas["movedLabel"]) | undefined;
+  /** What screen readers hear after a key moves a card, with `{name}` for the
+card and `{x}` and `{y}` for where it now is, in the document's units.
+
+**A move a reader cannot see has to be said.** Shift with an arrow moved
+the card and said nothing, so a reader moving one by keys could not tell
+whether it had moved, or how far. */
+  movedLabel?: (HelixCanvas["movedLabel"]) | undefined;
   /** The order the arrow keys and screen readers move through the cards:
 `spatial` or `edges`.
 
@@ -2155,6 +2233,14 @@ walk the cards. */
   /** The text announced when a connection's end is picked up, with `{from}` and
 `{to}`. */
   reconnectingLabel?: (HelixCanvas["reconnectingLabel"]) | undefined;
+  /** What screen readers hear after a key resizes a card, with `{name}` for the
+card and `{width}` and `{height}` for its new size, in the document's
+units. */
+  "resized-label"?: (HelixCanvas["resizedLabel"]) | undefined;
+  /** What screen readers hear after a key resizes a card, with `{name}` for the
+card and `{width}` and `{height}` for its new size, in the document's
+units. */
+  resizedLabel?: (HelixCanvas["resizedLabel"]) | undefined;
   /** The names of the selected cards and connections, comma separated. Empty
 when nothing is selected.
 
@@ -2175,6 +2261,43 @@ on its board across cards and connections both, and may not hold a comma.
 
 Written to select from outside, and read to act on the selection. */
   selected?: (HelixCanvas["selected"]) | undefined;
+  /** What a selected card or connection adds to what screen readers hear on
+it, before its tone and its connections. Empty adds nothing.
+
+A card is an article and a connection a button, and neither has a selected
+state for `aria-selected` to carry, so the state is said in words. */
+  "selected-label"?: (HelixCanvas["selectedLabel"]) | undefined;
+  /** What a selected card or connection adds to what screen readers hear on
+it, before its tone and its connections. Empty adds nothing.
+
+A card is an article and a connection a button, and neither has a selected
+state for `aria-selected` to carry, so the state is said in words. */
+  selectedLabel?: (HelixCanvas["selectedLabel"]) | undefined;
+  /** What screen readers hear after the selection grows or shrinks, with
+`{count}` for how many cards and connections are selected: by Space, a
+click with Shift, Command or Control, Command or Control with A, a box
+drawn across the board, or Escape.
+
+A selection of one made by arriving on a card or clicking it is not said,
+since the card is. */
+  "selection-label"?: (HelixCanvas["selectionLabel"]) | undefined;
+  /** What screen readers hear after the selection grows or shrinks, with
+`{count}` for how many cards and connections are selected: by Space, a
+click with Shift, Command or Control, Command or Control with A, a box
+drawn across the board, or Escape.
+
+A selection of one made by arriving on a card or clicking it is not said,
+since the card is. */
+  selectionLabel?: (HelixCanvas["selectionLabel"]) | undefined;
+  /** Snaps the cards a reader moves or resizes to a multiple of this many of the
+document's units, such as `32` to land on the lines `grid` draws.
+
+**A drag lets go on the nearest line and a key goes to the next one.**
+Shift with an arrow moves a card to the next line that way, rather than
+by its step of 16, and Alt with an arrow moves its bottom right corner
+the same way. A group moves with what it carries, so a card inside one
+keeps its place in it. Absent, cards land where they are let go. */
+  snap?: (HelixCanvas["snap"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
   "stopped-label"?: (HelixCanvas["stoppedLabel"]) | undefined;
   /** The text announced when a connection is stopped before it is requested. */
@@ -2197,6 +2320,12 @@ red is "blocked" on one board and "urgent" on the next. A reader who can
 see the board is told by the color; this is how a reader who cannot is
 told the same. A tone left out is not read. */
   toneLabels?: (HelixCanvas["toneLabels"]) | undefined;
+  /** What screen readers hear after a zoom button or key, with `{zoom}` for the
+zoom as a percentage, written the way the page's language writes one. */
+  "zoomed-label"?: (HelixCanvas["zoomedLabel"]) | undefined;
+  /** What screen readers hear after a zoom button or key, with `{zoom}` for the
+zoom as a percentage, written the way the page's language writes one. */
+  zoomedLabel?: (HelixCanvas["zoomedLabel"]) | undefined;
   /** The board's current view: the document's point at the middle of the view,
 and the zoom.
 
@@ -3404,16 +3533,18 @@ block lays out. Not for a diff, whose files each scroll on their own. */
   "expand-label"?: (HelixCodeBlock["expandLabel"]) | undefined;
   /** The expand button's words while the cap hides lines. */
   expandLabel?: (HelixCodeBlock["expandLabel"]) | undefined;
-  /** The block's name, usually a file name or a language.
+  /** The block's name, usually a file name, drawn in the header.
 
-In a diff, each file is named from the patch, and this names a patch that
-carries no name of its own. */
+Absent, the block is named by `language` where there is one. In a diff,
+each file is named from the patch, and this names a patch that carries no
+name of its own. */
   label?: (HelixCodeBlock["label"]) | undefined;
   /** The language the code is written in, such as `ts` or `css`, handed to
 `highlight` as its second argument.
 
-Absent hands it an empty string. It draws nothing of its own: the block's
-name is `label`. */
+A block with no `label` is named by it, in the header and on the copy
+button, as a docs site names a snippet by its language. Absent hands
+`highlight` an empty string and names nothing. */
   language?: (HelixCodeBlock["language"]) | undefined;
   /** Whether the lines are numbered in a gutter beside the code.
 
@@ -4202,12 +4333,19 @@ leaves the field or presses Enter with nothing highlighted, and text that
 names an option takes that option. Unlike `creatable`, no event asks
 first and no option is expected to be added: the value is the text. */
   allowsCustomValue?: (HelixCombobox["allowsCustomValue"]) | undefined;
-  /** What the browser may autofill in the text field, as a platform token.
+  /** What the browser may autofill, as a platform token such as `country`.
 
 **Defaults to `off`, which is not the platform's default and is the
 point.** The field filters a list rather than collecting a value, so a
 browser offering to fill it with a saved address is competing for the same
-keystrokes as the listbox. A consumer who wants autofill can still ask. */
+keystrokes as the listbox. A consumer who wants autofill can still ask.
+
+Set, a combobox whose answer is one of its options keeps a hidden native
+`<select>` with the same options for the browser to fill, as React Aria's
+combobox and Select do, and the option the browser picks, by its value or
+its words, becomes the value. The text field itself stays `off`, so the
+browser fills the answer and not the filter. With `allows-custom-value`
+the token goes on the text field, whose words are the answer. */
   autocomplete?: (HelixCombobox["autocomplete"]) | undefined;
   /** Whether the user can add a value that is not in the list.
 
@@ -4246,12 +4384,14 @@ every keystroke. See Listbox's `filter-delay`. */
   /** The list's name, read by screen readers. The list has no visible name. */
   listLabel?: (HelixCombobox["listLabel"]) | undefined;
   /** What the list says when its options could not be loaded, such as after a
-request to a server fails. Empty is no error. Passed to the list, which
-shows it under any options there are and tells screen readers. */
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it. Passed to the list, which shows it
+under any options there are and tells screen readers. */
   "load-error"?: (HelixCombobox["loadError"]) | undefined;
   /** What the list says when its options could not be loaded, such as after a
-request to a server fails. Empty is no error. Passed to the list, which
-shows it under any options there are and tells screen readers. */
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it. Passed to the list, which shows it
+under any options there are and tells screen readers. */
   loadError?: (HelixCombobox["loadError"]) | undefined;
   /** Whether the options are still loading.
 
@@ -4334,6 +4474,12 @@ two. */
 options. `{count}` is the count, and `Intl.PluralRules` picks between the
 two. */
   resultsLabel?: (HelixCombobox["resultsLabel"]) | undefined;
+  /** What VoiceOver hears for a chosen option, as the highlight reaches it and
+once it is chosen, on Apple devices. `{name}` is the option's words. */
+  "selected-label"?: (HelixCombobox["selectedLabel"]) | undefined;
+  /** What VoiceOver hears for a chosen option, as the highlight reaches it and
+once it is chosen, on Apple devices. `{name}` is the option's words. */
+  selectedLabel?: (HelixCombobox["selectedLabel"]) | undefined;
   /** Whether the field completes the word as the user types.
 
 `suggest` rather than `autocomplete`, which is a real HTML attribute this
@@ -4459,12 +4605,14 @@ with: one key, said once. */
   /** Accessible name for the overlay, which has no visible heading. */
   label?: (HelixCommand["label"]) | undefined;
   /** What the list says when its commands could not be loaded, such as after a
-request to a server fails. Empty is no error. Passed to the list, which
-shows it under any commands there are and tells screen readers. */
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it. Passed to the list, which shows it
+under any commands there are and tells screen readers. */
   "load-error"?: (HelixCommand["loadError"]) | undefined;
   /** What the list says when its commands could not be loaded, such as after a
-request to a server fails. Empty is no error. Passed to the list, which
-shows it under any commands there are and tells screen readers. */
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it. Passed to the list, which shows it
+under any commands there are and tells screen readers. */
   loadError?: (HelixCommand["loadError"]) | undefined;
   /** Whether the commands are still loading, for a palette that asks a server
 for them as the user types.
@@ -5771,6 +5919,10 @@ item finds them once it runs, and the served markup wraps them until then. */
 export type HelixDescriptionListItemVueEvents = {};
 
 export type HelixDescriptionListVueProps = {
+  /** Draws a rule between one pair and the next, in the middle of the gap, as
+a details panel with many rows often does. Off by default, where space
+alone separates the pairs. */
+  divided?: (HelixDescriptionList["divided"]) | undefined;
   /** Where the values sit, beside their labels.
 
 Absent, each value starts right after the label column. `between` sets it on
@@ -5997,20 +6149,23 @@ Absent is the middle. `start` and `end` move it toward one end, with a
 short length of line, `--divider-content-offset`, kept before or after it.
 A divider with nothing set into it is one line whatever this says. */
   contentPlacement?: (HelixDivider["contentPlacement"]) | undefined;
-  /** Whether screen readers announce the line as a separator.
-
-Off by default, and out of the accessibility tree. Most rules on a page
-separate nothing: they underline a heading or close a section that space
-had already closed, and announcing every one as a separator is noise a
-screen-reader user has to walk past.
-
-An opt-in, not a `decorative` opt-out, because a boolean attribute cannot
-be turned off: `decorative="false"` parses as `true`, which would put the
-quiet default out of reach from HTML and leave it settable only as a
-property. An opt-in is absent by default, which every reflected property
-here has to be. */
+  /** Whether screen readers announce the line as a separator, which they now do
+by default.
+
+It dates from when the line was decorative by default. It is still read,
+and it wins over `decorative`, so a divider written with it stays a
+separator. */
   announced?: (HelixDivider["announced"]) | undefined;
-  /** The direction the line runs: `horizontal` or `vertical`. */
+  /** Takes the line out of the accessibility tree, for a rule that separates
+nothing: one under a heading, or between the facts of a byline.
+
+Absent, the line is a separator, as `<hr>` is. Radix Separator's opt-out
+has the same name. It turns the role off because a boolean attribute that
+is on by default cannot be turned off from HTML. */
+  decorative?: (HelixDivider["decorative"]) | undefined;
+  /** The direction the line runs: `horizontal` or `vertical`.
+
+Unset is horizontal, or across the toolbar the divider sits in. */
   orientation?: (HelixDivider["orientation"]) | undefined;
 };
 
@@ -7063,6 +7218,14 @@ few characters and a date is not. */
   elapsed?: (HelixFormatDate["elapsed"]) | undefined;
   /** How the era is written, such as AD, where a date is shown. */
   era?: (HelixFormatDate["era"]) | undefined;
+  /** Draws each field of a date in a part of its own: `weekday`, `day`,
+`month`, `year`, `era`, `hour`, `minute`, `second`, `day-period` and
+`time-zone-name`, so `::part(year)` can set the year apart.
+
+Off by default, which draws the date as one run of text, as Shoelace and
+Web Awesome do. An `elapsed` or `relative` reading is one phrase either
+way. */
+  fields?: (HelixFormatDate["fields"]) | undefined;
   /** Draws an `elapsed` or `relative` reading once and leaves it, where it
 would otherwise move on as it goes stale.
 
@@ -7629,6 +7792,14 @@ calendar heatmap does: a week is a column, so the strip reads along the
 line in weeks, from the right on a right-to-left page, and top to bottom in
 days. */
   rows?: (HelixHeatmap["rows"]) | undefined;
+  /** What the readout adds for a selected cell, under `selection-mode`, after
+where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
+nothing. */
+  "selected-label"?: (HelixHeatmap["selectedLabel"]) | undefined;
+  /** What the readout adds for a selected cell, under `selection-mode`, after
+where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
+nothing. */
+  selectedLabel?: (HelixHeatmap["selectedLabel"]) | undefined;
   /** What the `selection` part says after the selection changes, with `{count}` for
 how many cells are selected. */
   "selection-label"?: (HelixHeatmap["selectionLabel"]) | undefined;
@@ -9102,12 +9273,16 @@ and this one was the English a form in another language still spoke in
 the bubble it raises on submit: `feedback` replaces the message under
 the field and does not reach that one. */
   valueMissingMessage?: (HelixListbox["valueMissingMessage"]) | undefined;
-  /** What the browser may autofill in the text field, as a platform token.
+  /** What a browser's autofill may choose, as a platform token such as
+`country` or `cc-exp-month`, as a native `<select>` takes it.
 
-**Defaults to `off`, which is not the platform's default and is the
-point.** The field filters a list rather than collecting a value, so a
-browser offering to fill it with a saved address is competing for the same
-keystrokes as the listbox. A consumer who wants autofill can still ask. */
+Set, the list draws a hidden native `<select>` with the same options for
+the browser to fill, as React Aria's `HiddenSelect` does, and a fill
+chooses the option. `off`, the default, draws none.
+
+**The filter field is never filled.** It narrows the list rather than
+collecting a value, so a browser offering it a saved address competes
+with the reader for the same keystrokes: it is always `off`. */
   autocomplete?: (HelixListbox["autocomplete"]) | undefined;
   /** The filter text the list starts with, when `filter` is not set. */
   "default-filter"?: (HelixListbox["defaultFilter"]) | undefined;
@@ -9147,14 +9322,27 @@ act on the list the reader expects. */
   "filter-label"?: (HelixListbox["filterLabel"]) | undefined;
   /** Placeholder text for the filter field. */
   filterLabel?: (HelixListbox["filterLabel"]) | undefined;
+  /** How the options are laid out, which the arrow keys follow: `stack`, one
+under another, or `grid`, in rows and columns, as React Aria's `ListBox`
+lays out cards or photos. With `grid`, Up and Down move within a column,
+and Left and Right along the list, mirrored right to left.
+
+The columns are the stylesheet's: the styled tier draws them at
+`--listbox-column-min-inline-size` or wider, and a headless list lays out
+`::part(items)` as it likes, since the keys read where each option is
+drawn. A list of `items` stays a stack. Left out, the list is a stack,
+and the host carries no attribute for it. */
+  layout?: (HelixListbox["layout"]) | undefined;
   /** What the list says when its options could not be loaded, such as after a
-request to a server fails. Empty is no error.
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it.
 
 Set, it shows under any options there are, in place of `empty-text` and
 `loading-text`, and a screen reader hears it. Clear it when you ask again. */
   "load-error"?: (HelixListbox["loadError"]) | undefined;
   /** What the list says when its options could not be loaded, such as after a
-request to a server fails. Empty is no error.
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it.
 
 Set, it shows under any options there are, in place of `empty-text` and
 `loading-text`, and a screen reader hears it. Clear it when you ask again. */
@@ -9198,6 +9386,12 @@ options. `{count}` is the count.
 pair: a language with more forms than two picks the one for its `one` and
 writes the rest here. */
   resultsLabel?: (HelixListbox["resultsLabel"]) | undefined;
+  /** What VoiceOver hears as the highlight reaches a chosen option from the
+filter field, on Apple devices. `{name}` is the option's words. */
+  "selected-label"?: (HelixListbox["selectedLabel"]) | undefined;
+  /** What VoiceOver hears as the highlight reaches a chosen option from the
+filter field, on Apple devices. `{name}` is the option's words. */
+  selectedLabel?: (HelixListbox["selectedLabel"]) | undefined;
   /** Whether the control is disabled and cannot be used.
 
 Reflected, because the styled tier selects on it, and mirrored to
@@ -9224,6 +9418,23 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixListbox["name"]) | undefined;
+  /** The options as data, for a list too long to draw whole: each a value,
+which is also its words, or a record with a `value`, a `label` and
+`disabled`. Set, the list draws only the options in sight, and the ones
+you write as children are not read.
+
+**Every option is still reachable.** The keyboard, the typeahead, the
+filter and the value work over the whole set, and the option the keyboard
+is on is drawn wherever it is, so a screen reader is told about it. Each
+drawn option says its place in the set (`aria-posinset`, `aria-setsize`).
+React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
+`VirtualizeController`.
+
+**The list needs a height to scroll in**: the styled tier's
+`--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
+headless tier. Import the Option family as well, whose elements are drawn.
+A server sends the list empty, and the options are drawn once it hydrates. */
+  items?: (HelixListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
 
 `<select>`'s own pair, and this control is what stands in for one. The
@@ -10737,6 +10948,20 @@ say that without the component knowing what a row looks like. */
   loadingText?: (HelixNotifications["loadingText"]) | undefined;
   /** The feed's name, read by screen readers. */
   label?: (HelixNotifications["label"]) | undefined;
+  /** What the feed says when a page of it could not be loaded, such as after a
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it.
+
+Set, it shows under the rows there are, in place of `empty-text` and
+`loading-text`, and a screen reader hears it. Clear it when you ask again. */
+  "load-error"?: (HelixNotifications["loadError"]) | undefined;
+  /** What the feed says when a page of it could not be loaded, such as after a
+request to a server fails. Empty, null or no attribute is no error, so
+removing the attribute clears it.
+
+Set, it shows under the rows there are, in place of `empty-text` and
+`loading-text`, and a screen reader hears it. Clear it when you ask again. */
+  loadError?: (HelixNotifications["loadError"]) | undefined;
   /** Whether to draw a button after the list that asks for the next page, by
 sending `helix-load-more`. Take it off once there is nothing more. */
   "load-more"?: (HelixNotifications["loadMore"]) | undefined;
@@ -13289,6 +13514,14 @@ and this one was the English a form in another language still spoke in
 the bubble it raises on submit: `feedback` replaces the message under
 the field and does not reach that one. */
   valueMissingMessage?: (HelixSelect["valueMissingMessage"]) | undefined;
+  /** What a browser's autofill may fill in, as a platform token such as
+`country` or `cc-exp-month`, as on a native `<select>`.
+
+Set, the select keeps a hidden native `<select>` with the same options for
+the browser to fill, as React Aria's `HiddenSelect` does, and takes the
+option the browser picks, by its value or its words, as the value. Empty
+draws no hidden select, and a browser fills nothing. */
+  autocomplete?: (HelixSelect["autocomplete"]) | undefined;
   /** The text shown when no options match the filter. */
   "empty-text"?: (HelixSelect["emptyText"]) | undefined;
   /** The text shown when no options match the filter. */
@@ -13848,6 +14081,13 @@ not. */
 
 export type HelixSparklineVueEvents = {};
 
+export type HelixSpeedDialGroupVueProps = {
+  /** The group's name, drawn above its actions and read by screen readers. */
+  label?: (HelixSpeedDialGroup["label"]) | undefined;
+};
+
+export type HelixSpeedDialGroupVueEvents = {};
+
 /** `HelixSpeedDialItem` component event */
 export type HelixSpeedDialItemElementEvent<E = Event> = TypedEvent<
   HelixSpeedDialItem,
@@ -13860,6 +14100,10 @@ export type HelixSpeedDialItemHelixSelectElementEvent =
 export type HelixSpeedDialItemVueProps = {
   /** Whether the action is disabled, so it cannot be chosen. */
   disabled?: (HelixSpeedDialItem["disabled"]) | undefined;
+  /** The action's keyboard shortcut as a chord, such as `mod+s`, carried as
+`aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
+keyboard and Control elsewhere. Showing a shortcut does not bind it. */
+  shortcut?: (HelixSpeedDialItem["shortcut"]) | undefined;
   /** The action's value, sent in `helix-select` when the action is chosen. */
   value?: (HelixSpeedDialItem["value"]) | undefined;
 };
@@ -13912,8 +14156,32 @@ the resolved state for stylesheets, which is what the mirror is for. */
   open?: (HelixSpeedDial["open"]) | undefined;
   /** Accessible name for the trigger and the set of actions it opens. */
   label?: (HelixSpeedDial["label"]) | undefined;
+  /** The description the trigger gives under `open-on="long-press"`, saying how
+its actions are reached.
+
+A slotted trigger is described by the dial, which carries the words as
+its own label for that: a Helix button's inner control at once, and a
+plain element of yours once a reader reaches it, after hydration, unless
+you described or labeled it yourself. */
+  "long-press-label"?: (HelixSpeedDial["longPressLabel"]) | undefined;
+  /** The description the trigger gives under `open-on="long-press"`, saying how
+its actions are reached.
+
+A slotted trigger is described by the dial, which carries the words as
+its own label for that: a Helix button's inner control at once, and a
+plain element of yours once a reader reaches it, after hydration, unless
+you described or labeled it yourself. */
+  longPressLabel?: (HelixSpeedDial["longPressLabel"]) | undefined;
   /** Space between the trigger and the actions, in pixels. */
   offset?: (HelixSpeedDial["offset"]) | undefined;
+  /** What opens the dial. `click` opens it on a press of the trigger. Under
+`long-press`, a press is the trigger's own action, and the dial opens on a
+press held for half a second, or on Alt+Down or Alt+Up. */
+  "open-on"?: (HelixSpeedDial["openOn"]) | undefined;
+  /** What opens the dial. `click` opens it on a press of the trigger. Under
+`long-press`, a press is the trigger's own action, and the dial opens on a
+press held for half a second, or on Alt+Down or Alt+Up. */
+  openOn?: (HelixSpeedDial["openOn"]) | undefined;
   /** The direction the actions open in. They move to another side if that side
 does not fit.
 
@@ -14095,7 +14363,7 @@ export type HelixSplitterVueEvents = {
   "helix-collapse": HelixSplitterHelixCollapseElementEvent;
   /** Fired after the divider settles somewhere new, with the new position. */
   "helix-resized": HelixSplitterHelixResizedElementEvent;
-  /** Fired each time a drag moves the divider, before it settles, as a range input does while it is dragged. Read `position` for where it is now. */
+  /** Fired each time the divider moves, as a range input does: on each step of a drag, and before `helix-resized` for a key, a double click or a corner. Read `position` for where it is now. */
   input: HelixSplitterElementEvent;
 };
 
@@ -14658,6 +14926,14 @@ is set. */
   "descending-label"?: (HelixTable["descendingLabel"]) | undefined;
   /** The word for a descending sort, in `sorted-label`. */
   descendingLabel?: (HelixTable["descendingLabel"]) | undefined;
+  /** Makes the table a grid: one tab stop, and the arrow keys, Home, End and the
+Page keys move focus between its cells, the headings included. Enter moves
+into a cell's controls, and Tab leaves the table.
+
+Off by default, where the table is a static `table` and Tab reaches each
+link and control in it. On, the table writes a `tabindex` onto each of its
+cells, which is the one way a cell of your markup can take focus. */
+  grid?: (HelixTable["grid"]) | undefined;
   /** Accessible name for the table.
 
 An `aria-label` or `aria-labelledby` on the host names the table too, and
@@ -16277,6 +16553,9 @@ export type HelixToggleVueEvents = {
 };
 
 export type HelixToolbarVueProps = {
+  /** The size of every control in the toolbar: their height, icons, boxes and
+tags. Unset is the small size, as a toolbar is dense by nature. */
+  size?: (HelixToolbar["size"]) | undefined;
   /** The toolbar's name, read by screen readers.
 
 An `aria-label` or `aria-labelledby` on the host names the toolbar too,
@@ -17802,6 +18081,10 @@ export type CustomCssProperties = {
   "--chart-bar-wash"?: (string) | undefined;
   /** The color of the attribution. */
   "--blockquote-attribution-color"?: (string) | undefined;
+  /** The typeface of the attribution, the page's by default. */
+  "--blockquote-attribution-font-family"?: (string) | undefined;
+  /** The weight of the attribution, the page's by default. */
+  "--blockquote-attribution-font-weight"?: (string) | undefined;
   /** The font size of the attribution. */
   "--blockquote-attribution-size"?: (string) | undefined;
   /** The color of the quoted passage. */
@@ -17812,8 +18095,14 @@ export type CustomCssProperties = {
   "--blockquote-font-weight"?: (string) | undefined;
   /** The space between the passage and its attribution. */
   "--blockquote-gap"?: (string) | undefined;
+  /** The letter spacing of the quoted passage, the tight tracking by default. */
+  "--blockquote-letter-spacing"?: (string) | undefined;
   /** The line height of the quoted passage, the tight leading by default. */
   "--blockquote-line-height"?: (string) | undefined;
+  /** The color of the mark `marks` draws, the subtle foreground by default. */
+  "--blockquote-mark-color"?: (string) | undefined;
+  /** The font size of the mark `marks` draws. */
+  "--blockquote-mark-size"?: (string) | undefined;
   /** The font size of the quoted passage. */
   "--blockquote-size"?: (string) | undefined;
   /** Inline padding of a control slotted into a crumb, matching the steps either side of it. */
@@ -17842,6 +18131,14 @@ export type CustomCssProperties = {
   "--breadcrumbs-split-fill"?: (string) | undefined;
   /** Space between the buttons, when `spaced`. */
   "--button-group-gap"?: (string) | undefined;
+  /** Fill behind a pressed button, in a selection mode. Defaults to the foreground color. */
+  "--button-group-pressed-background-color"?: (string) | undefined;
+  /** Edge of a pressed button, in a selection mode. Defaults to its fill. */
+  "--button-group-pressed-border-color"?: (string) | undefined;
+  /** Words and icons of a pressed button, in a selection mode. Defaults to the background color. */
+  "--button-group-pressed-color"?: (string) | undefined;
+  /** Written on the control inside each toggle button of a group with `selection-mode`: `1` while it is pressed and `0` while it is not. Read it in a `::part(button)` rule to draw the pressed look. */
+  "--button-group-pressed"?: (string) | undefined;
   /** Fill behind the button, in every state. */
   "--button-background-color"?: (string) | undefined;
   /** Fill behind the button under the pointer. Without it, `--button-background-color` also applies on hover. */
@@ -17906,8 +18203,12 @@ export type CustomCssProperties = {
   "--canvas-node-background-color"?: (string) | undefined;
   /** A color for the card that carries no meaning, such as a hex color from a document. Use it when no tone fits. */
   "--canvas-node-color"?: (string) | undefined;
+  /** The size of the card's text. */
+  "--canvas-node-font-size"?: (string) | undefined;
   /** The space between the card's edge and its content. */
   "--canvas-node-padding"?: (string) | undefined;
+  /** The card's corners. A `shape` draws its own. */
+  "--canvas-node-radius"?: (string) | undefined;
   /** The shadow under the card, set by `separation="elevated"`. */
   "--canvas-node-shadow"?: (string) | undefined;
   /** The background behind the board. */
@@ -17916,14 +18217,26 @@ export type CustomCssProperties = {
   "--canvas-block-size"?: (string) | undefined;
   /** The color of the frame's edge. */
   "--canvas-border-color"?: (string) | undefined;
+  /** The color of a connection being drawn, and of the card it will arrive at and that card's points. */
+  "--canvas-connect-color"?: (string) | undefined;
   /** The color of a connection with no tone. Set it in one edge's `style` to color only that edge. */
   "--canvas-edge-color"?: (string) | undefined;
   /** The width of the area a pointer can press on a connection, which is wider than the drawn line. */
   "--canvas-edge-target-width"?: (string) | undefined;
+  /** The width of a connection's line. A selected or focused connection is drawn at twice it. */
+  "--canvas-edge-width"?: (string) | undefined;
   /** The spacing of the grid lines or dots, in the document's units, so it scales with the zoom. */
   "--canvas-grid-size"?: (string) | undefined;
+  /** The color of the label on a connection. */
+  "--canvas-label-color"?: (string) | undefined;
   /** The width of the field for editing a label. */
   "--canvas-label-editor-inline-size"?: (string) | undefined;
+  /** The size of the label on a connection. */
+  "--canvas-label-font-size"?: (string) | undefined;
+  /** The frame's corners. */
+  "--canvas-radius"?: (string) | undefined;
+  /** The color of what is selected: a card's outline, its corners and its move handle, a connection and its ends, and the box drawn to select. */
+  "--canvas-selected-color"?: (string) | undefined;
   /** The background of the pan and zoom buttons. `Map` uses the same property. */
   "--viewport-control-background-color"?: (string) | undefined;
   /** How the regions pack when the card is stretched taller than its content. `start` by default, so the slack is at the bottom; `space-between` puts a footer on the floor. */
@@ -17936,10 +18249,18 @@ export type CustomCssProperties = {
   "--card-border-color"?: (string) | undefined;
   /** Width of the surface's edge. Follows `--helix-border-surface`, which is a hairline unless your theme sets another width. The edge is what sets the surface apart. */
   "--card-border-width"?: (string) | undefined;
+  /** Color of the card's text. Muted by default, so the header reads as the card's own voice. */
+  "--card-color"?: (string) | undefined;
   /** Space between the regions, and between a header or footer and its actions. */
   "--card-gap"?: (string) | undefined;
+  /** Color of the header, and of a `Text` heading anywhere in the card. The foreground by default. */
+  "--card-heading-color"?: (string) | undefined;
+  /** Line height of the card's text. The normal leading by default. */
+  "--card-line-height"?: (string) | undefined;
   /** Height of the media region. Defaults to `auto`, which follows an image's own proportions. A chart has no height of its own, so set one here for a chart. */
   "--card-media-block-size"?: (string) | undefined;
+  /** How a slotted picture fills the media region, as `object-fit`. `cover` by default; `contain` shows all of a logo or a screenshot. */
+  "--card-media-fit"?: (string) | undefined;
   /** Width of the media column when horizontal. */
   "--card-media-size"?: (string) | undefined;
   /** Inset applied to each region. */
@@ -18026,22 +18347,36 @@ export type CustomCssProperties = {
   "--checkbox-mark-color"?: (string) | undefined;
   /** The width and height of the box. */
   "--checkbox-size"?: (string) | undefined;
+  /** The color a diff's added lines are tinted in and their `+` is drawn in. The success color by default. */
+  "--code-block-added-color"?: (string) | undefined;
   /** A backdrop filter for the block and its header, for a translucent background. */
   "--code-block-backdrop"?: (string) | undefined;
   /** The background behind the code. Set it for a block that sits on a surface other than the page background. */
   "--code-block-background-color"?: (string) | undefined;
   /** The line around the block and its header. */
   "--code-block-border-color"?: (string) | undefined;
+  /** The color of the code. A highlighter's own colors win on the tokens it colors. */
+  "--code-block-color"?: (string) | undefined;
   /** The color of the button under a capped block that shows every line. */
   "--code-block-expand-color"?: (string) | undefined;
+  /** The typeface of the code and its line numbers. The mono face by default. */
+  "--code-block-font-family"?: (string) | undefined;
+  /** The size of the code and its line numbers. */
+  "--code-block-font-size"?: (string) | undefined;
   /** The color of the line numbers. */
   "--code-block-gutter-color"?: (string) | undefined;
   /** The background behind the name. The default is `surface-raised`. */
   "--code-block-header-background-color"?: (string) | undefined;
+  /** The color of the name in the header. */
+  "--code-block-label-color"?: (string) | undefined;
+  /** The line height of the code and its line numbers, as a number or a length. */
+  "--code-block-line-height"?: (string) | undefined;
   /** The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit. */
   "--code-block-max-block-size"?: (string) | undefined;
   /** The corner radius of the header's top and the block's bottom, which form one shape. */
   "--code-block-radius"?: (string) | undefined;
+  /** The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default. */
+  "--code-block-removed-color"?: (string) | undefined;
   /** Fill behind the fragment. Defaults to the foreground color at 6%, which looks the same on a light page and a dark one. */
   "--code-background-color"?: (string) | undefined;
   /** The fragment's typeface. Defaults to the mono face. */
@@ -18234,6 +18569,8 @@ export type CustomCssProperties = {
   "--date-picker-column-count"?: (string) | undefined;
   /** The space between the value and the controls in `actions`. */
   "--description-list-actions-gap"?: (string) | undefined;
+  /** How a label and its value line up beside each other, as `align-items`. Defaults to `baseline`; `center` suits a value taller than a line, such as an avatar. */
+  "--description-list-item-align"?: (string) | undefined;
   /** The space between a label and its value when the label sits over it. */
   "--description-list-item-gap"?: (string) | undefined;
   /** The color of a label. */
@@ -18246,8 +18583,14 @@ export type CustomCssProperties = {
   "--description-list-value-color"?: (string) | undefined;
   /** The space between the column of labels and the column of values, with `direction="row"`. */
   "--description-list-column-gap"?: (string) | undefined;
+  /** The color of the rule between pairs, with `divided`. */
+  "--description-list-divider-color"?: (string) | undefined;
+  /** The thickness of the rule between pairs, with `divided`. */
+  "--description-list-divider-width"?: (string) | undefined;
   /** Space between one pair and the next. The default is smaller with `direction="row"` than when stacked. Setting this property replaces both defaults. */
   "--description-list-gap"?: (string) | undefined;
+  /** The width of the column of labels, with `direction="row"`. Defaults to the width of the longest label; set a length such as `10rem` to line up several lists. */
+  "--description-list-label-width"?: (string) | undefined;
   /** The panel's fill. Follows `--helix-color-surface-overlay`. */
   "--dialog-background-color"?: (string) | undefined;
   /** Color of the panel's edge. */
@@ -18274,6 +18617,12 @@ export type CustomCssProperties = {
   "--divider-color"?: (string) | undefined;
   /** The color of the content set into the line. */
   "--divider-content-color"?: (string) | undefined;
+  /** The typeface of the content set into the line. The sans face by default. */
+  "--divider-content-font-family"?: (string) | undefined;
+  /** The size of the content set into the line. The `xs` step by default. */
+  "--divider-content-font-size"?: (string) | undefined;
+  /** The weight of the content set into the line. The weight around the divider by default. */
+  "--divider-content-font-weight"?: (string) | undefined;
   /** The space either side of the content set into the line. */
   "--divider-content-gap"?: (string) | undefined;
   /** The length of line before the content under `content-placement="start"`, or after it under `end`. */
@@ -18678,6 +19027,8 @@ export type CustomCssProperties = {
   "--listbox-background-color"?: (string) | undefined;
   /** The panel's border, as a shorthand. Set it to `none` when the list is already inside a panel. */
   "--listbox-border"?: (string) | undefined;
+  /** How narrow a column may be with `layout="grid"`. As many columns as fit are drawn. Defaults to `8rem`. */
+  "--listbox-column-min-inline-size"?: (string) | undefined;
   /** The color of the line shown while `load-error` is set. */
   "--listbox-error-color"?: (string) | undefined;
   /** Maximum height of the list before it scrolls. */
@@ -18728,12 +19079,32 @@ export type CustomCssProperties = {
   "--map-position-fill"?: (string) | undefined;
   /** The point's width. */
   "--map-position-size"?: (string) | undefined;
+  /** The rule above the map credit, under the map. */
+  "--map-attribution-border-color"?: (string) | undefined;
+  /** The color of the map credit. */
+  "--map-attribution-color"?: (string) | undefined;
+  /** The size of the map credit's text. */
+  "--map-attribution-font-size"?: (string) | undefined;
   /** The color behind the map while tiles load. */
   "--map-background-color"?: (string) | undefined;
   /** The frame's height, as a length. Ignored with `fill`, where the container decides it. */
   "--map-block-size"?: (string) | undefined;
   /** The frame's border color. */
   "--map-border-color"?: (string) | undefined;
+  /** The fill of the pressed 3D button and the ring around the chosen map type and each shown layer in the layers menu. */
+  "--map-chosen-color"?: (string) | undefined;
+  /** The space between the map types and the layers in the layers menu. */
+  "--map-layers-menu-gap"?: (string) | undefined;
+  /** The width of the layers menu. */
+  "--map-layers-menu-inline-size"?: (string) | undefined;
+  /** The space inside the edge of the layers menu. */
+  "--map-layers-menu-padding"?: (string) | undefined;
+  /** The north half of the compass needle. */
+  "--map-needle-north-color"?: (string) | undefined;
+  /** The south half of the compass needle. */
+  "--map-needle-south-color"?: (string) | undefined;
+  /** The frame's corners. */
+  "--map-radius"?: (string) | undefined;
   /** How far the needle turns to point north, as an angle. The frame writes it from `bearing`. */
   "--map-needle-turn"?: (string) | undefined;
   /** The color of the casing under the route. */
@@ -18910,6 +19281,8 @@ export type CustomCssProperties = {
   "--notifications-unread-offset"?: (string) | undefined;
   /** Corner radius of the unread mark, which can turn it into a dot. */
   "--notifications-unread-radius"?: (string) | undefined;
+  /** The color of the `error` line. */
+  "--notifications-error-color"?: (string) | undefined;
   /** How tall the feed may get before the list scrolls. */
   "--notifications-max-block-size"?: (string) | undefined;
   /** Width of the media column that every item keeps when any item in the feed has media. */
@@ -19000,14 +19373,46 @@ export type CustomCssProperties = {
   "--outline-rail"?: (string) | undefined;
   /** The color of the line down the leading edge. */
   "--outline-rule-color"?: (string) | undefined;
+  /** Edge of the page you are on. */
+  "--pagination-current-border-color"?: (string) | undefined;
   /** Fill behind the page you are on. */
   "--pagination-current-color"?: (string) | undefined;
+  /** Weight of the number of the page you are on. */
+  "--pagination-current-font-weight"?: (string) | undefined;
+  /** Color of the number of the page you are on. */
+  "--pagination-current-foreground-color"?: (string) | undefined;
+  /** Color of a first, previous, next or last control with nowhere to go. */
+  "--pagination-disabled-foreground-color"?: (string) | undefined;
+  /** How faint a control with nowhere to go is drawn. */
+  "--pagination-disabled-opacity"?: (string) | undefined;
+  /** Color of the control that stands in for hidden pages. */
+  "--pagination-ellipsis-foreground-color"?: (string) | undefined;
+  /** Size of the numbers and the status text. */
+  "--pagination-font-size"?: (string) | undefined;
+  /** Weight of the numbers and the status text. */
+  "--pagination-font-weight"?: (string) | undefined;
+  /** Color of the numbers and the marks on every control. */
+  "--pagination-foreground-color"?: (string) | undefined;
   /** Space between one control and the next. */
   "--pagination-gap"?: (string) | undefined;
   /** Fill behind a control under the pointer. */
   "--pagination-hover-color"?: (string) | undefined;
+  /** Color of a control's number or mark under the pointer. */
+  "--pagination-hover-foreground-color"?: (string) | undefined;
+  /** Size of the mark on a first, previous, next or last control, drawn or slotted. */
+  "--pagination-icon-size"?: (string) | undefined;
+  /** Space either side of a control's number or mark. */
+  "--pagination-padding"?: (string) | undefined;
+  /** Corner radius of every control in the row. */
+  "--pagination-radius"?: (string) | undefined;
   /** The box every control in the row takes. */
   "--pagination-size"?: (string) | undefined;
+  /** Color of the text that says which page you are on, in `compact`. */
+  "--pagination-status-foreground-color"?: (string) | undefined;
+  /** Space between the label and the select. */
+  "--pagination-size-gap"?: (string) | undefined;
+  /** Color of the text. */
+  "--pagination-summary-foreground-color"?: (string) | undefined;
   /** The color of the caret drawn in an empty box. Without it, the character color applies. */
   "--pin-input-caret-color"?: (string) | undefined;
   /** Fill behind each box. */
@@ -19076,12 +19481,18 @@ export type CustomCssProperties = {
   "--qr-code-background-color"?: (string) | undefined;
   /** Color of the dark modules. Defaults to the dark media ink, which is the same in both color schemes so the code scans. */
   "--qr-code-color"?: (string) | undefined;
+  /** The space around the fallback inside the square. */
+  "--qr-code-fallback-padding"?: (string) | undefined;
   /** Color of the three corner squares. Defaults to the color of the modules. */
   "--qr-code-finder-color"?: (string) | undefined;
   /** The clear space around the center logo. */
   "--qr-code-logo-padding"?: (string) | undefined;
+  /** The corner radius of the logo's box. */
+  "--qr-code-logo-radius"?: (string) | undefined;
   /** How much of the center a logo can cover. Defaults to `27%`, which `H` correction allows, because it can lose thirty percent. */
   "--qr-code-logo-size"?: (string) | undefined;
+  /** The corner radius of the square. */
+  "--qr-code-radius"?: (string) | undefined;
   /** How wide the square is. Defaults to `12rem`. */
   "--qr-code-size"?: (string) | undefined;
   /** Color of the quoted text. */
@@ -19326,6 +19737,10 @@ export type CustomCssProperties = {
   "--sparkline-readout-font-size"?: (string) | undefined;
   /** Thickness of the line, overriding `weight`. */
   "--sparkline-width"?: (string) | undefined;
+  /** Color of the group's name. */
+  "--speed-dial-group-label-color"?: (string) | undefined;
+  /** Size of the group's name. */
+  "--speed-dial-group-label-font-size"?: (string) | undefined;
   /** Fill of the round icon. */
   "--speed-dial-item-background-color"?: (string) | undefined;
   /** Color of the icon. */
@@ -19342,6 +19757,8 @@ export type CustomCssProperties = {
   "--speed-dial-label-color"?: (string) | undefined;
   /** Size of the action's name. */
   "--speed-dial-label-font-size"?: (string) | undefined;
+  /** Color of the shortcut drawn after the action's name. */
+  "--speed-dial-shortcut-color"?: (string) | undefined;
   /** Fill of the trigger the dial draws when none is slotted. */
   "--speed-dial-background-color"?: (string) | undefined;
   /** Color of that trigger's icon. */
@@ -19366,10 +19783,18 @@ export type CustomCssProperties = {
   "--splitter-grip-color"?: (string) | undefined;
   /** How far the grip runs along the divider. */
   "--splitter-grip-length"?: (string) | undefined;
+  /** How thick the grip is, across the divider. */
+  "--splitter-grip-thickness"?: (string) | undefined;
+  /** Color of a mark slotted into `handle`. */
+  "--splitter-handle-color"?: (string) | undefined;
   /** Color of the divider's target under the pointer. */
   "--splitter-hover-color"?: (string) | undefined;
+  /** How thick the line is under the pointer, with focus and while it moves. */
+  "--splitter-hover-thickness"?: (string) | undefined;
   /** Width of the area you can drag. */
   "--splitter-target"?: (string) | undefined;
+  /** How thick the line is at rest. */
+  "--splitter-thickness"?: (string) | undefined;
   /** Where a nested splitter crosses this one, as a percentage. */
   "--splitter-corner-at"?: (string) | undefined;
   /** Where the divider sits, as a percentage of the box. */
@@ -19524,18 +19949,30 @@ export type CustomCssProperties = {
   "--time-input-segment-placeholder-color"?: (string) | undefined;
   /** Shadow under the panel. Defaults to `--helix-shadow-floating`, because the panel can sit over any content. */
   "--time-input-shadow"?: (string) | undefined;
+  /** The space between the wheels. None by default. */
+  "--time-picker-columns-gap"?: (string) | undefined;
   /** The color of the message under the times, while `feedback` is set. */
   "--time-picker-feedback-color"?: (string) | undefined;
+  /** Fill on a wheel's row under the pointer or the keyboard. */
+  "--time-picker-hover-background-color"?: (string) | undefined;
+  /** The ring around the chosen time, or around the times while nothing is chosen, while the picker is invalid. */
+  "--time-picker-invalid-color"?: (string) | undefined;
   /** How tall the list is before it scrolls. */
   "--time-picker-list-block-size"?: (string) | undefined;
+  /** The corners of the mark on a wheel's row. */
+  "--time-picker-mark-radius"?: (string) | undefined;
   /** Fill behind the times inside a range. */
   "--time-picker-range-color"?: (string) | undefined;
   /** Height and minimum width of one row in a wheel. */
   "--time-picker-row-size"?: (string) | undefined;
   /** Fill on the chosen row of a wheel. */
   "--time-picker-selected-color"?: (string) | undefined;
+  /** Ink on the chosen row of a wheel. */
+  "--time-picker-selected-foreground-color"?: (string) | undefined;
   /** How tall a wheel is. Five rows by default. */
   "--time-picker-wheel-block-size"?: (string) | undefined;
+  /** The mask that fades a wheel toward its ends, as a `mask-image`. Set `none` for no fade. */
+  "--time-picker-wheel-mask"?: (string) | undefined;
   /** The color of the heading. */
   "--timeline-group-heading-color"?: (string) | undefined;
   /** How round the mark is. Zero is a square, and half its size is a disc. */
@@ -19546,14 +19983,32 @@ export type CustomCssProperties = {
   "--timeline-rail-size"?: (string) | undefined;
   /** Space between one entry and the next. */
   "--timeline-gap"?: (string) | undefined;
+  /** The panel's color. Follows `--helix-color-surface-overlay`. */
+  "--toast-background-color"?: (string) | undefined;
   /** Color of the panel's edge. */
   "--toast-border-color"?: (string) | undefined;
   /** Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your theme sets a border. */
   "--toast-border-width"?: (string) | undefined;
+  /** Color of the message's text. */
+  "--toast-color"?: (string) | undefined;
+  /** Color of the line in the `description` slot, under the heading. */
+  "--toast-description-color"?: (string) | undefined;
+  /** Color of the dismiss control's mark at rest. */
+  "--toast-dismiss-color"?: (string) | undefined;
+  /** Size of the message's text. The first line's controls and mark stay centered on it. */
+  "--toast-font-size"?: (string) | undefined;
+  /** Weight of the heading in the `heading` slot. */
+  "--toast-heading-weight"?: (string) | undefined;
   /** Space between the message's edge and its contents. */
   "--toast-item-padding"?: (string) | undefined;
+  /** Rounding of the panel's corners. */
+  "--toast-radius"?: (string) | undefined;
   /** Shadow under the panel. Follows `--helix-shadow-floating`. A floating surface can sit over any content, so it has a shadow by default. */
   "--toast-shadow"?: (string) | undefined;
+  /** Thickness of the bar that counts down a timed message. */
+  "--toast-timer-size"?: (string) | undefined;
+  /** Color of the mark and the countdown bar. Unset, each `tone` takes its own color, so set it per tone, as in `helix-toast-item[tone="danger"]`. */
+  "--toast-tone-color"?: (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. */
@@ -19832,7 +20287,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixBarChartVueProps,
     HelixBarChartVueEvents
   >;
-  /** Set in the display face, larger than body text, to mark a change of voice. No quotation marks are drawn, because the size and spacing already set the passage apart. */
+  /** Set in the display face, larger than body text, to mark a change of voice. No quotation marks are drawn by default, because the size and spacing already set the passage apart. 'marks' draws one large opening mark over the passage, as a pull quote sets it, in the element's language. */
   "helix-blockquote": DefineCustomElement<
     HelixBlockquote,
     HelixBlockquoteVueProps,
@@ -19850,7 +20305,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixBreadcrumbsVueProps,
     HelixBreadcrumbsVueEvents
   >;
-  /** Joins the buttons into one shape: the outer corners keep their radius, the inner corners lose it, and adjacent borders collapse into one line.  The joining rule is in the base layer, paired with 'data-button' like the button's own box, because the corner is on the control inside each button's shadow root, where this component's styles cannot reach. The same rule works for your own anchor styled as a button.  The buttons take their height from the region, so set 'data-density' on the group to make every button in it smaller or larger together. */
+  /** Joins the buttons into one shape: the outer corners keep their radius, the inner corners lose it, and adjacent borders collapse into one line.  A Helix button's corners are on the control inside its shadow root, where this component's styles cannot reach, so the group flattens them through the button's own '--button-radius-*' hooks. A native '<button>' and your own anchor styled with 'data-button' join through rules in the base layer, because a page rule setting their radius would beat any rule in here.  The buttons take their height from the region, so 'size' makes every button in the group smaller or larger together, as 'data-density' on the group does, and a button's own size still wins. A native '<button>' in a sized group takes the height and the text size.  With 'selection-mode', a pressed button takes the solid fill: '--button-group-pressed-background-color' behind it and '--button-group-pressed-color' for its words, set on the group or above it. */
   "helix-button-group": DefineCustomElement<
     HelixButtonGroup,
     HelixButtonGroupVueProps,
@@ -19874,7 +20329,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixCanvasEdgeVueProps,
     HelixCanvasEdgeVueEvents
   >;
-  /** The card is the host element, because the board writes the card's coordinates onto the host.  Before the board places it, the card sits in normal flow. Without JavaScript, the page shows the cards' text in the order it was written. */
+  /** The card is the host element, because the board writes the card's coordinates onto the host.  Before the board places it, the card sits in normal flow. Without JavaScript, the page shows the cards' text in the order it was written.  On a touch screen, the points and corners of the card with focus take a reach 44 pixels across, so a finger can start a connection from one. */
   "helix-canvas-node": DefineCustomElement<
     HelixCanvasNode,
     HelixCanvasNodeVueProps,
@@ -19994,7 +20449,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixDescriptionListItemVueProps,
     HelixDescriptionListItemVueEvents
   >;
-  /** Labels are muted and values use the style of the surrounding text, so the values stand out and the labels help you find them. With 'direction="row"', the labels share one column as wide as the longest label, and the values start on one line beside it.  **Below about 22rem of its own width, the row layout stacks** each label above its value. The width is measured on the list, because a details panel can be a sidebar on a wide screen or the whole of a narrow one. Below that width the label column leaves too little room for the values.  **For a summary, set 'width="auto"' and 'justify="between"'.** The list is as wide as its widest pair, labels sit on the start edge, and values sit on the end edge in tabular figures, as in a set of totals. */
+  /** Labels are muted and values use the style of the surrounding text, so the values stand out and the labels help you find them. With 'direction="row"', the labels share one column as wide as the longest label, and the values start on one line beside it.  **Below about 22rem of its own width, the row layout stacks** each label above its value. The width is measured on the list, because a details panel can be a sidebar on a wide screen or the whole of a narrow one. Below that width the label column leaves too little room for the values.  **For a summary, set 'width="auto"' and 'justify="between"'.** The list is as wide as its widest pair, labels sit on the start edge, and values sit on the end edge in tabular figures, as in a set of totals.  **For a rule between pairs, set 'divided'.** The rule sits in the middle of the gap, so the pairs keep the same room on either side of it. */
   "helix-description-list": DefineCustomElement<
     HelixDescriptionList,
     HelixDescriptionListVueProps,
@@ -20492,6 +20947,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixSparklineVueProps,
     HelixSparklineVueEvents
   >;
+  /** A column of actions with its name above them, in the small muted words a menu heads its sections with, lined up on the side the trigger is on. The space between two groups is the space between two actions. */
+  "helix-speed-dial-group": DefineCustomElement<
+    HelixSpeedDialGroup,
+    HelixSpeedDialGroupVueProps,
+    HelixSpeedDialGroupVueEvents
+  >;
   /** Presentation only: a round mark the size of a small control, with the name on a chip beside it so it stays readable over whatever the dial floats over. The base class handles its behavior. */
   "helix-speed-dial-item": DefineCustomElement<
     HelixSpeedDialItem,
@@ -20659,7 +21120,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixToggleVueProps,
     HelixToggleVueEvents
   >;
-  /** The toolbar draws no frame of its own, so it does not add a second frame inside whatever already frames the bar. */
+  /** The toolbar draws no frame of its own, so it does not add a second frame inside whatever already frames the bar.  Its controls are the small size, since a toolbar is dense by nature, and a control added later takes it without being told. 'size="md"' or '"lg"' makes every control in it larger together. */
   "helix-toolbar": DefineCustomElement<
     HelixToolbar,
     HelixToolbarVueProps,