@fusion.dev/helix-headless 0.155.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/keys.d.ts

@@ -3,18 +3,22 @@
  *
  * Separable because the table is a convention rather than a fact about this
  * element: Space and `k` play, the arrows scrub and change the volume, `m`
- * mutes, `f` fills the screen, and `j` and `l` jump the distance the bar's own
- * buttons jump. What it needs is the media element and four actions, which is
+ * mutes, `f` fills the screen, `c` turns captions on and off, Home, End and
+ * the digits go to the start, the end and each tenth, and `j` and `l` jump the
+ * distance the bar's own buttons jump. What it needs is the media element and four actions, which is
  * the same handful the media session hands to a headset. Whether the keys are
  * bound at all, and what a taken press does to the event, stay with the element.
  */
 /** What a press asks the player for, which is all a key can do. */
 export interface KeyActions {
+    captions: () => void;
     fullscreen: () => void;
     seek: (seconds: number) => void;
     skipBy: (seconds: number) => void;
     toggle: () => void;
 }
+/** The keys `takeKey` answers, as `aria-keyshortcuts` names them. */
+export declare const PLAYER_KEYS = "Space K ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight J L ArrowUp ArrowDown M F C Home End 0 1 2 3 4 5 6 7 8 9";
 /**
  * Answers one press, and says whether it was one of these.
  *

package/dist/video/root/keys.js

@@ -1,8 +1,9 @@
 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 PLAYER_KEYS = 'Space K ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight J L ArrowUp ArrowDown M F C Home End 0 1 2 3 4 5 6 7 8 9';
 export const takeKey = (event, video, actions) => {
-    if (event.defaultPrevented) {
+    if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
         return false;
     }
     const origin = (event.composedPath?.()[0] ?? event.target);
@@ -54,7 +55,23 @@ export const takeKey = (event, video, actions) => {
             actions.fullscreen();
             break;
         }
+        case 'c': {
+            actions.captions();
+            break;
+        }
+        case 'Home': {
+            actions.seek(0);
+            break;
+        }
+        case 'End': {
+            actions.seek(video.duration);
+            break;
+        }
         default: {
+            if (/^[0-9]$/.test(event.key) && Number.isFinite(video.duration)) {
+                actions.seek((video.duration * Number(event.key)) / 10);
+                break;
+            }
             return false;
         }
     }

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

@@ -29,8 +29,16 @@ import '../../menu/index.js';
  * | Up, Down | Raises or lowers the volume by a tenth. |
  * | `m` | Mutes or unmutes. |
  * | `f` | Enters or leaves fullscreen. |
+ * | `c` | Turns captions on or off. |
+ * | Home, End | Goes to the start or the end. |
+ * | `0` to `9` | Goes to that tenth of the video: `5` is the middle. |
  * | Tab | Moves through the controls on the bar. |
  *
+ * A key with Control, Command, or Alt held is left to the browser. The
+ * player lists its keys in `aria-keyshortcuts`, and a live region says what a
+ * key changed that is not on the focused control: playing or paused, muted,
+ * the volume, captions on or off, and where the video is after a seek.
+ *
  * On the scrubber and the volume slider, the arrow keys, Page Up, Page Down,
  * Home, and End move the slider, as on any range input.
  *
@@ -121,11 +129,12 @@ 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.
  * @csspart header - The region at the top left that holds the `header` slot.
- * @csspart live - A live region that repeats the loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
+ * @csspart live - A live region that says the loading text, and what a key changed, such as the volume. Visually hidden in the styled tier.
  * @csspart loading - The text shown while the video waits for more data. Draw the spinner
  * with `::part(loading)::before` in your stylesheet. This tier ships no CSS and renders
  * no extra box for it.
@@ -187,6 +196,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * looking at.
      */
     autoplay: boolean;
+    /**
+     * What the live region says when `c` turns captions off.
+     */
+    captionsHiddenLabel: string;
     /**
      * The name of the captions control when the video has one track. The control
      * turns that track on and off.
@@ -201,6 +214,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * tracks.
      */
     captionsOffLabel: string;
+    /**
+     * What the live region says when `c` turns captions on.
+     */
+    captionsShownLabel: string;
     /**
      * Whether the browser draws its native controls. When set, this element draws
      * no controls of its own.
@@ -326,6 +343,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * What the button that opens `overflow-controls` is called.
      */
     moreLabel: string;
+    /**
+     * What the live region says when a key mutes the video.
+     */
+    mutedLabel: string;
     /**
      * The name of the mute control. The control shows as pressed while the video
      * is muted.
@@ -353,6 +374,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * bar: two of the same control is worse than either placement.
      */
     overflowControls: string;
+    /**
+     * What the live region says when a key pauses the video.
+     */
+    pausedLabel: string;
     /**
      * The name of the play control while pressing it would pause the video.
      */
@@ -372,6 +397,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * this is what a screen reader calls it on arriving.
      */
     playerLabel: string;
+    /**
+     * What the live region says when a key plays the video.
+     */
+    playingLabel: string;
     /**
      * The name of the play control while pressing it would start the video.
      */
@@ -453,6 +482,15 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * `{duration}` filled in.
      */
     timeLabel: string;
+    /**
+     * What the live region says when a key unmutes the video.
+     */
+    unmutedLabel: string;
+    /**
+     * What the live region says when a key changes the volume. `{percent}` is the
+     * volume from 0 to 100, written in the locale.
+     */
+    volumeChangedLabel: string;
     /**
      * What the volume slider is called.
      */
@@ -773,6 +811,28 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * key means and this says that nothing else gets it.
      */
     private readonly handleKeydown;
+    /**
+     * What a reader hears after a key, which changed something they may not be
+     * looking at: the focus is on the player or a control, and the bar may be
+     * hidden.
+     *
+     * **Said from the video's state after the press**, except for playing,
+     * which starts on a promise: whether the video was paused before the press
+     * says which way it went. Nothing for fullscreen, which a reader sees and a
+     * screen reader reports as the window changing, nor for `c` where there are
+     * no captions to turn on.
+     */
+    private sayKey;
+    /**
+     * What the live region says after a key, until the video waits for data,
+     * which it says over this.
+     */
+    private said;
+    /**
+     * Puts words in the live region. The same words twice differ by a space no
+     * reader hears, since a region whose text does not change is not read again.
+     */
+    private say;
     /** The caption tracks among the copies, named as the menu names them. */
     private captions;
     /**