@fusion.dev/helix 0.146.0 → 0.147.0

package/types/vue.d.ts

@@ -92,6 +92,7 @@ import type {
   HelixObjectInspector,
   HelixOptionGroup,
   HelixOption,
+  HelixOptionSeparator,
   HelixOrb,
   HelixOutline,
   HelixPagination,
@@ -223,6 +224,7 @@ import type {
   HelixMapTiltEvent,
   HelixMapZoomEvent,
   HelixToggleEvent,
+  HelixBandEvent,
   HelixReadEvent,
   HelixCompleteEvent,
   HelixPreviewEvent,
@@ -352,18 +354,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 +426,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.
 
@@ -687,6 +693,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 +900,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 +976,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}+`. */
@@ -1262,6 +1304,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;
@@ -1403,33 +1456,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 +1518,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
@@ -2953,6 +2993,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.
 
@@ -3353,6 +3409,12 @@ block lays out. Not for a diff, whose files each scroll on their own. */
 In a diff, each file is named from the patch, and this names a patch that
 carries no name of its own. */
   label?: (HelixCodeBlock["label"]) | undefined;
+  /** The language the code is written in, such as `ts` or `css`, handed to
+`highlight` as its second argument.
+
+Absent hands it an empty string. It draws nothing of its own: the block's
+name is `label`. */
+  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 +3478,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 +3679,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 +3744,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 +3860,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 +3877,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 +4030,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
@@ -4368,7 +4448,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
@@ -5181,7 +5263,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 +5463,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 +5529,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,6 +5762,10 @@ 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 = {};
@@ -6282,6 +6384,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 +6490,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 +7063,17 @@ 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 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 +7090,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 +7524,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 +7629,20 @@ 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 `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 +7665,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 +7759,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 +7821,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 +8059,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 +8306,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 +8481,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 +8582,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 +8662,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 +8802,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
@@ -10164,6 +10352,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 +10406,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 +10451,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 +10523,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.
@@ -10717,7 +10931,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 +11356,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 +11789,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 +11801,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 +11811,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 +11851,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 +11963,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 +11988,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 +12110,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 +12134,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 +12961,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 +13103,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.
@@ -13029,6 +13298,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 +13330,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 +13366,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 +13609,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 +13775,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 +13831,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
@@ -13763,6 +14095,8 @@ export type HelixSplitterVueEvents = {
   "helix-collapse": HelixSplitterHelixCollapseElementEvent;
   /** Fired after the divider settles somewhere new, with the new position. */
   "helix-resized": HelixSplitterHelixResizedElementEvent;
+  /** Fired each time a drag moves the divider, before it settles, as a range input does while it is dragged. Read `position` for where it is now. */
+  input: HelixSplitterElementEvent;
 };
 
 export type HelixStatGroupVueProps = {
@@ -13862,6 +14196,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
@@ -14380,6 +14720,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 +14877,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 +15443,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 +15603,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 +15689,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.
@@ -16546,6 +16906,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 +16937,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 +16960,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 +17090,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 +17227,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 +17261,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 +17576,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 +17700,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 +17730,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 +17744,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 +17768,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. */
@@ -17405,6 +17836,10 @@ 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 the button, in every state. */
@@ -17541,8 +17976,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. */
@@ -17641,6 +18086,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 +18154,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 +18168,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 +18180,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 +18218,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 +18232,38 @@ 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;
+  /** 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;
   /** 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 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. */
@@ -17845,6 +18330,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 +18406,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 +18502,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 +18538,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 +18564,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 +18632,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`. */
@@ -18287,6 +18812,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 +18838,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. */
@@ -18425,16 +18960,46 @@ 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;
   /** Fill behind the page you are on. */
   "--pagination-current-color"?: (string) | undefined;
   /** Space between one control and the next. */
@@ -18443,11 +19008,13 @@ export type CustomCssProperties = {
   "--pagination-hover-color"?: (string) | undefined;
   /** The box every control in the row takes. */
   "--pagination-size"?: (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 +19026,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 +19052,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,6 +19064,12 @@ 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. */
@@ -18561,23 +19138,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 +19166,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 +19182,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 +19276,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 +19314,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. */
@@ -18843,6 +19434,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 +19480,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,6 +19524,8 @@ 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 color of the message under the times, while `feedback` is set. */
+  "--time-picker-feedback-color"?: (string) | undefined;
   /** How tall the list is before it scrolls. */
   "--time-picker-list-block-size"?: (string) | undefined;
   /** Fill behind the times inside a range. */
@@ -18983,6 +19582,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 +19596,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 +19698,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 +19730,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. */
@@ -19227,7 +19862,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,
@@ -19443,7 +20078,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 +20252,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 +20330,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 +20366,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 +20414,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 +20426,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,