@fusion.dev/helix-headless 0.146.0 → 0.148.0

package/dist/textarea/root/textarea-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, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -126,11 +126,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
             return;
         }
         this.copyValidity(control);
-        const own = control.validity.valid ? this.validate?.(this.value) : undefined;
-        const message = Array.isArray(own) ? own.join(' ') : typeof own === 'string' ? own : '';
-        if (message !== '') {
-            this.internals.setValidity({ customError: true }, message, control);
-        }
+        applyOwnRule(this.internals, control, this.validate, this.value);
         this.refreshFeedback();
     }
     connectedCallback() {
@@ -175,6 +171,9 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         this.sync();
         this.grow();
     }
+    renderClearIcon() {
+        return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
+    }
     render() {
         return html `${this.renderLabel()}
     <div part="field">
@@ -207,7 +206,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
               aria-label=${this.clearLabel}
               @click=${this.handleClear}
             >
-              ${drawIcon(x)}
+              ${this.renderClearIcon()}
             </button>`
             : nothing}
     </div>

package/dist/time-input/root/time-input-root.d.ts

@@ -74,6 +74,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-column-search - The region that holds the filter field.
  * @csspart picker-column-search-field - The filter field.
  * @csspart picker-columns - The row of columns, in `wheels`.
+ * @csspart picker-feedback - The picker's own message, under the times, while the picker's `feedback` is set.
  * @csspart picker-list - The listbox holding the times, in `list`.
  * @csspart picker-list-empty - The text shown when the filter hides every option.
  * @csspart picker-list-error - The list's `error` part, which the list never sets: its times do not load.
@@ -142,9 +143,12 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     /**
      * Language tag the times are written in.
      *
-     * Absent uses the runtime's own.
+     * Absent is the page's: the `lang` of the nearest element with one, as
+     * Shoelace and Web Awesome read it, then the runtime's own.
      */
     locale: string;
+    /** The locale the words are written in: `locale`, or the page's `lang`. */
+    private get language();
     /**
      * Latest time that can be chosen, as `HH:mm`.
      */

package/dist/time-input/root/time-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, valueAsTime as asTime, clockLocale, customElement, fillTemplate, timeAsValue as fromTime, HelixFormElement, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, timeFault, writeClock, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, clockLocale, customElement, fillTemplate, timeAsValue as fromTime, HelixFormElement, isClockValue, localeOf, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, timeFault, writeClock, } from '@fusion.dev/helix-core';
 import { clock } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -88,6 +88,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             }
         };
     }
+    get language() {
+        return localeOf(this, this.locale);
+    }
     get held() {
         return this.value
             .replace(/\s+[–-]\s+/g, ',')
@@ -102,7 +105,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         return 'time';
     }
     get segmentLocale() {
-        return this.locale;
+        return this.language;
     }
     get segmentOptions() {
         return { hourCycle: this.hourCycle, seconds: this.seconds };
@@ -113,7 +116,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
     written(at) {
         return this.timeStyle === 'iso' || !this.isTime(at)
             ? at
-            : writeClock(at, clockLocale(this.locale, this.hourCycle), this.seconds);
+            : writeClock(at, clockLocale(this.language, this.hourCycle), this.seconds);
     }
     get display() {
         if (this.mode === 'multiple') {
@@ -155,7 +158,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             return [
                 'rangeUnderflow',
                 fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
-                    min: writeClock(this.min, clockLocale(this.locale, this.hourCycle), this.seconds),
+                    min: writeClock(this.min, clockLocale(this.language, this.hourCycle), this.seconds),
                 }),
             ];
         }
@@ -163,7 +166,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             return [
                 'rangeOverflow',
                 fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
-                    max: writeClock(this.max, clockLocale(this.locale, this.hourCycle), this.seconds),
+                    max: writeClock(this.max, clockLocale(this.language, this.hourCycle), this.seconds),
                 }),
             ];
         }
@@ -189,7 +192,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         column-filter-mark: picker-column-filter-mark, column-hint: picker-column-hint,
         column-items: picker-column-items, column-label: picker-column-label,
         column-live: picker-column-live, column-loading: picker-column-loading, column-search: picker-column-search,
-        column-search-field: picker-column-search-field, columns: picker-columns, list: picker-list,
+        column-search-field: picker-column-search-field, columns: picker-columns, feedback: picker-feedback, list: picker-list,
         list-empty: picker-list-empty, list-error: picker-list-error, list-feedback: picker-list-feedback,
         list-filter-icon: picker-list-filter-icon, list-filter-mark: picker-list-filter-mark,
         list-hint: picker-list-hint, list-items: picker-list-items, list-label: picker-list-label,
