@fusion.dev/helix-headless 0.160.0 → 0.161.0

package/dist/table/row/table-row.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, followLink, HelixElement, hostAria, pressedOwnControl, } from '@fusion.dev/helix-core';
-import { dotsSixVertical } from '@fusion.dev/helix-icons';
+import { caretRight, dotsSixVertical } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -17,6 +17,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.isTableRow = true;
         this.disabled = false;
         this.href = '';
+        this.parent = '';
         this.rel = '';
         this.target = '';
         this.value = '';
@@ -29,6 +30,12 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.move = undefined;
         this.gridCell = false;
         this.selectStop = false;
+        this.level = 0;
+        this.branch = false;
+        this.open = false;
+        this.expandLabel = '';
+        this.expandStop = false;
+        this.expandWith = undefined;
         this.columnRules = undefined;
         this.handleClick = (event) => {
             if (this.disabled || this.href === '' || event.button !== 0 || event.defaultPrevented) {
@@ -70,6 +77,10 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         hostAria(this.internals, { role: 'row' });
         this.internals.ariaSelected = this.gridCell && this.selectable ? String(this.selected) : null;
         this.internals.ariaDisabled = this.disabled ? 'true' : null;
+        const tree = this.gridCell && this.level > 0;
+        this.internals.ariaLevel = tree ? String(this.level) : null;
+        this.internals.ariaExpanded = tree && this.branch ? String(this.open) : null;
+        this.toggleState('expanded', this.branch && this.open);
         this.toggleState('selected', this.selectable && this.selected);
         this.toggleState('link', this.href !== '' && !this.disabled);
         this.toggleState('dragging', this.move === 'dragging');
@@ -125,8 +136,30 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
       ><svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsSixVertical.viewBox}>${unsafeSVG(dotsSixVertical.content)}</svg></button
     ></span>`;
     }
+    renderExpand() {
+        if (this.level === 0) {
+            return nothing;
+        }
+        const grid = this.gridCell;
+        return html `<span
+      part="expand"
+      role=${grid ? 'gridcell' : 'cell'}
+      style="--table-row-level: ${this.level}"
+      tabindex=${grid ? (this.expandStop ? '0' : '-1') : nothing}
+      >${this.branch
+            ? html `<button
+              part="expand-button"
+              type="button"
+              tabindex=${grid ? '-1' : nothing}
+              aria-label=${this.expandLabel}
+              aria-expanded=${this.open ? 'true' : 'false'}
+              @click=${() => this.expandWith?.()}
+            ><svg aria-hidden="true" data-mirror fill="currentColor" part="expand-mark" viewBox=${caretRight.viewBox}>${unsafeSVG(caretRight.content)}</svg></button>`
+            : nothing}</span
+    >`;
+    }
     render() {
-        return html `${this.renderGrip()}${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
+        return html `${this.renderGrip()}${this.renderSelect()}${this.renderExpand()}<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
 __decorate([
@@ -135,6 +168,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTableRow.prototype, "href", void 0);
+__decorate([
+    property()
+], HelixHeadlessTableRow.prototype, "parent", void 0);
 __decorate([
     property()
 ], HelixHeadlessTableRow.prototype, "rel", void 0);
@@ -171,6 +207,24 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableRow.prototype, "selectStop", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "level", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "branch", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "open", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "expandLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "expandStop", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "expandWith", void 0);
 HelixHeadlessTableRow = __decorate([
     customElement('helix-headless-table-row')
 ], HelixHeadlessTableRow);

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/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;
     /**