@fusion.dev/helix 0.160.0 → 0.162.0

package/types/svelte.d.ts

@@ -157,6 +157,8 @@ declare module 'svelte/elements' {
     'helix-stat': Helix<'helix-stat'>
     'helix-steps': Helix<'helix-steps'>
     'helix-step': Helix<'helix-step'>
+    'helix-strands': Helix<'helix-strands'>
+    'helix-strands-stop': Helix<'helix-strands-stop'>
     'helix-switch': Helix<'helix-switch'>
     'helix-table-cell': Helix<'helix-table-cell'>
     'helix-table-column': Helix<'helix-table-column'>

package/types/vue.d.ts

@@ -127,6 +127,8 @@ import type {
   HelixStat,
   HelixSteps,
   HelixStep,
+  HelixStrands,
+  HelixStrandsStop,
   HelixSwitch,
   HelixTableCell,
   HelixTableColumn,
@@ -190,6 +192,7 @@ import type {
   HelixHistoryEvent,
   HelixPinEvent,
   HelixBeforeToggleEvent,
+  HelixToggleEvent,
   HelixCopyEvent,
   HelixSampleEndEvent,
   HelixSampleStartEvent,
@@ -227,7 +230,6 @@ import type {
   HelixMapRotateEvent,
   HelixMapTiltEvent,
   HelixMapZoomEvent,
-  HelixToggleEvent,
   HelixBandEvent,
   HelixReadEvent,
   HelixCompleteEvent,
@@ -244,6 +246,7 @@ import type {
   HelixBeforeResizeEvent,
   HelixCollapseEvent,
   HelixResizedEvent,
+  HelixStrandsFallbackEvent,
   HelixLoadEvent,
   HelixTourAskEvent,
   HelixTourStatusEvent,
@@ -2454,6 +2457,10 @@ what the controls drive rather than the mechanism. */
   /** The name of the group of controls, read by screen readers, which names
 what the controls drive rather than the mechanism. */
   controlsLabel?: (HelixCanvas["controlsLabel"]) | undefined;
+  /** What screen readers hear after a copy, with `{count}` for the cards copied. */
+  "copied-label"?: (HelixCanvas["copiedLabel"]) | undefined;
+  /** What screen readers hear after a copy, with `{count}` for the cards copied. */
+  copiedLabel?: (HelixCanvas["copiedLabel"]) | undefined;
   /** The board's name where `label` is empty. */
   "fallback-label"?: (HelixCanvas["fallbackLabel"]) | undefined;
   /** The board's name where `label` is empty. */
@@ -2541,6 +2548,10 @@ walk the cards. */
   /** The text announced when a connection's end is picked up, with `{from}` and
 `{to}`. */
   reconnectingLabel?: (HelixCanvas["reconnectingLabel"]) | undefined;
+  /** What screen readers hear after a move or a resize is made again. */
+  "redone-label"?: (HelixCanvas["redoneLabel"]) | undefined;
+  /** What screen readers hear after a move or a resize is made again. */
+  redoneLabel?: (HelixCanvas["redoneLabel"]) | undefined;
   /** What screen readers hear after a key resizes a card, with `{name}` for the
 card and `{width}` and `{height}` for its new size, in the document's
 units. */
@@ -2643,6 +2654,10 @@ told the same. A tone left out is not read. */
   "two-finger-hint-label"?: (HelixCanvas["twoFingerHintLabel"]) | undefined;
   /** The hint shown when one finger swipes over the board with `gestures="cooperative"`. */
   twoFingerHintLabel?: (HelixCanvas["twoFingerHintLabel"]) | undefined;
+  /** What screen readers hear after a move or a resize is undone. */
+  "undone-label"?: (HelixCanvas["undoneLabel"]) | undefined;
+  /** What screen readers hear after a move or a resize is undone. */
+  undoneLabel?: (HelixCanvas["undoneLabel"]) | undefined;
   /** The line shown while the board, with `gestures="activate"`, has the gestures. */
   "using-label"?: (HelixCanvas["usingLabel"]) | undefined;
   /** The line shown while the board, with `gestures="activate"`, has the gestures. */
@@ -3563,6 +3578,10 @@ is the way back, and that is a part inside the shadow tree where a
 stylesheet can already reach it. Measured rather than assumed: `label,
 pinned` after upgrade against `label` from the server. */
   pinned?: (HelixChat["pinned"]) | undefined;
+  /** The words on the button that returns to the newest turn, where `resume` is empty. */
+  "resume-label"?: (HelixChat["resumeLabel"]) | undefined;
+  /** The words on the button that returns to the newest turn, where `resume` is empty. */
+  resumeLabel?: (HelixChat["resumeLabel"]) | undefined;
   /** How near the bottom still counts as being at it, in pixels.
 
 A hook rather than a constant, because the right number depends on how tall
@@ -3922,14 +3941,19 @@ export type HelixCheckboxVueEvents = {
   "helix-before-toggle": HelixCheckboxHelixBeforeToggleElementEvent;
 };
 
-export type HelixCodeBlockVueProps = {
-  /** Whether long lines wrap.
+/** `HelixCodeBlock` component event */
+export type HelixCodeBlockElementEvent<E = Event> = TypedEvent<
+  HelixCodeBlock,
+  E
+>;
+/** `helix-before-toggle` event type */
+export type HelixCodeBlockHelixBeforeToggleElementEvent =
+  HelixCodeBlockElementEvent<HelixBeforeToggleEvent>;
+/** `helix-toggle` event type */
+export type HelixCodeBlockHelixToggleElementEvent =
+  HelixCodeBlockElementEvent<HelixToggleEvent>;
 
-Off by default, so long lines scroll, because a line break can be
-significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
-a log line, a wrap reads better than a scroll. Line numbers keep the lines
-unwrapped, since a wrapped line would take one number and several rows. */
-  wrap?: (HelixCodeBlock["wrap"]) | undefined;
+export type HelixCodeBlockVueProps = {
   /** The name of a block that scrolls, which is a tab stop while it does.
 
 Where the block has a name, the scroller says it too, such as "Code,
@@ -4015,6 +4039,14 @@ copy, which takes the code alone. Reflected, because the stylesheet lays
 the gutter out beside the code. A diff numbers its lines from its hunks
 whether or not this is set. */
   lineNumbers?: (HelixCodeBlock["lineNumbers"]) | undefined;
+  /** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
+Each run is drawn as a band behind its lines. Not for a diff, which marks
+its own changes. */
+  "mark-lines"?: (HelixCodeBlock["markLines"]) | undefined;
+  /** The lines to mark, as numbers and ranges counted from 1, such as `2, 4-6`.
+Each run is drawn as a band behind its lines. Not for a diff, which marks
+its own changes. */
+  markLines?: (HelixCodeBlock["markLines"]) | undefined;
   /** Whether to leave the copy button off.
 
 Negative, which is not a style choice. A boolean attribute is true whenever
@@ -4061,6 +4093,22 @@ Absent is unified, each removal above its replacement, which fits any
 width. `split` sets the old version beside the new one. Optional rather
 than defaulted, so the host carries no attribute the consumer did not write. */
   variant?: (HelixCodeBlock["variant"]) | undefined;
+  /** Whether long lines wrap. Without it they scroll.
+
+Off by default, so long lines scroll, because a line break can be
+significant in code and a wrapped line reads as two. For prose-like code,
+such as a long command or a log line, a wrap reads better than a scroll.
+With `line-numbers`, each number stands beside the line it numbers
+however many rows that line takes. Reflected, because the stylesheet
+wraps the lines. */
+  wrap?: (HelixCodeBlock["wrap"]) | undefined;
+  /** The wrap button's name, which it keeps whether it is pressed or not. */
+  "wrap-label"?: (HelixCodeBlock["wrapLabel"]) | undefined;
+  /** The wrap button's name, which it keeps whether it is pressed or not. */
+  wrapLabel?: (HelixCodeBlock["wrapLabel"]) | undefined;
+  /** Whether the header has a button that wraps the lines and unwraps them. The
+block draws a header for it even with no name. */
+  wrappable?: (HelixCodeBlock["wrappable"]) | undefined;
   /** Turns the code into highlighted markup, which the block draws in place of
 the plain text.
 
@@ -4085,7 +4133,12 @@ read, nor for a diff. */
   highlight?: (HelixCodeBlock["highlight"]) | undefined;
 };
 
-export type HelixCodeBlockVueEvents = {};
+export type HelixCodeBlockVueEvents = {
+  /** The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are. */
+  "helix-before-toggle": HelixCodeBlockHelixBeforeToggleElementEvent;
+  /** Fired after the wrap button changed `wrap`, with the new value in `detail.checked`. */
+  "helix-toggle": HelixCodeBlockHelixToggleElementEvent;
+};
 
 export type HelixCodeVueProps = {};
 
@@ -16282,6 +16335,22 @@ consumer's to set. */
   "corner-label"?: (HelixSplitter["cornerLabel"]) | undefined;
   /** The name of the handle where two dividers cross, read by screen readers. */
   cornerLabel?: (HelixSplitter["cornerLabel"]) | undefined;
+  /** What the handle where two dividers cross says it is set to, both dividers
+at once: `{across}` is where the divider that runs down stands, and
+`{down}` where the one that runs across stands, each a percentage.
+
+**Both, because the handle moves both**, and a number names one: the
+handle's `aria-valuenow` is the divider its `aria-orientation` names, and
+these words are the whole of where it is. */
+  "corner-value-label"?: (HelixSplitter["cornerValueLabel"]) | undefined;
+  /** What the handle where two dividers cross says it is set to, both dividers
+at once: `{across}` is where the divider that runs down stands, and
+`{down}` where the one that runs across stands, each a percentage.
+
+**Both, because the handle moves both**, and a number names one: the
+handle's `aria-valuenow` is the divider its `aria-orientation` names, and
+these words are the whole of where it is. */
+  cornerValueLabel?: (HelixSplitter["cornerValueLabel"]) | undefined;
   /** Which pane starts shut, when `collapsed` is not set. */
   "default-collapsed"?: (HelixSplitter["defaultCollapsed"]) | undefined;
   /** Which pane starts shut, when `collapsed` is not set. */
@@ -16585,6 +16654,64 @@ export type HelixStepVueEvents = {
   "helix-select": HelixStepHelixSelectElementEvent;
 };
 
+/** `HelixStrands` component event */
+export type HelixStrandsElementEvent<E = Event> = TypedEvent<HelixStrands, E>;
+/** `helix-strands-fallback` event type */
+export type HelixStrandsHelixStrandsFallbackElementEvent =
+  HelixStrandsElementEvent<HelixStrandsFallbackEvent>;
+
+export type HelixStrandsVueProps = {
+  /** Where the form sits across the box, as a share of the width: the fan's
+bend or the ribbon's axis. `0` is the left edge and `1` the right. A wave
+crosses the whole width and does not read it. Unset, a fan bends at `0.4`
+and a ribbon runs down the middle.
+
+**A share rather than a length**, so the ribbon keeps its place when the
+box changes shape. Read inside a box only; in `travel` each stop has its
+own. */
+  at?: (HelixStrands["at"]) | undefined;
+  /** How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
+forty. Clamped to that range. */
+  density?: (HelixStrands["density"]) | undefined;
+  /** Overall brightness, as a multiplier on the light. */
+  gain?: (HelixStrands["gain"]) | undefined;
+  /** The share of strands drawn out of focus where the ribbon is wide, from `0`,
+every strand sharp, to `1`, every one soft. Clamped to that range. A tight
+form, such as a fan's bend or a wave, stays sharp whatever this says. */
+  softness?: (HelixStrands["softness"]) | undefined;
+  /** How fast the ribbon moves, as a multiplier on time. `0` holds it still. */
+  speed?: (HelixStrands["speed"]) | undefined;
+  /** How wide the ribbon is, as a multiplier on each form's own width. */
+  spread?: (HelixStrands["spread"]) | undefined;
+  /** Whether the ribbon is laid down the whole page, so scrolling travels along
+it.
+
+Reflected because the stylesheet selects on it: in `travel` the host fixes
+itself to the viewport, behind the page. */
+  travel?: (HelixStrands["travel"]) | undefined;
+  /** The form the ribbon takes. When it is not set, the form is `ribbon`. In
+`travel`, the form of every stretch no stop claims. */
+  variant?: (HelixStrands["variant"]) | undefined;
+};
+
+export type HelixStrandsVueEvents = {
+  /** Fired each time the element stops drawing its ribbon and shows its gradient, with the reason. */
+  "helix-strands-fallback": HelixStrandsHelixStrandsFallbackElementEvent;
+};
+
+export type HelixStrandsStopVueProps = {
+  /** Where the form sits across the page, as a share of the width: the fan's
+bend or the ribbon's axis. A wave crosses the whole width and does not
+read it. Unset, a fan bends at `0.4` and a ribbon runs down the middle. */
+  at?: (HelixStrandsStop["at"]) | undefined;
+  /** The id of the element the form is pinned to, in the same tree as the stop. */
+  for?: (HelixStrandsStop["for"]) | undefined;
+  /** The form the ribbon takes at the element. When it is not set, the form is `ribbon`. */
+  variant?: (HelixStrandsStop["variant"]) | undefined;
+};
+
+export type HelixStrandsStopVueEvents = {};
+
 /** `HelixSwitch` component event */
 export type HelixSwitchElementEvent<E = Event> = TypedEvent<HelixSwitch, E>;
 /** `helix-before-toggle` event type */
@@ -16948,6 +17075,12 @@ export type HelixTableElementEvent<E = Event> = TypedEvent<HelixTable, E>;
 /** `helix-before-reorder` event type */
 export type HelixTableHelixBeforeReorderElementEvent =
   HelixTableElementEvent<HelixBeforeReorderEvent>;
+/** `helix-before-toggle` event type */
+export type HelixTableHelixBeforeToggleElementEvent =
+  HelixTableElementEvent<HelixBeforeToggleEvent>;
+/** `helix-load-more` event type */
+export type HelixTableHelixLoadMoreElementEvent =
+  HelixTableElementEvent<HelixLoadMoreEvent>;
 /** `helix-reorder` event type */
 export type HelixTableHelixReorderElementEvent =
   HelixTableElementEvent<HelixReorderEvent>;
@@ -16963,6 +17096,9 @@ export type HelixTableHelixSortElementEvent =
 /** `helix-sorted` event type */
 export type HelixTableHelixSortedElementEvent =
   HelixTableElementEvent<HelixSortedEvent>;
+/** `helix-toggle` event type */
+export type HelixTableHelixToggleElementEvent =
+  HelixTableElementEvent<HelixToggleEvent>;
 
 export type HelixTableVueProps = {
   /** The text shown and announced when there are no rows and none are loading. */
@@ -17018,6 +17154,12 @@ and a list here would be a second way to say what that says. This table's
 cells are markup, and a table written as rows of cells with no column
 declared in it has nowhere else to be sized from. */
   columns?: (HelixTable["columns"]) | undefined;
+  /** The keys of the rows whose rows are shown at the start, separated by
+commas. Used until `expanded` is set. */
+  "default-expanded"?: (HelixTable["defaultExpanded"]) | undefined;
+  /** The keys of the rows whose rows are shown at the start, separated by
+commas. Used until `expanded` is set. */
+  defaultExpanded?: (HelixTable["defaultExpanded"]) | undefined;
   /** The keys selected at the start, separated by commas. Used until `selected`
 is set. */
   "default-selected"?: (HelixTable["defaultSelected"]) | undefined;
@@ -17052,6 +17194,18 @@ While it is set, a line after the rows shows it, or your own content in the
 `error` slot, in place of the empty and loading lines, and the live region
 says it. */
   errorText?: (HelixTable["errorText"]) | undefined;
+  /** The name of the heading over the disclosure buttons. */
+  "expand-column-label"?: (HelixTable["expandColumnLabel"]) | undefined;
+  /** The name of the heading over the disclosure buttons. */
+  expandColumnLabel?: (HelixTable["expandColumnLabel"]) | undefined;
+  /** The keys of the rows whose rows are shown, separated by commas, in a table
+whose rows nest. A press on a row's disclosure button asks first, and
+`default-expanded` seeds what this element then owns. */
+  expanded?: (HelixTable["expanded"]) | undefined;
+  /** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
+  "expand-row-label"?: (HelixTable["expandRowLabel"]) | undefined;
+  /** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
+  expandRowLabel?: (HelixTable["expandRowLabel"]) | undefined;
   /** The table's name where neither `label` nor an `aria-label` or
 `aria-labelledby` on the host gives it one. */
   "fallback-label"?: (HelixTable["fallbackLabel"]) | undefined;
@@ -17071,6 +17225,12 @@ cells, which is the one way a cell of your markup can take focus. */
 An `aria-label` or `aria-labelledby` on the host names the table too, and
 wins over this. */
   label?: (HelixTable["label"]) | undefined;
+  /** Sends `helix-load-more` once the end of the table comes within a screen
+of view, so you can add the next rows as a reader nears them. */
+  "load-more"?: (HelixTable["loadMore"]) | undefined;
+  /** Sends `helix-load-more` once the end of the table comes within a screen
+of view, so you can add the next rows as a reader nears them. */
+  loadMore?: (HelixTable["loadMore"]) | undefined;
   /** What screen readers hear each time a key moves a held row, in a
 `reorderable` table. `{name}` is the row's words, `{position}` the place it
 would go, counting from 1, and `{count}` the number of rows. */
@@ -17105,6 +17265,12 @@ table moves no row itself: you move your rows on `helix-reorder`. */
   "select-all-label"?: (HelixTable["selectAllLabel"]) | undefined;
   /** The name of the checkbox in the heading that selects every row. */
   selectAllLabel?: (HelixTable["selectAllLabel"]) | undefined;
+  /** The name of the heading over the checkboxes under
+`selection-mode="single"`, where it holds no checkbox of its own. */
+  "select-column-label"?: (HelixTable["selectColumnLabel"]) | undefined;
+  /** The name of the heading over the checkboxes under
+`selection-mode="single"`, where it holds no checkbox of its own. */
+  selectColumnLabel?: (HelixTable["selectColumnLabel"]) | undefined;
   /** The keys of the selected rows, separated by commas.
 
 A reader's press fires `helix-select` first, and refusing it leaves the
@@ -17121,6 +17287,20 @@ rows are chosen, written in the locale, and a language that needs plural
 forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
 {# wybranych} other {# wybranego}}`. */
   selectedLabel?: (HelixTable["selectedLabel"]) | undefined;
+  /** What a press on a row, or in a `grid` table a key that moves to one, does
+to the rows already selected: `toggle`, the default, leaves them to the
+checkboxes, and `replace` selects the row alone. */
+  "selection-behavior"?: (HelixTable["selectionBehavior"]) | undefined;
+  /** What a press on a row, or in a `grid` table a key that moves to one, does
+to the rows already selected: `toggle`, the default, leaves them to the
+checkboxes, and `replace` selects the row alone. */
+  selectionBehavior?: (HelixTable["selectionBehavior"]) | undefined;
+  /** How many rows a `selectable` table selects: `multiple`, the default, or
+`single`, one at a time. */
+  "selection-mode"?: (HelixTable["selectionMode"]) | undefined;
+  /** How many rows a `selectable` table selects: `multiple`, the default, or
+`single`, one at a time. */
+  selectionMode?: (HelixTable["selectionMode"]) | undefined;
   /** The name of a row's checkbox. `{row}` is replaced with the words of the
 row's first cell. */
   "select-row-label"?: (HelixTable["selectRowLabel"]) | undefined;
@@ -17154,6 +17334,10 @@ order has its whole sentence. `{order}` is the deprecated
 export type HelixTableVueEvents = {
   /** Fired when a row is dropped at a new place, in a `reorderable` table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is. */
   "helix-before-reorder": HelixTableHelixBeforeReorderElementEvent;
+  /** Fired from a row when its disclosure button is pressed, with whether it would be open in `detail.checked`. Cancelable: cancel it to keep the row as it is. */
+  "helix-before-toggle": HelixTableHelixBeforeToggleElementEvent;
+  /** Fired, in a table with `load-more`, when the end of the table comes within a screen of view, once for each number of rows. */
+  "helix-load-more": HelixTableHelixLoadMoreElementEvent;
   /** Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen. */
   "helix-reorder": HelixTableHelixReorderElementEvent;
   /** The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection. */
@@ -17164,6 +17348,8 @@ export type HelixTableVueEvents = {
   "helix-sort": HelixTableHelixSortElementEvent;
   /** Fired after the sort order changes, with the new order. */
   "helix-sorted": HelixTableHelixSortedElementEvent;
+  /** Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`. */
+  "helix-toggle": HelixTableHelixToggleElementEvent;
 };
 
 export type HelixTableRowVueProps = {
@@ -17177,6 +17363,10 @@ reached. */
   /** The URL a press on the row follows, which makes the whole row a link.
 Empty, the default, leaves presses to the row's cells. */
   href?: (HelixTableRow["href"]) | undefined;
+  /** The key of the row this one sits under, in a table whose rows nest: that
+row's `value`, or its place among the rows where it has none. Empty, the
+default, is a row at the top. */
+  parent?: (HelixTableRow["parent"]) | 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`. */
@@ -18595,13 +18785,35 @@ Whatever `<time>` accepts, which is a date, a time, both, a duration or a
 week. Unset, the label is written as it was given and nothing claims to
 know what instant it names. */
   datetime?: (HelixTimelineItem["datetime"]) | undefined;
+  /** Marks an event that has not happened yet, such as one that is scheduled.
+The mark is the open circle, and a screen reader hears `pending-label`. */
+  pending?: (HelixTimelineItem["pending"]) | undefined;
+  /** What a screen reader hears for an entry that is `pending`. */
+  "pending-label"?: (HelixTimelineItem["pendingLabel"]) | undefined;
+  /** What a screen reader hears for an entry that is `pending`. */
+  pendingLabel?: (HelixTimelineItem["pendingLabel"]) | undefined;
   /** Writes the time as how long ago it was, or how long until it, from
 `datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
 `short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
 `long`. The words move on as they go stale. */
   relative?: (HelixTimelineItem["relative"]) | undefined;
-  /** The kind of event. It sets the color of the mark and nothing else. */
+  /** The kind of event. It sets the color of the mark, and a screen reader
+hears it as the word `tone-labels` gives it. */
   tone?: (HelixTimelineItem["tone"]) | undefined;
+  /** What a screen reader is told this entry's tone is, such as "Failed".
+Absent is the tone's word in `tone-labels`. */
+  "tone-label"?: (HelixTimelineItem["toneLabel"]) | undefined;
+  /** What a screen reader is told this entry's tone is, such as "Failed".
+Absent is the tone's word in `tone-labels`. */
+  toneLabel?: (HelixTimelineItem["toneLabel"]) | undefined;
+  /** What a screen reader is told each tone is, by the tone's name, written as
+JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
+word is not read, which is `neutral` and `primary` in English. */
+  "tone-labels"?: (HelixTimelineItem["toneLabels"]) | undefined;
+  /** What a screen reader is told each tone is, by the tone's name, written as
+JSON in the attribute: `tone-labels='{"danger":"Failed"}'`. A tone with no
+word is not read, which is `neutral` and `primary` in English. */
+  toneLabels?: (HelixTimelineItem["toneLabels"]) | undefined;
 };
 
 export type HelixTimelineItemVueEvents = {};
@@ -19853,6 +20065,13 @@ Written by the playlist rather than by the entry, the way an option's
 selection is: an entry that made itself current would be a second answer to
 which one is playing. */
   current?: (HelixVideoPlaylistItem["current"]) | undefined;
+  /** Whether the entry holds the playlist's tab stop. Unset, every entry is in
+the tab order, which is what a server renders.
+
+**Written by the playlist, with no attribute, and it reaches the button.**
+The playlist gives the stop to the entry a reader last focused, or to the
+current one, and the arrow keys reach the rest. */
+  focusable?: (HelixVideoPlaylistItem["focusable"]) | undefined;
 };
 
 export type HelixVideoPlaylistItemVueEvents = {
@@ -19920,8 +20139,20 @@ Ignored once `active` is written. */
 
 Ignored once `active` is written. */
   defaultActive?: (HelixVideoPlaylist["defaultActive"]) | undefined;
+  /** What the playlist says while it has no entries. The `empty` slot replaces it. */
+  "empty-label"?: (HelixVideoPlaylist["emptyLabel"]) | undefined;
+  /** What the playlist says while it has no entries. The `empty` slot replaces it. */
+  emptyLabel?: (HelixVideoPlaylist["emptyLabel"]) | undefined;
   /** The list's name, read by screen readers. */
   label?: (HelixVideoPlaylist["label"]) | undefined;
+  /** Stays on an entry when its clip ends, where the playlist would otherwise
+play the next one. The player's controls, a press, and `next()` still
+move. `repeat="one"` still plays the entry again. */
+  "no-advance"?: (HelixVideoPlaylist["noAdvance"]) | undefined;
+  /** Stays on an entry when its clip ends, where the playlist would otherwise
+play the next one. The player's controls, a press, and `next()` still
+move. `repeat="one"` still plays the entry again. */
+  noAdvance?: (HelixVideoPlaylist["noAdvance"]) | undefined;
   /** What the live region says when the playlist moves to another entry.
 `{title}` is the entry's name.
 
@@ -19953,7 +20184,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. `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. */
+  /** The current entry is about to change, and `detail.cause` says why: `press`, `next`, `previous`, `ended`, or `removed`. Cancelable: cancel it to keep the current entry. */
   "helix-before-activate": HelixVideoPlaylistHelixBeforeActivateElementEvent;
   /** The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set. */
   "helix-end": HelixVideoPlaylistHelixEndElementEvent;
@@ -20487,6 +20718,12 @@ export type HelixVirtualListVueProps = {
 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 keys of the items a reader cannot choose or move to, separated by
+commas, as `value` writes keys. Their rows carry `aria-disabled`. */
+  "disabled-keys"?: (HelixVirtualList["disabledKeys"]) | undefined;
+  /** The keys of the items a reader cannot choose or move to, separated by
+commas, as `value` writes keys. Their rows carry `aria-disabled`. */
+  disabledKeys?: (HelixVirtualList["disabledKeys"]) | undefined;
   /** The text of the row shown when there are no items and none are loading,
 where the `empty` slot is empty. Empty, the default, shows no row. */
   "empty-label"?: (HelixVirtualList["emptyLabel"]) | undefined;
@@ -20501,6 +20738,11 @@ right whenever the rows really are one height and is the cheaper of the two. */
   /** The id of the script element that holds the items as JSON. `items` wins
 where both are set. */
   for?: (HelixVirtualList["for"]) | undefined;
+  /** The space between two rows, and between two columns in a grid, in
+pixels. The list counts it in each row's place, so a gap does not walk
+the rows away from the scroll position the way a margin on each row
+would. */
+  gap?: (HelixVirtualList["gap"]) | undefined;
   /** The field of each item that is its key in `value`, as a key or a path of
 keys. Empty reads a string or a number item as its own key, and any
 other item by its place in the set. */
@@ -20536,6 +20778,22 @@ disagree with itself; measuring is what a set of genuinely different
 heights needs and costs a read of each row as it renders. A list of
 one-line rows should leave this alone. */
   measured?: (HelixVirtualList["measured"]) | undefined;
+  /** The narrowest a column of a grid may be, in pixels. Set, the list lays
+out as many columns as fit the box at that width, at least one, and
+follows the box as it resizes, which `columns` then does not decide. */
+  "min-column-width"?: (HelixVirtualList["minColumnWidth"] | `${number}`) | undefined;
+  /** The narrowest a column of a grid may be, in pixels. Set, the list lays
+out as many columns as fit the box at that width, at least one, and
+follows the box as it resizes, which `columns` then does not decide. */
+  minColumnWidth?: (HelixVirtualList["minColumnWidth"]) | undefined;
+  /** What a press does to the items already chosen: `toggle` adds or takes out
+the item, and `replace` selects it alone and lets the arrow keys carry the
+selection, with Control or Command adding or taking out one item. */
+  "selection-behavior"?: (HelixVirtualList["selectionBehavior"]) | undefined;
+  /** What a press does to the items already chosen: `toggle` adds or takes out
+the item, and `replace` selects it alone and lets the arrow keys carry the
+selection, with Control or Command adding or taking out one item. */
+  selectionBehavior?: (HelixVirtualList["selectionBehavior"]) | undefined;
   /** Makes the list a list box a reader chooses from: `single` selects one
 item, and `multiple` any number. Unset is a list a reader reads. */
   "selection-mode"?: (HelixVirtualList["selectionMode"]) | undefined;
@@ -21018,12 +21276,24 @@ export type CustomCssProperties = {
   "--code-block-label-color"?: (string) | undefined;
   /** The line height of the code and its line numbers, as a number or a length. */
   "--code-block-line-height"?: (string) | undefined;
+  /** The band behind the lines `mark-lines` names. The primary color at a wash by default. */
+  "--code-block-mark-color"?: (string) | undefined;
+  /** The edge at the start of a band behind marked lines. The primary color by default. */
+  "--code-block-mark-edge-color"?: (string) | undefined;
   /** The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit. */
   "--code-block-max-block-size"?: (string) | undefined;
   /** The corner radius of the header's top and the block's bottom, which form one shape. */
   "--code-block-radius"?: (string) | undefined;
   /** The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default. */
   "--code-block-removed-color"?: (string) | undefined;
+  /** Written by the block on each `number` in a `wrap` block with `line-numbers`: how tall the line it numbers is laid out. Do not set it. */
+  "--code-block-line-size"?: (string) | undefined;
+  /** Written by the block on each `mark`: how wide the code is, scrolled part included. Do not set it. */
+  "--code-block-mark-inline-size"?: (string) | undefined;
+  /** Written by the block on each `mark`: how tall its run of lines is. Do not set it. */
+  "--code-block-mark-size"?: (string) | undefined;
+  /** Written by the block on each `mark`: how far down the code its run of lines starts. Do not set it. */
+  "--code-block-mark-start"?: (string) | undefined;
   /** Fill behind the fragment. Defaults to the foreground color at 6%, which looks the same on a light page and a dark one. */
   "--code-background-color"?: (string) | undefined;
   /** The fragment's typeface. Defaults to the mono face. */
@@ -22572,6 +22842,14 @@ export type CustomCssProperties = {
   "--steps-progress-track-color"?: (string) | undefined;
   /** How far through the sequence is, as a percentage, written on the `progress` part. */
   "--steps-progress"?: (string) | undefined;
+  /** The color of most strands. Defaults to `--helix-color-primary`. */
+  "--strands-glow"?: (string) | undefined;
+  /** The page the light is added to. Defaults to `--helix-color-background`. */
+  "--strands-ground"?: (string) | undefined;
+  /** The hottest strands, and on a light page the ink the light darkens toward. Defaults to `--helix-color-primary-hover` on a dark page and `--helix-color-primary-active` on a light one. */
+  "--strands-peak"?: (string) | undefined;
+  /** The color of a few strands, for depth. Defaults to `--helix-color-info`. */
+  "--strands-tint"?: (string) | undefined;
   /** Height of the track. The width follows it. */
   "--switch-block-size"?: (string) | undefined;
   /** Color of the icon on the thumb. Without it, the icon is muted while off and takes the on color while on. */
@@ -22614,14 +22892,20 @@ export type CustomCssProperties = {
   "--table-drop-indicator-color"?: (string) | undefined;
   /** The thickness of the line where a moved row would land. */
   "--table-drop-indicator-size"?: (string) | undefined;
+  /** The color of a row's disclosure button, in a table whose rows nest. */
+  "--table-expand-color"?: (string) | undefined;
   /** The color of a row's grip, in a `reorderable` table. */
   "--table-grip-color"?: (string) | undefined;
   /** The opacity of a row's grip while a sort decides the order. */
   "--table-grip-disabled-opacity"?: (string) | undefined;
+  /** How far each step of depth sets a nested row's disclosure cell in. */
+  "--table-indent"?: (string) | undefined;
   /** The opacity of the cells of a `disabled` row. */
   "--table-row-disabled-opacity"?: (string) | undefined;
   /** The wash across the cells of a row with `href` under the pointer. */
   "--table-row-hover-background-color"?: (string) | undefined;
+  /** Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it. */
+  "--table-row-level"?: (string) | undefined;
   /** The space between the tab row and the panel's content. */
   "--tabs-panel-padding-block-start"?: (string) | undefined;
   /** The space between tabs. */
@@ -22980,6 +23264,10 @@ export type CustomCssProperties = {
   "--video-playlist-menu-poster"?: (string) | undefined;
   /** The size of the trigger's icon. */
   "--video-playlist-menu-size"?: (string) | undefined;
+  /** The color of the words shown while there are no entries. */
+  "--video-playlist-empty-color"?: (string) | undefined;
+  /** The space around the words shown while there are no entries. */
+  "--video-playlist-empty-padding"?: (string) | undefined;
   /** The space between the player and the list. */
   "--video-playlist-gap"?: (string) | undefined;
   /** The space between the entries. */
@@ -23010,6 +23298,8 @@ export type CustomCssProperties = {
   "--video-progress"?: (string) | undefined;
   /** How tall the scrolling box is. */
   "--virtual-list-block-size"?: (string) | undefined;
+  /** How faint a row `disabled-keys` names is drawn. */
+  "--virtual-list-disabled-opacity"?: (string) | undefined;
   /** The color of the text in the row shown when there are no items. */
   "--virtual-list-empty-color"?: (string) | undefined;
   /** The space around the text in the row shown when there are no items. */
@@ -23190,7 +23480,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixCheckboxVueProps,
     HelixCheckboxVueEvents
   >;
-  /** The header sits above the code with the copy button at its end, so the button never covers the first line. A block with no name has no header. The button then sits beside the code in space the block keeps clear: an end gutter for code, and a band above the first hunk for a diff.  A diff draws one block per file in the same frame. Each changed line is tinted in its tone at Tag's resting strength, with its '+' or '-' in the tone's ink color, so you can see the change without comparing two pale backgrounds. A split diff stacks its two versions when the file is narrower than about 40rem.  Long lines scroll by default. Set 'wrap' to wrap them instead, for prose-like code such as a long command, and set '--code-block-max-block-size' to cap the height of a long file, which then scrolls. */
+  /** The header sits above the code with the copy button at its end, so the button never covers the first line. A block with no name has no header. The button then sits beside the code in space the block keeps clear: an end gutter for code, and a band above the first hunk for a diff.  A diff draws one block per file in the same frame. Each changed line is tinted in its tone at Tag's resting strength, with its '+' or '-' in the tone's ink color, so you can see the change without comparing two pale backgrounds. A split diff stacks its two versions when the file is narrower than about 40rem.  Long lines scroll by default. Set 'wrap' to wrap them instead, for prose-like code such as a long command, and set '--code-block-max-block-size' to cap the height of a long file, which then scrolls. A line 'mark-lines' names takes a band in the primary color, with an edge at its start. */
   "helix-code-block": DefineCustomElement<
     HelixCodeBlock,
     HelixCodeBlockVueProps,
@@ -23802,6 +24092,18 @@ export interface WcToolkitVueGlobalComponents {
     HelixStepVueProps,
     HelixStepVueEvents
   >;
+  /** Hundreds of thin strands are drawn as one ribbon, and the light they add together is bloomed, so where they converge the ribbon burns hot. The ribbon moves on its own all the time: it sways and breathes, its strands wave and roll over one another, and light runs along them.  Its palette comes from the tokens. The strands are '--helix-color-primary', a few are '--helix-color-info' for depth, and the page they light is '--helix-color-background'. On a light page the light becomes ink, because light added to near-white cannot be seen.  **Three forms, set with 'variant'.** 'fan' is a tight, bright bend with its arms opening to the right. 'ribbon', the default, is a broad, soft ribbon in long curves. 'waves' is sharp strands crossing the full width.  **In its own box, by default.** The element fills the box it is given, the way an image does, and 'at' places the fan's bend or the ribbon's axis across it. Content placed inside sits over the ribbon, in the 'content' part.  **Down the whole page, with 'travel'.** The element fixes itself behind the page, on '--helix-layer-beneath', and lays one ribbon from the top of the page to the bottom, so scrolling travels along it. Put 'helix-strands-stop' elements inside to pin a form to a section: each names an element with 'for' and says which form the ribbon takes there. Between stops the ribbon fills the gap in its own 'variant', and between two waves it turns off screen so each wave reads alone. Set 'z-index' on the element to move it.  The ribbon stops moving in these cases: - 'prefers-reduced-motion' is set. The element shows one still frame, and in   'travel' still follows the scroll, without easing. - The element is off screen or in a background tab.  It shows a gradient from the same tokens in these cases, and matches ':state(fallback)' and sends 'helix-strands-fallback' with the reason: - The renderer draws on the CPU, such as a headless browser or a machine with   no usable GPU. - There is no WebGL, or the browser took the drawing context back.  Strands is styled only and has behavior, as 'Aura' does: its behavior is drawing to a canvas, so there is no structure for a headless version to hold. */
+  "helix-strands": DefineCustomElement<
+    HelixStrands,
+    HelixStrandsVueProps,
+    HelixStrandsVueEvents
+  >;
+  /** Placed inside a 'helix-strands' with 'travel', a stop names an element with 'for' and says which form the ribbon takes when the page reaches it: a 'fan' bending through it, a 'ribbon' passing through 'at', or 'waves' crossing at its top edge. The stops are read in page order, whatever order they are written in, and a stop naming no element is skipped.  A stop draws nothing itself and is never shown.  **Every property is reflected**, because the parent watches its stops' attributes to lay the ribbon out again: a change made from script reaches the page as a change made in markup does. None has a default, so a stop writes nothing it was not given. */
+  "helix-strands-stop": DefineCustomElement<
+    HelixStrandsStop,
+    HelixStrandsStopVueProps,
+    HelixStrandsStopVueEvents
+  >;
   /** A thumb moves along a track. The switch is the one place in Helix where color means "on". A checkbox has a tick, and a switch has no mark, so the fill is what tells the two states apart.  The input is the hit target. It is stretched over the track and made invisible, so the press, the focus, and the label forwarding come from the platform.  The height is '--helix-size-switch', one step above the checkbox's at every density. At the checkbox's height the thumb has two pixels of track around it, and the control looks like a small dash. The width follows the height, so setting '--switch-block-size' widens the switch too and keeps the proportion.  The thumb is an element, the 'thumb' part, and holds an icon for each state: one in the 'on' slot shows while the switch is on, and one in the 'off' slot while it is off. */
   "helix-switch": DefineCustomElement<
     HelixSwitch,