@fusion.dev/helix-headless 0.0.0-dev

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

@@ -0,0 +1,3 @@
+export * from './item/video-playlist-item.js';
+export * from './menu/video-playlist-menu.js';
+export * from './root/video-playlist-root.js';

package/dist/video-playlist/index.js

@@ -0,0 +1,3 @@
+export * from './item/video-playlist-item.js';
+export * from './menu/video-playlist-menu.js';
+export * from './root/video-playlist-root.js';

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

@@ -0,0 +1,101 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+/**
+ * @summary One entry in a video playlist.
+ *
+ * @description
+ * **It holds what the player needs and nothing about playing.** A source, a
+ * poster and a name: the entry knows which file it stands for, and the playlist
+ * is what hands that to a player. Nothing here touches a `<video>`, which is
+ * what keeps a playlist usable with a player the consumer configured
+ * themselves.
+ *
+ * **A real `<button>`, in a `listitem`.** A playlist is a list of things to
+ * choose, and the list roles are the honest ones: `list` and `listitem` say how
+ * many there are and where you are in them, which `listbox` would too, at the
+ * cost of the pattern a listbox obliges. `Option` records that trap in full,
+ * that a listbox has to keep focus elsewhere and say which item is current with
+ * `aria-activedescendant`. Nothing here needs that, because focus really moves
+ * to the button.
+ *
+ * `aria-current` rather than `aria-selected`, which belongs to the roles that
+ * have a selection. What is true of the entry playing now is that it is the one
+ * the player is on.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @slot - The entry's name.
+ * @slot media - A thumbnail. Falls back to an image of `poster`.
+ * @slot meta - After the name. A duration, or a date.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when the entry is chosen. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart container - The `listitem`, which the button sits in.
+ * @csspart item - The row, which is a button.
+ * @csspart label - The name and whatever follows it.
+ * @csspart media - The leading column.
+ * @csspart thumbnail - The image `poster` falls back to.
+ */
+export declare class HelixHeadlessVideoPlaylistItem extends HelixElement {
+    /**
+     * What identifies the entry, and what `active` is compared against.
+     */
+    value: string;
+    /**
+     * The file this entry plays.
+     */
+    src: string;
+    /**
+     * What covers the picture before this entry plays, and the row's thumbnail.
+     *
+     * One property doing both, because they are the same picture: the frame that
+     * stands for the clip stands for it in the list too. It is the `media` slot's
+     * fallback rather than something drawn beside it, which is this library's rule
+     * for a content property, so a consumer with something better to show slots it
+     * and the two can never both appear.
+     */
+    poster: string;
+    /**
+     * Whether the entry can be chosen.
+     */
+    disabled: boolean;
+    /**
+     * Whether the player is on this entry.
+     *
+     * Written by the playlist rather than by the entry, the way an option's
+     * selection is: an entry that made itself current would be a second answer to
+     * which one is playing.
+     */
+    current: boolean;
+    /**
+     * The entry's name, which is the words and not everything in it.
+     *
+     * `textContent` was what this used, and it takes the whole subtree: a row with
+     * a duration in `meta` reported "His Girl Friday0:06", and that string went to
+     * the player and on to the lock screen. Only the nodes the consumer left
+     * unslotted are the name; anything named is a column beside it.
+     *
+     * Light DOM rather than `assignedNodes`, so it answers on the server too,
+     * where there is no slot to ask. `Option.text` reads its own the same way.
+     */
+    get text(): string;
+    private readonly choose;
+    /**
+     * What stands for the row: a thumbnail where there is one, and nothing where
+     * there is not.
+     *
+     * A seam rather than inline, so a tier can draw a duration badge over it or
+     * a placeholder in its place without reimplementing the row. A consumer
+     * slots `media` for the same reasons and neither has to know about the other.
+     */
+    protected renderMedia(): TemplateResult;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-video-playlist-item': HelixHeadlessVideoPlaylistItem;
+    }
+}

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

