@fusion.dev/helix-headless 0.159.0 → 0.161.0

package/dist/timeline/item/timeline-item.d.ts

@@ -1,5 +1,7 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+/** The kinds of event a timeline entry can be, which `tone` takes. */
+type TimelineTone = 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
 /**
  * @summary One event on a timeline: when it happened, and what it was.
  *
@@ -19,7 +21,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * counting parent, and no script. `Steps` and `Breadcrumbs` work the same way.
  *
  * `tone` sets the kind of event and is the only thing that colors the mark. It
- * uses the same values as `Announcement`.
+ * uses the same values as `Announcement`. **A screen reader hears the tone as
+ * a word**, from `tone-labels`: the mark is an image named "Error",
+ * "Information", "Success" or "Warning", so the color is not the only place
+ * the meaning is. `neutral` and `primary` say nothing unless you name them.
+ *
+ * **`pending` 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`, "Scheduled", with the tone's word.
  *
  * @since 0.1.0
  * @status stable
@@ -29,18 +38,23 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - What happened.
  * @slot marker - The mark on the line. Defaults to a dot, which is the slot's fallback
- * content.
+ * content. A mark you slot is read as the tone's word, where the entry has one.
  * @slot time - When it happened, written the way you want it shown.
  *
  * @csspart content - What happened, and the time above it.
  * @csspart dot - The dot drawn when no marker is slotted.
- * @csspart marker - The mark on the line.
+ * @csspart marker - The mark on the line. An image named by the tone's word, and by `pending-label`, where either applies.
  * @csspart rail - The column that holds the mark and the line. Draw the two halves of the
  * line with `::part(rail)::before` and `::part(rail)::after` in your stylesheet. This
  * tier ships no CSS and renders no extra box for the line.
  * @csspart time - When it happened.
  */
 export declare class HelixHeadlessTimelineItem extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-timeline-item': { toneLabels: { danger: 'Fehler' } } })`.
+     */
+    static words: string;
     /**
      * When it happened, in machine-readable form. Setting it wraps the time in a
      * `<time>` element.
@@ -51,12 +65,10 @@ export declare class HelixHeadlessTimelineItem extends HelixElement {
      */
     datetime: string;
     /**
-     * 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.
+     * 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`.
      */
-    relative?: 'long' | 'narrow' | 'short';
+    pending: boolean;
     /** The time the reading is drawn against, moved on when the words go stale. */
     private readonly clock;
     /**
@@ -69,10 +81,33 @@ export declare class HelixHeadlessTimelineItem extends HelixElement {
     private get moment();
     /** What the reading says at `now`, and when it stops being true. */
     private readingAt;
+    /** What a screen reader hears for an entry that is `pending`. */
+    pendingLabel: string;
     /**
-     * The kind of event. It sets the color of the mark and nothing else.
+     * 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?: 'long' | 'narrow' | 'short';
+    /**
+     * 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?: 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    /**
+     * What a screen reader is told this entry's tone is, such as "Failed".
+     * Absent is the tone's word in `tone-labels`.
+     */
+    toneLabel: string;
+    /**
+     * 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: Partial<Record<TimelineTone, string>>;
+    /** What the mark says: the tone's word and the pending word, where either applies. */
+    private get markName();
     protected willUpdate(changed: PropertyValues): void;
     /**
      * The mark for an entry that slotted none, which the tone decides.
@@ -86,7 +121,8 @@ export declare class HelixHeadlessTimelineItem extends HelixElement {
      * Toned entries are reporting something, so they take the circle with a
      * center, which is `Steps` drawing the stage a reader is standing on. Untoned
      * ones are just things that happened and take the open circle, which is
-     * `Steps` drawing a stage nobody has reached. The same two glyphs in both
+     * `Steps` drawing a stage nobody has reached, and so does a `pending`
+     * entry, which nobody has reached yet either. The same two glyphs in both
      * components rather than two that resemble each other: a shape drawn twice
      * drifts, and these are already the marks a reader has learned one page over.
      */
@@ -98,3 +134,4 @@ declare global {
         'helix-headless-timeline-item': HelixHeadlessTimelineItem;
     }
 }
+export {};

package/dist/timeline/item/timeline-item.js