@@ -206,7 +209,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       manual
       label=${this.label || 'Time'}
       hour-cycle=${this.hourCycle ?? nothing}
-      locale=${this.locale || nothing}
+      locale=${this.language || nothing}
       max=${this.max}
       min=${this.min}
       ?seconds=${this.seconds}

package/dist/time-picker/root/time-picker-root.d.ts

@@ -2,7 +2,7 @@ import { HelixFormElement, type HourCycle } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
 import '../../option/index.js';
-declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
+declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary A control for choosing a time from a list or from wheels.
  *
@@ -59,6 +59,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart column-search - The region that holds the filter field.
  * @csspart column-search-field - The filter field.
  * @csspart columns - The row of columns, in `wheels`.
+ * @csspart feedback - The message under the times, while `feedback` is set.
  * @csspart list - The listbox holding the times, in `list`.
  * @csspart list-empty - The text shown when the filter hides every option.
  * @csspart list-error - The list's `error` part, which Time Picker never sets: its times do not load.
@@ -80,6 +81,9 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart option-item-selected - The row of a chosen time: the one time, or either end of a range.
  * @csspart option-label - The time's label.
  * @csspart option-text - The label and the caption, as one column.
+ *
+ * @cssstate blank - While no time is chosen.
+ * @cssstate invalid - While `invalid` is set or `feedback` says what is wrong.
  */
 export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
     /**
@@ -119,16 +123,6 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * English, "Stunde" in German.
      */
     hourLabel?: string;
-    /**
-     * Whether the current selection fails validation.
-     *
-     * A flag rather than a message, the same split Date Picker draws. A flat
-     * picker has no room of its own for a sentence: the field that wraps one owns
-     * the label, the hint and the feedback, and a second message inside the panel
-     * would be the same error said twice. What is left for the picker is the one
-     * thing the field cannot draw from outside, the mark on the answer itself.
-     */
-    invalid: boolean;
     /**
      * Accessible name for the list, which has no visible one of its own.
      *
@@ -136,11 +130,14 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      */
     label: string;
     /**
-     * Language tag the times are written in.
+     * Language tag the times and the wheels' names are written in.
      *
-     * Absent uses the runtime's own.
+     * Absent is the page's: the `lang` of the nearest element with one, as
+     * Shoelace and Web Awesome read it, then the runtime's own.
      */
     locale: string;