@@ -0,0 +1,162 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary One entry in a video playlist.
+ *
+ * @description
+ * **It holds what the player needs and nothing about playing.** A source, a
+ * poster and a name: the entry knows which file it stands for, and the playlist
+ * is what hands that to a player. Nothing here touches a `<video>`, which is
+ * what keeps a playlist usable with a player the consumer configured
+ * themselves.
+ *
+ * **A real `<button>`, in a `listitem`.** A playlist is a list of things to
+ * choose, and the list roles are the honest ones: `list` and `listitem` say how
+ * many there are and where you are in them, which `listbox` would too, at the
+ * cost of the pattern a listbox obliges. `Option` records that trap in full,
+ * that a listbox has to keep focus elsewhere and say which item is current with
+ * `aria-activedescendant`. Nothing here needs that, because focus really moves
+ * to the button.
+ *
+ * `aria-current` rather than `aria-selected`, which belongs to the roles that
+ * have a selection. What is true of the entry playing now is that it is the one
+ * the player is on.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @slot - The entry's name.
+ * @slot media - A thumbnail. Falls back to an image of `poster`.
+ * @slot meta - After the name. A duration, or a date.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when the entry is chosen. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart container - The `listitem`, which the button sits in.
+ * @csspart item - The row, which is a button.
+ * @csspart label - The name and whatever follows it.
+ * @csspart media - The leading column.
+ * @csspart thumbnail - The image `poster` falls back to.
+ */
+let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * What identifies the entry, and what `active` is compared against.
+         */
+        this.value = '';
+        /**
+         * The file this entry plays.
+         */
+        this.src = '';
+        /**
+         * What covers the picture before this entry plays, and the row's thumbnail.
+         *
+         * One property doing both, because they are the same picture: the frame that
+         * stands for the clip stands for it in the list too. It is the `media` slot's
+         * fallback rather than something drawn beside it, which is this library's rule
+         * for a content property, so a consumer with something better to show slots it
+         * and the two can never both appear.
+         */
+        this.poster = '';
+        /**
+         * Whether the entry can be chosen.
+         */
+        this.disabled = false;
+        /**
+         * Whether the player is on this entry.
+         *
+         * Written by the playlist rather than by the entry, the way an option's
+         * selection is: an entry that made itself current would be a second answer to
+         * which one is playing.
+         */
+        this.current = false;
+        this.choose = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
+        };
+    }
+    /**
+     * The entry's name, which is the words and not everything in it.
+     *
+     * `textContent` was what this used, and it takes the whole subtree: a row with
+     * a duration in `meta` reported "His Girl Friday0:06", and that string went to
+     * the player and on to the lock screen. Only the nodes the consumer left
+     * unslotted are the name; anything named is a column beside it.
+     *
+     * Light DOM rather than `assignedNodes`, so it answers on the server too,
+     * where there is no slot to ask. `Option.text` reads its own the same way.
+     */
+    get text() {
+        return [...this.childNodes]
+            .filter((node) => !(node instanceof Element) || !node.hasAttribute('slot'))
+            .map((node) => node.textContent ?? '')
+            .join('')
+            .trim();
+    }
+    /**
+     * What stands for the row: a thumbnail where there is one, and nothing where
+     * there is not.
+     *
+     * A seam rather than inline, so a tier can draw a duration badge over it or
+     * a placeholder in its place without reimplementing the row. A consumer
+     * slots `media` for the same reasons and neither has to know about the other.
+     */
+    renderMedia() {
+        return html `<slot name="media">
+      ${
+        // `alt=""`, because the row's own words already name it and a
+        // thumbnail repeating them is the same thing said twice.
+        this.poster === '' ? nothing : html `<img part="thumbnail" alt="" src=${this.poster} />`}
+    </slot>`;
+    }
+    render() {
+        /* `aria-current="true"`, and absent rather than `"false"` otherwise. A
+           reader is told which one is playing; being told about each of the others
+           that it is not playing is the same fact eleven times. */
+        return html `<div part="container" role="listitem">
+      <button
+        part="item"
+        type="button"
+        aria-current=${this.current ? 'true' : nothing}
+        ?disabled=${this.disabled}
+        @click=${this.choose}
+      >
+        <span part="media">${this.renderMedia()}</span>
+        <span part="label">
+          <slot></slot>
+          <slot name="meta"></slot>
+        </span>
+      </button>
+    </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessVideoPlaylistItem.prototype, "value", void 0);
+__decorate([
+    property()
+], HelixHeadlessVideoPlaylistItem.prototype, "src", void 0);
+__decorate([
+    property()
+], HelixHeadlessVideoPlaylistItem.prototype, "poster", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessVideoPlaylistItem.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessVideoPlaylistItem.prototype, "current", void 0);
+HelixHeadlessVideoPlaylistItem = __decorate([
+    customElement('helix-headless-video-playlist-item')
+], HelixHeadlessVideoPlaylistItem);
+export { HelixHeadlessVideoPlaylistItem };

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

@@ -0,0 +1,121 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+import '../../menu/index.js';
+/**
+ * @summary The playlist's entries, as a menu inside the player's control bar.
+ *
+ * @description
+ * The entries again, reachable without leaving the picture. A playlist beside
+ * the player is a list a reader scrolls to; the same list in the control bar is
+ * one they open over the video, which is what a full-screen player has and what
+ * a phone has room for.
+ *
+ * **It is placed by the consumer, not rendered by the playlist**, and that is
+ * forced rather than chosen. A shadow root cannot project into a sibling's
+ * light DOM, so nothing the playlist renders can land inside the player's
+ * control bar. What can is an element the consumer writes there, which is what
+ * `Video`'s `controls` slot is for:
+ *
+ * ```html
+ * <helix-video-playlist>
+ *   <helix-video slot="player" controls>
+ *     <helix-video-playlist-menu slot="controls"></helix-video-playlist-menu>
+ *   </helix-video>
+ *   <helix-video-playlist-item value="one" src="/one.mp4">One</helix-video-playlist-item>
+ * </helix-video-playlist>
+ * ```
+ *
+ * So it finds its playlist upward rather than being handed one, and that chain
+ * crosses a shadow boundary in the ordinary arrangement, which is why it is
+ * `closestInstance` and not `closest`.
+ *
+ * **Choosing dispatches `helix-select`, the same event an entry dispatches.**
+ * It never writes `active` on the playlist, which looks like the shorter path
+ * and would latch the controlled contract: a playlist assigned `active` once
+ * goes quiet and waits for a consumer who was never there. Announcing is what
+ * an entry does, the playlist already listens for it, and a consumer refusing a
+ * selection gets `preventDefault()` on one event rather than two paths that
+ * behave differently.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Episode Menu, Queue Menu, Up Next
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @slot trigger - Replaces the button that opens the menu.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired with the chosen entry's value. The playlist listens for it. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart entry - One entry in the menu.
+ * @csspart entry-item - The row, which is an `<a>` where `href` is set.
+ * @csspart entry-mark - The trailing mark: a tick when checked, a caret when it opens
+ * @csspart entry-start - The leading column, which is a slot and is always there.
+ * @csspart icon - The glyph on the trigger.
+ * @csspart menu - The menu that holds the entries.
+ * @csspart menu-back - The control that returns from a submenu.
+ * @csspart menu-back-mark - The glyph on the back control of a submenu.
+ * @csspart menu-empty - Shown when there are no items to show.
+ * @csspart menu-header - The bar above a submenu, holding the way back and its name.
+ * @csspart menu-loading - Shown while the items are still on their way.
+ * @csspart menu-surface - The floating panel the menu is drawn on.
+ * @csspart menu-title - The name of the submenu that is showing.
+ * @csspart poster - An entry's still, where it has one.
+ * @csspart trigger - The button that opens it.
+ */
+export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
+    #private;
+    /**
+     * The menu's accessible name, and its trigger's.
+     *
+     * "Episodes" suits a series and is wrong for a set of camera angles, and the
+     * component cannot know which one it is in.
+     */
+    label: string;
+    /**
+     * Where the menu opens relative to its trigger.
+     *
+     * `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;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The playlist this menu belongs to, found upward through the slots. */
+    private get playlist();
+    /** The playlist's entries, in the order it holds them. */
+    private get entries();
+    /**
+     * Watches the playlist for entries arriving, and re-reads it on every open.
+     *
+     * Two signals rather than one, because the two facts change on different
+     * clocks and only one of them is observable.
+     *
+     * **Which entries exist** is the playlist's light DOM, and a `MutationObserver`
+     * sees it directly.
+     *
+     * **Which entry is current** is `active`, a property with no attribute, so
+     * there is nothing to observe: events travel up from the playlist and this
+     * element is below it, and mirroring `active` to a `data-` name is ruled out
+     * on its own merits, `active` being a payload rather than a boolean fact.
+     * Mirroring it was written and reverted here: it put `data-active` onto every
+     * host, which `tree-root.ssr.spec.ts` caught, and the rule it broke was the
+     * one that stops a copied host coming back frozen.
+     *
+     * So it is re-read at the moment it is looked at. `helix-before-open` comes from the
+     * menu in this element's own shadow root, which is the one direction events
+     * do arrive from, and a closed menu showing a stale mark is a thing nobody
+     * can see.
+     */
+    private watch;
+    private readonly reread;
+    private readonly choose;
+    protected render(): TemplateResult;
+    /** The menu itself, behind a method so a styled tier can render another one. */
+    protected renderMenu(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-video-playlist-menu': HelixHeadlessVideoPlaylistMenu;
+    }
+}

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

