@fusion.dev/helix-headless 0.143.0 → 0.144.0

package/dist/time-picker/root/time-picker-root.js

@@ -4,17 +4,12 @@ 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 { valueAsTime as asTime, customElement, elementById, fillTemplate, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, reportValues, valueAsMinutes, writeTime, writtenList, } from '@fusion.dev/helix-core';
+import { clockLocale, commaList, customElement, dayPeriod, elementById, fillTemplate, HelixFormElement, inlineStep, isTwelveHour, MixinControllerValue, nearestTime, offeredTimes, reportValues, secondsAsValue, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, writeClock, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
-const isTwelveHour = (locale) => new Intl.DateTimeFormat(locale || undefined, { timeStyle: 'short' }).resolvedOptions().hour12 ===
-    true;
-const dayPeriod = (half, locale) => new Intl.DateTimeFormat(locale || undefined, { hour: 'numeric', hour12: true, timeZone: 'UTC' })
-    .formatToParts(new Date(Date.UTC(1970, 0, 1, half === 'AM' ? 9 : 21)))
-    .find((part) => part.type === 'dayPeriod')?.value ?? half;
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControllerValue(HelixFormElement) {
     constructor() {
         super(...arguments);
@@ -60,69 +55,78 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             if (this.isDisabled) {
                 return;
             }
-            const { hour, meridiem, minute } = this.parts;
-            let next = hour * 60 + minute;
+            const { hour, meridiem, minute, second } = this.parts;
+            let [h, m, sec] = [hour, minute, second];
             if (part === 'minute') {
-                next = hour * 60 + Number(to);
+                m = Number(to);
+            }
+            else if (part === 'second') {
+                sec = Number(to);
             }
             else if (part === 'hour') {
-                const shown = Number(to);
-                const whole = isTwelveHour(this.locale) ? (shown % 12) + (meridiem === 'PM' ? 12 : 0) : shown;
-                next = whole * 60 + minute;
+                h = wholeHour(Number(to), isTwelveHour(this.clock) ? meridiem : undefined);
             }
             else {
-                const half = hour % 12;
-                next = (half + (to === 'PM' ? 12 : 0)) * 60 + minute;
+                h = (hour % 12) + (to === 'PM' ? 12 : 0);
             }
-            const whole = minutesAsValue(this.nearest(next));
-            if (this.barred(whole)) {
+            const nearest = this.nearest(h * 3600 + m * 60 + sec);
+            if (this.barredAt(nearest)) {
                 return;
             }
-            this.requestValue(whole);
+            this.requestValue(this.valueFor(nearest));
         };
         this.readOnly = false;
         this.required = false;
+        this.secondLabel = 'Second';
+        this.seconds = false;
         this.step = 15;
         this.listRevealed = false;
         this.naming = undefined;
+        this.handleColumnsKeydown = (event) => {
+            const step = inlineStep(this, event.key);
+            if (step === 0 || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            const columns = [...(this.renderRoot?.querySelectorAll('[part="column"]') ?? [])];
+            const at = columns.findIndex((column) => event.composedPath().includes(column));
+            const next = columns[at + step];
+            if (at < 0 || !next) {
+                return;
+            }
+            event.preventDefault();
+            next.focus();
+        };
     }
     get times() {
-        const from = valueAsMinutes(this.min) ?? 0;
-        const to = valueAsMinutes(this.max) ?? 1439;
-        const step = Math.max(1, Math.round(this.step));
-        const found = [];
-        for (let at = from; at <= to; at += step) {
-            found.push(at);
-        }
-        return found;
+        return offeredTimes(this.min, this.max, this.step, this.seconds);
+    }
+    get clock() {
+        return clockLocale(this.locale, this.hourCycle);
+    }
+    valueFor(at) {
+        return secondsAsValue(at, this.seconds);
     }
     barred(at) {
-        return writtenList(this.disableTimes).includes(at);
-    }
-    nearest(minutes) {
-        const times = this.times;
-        let best = times[0] ?? minutes;
-        for (const at of times) {
-            if (Math.abs(at - minutes) < Math.abs(best - minutes)) {
-                best = at;
-            }
-        }
-        return best;
+        const seconds = valueAsSeconds(at);
+        return seconds !== null && this.barredAt(seconds);
+    }
+    barredAt(at) {
+        return timeBarred(at, this.disableTimes);
+    }
+    nearest(at) {
+        return nearestTime(this.times, at);
     }
     wholeHourBarred(shown, half) {
-        const whole = half === undefined ? shown : (shown % 12) + (half === 'PM' ? 12 : 0);
-        const within = this.times.filter((at) => Math.floor(at / 60) === whole);
-        return within.length > 0 && within.every((at) => this.barred(minutesAsValue(at)));
+        const whole = wholeHour(shown, half);
+        const within = this.times.filter((at) => Math.floor(at / 3600) === whole);
+        return within.length > 0 && within.every((at) => this.barredAt(at));
     }
     halfBarred(half) {
-        const within = this.times.filter((at) => (half === 'PM') === at >= 720);
-        return within.length > 0 && within.every((at) => this.barred(minutesAsValue(at)));
+        const within = this.times.filter((at) => (half === 'PM') === at >= 43_200);
+        return within.length > 0 && within.every((at) => this.barredAt(at));
     }
     get held() {
-        return this.value
-            .split(',')
-            .map((one) => one.trim())
-            .filter(Boolean);
+        return commaList(this.value);
     }
     between(at) {
         if (this.mode !== 'range') {
@@ -132,17 +136,25 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return from !== undefined && to !== undefined && at > from && at < to;
     }
     get parts() {
-        const at = valueAsMinutes(this.value) ?? valueAsMinutes(this.min) ?? 0;
-        const hour = Math.floor(at / 60);
-        return { hour, meridiem: hour < 12 ? 'AM' : 'PM', minute: at % 60 };
+        const at = valueAsSeconds(this.value) ?? valueAsSeconds(this.min) ?? 0;
+        return wheelParts(at, isTwelveHour(this.clock));
     }
     get hours() {
-        const found = new Set(this.times.map((at) => Math.floor(at / 60)));
+        const found = new Set(this.times.map((at) => Math.floor(at / 3600)));
         return [...found];
     }
     get minutes() {
         const hour = this.parts.hour;
-        return this.times.filter((at) => Math.floor(at / 60) === hour).map((at) => at % 60);
+        const found = new Set(this.times
+            .filter((at) => Math.floor(at / 3600) === hour)
+            .map((at) => Math.floor(at / 60) % 60));
+        return [...found];
+    }
+    get secondsShown() {
+        const { hour, minute } = this.parts;
+        return this.times
+            .filter((at) => Math.floor(at / 60) === hour * 60 + minute)
+            .map((at) => at % 60);
     }
     reveal() {
         if (this.mode !== undefined) {
@@ -163,32 +175,33 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return super.requestValue(next);
     }
     fault(at) {
-        const minutes = valueAsMinutes(at) ?? 0;
-        const floor = valueAsMinutes(this.min) ?? 0;
-        const ceiling = valueAsMinutes(this.max) ?? 1439;
-        if (minutes < floor) {
-            return [
-                'rangeUnderflow',
-                fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
-                    min: writeTime(this.min, this.locale),
-                }),
-            ];
-        }
-        if (minutes > ceiling) {
-            return [
-                'rangeOverflow',
-                fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
-                    max: writeTime(this.max, this.locale),
-                }),
-            ];
-        }
-        if (this.barred(at)) {
-            return ['badInput', this.unavailableMessage || 'Choose a time that is available.'];
-        }
-        if (!this.times.includes(minutes)) {
-            return ['stepMismatch', this.stepMismatchMessage || 'Choose one of the times on offer.'];
+        switch (timeFault(at, {
+            disableTimes: this.disableTimes,
+            max: this.max,
+            min: this.min,
+            offered: this.times,
+        })) {
+            case 'rangeUnderflow':
+                return [
+                    'rangeUnderflow',
+                    fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                        min: writeClock(this.min, this.clock, this.seconds),
+                    }),
+                ];
+            case 'rangeOverflow':
+                return [
+                    'rangeOverflow',
+                    fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                        max: writeClock(this.max, this.clock, this.seconds),
+                    }),
+                ];
+            case 'unavailable':
+                return ['badInput', this.unavailableMessage || 'Choose a time that is available.'];
+            case 'stepMismatch':
+                return ['stepMismatch', this.stepMismatchMessage || 'Choose one of the times on offer.'];
+            default:
+                return undefined;
         }
