@fusion.dev/helix-headless 0.156.0 → 0.158.0

package/dist/number-input/root/number-input-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, appleTouch, valueAsNumber as asNumber, customElement, formatNumber, formatWords, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, appleTouch, customElement, formatNumber, formatWords, numberAsValue as fromNumber, HelixFormElement, holdCaret, MixinControllerValue, MixinField, parseNumber, restoreValue, submitImplicitly, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -410,7 +410,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
         const atMin = parsed !== null && this.min !== undefined && parsed <= this.min;
         const atMax = parsed !== null && this.max !== undefined && parsed >= this.max;
         return html `${this.renderLabel()}
-      <div part="field" role="group">
+      <div part="field" role="group" aria-labelledby=${this.labeled ? this.labelId : nothing}>
         <button
           part="decrement"
           type="button"
@@ -484,7 +484,7 @@ let HelixHeadlessNumberInput = class HelixHeadlessNumberInput extends MixinContr
       ${this.renderHint()}${this.renderFeedback()}`;
     }
     get valueAsNumber() {
-        return asNumber(this.value);
+        return this.numeric ?? Number.NaN;
     }
     set valueAsNumber(count) {
         this.value = fromNumber(count);

package/dist/progress/root/progress-root.js

@@ -51,7 +51,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
         this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = this.indeterminate
             ? null
-            : String(Math.min(Math.max(this.value || min, min), max));
+            : String(Math.min(Math.max(Number.isNaN(this.value) ? min : this.value, min), max));
         const shown = this.valueText || slottedWords(this, ['']);
         this.internals.ariaValueText = this.indeterminate ? shown || null : shown || this.text;
         this.toggleState('complete', this.complete);

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

@@ -19,7 +19,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * whole set.
  *
  * `Select` owns the value, passes it down to the listbox, and takes changes
- * back, so the value lives in one place.
+ * back, so the value lives in one place. With `multiple`, the value is the
+ * chosen values joined with commas, and the form receives one entry for each.
+ * An option's value may hold a comma, and it is read as one value.
  *
  * Set `valueContent` to draw the trigger's content from the chosen options,
  * and several chosen options are written as a list in the reader's language.
@@ -291,6 +293,11 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     private get display();
     /** The chosen options, in the order they appear. None on a server or while hydrating, and none for `items`. */
     private get chosenOptions();
+    /**
+     * The chosen values, read against the options' values, so an option whose
+     * value holds a comma is one value. See `chosenValues`.
+     */
+    private get chosen();
     /** `items` as the list reads them, built once per array. */
     private data;
     /**

package/dist/select/root/select-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, afterLinkFollowed, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -173,7 +173,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return this.partNamed('listbox');
     }
     get display() {
-        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
+        const chosen = new Set(this.chosen);
         const words = this.entries.filter((option) => chosen.has(option.value)).map((one) => one.text);
         if (words.length > 0) {
             return new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' }).format(words);
@@ -184,9 +184,12 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         if (this.items) {
             return [];
         }
-        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
+        const chosen = new Set(this.chosen);
         return optionsAmong(this.knownChildren).filter((option) => chosen.has(option.value));
     }
+    get chosen() {
+        return chosenValues(this.value, new Set(this.entries.map((option) => option.value)), this.multiple);
+    }
     get entries() {
         if (!this.items) {
             return optionsAmong(this.knownChildren);
@@ -257,7 +260,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             }
         }
         const present = new Set(options.map((option) => option.value));
-        const held = this.value === '' ? [] : this.value.split(',');
+        const held = chosenValues(this.value, new Set([...present, ...this.seen]), this.multiple);
         const gone = held.filter((value) => this.seen.has(value) && !present.has(value));
         this.seen = present;
         if (gone.length > 0) {
@@ -266,7 +269,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     sync() {
         if (this.multiple) {
-            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+            reportValues(this.internals, this.name, this.chosen);
         }
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);

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

@@ -41,7 +41,8 @@ export declare class HelixHeadlessSkeleton extends HelixElement {
      * What is loading, read out as the placeholder's name, such as "Loading
      * profile".
      *
-     * Absent hides the placeholder from screen readers.
+     * Absent hides the placeholder from screen readers. Around content, the name
+     * is read while `loading` is set, and the loaded content is read as it is.
      */
     label: string;
     /**

package/dist/skeleton/root/skeleton-root.js

@@ -22,7 +22,7 @@ let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
         const wraps = this.wraps;
         this.toggleState('wrapping', wraps);
         this.internals.ariaBusy = this.loading ? 'true' : null;
-        if (this.label) {
+        if (this.label && (this.loading || !wraps)) {
             hostAria(this.internals, { label: this.label, role: 'progressbar' });
             this.internals.ariaHidden = null;
         }

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

@@ -25,6 +25,9 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * control. While it moves, the distance is on the `item` part as
  * `--toast-swipe-x`.
  *
+ * **Escape dismisses the message holding focus**, through the same
+ * `helix-dismiss`, and focus moves to the next message.
+ *
  * **Messages are inverted by default.** The item flips `color-scheme`, so a new
  * message stands out from the page without using a color that carries meaning.
  *
@@ -57,6 +60,10 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  *
  * @cssproperty --toast-duration - How long this message stays, in milliseconds, for a progress hint.
  * @cssproperty --toast-swipe-x - How far a swipe has moved the message across, in pixels, toward the right.
+ *
+ * @cssstate closed - The message has been dismissed and is hidden, or leaving.
+ * @cssstate paused - The dismiss timer is paused, while a pointer or focus is on the message, or while the page is hidden.
+ * @cssstate waiting - The region holds the message back, past its `max-visible`, until a message before it goes.
  */
 export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base {
     /**
@@ -110,6 +117,18 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      * A subset of the tone axis: a toast reports a status and never a brand role.
      */
     tone?: 'danger' | 'info' | 'success' | 'warning';
+    /**
+     * Whether the region holds the message back, because more messages are
+     * showing than its `max-visible`. The region sets it. A waiting message is
+     * hidden, its timer has not started, and it is said once it shows.
+     */
+    waiting: boolean;
+    /** Whether the dismiss timer has started, which it does once the message first shows. */
+    private started;
+    /** Whether the timer is held for `waiting`, so the hold is let go once. */
+    private holding;
+    /** Starts the timer when the message first shows, and holds it while it waits again. */
+    private wait;
     /** Whether it is showing, whoever said so, and `undefined` until somebody has. */
     private openState;
     /**
@@ -128,6 +147,13 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     private readonly handlePause;
     private readonly handleResume;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Escape dismisses the message holding focus, as Radix's toast does. Taken
+     * only when the dismissal goes ahead, so a refused one leaves the key to
+     * the page.
+     */
+    private readonly handleKeydown;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** The elements assigned to one of the message's named slots. */

package/dist/toast/item/toast-item.js

@@ -38,8 +38,12 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             holdWhileHidden: true,
             paused: (paused) => {
                 this.toggleAttribute('data-paused', paused);
+                this.toggleState('paused', paused);
             },
         });
