@fusion.dev/helix 0.146.0 → 0.148.0

package/types/vue.d.ts

@@ -92,6 +92,7 @@ import type {
   HelixObjectInspector,
   HelixOptionGroup,
   HelixOption,
+  HelixOptionSeparator,
   HelixOrb,
   HelixOutline,
   HelixPagination,
@@ -118,6 +119,7 @@ import type {
   HelixSkipLink,
   HelixSlider,
   HelixSparkline,
+  HelixSpeedDialGroup,
   HelixSpeedDialItem,
   HelixSpeedDial,
   HelixSplitter,
@@ -164,6 +166,7 @@ import type {
   HelixDismissEvent,
   HelixScrolledEvent,
   HelixAuraFallbackEvent,
+  HelixBeforeChangeEvent,
   HelixPressEvent,
   HelixBeforeMoveEvent,
   HelixBeforeReconnectEvent,
@@ -184,7 +187,6 @@ import type {
   HelixBeforePinEvent,
   HelixHistoryEvent,
   HelixPinEvent,
-  HelixBeforeChangeEvent,
   HelixBeforeToggleEvent,
   HelixCopyEvent,
   HelixSampleEndEvent,
@@ -223,6 +225,7 @@ import type {
   HelixMapTiltEvent,
   HelixMapZoomEvent,
   HelixToggleEvent,
+  HelixBandEvent,
   HelixReadEvent,
   HelixCompleteEvent,
   HelixPreviewEvent,
@@ -352,18 +355,16 @@ too. */
   /** Whether find in page searches the section while it is closed, and opens it
 on a match.
 
-Off by default. A closed section is then `hidden="until-found"`, which
-hides through `content-visibility`, so a stylesheet that animates the
-section closed shows an empty box for the length of that animation. The
-accordion's own `hidden-until-found` turns it on for every section. */
+Unset takes the accordion's `hidden-until-found`, which is on. Write
+`hidden-until-found="false"` to keep find in page out of this section: a
+closed section is then `hidden` and `inert`. */
   "hidden-until-found"?: (HelixAccordionItem["hiddenUntilFound"]) | undefined;
   /** Whether find in page searches the section while it is closed, and opens it
 on a match.
 
-Off by default. A closed section is then `hidden="until-found"`, which
-hides through `content-visibility`, so a stylesheet that animates the
-section closed shows an empty box for the length of that animation. The
-accordion's own `hidden-until-found` turns it on for every section. */
+Unset takes the accordion's `hidden-until-found`, which is on. Write
+`hidden-until-found="false"` to keep find in page out of this section: a
+closed section is then `hidden` and `inert`. */
   hiddenUntilFound?: (HelixAccordionItem["hiddenUntilFound"]) | undefined;
   /** A group name. Opening an item closes the other items with the same name,
 as `<details name>` does.
@@ -426,12 +427,18 @@ Unset is 3. An item's own `heading-level` wins over this. */
 Unset is 3. An item's own `heading-level` wins over this. */
   headingLevel?: (HelixAccordion["headingLevel"]) | undefined;
   /** Whether find in page searches every closed section, and opens the one it
-matches in. Each item's own `hidden-until-found` turns it on for that item
-alone. */
+matches in.
+
+On by default, as in React Aria's disclosure. Write
+`hidden-until-found="false"` to turn it off for every section; an item's
+own `hidden-until-found` wins for that item. */
   "hidden-until-found"?: (HelixAccordion["hiddenUntilFound"]) | undefined;
   /** Whether find in page searches every closed section, and opens the one it
-matches in. Each item's own `hidden-until-found` turns it on for that item
-alone. */
+matches in.
+
+On by default, as in React Aria's disclosure. Write
+`hidden-until-found="false"` to turn it off for every section; an item's
+own `hidden-until-found` wins for that item. */
   hiddenUntilFound?: (HelixAccordion["hiddenUntilFound"]) | undefined;
   /** How many sections may be open at once.
 
@@ -498,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,
@@ -687,6 +710,13 @@ The same three values `LineChart` takes, with the same fallback: a bare
 rather than under them, because the bands are opaque and a rule under one is
 a rule nobody sees. */
   gridlines?: (HelixAreaChart["gridlines"]) | undefined;
+  /** Draws every band from zero, in front of the next, so a band's height is
+its own part's amount and not its place in a stack.
+
+Absent stacks the parts, so the top edge is the total. Set, the first
+column is in front and the scale fits the largest part. Reflected, because
+the styled tier lets the bands behind show through the ones in front. */
+  overlap?: (HelixAreaChart["overlap"]) | undefined;
   /** Draws each reading as a hundred percent, so each band shows its share of
 the total.
 
@@ -887,6 +917,19 @@ replaces them when it arrives, so a slow connection shows who it is
 without a cached picture flashing initials first. Radix's `delayMs` is the
 same idea. */
   fallbackDelay?: (HelixAvatar["fallbackDelay"]) | undefined;
+  /** The letters shown where no picture loaded, such as `GH`, in place of the
+ones taken from `name`.
+
+For a name whose initials are not its first and last letters, or an
+entity with a short mark of its own. Absent, the first letters of the
+first and last words of `name` are shown. */
+  initials?: (HelixAvatar["initials"]) | undefined;
+  /** When the browser fetches the picture: `lazy` waits until it is near the
+screen, as an `<img loading="lazy">` does, and `eager` fetches it at once.
+
+Absent is the browser's own default, which is `eager`. `lazy` suits a long
+list of people, most of them off screen. */
+  loading?: (HelixAvatar["loading"]) | undefined;
   /** Name of the person or entity.
 
 Used for the label and the initials. */
@@ -950,12 +993,28 @@ color.
 `Announcement` gives for its own neutral: a generated page should be able to
 say what it means rather than express it by leaving an attribute off. */
   tone?: (HelixBadge["tone"]) | undefined;
+  /** `Intl.NumberFormat` options a count is written with, such as
+`{"notation":"compact"}` for `1.2K`, written as JSON in the attribute.
+
+Absent, a count is shown as it was given. Text that is not a number is
+shown as it is either way. */
+  "format-options"?: (HelixBadge["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options a count is written with, such as
+`{"notation":"compact"}` for `1.2K`, written as JSON in the attribute.
+
+Absent, a count is shown as it was given. Text that is not a number is
+shown as it is either way. */
+  formatOptions?: (HelixBadge["formatOptions"]) | undefined;
   /** The badge's name, read by screen readers.
 
 Required for a dot, which has no text to read. `{count}` is replaced with
 what the badge shows, so `label="{count} unread"` reads "8 unread" and
 stays current as `value` changes, with no label of yours to keep in step. */
   label?: (HelixBadge["label"]) | undefined;
+  /** The locale a count is written in under `format-options`, such as `de`.
+
+Absent uses the runtime's own. */
+  locale?: (HelixBadge["locale"]) | undefined;
   /** The largest number the badge shows.
 
 Past it the indicator reads `{max}+`. */
@@ -1224,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 = {};
@@ -1262,6 +1332,17 @@ The consumer's decision. */
 export type HelixBreadcrumbVueEvents = {};
 
 export type HelixBreadcrumbsVueProps = {
+  /** How the two halves of a split crumb are told apart. A split crumb is one
+with a control in its `end` slot, such as a switcher's menu trigger.
+
+- `plain` is the default. The halves are text at rest, like every other
+  crumb. While one half is under the pointer, both halves take a light fill
+  and that half takes the full hover fill.
+- `outlined` draws a hairline between the halves, at rest and under the
+  pointer, the way an outlined surface keeps its edge at rest.
+
+The other crumbs look the same under either value. */
+  separation?: (HelixBreadcrumbs["separation"]) | undefined;
   /** The name of the button that shows a folded trail's hidden crumbs. `{count}`
 is replaced by how many it shows. Translate it with the page. */
   "expand-label"?: (HelixBreadcrumbs["expandLabel"]) | undefined;
@@ -1289,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
@@ -1323,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>;
@@ -1403,33 +1520,23 @@ is the platform's `commandfor`. */
   commandFor?: (HelixButton["commandFor"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
-**The five `form*` overrides work by writing the form and putting it back**,
-which is the only mechanism available and is closer to the platform than it
-sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-and it refuses ours twice over: the inner `<button>` is `type="button"` so
-it is not a submit button, and it sits in this shadow root so its form owner
-is not the consumer's form. Both throw. So the submission is started with no
-submitter and the overrides are applied to the form for the duration of it.
-
-The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-the window is one call and a `finally` closes it whether or not a listener
-refused. What a `submit` handler observes during that window is the form a
-native submitter would have given it, which is the point. */
+**The five `form*` overrides ride on a native submit button that stands in
+for this one**, because `requestSubmit(submitter)` refuses the inner
+`<button>` twice over: it is `type="button"`, and it sits in this shadow
+root, so its form owner is not the consumer's form. The stand-in is a
+hidden `<button type="submit">` in the form for the one synchronous call,
+so the platform applies the overrides to that submission alone and leaves
+the form as it was. See `submitAs`. */
   formaction?: (HelixButton["formAction"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
-**The five `form*` overrides work by writing the form and putting it back**,
-which is the only mechanism available and is closer to the platform than it
-sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-and it refuses ours twice over: the inner `<button>` is `type="button"` so
-it is not a submit button, and it sits in this shadow root so its form owner
-is not the consumer's form. Both throw. So the submission is started with no
-submitter and the overrides are applied to the form for the duration of it.
-
-The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-the window is one call and a `finally` closes it whether or not a listener
-refused. What a `submit` handler observes during that window is the form a
-native submitter would have given it, which is the point. */
+**The five `form*` overrides ride on a native submit button that stands in
+for this one**, because `requestSubmit(submitter)` refuses the inner
+`<button>` twice over: it is `type="button"`, and it sits in this shadow
+root, so its form owner is not the consumer's form. The stand-in is a
+hidden `<button type="submit">` in the form for the one synchronous call,
+so the platform applies the overrides to that submission alone and leaves
+the form as it was. See `submitAs`. */
   formAction?: (HelixButton["formAction"]) | undefined;
   /** How the submission is encoded, overriding the form's own. */
   formenctype?: (HelixButton["formEnctype"]) | undefined;
@@ -1475,13 +1582,10 @@ a press, so focus stays where the reader left it. */
   /** The value this button submits under its own `name`, as a native submit
 button does.
 
-**Reported for exactly the submission this button starts and not otherwise.**
+**Sent with exactly the submission this button starts and not otherwise.**
 A native submit button contributes `name=value` only when it is the one
-that submitted, and every other button on the form contributes nothing. A
-form-associated element reporting a value continuously would contribute on
-every submission whoever started it, which is a different feature wearing
-the same name, so `submit` below sets it, submits, and clears it inside one
-synchronous call.
+that submitted, and every other button on the form contributes nothing,
+which is what the native button standing in for this one at submit does.
 
 `CopyButton` has a `value` of its own meaning the text to put on the
 clipboard, which is not this and is why it is declared there rather than
@@ -2075,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`.
 
@@ -2115,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.
 
@@ -2135,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. */
@@ -2157,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.
 
@@ -2953,6 +3122,22 @@ say that without the component knowing what a row looks like. */
   "loading-text"?: (HelixChat["loadingText"]) | undefined;
   /** The text shown and announced while the rows load. */
   loadingText?: (HelixChat["loadingText"]) | undefined;
+  /** Declarations for the turns from `turns` by each author, keyed by `author`,
+as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
+
+The message drawn for each turn by that author takes them as its `style`,
+so the custom properties a message reads, its fill, text color, radius and
+padding, change for that author alone. A turn by an author with no entry
+takes none, and looks as it did. JSON that does not parse is no entries. */
+  "author-styles"?: (HelixChat["authorStyles"]) | undefined;
+  /** Declarations for the turns from `turns` by each author, keyed by `author`,
+as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
+
+The message drawn for each turn by that author takes them as its `style`,
+so the custom properties a message reads, its fill, text color, radius and
+padding, change for that author alone. A turn by an author with no entry
+takes none, and looks as it did. JSON that does not parse is no entries. */
+  authorStyles?: (HelixChat["authorStyles"]) | undefined;
   /** Whether the transcript opens pinned to the bottom, when `pinned` is not
 set.
 
@@ -3348,11 +3533,19 @@ 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.
+
+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.
 
 The numbers are hidden from the accessibility tree and are not part of a
@@ -3416,15 +3609,24 @@ than defaulted, so the host carries no attribute the consumer did not write. */
   /** Turns the code into highlighted markup, which the block draws in place of
 the plain text.
 
-Called with the code as written and returning HTML, such as the output of
-Shiki's `codeToHtml` or Prism's `highlight`. **The markup is drawn as
-given**, so it has to escape the code it was handed, which those
-highlighters do. A `<pre>` and `<code>` around the whole of it, which
-Shiki writes, are taken off, so the lines sit level with the gutter's
-numbers and the block keeps one tab stop. Bind the language in the function you pass. The code
-stays in the slot, so the copy button copies it as written and a reader
-without the script still has it. Not called on a server, which has no code
-to read, nor for a diff. */
+Called with the code as written and the block's `language`, and returning
+HTML, such as the output of Shiki's `codeToHtml` or Prism's `highlight`.
+One function serves every block on a page, each block saying its own
+language:
+
+```js
+for (const block of document.querySelectorAll('helix-code-block')) {
+  block.highlight = (code, lang) => codeToHtml(code, { lang, theme: 'github-light' })
+}
+```
+
+**The markup is drawn as given**, so it has to escape the code it was
+handed, which those highlighters do. A `<pre>` and `<code>` around the
+whole of it, which Shiki writes, are taken off, so the lines sit level
+with the gutter's numbers and the block keeps one tab stop. The code stays
+in the slot, so the copy button copies it as written and a reader without
+the script still has it. Not called on a server, which has no code to
+read, nor for a diff. */
   highlight?: (HelixCodeBlock["highlight"]) | undefined;
 };
 
@@ -3608,6 +3810,9 @@ The trade is real and is the reason this is not the default: a swatch cannot
 be read or pasted into without opening the panel, which is worse for a form
 where the color is the answer rather than a setting. */
   variant?: (HelixColorInput["variant"]) | undefined;
+  /** Draws the panel's hue as a wheel around the square, in place of the hue
+ramp. See Color Picker's `wheel`. */
+  wheel?: (HelixColorInput["wheel"]) | undefined;
   /** Whether the control is disabled and cannot be used.
 
 Reflected, because the styled tier selects on it, and mirrored to
@@ -3670,6 +3875,19 @@ export type HelixColorPickerHelixSampleStartElementEvent =
   HelixColorPickerElementEvent<HelixSampleStartEvent>;
 
 export type HelixColorPickerVueProps = {
+  /** A message under the picker, such as what is wrong with the answer.
+
+While set, the picker is invalid and does not submit, as a field's
+`feedback` is, it is marked invalid to a reader and to CSS, and the
+controls a reader answers with are described by it. */
+  feedback?: (HelixColorPicker["feedback"]) | undefined;
+  /** Whether the answer fails validation, marked on the controls a reader
+answers with and as `:state(invalid)`.
+
+A flag a field that wraps the picker sets, since that field owns the
+label, the hint and the message; on its own, `feedback` both marks the
+picker and says why. */
+  invalid?: (HelixColorPicker["invalid"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value,
 and to the `value` attribute where this one is not written, as a native
 control resets to the `value` it declares. */
@@ -3773,13 +3991,6 @@ the color. */
   "eyedropper-label"?: (HelixColorPicker["eyedropperLabel"]) | undefined;
   /** What the eyedropper is called. */
   eyedropperLabel?: (HelixColorPicker["eyedropperLabel"]) | undefined;
-  /** A message under the picker, such as what is wrong with the color.
-
-While set, the picker is invalid and does not submit, as a field's
-`feedback` is, and the square and the value text are described by it.
-Color Input shows its own message here, so a reader in the open panel
-still sees it. */
-  feedback?: (HelixColorPicker["feedback"]) | undefined;
   /** The syntax the value is written in: `hex`, `rgb`, or `hsl`.
 
 Only what is written. Everything is read whatever this says, so a picker on
@@ -3797,14 +4008,6 @@ Only what is written. Everything is read whatever this says, so a picker on
   "hue-label"?: (HelixColorPicker["hueLabel"]) | undefined;
   /** What the hue channel is called. */
   hueLabel?: (HelixColorPicker["hueLabel"]) | undefined;
-  /** Whether the current selection fails validation.
-
-A flag rather than a message, the split Date Picker also draws. A flat
-picker has no room of its own for a sentence: the field that wraps one owns
-the label, the hint and the feedback, and a second message inside the panel
-would be the same error said twice. What is left for the picker is the one
-thing the field cannot draw from outside, the mark on the answer itself. */
-  invalid?: (HelixColorPicker["invalid"]) | undefined;
   /** What the lightness channel's field is called, in `channel-fields` with
 hsl. */
   "lightness-label"?: (HelixColorPicker["lightnessLabel"]) | undefined;
@@ -3958,6 +4161,14 @@ speaks it. Absent is the control's own sentence, in English. */
 named for the validity flag it reports, so a form in another language
 speaks it. Absent is the control's own sentence, in English. */
   valueMissingMessage?: (HelixColorPicker["valueMissingMessage"]) | undefined;
+  /** Draws the hue as a wheel around the square, in place of the hue ramp, as
+React Aria's ColorWheel sits round its ColorArea.
+
+The ring is one stop, a slider a reader turns with the arrow keys, Home
+and End, the same way round in either writing direction, and a press or a
+drag on it takes the hue in that direction. Off, the picker keeps its
+ramp. */
+  wheel?: (HelixColorPicker["wheel"]) | undefined;
   /** Whether the control is disabled and cannot be used.
 
 Reflected, because the styled tier selects on it, and mirrored to
@@ -4122,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.
 
@@ -4166,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.
 
@@ -4254,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
@@ -4368,7 +4594,9 @@ so a palette filtered on a server sends one `helix-filter` for a word.
 so a palette filtered on a server sends one `helix-filter` for a word.
 `0` filters on every keystroke. See Listbox's `filter-delay`. */
   filterDelay?: (HelixCommand["filterDelay"]) | undefined;
-  /** The key that opens the palette, written as `mod+k`, `shift+p`, or `k`.
+  /** The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
+in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
+`alt` and `shift` the keys they name.
 
 Empty turns it off, for a consumer who opens the palette from a button or
 from their own shortcut handler. There is no list of defaults to fight
@@ -4377,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.
@@ -5181,7 +5411,11 @@ Saturday.
 Absent follows `locale`, where the engine knows the week of that language,
 and is Sunday otherwise. */
   firstDayOfWeek?: (HelixDateInput["firstDayOfWeek"]) | undefined;
-  /** The language tag for the names of months and days in the calendar. */
+  /** The language tag for the field's order and words, and for the names of
+months and days in the calendar.
+
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixDateInput["locale"]) | undefined;
   /** The latest date that can be chosen, as `YYYY-MM-DD`. */
   max?: (HelixDateInput["max"]) | undefined;
@@ -5377,6 +5611,19 @@ export type HelixDatePickerHelixNavigateElementEvent =
   HelixDatePickerElementEvent<HelixNavigateEvent>;
 
 export type HelixDatePickerVueProps = {
+  /** A message under the picker, such as what is wrong with the answer.
+
+While set, the picker is invalid and does not submit, as a field's
+`feedback` is, it is marked invalid to a reader and to CSS, and the
+controls a reader answers with are described by it. */
+  feedback?: (HelixDatePicker["feedback"]) | undefined;
+  /** Whether the answer fails validation, marked on the controls a reader
+answers with and as `:state(invalid)`.
+
+A flag a field that wraps the picker sets, since that field owns the
+label, the hint and the message; on its own, `feedback` both marks the
+picker and says why. */
+  invalid?: (HelixDatePicker["invalid"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value,
 and to the `value` attribute where this one is not written, as a native
 control resets to the `value` it declares. */
@@ -5430,13 +5677,12 @@ Absent follows `locale`, where the engine knows the week of that language
 Absent follows `locale`, where the engine knows the week of that language
 (Firefox does not), and is Sunday otherwise. */
   firstDayOfWeek?: (HelixDatePicker["firstDayOfWeek"]) | undefined;
-  /** Whether the current selection fails validation. */
-  invalid?: (HelixDatePicker["invalid"]) | undefined;
   /** Accessible name for the grid. */
   label?: (HelixDatePicker["label"]) | undefined;
-  /** Locale for month and day names.
+  /** Locale for month and day names, and the day a week starts on.
 
-Absent uses the runtime's own. */
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixDatePicker["locale"]) | undefined;
   /** Latest selectable date, as `YYYY-MM-DD`. */
   max?: (HelixDatePicker["max"]) | undefined;
@@ -5664,11 +5910,19 @@ The fallback of the `label` slot, so slotted content replaces it rather than
 appearing beside it. The value itself is the default slot: it is the half
 that varies and is often more than text. */
   label?: (HelixDescriptionListItem["label"]) | undefined;
+  /** Says the values are several `<dd>` elements of your own, so the item
+draws no `<dd>` of its own around them, on the server too. Without it the
+item finds them once it runs, and the served markup wraps them until then. */
+  several?: (HelixDescriptionListItem["several"]) | undefined;
 };
 
 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
@@ -5895,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;
 };
 
@@ -6282,6 +6539,21 @@ export type HelixDrilldownVueEvents = {
 };
 
 export type HelixEmptyVueProps = {
+  /** The heading as words, such as "No results", drawn as a heading when
+nothing is slotted into `heading`.
+
+Absent draws none, and the `heading` slot is the only heading. */
+  heading?: (HelixEmpty["heading"]) | undefined;
+  /** The level of the heading `heading` draws, from 1 to 6.
+
+Absent is 3, the level of a heading inside a page's section. Set it to fit
+the outline the empty view sits in. A slotted heading keeps its own. */
+  "heading-level"?: (HelixEmpty["headingLevel"] | `${number}`) | undefined;
+  /** The level of the heading `heading` draws, from 1 to 6.
+
+Absent is 3, the level of a heading inside a page's section. Set it to fit
+the outline the empty view sits in. A slotted heading keeps its own. */
+  headingLevel?: (HelixEmpty["headingLevel"]) | undefined;
   /** Whether the state is announced when it appears.
 
 On by default: an empty view almost always replaces something that was
@@ -6373,6 +6645,12 @@ refused. */
   maxFileSize?: (HelixFileInput["maxFileSize"]) | undefined;
   /** Whether more than one file can be chosen. */
   multiple?: (HelixFileInput["multiple"]) | undefined;
+  /** The name of a file's progress bar, read by screen readers, with `{name}`
+filled in. A label with no `{name}` has it added after it. */
+  "progress-label"?: (HelixFileInput["progressLabel"]) | undefined;
+  /** The name of a file's progress bar, read by screen readers, with `{name}`
+filled in. A label with no `{name}` has it added after it. */
+  progressLabel?: (HelixFileInput["progressLabel"]) | undefined;
   /** What a reader hears when files are refused, with `{count}` and `{names}`
 filled in. */
   "rejected-text"?: (HelixFileInput["rejectedText"]) | undefined;
@@ -6940,6 +7218,25 @@ 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.
+
+For a reading that describes a moment the page itself is about, such as
+"3 hours ago" in a report generated then, or a list a reader compares
+line by line while it should not change under them. The reading is taken
+when the element draws, and again whenever `date` or another option
+changes. Turned off, the reading catches up and moves on again.
+`sl-relative-time` and `wa-relative-time` keep still unless `sync` is
+set; this keeps moving unless `frozen` is. */
+  frozen?: (HelixFormatDate["frozen"]) | undefined;
   /** How the hour is written, where a time of day is shown. */
   hour?: (HelixFormatDate["hour"]) | undefined;
   /** The clock a time of day is written on: `h12` or `h11` for twelve hours,
@@ -6956,7 +7253,8 @@ reader the same clock whatever their language. */
   hourCycle?: (HelixFormatDate["hourCycle"]) | undefined;
   /** The locale to format the timestamp in.
 
-Empty is the runtime's own. */
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixFormatDate["locale"]) | undefined;
   /** How the minute is written, where a time of day is shown. */
   minute?: (HelixFormatDate["minute"]) | undefined;
@@ -7389,6 +7687,9 @@ export type HelixGridVueEvents = {};
 
 /** `HelixHeatmap` component event */
 export type HelixHeatmapElementEvent<E = Event> = TypedEvent<HelixHeatmap, E>;
+/** `helix-before-change` event type */
+export type HelixHeatmapHelixBeforeChangeElementEvent =
+  HelixHeatmapElementEvent<HelixBeforeChangeEvent>;
 /** `helix-resize` event type */
 export type HelixHeatmapHelixResizeElementEvent =
   HelixHeatmapElementEvent<HelixResizeEvent>;
@@ -7491,6 +7792,28 @@ calendar heatmap does: a week is a column, so the strip reads along the
 line in weeks, from the right on a right-to-left page, and top to bottom in
 days. */
   rows?: (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;
+  /** What the `selection` part says after the selection changes, with `{count}` for
+how many cells are selected. */
+  selectionLabel?: (HelixHeatmap["selectionLabel"]) | undefined;
+  /** How many cells a reader can select: `single` or `multiple`.
+
+Absent selects nothing, and a press or Space does what it did. */
+  "selection-mode"?: (HelixHeatmap["selectionMode"]) | undefined;
+  /** How many cells a reader can select: `single` or `multiple`.
+
+Absent selects nothing, and a press or Space does what it did. */
+  selectionMode?: (HelixHeatmap["selectionMode"]) | undefined;
   /** Lower bounds for the tone buckets, in the order the tones are given.
 
 `thresholds="1 3 6 9"` with `tones="1 2 3 4"` puts 1 and 2 in the ramp's
@@ -7513,9 +7836,19 @@ no order in it. */
   "total-label"?: (HelixHeatmap["totalLabel"]) | undefined;
   /** The word the `overview` puts before the total of the readings drawn. */
   totalLabel?: (HelixHeatmap["totalLabel"]) | undefined;
+  /** The selected cells, by the names their rows have in the table, such as
+`2026-06-11`, separated by commas.
+
+Set it to start with cells selected. Written by a press or a key under
+`selection-mode`. */
+  value?: (HelixHeatmap["value"]) | undefined;
 };
 
 export type HelixHeatmapVueEvents = {
+  /** Fired once a press or a key has changed which cells are selected. */
+  change: HelixHeatmapElementEvent;
+  /** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
+  "helix-before-change": HelixHeatmapHelixBeforeChangeElementEvent;
   /** Fired when the number of cells drawn changes, with the new number. */
   "helix-resize": HelixHeatmapHelixResizeElementEvent;
 };
@@ -7597,33 +7930,23 @@ is the platform's `commandfor`. */
   commandFor?: (HelixIconButton["commandFor"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
-**The five `form*` overrides work by writing the form and putting it back**,
-which is the only mechanism available and is closer to the platform than it
-sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-and it refuses ours twice over: the inner `<button>` is `type="button"` so
-it is not a submit button, and it sits in this shadow root so its form owner
-is not the consumer's form. Both throw. So the submission is started with no
-submitter and the overrides are applied to the form for the duration of it.
-
-The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-the window is one call and a `finally` closes it whether or not a listener
-refused. What a `submit` handler observes during that window is the form a
-native submitter would have given it, which is the point. */
+**The five `form*` overrides ride on a native submit button that stands in
+for this one**, because `requestSubmit(submitter)` refuses the inner
+`<button>` twice over: it is `type="button"`, and it sits in this shadow
+root, so its form owner is not the consumer's form. The stand-in is a
+hidden `<button type="submit">` in the form for the one synchronous call,
+so the platform applies the overrides to that submission alone and leaves
+the form as it was. See `submitAs`. */
   formaction?: (HelixIconButton["formAction"]) | undefined;
   /** Where this button's submission goes, overriding the form's own.
 
-**The five `form*` overrides work by writing the form and putting it back**,
-which is the only mechanism available and is closer to the platform than it
-sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-and it refuses ours twice over: the inner `<button>` is `type="button"` so
-it is not a submit button, and it sits in this shadow root so its form owner
-is not the consumer's form. Both throw. So the submission is started with no
-submitter and the overrides are applied to the form for the duration of it.
-
-The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-the window is one call and a `finally` closes it whether or not a listener
-refused. What a `submit` handler observes during that window is the form a
-native submitter would have given it, which is the point. */
+**The five `form*` overrides ride on a native submit button that stands in
+for this one**, because `requestSubmit(submitter)` refuses the inner
+`<button>` twice over: it is `type="button"`, and it sits in this shadow
+root, so its form owner is not the consumer's form. The stand-in is a
+hidden `<button type="submit">` in the form for the one synchronous call,
+so the platform applies the overrides to that submission alone and leaves
+the form as it was. See `submitAs`. */
   formAction?: (HelixIconButton["formAction"]) | undefined;
   /** How the submission is encoded, overriding the form's own. */
   formenctype?: (HelixIconButton["formEnctype"]) | undefined;
@@ -7669,13 +7992,10 @@ a press, so focus stays where the reader left it. */
   /** The value this button submits under its own `name`, as a native submit
 button does.
 
-**Reported for exactly the submission this button starts and not otherwise.**
+**Sent with exactly the submission this button starts and not otherwise.**
 A native submit button contributes `name=value` only when it is the one
-that submitted, and every other button on the form contributes nothing. A
-form-associated element reporting a value continuously would contribute on
-every submission whoever started it, which is a different feature wearing
-the same name, so `submit` below sets it, submits, and clears it inside one
-synchronous call.
+that submitted, and every other button on the form contributes nothing,
+which is what the native button standing in for this one at submit does.
 
 `CopyButton` has a `value` of its own meaning the text to put on the
 clipboard, which is not this and is why it is declared there rather than
@@ -7910,7 +8230,12 @@ the *first* update mirrors to a custom state instead, which is what
 `:state(open)` and `:state(checked)` are.
 
 `loading` writes nothing, because it is where every image starts and the
-resting state of a mirror is the attribute's absence. */
+resting state of a mirror is the attribute's absence.
+
+**Kept beside the custom states, and what the styled tier draws from.** An
+engine without `CustomStateSet`, Safari before 17.4 and Firefox before
+126, records no state, and a picture faded in by `:state(loaded)` alone
+would stay transparent there for good. A sheet of your own can read either. */
   status?: (HelixImage["status"]) | undefined;
 };
 
@@ -8152,6 +8477,13 @@ export type HelixKbdHelixShortcutElementEvent =
   HelixKbdElementEvent<HelixShortcutEvent>;
 
 export type HelixKbdVueProps = {
+  /** What the chord does to the control `for` names once it is pressed:
+`focus` moves focus to the control and `click` presses it.
+
+Unset, the chord sends `helix-shortcut` and does nothing else, for a page
+that acts on the event itself. It acts only where `within` listens, after
+`helix-shortcut`, and not when a listener cancels that event. */
+  activate?: (HelixKbd["activate"]) | undefined;
   /** Draws a chord under `keys` as one key per key, each a `key` part with a
 `separator` part between two where the platform writes a `+`, as GitHub
 and most docs draw `Ctrl` `K`.
@@ -8320,14 +8652,18 @@ shadow root reads a table in that root rather than one in the document.
 
 Set it to start with series hidden. Every chart reading the same table
 draws without them. Commas only, because a column's heading may hold a
-space. For a ring the names are the rows. */
+space. For a ring the names are the rows. An array of names set on the
+property works too, as React sets `hiddenSeries={['Direct']}`; a toggle
+writes the list back as a string. */
   "hidden-series"?: (HelixLegend["hiddenSeries"]) | undefined;
   /** The series hidden on the table, by name, separated by commas: what
 `toggles` hides and shows.
 
 Set it to start with series hidden. Every chart reading the same table
 draws without them. Commas only, because a column's heading may hold a
-space. For a ring the names are the rows. */
+space. For a ring the names are the rows. An array of names set on the
+property works too, as React sets `hiddenSeries={['Direct']}`; a toggle
+writes the list back as a string. */
   hiddenSeries?: (HelixLegend["hiddenSeries"]) | undefined;
   /** The name of the list, which a screen reader announces before its entries.
 
@@ -8417,12 +8753,14 @@ hydration, or diffed by a framework, it comes back holding whatever the
 last reader did rather than what the author wrote. `:state(open)` carries
 the resolved state for stylesheets, which is what the mirror is for. */
   open?: (HelixLightbox["open"]) | undefined;
-  /** Draws the viewer's own previous, next and close controls over the picture.
+  /** Draws the viewer's own previous, next and close controls over the picture,
+and zoom-out and zoom-in controls where `max-zoom` allows zooming.
 
 Off by default, for a viewer whose chrome you compose in the `header` and
 `footer` slots. The controls hide with the rest of the chrome while the
-reader is idle, and the previous and next ones say they are unavailable at
-either end of a set that does not `loop`. */
+reader is idle, the previous and next ones say they are unavailable at
+either end of a set that does not `loop`, and the zoom ones at either end
+of the scale. */
   controls?: (HelixLightbox["controls"]) | undefined;
   /** Draws the place of the shown item in the set over the picture, in the
 words of `status-label`, such as "2 of 5". It hides with the controls while
@@ -8495,6 +8833,20 @@ Announced rather than only drawn, because the picture changing under a
 reader who cannot see it is otherwise silent. A consumer who has their own
 counter in the chrome can empty this and say it themselves. */
   statusLabel?: (HelixLightbox["statusLabel"]) | undefined;
+  /** The zoom-in control's accessible name. */
+  "zoom-in-label"?: (HelixLightbox["zoomInLabel"]) | undefined;
+  /** The zoom-in control's accessible name. */
+  zoomInLabel?: (HelixLightbox["zoomInLabel"]) | undefined;
+  /** The zoom-out control's accessible name. */
+  "zoom-out-label"?: (HelixLightbox["zoomOutLabel"]) | undefined;
+  /** The zoom-out control's accessible name. */
+  zoomOutLabel?: (HelixLightbox["zoomOutLabel"]) | undefined;
+  /** What the live region says once a reader has stopped zooming, with the
+scale as a whole `{percent}` filled in. Empty it to say nothing. */
+  "zoom-status-label"?: (HelixLightbox["zoomStatusLabel"]) | undefined;
+  /** What the live region says once a reader has stopped zooming, with the
+scale as a whole `{percent}` filled in. Empty it to say nothing. */
+  zoomStatusLabel?: (HelixLightbox["zoomStatusLabel"]) | undefined;
 };
 
 export type HelixLightboxVueEvents = {
@@ -8621,6 +8973,13 @@ sum can pass under the curve fitted through the sum beneath it, so a
 smoothed stack can draw a part as less than nothing. There is no such edge
 here, which is what lets a line take the reading aid. */
   curve?: (HelixLineChart["curve"]) | undefined;
+  /** The series drawn as a dashed line, by their headings, separated by
+commas: `dashed="Forecast, Target"`.
+
+For a series that is not a reading, such as a forecast or a goal, drawn
+beside the ones that are. Each takes a `line-dashed` part beside `line`,
+which a stylesheet draws dashed. Absent, every line is solid. */
+  dashed?: (HelixLineChart["dashed"]) | undefined;
   /** Which rules are drawn across the plot, if any.
 
 Absent draws none, which is the honest default rather than a timid one: a
@@ -8914,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;
@@ -8959,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. */
@@ -9010,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
@@ -9036,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
@@ -10164,6 +10563,12 @@ slot replaces it. */
 
 export type HelixMenuSectionVueEvents = {};
 
+/** `HelixMeter` component event */
+export type HelixMeterElementEvent<E = Event> = TypedEvent<HelixMeter, E>;
+/** `helix-band` event type */
+export type HelixMeterHelixBandElementEvent =
+  HelixMeterElementEvent<HelixBandEvent>;
+
 export type HelixMeterVueProps = {
   /** How strongly the reading is drawn. `subtle` draws it as a wash of its color.
 
@@ -10212,6 +10617,16 @@ stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
 part names, so reflecting here would write an attribute onto the host for
 no reader. */
   band?: (HelixMeter["band"]) | undefined;
+  /** The words each band is said with under `live`, by its name, written as
+JSON in the attribute: `band-labels='{"poor":"Almost full"}'`.
+
+A band left out keeps its default: "Good", "Fair" or "Poor". */
+  "band-labels"?: (HelixMeter["bandLabels"]) | undefined;
+  /** The words each band is said with under `live`, by its name, written as
+JSON in the attribute: `band-labels='{"poor":"Almost full"}'`.
+
+A band left out keeps its default: "Good", "Fair" or "Poor". */
+  bandLabels?: (HelixMeter["bandLabels"]) | undefined;
   /** `Intl.NumberFormat` options the reading is written with, as React Aria's
 Meter and ProgressBar take them: a unit, a currency, or a number of
 decimals. Written as JSON in the attribute.
@@ -10247,6 +10662,13 @@ Absent leaves the range unbanded. */
 A visible label in the `label` slot names it instead, with the words it
 shows, so the name and the label cannot disagree. */
   label?: (HelixMeter["label"]) | undefined;
+  /** Says the reading in a polite `live` region each time it moves into
+another band, with the band's word, such as "92%, Poor".
+
+For a meter whose value changes while it is on screen. Off by default,
+because a meter that reads a fixed level has nothing new to say. A meter
+with no bands says nothing. */
+  live?: (HelixMeter["live"]) | undefined;
   /** The locale the percentage is written in, such as `fr` for `72 %`.
 
 Absent uses the runtime's own. */
@@ -10312,7 +10734,10 @@ fair summary of a task and a poor one of a quantity. */
   valueText?: (HelixMeter["valueText"]) | undefined;
 };
 
-export type HelixMeterVueEvents = {};
+export type HelixMeterVueEvents = {
+  /** Fired when the reading moves into another band, with the band it is in now, or `''` where it is in none. Not sent on the first render, since a meter that arrives in a band has not moved. */
+  "helix-band": HelixMeterHelixBandElementEvent;
+};
 
 export type HelixNavigationVueProps = {
   /** Whether the arrow keys move focus between the destinations.
@@ -10523,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;
@@ -10717,7 +11156,13 @@ than states: a duration, a weight, a count they are looking for rather than
 one they already know. */
   scrub?: (HelixNumberInput["scrub"]) | undefined;
   /** How far one step moves. A value off the step grid, counted from `min`, is
-invalid, as it is in a native number field. */
+invalid, as it is in a native number field.
+
+Unset, a step moves by one, or by one percent under a percent format, and
+a typed number is rounded to the smallest amount `format-options` shows
+rather than to whole steps, as React Aria's NumberField does: a field
+showing dollars keeps the cents typed into it. Without `format-options`
+the grid is whole numbers, as in a native number field. */
   step?: (HelixNumberInput["step"]) | undefined;
   /** The message the browser shows when the number is off the step grid, with
 `{below}` and `{above}` filled in with the nearest valid values. */
@@ -11136,6 +11581,10 @@ export type HelixOptionVueEvents = {
   "helix-select": HelixOptionHelixSelectElementEvent;
 };
 
+export type HelixOptionSeparatorVueProps = {};
+
+export type HelixOptionSeparatorVueEvents = {};
+
 export type HelixOrbVueProps = {
   /** Says each new state politely, such as "Working" and then "Done".
 
@@ -11565,12 +12014,9 @@ 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?: (HelixPinInput["valueMissingMessage"]) | undefined;
-  /** The autofill hint for the browser, set on the first box only.
-
-`one-time-code` is why this defaults to anything at all: it is the token
-that lets a phone offer the code out of a message. Later cells stay `off`
-for the reason in the class comment above, that six cells each offering
-the same code is one offer made six times. */
+  /** The autofill hint for the browser. `one-time-code` is why this defaults to
+anything at all: it is the token that lets a phone offer the code out of a
+message. */
   autocomplete?: (HelixPinInput["autocomplete"]) | undefined;
   /** Whether the form is submitted once the last box is filled, as Web
 Awesome's `autosubmit` and Radix's `autoSubmit`. Only for a code the field
@@ -11580,9 +12026,9 @@ took: a refused last character submits nothing. */
 to keep them as typed. Web Awesome's OTP input takes the same `case`, for
 a code a service reads in one case. */
   case?: (HelixPinInput["case"]) | undefined;
-  /** Accessible name for one box, with `{index}` and `{length}` filled in. */
+  /** The name each box once had, with `{index}` and `{length}` filled in. */
   "cell-label"?: (HelixPinInput["cellLabel"]) | undefined;
-  /** Accessible name for one box, with `{index}` and `{length}` filled in. */
+  /** The name each box once had, with `{index}` and `{length}` filled in. */
   cellLabel?: (HelixPinInput["cellLabel"]) | undefined;
   /** Separators drawn between the boxes: `#` or `*` for a box and anything
 else as it is written, so `###-###` draws a dash after the third. The
@@ -11590,21 +12036,22 @@ separators are hidden from screen readers and are not part of the value. */
   format?: (HelixPinInput["format"]) | undefined;
   /** How many characters the code has. */
   length?: (HelixPinInput["length"]) | undefined;
-  /** Whether the characters are hidden, the way a password is. */
+  /** Whether the characters are hidden, the way a password is. The field is a
+password field, and each filled box draws `mask-character`. */
   mask?: (HelixPinInput["mask"]) | undefined;
-  /** What an empty box shows, usually a single dot.
-
-The platform's own placeholder, on each cell, rather than a character
-drawn behind the field: it clears the moment anything is typed, it is
-already excluded from the accessible value, and it works the same under
-`mask`, where the cell is a password input and a hand-drawn glyph would
-have to know that.
-
-Empty by default, because a row of boxes already reads as a row of boxes. */
+  /** What a filled box draws under `mask`, in place of its character, as Web
+Awesome's `--mask-char`. */
+  "mask-character"?: (HelixPinInput["maskCharacter"]) | undefined;
+  /** What a filled box draws under `mask`, in place of its character, as Web
+Awesome's `--mask-char`. */
+  maskCharacter?: (HelixPinInput["maskCharacter"]) | undefined;
+  /** What an empty box shows, usually a single dot. It is not shown in the box
+the caret is in. Empty by default, because a row of boxes already reads as
+a row of boxes. */
   placeholder?: (HelixPinInput["placeholder"]) | undefined;
-  /** Whether the boxes block input. A read-only code still submits its value. */
+  /** Whether the field blocks input. A read-only code still submits its value. */
   readonly?: (HelixPinInput["readOnly"]) | undefined;
-  /** Whether the boxes block input. A read-only code still submits its value. */
+  /** Whether the field blocks input. A read-only code still submits its value. */
   readOnly?: (HelixPinInput["readOnly"]) | undefined;
   /** The message shown when the code is started and not finished, with
 `{length}` filled in. When it is unset, an English default is shown. */
@@ -11629,8 +12076,7 @@ marked letters wants `text`, which judges nothing.
 
 **Not reflected**: nothing selects on it, so reflecting only writes
 `type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
-attribute no consumer's markup had. The area rules carry the sentence
-"reflect only what CSS selects on". The real inputs take it as a binding,
+attribute no consumer's markup had. The field takes it as `inputmode`,
 which is what makes the keyboard follow. */
   type?: (HelixPinInput["type"]) | undefined;
   /** Whether the control is disabled and cannot be used.
@@ -11742,6 +12188,12 @@ export type HelixPopoverVueEvents = {
   "helix-before-open": HelixPopoverHelixBeforeOpenElementEvent;
 };
 
+/** `HelixProgress` component event */
+export type HelixProgressElementEvent<E = Event> = TypedEvent<HelixProgress, E>;
+/** `helix-complete` event type */
+export type HelixProgressHelixCompleteElementEvent =
+  HelixProgressElementEvent<HelixCompleteEvent>;
+
 export type HelixProgressVueProps = {
   /** How strongly the bar is drawn.
 
@@ -11761,6 +12213,18 @@ from, so an outline there costs legibility and buys no distinction. `solid`
 is the resting state and is written by not writing it, per the rule that a
 reflected property takes no default. */
   emphasis?: (HelixProgress["emphasis"]) | undefined;
+  /** The words a screen reader hears when the value reaches `max`, such as
+"Upload complete".
+
+Said once, politely, as the work finishes. Empty says nothing, for a bar
+whose page announces the result itself. */
+  "complete-label"?: (HelixProgress["completeLabel"]) | undefined;
+  /** The words a screen reader hears when the value reaches `max`, such as
+"Upload complete".
+
+Said once, politely, as the work finishes. Empty says nothing, for a bar
+whose page announces the result itself. */
+  completeLabel?: (HelixProgress["completeLabel"]) | undefined;
   /** `Intl.NumberFormat` options the reading is written with, as React Aria's
 Meter and ProgressBar take them: a unit, a currency, or a number of
 decimals. Written as JSON in the attribute.
@@ -11871,12 +12335,21 @@ report progress. */
   valueText?: (HelixProgress["valueText"]) | undefined;
 };
 
-export type HelixProgressVueEvents = {};
+export type HelixProgressVueEvents = {
+  /** The value reached `max` from below. Its `value` is `max`. Not sent for a bar that starts full. */
+  "helix-complete": HelixProgressHelixCompleteElementEvent;
+};
 
 /** `HelixQrCode` component event */
 export type HelixQrCodeElementEvent<E = Event> = TypedEvent<HelixQrCode, E>;
 
 export type HelixQrCodeVueProps = {
+  /** The words a code with no `label` is named by, followed by its value where
+the value is a web address. */
+  "code-label"?: (HelixQrCode["codeLabel"]) | undefined;
+  /** The words a code with no `label` is named by, followed by its value where
+the value is a web address. */
+  codeLabel?: (HelixQrCode["codeLabel"]) | undefined;
   /** The error correction level, which sets how much of the code can be lost
 and still scan.
 
@@ -11886,10 +12359,13 @@ chosen automatically when the slot is filled: it is the level that makes
 covering safe, and a consumer who fills the slot has said what they want
 without having to know that. */
   correction?: (HelixQrCode["correction"]) | undefined;
-  /** The image's accessible name.
+  /** The image's accessible name: what the code is for, such as "Open the
+menu".
 
-Falling back to the value is deliberate: a code almost always holds a URL,
-and a URL is a better name than "QR code" for a reader who cannot see it. */
+Absent names it by `code-label` and, for a web address, the address,
+which is what a reader who cannot scan it needs. Any other value is left
+out of the name, since it may hold a secret, such as an authenticator's
+key or a network's password. */
   label?: (HelixQrCode["label"]) | undefined;
   /** How the modules are drawn.
 
@@ -12710,8 +13186,12 @@ runs of text, each with an optional kind, such as
 
 Absent, the pane is a plain field. Runs whose text does not add up to the
 source are drawn as the source, uncolored, so the colors never drift from
-the caret. Set it as a property. */
-  highlight?: (HelixSandboxSource["highlight"]) | undefined;
+the caret, and so is the source when the function throws. Set it as a
+property.
+
+Named for what it returns, runs of text, where Code Block's `highlight`
+returns markup. */
+  tokenize?: (HelixSandboxSource["tokenize"]) | undefined;
 };
 
 export type HelixSandboxSourceVueEvents = {
@@ -12848,6 +13328,20 @@ is read along. */
   "points-label"?: (HelixScatterChart["pointsLabel"]) | undefined;
   /** The word the summary uses for a row when it counts them. */
   pointsLabel?: (HelixScatterChart["pointsLabel"]) | undefined;
+  /** The heading of a column whose numbers size the points, such as
+`Population`, which makes the chart a bubble chart.
+
+That column is then a measure and no series: it draws no points of its
+own, and each point's area follows its row's number in it. Absent, every
+point is one size. */
+  "size-by"?: (HelixScatterChart["sizeBy"]) | undefined;
+  /** The heading of a column whose numbers size the points, such as
+`Population`, which makes the chart a bubble chart.
+
+That column is then a measure and no series: it draws no points of its
+own, and each point's area follows its row's number in it. Absent, every
+point is one size. */
+  sizeBy?: (HelixScatterChart["sizeBy"]) | undefined;
   /** Draws each series' line of best fit across the plot, by least squares, in
 the series' color: the regression line a reader would otherwise draw by
 eye.
@@ -13020,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. */
@@ -13029,6 +13531,24 @@ the field and does not reach that one. */
 Passed to the listbox rather than acted on here, because the listbox owns
 the filtering, the empty state and the keyboard. */
   filterable?: (HelixSelect["filterable"]) | undefined;
+  /** The open list's name where nothing names the Select, read by screen
+readers. The list has no visible name.
+
+A Select named by `label`, `aria-label`, `aria-labelledby` or a `<label>`
+gives its list that name, and this is not used. Unnamed, the Select is
+reported once by the missing-name warning, and its list is not reported a
+second time for a name the page never wrote: the list is this element's,
+and so is the fallback. Combobox calls its list the same. */
+  "list-label"?: (HelixSelect["listLabel"]) | undefined;
+  /** The open list's name where nothing names the Select, read by screen
+readers. The list has no visible name.
+
+A Select named by `label`, `aria-label`, `aria-labelledby` or a `<label>`
+gives its list that name, and this is not used. Unnamed, the Select is
+reported once by the missing-name warning, and its list is not reported a
+second time for a name the page never wrote: the list is this element's,
+and so is the fallback. Combobox calls its list the same. */
+  listLabel?: (HelixSelect["listLabel"]) | undefined;
   /** Whether the options are still loading.
 
 Passed straight to the list, which is where the rows are and so where the
@@ -13043,6 +13563,16 @@ consumer wiring the same flag twice. */
   multiple?: (HelixSelect["multiple"]) | undefined;
   /** Shown on the trigger while nothing is chosen. */
   placeholder?: (HelixSelect["placeholder"]) | undefined;
+  /** Where the list opens: `floating`, under the trigger and above it where
+there is no room, or `item-aligned`, over the trigger with the chosen
+option where the trigger is, as a native select does on macOS and Radix
+Select does by default.
+
+Over the trigger, a reader's eye stays on the answer as the list opens
+round it, and a short move reaches the options either side. Near an edge
+of the screen the list moves to stay on it, so the option may sit beside
+the trigger rather than on it. It follows the page as it scrolls. */
+  position?: (HelixSelect["position"]) | undefined;
   /** Whether the control is disabled and cannot be used.
 
 Reflected, because the styled tier selects on it, and mirrored to
@@ -13069,6 +13599,16 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixSelect["name"]) | undefined;
+  /** Whether the trigger holds its group's tab stop.
+
+A toolbar keeps one tab stop across its controls, and writing `tabindex`
+onto this element would change markup the consumer rendered, which a React
+consumer's hydration reports. A toolbar sets this property instead, and
+the stop moves on the trigger inside the shadow root, as Button's does.
+
+No attribute, because it is coordination between elements rather than
+anything a consumer sets. */
+  focusable?: (HelixSelect["focusable"]) | undefined;
   /** What the trigger shows for the chosen options: a function given them, in
 the order they appear, that returns text, an element or a Lit template.
 
@@ -13302,6 +13842,11 @@ filled in. Write it in the page's language, such as `{start} bis {end}`. */
   showValue?: (HelixSlider["showValue"]) | undefined;
   /** How far one press of an arrow key moves the thumb. */
   step?: (HelixSlider["step"]) | undefined;
+  /** Whether each thumb shows its value in a bubble beside it, as Web
+Awesome's `with-tooltip`. The styled slider shows the bubbles while the
+slider is under the pointer or holds focus. They repeat what each thumb
+already reports, so a screen reader skips them. */
+  tooltip?: (HelixSlider["tooltip"]) | undefined;
   /** What a screen reader says for a thumb's value, with `{value}` filled in,
 such as `{value} degrees`. Empty announces the number alone. */
   "value-text"?: (HelixSlider["valueText"]) | undefined;
@@ -13463,6 +14008,20 @@ separated by spaces.
 Absent marks none, and the drawing is what it was. Each mark is a part,
 placed at its reading, for a stylesheet to draw. */
   marks?: (HelixSparkline["marks"]) | undefined;
+  /** What the readings come to, said after the name: `{first}` and `{last}`
+for the first and the last reading, `{high}` and `{low}` for the highest
+and the lowest, each written as the readout writes it.
+
+Set it to the words of the page's language, or to nothing to say no
+more than the name. Said only where the sparkline is named. */
+  "overview-label"?: (HelixSparkline["overviewLabel"]) | undefined;
+  /** What the readings come to, said after the name: `{first}` and `{last}`
+for the first and the last reading, `{high}` and `{low}` for the highest
+and the lowest, each written as the readout writes it.
+
+Set it to the words of the page's language, or to nothing to say no
+more than the name. Said only where the sparkline is named. */
+  overviewLabel?: (HelixSparkline["overviewLabel"]) | undefined;
   /** What the readings are drawn as.
 
 Absent is `area`, a line with the region beneath it washed. `line` is the
@@ -13505,6 +14064,12 @@ it. `{position}` and `{count}` are replaced with the numbers, written in
 Set it to the words of the page's language, such as `{position} von
 {count}`, or to nothing to say no position. */
   positionLabel?: (HelixSparkline["positionLabel"]) | undefined;
+  /** Two values a band is drawn between, behind the line, separated by a
+space: `range="60 100"` marks a normal range.
+
+The scale stretches to hold the band where the readings do not reach it.
+Absent draws none. */
+  range?: (HelixSparkline["range"]) | undefined;
   /** The numbers, separated by whitespace or by commas.
 
 An array assigned to the property works too, which is what React 19 does
@@ -13516,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,
@@ -13528,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;
 };
@@ -13580,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.
 
@@ -13763,6 +14363,8 @@ export type HelixSplitterVueEvents = {
   "helix-collapse": HelixSplitterHelixCollapseElementEvent;
   /** Fired after the divider settles somewhere new, with the new position. */
   "helix-resized": HelixSplitterHelixResizedElementEvent;
+  /** 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;
 };
 
 export type HelixStatGroupVueProps = {
@@ -13862,6 +14464,12 @@ in both. Of those four combinations three are ones nobody should pick, and
 a property whose job is mostly to be left alone is a property that mostly
 catches people out. */
   orientation?: (HelixSteps["orientation"]) | undefined;
+  /** What the `progress` part says to a screen reader, with `{percent}` filled
+in with `progress`. */
+  "progress-label"?: (HelixSteps["progressLabel"]) | undefined;
+  /** What the `progress` part says to a screen reader, with `{percent}` filled
+in with `progress`. */
+  progressLabel?: (HelixSteps["progressLabel"]) | undefined;
   /** What each step is marked with.
 
 Absent is the state itself: a check where a stage is done, a target where
@@ -14318,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
@@ -14380,6 +14996,13 @@ export type HelixTableVueEvents = {
 };
 
 export type HelixTableRowVueProps = {
+  /** The URL a press on the row follows, which makes the whole row a link.
+Empty, the default, leaves presses to the row's cells. */
+  href?: (HelixTableRow["href"]) | undefined;
+  /** The `rel` of the row's link. You set it yourself, as on an anchor. */
+  rel?: (HelixTableRow["rel"]) | undefined;
+  /** Where the row's link opens, such as `_blank`. */
+  target?: (HelixTableRow["target"]) | undefined;
   /** The key the table's `selected` lists this row by. Left empty, the row is
 known by its place among the rows as written. */
   value?: (HelixTableRow["value"]) | undefined;
@@ -14530,6 +15153,12 @@ export type HelixTagGroupHelixDismissElementEvent =
   HelixTagGroupElementEvent<HelixDismissEvent>;
 
 export type HelixTagGroupVueProps = {
+  /** The words the group shows and says once its last tag is removed, where
+nothing is in the `empty` slot. */
+  "empty-label"?: (HelixTagGroup["emptyLabel"]) | undefined;
+  /** The words the group shows and says once its last tag is removed, where
+nothing is in the `empty` slot. */
+  emptyLabel?: (HelixTagGroup["emptyLabel"]) | undefined;
   /** The name of the set, such as "Filters", which a screen reader announces
 before its tags. */
   label?: (HelixTagGroup["label"]) | undefined;
@@ -15090,7 +15719,8 @@ Handed to the list. The value is `HH:mm` on twenty-four hours either way. */
   hourCycle?: (HelixTimeInput["hourCycle"]) | undefined;
   /** Language tag the times are written in.
 
-Absent uses the runtime's own. */
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixTimeInput["locale"]) | undefined;
   /** Latest time that can be chosen, as `HH:mm`. */
   max?: (HelixTimeInput["max"]) | undefined;
@@ -15249,6 +15879,19 @@ export type HelixTimePickerHelixBeforeChangeElementEvent =
   HelixTimePickerElementEvent<HelixBeforeChangeEvent>;
 
 export type HelixTimePickerVueProps = {
+  /** A message under the picker, such as what is wrong with the answer.
+
+While set, the picker is invalid and does not submit, as a field's
+`feedback` is, it is marked invalid to a reader and to CSS, and the
+controls a reader answers with are described by it. */
+  feedback?: (HelixTimePicker["feedback"]) | undefined;
+  /** Whether the answer fails validation, marked on the controls a reader
+answers with and as `:state(invalid)`.
+
+A flag a field that wraps the picker sets, since that field owns the
+label, the hint and the message; on its own, `feedback` both marks the
+picker and says why. */
+  invalid?: (HelixTimePicker["invalid"]) | undefined;
   /** The value the control starts with. A form reset returns it to this value,
 and to the `value` attribute where this one is not written, as a native
 control resets to the `value` it declares. */
@@ -15322,21 +15965,14 @@ English, "Stunde" in German. */
 Absent is the locale's own word, from `Intl.DisplayNames`: "Hour" in
 English, "Stunde" in German. */
   hourLabel?: (HelixTimePicker["hourLabel"]) | undefined;
-  /** Whether the current selection fails validation.
-
-A flag rather than a message, the same split Date Picker draws. A flat
-picker has no room of its own for a sentence: the field that wraps one owns
-the label, the hint and the feedback, and a second message inside the panel
-would be the same error said twice. What is left for the picker is the one
-thing the field cannot draw from outside, the mark on the answer itself. */
-  invalid?: (HelixTimePicker["invalid"]) | undefined;
   /** Accessible name for the list, which has no visible one of its own.
 
 An `aria-label` or `aria-labelledby` on the host names the list instead. */
   label?: (HelixTimePicker["label"]) | undefined;
-  /** Language tag the times are written in.
+  /** Language tag the times and the wheels' names are written in.
 
-Absent uses the runtime's own. */
+Absent is the page's: the `lang` of the nearest element with one, as
+Shoelace and Web Awesome read it, then the runtime's own. */
   locale?: (HelixTimePicker["locale"]) | undefined;
   /** Stops the arrow keys in the list from choosing each time they move to.
 Enter, Space or a click chooses.
@@ -15917,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,
@@ -16546,6 +17185,30 @@ export type HelixTrendVueProps = {
   "down-label"?: (HelixTrend["downLabel"]) | undefined;
   /** The word read out for a move down. */
   downLabel?: (HelixTrend["downLabel"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, as React Aria's
+NumberField takes them: a percent, a currency, a unit or a number of
+decimals. Written as JSON in the attribute.
+
+```html
+<helix-trend value="-0.084" format-options='{"style":"percent","maximumFractionDigits":1}'></helix-trend>
+```
+
+The example says "Down 8.4%". The size is written without a sign, since
+the arrow and the word say which way; set `signDisplay` for one. Absent
+writes the number as the locale writes any number. */
+  "format-options"?: (HelixTrend["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, as React Aria's
+NumberField takes them: a percent, a currency, a unit or a number of
+decimals. Written as JSON in the attribute.
+
+```html
+<helix-trend value="-0.084" format-options='{"style":"percent","maximumFractionDigits":1}'></helix-trend>
+```
+
+The example says "Down 8.4%". The size is written without a sign, since
+the arrow and the word say which way; set `signDisplay` for one. Absent
+writes the number as the locale writes any number. */
+  formatOptions?: (HelixTrend["formatOptions"]) | undefined;
   /** Which movement counts as an improvement for this metric.
 
 Absent states the movement without judging it, which is the honest default:
@@ -16553,6 +17216,11 @@ revenue up is good news and latency up is bad news, and only the consumer
 knows which one this is. Set it once per metric and it holds while the
 movement changes underneath. */
   good?: (HelixTrend["good"]) | undefined;
+  /** The locale `value` is written in, such as `de` for `1.234,5`.
+
+Absent uses the runtime's own. Set it on a page rendered on a server, so
+the server and the browser write the figure alike. */
+  locale?: (HelixTrend["locale"]) | undefined;
   /** Which way the measurement moved.
 
 Absent is neutral, so a trend with nothing to report draws a bar rather
@@ -16571,6 +17239,14 @@ three. */
   "up-label"?: (HelixTrend["upLabel"]) | undefined;
   /** The word read out for a move up. */
   upLabel?: (HelixTrend["upLabel"]) | undefined;
+  /** The change as a signed number, such as `0.12` or `-8`, which sets the
+movement by its sign and is written as the metric.
+
+Above zero is up, below is down, and zero is neutral; `movement` wins when
+both are written. The size is written in the `value` part with
+`format-options` and `locale`, in place of a slotted metric. Absent leaves
+the movement to `movement` and the metric to the slot. */
+  value?: (HelixTrend["value"]) | undefined;
   /** The word read out after the direction when the move is a setback. */
   "worse-label"?: (HelixTrend["worseLabel"]) | undefined;
   /** The word read out after the direction when the move is a setback. */
@@ -16693,7 +17369,7 @@ arrives or leaves, so previous goes back through what has played. */
 };
 
 export type HelixVideoPlaylistVueEvents = {
-  /** The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. */
+  /** The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. `currentEntry` is the entry itself, with its `src`, `poster` and name. */
   "helix-activate": HelixVideoPlaylistHelixActivateElementEvent;
   /** The current entry is about to change. Cancelable: cancel it to keep the current entry. */
   "helix-before-activate": HelixVideoPlaylistHelixBeforeActivateElementEvent;
@@ -16830,7 +17506,11 @@ assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
 The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
-`previous` and `next`.
+`previous` and `next`. `full` stands for `rewind`, `forward`, `speed`,
+`pip` and `remote` in that order, the controls that act on the video by
+themselves, as Web Awesome's `full` preset does, and a name it already
+holds is drawn once. `extra-controls="full"` is the whole bar, and
+`overflow-controls="full"` puts all of it behind one button.
 
 **`previous` and `next` do nothing to the video, and are offered anyway.**
 They announce `helix-previous` and `helix-next` and stop there, so what
@@ -16860,7 +17540,11 @@ assumed: it is absent on iPhone and behind a flag in Firefox, and a button
 that cannot work is worse than one that is not there.
 
 The names are `speed`, `pip`, `remote`, `download`, `rewind`, `forward`,
-`previous` and `next`.
+`previous` and `next`. `full` stands for `rewind`, `forward`, `speed`,
+`pip` and `remote` in that order, the controls that act on the video by
+themselves, as Web Awesome's `full` preset does, and a name it already
+holds is drawn once. `extra-controls="full"` is the whole bar, and
+`overflow-controls="full"` puts all of it behind one button.
 
 **`previous` and `next` do nothing to the video, and are offered anyway.**
 They announce `helix-previous` and `helix-next` and stop there, so what
@@ -17171,6 +17855,10 @@ export type HelixVirtualListHelixRangeChangeElementEvent =
   HelixVirtualListElementEvent<HelixRangeChangeEvent>;
 
 export type HelixVirtualListVueProps = {
+  /** How many items a line holds. One, the default, is a list; more lays the
+items out as a grid of that many equal columns, windowed a line at a
+time, with Left and Right moving along a line. */
+  columns?: (HelixVirtualList["columns"]) | undefined;
   /** The height of one row, in pixels, used to find the row at a scroll offset.
 
 An estimate rather than a measurement while `measured` is off, which is
@@ -17291,10 +17979,16 @@ export type CustomCssProperties = {
   "--announcement-background-color"?: (string) | undefined;
   /** The band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller. */
   "--announcement-block-size"?: (string) | undefined;
+  /** The size of the message's text. */
+  "--announcement-font-size"?: (string) | undefined;
   /** The message's color, to pair with a fill set through the background hook. */
   "--announcement-foreground-color"?: (string) | undefined;
   /** The inline padding, matched to the page. */
   "--announcement-inset"?: (string) | undefined;
+  /** Where the message sits in the band. Centered by default; `start` lines it up with the page under it. */
+  "--announcement-text-align"?: (string) | undefined;
+  /** The color a toned band's tint and outline are mixed from, in place of the tone's. */
+  "--announcement-tone-color"?: (string) | undefined;
   /** The filter behind the banner. Set it to `none` when you pair the header with a panel. */
   "--app-header-backdrop"?: (string) | undefined;
   /** Fill behind the banner. */
@@ -17315,6 +18009,8 @@ export type CustomCssProperties = {
   "--area-chart-gap"?: (string) | undefined;
   /** Color of the rules drawn across the plot under `gridlines`. */
   "--area-chart-gridline-color"?: (string) | undefined;
+  /** How much of each band shows under `overlap`, where the bands in front let the ones behind show through. */
+  "--area-chart-overlap-opacity"?: (string) | undefined;
   /** Thickness of a band's top edge. Overrides `--chart-stroke`. */
   "--area-chart-width"?: (string) | undefined;
   /** Thickness of a band's top edge. Area Chart, Line Chart, and Bar Chart's `lines` all read this one property. `--area-chart-width` overrides it here. */
@@ -17327,12 +18023,22 @@ export type CustomCssProperties = {
   "--aura-haze"?: (string) | undefined;
   /** The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one. */
   "--aura-peak"?: (string) | undefined;
+  /** The fill of the count of avatars past `max`. */
+  "--avatar-group-overflow-background-color"?: (string) | undefined;
+  /** The color of the count of avatars past `max`. */
+  "--avatar-group-overflow-color"?: (string) | undefined;
+  /** The type size of the count of avatars past `max`. */
+  "--avatar-group-overflow-font-size"?: (string) | undefined;
   /** How far each avatar sits over the one before it. */
   "--avatar-group-overlap"?: (string) | undefined;
   /** Color of the ring that separates one avatar from the next. */
   "--avatar-group-ring-color"?: (string) | undefined;
   /** Fill behind the initials. */
   "--avatar-background-color"?: (string) | undefined;
+  /** The color of the initials. */
+  "--avatar-color"?: (string) | undefined;
+  /** The weight of the initials. */
+  "--avatar-font-weight"?: (string) | undefined;
   /** Edge length of the avatar. */
   "--avatar-size"?: (string) | undefined;
   /** How long one beat of `attention` takes. */
@@ -17341,10 +18047,14 @@ export type CustomCssProperties = {
   "--badge-background-color"?: (string) | undefined;
   /** The color of the count, to pair with a fill set through `--badge-background-color`. */
   "--badge-color"?: (string) | undefined;
+  /** The weight of the count. */
+  "--badge-font-weight"?: (string) | undefined;
   /** The space between the content and the count under `placement="inline"`. */
   "--badge-gap"?: (string) | undefined;
   /** Pulls the mark in from the corner, along both axes. */
   "--badge-offset"?: (string) | undefined;
+  /** How far the indicator's corners are rounded. */
+  "--badge-radius"?: (string) | undefined;
   /** The color of the ring between the indicator and what is behind it. */
   "--badge-ring-color"?: (string) | undefined;
   /** Fill of the category band under the pointer. */
@@ -17371,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. */
@@ -17381,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. */
@@ -17405,8 +18125,20 @@ export type CustomCssProperties = {
   "--breadcrumbs-font-size"?: (string) | undefined;
   /** Space between items and separators. */
   "--breadcrumbs-gap"?: (string) | undefined;
+  /** Color of the line between the two halves of a split crumb, under `separation="outlined"`. */
+  "--breadcrumbs-split-divider-color"?: (string) | undefined;
+  /** Fill across both halves of a split crumb while one of them is under the pointer, under the default `plain` separation. */
+  "--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. */
@@ -17471,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. */
@@ -17481,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. */
@@ -17501,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. */
@@ -17541,8 +18297,18 @@ export type CustomCssProperties = {
   "--chat-message-background-color-me"?: (string) | undefined;
   /** Text color in a turn. */
   "--chat-message-color"?: (string) | undefined;
+  /** Text color in turns by `me`. */
+  "--chat-message-color-me"?: (string) | undefined;
   /** Maximum width of a turn before its text wraps. */
   "--chat-message-measure"?: (string) | undefined;
+  /** Color of the line under a turn, with its time and state. */
+  "--chat-message-meta-color"?: (string) | undefined;
+  /** Space above and below a turn's content inside its bubble. */
+  "--chat-message-padding-block"?: (string) | undefined;
+  /** Space either side of a turn's content inside its bubble. */
+  "--chat-message-padding-inline"?: (string) | undefined;
+  /** Corner radius of a turn's bubble. */
+  "--chat-message-radius"?: (string) | undefined;
   /** Space between turns. */
   "--chat-gap"?: (string) | undefined;
   /** How tall the conversation may get before the transcript scrolls. */
@@ -17581,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. */
@@ -17641,6 +18421,10 @@ export type CustomCssProperties = {
   "--color-picker-sample-size"?: (string) | undefined;
   /** The width and height of one preset. */
   "--color-picker-swatch-size"?: (string) | undefined;
+  /** The widest the hue ring draws, with `wheel`. The picker's width by default. */
+  "--color-picker-wheel-size"?: (string) | undefined;
+  /** The width of the hue ring's band, with `wheel`. */
+  "--color-picker-wheel-thickness"?: (string) | undefined;
   /** The chosen brightness, 0 to 100, as a percentage. */
   "--color-picker-brightness"?: (string) | undefined;
   /** The chosen hue, 0 to 360, unitless. */
@@ -17705,6 +18489,10 @@ export type CustomCssProperties = {
   "--data-table-color"?: (string) | undefined;
   /** The grid track list for the columns. It overrides the list worked out from the columns. */
   "--data-table-columns"?: (string) | undefined;
+  /** The space between the grid and the footer below it. */
+  "--data-table-footer-gap"?: (string) | undefined;
+  /** The space between the pieces of the footer, such as a summary and the pagination. */
+  "--data-table-footer-item-gap"?: (string) | undefined;
   /** The fill behind a heading while `windowed`. It is opaque, because rows scroll under the sticky heading. Unset otherwise. */
   "--data-table-heading-background-color"?: (string) | undefined;
   /** The text color of a heading. */
@@ -17715,6 +18503,10 @@ export type CustomCssProperties = {
   "--data-table-more-border-color"?: (string) | undefined;
   /** The fill behind the button in the `load-more` row while the pointer is over it. */
   "--data-table-more-hover-background-color"?: (string) | undefined;
+  /** The space above and below the words of the button in the `load-more` row. */
+  "--data-table-more-padding-block"?: (string) | undefined;
+  /** The space either side of the words of the button in the `load-more` row. */
+  "--data-table-more-padding-inline"?: (string) | undefined;
   /** The corner radius of the button in the `load-more` row. */
   "--data-table-more-radius"?: (string) | undefined;
   /** The space above and below a cell's content. */
@@ -17723,12 +18515,18 @@ export type CustomCssProperties = {
   "--data-table-padding-inline"?: (string) | undefined;
   /** The color of the line between rows. It takes a color only, because it fills the color in a border shorthand, and a full border value makes the rule invalid. It is drawn on the cells, because the row is `display: contents`. */
   "--data-table-rule-color"?: (string) | undefined;
+  /** The fill across a selected row. */
+  "--data-table-selected-background-color"?: (string) | undefined;
   /** The font size of headings and cells. */
   "--data-table-text"?: (string) | undefined;
   /** The color of the mark that opens and closes a row of a tree grid. */
   "--data-table-toggle-color"?: (string) | undefined;
+  /** The space between the mark that opens a row of a tree grid and the row's name, also kept by a row with no children. */
+  "--data-table-toggle-gap"?: (string) | undefined;
   /** The size of the mark that opens and closes a row of a tree grid, and of the room a row with no children keeps for it. */
   "--data-table-toggle-size"?: (string) | undefined;
+  /** The space between the toolbar and the grid below it. */
+  "--data-table-toolbar-gap"?: (string) | undefined;
   /** The alignment of the cell's column: `start`, `center`, or `end`. Unset when the column sets none. The component writes it on each cell it draws, and the stylesheet reads it. `Table` sets `--table-cell-align` for the same purpose. */
   "--data-table-cell-align"?: (string) | undefined;
   /** How deep a row is in a tree grid, from 1. The component writes it on each row header cell, and the stylesheet indents by it. */
@@ -17755,6 +18553,8 @@ export type CustomCssProperties = {
   "--date-picker-columns"?: (string) | undefined;
   /** Width and height of a day. */
   "--date-picker-day-size"?: (string) | undefined;
+  /** The color of the message under the calendar, while `feedback` is set. */
+  "--date-picker-feedback-color"?: (string) | undefined;
   /** Height of a month or a year in the months and years views, where `max-view` is set. */
   "--date-picker-period-size"?: (string) | undefined;
   /** Band behind the days in a range. */
@@ -17767,18 +18567,46 @@ export type CustomCssProperties = {
   "--date-picker-track-size"?: (string) | undefined;
   /** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */
   "--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. */
+  "--description-list-label-color"?: (string) | undefined;
+  /** The size of a label's text. */
+  "--description-list-label-font-size"?: (string) | undefined;
+  /** The weight of a label's text. */
+  "--description-list-label-weight"?: (string) | undefined;
+  /** The color of a value. */
+  "--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. */
   "--dialog-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. */
   "--dialog-border-width"?: (string) | undefined;
+  /** Color of the words in the panel. Follows `--helix-color-foreground`. */
+  "--dialog-color"?: (string) | undefined;
   /** How big the mark above the title is. */
   "--dialog-icon-size"?: (string) | undefined;
   /** Width of the panel. */
   "--dialog-inline-size"?: (string) | undefined;
   /** Padding inside the panel. */
   "--dialog-padding"?: (string) | undefined;
+  /** The panel's corner radius. Follows `--helix-radii-sm`. */
+  "--dialog-radius"?: (string) | undefined;
   /** How far the panel rises as it opens. Follows `--helix-space-lg`. */
   "--dialog-rise"?: (string) | undefined;
   /** The tint over the page behind the dialog. Set it on the host, because a `var()` written inside `::backdrop` cannot read a token. */
@@ -17789,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`. */
@@ -17845,6 +18679,8 @@ export type CustomCssProperties = {
   "--drilldown-item-block-size"?: (string) | undefined;
   /** Color of a row's words. */
   "--drilldown-item-color"?: (string) | undefined;
+  /** Color of the line under a row's label. */
+  "--drilldown-item-description-color"?: (string) | undefined;
   /** How faint a disabled row is drawn. */
   "--drilldown-item-disabled-opacity"?: (string) | undefined;
   /** Size of a row's words. */
@@ -17919,12 +18755,20 @@ export type CustomCssProperties = {
   "--file-input-file-radius"?: (string) | undefined;
   /** Padding inside the field. */
   "--file-input-padding"?: (string) | undefined;
+  /** The filled part of a file's upload bar. */
+  "--file-input-progress-color"?: (string) | undefined;
+  /** The unfilled part of a file's upload bar. */
+  "--file-input-progress-track-color"?: (string) | undefined;
   /** Corner radius of the field. */
   "--file-input-radius"?: (string) | undefined;
   /** The remove button's icon at rest. */
   "--file-input-remove-color"?: (string) | undefined;
   /** The remove button's icon under the pointer. */
   "--file-input-remove-color-hover"?: (string) | undefined;
+  /** The words beside a file's upload bar. */
+  "--file-input-status-color"?: (string) | undefined;
+  /** The words beside a file whose upload failed. */
+  "--file-input-status-color-error"?: (string) | undefined;
   /** The fill behind the chip. */
   "--filter-input-chip-background-color"?: (string) | undefined;
   /** The color of the chip's border. */
@@ -18007,6 +18851,10 @@ export type CustomCssProperties = {
   "--heatmap-cell-size"?: (string) | undefined;
   /** Space between cells. Zero draws one continuous field. */
   "--heatmap-gap"?: (string) | undefined;
+  /** The color of the ring on a selected cell, under `selection-mode`. */
+  "--heatmap-selected-color"?: (string) | undefined;
+  /** How thick the ring on a selected cell is. */
+  "--heatmap-selected-width"?: (string) | undefined;
   /** The weakest step of the magnitude ramp, used by `tones="1 …"`. */
   "--heatmap-tone-1"?: (string) | undefined;
   /** The second step of the magnitude ramp. */
@@ -18039,6 +18887,12 @@ export type CustomCssProperties = {
   "--icon-size"?: (string) | undefined;
   /** The aspect ratio of the box, such as `16 / 9`. */
   "--image-aspect"?: (string) | undefined;
+  /** How long the picture takes to fade in once it loads. `0s` shows it at once. */
+  "--image-fade-duration"?: (string) | undefined;
+  /** The background behind the fallback. Defaults to the placeholder's. */
+  "--image-fallback-background-color"?: (string) | undefined;
+  /** The color of the fallback's text. */
+  "--image-fallback-color"?: (string) | undefined;
   /** How the image fills the box, as an `object-fit` value. */
   "--image-fit"?: (string) | undefined;
   /** The background behind the placeholder and the fallback. */
@@ -18059,16 +18913,34 @@ export type CustomCssProperties = {
   "--input-size"?: (string) | undefined;
   /** The fill of the key. */
   "--kbd-background-color"?: (string) | undefined;
+  /** The height of a key, and the least width of one, in `em` of the text around it. */
+  "--kbd-block-size"?: (string) | undefined;
   /** The color of the key's border and its bottom edge. */
   "--kbd-border-color"?: (string) | undefined;
+  /** The color of the key's label. */
+  "--kbd-color"?: (string) | undefined;
+  /** The face of the key's label. Monospaced by default. */
+  "--kbd-font-family"?: (string) | undefined;
+  /** The size of the key's label, in `em` of the text around it. */
+  "--kbd-font-size"?: (string) | undefined;
+  /** The weight of the key's label. */
+  "--kbd-font-weight"?: (string) | undefined;
   /** The space between two keys of a chord under `caps`. */
   "--kbd-gap"?: (string) | undefined;
+  /** The space either side of the key's label. */
+  "--kbd-padding-inline"?: (string) | undefined;
+  /** How far the key's corners are rounded. */
+  "--kbd-radius"?: (string) | undefined;
   /** The color of the `+` between two keys of a chord under `caps`. */
   "--kbd-separator-color"?: (string) | undefined;
+  /** The color of the series names. */
+  "--legend-color"?: (string) | undefined;
   /** The direction the entries run: `row`, which wraps, or `column`. */
   "--legend-direction"?: (string) | undefined;
   /** The space between a swatch and its name. */
   "--legend-entry-gap"?: (string) | undefined;
+  /** The type size of the series names. */
+  "--legend-font-size"?: (string) | undefined;
   /** The space between entries. */
   "--legend-gap"?: (string) | undefined;
   /** How strongly a hidden series' entry is drawn, under `toggles`. */
@@ -18109,6 +18981,8 @@ export type CustomCssProperties = {
   "--line-chart-band-color"?: (string) | undefined;
   /** Height of the drawing. */
   "--line-chart-block-size"?: (string) | undefined;
+  /** The dash pattern of a series `dashed` names, as `stroke-dasharray` takes it. */
+  "--line-chart-dash"?: (string) | undefined;
   /** Space between the drawing and its labels. */
   "--line-chart-gap"?: (string) | undefined;
   /** Color of the rules drawn across the plot under `gridlines`. */
@@ -18153,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. */
@@ -18203,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. */
@@ -18287,6 +19183,10 @@ export type CustomCssProperties = {
   "--menu-min-inline-size"?: (string) | undefined;
   /** Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it. */
   "--menu-shadow"?: (string) | undefined;
+  /** The trigger's width, written on the panel while it is open, as in `min-inline-size: var(--floating-anchor-inline-size)`. Read it; a value set here is written over. */
+  "--floating-anchor-inline-size"?: (string) | undefined;
+  /** The room between the panel and the edge of the screen it opens toward, written on the panel while it is open. Read it; a value set here is written over. */
+  "--floating-available-block-size"?: (string) | undefined;
   /** Color of the heading. */
   "--menu-section-heading-color"?: (string) | undefined;
   /** The fill color. Overrides the band's tone. */
@@ -18309,6 +19209,12 @@ export type CustomCssProperties = {
   "--meter-track-color"?: (string) | undefined;
   /** How long the fill takes to move to a new reading, and to change its color. `0s` moves it at once. */
   "--meter-transition-duration"?: (string) | undefined;
+  /** The color of the reading shown under `show-value`. */
+  "--meter-value-color"?: (string) | undefined;
+  /** The space between the bar and the reading under `show-value`. */
+  "--meter-value-gap"?: (string) | undefined;
+  /** The type size of the reading shown under `show-value`. */
+  "--meter-value-size"?: (string) | undefined;
   /** Where a bound sits on the arc, as a length along it. */
   "--meter-along"?: (string) | undefined;
   /** Where a bound sits on a linear track, as a percentage. */
@@ -18375,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. */
@@ -18425,29 +19333,93 @@ export type CustomCssProperties = {
   "--option-padding"?: (string) | undefined;
   /** The corner radius of the row. A listbox and a select remove it. */
   "--option-radius"?: (string) | undefined;
+  /** The rule's color. */
+  "--option-separator-color"?: (string) | undefined;
+  /** The space above and below the rule. */
+  "--option-separator-space"?: (string) | undefined;
+  /** The rule's thickness. */
+  "--option-separator-thickness"?: (string) | undefined;
   /** The color of the nearest dots. Defaults to `currentColor`. */
   "--orb-color"?: (string) | undefined;
   /** The color the farthest dots fade toward. Defaults to the page's background. */
   "--orb-ground"?: (string) | undefined;
   /** The diameter. Overrides `size`. */
   "--orb-size"?: (string) | undefined;
+  /** The color of the heading in the `heading` slot. */
+  "--outline-heading-color"?: (string) | undefined;
   /** How far each level is inset from the one above. */
   "--outline-indent"?: (string) | undefined;
+  /** The color of the mark that moves to the section in view. */
+  "--outline-indicator-color"?: (string) | undefined;
+  /** The color of a link. */
+  "--outline-link-color"?: (string) | undefined;
+  /** The color of the link to the section in view. */
+  "--outline-link-current-color"?: (string) | undefined;
+  /** The weight of the link to the section in view. */
+  "--outline-link-current-weight"?: (string) | undefined;
+  /** The size of a link's text. */
+  "--outline-link-font-size"?: (string) | undefined;
+  /** The fill behind a link under the pointer. */
+  "--outline-link-hover-background-color"?: (string) | undefined;
+  /** The color of a link under the pointer. */
+  "--outline-link-hover-color"?: (string) | undefined;
+  /** The space above and below a link's text. */
+  "--outline-link-padding-block"?: (string) | undefined;
+  /** The space either side of a link's text, before any indent. */
+  "--outline-link-padding-inline"?: (string) | undefined;
+  /** The corner radius of a link's hover fill. */
+  "--outline-link-radius"?: (string) | undefined;
   /** The width of the gutter that holds the line and the moving mark. */
   "--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. */
   "--pin-input-cell-background-color"?: (string) | undefined;
   /** Edge of each box at rest. Hover, focus and an error still draw their own. */
   "--pin-input-cell-border-color"?: (string) | undefined;
-  /** Edge of the box holding focus. */
+  /** Edge of the box the caret is in. */
   "--pin-input-cell-border-color-focus"?: (string) | undefined;
   /** The color of a typed character. */
   "--pin-input-cell-color"?: (string) | undefined;
@@ -18459,6 +19431,8 @@ export type CustomCssProperties = {
   "--pin-input-cell-size"?: (string) | undefined;
   /** The space between one box and the next. */
   "--pin-input-gap"?: (string) | undefined;
+  /** The color of the `placeholder` text in an empty box. */
+  "--pin-input-placeholder-color"?: (string) | undefined;
   /** The color of the text `format` draws between boxes. */
   "--pin-input-separator-color"?: (string) | undefined;
   /** Size of the point drawn with `arrow`. Tooltip's point is the same size. */
@@ -18483,6 +19457,8 @@ export type CustomCssProperties = {
   "--progress-label-gap"?: (string) | undefined;
   /** Type size of a slotted label. */
   "--progress-label-size"?: (string) | undefined;
+  /** How far the ends of the bar are rounded. */
+  "--progress-radius"?: (string) | undefined;
   /** Diameter of the ring. */
   "--progress-ring-size"?: (string) | undefined;
   /** Thickness of the ring's stroke. */
@@ -18493,18 +19469,30 @@ export type CustomCssProperties = {
   "--progress-track-color"?: (string) | undefined;
   /** How long the fill takes to move to a new value. `0s` moves it at once. */
   "--progress-transition-duration"?: (string) | undefined;
+  /** The color of the value shown under `show-value`. */
+  "--progress-value-color"?: (string) | undefined;
+  /** The space between the bar and the value under `show-value`. */
+  "--progress-value-gap"?: (string) | undefined;
+  /** The type size of the value shown under `show-value`. */
+  "--progress-value-size"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate. */
   "--progress-fraction"?: (string) | undefined;
   /** The fill behind the modules, including the quiet zone and the logo's box. */
   "--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. */
@@ -18561,23 +19549,23 @@ export type CustomCssProperties = {
   "--sandbox-separator-color"?: (string) | undefined;
   /** Fill behind the source. */
   "--sandbox-source-background-color"?: (string) | undefined;
-  /** Color of a `callable` run, under `highlight`. Defaults to `--helix-color-syntax-callable`. */
+  /** Color of a `callable` run, under `tokenize`. Defaults to `--helix-color-syntax-callable`. */
   "--sandbox-source-callable-color"?: (string) | undefined;
-  /** Color of a `comment` run, under `highlight`. Defaults to `--helix-color-syntax-comment`. */
+  /** Color of a `comment` run, under `tokenize`. Defaults to `--helix-color-syntax-comment`. */
   "--sandbox-source-comment-color"?: (string) | undefined;
-  /** Color of a `constant` run, under `highlight`. Defaults to `--helix-color-syntax-constant`. */
+  /** Color of a `constant` run, under `tokenize`. Defaults to `--helix-color-syntax-constant`. */
   "--sandbox-source-constant-color"?: (string) | undefined;
-  /** Color of an `invalid` run, under `highlight`. Defaults to `--helix-color-syntax-invalid`. */
+  /** Color of an `invalid` run, under `tokenize`. Defaults to `--helix-color-syntax-invalid`. */
   "--sandbox-source-invalid-color"?: (string) | undefined;
-  /** Color of a `keyword` run, under `highlight`. Defaults to `--helix-color-syntax-keyword`. */
+  /** Color of a `keyword` run, under `tokenize`. Defaults to `--helix-color-syntax-keyword`. */
   "--sandbox-source-keyword-color"?: (string) | undefined;
   /** Minimum height of the pane. */
   "--sandbox-source-min-block-size"?: (string) | undefined;
-  /** Color of a `name` run, under `highlight`. Defaults to `--helix-color-syntax-name`. */
+  /** Color of a `name` run, under `tokenize`. Defaults to `--helix-color-syntax-name`. */
   "--sandbox-source-name-color"?: (string) | undefined;
-  /** Color of a `string` run, under `highlight`. Defaults to `--helix-color-syntax-string`. */
+  /** Color of a `string` run, under `tokenize`. Defaults to `--helix-color-syntax-string`. */
   "--sandbox-source-string-color"?: (string) | undefined;
-  /** Color of a `tag` run, under `highlight`. Defaults to `--helix-color-syntax-tag`. */
+  /** Color of a `tag` run, under `tokenize`. Defaults to `--helix-color-syntax-tag`. */
   "--sandbox-source-tag-color"?: (string) | undefined;
   /** Color of the bar's text. */
   "--sandbox-status-bar-color"?: (string) | undefined;
@@ -18589,6 +19577,8 @@ export type CustomCssProperties = {
   "--sandbox-toolbar-size"?: (string) | undefined;
   /** Height of the drawing. */
   "--scatter-chart-block-size"?: (string) | undefined;
+  /** Diameter of the largest point under `size-by`. The smallest is `--scatter-chart-point-size`. */
+  "--scatter-chart-bubble-size"?: (string) | undefined;
   /** Space between the drawing and its axes. */
   "--scatter-chart-gap"?: (string) | undefined;
   /** Color of the gridlines across the plot, drawn when `gridlines` is set. */
@@ -18603,6 +19593,8 @@ export type CustomCssProperties = {
   "--scatter-chart-trend-dash"?: (string) | undefined;
   /** The thickness of a line of best fit, under `trend`. */
   "--scatter-chart-trend-width"?: (string) | undefined;
+  /** How large a point is drawn under `size-by`, from 0 to 1, by area. The component writes it, and the stylesheet that sizes the point reads it. */
+  "--chart-point-weight"?: (string) | undefined;
   /** A point's horizontal position, as a percentage. The component writes it. */
   "--chart-point-x"?: (string) | undefined;
   /** A point's vertical position, as a percentage from the top. The component writes it. */
@@ -18695,12 +19687,18 @@ export type CustomCssProperties = {
   "--slider-thumb-ring-color"?: (string) | undefined;
   /** The thumb's size across the track. It equals the length by default, which makes the thumb round. */
   "--slider-thumb-size"?: (string) | undefined;
+  /** The fill of the bubble each thumb shows its value in, under `tooltip`. */
+  "--slider-tooltip-background-color"?: (string) | undefined;
+  /** The color of the value in a thumb's bubble, under `tooltip`. */
+  "--slider-tooltip-color"?: (string) | undefined;
   /** The color of the unfilled part of the track. */
   "--slider-track-color"?: (string) | undefined;
   /** An image for the whole track, such as a gradient for a slider whose value is a color. */
   "--slider-track-image"?: (string) | undefined;
   /** The thickness of the track. It matches the progress bar's size by default. */
   "--slider-track-size"?: (string) | undefined;
+  /** Where a bubble's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` part. */
+  "--slider-at"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. */
   "--slider-fraction"?: (string) | undefined;
   /** Where the filled span starts, as a fraction of the track, 0 to 1: a range's lower thumb, or a single thumb's `origin`. */
@@ -18727,6 +19725,10 @@ export type CustomCssProperties = {
   "--sparkline-mark-ring-color"?: (string) | undefined;
   /** Size of the dot on the reading a pointer or a key rests on, and of the `marks` dots. */
   "--sparkline-mark-size"?: (string) | undefined;
+  /** Fill of the band `range` draws. Without it, the line's color. */
+  "--sparkline-range-color"?: (string) | undefined;
+  /** Opacity of the band `range` draws. */
+  "--sparkline-range-opacity"?: (string) | undefined;
   /** Ground of the reading written above the dot. */
   "--sparkline-readout-background-color"?: (string) | undefined;
   /** Color of the reading written above the dot. */
@@ -18735,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. */
@@ -18751,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. */
@@ -18775,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. */
@@ -18843,6 +19859,8 @@ export type CustomCssProperties = {
   "--table-title-text"?: (string) | undefined;
   /** The column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set `columns` to change the tracks. */
   "--table-template"?: (string) | undefined;
+  /** The wash across the cells of a row with `href` under the pointer. */
+  "--table-row-hover-background-color"?: (string) | undefined;
   /** The space between the tab row and the panel's content. */
   "--tabs-panel-padding-block-start"?: (string) | undefined;
   /** The space between tabs. */
@@ -18887,8 +19905,12 @@ export type CustomCssProperties = {
   "--tag-border-color"?: (string) | undefined;
   /** How strongly a `disabled` tag is drawn. */
   "--tag-disabled-opacity"?: (string) | undefined;
+  /** The weight of the label. */
+  "--tag-font-weight"?: (string) | undefined;
   /** The label color. */
   "--tag-foreground-color"?: (string) | undefined;
+  /** The space between the category, the label and the remove button. */
+  "--tag-gap"?: (string) | undefined;
   /** The corner radius of the tag. */
   "--tag-radius"?: (string) | undefined;
   /** The typeface. Overrides the ramp's. */
@@ -18927,16 +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. */
@@ -18947,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. */
@@ -18983,6 +20037,8 @@ export type CustomCssProperties = {
   "--toggle-item-color-selected"?: (string) | undefined;
   /** Space either side of an item's label. */
   "--toggle-item-padding-inline"?: (string) | undefined;
+  /** How the controls line up across the toolbar's axis. Centered unless set; `stretch` makes a vertical toolbar's controls as wide as it is. */
+  "--toolbar-align"?: (string) | undefined;
   /** The fill behind the controls. Transparent unless set. */
   "--toolbar-background-color"?: (string) | undefined;
   /** The color of the toolbar's edge, once it has a width. */
@@ -18995,16 +20051,22 @@ export type CustomCssProperties = {
   "--toolbar-padding"?: (string) | undefined;
   /** The corner radius of the toolbar's fill. */
   "--toolbar-radius"?: (string) | undefined;
+  /** Extra space either side of a `Divider` between controls, along the toolbar's axis. None unless set. */
+  "--toolbar-separator-gap"?: (string) | undefined;
   /** The size of the arrow on the bubble's edge. */
   "--tooltip-arrow-size"?: (string) | undefined;
   /** The blur behind a `frosted` or `glass` bubble. */
   "--tooltip-backdrop"?: (string) | undefined;
   /** The fill of the bubble. */
   "--tooltip-background-color"?: (string) | undefined;
+  /** The edge of a `frosted` or `glass` bubble, the only kind that draws one. */
+  "--tooltip-border-color"?: (string) | undefined;
   /** The color of the bubble's words. */
   "--tooltip-color"?: (string) | undefined;
   /** The size of the bubble's words. */
   "--tooltip-font-size"?: (string) | undefined;
+  /** The space between two things slotted into the bubble, such as a glyph and its words. */
+  "--tooltip-gap"?: (string) | undefined;
   /** The widest the bubble grows before its text wraps. */
   "--tooltip-max-inline-size"?: (string) | undefined;
   /** The space between the bubble's edge and its words. */
@@ -19091,6 +20153,30 @@ export type CustomCssProperties = {
   "--trend-worse-color"?: (string) | undefined;
   /** The fill behind a row. */
   "--video-playlist-item-background-color"?: (string) | undefined;
+  /** The color of an entry's name. */
+  "--video-playlist-item-color"?: (string) | undefined;
+  /** The fill behind the entry that is playing. */
+  "--video-playlist-item-current-background-color"?: (string) | undefined;
+  /** The color of the bar beside the entry that is playing. */
+  "--video-playlist-item-current-mark-color"?: (string) | undefined;
+  /** The space between the thumbnail and the name. */
+  "--video-playlist-item-gap"?: (string) | undefined;
+  /** The fill behind a row under the pointer. */
+  "--video-playlist-item-hover-background-color"?: (string) | undefined;
+  /** The color of the content in the `meta` slot. */
+  "--video-playlist-item-meta-color"?: (string) | undefined;
+  /** The space above and below a row's content. */
+  "--video-playlist-item-padding-block"?: (string) | undefined;
+  /** The space after a row's content. */
+  "--video-playlist-item-padding-inline-end"?: (string) | undefined;
+  /** The space before a row's content, where the bar beside the playing entry sits. */
+  "--video-playlist-item-padding-inline-start"?: (string) | undefined;
+  /** The corner radius of a row. */
+  "--video-playlist-item-radius"?: (string) | undefined;
+  /** The shape of the thumbnail column. */
+  "--video-playlist-media-aspect-ratio"?: (string) | undefined;
+  /** The corner radius of the thumbnail. */
+  "--video-playlist-media-radius"?: (string) | undefined;
   /** The width of the thumbnail column. */
   "--video-playlist-media-size"?: (string) | undefined;
   /** The color of the trigger. Defaults to the control bar's color. */
@@ -19099,6 +20185,10 @@ export type CustomCssProperties = {
   "--video-playlist-menu-poster"?: (string) | undefined;
   /** The size of the trigger's icon. */
   "--video-playlist-menu-size"?: (string) | undefined;
+  /** The space between the player and the list. */
+  "--video-playlist-gap"?: (string) | undefined;
+  /** The space between the entries. */
+  "--video-playlist-items-gap"?: (string) | undefined;
   /** The grid columns for the player and the list. */
   "--video-playlist-layout"?: (string) | undefined;
   /** The height the list reaches before it scrolls. */
@@ -19197,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,
@@ -19215,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,
@@ -19227,7 +20317,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixButtonVueProps,
     HelixButtonVueEvents
   >;
-  /** The background is a tint of the tone's color, mixed with 'color-mix'. A 'neutral' callout is drawn in the muted ink, for a note that reports no status, so it keeps to the palette whatever the brand. A bar on the inline start edge also marks the tone, so it still shows in grayscale and for people who do not distinguish the hues.  'tone' is set on the headless tier and carries the meaning, and this tier draws it. 'separation' is where the box ends: absent is the tint with the bar, 'outlined' an edge with no fill, and 'plain' the bar and the mark alone.  The inset and the type follow 'data-density', as the controls around a callout do: set it on a region for tighter or looser callouts, or set '--callout-padding' and '--callout-font-size' on one. */
+  /** The background is a tint of the tone's color, mixed with 'color-mix'. A 'neutral' callout is drawn in the muted ink, for a note that reports no status, so it keeps to the palette whatever the brand. A bar on the inline start edge also marks the tone, so it still shows in grayscale and for people who do not distinguish the hues.  'tone' is set on the headless tier and carries the meaning, and this tier draws it. 'separation' is where the box ends: absent is the tint with the bar, 'outlined' an edge with no fill, and 'plain' the bar and the mark alone.  The inset and the type follow 'data-density', as the controls around a callout do: set it on a region for tighter or looser callouts, or on one callout itself, as '<helix-callout data-density="sm">'. That is how one callout is sized, and there is no 'size' beside it. '--callout-padding' and '--callout-font-size' set either to a value of your own. */
   "helix-callout": DefineCustomElement<
     HelixCallout,
     HelixCalloutVueProps,
@@ -19239,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,
@@ -19359,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,
@@ -19443,7 +20533,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixFilterInputVueProps,
     HelixFilterInputVueEvents
   >;
-  /** The host is the flex container and its only child is a slot, so '<helix-flex>' adds no box beyond the '<div>' it replaces.  There is no separate Stack component. For a stack, set 'direction="column"'.  'gap' takes a space token name, so spacing stays on the scale. 'row-gap' and 'column-gap' set one axis each and win over 'gap' on theirs.  'layout' sets up one of three common patterns, and any attribute you also write wins over the pattern's own value:  - 'cluster': items in a wrapping row, centered on one line, such as tags. - 'split': the first item at the start, the last at the end, and any between   them spaced evenly, such as a title and its actions. Put several actions   in a flex of their own so they stay together at the end. Wraps when there   is no room. - 'flank' and 'flank-end': a fixed item beside one that takes the rest, such   as an icon and its text, or a field and its button. The item that takes   the rest stays at least '--flex-flank-min' wide, and the pair stacks once   it cannot. - 'switch': the items share a row while the flex is at least   '--flex-switch-at' wide, and each takes a line of its own below that, such   as cards that stack on a narrow screen. It answers the width the flex is   given, wherever it sits, with no breakpoint to maintain.  Flex is presentation only, so it has no headless tier. */
+  /** The host is the flex container and its only child is a slot, so '<helix-flex>' adds no box beyond the '<div>' it replaces.  There is no separate Stack component. For a stack, set 'direction="column"'.  'gap' takes a space token name, so spacing stays on the scale. 'row-gap' and 'column-gap' set one axis each and win over 'gap' on theirs.  'layout' sets up a common pattern, and any attribute you also write wins over the pattern's own value:  - 'cluster': items in a wrapping row, centered on one line, such as tags. - 'split': the first item at the start, the last at the end, and any between   them spaced evenly, such as a title and its actions. Put several actions   in a flex of their own so they stay together at the end. Wraps when there   is no room. - 'flank' and 'flank-end': a fixed item beside one that takes the rest, such   as an icon and its text, or a field and its button. The item that takes   the rest stays at least '--flex-flank-min' wide, and the pair stacks once   it cannot. - 'switch': the items share a row while the flex is at least   '--flex-switch-at' wide, and each takes a line of its own below that, such   as cards that stack on a narrow screen. It answers the width the flex is   given, wherever it sits, with no breakpoint to maintain.  Flex is presentation only, so it has no headless tier. */
   "helix-flex": DefineCustomElement<
     HelixFlex,
     HelixFlexVueProps,
@@ -19617,7 +20707,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixMapTerrainVueProps,
     HelixMapTerrainVueEvents
   >;
-  /** Styles the trigger and lays out the panel it opens as a grid of columns. What opens and closes the panel comes from the base class. */
+  /** Styles the trigger and lays out the panel it opens as a grid of columns. What opens and closes the panel comes from the base class.  **The panel's contents are laid out by 'helix.css'**, through attributes you write on your own markup: 'data-megamenu-group' on each column, 'data-megamenu-heading' on a column's heading, and 'data-megamenu-item' on a link that carries a title in '<strong>' and a line of description in '<span>' or '<p>', with an icon before them. A plain '<a>' in a group is drawn as a navigation item. Without the attributes the panel holds your markup as you styled it. */
   "helix-megamenu": DefineCustomElement<
     HelixMegamenu,
     HelixMegamenuVueProps,
@@ -19695,13 +20785,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixOptionVueProps,
     HelixOptionVueEvents
   >;
+  /** A hairline across the panel in the list's border color, with a little air either side. */
+  "helix-option-separator": DefineCustomElement<
+    HelixOptionSeparator,
+    HelixOptionSeparatorVueProps,
+    HelixOptionSeparatorVueEvents
+  >;
   /** A cloud of dots drawn to a canvas, with one shape per state:  - 'connecting' and 'thinking': the same leaning sash, differing in how   agitated it is. - 'waiting' and 'done': the same settled ball at different tempos. - 'fetching': a globe with a light moving around it. - 'listening': a closed sphere with a ripple crossing it. - 'working': a ring.  Every state is the same banded grid with different parameters. Changing state interpolates the parameters, so every frame in between is a complete shape. A small change gets less time than a large one, such as a sash becoming a ring. The outline changes first, so the light starts orbiting only after the shape is round.  The cloud does not rotate, and all movement happens inside it. The exception is the light, which travels because a ring of evenly spaced dots looks the same when rotated, so a turning state needs something fixed passing over it.  Colors come from '--orb-color' and '--orb-ground'. Each dot's color is mixed toward the ground color by its depth, so depth holds when the theme changes.  The animation stops when the orb is off screen or in a background tab. With 'prefers-reduced-motion', it draws one still frame.  The orb is styled only and has behavior, which the tier split does not otherwise allow. Its role, name and busy state follow 'state', unless 'announce' makes it a status region, and the rest is drawing dots to a canvas, so there is no structure to restyle. For a drawing of your own, the headless 'Loader' holds the same busy progress bar and its name.  Each state is also a custom state, such as ':state(thinking)' or ':state(done)', so a page can style what sits around an orb by what it shows, whether the state was written as an attribute or set from script. */
   "helix-orb": DefineCustomElement<
     HelixOrb,
     HelixOrbVueProps,
     HelixOrbVueEvents
   >;
-  /** A rule runs down the leading edge, and the current section is highlighted along it.  Set nesting with 'data-level' on each link, using the heading levels: '2' through '6' each add one step of '--outline-indent', and a link without 'data-level' is at the top level. The outline does not read heading levels from the document, because the headings are not always in the document.  Links in a nested '<ul>' take their indentation from your own stylesheet: the outline's styles reach the elements slotted into it and nothing inside them. Write the links flat with 'data-level' for the indentation drawn here, and screen readers still hear them as nested lists.  A heading slotted into 'heading' is set above the links, lined up with them. */
+  /** A rule runs down the leading edge, and the current section is highlighted along it.  Set nesting with 'data-level' on each link, using the heading levels: '2' through '6' each add one step of '--outline-indent', and a link without 'data-level' is at the top level. The outline does not read heading levels from the document, because the headings are not always in the document.  Links in a nested '<ul>' are styled by 'helix.css', since the outline's own styles reach the elements slotted into it and nothing inside them: the lists lose their bullets, each inner list is inset by '--outline-indent', and the links read the same hooks as flat ones. Those rules have no specificity, so any rule of yours wins. Screen readers hear the levels either way.  A heading slotted into 'heading' is set above the links, lined up with them. */
   "helix-outline": DefineCustomElement<
     HelixOutline,
     HelixOutlineVueProps,
@@ -19725,7 +20821,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixPaginationSummaryVueProps,
     HelixPaginationSummaryVueEvents
   >;
-  /** Square boxes at the control height, with space between them so the code reads as separate characters.  The focus ring is on the current box, so you can see which character comes next.  Figures are tabular, so every digit takes the same width and the row does not shift as you type. */
+  /** Square boxes at the control height, with space between them so the code reads as separate characters.  The focus ring is on the box the caret is in, so you can see which character comes next, and the caret is drawn there while it is empty.  Figures are tabular, so every digit takes the same width and the row does not shift as you type. */
   "helix-pin-input": DefineCustomElement<
     HelixPinInput,
     HelixPinInputVueProps,
@@ -19773,7 +20869,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixRatingVueProps,
     HelixRatingVueEvents
   >;
-  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none. */
+  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none.  **A preview says where it is.** It is ':state(loading)' from the moment it has a 'src' until that document can take the example, and again through 'reload()'. It is ':state(failed)' once the example throws an error it does not catch, until the next source is sent, which a frame on 'servePreview' reports. A page draws its own spinner or message from either, such as a sibling shown by 'helix-sandbox-preview:state(failed) + .message'. */
   "helix-sandbox-preview": DefineCustomElement<
     HelixSandboxPreview,
     HelixSandboxPreviewVueProps,
@@ -19785,7 +20881,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixSandboxVueProps,
     HelixSandboxVueEvents
   >;
-  /** A real '<textarea>', so undo, selection, spellcheck suppression, mobile keyboards, and screen reader support come from the platform.  Tab inserts two spaces, so you can indent code. To move focus out of the field, press Escape and then Tab. Shift+Tab moves focus back as it does anywhere else. The field's description says so to a screen reader.  **'highlight' colors the source** with a highlighter you bring, such as one built on Lezer, Prism or Shiki. It is a function from the source to runs of text, each with an optional kind, and the pane draws the runs under a transparent field, so typing, selection and undo stay the textarea's. The kinds are 'callable', 'comment', 'constant', 'invalid', 'keyword', 'name', 'string' and 'tag', each colored by the '--helix-color-syntax-*' token of its name and a hook of its own, such as '--sandbox-source-keyword-color'. A run of any other kind is drawn in the field's own color. Every run with a kind is a 'token' part, and carries its kind as 'data-kind'. */
+  /** A real '<textarea>', so undo, selection, spellcheck suppression, mobile keyboards, and screen reader support come from the platform.  Tab inserts two spaces, so you can indent code. To move focus out of the field, press Escape and then Tab. Shift+Tab moves focus back as it does anywhere else. The field's description says so to a screen reader.  **'tokenize' colors the source** with a highlighter you bring, such as one built on Lezer, Prism or Shiki. It is a function from the source to runs of text, each with an optional kind, and the pane draws the runs under a transparent field, so typing, selection and undo stay the textarea's. The kinds are 'callable', 'comment', 'constant', 'invalid', 'keyword', 'name', 'string' and 'tag', each colored by the '--helix-color-syntax-*' token of its name and a hook of its own, such as '--sandbox-source-keyword-color'. A run of any other kind is drawn in the field's own color. Every run with a kind is a 'token' part, and carries its kind as 'data-kind'. A 'tokenize' that throws leaves the source drawn plain and the field editable, and the error is reported to the page as an uncaught one. */
   "helix-sandbox-source": DefineCustomElement<
     HelixSandboxSource,
     HelixSandboxSourceVueProps,
@@ -19851,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,
@@ -20018,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,