-        return undefined;
     }
     reportRequired() {
         const anchor = this.partNamed('list') ?? undefined;
@@ -197,11 +210,12 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             return;
         }
         const held = this.held;
-        if (held.length > 0 && held.some((one) => asTime(one) === null)) {
+        if (held.length > 0 && held.some((one) => valueAsSeconds(one) === null)) {
+            const shape = this.seconds ? 'HH:mm:ss' : 'HH:mm';
             this.internals.setValidity({ badInput: true }, this.badInputMessage ||
                 (this.mode === undefined
-                    ? 'Enter a time as HH:mm.'
-                    : 'Enter times as HH:mm, separated by commas.'), anchor);
+                    ? `Enter a time as ${shape}.`
+                    : `Enter times as ${shape}, separated by commas.`), anchor);
             return;
         }
         for (const one of held) {
@@ -297,9 +311,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     </${this.tag('listbox')}>`;
     }
     renderSpinner() {
-        const twelve = isTwelveHour(this.locale);
-        const { hour, meridiem, minute } = this.parts;
-        const shownHour = twelve ? String(hour % 12 === 0 ? 12 : hour % 12) : String(hour);
+        const twelve = isTwelveHour(this.clock);
+        const { hour, meridiem, minute, second, shown } = this.parts;
         const hours = twelve
             ? [...new Set(this.hours.map((one) => (one % 12 === 0 ? 12 : one % 12)))].sort((a, b) => a - b)
             : this.hours;
@@ -308,11 +321,15 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       role="group"
       aria-label=${this.listName}
       data-unset=${this.value === '' ? '' : nothing}
+      @keydown=${this.handleColumnsKeydown}
     >
-      ${this.renderColumn('hour', this.hourLabel, hours.map(String), (one) => (twelve ? one : one.padStart(2, '0')), shownHour, (one) => this.wholeHourBarred(Number(one), twelve ? meridiem : undefined))}
-      ${this.renderColumn('minute', this.minuteLabel, this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barred(minutesAsValue(hour * 60 + Number(one))))}
+      ${this.renderColumn('hour', this.hourLabel, hours.map(String), (one) => (twelve ? one : one.padStart(2, '0')), String(shown), (one) => this.wholeHourBarred(Number(one), twelve ? meridiem : undefined))}
+      ${this.renderColumn('minute', this.minuteLabel, this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barredAt(hour * 3600 + Number(one) * 60))}
+      ${this.seconds
+            ? this.renderColumn('second', this.secondLabel, this.secondsShown.map(String), (one) => one.padStart(2, '0'), String(second), (one) => this.barredAt(hour * 3600 + minute * 60 + Number(one)))
+            : nothing}
       ${twelve
-            ? this.renderColumn('meridiem', this.meridiemLabel, ['AM', 'PM'], (one) => dayPeriod(one, this.locale), meridiem, (one) => this.halfBarred(one))
+            ? this.renderColumn('meridiem', this.meridiemLabel, ['AM', 'PM'], (one) => dayPeriod(one, this.clock), meridiem, (one) => this.halfBarred(one))
             : nothing}
     </div>`;
     }
