@fusion.dev/helix-headless 0.163.0 → 0.165.0

package/types/vue.d.ts

@@ -1555,6 +1555,11 @@ none.
 takes away, where every button was "Dismiss". A label without `{label}` is
 read as written. */
   dismissLabel?: (HelixHeadlessCallout["dismissLabel"]) | undefined;
+  /** Whether the callout is showing. A dismissal nobody canceled turns it
+false and the callout hides itself, and setting it true shows the callout
+again. Not reflected: open is the resting state, so an `open` attribute
+would appear on markup a server sent without it. */
+  open?: (HelixHeadlessCallout["open"]) | undefined;
   /** What kind of attention the passage needs.
 
 `tone` is the axis for what a thing means, and this is a subset of it: a
@@ -1591,7 +1596,7 @@ out keeps its English, and `tone-label` wins over both.
 };
 
 export type HelixHeadlessCalloutVueEvents = {
-  /** The dismiss button was pressed. The callout does not remove itself, so remove it in response. Cancelable. */
+  /** The dismiss button was pressed. Unless a listener cancels it, the callout hides itself, and a listener may remove it instead. Cancelable: cancel it to keep the callout showing. */
   "helix-dismiss": HelixHeadlessCalloutHelixDismissElementEvent;
 };
 
@@ -3175,6 +3180,14 @@ app.ts", as `code-name-label` puts it. */
   "collapse-label"?: (HelixHeadlessCodeBlock["collapseLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
   collapseLabel?: (HelixHeadlessCodeBlock["collapseLabel"]) | undefined;
+  /** In a diff, how many unchanged lines to keep beside each change. Each
+longer run of unchanged lines is folded behind a button that shows it.
+Unset shows every line the diff holds. */
+  "context-lines"?: (HelixHeadlessCodeBlock["contextLines"] | `${number}`) | undefined;
+  /** In a diff, how many unchanged lines to keep beside each change. Each
+longer run of unchanged lines is folded behind a button that shows it.
+Unset shows every line the diff holds. */
+  contextLines?: (HelixHeadlessCodeBlock["contextLines"]) | undefined;
   /** The copy button's name and tooltip text after a copy. */
   "copied-label"?: (HelixHeadlessCodeBlock["copiedLabel"]) | undefined;
   /** The copy button's name and tooltip text after a copy. */
@@ -3213,6 +3226,14 @@ block lays out. Not for a diff, whose files each scroll on their own. */
   "expand-label"?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
   /** The expand button's words while the cap hides lines. */
   expandLabel?: (HelixHeadlessCodeBlock["expandLabel"]) | undefined;
+  /** The words of a button that hides a run of unchanged lines it showed, in a
+diff with `context-lines`. `{count}` is how many, and each language
+writes the forms it has. */
+  "hide-unchanged-label"?: (HelixHeadlessCodeBlock["hideUnchangedLabel"]) | undefined;
+  /** The words of a button that hides a run of unchanged lines it showed, in a
+diff with `context-lines`. `{count}` is how many, and each language
+writes the forms it has. */
+  hideUnchangedLabel?: (HelixHeadlessCodeBlock["hideUnchangedLabel"]) | undefined;
   /** The block's name, usually a file name, drawn in the header.
 
 Absent, the block is named by `language` where there is one. In a diff,
@@ -3288,6 +3309,12 @@ A false boolean reflects as the attribute's absence, so this costs no
 reflected property taking no default is satisfied by the default being
 `false`. */
   noCopy?: (HelixHeadlessCodeBlock["noCopy"]) | undefined;
+  /** The words of a button that shows a folded run of unchanged lines, in a
+diff with `context-lines`. `{count}` is how many. */
+  "show-unchanged-label"?: (HelixHeadlessCodeBlock["showUnchangedLabel"]) | undefined;
+  /** The words of a button that shows a folded run of unchanged lines, in a
+diff with `context-lines`. `{count}` is how many. */
+  showUnchangedLabel?: (HelixHeadlessCodeBlock["showUnchangedLabel"]) | undefined;
   /** How a diff's two versions are arranged. It has no effect without `diff`.
 
 Absent is unified, each removal above its replacement, which fits any
@@ -7322,7 +7349,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
 `narrow` ("3h ago").
 
 The reading refreshes as it goes stale, as `elapsed` does, and the whole
-date is its title. `elapsed` wins where both are set. */
+date is its title. `elapsed` wins where both are set. Written with no
+value, as `elapsed` is, or with a style `Intl` does not know, it reads
+`long`. */
   relative?: (HelixHeadlessFormatDate["relative"]) | undefined;
   /** How the second is written, where a time of day is shown. */
   second?: (HelixHeadlessFormatDate["second"]) | undefined;
@@ -11327,10 +11356,11 @@ one they already know. */
 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. */
+a typed number is rounded to the smallest amount the format shows, as
+React Aria's NumberField does: a field showing dollars keeps the cents
+typed into it, and one with no `format-options` keeps three decimal
+places. `any` puts the number on no grid, as it does in a native number
+field: a step moves by one, and any number in range is valid. */
   step?: (HelixHeadlessNumberInput["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, written in
@@ -11550,6 +11580,12 @@ reader sees the shape of the value before its contents. `0` starts with the
 root closed; a large number opens everything, which on a big value is the
 wall of text this exists to avoid. */
   defaultDepth?: (HelixHeadlessObjectInspector["defaultDepth"]) | undefined;
+  /** What the tree says while there is no value to show, such as before a
+fetch answers. The `empty` slot replaces it. */
+  "empty-label"?: (HelixHeadlessObjectInspector["emptyLabel"]) | undefined;
+  /** What the tree says while there is no value to show, such as before a
+fetch answers. The `empty` slot replaces it. */
+  emptyLabel?: (HelixHeadlessObjectInspector["emptyLabel"]) | undefined;
   /** Text the tree is narrowed to: the entries whose key or value holds it,
 ignoring case, and the branches that lead to them. Empty shows everything. */
   filter?: (HelixHeadlessObjectInspector["filter"]) | undefined;
@@ -11619,6 +11655,12 @@ who set the property. This button is positioned out of the flow and takes no
 room, so nothing selects on it, and reflection exists so that a selector can
 reach a value. */
   noCopy?: (HelixHeadlessObjectInspector["noCopy"]) | undefined;
+  /** What the tree says while a filter matched no entry. The `empty` slot
+replaces it. */
+  "no-matches-label"?: (HelixHeadlessObjectInspector["noMatchesLabel"]) | undefined;
+  /** What the tree says while a filter matched no entry. The `empty` slot
+replaces it. */
+  noMatchesLabel?: (HelixHeadlessObjectInspector["noMatchesLabel"]) | undefined;
   /** What a screen reader hears when a filter matches one entry, where
 `results-label` should not say it. `{count}` is the count. */
   "result-label"?: (HelixHeadlessObjectInspector["resultLabel"]) | undefined;
@@ -17728,17 +17770,43 @@ export type HelixHeadlessVideoPlaylistHelixActivateElementEvent =
 /** `helix-before-activate` event type */
 export type HelixHeadlessVideoPlaylistHelixBeforeActivateElementEvent =
   HelixHeadlessVideoPlaylistElementEvent<HelixBeforeActivateEvent>;
+/** `helix-before-reorder` event type */
+export type HelixHeadlessVideoPlaylistHelixBeforeReorderElementEvent =
+  HelixHeadlessVideoPlaylistElementEvent<HelixBeforeReorderEvent>;
 /** `helix-end` event type */
 export type HelixHeadlessVideoPlaylistHelixEndElementEvent =
   HelixHeadlessVideoPlaylistElementEvent<HelixEndEvent>;
+/** `helix-reorder` event type */
+export type HelixHeadlessVideoPlaylistHelixReorderElementEvent =
+  HelixHeadlessVideoPlaylistElementEvent<HelixReorderEvent>;
 
 export type HelixHeadlessVideoPlaylistVueProps = {
+  /** What screen readers hear when a move is put back, in a `reorderable`
+playlist. `{name}` is the entry's words. */
+  "canceled-label"?: (HelixHeadlessVideoPlaylist["canceledLabel"]) | undefined;
+  /** What screen readers hear when a move is put back, in a `reorderable`
+playlist. `{name}` is the entry's words. */
+  canceledLabel?: (HelixHeadlessVideoPlaylist["canceledLabel"]) | undefined;
+  /** What screen readers hear when a moved entry is let go, in a `reorderable`
+playlist. `{name}` is the entry's words. */
+  "dropped-label"?: (HelixHeadlessVideoPlaylist["droppedLabel"]) | undefined;
+  /** What screen readers hear when a moved entry is let go, in a `reorderable`
+playlist. `{name}` is the entry's words. */
+  droppedLabel?: (HelixHeadlessVideoPlaylist["droppedLabel"]) | undefined;
   /** What the playlist says while it has no entries. The `empty` slot replaces it. */
   "empty-label"?: (HelixHeadlessVideoPlaylist["emptyLabel"]) | undefined;
   /** What the playlist says while it has no entries. The `empty` slot replaces it. */
   emptyLabel?: (HelixHeadlessVideoPlaylist["emptyLabel"]) | undefined;
   /** The list's name, read by screen readers. */
   label?: (HelixHeadlessVideoPlaylist["label"]) | undefined;
+  /** What screen readers hear each time a key moves an entry, in a
+`reorderable` playlist. `{name}` is the entry's words, `{position}` its
+new place, counting from 1, and `{count}` the number of entries. */
+  "moved-label"?: (HelixHeadlessVideoPlaylist["movedLabel"]) | undefined;
+  /** What screen readers hear each time a key moves an entry, in a
+`reorderable` playlist. `{name}` is the entry's words, `{position}` its
+new place, counting from 1, and `{count}` the number of entries. */
+  movedLabel?: (HelixHeadlessVideoPlaylist["movedLabel"]) | 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. */
@@ -17747,6 +17815,12 @@ move. `repeat="one"` still plays the entry again. */
 play the next one. The player's controls, a press, and `next()` still
 move. `repeat="one"` still plays the entry again. */
   noAdvance?: (HelixHeadlessVideoPlaylist["noAdvance"]) | undefined;
+  /** What screen readers hear when a pointer picks up an entry, in a
+`reorderable` playlist. `{name}` is the entry's words. */
+  "picked-up-label"?: (HelixHeadlessVideoPlaylist["pickedUpLabel"]) | undefined;
+  /** What screen readers hear when a pointer picks up an entry, in a
+`reorderable` playlist. `{name}` is the entry's words. */
+  pickedUpLabel?: (HelixHeadlessVideoPlaylist["pickedUpLabel"]) | undefined;
   /** What the live region says when the playlist moves to another entry.
 `{title}` is the entry's name.
 
@@ -17761,6 +17835,10 @@ playlist starts the next one, and the only other trace of that is the
 playlist starts the next one, and the only other trace of that is the
 `aria-current` on a button the reader is not on. */
   playingLabel?: (HelixHeadlessVideoPlaylist["playingLabel"]) | undefined;
+  /** Lets a reader move the entries, with Alt and the arrow keys or by
+dragging one. The playlist moves no entry itself: you move your entries
+on `helix-reorder`. */
+  reorderable?: (HelixHeadlessVideoPlaylist["reorderable"]) | undefined;
   /** What happens when an entry ends with no next one to go to. `one` plays the
 same entry again, and `all` goes from the last entry back to the first.
 Absent, the playlist stops on the last entry and sends `helix-end`.
@@ -17797,8 +17875,12 @@ export type HelixHeadlessVideoPlaylistVueEvents = {
   "helix-activate": HelixHeadlessVideoPlaylistHelixActivateElementEvent;
   /** 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": HelixHeadlessVideoPlaylistHelixBeforeActivateElementEvent;
+  /** An entry was moved to a new place, in a `reorderable` playlist, with every entry's value in the new order in `detail.keys`. Cancelable: cancel it to keep the entry where it is. */
+  "helix-before-reorder": HelixHeadlessVideoPlaylistHelixBeforeReorderElementEvent;
   /** The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set. */
   "helix-end": HelixHeadlessVideoPlaylistHelixEndElementEvent;
+  /** Fired after `helix-before-reorder` when nobody canceled it. Move your entries to the order in `keys`. Cancelable: cancel it to say the move did not happen. */
+  "helix-reorder": HelixHeadlessVideoPlaylistHelixReorderElementEvent;
 };
 
 /** `HelixHeadlessVideo` component event */
@@ -18708,7 +18790,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessButtonVueProps,
     HelixHeadlessButtonVueEvents
   >;
-  /** 'tone' is on the headless tier because it carries meaning. It picks the icon and the icon region's accessible name, so a screen reader announces "Error" for an error callout whether or not the color is seen. Set 'tone-label' to say the name in another language.  The icon is the fallback content of a slot. Slot your own icon to replace it, and the default disappears with no extra check. The tone's name stays on the region around it.  Set 'dismissible' for a note a reader may put away, as Shoelace's 'closable' alert does. The button fires 'helix-dismiss' and the callout stays until a listener removes it, so the page decides whether it comes back.  A callout sets a passage apart inside a document and is read where it sits. For page-level chrome above the masthead that is a live region and can be dismissed, use 'Announcement'. */
+  /** 'tone' is on the headless tier because it carries meaning. It picks the icon and the icon region's accessible name, so a screen reader announces "Error" for an error callout whether or not the color is seen. Set 'tone-label' to say the name in another language.  The icon is the fallback content of a slot. Slot your own icon to replace it, and the default disappears with no extra check. The tone's name stays on the region around it.  Set 'dismissible' for a note a reader may put away, as Shoelace's 'closable' alert does. The button fires 'helix-dismiss', and unless a listener cancels it the callout hides itself: 'open' turns false, ':state(exiting)' holds while its exit animations run, and then it is 'hidden'. Remove it in your listener to take it out of the page, or set 'open' to show it again, which holds ':state(entering)' while it comes back. Focus on its dismiss button moves to the next callout's, or to the tab stop beside it, once it hides.  A callout sets a passage apart inside a document and is read where it sits. For page-level chrome above the masthead that is a live region and can be dismissed, use 'Announcement'. */
   "helix-headless-callout": DefineCustomElement<
     HelixHeadlessCallout,
     HelixHeadlessCalloutVueProps,
@@ -18774,7 +18856,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCheckboxVueProps,
     HelixHeadlessCheckboxVueEvents
   >;
-  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'mark-lines' to mark lines a reader should look at, such as '2, 4-6': the block draws a band behind each run, placed where the lines are laid out, so it follows a highlighter's markup and lines that wrap. Set 'wrap' to wrap long lines rather than scroll them; a gutter then numbers each line where it starts. Set 'wrappable' for a button in the header that turns 'wrap' on and off, pressed while the lines wrap.  The header holds the name, the 'actions' slot, and the copy button. Slot a control into 'actions', such as a button that sets 'wrap' or one that opens the code in an editor, and the block draws a header for it even with no name. 'copy-icon' and 'copied-icon' replace the copy button's two icons. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
+  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'mark-lines' to mark lines a reader should look at, such as '2, 4-6': the block draws a band behind each run, placed where the lines are laid out, so it follows a highlighter's markup and lines that wrap. Set 'wrap' to wrap long lines rather than scroll them; a gutter then numbers each line where it starts. Set 'wrappable' for a button in the header that turns 'wrap' on and off, pressed while the lines wrap.  The header holds the name, the 'actions' slot, and the copy button. Slot a control into 'actions', such as a button that sets 'wrap' or one that opens the code in an editor, and the block draws a header for it even with no name. 'copy-icon' and 'copied-icon' replace the copy button's two icons. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Where a removed line is paired with the added line that replaced it, the words each does not share with the other are the 'changed' part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement. 'context-lines' folds each long run of unchanged lines, keeping that many beside each change, behind a button that shows them and hides them again, as a code host draws a diff written with more context than a reader needs.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
   "helix-headless-code-block": DefineCustomElement<
     HelixHeadlessCodeBlock,
     HelixHeadlessCodeBlockVueProps,
@@ -18792,13 +18874,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessColorInputVueProps,
     HelixHeadlessColorInputVueEvents
   >;
-  /** The picker on its own, with no field around it, for a settings pane or a toolbar. Color Input shows this element in a panel behind a text field.  The saturation and brightness square is two '<input type="range">' elements, laid over the square and made invisible, and the handle is drawn from their values. The keyboard behavior, the announcements, and the touch targets come from the platform, and there is no 'role="application"'.  The picker works in HSB and derives the value from it. A value set from outside is read into the model once. Black is 'brightness: 0', which has no hue or saturation, so a model read back from the value would turn red into gray after you drag to the bottom of the square and back.  The square is one tab stop. In it, the up and down arrows move brightness and the left and right arrows move saturation, and PageUp and PageDown move brightness by ten. The picker sends 'input' as the color moves and 'change' when a drag, a key, a typed value or a preset settles it, as '<input type="color">' does.  A screen reader hears the color's name, such as "vibrant red", after the two numbers on the square and after the number on the hue ramp, and each preset is named by its color. The opacity ramp is heard as a percentage. Set 'color-words' to speak the names in another language.  'label' names the picker, which is then a group with that name, and the square's ramps say it before their own, as "Brand, Saturation". 'hint' writes help under the picker, which the square, the ramps and the value field are described by. Inside Color Input the field carries both.  The presets are a listbox with the current color selected, and one tab stop. The arrow keys move between them, Home and End go to the ends, and Enter, Space or a press chooses one. */
+  /** The picker on its own, with no field around it, for a settings pane or a toolbar. Color Input shows this element in a panel behind a text field.  The saturation and brightness square is two '<input type="range">' elements, laid over the square and made invisible, and the handle is drawn from their values. The keyboard behavior, the announcements, and the touch targets come from the platform, and there is no 'role="application"'.  The picker works in HSB and derives the value from it. A value set from outside is read into the model once. Black is 'brightness: 0', which has no hue or saturation, so a model read back from the value would turn red into gray after you drag to the bottom of the square and back.  The square is one tab stop. In it, the up and down arrows move brightness and the left and right arrows move saturation, by ten with Shift. PageUp and PageDown move brightness by ten, and Home and End move saturation by ten, turned on a right-to-left page as the arrows are, as React Aria's ColorArea does. The picker sends 'input' as the color moves and 'change' when a drag, a key, a typed value or a preset settles it, as '<input type="color">' does.  A screen reader hears the color's name, such as "vibrant red", after the two numbers on the square and after the number on the hue ramp, and each preset is named by its color. The opacity ramp is heard as a percentage. Set 'color-words' to speak the names in another language.  'label' names the picker, which is then a group with that name, and the square's ramps say it before their own, as "Brand, Saturation". 'hint' writes help under the picker, which the square, the ramps and the value field are described by. Inside Color Input the field carries both.  The presets are a listbox with the current color selected, and one tab stop. The arrow keys move between them, Home and End go to the ends, and Enter, Space or a press chooses one. */
   "helix-headless-color-picker": DefineCustomElement<
     HelixHeadlessColorPicker,
     HelixHeadlessColorPickerVueProps,
     HelixHeadlessColorPickerVueEvents
   >;
-  /** The list is a 'Listbox', which handles filtering, the empty state, the highlight, 'aria-activedescendant', and scrolling an option into view. This element handles the field, the panel, and the communication between them.  The typed text and the value are separate. The text is a filter: it narrows the list and is then discarded. The value is the option you choose, and the field then shows that option's text. The filter clears on close, so a reopened combobox starts from the whole list.  Focus stays in the text field. The arrow keys move through the list with the listbox's public 'navigate' method. As typing narrows the list, a screen reader hears how many options are left, such as "3 results". Emptying the field and leaving it clears a single choice.  **Keyboard.**  | Key | What it does | |---|---| | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. | | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. | | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with 'creatable', or takes it with 'allows-custom-value'. On a closed field, submits the form. | | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. | | Tab | Closes the list and moves on. | | Backspace | With 'multiple', on an empty field, removes the last tag. | | Left | With 'multiple', with the caret at the start of the text, moves to the last tag's remove button. Right on a right-to-left page. | | Left, Right on a tag | Move between the tags, and past the last back to the text. | | Delete, Backspace on a tag | Removes the tag. | | Space, Home, End, letters | Edit the text. |  **ARIA.** The input is the 'combobox', named by the label, with 'aria-expanded', 'aria-controls' naming the list, 'aria-autocomplete' ('both' with 'suggest', 'list' otherwise) and 'aria-activedescendant' on the highlighted option. The list is the listbox 'Listbox' describes.  On Apple devices, where VoiceOver does not read the option the field points to, the field says it in a live region as the highlight moves, says how many options there are as the list opens, and says a choice once it is made, as React Aria's combobox does there.  Set 'autocomplete' to let a browser's autofill choose an option.  With 'multiple', each chosen option is a tag in the field with its own remove control. The text is the field's one tab stop, and the arrow keys reach the tags from it. The panel stays open and the filter clears after each choice, so the next choice starts from the whole list.  With 'creatable', the combobox offers a create row and fires 'helix-create'. It does not add the option. The options are your light DOM, and your framework would re-render over an element the combobox inserted, so add the option in your event handler. */
+  /** The list is a 'Listbox', which handles filtering, the empty state, the highlight, 'aria-activedescendant', and scrolling an option into view. This element handles the field, the panel, and the communication between them.  The typed text and the value are separate. The text is a filter: it narrows the list and is then discarded. The value is the option you choose, and the field then shows that option's text. The filter clears on close, so a reopened combobox starts from the whole list.  Focus stays in the text field. The arrow keys move through the list with the listbox's public 'navigate' method. As typing narrows the list, a screen reader hears how many options are left, such as "3 results". Emptying the field and leaving it clears a single choice.  **Keyboard.**  | Key | What it does | |---|---| | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. | | Alt with Down, Alt with Up | Opens the list without moving the highlight, and closes it, choosing nothing. | | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. | | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with 'creatable', or takes it with 'allows-custom-value'. On a closed field, submits the form. | | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. | | Tab | Closes the list and moves on. | | Backspace | With 'multiple', on an empty field, removes the last tag. | | Left | With 'multiple', with the caret at the start of the text, moves to the last tag's remove button. Right on a right-to-left page. | | Left, Right on a tag | Move between the tags, and past the last back to the text. | | Delete, Backspace on a tag | Removes the tag. | | Space, Home, End, letters | Edit the text. |  **ARIA.** The input is the 'combobox', named by the label, with 'aria-expanded', 'aria-controls' naming the list, 'aria-autocomplete' ('both' with 'suggest', 'list' otherwise) and 'aria-activedescendant' on the highlighted option. The list is the listbox 'Listbox' describes.  On Apple devices, where VoiceOver does not read the option the field points to, the field says it in a live region as the highlight moves, says how many options there are as the list opens, and says a choice once it is made, as React Aria's combobox does there.  Set 'autocomplete' to let a browser's autofill choose an option.  With 'multiple', each chosen option is a tag in the field with its own remove control. The text is the field's one tab stop, and the arrow keys reach the tags from it. The panel stays open and the filter clears after each choice, so the next choice starts from the whole list.  With 'creatable', the combobox offers a create row and fires 'helix-create'. It does not add the option. The options are your light DOM, and your framework would re-render over an element the combobox inserted, so add the option in your event handler. */
   "helix-headless-combobox": DefineCustomElement<
     HelixHeadlessCombobox,
     HelixHeadlessComboboxVueProps,
@@ -19140,7 +19222,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationsVueProps,
     HelixHeadlessNotificationsVueEvents
   >;
-  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  The field and its two buttons sit in a 'role="group"' named by the label, and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does.  Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
+  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with an 'inputmode' for a number. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode' keeps a numeric keypad on phones, chosen as React Aria's NumberField chooses it: a keypad with a minus key where the number can be negative, and one with a decimal separator where the format shows a fraction. An iPhone has no keypad with a minus key, so a field that can be negative takes the full keyboard there.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  The field and its two buttons sit in a 'role="group"' named by the label, and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does.  Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
   "helix-headless-number-input": DefineCustomElement<
     HelixHeadlessNumberInput,
     HelixHeadlessNumberInputVueProps,
@@ -19350,7 +19432,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTableColumnVueProps,
     HelixHeadlessTableColumnVueEvents
   >;
-  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  'selection-mode="single"' selects one row at a time: ticking a row lets go of the one before, the heading holds no checkbox, and Shift and Control with A take in nothing more. 'selection-behavior="replace"' makes a press on a row, anywhere but its own controls, select it alone, as a file list does, and in a 'grid' table the arrow keys carry the selection with them. Control or Command with a press adds or takes out the row, and with an arrow moves without selecting. Shift with a press takes in the rows from the one last chosen.  **Nesting rows.** A row with 'parent' sits under the row of that key, as a file sits in a folder. The table then draws a column of disclosure buttons, under a heading named by 'expand-column-label': a row with rows under it has a button named by 'expand-row-label' ("Expand {row}") that says with 'aria-expanded' whether it is open, and the rows under a shut row are not drawn. 'expanded' holds the open rows' keys, comma separated, and 'default-expanded' is where it starts. A press asks with 'helix-before-toggle' and tells with 'helix-toggle', both from the row, so you can refuse it or load the rows on the way. A sort orders the rows under each row among themselves, and in a 'grid' table the table is a 'treegrid' whose rows say their depth.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a disclosure cell | Shows or hides the rows under the row, in a table whose rows nest. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. |  **Loading more.** 'load-more' sends 'helix-load-more' once the end of the table comes within a screen of view, in the box that scrolls it or the page, once for each number of rows: add rows and it can send it again. Set 'loading' while you fetch, and the table asks for nothing until it clears.  When the rows did not load, set 'error-text', such as "The orders did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
+  /** Lays out the rows on a CSS grid, so every column lines up across rows and each row stays a real element that can be styled, hidden, or made interactive. A '<table>' layout aligns columns but limits almost everything else.  A grid of elements has no table structure for assistive technology, so the roles are set explicitly: 'table', 'row', 'cell', 'columnheader', and 'rowheader' for a 'header' cell in a row of values. Rows are 'display: contents', so their cells become items of the one grid.  **Sorting.** A column with 'sortable' and a 'field' draws its heading as a button that sorts the rows by the text of its cells, numbers by their value. Your markup is not reordered: the table draws the rows in the sorted order.  1. Each press cycles the column through ascending, descending, and the    order the rows were written in, which keeps a server's own ranking    reachable. 2. 'helix-sort' asks first, with 'field:direction', or empty for the written    order. Refuse it to keep the order, or to sort the rows yourself and set    'sort'. 3. 'helix-sorted' follows once the order stands, and 'sort' holds it. 4. The heading carries 'aria-sort', and a screen reader hears 'sorted-label'    ("Sorted by Name, ascending") or 'unsorted-label' from a polite region.  Tab reaches each sort button, and Enter or Space presses it.  The 'heading' slot names the table: slot a heading or a line of text into it, and the table is named by its words. An 'aria-label' or 'aria-labelledby' on the host wins over it.  **Selecting.** 'selectable' adds a column of checkboxes.  1. Each row is known by its 'value', or by its place among the rows where it    has none, and 'selected' holds the chosen keys, comma separated, the same    shape 'DataTable' uses. 'default-selected' is where it starts. 2. A row's checkbox is named by 'select-row-label' ("Select {row}") with the    words of the row's first cell. The checkbox in the heading selects every    row, and shows a dash while only some are chosen. 3. 'helix-select' asks first, with every key the change would leave.    Refuse it to keep the selection. 'helix-selected' follows once it stands. 4. A chosen row takes ':state(selected)', and a screen reader hears    'selected-label' ("2 selected") from a polite region.  Tab reaches each checkbox, and Space ticks it. To act on one row, put a link or a button in a cell, or give the row an 'href'.  'selection-mode="single"' selects one row at a time: ticking a row lets go of the one before, the heading holds no checkbox, and Shift and Control with A take in nothing more. 'selection-behavior="replace"' makes a press on a row, anywhere but its own controls, select it alone, as a file list does, and in a 'grid' table the arrow keys carry the selection with them. Control or Command with a press adds or takes out the row, and with an arrow moves without selecting. Shift with a press takes in the rows from the one last chosen.  **Nesting rows.** A row with 'parent' sits under the row of that key, as a file sits in a folder. The table then draws a column of disclosure buttons, under a heading named by 'expand-column-label': a row with rows under it has a button named by 'expand-row-label' ("Expand {row}") that says with 'aria-expanded' whether it is open, and the rows under a shut row are not drawn. 'expanded' holds the open rows' keys, comma separated, and 'default-expanded' is where it starts. A press asks with 'helix-before-toggle' and tells with 'helix-toggle', both from the row, so you can refuse it or load the rows on the way. A sort orders the rows under each row among themselves, and in a 'grid' table the table is a 'treegrid' whose rows say their depth.  **Moving rows.** 'reorderable' adds a column of grips before the checkboxes, under a heading named by 'row-grips-label'.  1. Each row is known by its 'value', or by its place among the rows where it    has none, as for selecting. Give rows a 'value' when they move, so a key    stays with its row. 2. A grip is a button named by 'move-row-label' ("Move {row}") with the    words of the row's first cell. Drag it to move its row, and the page    scrolls near an edge. Or press it with Space, Enter, or a click to pick    the row up, move it with Up, Down, Home, and End, and press it again to    drop it. A click on another row drops it there, and Escape puts it back. 3. 'helix-before-reorder' asks first, and 'helix-reorder' follows with    'keys', every row's key in the new order. **You move the rows**: the    table moves no element of yours, and focus goes back to the moved row's    grip once you have. 4. Each step is said in the table's live region, in words you can change:    'picked-up-label', 'moved-label', 'dropped-label', and 'canceled-label'.    The grips do nothing while a sort is set.  **A grid.** 'grid' makes the table one tab stop that the arrow keys move through cell by cell, the headings included, as React Aria's table is. The table is then a 'grid' and each value a 'gridcell', and the table gives every cell a 'tabindex' so focus can rest on it: set 'grid' only where the cells may carry one.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the headings included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the table. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's links and controls. Escape or F2 moves back to the cell, and Tab moves between the controls of one cell. | | Enter on a cell of a row with 'href' | Follows the row's link. | | Enter, Space on a sortable heading | Sorts by the column. | | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a 'selectable' table. | | Enter or Space on a disclosure cell | Shows or hides the rows under the row, in a table whose rows nest. | | Right on a disclosure cell | Shows the rows under a shut row, and otherwise moves one cell along the row. Left does, on a right-to-left page. | | Left on a disclosure cell | Hides the rows under an open row, and moves to the row this one sits under from any other. | | Enter or Space on a grip cell | Picks the row up, or drops it, in a 'reorderable' table. Up, Down, Home, and End move a row picked up, and Escape puts it back. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | A letter or a word | Moves to the next row whose first cell starts with what you typed. | | Tab | Leaves the table. |  **Loading more.** 'load-more' sends 'helix-load-more' once the end of the table comes within a screen of view, in the box that scrolls it or the page, once for each number of rows: add rows and it can send it again. Set 'loading' while you fetch, and the table asks for nothing until it clears.  When the rows did not load, set 'error-text', such as "The orders did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The CSS custom properties listed for this component are written by it and read by the stylesheet that draws it. Do not set them. Each holds a number the component computes and CSS cannot, so the stylesheet can draw the table without measuring anything. */
   "helix-headless-table": DefineCustomElement<
     HelixHeadlessTable,
     HelixHeadlessTableVueProps,
@@ -19506,7 +19588,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessVideoPlaylistMenuVueProps,
     HelixHeadlessVideoPlaylistMenuVueEvents
   >;
-  /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way.  **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside.  **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when:  - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end.  On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'no-advance' turns that off, and the playlist stays on the entry that ended. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order.  **'helix-before-activate' says why the playlist is moving**, in 'detail.cause': 'press' for an entry or a menu choice, 'next' and 'previous' for the player's controls and the methods, 'ended' at the end of a clip, and 'removed' when the current entry leaves the playlist. Cancel an 'ended' move to show your own "Up next" countdown, then call 'next()'.  **Removing the current entry moves the playlist on**, to the entry after it, or to the one before it when it was the last. A clip that was playing keeps playing in the entry that takes its place.  **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry.  **Keyboard.** The entries take one stop in the tab order: the entry you last focused, or the current entry before you have focused one. Enter or Space plays it. The arrow keys move focus to the entry before or after, and Home and End to the first and the last, passing over disabled entries. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them, and Shift with N or P plays the next or the previous entry. The player's previous and next controls move through the entries in the same order the playlist does.  **What a screen reader hears.** A list named by 'label', with a button for each entry. When the playlist moves to another entry, by a press, by the player's controls, or at the end of a clip, a live region says 'playing-label', "Now playing" and the entry's name. */
+  /** **You slot the player**, so it keeps your appearance, extra controls, captions, and poster treatment. 'Sandbox' takes its preview and 'Menu' its trigger the same way.  **Entries are markup.** React skips properties it would set imperatively during hydration, so an array property on a custom element is missing on the first paint of a server-rendered page. 'using-the-elements.mdx' has the measurement. Markup also makes each entry a real button with its name inside.  **The playlist does not play media.** It sets 'src' on the player and tracks which entry is current. The current entry moves when:  - an entry is pressed, - the player dispatches 'helix-next' or 'helix-previous', or - the player reaches the end.  On 'ended' the playlist advances and the next clip starts playing, because the user already pressed play once. 'no-advance' turns that off, and the playlist stays on the entry that ended. 'repeat' decides what happens at the end: 'one' plays the same entry again, and 'all' goes from the last entry back to the first. Without it, the playlist stops on the last entry and sends 'helix-end'. 'shuffle' plays the entries in a random order, starting from the one that is current, and 'previous' retraces that order.  **'helix-before-activate' says why the playlist is moving**, in 'detail.cause': 'press' for an entry or a menu choice, 'next' and 'previous' for the player's controls and the methods, 'ended' at the end of a clip, and 'removed' when the current entry leaves the playlist. Cancel an 'ended' move to show your own "Up next" countdown, then call 'next()'.  **Removing the current entry moves the playlist on**, to the entry after it, or to the one before it when it was the last. A clip that was playing keeps playing in the entry that takes its place.  **The player is named by the current entry**, and the device's own media controls show the entry as the title. A player you gave a 'label' keeps your name, and only the title follows the entry.  **Keyboard.** The entries take one stop in the tab order: the entry you last focused, or the current entry before you have focused one. Enter or Space plays it. The arrow keys move focus to the entry before or after, and Home and End to the first and the last, passing over disabled entries. The current entry carries 'aria-current'. While focus is on the player, the player's own keys work, and 'Video' lists them, and Shift with N or P plays the next or the previous entry. The player's previous and next controls move through the entries in the same order the playlist does.  **Moving entries.** 'reorderable' lets a reader change the order of the queue:  - Alt with Up or Down moves the focused entry a place, and Alt with Home or   End moves it to either end, as the APG's rearrangeable listbox does.   Focus stays on it. - A pointer drags an entry, with a drop indicator, and the page scrolls near   an edge. A press that does not travel still plays the entry. - A drop sends 'helix-before-reorder', which you can refuse, and then   'helix-reorder', whose 'keys' hold every entry's 'value' in the new order.   **You move the entries**: the playlist moves no element of yours, and the   next entry is the one after the current entry in the order you leave. - Each move is said in the live region, in words you can change:   'moved-label', 'dropped-label', 'canceled-label', and 'picked-up-label'.  **What a screen reader hears.** A list named by 'label', with a button for each entry. When the playlist moves to another entry, by a press, by the player's controls, or at the end of a clip, a live region says 'playing-label', "Now playing" and the entry's name. */
   "helix-headless-video-playlist": DefineCustomElement<
     HelixHeadlessVideoPlaylist,
     HelixHeadlessVideoPlaylistVueProps,

package/types/words.d.ts

@@ -623,6 +623,21 @@ declare module '@fusion.dev/helix-core' {
        * English: `Show all lines`
        */
       expandLabel: Message
+      /**
+       * The words of a button that hides a run of unchanged lines it showed, in a
+       * diff with `context-lines`. `{count}` is how many, and each language
+       * writes the forms it has.
+       *
+       * English: `{count, plural, one {Hide # unchanged line} other {Hide # unchanged lines}}`
+       */
+      hideUnchangedLabel: Message
+      /**
+       * The words of a button that shows a folded run of unchanged lines, in a
+       * diff with `context-lines`. `{count}` is how many.
+       *
+       * English: `{count, plural, one {Show # unchanged line} other {Show # unchanged lines}}`
+       */
+      showUnchangedLabel: Message
       /**
        * The wrap button's name, which it keeps whether it is pressed or not.
        *
@@ -2460,6 +2475,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Copy value`
        */
       copyValueLabel: Message
+      /**
+       * What the tree says while there is no value to show, such as before a
+       * fetch answers. The `empty` slot replaces it.
+       *
+       * English: `Nothing to show`
+       */
+      emptyLabel: Message
       /**
        * The filter field's placeholder and accessible name.
        *
@@ -2482,6 +2504,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `{count, plural, one {# key} other {# keys}}`
        */
       keysLabel: Message
+      /**
+       * What the tree says while a filter matched no entry. The `empty` slot
+       * replaces it.
+       *
+       * English: `No matches`
+       */
+      noMatchesLabel: Message
       /**
        * What a screen reader hears when a filter matches entries. `{count}` is
        * how many, written in the locale, and each language writes the forms it
@@ -3629,6 +3658,20 @@ declare module '@fusion.dev/helix-core' {
       volumeLabel: Message
     }
     'helix-video-playlist': {
+      /**
+       * What screen readers hear when a move is put back, in a `reorderable`
+       * playlist. `{name}` is the entry's words.
+       *
+       * English: `Canceled`
+       */
+      canceledLabel: Message
+      /**
+       * What screen readers hear when a moved entry is let go, in a `reorderable`
+       * playlist. `{name}` is the entry's words.
+       *
+       * English: `Dropped`
+       */
+      droppedLabel: Message
       /**
        * What the playlist says while it has no entries. The `empty` slot replaces it.
        *
@@ -3641,6 +3684,21 @@ declare module '@fusion.dev/helix-core' {
        * English: `Playlist`
        */
       label: Message
+      /**
+       * What screen readers hear each time a key moves an entry, in a
+       * `reorderable` playlist. `{name}` is the entry's words, `{position}` its
+       * new place, counting from 1, and `{count}` the number of entries.
+       *
+       * English: `{name} moved to position {position} of {count}`
+       */
+      movedLabel: Message
+      /**
+       * What screen readers hear when a pointer picks up an entry, in a
+       * `reorderable` playlist. `{name}` is the entry's words.
+       *
+       * English: `Picked up {name}`
+       */
+      pickedUpLabel: Message
       /**
        * What the live region says when the playlist moves to another entry.
        * `{title}` is the entry's name.