@fusion.dev/helix-headless 0.165.0 → 0.166.0

package/dist/menu/root/menu-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 { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, filterKeeps, focusTarget, HelixElement, HelixFilterEvent, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, markMatches, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -33,8 +33,12 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.backLabel = 'Back';
         this.closeOnSelect = true;
         this.context = false;
+        this.filter = '';
+        this.filterable = false;
+        this.filterLabel = 'Filter';
         this.label = '';
         this.longPressLabel = 'Long press or press Alt+Down to show the menu';
+        this.noResultsText = 'No matches';
         this.offset = 4;
         this.longPress = new LongPress(this, {
             onLongPress: () => {
@@ -68,7 +72,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         });
         this.aria = new AriaForwardController(this, {
             label: true,
-            target: () => this.partNamed('surface'),
+            target: () => this.menuBox,
         });
         this.panel = new PopoverController(this, {
             anchor: () => this.context && this.point
@@ -89,6 +93,11 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             surface: () => this.partNamed('surface'),
         });
         this.settledOnce = false;
+        this.filterPage = null;
+        this.handleFilterInput = (event) => {
+            event.stopPropagation();
+            this.filterBy(event.target.value);
+        };
         this.handleContextMenu = (event) => {
             if (!this.context) {
                 return;
@@ -129,14 +138,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         };
         this.handleFocusIn = (event) => {
             const item = this.items.find((row) => row.contains(event.target));
-            if (!item) {
-                return;
+            if (item) {
+                this.revealRow(item);
             }
-            const holder = this.flies ? this.holderOf(item) : null;
-            const surface = holder
-                ? holder.shadowRoot?.querySelector('[part="surface"]')
-                : this.partNamed('surface');
-            scrollItemIntoView(item, { padding: 4, ...(surface ? { scroller: surface } : {}) });
         };
         this.handleKeydown = (event) => {
             if (!this.open) {
@@ -146,9 +150,23 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             const items = this.items;
             const at = items.findIndex((item) => item.active);
             const along = inlineStep(this, event.key);
+            const typing = this.filterable && event.composedPath()[0] === this.field;
+            const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
             if (event.key === 'Escape') {
                 event.stopPropagation();
-                this.leave();
+                if (!this.filterable || this.filter === '') {
+                    this.leave();
+                }
+                else {
+                    this.filterBy('');
+                }
+            }
+            else if (typing && step !== 0) {
+                const count = items.length;
+                this.reach(items[at < 0 ? (step > 0 ? 0 : count - 1) : (at + step + count) % count]);
+            }
+            else if (typing && event.key === 'Enter') {
+                items[at]?.renderRoot.querySelector('[part="item"]')?.click();
             }
             else if (along === 1 && items[at]?.hasSubmenu) {
                 this.enter(items[at]);
@@ -188,6 +206,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 this.longPress.down(event);
             }
         };
+        this.handleMouseDown = (event) => {
+            if (this.filterable &&
+                this.open &&
+                event.composedPath()[0] !== this.field &&
+                !this.fromTrigger(event)) {
+                event.preventDefault();
+            }
+        };
         this.handlePointerMove = (event) => {
             this.longPress.move(event);
         };
@@ -209,7 +235,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             }
         };
         this.handleHover = (event) => {
-            if (!this.flies || !this.open || event.pointerType !== 'mouse') {
+            if (!(this.flies || this.filterable) || !this.open || event.pointerType !== 'mouse') {
                 return;
             }
             const row = event
@@ -221,7 +247,10 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             this.hovered = row;
             this.grace = undefined;
             if (!row.disabled) {
-                row.focus();
+                this.reach(row);
+            }
+            if (!this.flies) {
+                return;
             }
             clearTimeout(this.hoverTimer);
             this.hoverTimer = setTimeout(() => {
@@ -334,7 +363,53 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     get items() {
         const rows = this.flies ? this.rowsOf(this.keyPage) : this.drilldown.rows;
-        return rows.filter((row) => !row.disabled);
+        return rows.filter((row) => !row.disabled && this.kept(row));
+    }
+    get menuBox() {
+        return this.filterable
+            ? (this.renderRoot?.querySelector('#items') ?? null)
+            : this.partNamed('surface');
+    }
+    get field() {
+        return this.partNamed('search-field');
+    }
+    get filtering() {
+        return this.filterable && this.filter.trim() !== '' && this.filter !== this.refused;
+    }
+    kept(row) {
+        return (!this.filtering ||
+            this.holderOf(row) !== this.filterPage ||
+            filterKeeps(slottedWords(row, ['']), this.filter.trim(), this.filterMatch));
+    }
+    requestFilter(value) {
+        if (value === this.filter) {
+            return;
+        }
+        this.filterPage = this.flies ? this.keyPage : this.drilldown.page;
+        this.refused = this.dispatchEvent(new HelixFilterEvent({ value })) ? undefined : value;
+        this.filter = value;
+    }
+    filterBy(value) {
+        this.requestFilter(value);
+        void this.updateComplete.then(() => this.reach(this.items[0]));
+    }
+    reach(row) {
+        if (!this.filterable) {
+            row?.focus();
+            return;
+        }
+        if (this.highlighted && this.highlighted !== row) {
+            this.highlighted.highlighted = false;
+        }
+        this.highlighted = row;
+        const field = this.field;
+        if (field && 'ariaActiveDescendantElement' in field) {
+            field.ariaActiveDescendantElement = row ?? null;
+        }
+        if (row) {
+            row.highlighted = true;
+            this.revealRow(row);
+        }
     }
     show() {
         this.openAt('first');
@@ -345,7 +420,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
         this.updateComplete.then(() => {
             const items = this.items;
-            (end === 'first' ? items[0] : items[items.length - 1])?.focus();
+            this.field?.focus();
+            this.reach(end === 'first' ? items[0] : items[items.length - 1]);
         });
     }
     hide() {
@@ -355,6 +431,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.panel.hide();
         this.drilldown.reset();
         this.stopHover();
+        this.requestFilter('');
+        this.reach(undefined);
         if (deepContains(this, deepActiveElement())) {
             ;
             (this.context ? (this.returnTo ?? this.trigger) : this.trigger).focus();
@@ -377,18 +455,20 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         if (!this.drilldown.enter(item)) {
             return;
         }
+        this.requestFilter('');
         void this.updateComplete.then(async () => {
             if (!this.flies) {
-                this.items[0]?.focusItem();
+                this.reach(this.items[0]);
                 return;
             }
             await item.updateComplete;
             const first = this.rowsOf(item).find((row) => !row.disabled);
             await first?.updateComplete;
-            first?.focusItem();
+            this.reach(first);
         });
     }
     leave() {
+        this.requestFilter('');
         if (this.flies) {
             const holder = this.keyPage;
             if (!holder) {
@@ -396,7 +476,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 return;
             }
             this.openPage(this.holderOf(holder));
-            this.updateComplete.then(() => holder.focus());
+            this.updateComplete.then(() => this.reach(holder));
             return;
         }
         if (this.drilldown.atRoot) {
@@ -405,7 +485,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
         const leaving = this.drilldown.page;
         this.drilldown.back();
-        this.updateComplete.then(() => leaving?.focus());
+        this.updateComplete.then(() => this.reach(leaving ?? undefined));
+    }
+    revealRow(item) {
+        const holder = this.flies ? this.holderOf(item) : null;
+        const surface = holder
+            ? holder.shadowRoot?.querySelector('[part="surface"]')
+            : this.partNamed('surface');
+        scrollItemIntoView(item, { padding: 4, ...(surface ? { scroller: surface } : {}) });
     }
     handleClosedKeydown(event) {
         if (this.context && event.shiftKey && event.key === 'F10' && this.fromTrigger(event)) {
@@ -462,6 +549,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.addEventListener('focusin', this.handleFocusIn);
         this.addEventListener('contextmenu', this.handleContextMenu);
         this.addEventListener('pointerdown', this.handlePointerDown);
+        this.addEventListener('mousedown', this.handleMouseDown);
         this.addEventListener('pointermove', this.handlePointerMove);
         this.addEventListener('pointerup', this.handlePointerUp);
         this.addEventListener('pointercancel', this.handlePointerCancel);
@@ -484,6 +572,10 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.removeEventListener('focusin', this.handleFocusIn);
         this.removeEventListener('contextmenu', this.handleContextMenu);
         this.removeEventListener('pointerdown', this.handlePointerDown);
+        this.removeEventListener('mousedown', this.handleMouseDown);
+        if (this.filterable) {
+            markMatches(this, [], '');
+        }
         this.removeEventListener('pointermove', this.handlePointerMove);
         this.removeEventListener('pointerup', this.handlePointerUp);
         this.removeEventListener('pointercancel', this.handlePointerCancel);
@@ -505,7 +597,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         const top = this.flies || this.drilldown.atRoot;
         for (const child of this.children) {
             if (isSection(child)) {
-                child.onPage = top;
+                child.onPage =
+                    top &&
+                        (!this.filtering || [...child.children].some((row) => isItem(row) && this.kept(row)));
                 for (const row of child.children) {
                     if (row.isMenuItem === true) {
                         this.mark(row, top);
@@ -522,9 +616,18 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.toggleState('drilled', !this.flies && !this.drilldown.atRoot);
         this.markColumns();
         this.nameSurface();
+        if (this.filterable) {
+            markMatches(this, this.rowsOf(this.filterPage).filter((row) => this.kept(row)), this.filtering ? this.filter.trim() : '');
+            const items = this.items;
+            if (changed.has('filter') &&
+                this.open &&
+                !items.includes(this.highlighted)) {
+                this.reach(items[0]);
+            }
+        }
     }
     nameSurface() {
-        const surface = this.partNamed('surface');
+        const surface = this.menuBox;
         if (!surface || !('ariaLabelledByElements' in surface)) {
             return;
         }
@@ -544,7 +647,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     mark(item, onPage) {
         const page = this.drilldown.page;
-        item.onPage = onPage;
+        item.onPage = onPage && this.kept(item);
+        item.virtual = this.filterable;
         const holds = page !== null && item.contains(page);
         item.flyout = this.flies;
         item.expanded = this.flies && holds;
@@ -553,7 +657,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             for (const child of item.children) {
                 const nested = child;
                 if (nested.isMenuItem === true && child.slot === 'submenu') {
-                    this.mark(nested, onPage && holds);
+                    this.mark(nested, item.onPage && holds);
                 }
             }
             return;
@@ -568,6 +672,32 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     render() {
         const point = this.context && this.point;
+        const filtering = this.filtering;
+        const none = filtering && !this.rowsOf(this.filterPage).some((row) => this.kept(row));
+        this.announced = none ? this.noResultsText : '';
+        const rows = html `${this.flies || this.drilldown.atRoot
+            ? nothing
+            : html `<div part="header">
+            <button
+              part="back"
+              type="button"
+              role="menuitem"
+              tabindex="-1"
+              aria-label=${this.backLabel}
+              @click=${() => this.leave()}
+            >
+              <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+                ${unsafeSVG(caretLeft.content)}
+              </svg>
+            </button>
+            <span part="title">${this.drilldown.label}</span>
+          </div>`}
+      <slot @slotchange=${(event) => this.countRows(event)}></slot>
+      ${none
+            ? html `<p part="empty"><slot name="no-results">${this.noResultsText}</slot></p>`
+            : this.renderStatus(this.hasRows)}`;
+        const busy = this.loading ? 'true' : nothing;
+        const label = this.label || nothing;
         return html `<slot name="trigger" @click=${this.handleTriggerClick}></slot>${point
             ? html `<span
             id="point"
@@ -578,31 +708,27 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
       <div
         part="surface"
         popover="manual"
-        role="menu"
-        aria-busy=${this.loading ? 'true' : nothing}
-        aria-label=${this.label || nothing}
+        role=${this.filterable ? nothing : 'menu'}
+        aria-busy=${this.filterable ? nothing : busy}
+        aria-label=${this.filterable ? nothing : label}
         data-drilled=${this.flies || this.drilldown.atRoot ? nothing : ''}
+        data-filtered=${filtering ? '' : nothing}
         ?hidden=${!this.open}
       >
-        ${this.flies || this.drilldown.atRoot
-            ? nothing
-            : html `<div part="header">
-                <button
-                  part="back"
-                  type="button"
-                  role="menuitem"
-                  tabindex="-1"
-                  aria-label=${this.backLabel}
-                  @click=${() => this.leave()}
-                >
-                  <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
-                    ${unsafeSVG(caretLeft.content)}
-                  </svg>
-                </button>
-                <span part="title">${this.drilldown.label}</span>
-              </div>`}
-        <slot @slotchange=${(event) => this.countRows(event)}></slot>
-        ${this.renderStatus(this.hasRows)}
+        ${this.filterable
+            ? html `<input
+                  part="search-field"
+                  type="text"
+                  autocomplete="off"
+                  spellcheck="false"
+                  .value=${this.filter}
+                  placeholder=${this.filterLabel}
+                  aria-label=${this.filterLabel}
+                  aria-autocomplete="list"
+                  aria-controls="items"
+                  @input=${this.handleFilterInput}
+                /><div id="items" role="menu" aria-busy=${busy} aria-label=${label}>${rows}</div>`
+            : rows}
       </div>${this.renderLive(this.hasRows)}`;
     }
 };
@@ -616,6 +742,19 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenu.prototype, "context", void 0);
+__decorate([
+    property()
+], HelixHeadlessMenu.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMenu.prototype, "filterable", void 0);
+__decorate([
+    words,
+    property({ attribute: 'filter-label' })
+], HelixHeadlessMenu.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessMenu.prototype, "filterMatch", void 0);
 __decorate([
     property()
 ], HelixHeadlessMenu.prototype, "label", void 0);
@@ -623,6 +762,10 @@ __decorate([
     words,
     property({ attribute: 'long-press-label' })
 ], HelixHeadlessMenu.prototype, "longPressLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'no-results-text' })
+], HelixHeadlessMenu.prototype, "noResultsText", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMenu.prototype, "offset", void 0);

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -390,6 +390,11 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private counted;
     /** Says how many entries the filter matched, and nothing for an empty one. */
     private tell;
+    /**
+     * Moves focus to the row the keys move from, or to the tree while that row
+     * is scrolled out of the window, as Tab reaches them.
+     */
+    focus(options?: FocusOptions): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**

package/dist/object-inspector/root/object-inspector-root.js

@@ -268,6 +268,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.status.say(this.counted('result', this.found.size));
         }
     }
+    focus(options) {
+        this.renderRoot
+            ?.querySelector('#tree[tabindex="0"], #tree [tabindex="0"]')
+            ?.focus(options);
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();

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

@@ -158,6 +158,13 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * calls to `next()` in one task then move two stages.
      */
     private get at();
+    /**
+     * Requests a new current stage, and returns whether it moved.
+     *
+     * Where only a step's `current` says where the reader is, `active` is first
+     * written with that step, so `helix-activate` names it as `previous`.
+     */
+    requestActive(next: string, cause?: string): boolean;
     /**
      * Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
      * does. Returns whether it moved: not past the last stage, not into a stage

package/dist/steps/root/steps-root.js

@@ -65,6 +65,13 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         const item = this.resolveActive(steps);
         return item ? steps.indexOf(item) : -1;
     }
+    requestActive(next, cause) {
+        const here = this.active === '' ? this.steps[this.at]?.value : undefined;
+        if (here) {
+            this.active = here;
+        }
+        return super.requestActive(next, cause);
+    }
     next() {
         return this.step(1);
     }

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

@@ -115,6 +115,7 @@ import '../../menu/index.js';
  * @csspart captions-menu-header - The bar above a submenu, holding the way back and its name.
  * @csspart captions-menu-live - The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
  * @csspart captions-menu-loading - The text shown while the items are loading.
+ * @csspart captions-menu-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart captions-menu-surface - The floating panel the menu is drawn on.
  * @csspart captions-menu-title - The name of the submenu that is showing.
  * @csspart controls - The control bar along the bottom.
@@ -148,6 +149,7 @@ import '../../menu/index.js';
  * @csspart overflow-header - The bar above a submenu, holding the way back and its name.
  * @csspart overflow-live - The inner menu's `live` part, a live region that repeats the empty and loading text for screen readers.
  * @csspart overflow-loading - The text shown while the items are loading.
+ * @csspart overflow-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart overflow-surface - The floating panel the menu is drawn on.
  * @csspart overflow-title - The name of the submenu that is showing.
  * @csspart pip - The picture-in-picture button, when `extra-controls` includes it and the browser supports it.

package/dist/video/root/video-root.js

@@ -594,7 +594,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         return html `<${this.tag('menu')} part="captions-menu"
     exportparts="back: captions-menu-back, back-mark: captions-menu-back-mark, empty: captions-menu-empty,
-      header: captions-menu-header, live: captions-menu-live, loading: captions-menu-loading, surface: captions-menu-surface,
+      header: captions-menu-header, live: captions-menu-live, loading: captions-menu-loading,
+      search-field: captions-menu-search-field, surface: captions-menu-surface,
       title: captions-menu-title" label=${this.subtitlesLabel} placement="top-end"
       @toggle=${(event) => this.heardMenu('captions', event)}>
       <button
@@ -804,7 +805,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             ? nothing
             : html `<${this.tag('menu')} part="overflow"
           exportparts="back: overflow-back, back-mark: overflow-back-mark, empty: overflow-empty,
-            header: overflow-header, live: overflow-live, loading: overflow-loading, surface: overflow-surface,
+            header: overflow-header, live: overflow-live, loading: overflow-loading,
+            search-field: overflow-search-field, surface: overflow-surface,
             title: overflow-title" label=${this.moreLabel} placement="top-end"
             @toggle=${(event) => this.heardMenu('overflow', event)}>
               <button

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

@@ -38,6 +38,7 @@ import '../../menu/index.js';
  * @csspart menu-header - The bar above a submenu, holding the back button and the submenu's name.
  * @csspart menu-live - The inner menu's `live` part, the region screen readers announce its empty and loading messages from.
  * @csspart menu-loading - Shown while the items are loading.
+ * @csspart menu-search-field - The inner menu's filter field, drawn with `filterable`.
  * @csspart menu-surface - The floating panel the menu is drawn on.
  * @csspart menu-title - The name of the submenu that is shown.
  * @csspart poster - An entry's poster image, if it has one.

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

@@ -84,7 +84,7 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
     renderMenu() {
         return html `<${this.tag('menu')} part="menu"
     exportparts="back: menu-back, back-mark: menu-back-mark, empty: menu-empty, header: menu-header,
-      live: menu-live, loading: menu-loading, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}
+      live: menu-live, loading: menu-loading, search-field: menu-search-field, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}
       @toggle=${this.heardToggle}>
       <slot name="trigger" slot="trigger">
         <button

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

@@ -47,8 +47,16 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
             if (event.defaultPrevented) {
                 return;
             }
+            const value = event.detail.value;
+            const player = this.player;
+            if (value === this.active) {
+                if (player && player.paused !== false) {
+                    void Promise.resolve(player.play()).catch(() => { });
+                }
+                return;
+            }
             this.chased = true;
-            this.requestActive(event.detail.value, 'press');
+            this.requestActive(value, 'press');
         };
         this.handleFocusIn = (event) => {
             const entry = event.target;
@@ -259,6 +267,12 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         if (changed.has('shuffle') && !this.shuffle) {
             this.dealt = undefined;
         }
+        if (this.active === '' && this.childrenKnown) {
+            const opening = this.resolveActive(this.items);
+            if (opening) {
+                this.active = opening.value;
+            }
+        }
     }
     updated(changed) {
         super.updated?.(changed);