@@ -4,15 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, hostAria, RelativeClockController, relativeTime, wordsLocale, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, RelativeClockController, relativeTime, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { circle, record } from '@fusion.dev/helix-icons';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixElement {
     constructor() {
         super(...arguments);
         this.datetime = '';
+        this.pending = false;
         this.clock = new RelativeClockController(this, {
             expires: (now) => {
                 const moment = this.moment;
@@ -20,7 +21,16 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
             },
         });
         this.reading = '';
+        this.pendingLabel = 'Scheduled';
+        this.toneLabel = '';
+        this.toneLabels = {
+            danger: 'Error',
+            info: 'Information',
+            success: 'Success',
+            warning: 'Warning',
+        };
     }
+    static { this.words = 'helix-timeline-item'; }
     get moment() {
         if (this.relative === undefined || this.datetime === '') {
             return undefined;
@@ -31,6 +41,10 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
     readingAt(moment, now) {
         return relativeTime(wordsLocale(this), { style: this.relative || 'long' })(moment, now);
     }
+    get markName() {
+        const tone = this.tone === undefined ? '' : this.toneLabel || (this.toneLabels[this.tone] ?? '');
+        return [tone, this.pending ? this.pendingLabel : ''].filter((word) => word !== '').join(', ');
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (['datetime', 'relative'].some((key) => changed.has(key))) {
@@ -41,8 +55,12 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
         hostAria(this.internals, { role: 'listitem' });
     }
     renderMarker() {
-        const icon = this.tone === undefined ? circle : record;
-        return html `<span part="marker"
+        const icon = this.tone === undefined || this.pending ? circle : record;
+        const name = this.markName;
+        return html `<span
+      part="marker"
+      role=${name === '' ? nothing : 'img'}
+      aria-label=${name === '' ? nothing : name}
       ><slot name="marker"
         ><svg part="dot" fill="currentColor" viewBox=${icon.viewBox} aria-hidden="true">
           ${unsafeSVG(icon.content)}
@@ -68,12 +86,26 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
 __decorate([
     property()
 ], HelixHeadlessTimelineItem.prototype, "datetime", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTimelineItem.prototype, "pending", void 0);
+__decorate([
+    words,
+    property({ attribute: 'pending-label' })
+], HelixHeadlessTimelineItem.prototype, "pendingLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimelineItem.prototype, "relative", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimelineItem.prototype, "tone", void 0);
+__decorate([
+    property({ attribute: 'tone-label' })
+], HelixHeadlessTimelineItem.prototype, "toneLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'tone-labels', converter: wordsConverter })
+], HelixHeadlessTimelineItem.prototype, "toneLabels", void 0);
 HelixHeadlessTimelineItem = __decorate([
     customElement('helix-headless-timeline-item')
 ], HelixHeadlessTimelineItem);

package/dist/toggle/group/toggle-group.d.ts

@@ -37,7 +37,7 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * | Right, Down | Moves to the next item, from the last back to the first. In a single group, chooses it. |
  * | Left, Up | Moves to the item before, from the first round to the last. In a single group, chooses it. |
  * | Home, End | Moves to the first or the last item. In a single group, chooses it. |
- * | Space, Enter | Chooses the focused item, or presses or releases it in a multiple group. |
+ * | Space, Enter | Chooses the focused item, or presses or releases it in a multiple group. With `allow-empty-selection`, takes back the chosen item. |
  *
  * Left and Right swap on a right-to-left page, and a disabled item is passed
  * over. A single group is a `radiogroup` of items with `role="radio"` and
@@ -117,6 +117,15 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      * `MixinCollection` records for the same reason.
      */
     private adopt;
+    /**
+     * The items whose `selected` this group has written, which `adopt` passes
+     * over: the mark is this group's answer, and the markup declared nothing.
+     *
+     * Measured before this: in a group with no default, choosing List and then
+     * resetting the form left List chosen and submitted, because `adopt` read
+     * the mark `sync` had put on it as a declaration and made it the default.
+     */
+    private readonly marked;
     /** Marks the chosen item, separately from placing the indicator. */
     private sync;
     /**
@@ -139,6 +148,14 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     private get chosenItem();
     /** Whether several items can be pressed at once. */
     private get multiple();
+    /**
+     * Whether a press on the chosen item, or Space or Enter on it, takes it
+     * back so nothing is chosen, as React Aria's `ToggleButtonGroup` and
+     * Radix's `ToggleGroup` do in a single group. Absent, a single group always
+     * keeps its choice once it has one, as a radio group does. A multiple group
+     * releases a pressed item either way.
+     */
+    allowEmptySelection: boolean;
     /**
      * Whether the group holds a tab stop of its own.
      *

package/dist/toggle/group/toggle-group.js

@@ -11,6 +11,7 @@ import { HelixHeadlessToggle } from '../root/toggle-root.js';
 let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.marked = new WeakSet();
         this.lastFocused = undefined;
         this.noteFocus = (event) => {
             const item = event.target;
@@ -19,6 +20,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
                 this.sync();
             }
         };
+        this.allowEmptySelection = false;
         this.focusable = true;
         this.indicator = new IndicatorController(this, {
             active: () => this.chosenItem,
@@ -40,7 +42,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
                 }
                 const value = event.detail.value;
                 if (!this.multiple) {
-                    this.requestValue(value);
+                    this.requestValue(this.allowEmptySelection && value === this.value ? '' : value);
                     return;
                 }
                 const next = toggleValue(this.values, value, this.items.map((item) => item.value));
@@ -63,7 +65,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         if (this.value !== '' || this.children === undefined) {
             return;
         }
-        const declared = this.items.find((item) => item.selected);
+        const declared = this.items.find((item) => item.defaultSelected || (item.selected && !this.marked.has(item)));
         if (declared) {
             this.defaultValue = declared.value;
         }
@@ -73,6 +75,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         const pressed = new Set(this.values);
         const entry = this.focusable ? this.entry() : undefined;
         for (const item of this.items) {
+            this.marked.add(item);
             item.selected = item === active;
             item.pressed = this.multiple ? pressed.has(item.value) : undefined;
             item.focusable = item === entry;
@@ -192,6 +195,9 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         return html `${inside ? nothing : label}<div part="row"><slot name="start"></slot><div part="track">${inside ? label : nothing}<div part="indicator" aria-hidden="true"></div><slot @slotchange=${this.handleItems}></slot></div><slot name="end"></slot></div>${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: 'allow-empty-selection', type: Boolean })
+], HelixHeadlessToggleGroup.prototype, "allowEmptySelection", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessToggleGroup.prototype, "focusable", void 0);

package/dist/toggle/root/toggle-root.d.ts

@@ -31,9 +31,9 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
  * @event {Event} change - Fired after a toggle button on its own is pressed or released.
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.
  *
- * @csspart item - The radio button.
+ * @csspart item - The button: a radio in a group where one is chosen, and a button with `aria-pressed` on its own or in a group where several can be.
  *
- * @cssstate pressed - The item is pressed, in a group where several can be.
+ * @cssstate pressed - The item is pressed, on its own or in a group where several can be.
  * @cssstate selected - The item is chosen.
  */
 export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {

package/dist/toggle/root/toggle-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
+import { auditName, customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(HelixElement) {
@@ -39,6 +39,7 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
+        auditName(this, () => this.partNamed('item'), 'Give it words in its default slot, an `aria-label`, or a label on the icon it holds.');
     }
     render() {
         const alone = this.alone;

package/dist/video-playlist/item/video-playlist-item.d.ts

@@ -23,12 +23,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/video-playlist
  *
  * @slot - The entry's name.
+ * @slot indicator - A mark shown on the entry that is playing, such as an equalizer icon. Rendered only while the entry is current.
  * @slot media - A thumbnail. Defaults to an image of `poster`.
  * @slot meta - Content after the name, such as a duration or a date.
  *
  * @event {HelixSelectEvent} helix-select - The entry was chosen. Cancelable: cancel it to keep the current entry.
  *
  * @csspart container - The list item that holds the button.
+ * @csspart indicator - The `indicator` slot, at the end of the row, rendered only while the entry is playing. It draws no box until you give it one.
  * @csspart item - The row, which is a button.
  * @csspart item-current - Added to `item` for the entry that is playing.
  * @csspart label - The name and the content after it.
@@ -50,6 +52,15 @@ export declare class HelixHeadlessVideoPlaylistItem extends HelixElement {
      * Prevents the entry from being chosen.
      */
     disabled: boolean;
+    /**
+     * 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?: boolean;
     /**
      * The image shown before this entry plays, also used as the row's thumbnail.
      *

package/dist/video-playlist/item/video-playlist-item.js

@@ -48,6 +48,7 @@ let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extend
         type="button"
         aria-current=${this.current ? 'true' : nothing}
         ?disabled=${this.disabled}
+        tabindex=${this.focusable === false ? '-1' : nothing}
         @click=${this.choose}
       >
         <span part="media">${this.renderMedia()}</span>
@@ -55,6 +56,7 @@ let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extend
           <slot></slot>
           <slot name="meta"></slot>
         </span>
+        ${this.current ? html `<slot name="indicator" part="indicator"></slot>` : nothing}
       </button>
     </div>`;
     }
@@ -65,6 +67,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideoPlaylistItem.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessVideoPlaylistItem.prototype, "focusable", void 0);
 __decorate([
     property()
 ], HelixHeadlessVideoPlaylistItem.prototype, "poster", void 0);

package/dist/video-playlist/menu/video-playlist-menu.d.ts

@@ -72,6 +72,12 @@ export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
      * here. The menu cannot write onto a plain button slotted into it.
      */
     private readonly heardToggle;
+    /**
+     * Puts focus on the entry playing once the menu has opened, as a list of
+     * choices opens on the one chosen. The menu focuses its first row as it
+     * opens, so this follows that.
+     */
+    private focusPlaying;
     private observer;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/video-playlist/menu/video-playlist-menu.js

@@ -21,6 +21,9 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
         this.heardToggle = (event) => {
             if (event.target === event.currentTarget) {
                 this.open = event.newState === 'open';
+                if (this.open) {
+                    this.focusPlaying(event.currentTarget);
+                }
             }
         };
         this.reread = () => {
@@ -37,6 +40,14 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
         };
     }
     static { this.words = 'helix-video-playlist-menu'; }
+    focusPlaying(menu) {
+        void Promise.all([this.updateComplete, menu.updateComplete]).then(() => {
+            const playing = this.renderRoot.querySelector('[part~="entry"][checked]');
+            if (playing && !playing.hasAttribute('disabled')) {
+                playing.focus();
+            }
+        });
+    }
     connectedCallback() {
         super.connectedCallback();
         this.updateComplete.then(() => this.watch());

package/dist/video-playlist/root/video-playlist-root.d.ts

@@ -24,19 +24,31 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * - the player reaches the end.
  *
  * On `ended` the playlist advances and the next clip starts playing, because
- * the user already pressed play once. `repeat` decides what happens at the
+ * 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.** Each entry is a button in the tab order, and 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
+ * **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
@@ -54,12 +66,14 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * @documentation https://fusion.dev/helix/components/video-playlist
  *
  * @slot - The entries.
+ * @slot empty - Shown while the playlist has no entries. Defaults to `empty-label`.
  * @slot player - The player that plays the entries.
  *
  * @event {HelixActivateEvent} helix-activate - 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.
- * @event {HelixBeforeActivateEvent} helix-before-activate - The current entry is about to change. Cancelable: cancel it to keep the current entry.
+ * @event {HelixBeforeActivateEvent} helix-before-activate - 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.
  * @event {HelixEndEvent} helix-end - The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set.
  *
+ * @csspart empty - The box that holds the `empty` slot, drawn while there are no entries.
  * @csspart items - The list of entries.
  * @csspart live - A live region that says which entry plays after the playlist moves.
  * @csspart player - The region that holds the player.
@@ -72,10 +86,20 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      * `registerWords('de', { 'helix-video-playlist': { label: 'Wiedergabeliste' } })`.
      */
     static words: string;
+    /**
+     * What the playlist says while it has no entries. The `empty` slot replaces it.
+     */
+    emptyLabel: string;
     /**
      * The list's name, read by screen readers.
      */
     label: string;
+    /**
+     * 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: boolean;
     /**
      * What the live region says when the playlist moves to another entry.
      * `{title}` is the entry's name.
@@ -140,6 +164,21 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      * shows its start control and waits.
      */
     private chased;
+    /**
+     * The entries' values in the order of the last update, and the one that was
+     * current then. Read when entries leave, to find the neighbor of a current
+     * entry that has gone.
+     */
+    private known;
+    /**
+     * The entry that holds the list's tab stop: the one a reader last focused.
+     * Before they focus one, the current entry holds it.
+     */
+    private stop;
+    /** The entry the player was last pointed at. */
+    private pointed;
+    /** Hears entries arrive and leave, which change no property here. */
+    private watcher;
     /**
      * The player, whichever tag the consumer slotted.
      *
@@ -189,6 +228,19 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      */
     previous(): void;
     private readonly handleSelect;
+    /** An entry that takes focus takes the tab stop with it. */
+    private readonly handleFocusIn;
+    /**
+     * Entries arrived or left. Where the current entry left, the playlist moves
+     * to the entry after it, or to the one before it when it was the last, and
+     * keeps playing where it was playing.
+     */
+    private readonly handleEntries;
+    /**
+     * Gives one entry the tab stop and takes it from the rest: the entry last
+     * focused, then the current entry, then the first that can be chosen.
+     */
+    private placeStop;
     /**
      * The arrow keys, Home and End on an entry move focus to another one.
      *
@@ -220,6 +272,8 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
     private readonly handleEnded;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Asks for the render after a hydration, which can see the entries. */
+    protected firstUpdated(changed: PropertyValues): void;
     /** A shuffle turned off forgets its order, so the next one is new. */
     protected willUpdate(changed: PropertyValues): void;
     /**