+    /** The locale the words are written in: `locale`, or the page's `lang`. */
+    private get language();
     /**
      * Stops the arrow keys in the list from choosing each time they move to.
      * Enter, Space or a click chooses.
@@ -460,7 +457,8 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     private listRevealed;
     /**
      * The list's name: the host's `aria-labelledby` read out, then its
-     * `aria-label`, then `label`.
+     * `aria-label`, then `label`, through core's `hostWords`, which Select reads
+     * its list's name through too.
      *
      * Read out as words, because the list is inside two shadow roots and an id on
      * the page reaches neither. Measured before this: `<helix-time-picker

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

@@ -4,18 +4,17 @@ 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 { 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 { clockLocale, commaList, customElement, dayPeriod, fillTemplate, HelixFormElement, hostWords, inlineStep, isTwelveHour, localeOf, MixinControllerValue, MixinPickerFeedback, 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 { wheelName } from '../wheel-name.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
-let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControllerValue(HelixFormElement) {
+let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
         this.disableTimes = '';
-        this.invalid = false;
         this.label = 'Time';
         this.locale = '';
         this.manual = false;
@@ -94,11 +93,14 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             next.focus();
         };
     }
+    get language() {
+        return localeOf(this, this.locale);
+    }
     get times() {
         return offeredTimes(this.min, this.max, this.step, this.seconds);
     }
     get clock() {
-        return clockLocale(this.locale, this.hourCycle);
+        return clockLocale(this.language, this.hourCycle);
     }
     valueFor(at) {
         return secondsAsValue(at, this.seconds);
@@ -239,13 +241,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         this.reveal();
     }
     get listName() {
-        const named = (this.getAttribute('aria-labelledby') ?? '')
-            .split(/\s+/)
-            .filter(Boolean)
-            .map((id) => elementById(this, id)?.textContent?.trim() ?? '')
-            .filter(Boolean)
-            .join(' ');
-        return named || this.getAttribute('aria-label') || this.label;
+        return hostWords(this, this.label);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -259,8 +255,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        this.internals.ariaInvalid = this.invalid ? 'true' : null;
         this.report();
+        this.toggleState('blank', this.value === '');
     }
     updated(changed) {
         super.updated(changed);
@@ -282,7 +278,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return html `<${this.tag('listbox')}
       part="column"
       data-column=${part}
-      aria-invalid=${this.invalid ? 'true' : nothing}
+      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+      aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: column-empty, error: column-error, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
         live: column-live, loading: column-loading, search: column-search, search-field: column-search-field"
@@ -320,20 +317,21 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       data-unset=${this.value === '' ? '' : nothing}
       @keydown=${this.handleColumnsKeydown}
     >
-      ${this.renderColumn('hour', this.hourLabel ?? wheelName('hour', this.locale), 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 ?? wheelName('minute', this.locale), this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barredAt(hour * 3600 + Number(one) * 60))}
+      ${this.renderColumn('hour', this.hourLabel ?? wheelName('hour', this.language), 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 ?? wheelName('minute', this.language), 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 ?? wheelName('second', this.locale), this.secondsShown.map(String), (one) => one.padStart(2, '0'), String(second), (one) => this.barredAt(hour * 3600 + minute * 60 + Number(one)))
+            ? this.renderColumn('second', this.secondLabel ?? wheelName('second', this.language), 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 ?? wheelName('dayPeriod', this.locale), ['AM', 'PM'], (one) => dayPeriod(one, this.clock), meridiem, (one) => this.halfBarred(one))
+            ? this.renderColumn('meridiem', this.meridiemLabel ?? wheelName('dayPeriod', this.language), ['AM', 'PM'], (one) => dayPeriod(one, this.clock), meridiem, (one) => this.halfBarred(one))
             : nothing}
     </div>`;
     }
     renderList() {
         return html `<${this.tag('listbox')}
       part="list"
-      aria-invalid=${this.invalid ? 'true' : nothing}
+      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+      aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: list-empty, error: list-error, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
         live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"
@@ -365,9 +363,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     }
     render() {
         if (this.variant === 'wheels' && this.mode === undefined) {
-            return this.renderSpinner();
+            return html `${this.renderSpinner()}${this.renderPickerFeedback()}`;
         }
-        return html `${this.renderList()}`;
+        return html `${this.renderList()}${this.renderPickerFeedback()}`;
     }
     get valueAsDate() {
         const at = valueAsSeconds(this.value);
@@ -398,9 +396,6 @@ __decorate([
 __decorate([
     property({ attribute: 'hour-label' })
 ], HelixHeadlessTimePicker.prototype, "hourLabel", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessTimePicker.prototype, "invalid", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimePicker.prototype, "label", void 0);

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

@@ -10,14 +10,15 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  *
  * **Each item runs its own timer.** A timer held by the region would restart
  * with each new message, and the last of three messages would stay for nine
- * seconds.
+ * seconds. It pauses while the pointer or focus is on the message, and while
+ * the page is hidden, so a message is not spent in a background tab.
  *
  * **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. Give it a
  * `heading` and a `description`, and the heading names it and the description
- * describes it, for a message with a title and a line of detail. A `danger` message
- * is its own assertive live region, so it is announced at once; every other one
- * is announced politely by the region.
+ * describes it, for a message with a title and a line of detail. The region
+ * says each message once as it arrives, a `danger` one assertively, so a
+ * message is never a live region of its own.
  *
  * 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
@@ -85,8 +86,10 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     /** Writes how far a swipe has moved the message toward the end of the line. */
     private slide;
     /**
-     * The dismiss timer, which pauses while a reader is on the message and
-     * continues from what was left.
+     * The dismiss timer, which pauses while a reader is on the message, and
+     * while the page is hidden, and continues from what was left. A message that
+     * arrives in a background tab waits for the reader to come back, as React
+     * Aria's toast queue does.
      *
      * Paused is said on the host so the indicator can freeze with the clock. A
      * `data-` attribute rather than a property, because it is written after

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

@@ -35,6 +35,7 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
             done: () => {
                 this.dismiss();
             },
+            holdWhileHidden: true,
             paused: (paused) => {
                 this.toggleAttribute('data-paused', paused);
             },
@@ -104,7 +105,6 @@ let HelixHeadlessToastItem = class HelixHeadlessToastItem extends MixinDismissib
         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);

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

@@ -9,10 +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 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.
+ * **The region is a landmark named by `label`, and it says each message once
+ * as it arrives**: a `danger` message assertively, and every other one
+ * politely. It says the word for the tone, the heading, the description and
+ * the text, and not the actions, through two live regions of its own, the
+ * `live` parts, which it empties again a moment later. The stack itself is not
+ * a live region, so a message is never said twice, and changing the words of a
+ * message already showing says nothing. 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
@@ -54,6 +59,7 @@ 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 live - The two regions that say each message as it arrives, a polite `status` and an assertive `alert`, inside the stack. Empty at rest, and hide them with the standard clip, never `display: none`.
  * @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 {
@@ -95,6 +101,36 @@ export declare class HelixHeadlessToast extends HelixElement {
      */
     placement?: 'bottom-center' | 'bottom-end' | 'bottom-start' | 'top-center' | 'top-end' | 'top-start';
     protected willUpdate(changed: PropertyValues): void;
