@fusion.dev/helix-headless 0.146.0 → 0.147.0

package/dist/tag/group/tag-group.js

@@ -4,20 +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 { commaList, customElement, deepActiveElement, deepContains, HelixBeforeChangeEvent, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestChange, rovingStop, slottedWords, typeaheadBy, whenHydrated, } from '@fusion.dev/helix-core';
+import { commaList, customElement, deepActiveElement, deepContains, HelixBeforeChangeEvent, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestChange, rovingStop, slottedWords, typeaheadByWords, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTag } from '../root/tag-root.js';
 let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     constructor() {
         super(...arguments);
+        this.emptyLabel = 'No tags';
         this.label = '';
         this.value = '';
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.reachable.map((tag) => this.navigable(tag)),
             origin: 'focus',
             selects: () => false,
-            typeahead: typeaheadBy((item) => item.words),
+            typeahead: typeaheadByWords(),
             wrap: false,
         });
         this.handleKeydown = (event) => {
@@ -63,8 +64,8 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                     return;
                 }
                 const left = this.tags.map((one) => this.valueFor(one));
-                const pruned = prunedValue(this.value, this.valueFor(tag), left);
-                if (pruned !== this.value) {
+                const pruned = prunedValue(this.written, this.valueFor(tag), left);
+                if (pruned !== this.written) {
                     this.value = pruned;
                     this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
                 }
@@ -91,6 +92,14 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             }
         };
     }
+    get written() {
+        return typeof this.value === 'string'
+            ? this.value
+            : this.value
+                .map((one) => String(one).trim())
+                .filter((one) => one !== '')
+                .join(', ');
+    }
     get tags() {
         return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessTag);
     }
@@ -112,7 +121,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     }
     sync() {
         const mode = this.selectionMode ?? 'none';
-        const chosen = new Set(commaList(this.value));
+        const chosen = new Set(commaList(this.written));
         const tags = this.tags;
         const items = tags.map((tag) => ({
             disabled: tag.disabled,
@@ -144,7 +153,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             },
             event: (value) => new HelixBeforeChangeEvent({ value }),
             host: this,
-            next: pressedValue(mode, this.value, this.valueFor(tag)),
+            next: pressedValue(mode, this.written, this.valueFor(tag)),
         });
     }
     connectedCallback() {
@@ -176,11 +185,14 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     }
     render() {
         const empty = this.empty
-            ? html `<div part="empty" tabindex="-1"><slot name="empty"></slot></div>`
+            ? html `<div part="empty" tabindex="-1"><slot name="empty">${this.emptyLabel}</slot></div>`
             : nothing;
         return html `<slot @slotchange=${this.handleSlotchange}></slot>${empty}`;
     }
 };
+__decorate([
+    property({ attribute: 'empty-label' })
+], HelixHeadlessTagGroup.prototype, "emptyLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTagGroup.prototype, "label", void 0);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, type OwnRule } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -22,12 +22,22 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * every change once the browser finds nothing wrong, as React Aria's
  * TextField `validate` does.
  *
+ * **Keyboard.** The field's own keys are the platform's, and Enter starts a
+ * new line. The clear button under `clearable` is a tab stop of its own after
+ * the field.
+ *
+ * The inner textarea is named by `label`, or by a host `aria-label`,
+ * `aria-labelledby` or `<label for>`, and is described by the hint and the
+ * message, with `aria-invalid` while a message shows. The clear button is
+ * named `clear-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases Multiline, TextArea
  * @documentation https://fusion.dev/helix/components/textarea
  *
+ * @slot clear-icon - Replaces the cross on the clear button, under `clearable`.
  * @slot end - After the text, for an icon or an action beside it.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the control, for content richer than the `hint` text.
@@ -238,12 +248,14 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * nothing wrong. Return a message, or a list of them, to mark the field
      * invalid, and `true`, `null`, or nothing to accept the value.
      */
-    validate?: (value: string) => string | string[] | true | null | undefined;
+    validate?: OwnRule;
     /**
      * How the browser wraps the text, and whether the breaks are submitted with
      * it.
      */
     wrap: 'hard' | 'off' | 'soft';
+    /** The cross on the clear button, behind a seam a tier can move. */
+    protected renderClearIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

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,8 @@ 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 invalid - While `invalid` is set or `feedback` says what is wrong.
  */
 export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
     /**
@@ -119,16 +122,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 +129,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 +456,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,7 +255,6 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        this.internals.ariaInvalid = this.invalid ? 'true' : null;
         this.report();
     }
     updated(changed) {
@@ -282,7 +277,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return html `<${this.tag('listbox')}
       part="column"
       data-column=${part}
-      aria-invalid=${this.invalid ? 'true' : nothing}
+      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 +315,20 @@ 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-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 +360,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 +393,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

@@ -15,9 +15,9 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * **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

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

@@ -104,7 +104,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,24 @@ 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;
+    /**
+     * 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.
+     */
+    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;