@fusion.dev/helix-headless 0.103.2 → 0.104.0

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

@@ -50,17 +50,6 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      * restart a message the reader is already partway through.
      */
     duration?: number;
-    /**
-     * What kind of message it is, which picks the mark and its name.
-     *
-     * A subset of the tone axis: a toast reports a status and never a brand role.
-     */
-    tone?: 'danger' | 'info' | 'success' | 'warning';
-    /** When the current run of the timer began, or nothing while it is paused. */
-    private startedAt;
-    /** What is left of the duration, so resuming continues rather than restarts. */
-    private remaining;
-    private timer;
     /**
      * Whether the message is still showing.
      *
@@ -76,6 +65,17 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      */
     get open(): boolean;
     set open(next: boolean);
+    /** When the current run of the timer began, or nothing while it is paused. */
+    private startedAt;
+    /** What is left of the duration, so resuming continues rather than restarts. */
+    private remaining;
+    private timer;
+    /**
+     * What kind of message it is, which picks the mark and its name.
+     *
+     * A subset of the tone axis: a toast reports a status and never a brand role.
+     */
+    tone?: 'danger' | 'info' | 'success' | 'warning';
     /** Whether it is showing, whoever said so, and `undefined` until somebody has. */
     private openState;
     /**
@@ -104,6 +104,7 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     private holds;
     private readonly handlePause;
     private readonly handleResume;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;

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

@@ -71,10 +71,16 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             this.dismiss();
         }, this.remaining);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated && this.open) {
+            this.resume();
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
-        clearTimeout(this.timer);
-        this.timer = undefined;
+        this.pause();
+        this.holds = 0;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -146,12 +152,12 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
 __decorate([
     property({ type: Number })
 ], HelixHeadlessToastItem.prototype, "duration", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessToastItem.prototype, "tone", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessToastItem.prototype, "open", null);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessToastItem.prototype, "tone", void 0);
 HelixHeadlessToastItem = __decorate([
     customElement('helix-headless-toast-item')
 ], HelixHeadlessToastItem);

package/dist/toolbar/root/toolbar-root.js

@@ -4,25 +4,11 @@ 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 { customElement, HelixElement, inlineStep } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, inlineStep, keyClaimed } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 const KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
 const ownsTabStop = (node) => 'focusable' in node;
-const CARETLESS = new Set(['button', 'checkbox', 'color', 'file', 'image', 'reset', 'submit']);
-const claimed = (event) => {
-    if (event.defaultPrevented) {
-        return true;
-    }
-    const inner = event.composedPath()[0];
-    if (!(inner instanceof HTMLElement)) {
-        return false;
-    }
-    if (inner.isContentEditable || inner.localName === 'textarea' || inner.localName === 'select') {
-        return true;
-    }
-    return inner.localName === 'input' && !CARETLESS.has(inner.type);
-};
 let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
     constructor() {
         super(...arguments);
@@ -41,7 +27,7 @@ let HelixHeadlessToolbar = class HelixHeadlessToolbar extends HelixElement {
             }
         };
         this.handleKeydown = (event) => {
-            if (!KEYS.has(event.key) || claimed(event)) {
+            if (!KEYS.has(event.key) || keyClaimed(event)) {
                 return;
             }
             const along = inlineStep(this, event.key);

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

@@ -348,6 +348,7 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * this should not be the thing to settle it.
      */
     private auditDescription;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;

package/dist/tooltip/root/tooltip-root.js

