@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
 /**
@@ -13,6 +13,9 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * Items are found with `instanceof`, never by tag name, so the headless tier
  * does not depend on the styled one.
  *
+ * Typing a letter moves to the next visible item whose name starts with it,
+ * and `*` opens every branch beside the focused item.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -33,8 +36,15 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
 export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
     /**
      * Accessible name for the tree.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the tree too, and
+     * wins over this.
      */
     label: string;
+    /** Carries a host `aria-label` and `aria-labelledby` to the tree. */
+    protected readonly aria: AriaForwardController;
+    /** The letters typed so far, for moving to an item by its name. */
+    private readonly typeahead;
     /**
      * What a deeper level means: `peer` for no change, `subordinate` for a lower
      * rank, or `heading` for a parent that heads the items under it.
@@ -98,16 +108,30 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * so an item moved in the tree gets the right indent without knowing it moved.
      */
     private syncItems;
+    /** The nearest item around `item` that a reader can see, if any. */
+    private visibleAncestor;
+    /**
+     * Moves to the next visible item whose name starts with the letters typed,
+     * or opens every branch beside the focused item on `*`.
+     *
+     * Returns whether the press was one of those.
+     */
+    private handleTyping;
     private move;
     private focusOn;
     private readonly handleKeydown;
     /**
      * A branch opened or closed, whoever did it.
      *
-     * Listening for the item's own open events rather than calling `syncItems`
-     * from each keyboard path: that misses the pointer, and collapsing a branch
-     * by clicking its chevron then leaves the tree's one tab stop on a row inside
-     * the subtree just hidden. It also covers a consumer setting `open` directly.
+     * Listening for the item's own `toggle` rather than calling `syncItems` from
+     * each keyboard path: that misses the pointer, and collapsing a branch by
+     * clicking its row then left the tree's one tab stop on a row inside the
+     * subtree just hidden, so Tab passed over the tree. It also covers a
+     * consumer setting `open` directly.
+     *
+     * **In capture**, because `toggle` does not bubble, which is the platform's
+     * shape for it. The `helix-before-*` pair this listened for does not bubble
+     * either, and is sent before the branch has moved.
      */
     private readonly handleBranch;
     connectedCallback(): void;

