@fusion.dev/helix-headless 0.156.0 → 0.157.0

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}