@@ -199,6 +199,12 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             '`aria-describedby="<that id>"` to the element it names. Written in your own markup ' +
             'it survives server rendering, which is why this element will not write it for you.');
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated) {
+            this.bind();
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.unbind();

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

@@ -40,6 +40,16 @@ export declare class HelixHeadlessTour extends HelixElement {
      * Label for the control that goes back, handed to every stop.
      */
     backLabel: string;
+    /**
+     * Stop to start on, where nothing declared one.
+     */
+    defaultIndex: number;
+    /**
+     * Label for the control that goes on from the last stop.
+     */
+    doneLabel: string;
+    /** The stop being shown, whoever set it, and `undefined` until somebody has. */
+    private indexState;
     /**
      * Which stop the reader is on.
      *
@@ -54,16 +64,6 @@ export declare class HelixHeadlessTour extends HelixElement {
      */
     get index(): number;
     set index(next: number);
-    /**
-     * Stop to start on, where nothing declared one.
-     */
-    defaultIndex: number;
-    /** The stop being shown, whoever set it, and `undefined` until somebody has. */
-    private indexState;
-    /**
-     * Label for the control that goes on from the last stop.
-     */
-    doneLabel: string;
     /**
      * Accessible name for the run, such as "Getting started".
      */

package/dist/tour/root/tour-root.js

@@ -12,8 +12,8 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         super(...arguments);
         this.backLabel = '';
         this.defaultIndex = 0;
-        this.indexState = undefined;
         this.doneLabel = '';
+        this.indexState = undefined;
         this.label = '';
         this.nextLabel = '';
         this.open = false;
@@ -34,7 +34,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
             }
         };
         this.handleKeydown = (event) => {
-            if (this.open && event.key === 'Escape') {
+            if (this.open && event.key === 'Escape' && !event.defaultPrevented) {
                 event.preventDefault();
                 this.skip();
             }
@@ -200,15 +200,15 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
 __decorate([
     property({ attribute: 'back-label' })
 ], HelixHeadlessTour.prototype, "backLabel", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessTour.prototype, "index", null);
 __decorate([
     property({ attribute: 'default-index', type: Number })
 ], HelixHeadlessTour.prototype, "defaultIndex", void 0);
 __decorate([
     property({ attribute: 'done-label' })
 ], HelixHeadlessTour.prototype, "doneLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessTour.prototype, "index", null);
 __decorate([
     property()
 ], HelixHeadlessTour.prototype, "label", void 0);

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

@@ -26,6 +26,7 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves.
  *
  * @csspart empty - Shown when there are no rows to show.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the rows are still on their way.
  * @csspart tree - The tree container.
  */

package/dist/tree/root/tree-root.js

@@ -176,7 +176,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         }}
       ></slot>
       ${this.renderStatus(this.hasRows)}
-    </div>`;
+    </div>${this.renderLive(this.hasRows)}`;
     }
 };
 __decorate([

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

@@ -54,6 +54,7 @@ import '../../menu/index.js';
  * @csspart captions-menu-back-mark - The glyph on the back control of a submenu.
  * @csspart captions-menu-empty - Shown when there are no items to show.
  * @csspart captions-menu-header - The bar above a submenu, holding the way back and its name.
+ * @csspart captions-menu-live - The inner menu's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart captions-menu-loading - Shown while the items are still on their way.
  * @csspart captions-menu-surface - The floating panel the menu is drawn on.
  * @csspart captions-menu-title - The name of the submenu that is showing.
@@ -68,6 +69,7 @@ import '../../menu/index.js';
  * @csspart forward - The control that goes on ten seconds.
  * @csspart fullscreen - The whole screen, and back.
  * @csspart header - The region top left, for a heading and a way out of a set.
+ * @csspart live - What the loading line says, in a region a screen reader hears when it changes. Visually hidden in the styled tier.
  * @csspart loading - What is said while the picture waits for more of itself.
  * The part of that which spins is drawn on it, which is `::part(loading)::before`
  * from a consumer's sheet: this tier ships no CSS, so a box it renders for one to
@@ -81,6 +83,7 @@ import '../../menu/index.js';
  * @csspart overflow-back-mark - The glyph on the back control of a submenu.
  * @csspart overflow-empty - Shown when there are no items to show.
  * @csspart overflow-header - The bar above a submenu, holding the way back and its name.
+ * @csspart overflow-live - The inner menu's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart overflow-loading - Shown while the items are still on their way.
  * @csspart overflow-surface - The floating panel the menu is drawn on.
  * @csspart overflow-title - The name of the submenu that is showing.
@@ -115,6 +118,18 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * start control, which is the correct thing to be looking at.
      */
     autoplay: boolean;
+    /**
+     * What the captions control is called where the video has one track, which it switches on and off.
+     *
+     * **Every word this player speaks is a property**, so a page in another
+     * language hears its own: the play, pause, loading and error labels were,
+     * and the rest of the bar read out in English beside them.
+     */
+    captionsLabel: string;
+    /**
+     * The row that turns captions off, where the video has several tracks to choose from.
+     */
+    captionsOffLabel: string;
     /**
      * Whether the browser draws the controls instead of this element.
      *
@@ -146,6 +161,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * Whether the browser may offer playback on a remote device.
      */
     disableRemotePlayback: boolean;
+    /**
+     * What the control that saves the file is called.
+     */
+    downloadLabel: string;
     /**
      * And what they are told when it will not play at all.
      */
@@ -182,6 +201,18 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * and not something a player can work around.
      */
     extraControls: string;
+    /**
+     * What the control that skips ahead is called, with `{seconds}` filled in.
+     */
+    forwardLabel: string;
+    /**
+     * What the control that fills the screen is called.
+     *
+     * **One name, pressed or not**, since the button says which with
+     * `aria-pressed`: a name that changed as well read out "Exit fullscreen,
+     * pressed", which is two answers to one question.
+     */
+    fullscreenLabel: string;
     /**
      * How long the bar waits after the pointer stops before it goes, in ms.
      *
@@ -206,6 +237,18 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * Whether it starts again at the end.
      */
     loop: boolean;
+    /**
+     * What the button that opens `overflow-controls` is called.
+     */
+    moreLabel: string;
+    /**
+     * What the control that silences the video is called, pressed while it is silent.
+     */
+    muteLabel: string;
+    /**
+     * What the control that asks for the next video is called.
+     */
+    nextLabel: string;
     /**
      * Controls that go behind one button instead of onto the bar, named the same
      * way.
@@ -228,6 +271,14 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * And while it would stop it.
      */
     pauseLabel: string;
+    /**
+     * How the volume is read out, with `{percent}` filled in.
+     */
+    percentLabel: string;
+    /**
+     * What the control that floats the video over other windows is called.
+     */
+    pipLabel: string;
     /**
      * What the play control is called while it would start the video.
      */
@@ -244,6 +295,26 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * How much to fetch before anything is asked for.
      */
     preload: 'auto' | 'metadata' | 'none';
+    /**
+     * What the control that asks for the previous video is called.
+     */
+    previousLabel: string;
+    /**
+     * What the control that casts the video to another device is called.
+     */
+    remoteLabel: string;
+    /**
+     * What the control that skips back is called, with `{seconds}` filled in.
+     */
+    rewindLabel: string;
+    /**
+     * What the scrubber is called.
+     */
+    seekLabel: string;
+    /**
+     * What the control that changes the speed is called.
+     */
+    speedLabel: string;
     /**
      * The speeds offered, slowest first, as multipliers of normal.
      */
@@ -270,6 +341,19 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * negation.
      */
     startControl?: 'none';
+    /**
+     * What the menu of tracks is called, where the video has several.
+     */
+    subtitlesLabel: string;
+    /**
+     * How the scrubber reads out where the video is, with `{position}` and
+     * `{duration}` filled in.
+     */
+    timeLabel: string;
+    /**
+     * What the volume slider is called.
+     */
+    volumeLabel: string;
     /**
      * Whether playback has stopped to wait for data.
      *