package/dist/tree/root/tree-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 { closestInstance, customElement, HelixElement, inlineStep, MixinCollection, MixinControllerActive, scrollItemIntoView, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, slottedWords, Typeahead, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
@@ -22,7 +22,16 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     constructor() {
         super(...arguments);
         this.label = 'Tree';
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('tree'),
+        });
+        this.typeahead = new Typeahead();
         this.handleSelection = (event) => {
+            const origin = event.target;
+            if (!(origin instanceof HelixHeadlessTreeItem) || !this.items.includes(origin)) {
+                return;
+            }
             if (!event.defaultPrevented) {
                 this.requestActive(event.detail.value);
             }
@@ -30,9 +39,17 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         };
         this.handleKeydown = (event) => {
             const current = closestInstance(event.target, HelixHeadlessTreeItem);
-            if (!current || !this.items.includes(current) || !KEYS.has(event.key)) {
+            if (!current || !this.items.includes(current)) {
                 return;
             }
+            if (this.handleTyping(current, event)) {
+                event.preventDefault();
+                return;
+            }
+            if (!KEYS.has(event.key)) {
+                return;
+            }
+            this.typeahead.reset();
             const along = inlineStep(this, event.key);
             if (event.key === 'ArrowDown') {
                 this.move(current, 1);
@@ -67,6 +84,9 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             }
             else {
                 if (current.isBranch) {
+                    if (current.choosable) {
+                        current.select();
+                    }
                     current.toggleOpen();
                     this.syncItems();
                 }
@@ -98,8 +118,10 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     syncItems() {
         const visible = this.visibleItems;
         const chosen = this.resolveActive(visible);
-        const held = visible.find((item) => item.focusable);
+        const held = visible.find((item) => item.focusable) ??
+            this.visibleAncestor(this.items.find((item) => item.focusable));
         const stop = held ?? chosen;
+        const heads = this.nesting === 'heading';
         for (const item of this.items) {
             const selected = item.value !== '' && item.value === this.active;
             const focusable = item === stop;
@@ -115,9 +137,45 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 item.selected = selected;
                 item.focusable = focusable;
                 item.level = level;
+                item.heads = heads;
             });
         }
     }
+    visibleAncestor(item) {
+        const visible = this.visibleItems;
+        let node = item?.parentElement ?? null;
+        while (node && node !== this) {
+            if (node instanceof HelixHeadlessTreeItem && visible.includes(node)) {
+                return node;
+            }
+            node = node.parentElement;
+        }
+        return undefined;
+    }
+    handleTyping(current, event) {
+        if (!typesCharacter(event) || keyClaimed(event)) {
+            return false;
+        }
+        if (event.key === ' ' && !this.typeahead.typing()) {
+            return false;
+        }
+        if (event.key === '*') {
+            const siblings = [...(current.parentElement?.children ?? [])].filter((node) => node instanceof HelixHeadlessTreeItem && node.slot === current.slot);
+            for (const sibling of siblings) {
+                if (sibling.isBranch && !sibling.open) {
+                    sibling.requestOpen(true);
+                }
+            }
+            this.syncItems();
+            return true;
+        }
+        const visible = this.visibleItems;
+        const at = this.typeahead.match(event.key, visible.map((item) => slottedWords(item, [''])), visible.indexOf(current));
+        if (at >= 0) {
+            this.focusOn(visible[at]);
+        }
+        return true;
+    }
     move(from, delta) {
         const visible = this.visibleItems;
         const index = visible.indexOf(from);
@@ -137,8 +195,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
-        this.addEventListener('helix-before-open', this.handleBranch);
-        this.addEventListener('helix-before-close', this.handleBranch);
+        this.addEventListener('toggle', this.handleBranch, true);
         this.addEventListener('keydown', this.handleKeydown);
         this.watcher = new MutationObserver(() => this.syncItems());
         this.watcher.observe(this, { childList: true, subtree: true });
@@ -146,8 +203,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
-        this.removeEventListener('helix-before-open', this.handleBranch);
-        this.removeEventListener('helix-before-close', this.handleBranch);
+        this.removeEventListener('toggle', this.handleBranch, true);
         this.removeEventListener('keydown', this.handleKeydown);
         this.watcher?.disconnect();
         this.watcher = undefined;
@@ -158,7 +214,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('active')) {
+        if (changed.has('active') || changed.has('nesting')) {
             this.syncItems();
         }
     }

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

@@ -16,7 +16,8 @@ import { type TemplateResult } from 'lit';
  *
  * The direction is also written as a word, so a screen reader reads it. The
  * styled tier hides `part="direction"` visually and keeps it in the
- * accessibility tree.
+ * accessibility tree. The words are properties, `up-label` through
+ * `worse-label`, so a page in another language can set its own.
  *
  * The metric and the label are bare slots. An element that assigned its own
  * slot on connect would add an attribute to its host after upgrade, which the
@@ -29,12 +30,17 @@ import { type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/trend
  *
  * @slot - The metric that moved.
+ * @slot icon - Replaces the arrow, such as with a glyph of your own set. Slot the one for the current direction.
  * @slot label - The period the metric moved over.
  *
  * @csspart direction - The direction as a word, for people who cannot see the arrow.
  * @csspart icon - The arrow.
  */
 export declare class HelixHeadlessTrend extends HelixElement {
+    /**
+     * The word read out after the direction when the move is an improvement.
+     */
+    betterLabel: string;
     /**
      * Which way the measurement moved.
      *
@@ -46,6 +52,10 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * and reports as a hydration mismatch.
      */
     direction?: 'down' | 'neutral' | 'up';
+    /**
+     * The word read out for a move down.
+     */
+    downLabel: string;
     /**
      * Which direction counts as an improvement for this metric.
      *
@@ -55,6 +65,31 @@ export declare class HelixHeadlessTrend extends HelixElement {
      * direction changes underneath.
      */
     good?: 'down' | 'up';
+    /**
+     * The word read out for no move, or for a direction that is not one of the
+     * three.
+     */
+    unchangedLabel: string;
+    /**
+     * The word read out for a move up.
+     */
+    upLabel: string;
+    /**
+     * The word read out after the direction when the move is a setback.
+     */
+    worseLabel: string;
+    /**
+     * The arrow for the direction, as the fallback of the `icon` slot.
+     *
+     * Slot fallback, so the page replaces it by slotting a glyph of its own and
+     * a trend with none draws the arrow it always did; and a method, so the tier
+     * above replaces it by overriding. The word beside it still says the
+     * direction either way.
+     */
+    protected renderIcon(icon: {
+        content: string;
+        viewBox: string;
+    }): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/trend/root/trend-root.js

@@ -10,39 +10,65 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const DIRECTIONS = {
-    down: { icon: arrowDown, word: 'Down' },
-    neutral: { icon: minus, word: 'Unchanged' },
-    up: { icon: arrowUp, word: 'Up' },
+    down: { icon: arrowDown, word: 'downLabel' },
+    neutral: { icon: minus, word: 'unchangedLabel' },
+    up: { icon: arrowUp, word: 'upLabel' },
 };
 const readDirection = (value) => DIRECTIONS[value] ?? DIRECTIONS.neutral;
 let HelixHeadlessTrend = class HelixHeadlessTrend extends HelixElement {
-    render() {
-        const direction = readDirection(this.direction);
-        const judgment = this.good && this.direction && this.direction !== 'neutral'
-            ? this.good === this.direction
-                ? ', better'
-                : ', worse'
-            : '';
-        return html `<svg
+    constructor() {
+        super(...arguments);
+        this.betterLabel = 'better';
+        this.downLabel = 'Down';
+        this.unchangedLabel = 'Unchanged';
+        this.upLabel = 'Up';
+        this.worseLabel = 'worse';
+    }
+    renderIcon(icon) {
+        return html `<slot name="icon"
+      ><svg
         aria-hidden="true"
         data-glyph
         fill="currentColor"
         part="icon"
-        viewBox=${direction.icon.viewBox}
+        viewBox=${icon.viewBox}
       >
-        ${unsafeSVG(direction.icon.content)}
-      </svg>
-      <span part="direction">${`${direction.word}${judgment}`}</span>
+        ${unsafeSVG(icon.content)}
+      </svg></slot
+    >`;
+    }
+    render() {
+        const direction = readDirection(this.direction);
+        const judgment = this.good && this.direction && this.direction !== 'neutral'
+            ? `, ${this.good === this.direction ? this.betterLabel : this.worseLabel}`
+            : '';
+        return html `${this.renderIcon(direction.icon)}
+      <span part="direction">${`${this[direction.word]}${judgment}`}</span>
       <slot></slot>
       <slot name="label"></slot>`;
     }
 };
+__decorate([
+    property({ attribute: 'better-label' })
+], HelixHeadlessTrend.prototype, "betterLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "direction", void 0);
+__decorate([
+    property({ attribute: 'down-label' })
+], HelixHeadlessTrend.prototype, "downLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTrend.prototype, "good", void 0);
+__decorate([
+    property({ attribute: 'unchanged-label' })
+], HelixHeadlessTrend.prototype, "unchangedLabel", void 0);
+__decorate([
+    property({ attribute: 'up-label' })
+], HelixHeadlessTrend.prototype, "upLabel", void 0);
+__decorate([
+    property({ attribute: 'worse-label' })
+], HelixHeadlessTrend.prototype, "worseLabel", void 0);
 HelixHeadlessTrend = __decorate([
     customElement('helix-headless-trend')
 ], HelixHeadlessTrend);

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

@@ -21,5 +21,10 @@ export interface KeyActions {
  * Nothing is taken while focus is in a range. The scrubber and the volume are
  * real inputs and the arrows are already theirs, so intercepting would mean
  * seeking twice for one press.
+ *
+ * **Nor a press a control already handled, nor Space on a control.** Space is
+ * how a button is pressed, so Space on Mute played the video and left it
+ * unmuted, and a menu row chosen with Space also toggled playback. A key a
+ * menu or a control took for itself arrives here already refused.
  */
 export declare const takeKey: (event: KeyboardEvent, video: HTMLVideoElement, actions: KeyActions) => boolean;

package/dist/video/root/keys.js

@@ -1,6 +1,18 @@
 import { SKIP_SECONDS } from '@fusion.dev/helix-core';
+const PRESSED_BY_SPACE = new Set(['a', 'button', 'select', 'summary', 'textarea']);
+const PRESSED_ROLES = /^(button|checkbox|link|menuitem\w*|option|radio|switch|tab)$/;
 export const takeKey = (event, video, actions) => {
-    if (event.target?.tagName === 'INPUT') {
+    if (event.defaultPrevented) {
+        return false;
+    }
+    const origin = (event.composedPath?.()[0] ?? event.target);
+    if (origin?.tagName === 'INPUT' || origin?.isContentEditable) {
+        return false;
+    }
+    if (event.key === ' ' &&
+        origin &&
+        (PRESSED_BY_SPACE.has(origin.localName) ||
+            PRESSED_ROLES.test(origin.getAttribute?.('role') ?? ''))) {
         return false;
     }
     const step = event.shiftKey ? SKIP_SECONDS : 5;

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

@@ -383,6 +383,8 @@ export declare class HelixHeadlessVideo extends HelixElement {
     private silent;
     private full;
     private captioned;
+    /** Which of the player's own menus is open, for its trigger to say so. */
+    private menuOpen;
     /**
      * Which caption track is showing, or `-1` for none.
      *
@@ -582,6 +584,15 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * presses it twice expects twenty seconds rather than an accelerating jump.
      */
     private skipBy;
+    /**
+     * Keeps each choice row's tick where this element puts it.
+     *
+     * A choice row checks itself after `helix-before-toggle`, and this element
+     * already sets `checked` on every row from its own state. The request is
+     * refused, so a tick moves only when the choice is applied, and stopped, so
+     * it does not reach a page that never placed the row.
+     */
+    private readonly keepTick;
     /** Shows one track and disables every other, or shows none at `-1`. */
     private showCaption;
     /** Turns captions on or off, which is what the button means with one track. */
@@ -695,6 +706,14 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * component's to paper over with "Track 2".
      */
     protected renderCaptions(): TemplateResult | typeof nothing;
+    /**
+     * Notes which menu opened or closed, so its trigger says so.
+     *
+     * **The trigger is this element's own button**, so the state is written onto
+     * it here: a menu cannot write onto a plain button slotted into it, and the
+     * button said neither that it opens a menu nor whether that menu was open.
+     */
+    private heardMenu;
     protected renderOverflowItem(one: string): TemplateResult;
     protected renderBar(): TemplateResult;
     protected render(): TemplateResult;

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

@@ -10,6 +10,7 @@ import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../menu/index.js';
+import { HelixHeadlessMenu } from '../../menu/root/menu-root.js';
 import { barControls, menuControls, ownFile } from './extra-controls.js';
 import { takeKey } from './keys.js';
 const clock = (seconds) => {
@@ -75,6 +76,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.silent = false;
         this.full = false;
         this.captioned = false;
+        this.menuOpen = undefined;
         this.captionIndex = -1;
         this.captionCount = 0;
         this.rate = 1;
@@ -161,6 +163,12 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             const track = captionTracks(this.video)[this.captionIndex] ?? this.video?.textTracks[0];
             this.cue = activeCue(track);
         };
+        this.keepTick = (event) => {
+            if (event.target === event.currentTarget) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
         this.handlePicture = () => {
             if (this.controls) {
                 return;
@@ -179,6 +187,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             if (!video) {
                 return;
             }
+            if (event.composedPath().some((node) => node instanceof HelixHeadlessMenu)) {
+                return;
+            }
             const taken = takeKey(event, video, {
                 fullscreen: () => void this.fullscreen.toggle(),
                 seek: (seconds) => this.seek(seconds),
@@ -521,8 +532,16 @@ 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,
-      title: captions-menu-title" label=${this.subtitlesLabel} placement="top-end">
-      <button part="captions" slot="trigger" type="button" aria-label=${this.subtitlesLabel}>
+      title: captions-menu-title" label=${this.subtitlesLabel} placement="top-end"
+      @toggle=${(event) => this.heardMenu('captions', event)}>
+      <button
+        part="captions"
+        slot="trigger"
+        type="button"
+        aria-label=${this.subtitlesLabel}
+        aria-haspopup="menu"
+        aria-expanded=${this.menuOpen === 'captions' ? 'true' : 'false'}
+      >
         ${drawIcon(closedCaptioning)}
       </button>
       <${this.tag('menu-item')}
@@ -532,6 +551,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         checkable
         exclusive
         ?checked=${this.captionIndex < 0}
+        @helix-before-toggle=${this.keepTick}
         @helix-select=${() => this.showCaption(-1)}
       >
         ${this.captionsOffLabel}
@@ -542,12 +562,25 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
           checkable
           exclusive
           ?checked=${this.captionIndex === at}
+          @helix-before-toggle=${this.keepTick}
           @helix-select=${() => this.showCaption(at)}
         >
           ${track.label || track.language}
         </${this.tag('menu-item')}>`)}
     </${this.tag('menu')}>`;
     }
+    heardMenu(menu, event) {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        const open = event.newState === 'open';
+        if (open) {
+            this.menuOpen = menu;
+        }
+        else if (this.menuOpen === menu) {
+            this.menuOpen = undefined;
+        }
+    }
     renderOverflowItem(one) {
         if (one === 'remote') {
             return html `<${this.tag('menu-item')} part="entry"
@@ -682,8 +715,16 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             : 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,
-            title: overflow-title" label=${this.moreLabel} placement="top-end">
-              <button part="more" slot="trigger" type="button" aria-label=${this.moreLabel}>
+            title: overflow-title" label=${this.moreLabel} placement="top-end"
+            @toggle=${(event) => this.heardMenu('overflow', event)}>
+              <button
+                part="more"
+                slot="trigger"
+                type="button"
+                aria-label=${this.moreLabel}
+                aria-haspopup="menu"
+                aria-expanded=${this.menuOpen === 'overflow' ? 'true' : 'false'}
+              >
                 ${drawIcon(dotsThreeVertical)}
               </button>
               ${this.overflow.map((one) => this.renderOverflowItem(one))}
@@ -941,6 +982,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessVideo.prototype, "captioned", void 0);
+__decorate([
+    state()
+], HelixHeadlessVideo.prototype, "menuOpen", void 0);
 __decorate([
     state()
 ], HelixHeadlessVideo.prototype, "captionIndex", void 0);

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, type Placement } from '@fusion.dev/helix-core';
 import { type TemplateResult } from 'lit';
 import '../../menu/index.js';
 /**
@@ -51,7 +51,16 @@ export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
      * `top-end` because a control bar sits at the foot of the picture, and a menu
      * opening downward from there opens off the player.
      */
-    placement: string;
+    placement: Placement;
+    /** Whether the menu is open, for the built-in trigger to say so. */
+    private open;
+    /**
+     * Notes the menu opening and closing, for the built-in trigger.
+     *
+     * The trigger is this element's own button, so the state is written onto it
+     * here. The menu cannot write onto a plain button slotted into it.
+     */
+    private readonly heardToggle;
     private observer;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -88,6 +97,15 @@ export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
      */
     private watch;
     private readonly reread;
+    /**
+     * Keeps each choice row's tick where this element puts it.
+     *
+     * A choice row checks itself after `helix-before-toggle`, and this element
+     * already sets `checked` on every row from its own state. The request is
+     * refused, so a tick moves only when the choice is applied, and stopped, so
+     * it does not reach a page that never placed the row.
+     */
+    private readonly keepTick;
     private readonly choose;
     protected render(): TemplateResult;
     /** The menu itself, behind a method so a styled tier can render another one. */

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { closestInstance, customElement, drawIcon, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
 import { list } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
 import { HelixHeadlessVideoPlaylist } from '../root/video-playlist-root.js';
@@ -17,9 +17,21 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
         super(...arguments);
         this.label = 'Episodes';
         this.placement = 'top-end';
+        this.open = false;
+        this.heardToggle = (event) => {
+            if (event.target === event.currentTarget) {
+                this.open = event.newState === 'open';
+            }
+        };
         this.reread = () => {
             this.requestUpdate();
         };
+        this.keepTick = (event) => {
+            if (event.target === event.currentTarget) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
         this.choose = (value) => {
             this.dispatchEvent(new HelixSelectEvent({ value }));
         };
@@ -58,21 +70,28 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
         return this.renderMenu();
     }
     renderMenu() {
-        const active = this.playlist?.active;
         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, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}
+      @toggle=${this.heardToggle}>
       <slot name="trigger" slot="trigger">
-        <button part="trigger" type="button" aria-label=${this.label}>${drawIcon(list)}</button>
+        <button
+          part="trigger"
+          type="button"
+          aria-label=${this.label}
+          aria-haspopup="menu"
+          aria-expanded=${this.open ? 'true' : 'false'}
+        >${drawIcon(list)}</button>
       </slot>
       ${this.entries.map((entry) => html `<${this.tag('menu-item')}
           part="entry"
       exportparts="item: entry-item, mark: entry-mark, start: entry-start"
           value=${entry.value}
           checkable
-          ?checked=${entry.value === active}
+          ?checked=${entry.current}
           ?disabled=${entry.disabled}
           exclusive
+          @helix-before-toggle=${this.keepTick}
           @helix-select=${(event) => {
             event.stopPropagation();
             this.choose(entry.value);
@@ -92,6 +111,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessVideoPlaylistMenu.prototype, "placement", void 0);
+__decorate([
+    state()
+], HelixHeadlessVideoPlaylistMenu.prototype, "open", void 0);
 HelixHeadlessVideoPlaylistMenu = __decorate([
     customElement('helix-headless-video-playlist-menu')
 ], HelixHeadlessVideoPlaylistMenu);