@@ -0,0 +1,237 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, 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 { html } from 'lit/static-html.js';
+import { HelixHeadlessVideoPlaylist } from '../root/video-playlist-root.js';
+import '../../menu/index.js';
+const ITEMS = 'helix-video-playlist-item, helix-headless-video-playlist-item';
+/**
+ * @summary The playlist's entries, as a menu inside the player's control bar.
+ *
+ * @description
+ * The entries again, reachable without leaving the picture. A playlist beside
+ * the player is a list a reader scrolls to; the same list in the control bar is
+ * one they open over the video, which is what a full-screen player has and what
+ * a phone has room for.
+ *
+ * **It is placed by the consumer, not rendered by the playlist**, and that is
+ * forced rather than chosen. A shadow root cannot project into a sibling's
+ * light DOM, so nothing the playlist renders can land inside the player's
+ * control bar. What can is an element the consumer writes there, which is what
+ * `Video`'s `controls` slot is for:
+ *
+ * ```html
+ * <helix-video-playlist>
+ *   <helix-video slot="player" controls>
+ *     <helix-video-playlist-menu slot="controls"></helix-video-playlist-menu>
+ *   </helix-video>
+ *   <helix-video-playlist-item value="one" src="/one.mp4">One</helix-video-playlist-item>
+ * </helix-video-playlist>
+ * ```
+ *
+ * So it finds its playlist upward rather than being handed one, and that chain
+ * crosses a shadow boundary in the ordinary arrangement, which is why it is
+ * `closestInstance` and not `closest`.
+ *
+ * **Choosing dispatches `helix-select`, the same event an entry dispatches.**
+ * It never writes `active` on the playlist, which looks like the shorter path
+ * and would latch the controlled contract: a playlist assigned `active` once
+ * goes quiet and waits for a consumer who was never there. Announcing is what
+ * an entry does, the playlist already listens for it, and a consumer refusing a
+ * selection gets `preventDefault()` on one event rather than two paths that
+ * behave differently.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Episode Menu, Queue Menu, Up Next
+ * @documentation https://helix.fusion.dev/components/video-playlist
+ *
+ * @slot trigger - Replaces the button that opens the menu.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired with the chosen entry's value. The playlist listens for it. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart entry - One entry in the menu.
+ * @csspart entry-item - The row, which is an `<a>` where `href` is set.
+ * @csspart entry-mark - The trailing mark: a tick when checked, a caret when it opens
+ * @csspart entry-start - The leading column, which is a slot and is always there.
+ * @csspart icon - The glyph on the trigger.
+ * @csspart menu - The menu that holds the entries.
+ * @csspart menu-back - The control that returns from a submenu.
+ * @csspart menu-back-mark - The glyph on the back control of a submenu.
+ * @csspart menu-empty - Shown when there are no items to show.
+ * @csspart menu-header - The bar above a submenu, holding the way back and its name.
+ * @csspart menu-loading - Shown while the items are still on their way.
+ * @csspart menu-surface - The floating panel the menu is drawn on.
+ * @csspart menu-title - The name of the submenu that is showing.
+ * @csspart poster - An entry's still, where it has one.
+ * @csspart trigger - The button that opens it.
+ */
+let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The menu's accessible name, and its trigger's.
+         *
+         * "Episodes" suits a series and is wrong for a set of camera angles, and the
+         * component cannot know which one it is in.
+         */
+        this.label = 'Episodes';
+        /**
+         * Where the menu opens relative to its trigger.
+         *
+         * `top-end` because a control bar sits at the foot of the picture, and a menu
+         * opening downward from there opens off the player.
+         */
+        this.placement = 'top-end';
+        /* `requestUpdate` rather than a counter held in `@state`.
+         *
+         * The entries are the playlist's light DOM rather than this element's, so
+         * nothing about them schedules an update here: an entry added, removed, or
+         * made current changes a tree this element only looks at. A bumped field is
+         * the usual way to say "render again", and here it is a field nothing reads,
+         * which the linter is right to call out. Asking directly says the same thing
+         * with nothing to explain. */
+        this.reread = () => {
+            this.requestUpdate();
+        };
+        this.choose = (value) => {
+            this.dispatchEvent(new HelixSelectEvent({ value }));
+        };
+    }
+    #observer;
+    connectedCallback() {
+        super.connectedCallback();
+        /* After the first update, because the playlist is found by walking the tree
+           and the server has no tree to walk. */
+        this.updateComplete.then(() => this.watch());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('helix-before-open', this.reread);
+        this.#observer?.disconnect();
+        this.#observer = undefined;
+    }
+    /* Resolved once, on the client, and never during a render.
+     *
+     * `render` reached for this through `closestInstance` at first, which walks
+     * `parentNode` and steps across a `ShadowRoot` by following its `host`. That
+     * names `ShadowRoot`, which the server has no global for, so every SSR of
+     * this element threw `ReferenceError: Can't find variable: ShadowRoot` from
+     * inside Lit's own result collector, three frames from anything recognisable.
+     *
+     * Which is the tree-inspection rule arriving as a crash rather than as a
+     * wrong answer: a component that walks the tree to render cannot render on a
+     * server, and the server has no tree to walk anyway. Held here instead, set
+     * after the first update, and `undefined` on the server, where an empty menu
+     * is the honest output. */
+    #playlist;
+    /** The playlist this menu belongs to, found upward through the slots. */
+    get playlist() {
+        return this.#playlist;
+    }
+    /** The playlist's entries, in the order it holds them. */
+    get entries() {
+        const playlist = this.playlist;
+        return playlist ? [...playlist.querySelectorAll(ITEMS)] : [];
+    }
+    /**
+     * Watches the playlist for entries arriving, and re-reads it on every open.
+     *
+     * Two signals rather than one, because the two facts change on different
+     * clocks and only one of them is observable.
+     *
+     * **Which entries exist** is the playlist's light DOM, and a `MutationObserver`
+     * sees it directly.
+     *
+     * **Which entry is current** is `active`, a property with no attribute, so
+     * there is nothing to observe: events travel up from the playlist and this
+     * element is below it, and mirroring `active` to a `data-` name is ruled out
+     * on its own merits, `active` being a payload rather than a boolean fact.
+     * Mirroring it was written and reverted here: it put `data-active` onto every
+     * host, which `tree-root.ssr.spec.ts` caught, and the rule it broke was the
+     * one that stops a copied host coming back frozen.
+     *
+     * So it is re-read at the moment it is looked at. `helix-before-open` comes from the
+     * menu in this element's own shadow root, which is the one direction events
+     * do arrive from, and a closed menu showing a stale mark is a thing nobody
+     * can see.
+     */
+    watch() {
+        this.#playlist ??= closestInstance(this, HelixHeadlessVideoPlaylist) ?? undefined;
+        const playlist = this.#playlist;
+        if (!playlist || this.#observer) {
+            return;
+        }
+        this.addEventListener('helix-before-open', this.reread);
+        this.#observer = new MutationObserver(this.reread);
+        this.#observer.observe(playlist, { childList: true, subtree: true });
+        this.reread();
+    }
+    render() {
+        return this.renderMenu();
+    }
+    /** The menu itself, behind a method so a styled tier can render another one. */
+    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,
+      loading: menu-loading, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}>
+      <slot name="trigger" slot="trigger">
+        <button part="trigger" type="button" aria-label=${this.label}>${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}
+          aria-checked=${entry.value === active ? 'true' : 'false'}
+          ?disabled=${entry.disabled}
+          role="menuitemradio"
+          @helix-select=${(event) => {
+            /* Stopped and re-announced from the host rather than let through.
+               What travels up is then this element's own event, so a consumer
+               listening on the menu sees what the playlist sees, and
+               `preventDefault()` refuses the selection in one place. */
+            event.stopPropagation();
+            this.choose(entry.value);
+        }}
+        >
+          ${
+        /* The still, where there is one, for the reason the list beside the
+           player shows one: a reader picks an episode by recognising it
+           faster than by reading its title, and this menu opens over the
+           picture where reading is hardest.
+         *
+         * In `start`, which is free: `Menu.Item` renders its tick *after*
+         * the label as `part="mark"`, so the leading column has nothing to
+         * collide with. `alt=""`, because the name is in the same row and a
+         * still repeating it is the same thing said twice, which is what
+         * `Video.Playlist.Item` already decided about its own thumbnail.
+         *
+         * Omitted rather than empty where there is no poster, an `<img>`
+         * with no `src` being a broken-image glyph in every engine. */
+        entry.poster === ''
+            ? nothing
+            : html `<img alt="" part="poster" slot="start" src=${entry.poster} />`}
+          ${entry.text}
+        </${this.tag('menu-item')}>`)}
+    </${this.tag('menu')}>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessVideoPlaylistMenu.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessVideoPlaylistMenu.prototype, "placement", void 0);
+HelixHeadlessVideoPlaylistMenu = __decorate([
+    customElement('helix-headless-video-playlist-menu')
+], HelixHeadlessVideoPlaylistMenu);
+export { HelixHeadlessVideoPlaylistMenu };