+    /** What the polite region is saying. */
+    private said;
+    /** What the assertive region is saying. */
+    private urgent;
+    private readonly hush;
+    /**
+     * Words waiting for the next frame: the polite ones and the urgent ones.
+     *
+     * Collected rather than written straight in, because the accessibility tree
+     * is built once a frame: two messages that arrive in separate tasks of one
+     * frame would otherwise each overwrite the region, and only the second
+     * would be heard.
+     */
+    private readonly pending;
+    /** Whether a frame is already coming to say what is pending. */
+    private filling;
+    /**
+     * Says messages that have just arrived, each once, `danger` ones assertively.
+     *
+     * Emptied first and filled a frame later, so a message with the same words
+     * as the one before is still a change, and so a region the stack has just
+     * shown is in the accessibility tree before its words land. Every message
+     * that arrives before that frame is said in it, each as its own sentence.
+     */
+    private announce;
+    /**
+     * Says the messages that have just arrived: through the regions, or through
+     * `ariaNotify` where a modal dialog has made them inert.
+     */
+    private tell;
     /** The element focus came from when it entered the stack. */
     private focusOrigin;
     private readonly scope;

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

@@ -4,15 +4,21 @@ 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, deepActiveElement, deepContains, FocusScopeController, fillTemplate, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
+import { animationsFinished, customElement, DelayController, deepActiveElement, deepContains, FocusScopeController, fillTemplate, focusableElements, HelixElement, hostAria, scrollHolders, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { matchesHotkey, parseHotkey } from '../hotkey.js';
+import { joinSaid, messageWords } from '../words.js';
 let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     constructor() {
         super(...arguments);
         this.hotkey = 'F8';
         this.label = 'Notifications ({hotkey})';
+        this.said = '';
+        this.urgent = '';
+        this.hush = new DelayController(this, { renders: false });
+        this.pending = { said: [], urgent: [] };
+        this.filling = false;
         this.scope = new FocusScopeController(this, {
             contents: () => this.showing.flatMap((one) => {
                 const target = focusTarget(one);
@@ -85,9 +91,51 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             label: fillTemplate(this.label, { hotkey: this.hotkey }),
             role: 'region',
         });
-        this.internals.ariaLive = 'polite';
-        this.internals.ariaRelevant = 'additions';
-        this.internals.ariaAtomic = 'false';
+    }
+    announce(arrived) {
+        for (const one of arrived) {
+            const words = messageWords(one);
+            if (words !== '') {
+                ;
+                (isDanger(one) ? this.pending.urgent : this.pending.said).push(words);
+            }
+        }
+        if (this.filling || (this.pending.said.length === 0 && this.pending.urgent.length === 0)) {
+            return;
+        }
+        this.filling = true;
+        this.said = '';
+        this.urgent = '';
+        const fill = () => {
+            this.filling = false;
+            this.said = joinSaid(this.pending.said);
+            this.urgent = joinSaid(this.pending.urgent);
+            this.pending.said = [];
+            this.pending.urgent = [];
+            this.hush.start(1000, () => {
+                this.said = '';
+                this.urgent = '';
+            });
+        };
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(fill);
+        }
+        else {
+            fill();
+        }
+    }
+    tell(added) {
+        const showing = this.showing;
+        const arrived = added.filter((one) => one instanceof HTMLElement && showing.includes(one));
+        if (arrived.length === 0) {
+            return;
+        }
+        if (this.blocked()) {
+            this.notify(arrived);
+        }
+        else {
+            this.announce(arrived);
+        }
     }
     add(message, options = {}) {
         const tier = this.constructor.tier;
@@ -121,8 +169,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
                 continue;
             }
             this.made.delete(one);
-            const running = typeof one.getAnimations === 'function' ? one.getAnimations({ subtree: true }) : [];
-            void Promise.allSettled(running.map((animation) => animation.finished)).then(() => one.remove());
+            void animationsFinished(one).then(() => one.remove());
         }
     }
     get showing() {
@@ -152,13 +199,9 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         if (!open || blocked) {
             region.showPopover();
         }
-        if (blocked) {
-            this.notify(arrived);
-        }
     }
     lowerWhenStill(region) {
-        const running = typeof this.getAnimations === 'function' ? this.getAnimations({ subtree: true }) : [];
-        void Promise.allSettled(running.map((one) => one.finished)).then(() => {
+        void animationsFinished(this).then(() => {
             if (this.showing.length === 0 && popoverOpen(region)) {
                 region.hidePopover();
             }
@@ -182,9 +225,9 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
             return;
         }
         for (const one of arrived) {
-            const words = (one.textContent ?? '').replace(/\s+/gu, ' ').trim();
+            const words = messageWords(one);
             if (words !== '') {
-                speaker.ariaNotify(words);
+                speaker.ariaNotify(words, { priority: isDanger(one) ? 'high' : 'normal' });
             }
         }
     }
@@ -194,7 +237,9 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         this.addEventListener('helix-dismiss', this.handleDismiss);
         document.addEventListener('keydown', this.handleHotkey);
         this.watcher = new MutationObserver((records) => {
-            this.place(records.flatMap((record) => [...record.addedNodes]));
+            const added = records.flatMap((record) => [...record.addedNodes]);
+            this.place(added);
+            this.tell(added);
             this.sweep();
         });
         this.watcher.observe(this, {
@@ -220,7 +265,7 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
         this.place();
     }
     render() {
-        return html `<div part="region" popover="manual" tabindex="-1"><slot></slot></div>`;
+        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>`;
     }
 };
 __decorate([
@@ -232,10 +277,17 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessToast.prototype, "placement", void 0);
+__decorate([
+    state()
+], HelixHeadlessToast.prototype, "said", void 0);
+__decorate([
+    state()
+], HelixHeadlessToast.prototype, "urgent", void 0);
 HelixHeadlessToast = __decorate([
     customElement('helix-headless-toast')
 ], HelixHeadlessToast);
 export { HelixHeadlessToast };
+const isDanger = (item) => (item.tone ?? item.getAttribute('tone')) === 'danger';
 const popoverOpen = (region) => {
     try {
         return region.matches(':popover-open');

package/dist/toast/words.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Pieces of a message joined into one line a screen reader says, with a full
+ * stop between two where the first does not already end a sentence, so a
+ * heading and its detail are heard as two sentences and not run together.
+ */
+export declare const joinSaid: (pieces: readonly string[]) => string;
+/**
+ * What a message says as it arrives: the word for its tone, then its heading,
+ * its description and its text, and never its actions or its dismiss control,
+ * which a reader finds by moving into the message.
+ */
+export declare const messageWords: (item: Element) => string;

package/dist/toast/words.js

@@ -0,0 +1,25 @@
+import { toneMark } from '@fusion.dev/helix-core';
+const UNSAID = new Set(['actions', 'dismiss-icon', 'icon']);
+export const joinSaid = (pieces) => pieces
+    .map((piece) => piece.replace(/\s+/gu, ' ').trim())
+    .filter((piece) => piece !== '')
+    .reduce((line, piece) => line === '' ? piece : `${line}${/[.!?:;]$/u.test(line) ? '' : '.'} ${piece}`, '');
+export const messageWords = (item) => {
+    const tone = item.tone ?? item.getAttribute('tone') ?? undefined;
+    const label = toneMark(tone)?.label;
+    const heading = [];
+    const rest = [];
+    for (const node of item.childNodes) {
+        if (node instanceof Element) {
+            const slot = node.getAttribute('slot') ?? '';
+            if (!UNSAID.has(slot)) {
+                ;
+                (slot === 'heading' ? heading : rest).push(node.textContent ?? '');
+            }
+        }
+        else if (node.nodeType === 3) {
+            rest.push(node.textContent ?? '');
+        }
+    }
+    return joinSaid([...(label ? [label] : []), ...heading, ...rest]);
+};