+        this.waiting = false;
+        this.started = false;
+        this.holding = false;
         this.openState = undefined;
         this.handlePause = () => {
             this.countdown.hold();
@@ -47,6 +51,15 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         this.handleResume = () => {
             this.countdown.release();
         };
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Escape' || event.defaultPrevented || !this.open) {
+                return;
+            }
+            if (this.dismiss()) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
         this.name = () => {
             const words = this.partNamed('content');
             if (!words) {
@@ -72,6 +85,23 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         const physical = isRtl(this) ? -travel : travel;
         this.partNamed('item')?.style.setProperty('--toast-swipe-x', travel === 0 ? '' : `${Math.round(physical)}px`);
     }
+    wait(waiting) {
+        if (waiting) {
+            if (this.started && !this.holding) {
+                this.holding = true;
+                this.countdown.hold();
+            }
+            return;
+        }
+        if (this.holding) {
+            this.holding = false;
+            this.countdown.release();
+        }
+        else if (!this.started && this.hasUpdated) {
+            this.started = true;
+            this.countdown.start(this.duration);
+        }
+    }
     dismiss() {
         if (!this.open) {
             return true;
@@ -97,19 +127,35 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
     connectedCallback() {
         super.connectedCallback();
         if (this.hasUpdated && this.open) {
-            this.resume();
+            if (this.waiting) {
+                this.wait(true);
+            }
+            else {
+                this.resume();
+            }
         }
+        this.addEventListener('keydown', this.handleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.holding = false;
+        this.removeEventListener('keydown', this.handleKeydown);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleAttribute('data-closed', !this.open);
-        this.toggleAttribute('hidden', !this.open);
+        this.toggleAttribute('hidden', !this.open || this.waiting);
+        this.toggleState('closed', !this.open);
+        this.toggleState('waiting', this.waiting);
         hostAria(this.internals, { role: 'alertdialog' });
         this.internals.ariaModal = 'false';
     }
     updated(changed) {
         super.updated(changed);
         this.name();
+        if (changed.has('waiting')) {
+            this.wait(this.waiting);
+        }
     }
     assigned(name) {
         return (this.renderRoot
@@ -118,7 +164,10 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        this.countdown.start(this.duration);
+        if (!this.waiting) {
+            this.started = true;
+            this.countdown.start(this.duration);
+        }
     }
     renderIcon(mark) {
         return html `<slot name="icon">
@@ -183,6 +232,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessToastItem.prototype, "tone", void 0);
+__decorate([
+    property({ attribute: false, type: Boolean })
+], HelixHeadlessToastItem.prototype, "waiting", void 0);
 HelixHeadlessToastItem = __decorate([
     customElement('helix-headless-toast-item')
 ], HelixHeadlessToastItem);

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

@@ -49,6 +49,19 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * message, then the one before it, then back to where it was before it entered
  * the stack.
  *
+ * **`max-visible` limits how many messages show at once**, as Zag's `max`
+ * does. The messages after that many, in document order, wait: each is hidden,
+ * its timer has not started, and the region says it once it shows, when a
+ * message before it goes. A waiting message has `:state(waiting)`.
+ *
+ * **Keyboard.**
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | F8, or your `hotkey` | Moves focus to the first control in the stack, and back to where it was when pressed in the stack. |
+ * | Tab, Shift+Tab | Moves between the controls of the messages. |
+ * | Escape | Dismisses the message holding focus. Focus moves to the next message, then the one before it, then back to where it was. |
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays
@@ -81,6 +94,12 @@ export declare class HelixHeadlessToast extends HelixElement {
      * the rest of your interface.
      */
     label: string;
+    /**
+     * How many messages show at once. The messages after that many wait, hidden
+     * and with their timers stopped, until a message before them goes. Unset,
+     * every message shows.
+     */
+    maxVisible?: number;
     /**
      * Which corner or edge the stack sits at.
      *
@@ -171,6 +190,18 @@ export declare class HelixHeadlessToast extends HelixElement {
     private watcher;
     /** The messages that are showing, in order. */
     private get showing();
+    /** The messages `max-visible` holds back. */
+    private readonly held;
+    /**
+     * Holds back the messages past `max-visible`, and returns the ones it has
+     * just let go. A message that has been dismissed takes no place in the line.
+     */
+    private queue;
+    /**
+     * Lets go of the messages past `max-visible` that now have room, raises the
+     * stack and says them, once each has shown.
+     */
+    private restack;
     private get region();
     /**
      * Puts the stack in the top layer while a message shows, and on top of it.
@@ -215,6 +246,7 @@ export declare class HelixHeadlessToast extends HelixElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/toast/root/toast-root.js

@@ -40,6 +40,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             }
         };
         this.made = new WeakSet();
+        this.held = new WeakSet();
         this.handleFocusIn = (event) => {
             const from = event.relatedTarget;
             if (from instanceof HTMLElement && !deepContains(this, from)) {
@@ -165,7 +166,8 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     }
     sweep() {
         for (const one of [...this.children]) {
-            if (!(one instanceof HTMLElement) || !one.hidden || !this.made.has(one)) {
+            const closed = one.open === false;
+            if (!(one instanceof HTMLElement) || !closed || !one.hidden || !this.made.has(one)) {
                 continue;
             }
             this.made.delete(one);
@@ -173,7 +175,38 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         }
     }
     get showing() {
-        return [...this.children].filter((one) => one instanceof HTMLElement && !one.hidden);
+        return [...this.children].filter((one) => one instanceof HTMLElement && !one.hidden && !this.held.has(one));
+    }
+    queue() {
+        const max = this.maxVisible;
+        const line = [...this.children].filter((one) => one instanceof HTMLElement && one.open !== false);
+        const released = [];
+        line.forEach((one, at) => {
+            const wait = max !== undefined && max >= 0 && at >= max;
+            if (this.held.has(one) && !wait) {
+                released.push(one);
+            }
+            if (wait) {
+                this.held.add(one);
+            }
+            else {
+                this.held.delete(one);
+            }
+            if ((one.waiting ?? false) !== wait) {
+                one.waiting = wait;
+            }
+        });
+        return released;
+    }
+    restack() {
+        const released = this.queue();
+        if (released.length === 0) {
+            return;
+        }
+        void Promise.all(released.map((one) => one.updateComplete)).then(() => {
+            this.place(released);
+            this.tell(released);
+        });
     }
     get region() {
         return this.partNamed('region');
@@ -238,6 +271,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         document.addEventListener('keydown', this.handleHotkey);
         this.watcher = new MutationObserver((records) => {
             const added = records.flatMap((record) => [...record.addedNodes]);
+            this.restack();
             this.place(added);
             this.tell(added);
             this.sweep();
@@ -262,8 +296,16 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.queue();
         this.place();
     }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('maxVisible')) {
+            this.restack();
+            this.place();
+        }
+    }
     render() {
         return html `<div part="region" popover="manual" tabindex="-1"><slot></slot><span part="live" role="status">${this.said}</span><span part="live" role="alert">${this.urgent}</span></div>`;
     }
@@ -275,6 +317,9 @@ __decorate([
     words,
     property()
 ], HelixHeadlessToast.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'max-visible', type: Number })
+], HelixHeadlessToast.prototype, "maxVisible", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessToast.prototype, "placement", void 0);

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

@@ -129,6 +129,7 @@ import '../../menu/index.js';
  * @csspart entry-shortcut-key - One key of a row's shortcut chord, inside `entry-shortcut`. The player's rows set none.
  * @csspart entry-shortcut-separator - The `+` between two keys of a row's shortcut, where the platform writes one.
  * @csspart entry-start - The leading column that holds the `start` slot. It is always rendered.
+ * @csspart entry-surface - The panel a row's submenu opens in beside it. The player's rows have none.
  * @csspart failure - The message shown when the source cannot be played.
  * @csspart forward - The button that skips forward ten seconds.
  * @csspart fullscreen - The button that enters and leaves fullscreen.

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

@@ -610,7 +610,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start"
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface"
         value="off"
         checkable
         exclusive
@@ -623,7 +623,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       ${tracks.map((track, at) => html `<${this.tag('menu-item')} part="entry"
         exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start"
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface"
           value=${track.language || String(at)}
           checkable
           exclusive
@@ -652,7 +652,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start"
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface"
         value="remote"
         @helix-select=${() => void this.remote.prompt()}
       >
@@ -664,7 +664,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start" value="speed" @helix-select=${() => this.cycleSpeed()}>
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface" value="speed" @helix-select=${() => this.cycleSpeed()}>
         <slot name="speed-icon" slot="start">${drawIcon(gauge)}</slot>
         ${this.speedLabel}: ${this.rate}x
       </${this.tag('menu-item')}>`;
@@ -674,7 +674,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start"
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface"
         value=${one}
         @helix-select=${() => this.skipBy(back ? -SKIP_SECONDS : SKIP_SECONDS)}
       >
@@ -688,7 +688,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start" value="previous" @helix-select=${() => this.skip(true)}>
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface" value="previous" @helix-select=${() => this.skip(true)}>
         <slot name="previous-icon" slot="start">${drawIcon(skipBack)}</slot>
         ${this.previousLabel}
       </${this.tag('menu-item')}>`;
@@ -697,7 +697,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start" value="next" @helix-select=${() => this.skip(false)}>
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface" value="next" @helix-select=${() => this.skip(false)}>
         <slot name="next-icon" slot="start">${drawIcon(skipForward)}</slot>
         ${this.nextLabel}
       </${this.tag('menu-item')}>`;
@@ -707,7 +707,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start"
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface"
         ?download=${local}
         href=${this.src}
         rel=${local ? nothing : 'noreferrer'}
@@ -721,7 +721,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         return html `<${this.tag('menu-item')} part="entry"
     exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start" value="pip" @helix-select=${() => void this.togglePip()}>
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface" value="pip" @helix-select=${() => void this.togglePip()}>
       <slot name="pip-icon" slot="start">${drawIcon(pictureInPicture)}</slot>
       ${this.pipLabel}
     </${this.tag('menu-item')}>`;

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

@@ -30,6 +30,7 @@ import '../../menu/index.js';
  * @csspart entry-shortcut-key - One key of an entry's shortcut chord, inside `entry-shortcut`. The playlist's entries set none.
  * @csspart entry-shortcut-separator - The `+` between two keys of an entry's shortcut, where the platform writes one.
  * @csspart entry-start - The column at the start of an entry. It is a slot and is always present.
+ * @csspart entry-surface - The panel an entry's submenu opens in beside it. The playlist's entries have none.
  * @csspart menu - The menu that holds the entries.
  * @csspart menu-back - The button that goes back from a submenu.
  * @csspart menu-back-mark - The icon on a submenu's back button.

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

@@ -88,7 +88,7 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
           part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
         shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
-        shortcut-separator: entry-shortcut-separator, start: entry-start"
+        shortcut-separator: entry-shortcut-separator, start: entry-start, surface: entry-surface"
           value=${entry.value}
           checkable
           ?checked=${entry.current}