@@ -332,8 +349,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       @helix-before-change=${this.handleChange}
       @input=${this.handleListInput}
     >
-      ${this.times.map((minutes) => {
-            const at = minutesAsValue(minutes);
+      ${this.times.map((seconds) => {
+            const at = this.valueFor(seconds);
             const between = this.between(at);
             return html `<${this.tag('option')}
           part="option${between ? ' option-between' : ''}"
@@ -344,7 +361,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
           ?disabled=${this.barred(at)}
           ?selected=${this.held.includes(at)}
           data-between=${between ? '' : nothing}
-          >${writeTime(at, this.locale)}</${this.tag('option')}
+          >${writeClock(at, this.clock, this.seconds)}</${this.tag('option')}
         >`;
         })}
     </${this.tag('listbox')}>`;
@@ -356,16 +373,20 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return html `${this.renderList()}`;
     }
     get valueAsDate() {
-        return asTime(this.value);
+        const at = valueAsSeconds(this.value);
+        return at === null ? null : new Date(at * 1000);
     }
     set valueAsDate(date) {
-        this.value = fromTime(date);
+        this.valueAsNumber = date ? date.getTime() : Number.NaN;
     }
     get valueAsNumber() {
-        return asTime(this.value)?.getTime() ?? Number.NaN;
+        const at = valueAsSeconds(this.value);
+        return at === null ? Number.NaN : at * 1000;
     }
     set valueAsNumber(ms) {
-        this.value = Number.isNaN(ms) ? '' : fromTime(new Date(ms));
+        this.value = Number.isNaN(ms)
+            ? ''
+            : this.valueFor(Math.floor((((ms % 86_400_000) + 86_400_000) % 86_400_000) / 1000));
     }
 };
 __decorate([
@@ -374,6 +395,9 @@ __decorate([
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
+__decorate([
+    property({ attribute: 'hour-cycle' })
+], HelixHeadlessTimePicker.prototype, "hourCycle", void 0);
 __decorate([
     property({ attribute: 'hour-label' })
 ], HelixHeadlessTimePicker.prototype, "hourLabel", void 0);
@@ -416,6 +440,12 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "required", void 0);
+__decorate([
+    property({ attribute: 'second-label' })
+], HelixHeadlessTimePicker.prototype, "secondLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTimePicker.prototype, "seconds", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimePicker.prototype, "step", void 0);

package/dist/toast/hotkey.d.ts

@@ -0,0 +1,22 @@
+import { type ChordPress } from '@fusion.dev/helix-core';
+/** A key and the modifiers held with it. */
+export interface Chord {
+    alt: boolean;
+    ctrl: boolean;
+    key: string;
+    meta: boolean;
+    shift: boolean;
+}
+/** What a key press carries that a chord is compared against. */
+export type Pressed = ChordPress;
+/**
+ * Reads a chord written as keys joined by `+`, such as `F8` or `Alt+T`, case
+ * aside. The last part is the key. Empty, or a chord with no key, is none.
+ *
+ * Split as core's `chordParts` splits every chord, and read more strictly than
+ * Kbd reads one: four modifiers by their own names, no `mod`, and Shift held
+ * exactly as written, so the key that moves to the stack is the one written.
+ */
+export declare const parseHotkey: (text: string) => Chord | null;
+/** Whether a press is the chord: the same key, case aside, and exactly its modifiers. */
+export declare const matchesHotkey: (pressed: Pressed, chord: Chord | null) => boolean;

package/dist/toast/hotkey.js

@@ -0,0 +1,23 @@
+import { chordParts } from '@fusion.dev/helix-core';
+const MODIFIERS = new Set(['alt', 'ctrl', 'meta', 'shift']);
+export const parseHotkey = (text) => {
+    const parts = chordParts(text);
+    const key = parts.pop();
+    if (!key || MODIFIERS.has(key.toLowerCase())) {
+        return null;
+    }
+    const held = new Set(parts.map((one) => one.toLowerCase()));
+    return {
+        alt: held.has('alt'),
+        ctrl: held.has('ctrl'),
+        key,
+        meta: held.has('meta'),
+        shift: held.has('shift'),
+    };
+};
+export const matchesHotkey = (pressed, chord) => chord !== null &&
+    pressed.key.toLowerCase() === chord.key.toLowerCase() &&
+    pressed.altKey === chord.alt &&
+    pressed.ctrlKey === chord.ctrl &&
+    pressed.metaKey === chord.meta &&
+    pressed.shiftKey === chord.shift;

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

@@ -1,4 +1,4 @@
-import { HelixElement, type ToneMark } from '@fusion.dev/helix-core';
+import { HelixElement, SwipeController, type ToneMark } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
@@ -12,6 +12,16 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * with each new message, and the last of three messages would stay for nine
  * seconds.
  *
+ * **Each message is an `alertdialog` named by its words**, which is how a reader
+ * who moves into the stack hears which message they are on. A `danger` message
+ * is its own assertive live region, so it is announced at once; every other one
+ * is announced politely by the region.
+ *
+ * A touch or a pen swipes a message toward the end of the line, and past
+ * halfway, or quickly, dismisses it through the same `helix-dismiss` as its
+ * control. While it moves, the distance is on the `item` part as
+ * `--toast-swipe-x`.
+ *
  * **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.
  *
@@ -39,6 +49,7 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * @csspart timer - The bar showing how long is left, where a duration was given.
  *
  * @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.
  */
 export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base {
     /**
@@ -64,6 +75,9 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      */
     get open(): boolean;
     set open(next: boolean);
+    protected readonly swipes: SwipeController;
+    /** Writes how far a swipe has moved the message toward the end of the line. */
+    private slide;
     /** 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. */
@@ -106,6 +120,7 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     /**
      * The mark for the message's tone, behind a seam.

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

@@ -4,14 +4,33 @@ 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, MixinDismissible, requestChange, toneMark, } from '@fusion.dev/helix-core';
-import { x } from '@fusion.dev/helix-icons';
+import { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, isRtl, MixinDismissible, requestChange, SwipeController, settleSwipe, swipeEdge, toneMark, towardEdge, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
+        this.swipes = new SwipeController(this, {
+            axis: () => (this.open ? 'x' : undefined),
+            end: (dx, _dy, vx) => {
+                const edge = swipeEdge('end', isRtl(this));
+                const width = this.partNamed('item')?.getBoundingClientRect().width ?? 0;
+                const shown = settleSwipe({
+                    points: [1],
+                    size: width,
+                    travel: Math.max(0, towardEdge(edge, dx, 0)),
+                    velocity: towardEdge(edge, vx, 0),
+                });
+                if (shown === 0 && this.dismiss()) {
+                    return;
+                }
+                this.slide(0);
+            },
+            move: (dx) => this.slide(Math.max(0, towardEdge(swipeEdge('end', isRtl(this)), dx, 0))),
+            start: (_target, event) => event.pointerType !== 'mouse',
+            surface: () => this.partNamed('item'),
+        });
         this.openState = undefined;
         this.holds = 0;
         this.handlePause = () => {
@@ -33,6 +52,10 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         this.openState = next;
         this.requestUpdate('open', previous);
     }
+    slide(travel) {
+        const physical = isRtl(this) ? -travel : travel;
+        this.partNamed('item')?.style.setProperty('--toast-swipe-x', travel === 0 ? '' : `${Math.round(physical)}px`);
+    }
     dismiss() {
         if (!this.open) {
             return true;
@@ -86,6 +109,16 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         super.willUpdate(changed);
         this.toggleAttribute('data-closed', !this.open);
         this.toggleAttribute('hidden', !this.open);
+        hostAria(this.internals, { role: 'alertdialog' });
+        this.internals.ariaModal = 'false';
+        this.internals.ariaLive = this.tone === 'danger' ? 'assertive' : null;
+    }
+    updated(changed) {
+        super.updated(changed);
+        const words = this.partNamed('content');
+        if (words) {
+            hostAria(this.internals, { labelledBy: [words] });
+        }
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -108,9 +141,7 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
     }
     renderDismissIcon() {
         return html `<slot name="dismiss-icon">
-      <svg part="dismiss-mark" viewBox=${x.viewBox} fill="currentColor" aria-hidden="true">
-        ${unsafeSVG(x.content)}
-      </svg>
+      ${drawDismissGlyph()}
     </slot>`;
     }
     render() {
@@ -130,14 +161,11 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
       <div part="content"><slot></slot></div>
       <div part="actions"><slot name="actions"></slot></div>
       ${this.dismissible
-            ? html `<button
-              part="dismiss"
-              type="button"
-              aria-label=${this.dismissLabel}
-              @click=${() => this.dismiss()}
-            >
-              ${this.renderDismissIcon()}
-            </button>`
+            ? drawDismiss({
+                label: this.dismissLabel,
+                mark: this.renderDismissIcon(),
+                onDismiss: () => this.dismiss(),
+            })
             : nothing}
       ${this.duration
             ? html `<div

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

@@ -9,9 +9,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * announce a region that arrives already holding its message. `Radio.Group` is
  * part of its family for the same reason.
  *
- * **The region is polite, never assertive.** `role="alert"` interrupts whatever
- * a screen reader is reading. For something that cannot wait, use a `Dialog`,
- * which stops the page for every user.
+ * **The region is a landmark named by `label`, and a polite live region.** A
+ * `danger` message is announced assertively, and every other one politely.
+ * Each message is an `alertdialog` named by its words, so a reader who moves
+ * into the stack hears which message they are on.
+ *
+ * **`hotkey` takes focus to the stack and back**, F8 unless you set it, and
+ * `label` says which key: `{hotkey}` in it is filled in, so the default name
+ * is "Notifications (F8)". Pressed while focus is in the stack, it gives focus
+ * back to where it was.
  *
  * **The region never creates or removes items.** You render items and remove
  * them. An item requests closing with a cancelable `helix-dismiss` event. A
@@ -19,9 +25,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * and the DOM stay in sync. It hides on its own unless you set `open`, which
  * makes the state yours.
  *
- * There is no `toast.show()`. For a `toast()` function, write a small one over
- * your app's state, which also lets you render the same messages on the server,
- * in a test, or more than once.
+ * **`add()` shows a message from script**, for a page with no framework state
+ * to render them from: it appends a message of the region's own tier and
+ * removes it once it has been dismissed and has finished leaving. Messages
+ * you render yourself stay yours, and the region never removes them. A touch
+ * or a pen swipes a message away toward the end of the line.
  *
  * **The stack is in the top layer.** The `region` part is a `popover="manual"`
  * shown while a message is showing, and shown again above a modal dialog that
@@ -46,11 +54,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @event {HelixDismissEvent} helix-dismiss - A message is being dismissed, by its control or by its timer. The message sends it, and you can listen for it on the region. Cancelable: canceling it keeps the message.
  *
- * @csspart region - The stack the messages are in. It is in the top layer while a message shows.
+ * @csspart region - The stack the messages are in. It is in the top layer while a message shows, and takes focus from `hotkey` where no message holds a control.
  */
 export declare class HelixHeadlessToast extends HelixElement {
     /**
-     * Accessible name for the region, such as "Notifications".
+     * The key that takes focus to the stack and back, such as `F8` or `Alt+T`:
+     * keys joined by `+`, the last one the key. Empty turns it off.
+     */
+    hotkey: string;
+    /**
+     * Accessible name for the region, with `{hotkey}` filled in. Translate it with
+     * the rest of your interface.
      */
     label: string;
     /**
@@ -83,6 +97,26 @@ export declare class HelixHeadlessToast extends HelixElement {
     protected willUpdate(changed: PropertyValues): void;
     /** The element focus came from when it entered the stack. */
     private focusOrigin;
+    private readonly scope;
+    /** Takes focus to the stack and back, on `hotkey`. */
+    private readonly handleHotkey;
+    /** Messages `add()` made, which are the region's to remove. */
+    private readonly made;
+    /**
+     * Shows a message from script, and returns the element.
+     *
+     * The message is the region's own tier of `Toast.Item`, appended to the
+     * stack, holding `message` as its text. The region removes it once it has
+     * been dismissed and has finished leaving, which is the one case where it
+     * removes anything: a message you render stays yours.
+     */
+    add(message: string, options?: {
+        dismissible?: boolean;
+        duration?: number;
+        tone?: 'danger' | 'info' | 'success' | 'warning';
+    }): HTMLElement;
+    /** Removes a message `add()` made, once it has hidden and finished leaving. */
+    private sweep;
     /** Watches the messages arrive and hide, to raise or lower the stack. */
     private watcher;
     /** The messages that are showing, in order. */