@fusion.dev/helix-headless 0.177.0 → 0.177.2

package/dist/button/root/button-root.js

@@ -173,6 +173,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         this.watchForm(null);
     }
     formAssociatedCallback(form) {
+        super.formAssociatedCallback(form);
         this.watchForm(form);
     }
     render() {

package/dist/chat/composer/chat-composer.d.ts

@@ -49,7 +49,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @event {HelixSendEvent} helix-send - Fired when the user sends their turn, and cancelable.
  * @event {HelixTypingEvent} helix-typing - The user started or stopped writing, with `typing` saying which, as the composer's `typing` does.
- * @event {Event} input - The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Sent on the composer and does not bubble.
+ * @event {Event} input - The user changed the text. Read it from `value`, for a typing indicator or a saved draft. Bubbles and is composed, as a native field's is.
  *
  * @csspart composer - The whole composer.
  * @csspart end - The box around the `end` slot.

package/dist/chat/composer/chat-composer.js

@@ -41,7 +41,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
             event.stopPropagation();
             this.value = event.target.value;
             this.edited = true;
-            this.dispatchEvent(new Event('input'));
+            this.announceInput();
             this.markTyping(this.value !== '');
         };
         this.handleSend = () => {

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

@@ -306,19 +306,6 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      */
     protected sync(): void;
     protected updated(changed: PropertyValues): void;
-    /** Whether the trigger's press opened the panel that is open now. */
-    private pressedOpen;
-    /**
-     * The trigger's press, which notes that it opened the panel, so Escape hands
-     * focus back to the trigger.
-     */
-    private readonly handlePress;
-    /**
-     * Hands focus back to the control that opened the panel: the trigger after
-     * its press, which is the APG date picker dialog's rule, and the text after
-     * ArrowDown from it.
-     */
-    protected returnFocus(): void;
     /**
      * The picker the field opens, behind a seam the styled tier can move.
      *

package/dist/color-input/root/color-input-root.js

@@ -55,12 +55,6 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         this.handleSampleEnd = () => {
             this.requestOpen(true);
         };
-        this.pressedOpen = false;
-        this.handlePress = () => {
-            const opening = !this.open;
-            this.handleTriggerClick();
-            this.pressedOpen = opening && this.open;
-        };
     }
     static { this.words = 'helix-color-input'; }
     requestValue(next) {
@@ -123,18 +117,6 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         if (changed.has('value') && parseColor(this.value)) {
             this.settled = this.value;
         }
-        if (changed.has('open') && !this.open) {
-            this.pressedOpen = false;
-        }
-    }
-    returnFocus() {
-        const trigger = this.pressedOpen ? this.partNamed('trigger') : null;
-        this.pressedOpen = false;
-        if (trigger) {
-            trigger.focus();
-            return;
-        }
-        super.returnFocus();
     }
     renderPicker() {
         return html `<${this.tag('color-picker')}
@@ -222,7 +204,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
                 : 'swatch-value'
             : nothing}
           ?disabled=${this.isDisabled}
-          @click=${this.handlePress}
+          @click=${this.handleTriggerClick}
         >
           <span
             part="preview"

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

@@ -633,6 +633,16 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * is redrawn though the value it settles on is the one drawn before.
      */
     protected renderFields(color: Color): TemplateResult;
+    /**
+     * A channel's name, after the picker's own where the picker has one.
+     *
+     * **Every channel the same way**, as React Aria's color area names its own:
+     * "Brand, Saturation" says which picker on a page with two. The square's
+     * axes and the wheel took the picker's name, and the hue and opacity ramps
+     * and the number fields did not, so two pickers on a page gave two sliders
+     * named "Hue", measured in Chromium's tree.
+     */
+    protected channelName(channel: string): string;
     /**
      * One of the ramps under the square.
      *

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

@@ -407,11 +407,15 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
     }
     renderFields(color) {
         return html `<div part="fields">
-      ${channelFields(this.value, color, this.format ?? 'hex', this.alpha).map((field) => html `<label part="field">
-          <span part="field-label">${this.channelWord(field.channel)}</span>
+      ${channelFields(this.value, color, this.format ?? 'hex', this.alpha).map((field) => {
+            const word = this.channelWord(field.channel);
+            const name = this.channelName(word);
+            return html `<label part="field">
+          <span part="field-label">${word}</span>
           <input
             part="field-input"
             type="number"
+            aria-label=${name === word ? nothing : name}
             inputmode=${field.step < 1 ? 'decimal' : 'numeric'}
             min=${field.min}
             max=${field.max}
@@ -421,14 +425,19 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             ?readonly=${this.readOnly}
             @input=${(event) => this.handleField(field.channel, event)}
             @change=${(event) => {
-            event.stopPropagation();
-            this.settle();
-            this.requestUpdate();
-        }}
+                event.stopPropagation();
+                this.settle();
+                this.requestUpdate();
+            }}
           />
-        </label>`)}
+        </label>`;
+        })}
     </div>`;
     }
+    channelName(channel) {
+        const owner = this.getAttribute('aria-label')?.trim() || this.named;
+        return owner ? `${owner}, ${channel}` : channel;
+    }
     renderChannel(channel, label, max, value, spoken = '') {
         return html `<${this.tag('slider')}
       part="channel"
@@ -439,7 +448,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         tooltips: channel-tooltips"
       data-channel=${channel}
       aria-invalid=${this.marked ? 'true' : nothing}
-      label=${label}
+      label=${this.channelName(label)}
       max=${max}
       min="0"
       value-text=${spoken || nothing}
@@ -568,8 +577,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         const reversed = square('brightness');
         const hue = hueName({ alpha: 100, brightness: 100, hue: color.hue, saturation: 100 }, this.colorWords, locale);
         const hueSaid = (value) => new Intl.ListFormat(locale, { style: 'short', type: 'unit' }).format([String(value), hue]);
-        const owner = this.getAttribute('aria-label')?.trim() || this.named;
-        const axisName = (channel) => (owner ? `${owner}, ${channel}` : channel);
         const area = html `<div
         part="grid"
         style="--color-picker-hue: ${color.hue}; --color-picker-saturation: ${color.saturation}%; --color-picker-brightness: ${color.brightness}%"
@@ -584,7 +591,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           type="range"
           min="0"
           max="100"
-          aria-label=${axisName(this.saturationLabel)}
+          aria-label=${this.channelName(this.saturationLabel)}
           aria-describedby=${this.describedBy}
           aria-valuetext=${both}
           aria-invalid=${this.marked ? 'true' : nothing}
@@ -601,7 +608,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
           max="100"
           tabindex="-1"
           style="writing-mode: vertical-lr; direction: rtl"
-          aria-label=${axisName(this.brightnessLabel)}
+          aria-label=${this.channelName(this.brightnessLabel)}
           aria-describedby=${this.describedBy}
           aria-valuetext=${reversed}
           aria-invalid=${this.marked ? 'true' : nothing}
@@ -630,7 +637,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
               min="0"
               max="360"
               dir="ltr"
-              aria-label=${axisName(this.hueLabel)}
+              aria-label=${this.channelName(this.hueLabel)}
               aria-describedby=${this.describedBy}
               aria-valuetext=${hueSaid(color.hue)}
               aria-invalid=${this.marked ? 'true' : nothing}

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

@@ -395,6 +395,8 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * "France", and the form received two entries.
      */
     private get values();
+    /** The values a value holds, read as `values` reads this element's own. */
+    private valuesIn;
     /** The answers created here, which no option holds, kept so their commas read as theirs. */
     private readonly created;
     /**
@@ -577,6 +579,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * `result-label` for one where a page still sets it.
      */
     private countSaid;
+    /**
+     * Says the option a choice changed, for VoiceOver, which says nothing when
+     * `aria-selected` changes: `Beta, selected` for one taken, and its words
+     * alone for one let go, as the highlight says an option not chosen.
+     *
+     * **The option the choice changed, read from the values before and after.**
+     * With `multiple` the value is the whole list, and the option was looked up
+     * by it, so no option matched and no choice was ever said: measured with
+     * Beta chosen, Enter let it go and the live region kept `Beta, selected`.
+     */
+    private sayChoice;
     /**
      * Takes what the list announced and stops it there.
      *

package/dist/combobox/root/combobox-root.js

@@ -188,12 +188,12 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.handleChange = (event) => {
             event.stopPropagation();
             const { value } = event.detail;
+            const before = this.values;
             if (!this.requestValue(value)) {
                 return;
             }
-            const chosen = this.listbox?.options.find((option) => option.value === value);
-            if (chosen && onApple()) {
-                this.status.say(formatWords(this, 'selectedLabel', { name: chosen.text }));
+            if (onApple()) {
+                this.sayChoice(before, this.valuesIn(value));
             }
             this.emptied = false;
             this.typed = '';
@@ -253,11 +253,14 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         return this.partNamed('listbox');
     }
     get values() {
+        return this.valuesIn(this.value);
+    }
+    valuesIn(value) {
         const known = new Set(this.created);
         for (const option of optionsAmong(this.knownChildren)) {
             known.add(option.value);
         }
-        return chosenValues(this.value, known, this.multiple);
+        return chosenValues(value, known, this.multiple);
     }
     get chosen() {
         const options = optionsAmong(this.knownChildren);
@@ -460,6 +463,15 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             ? countLabel(count, this.resultLabel, this.resultsLabel, wordsLocale(this))
             : formatWords(this, 'resultsLabel', { count });
     }
+    sayChoice(before, after) {
+        const taken = this.multiple ? after.find((one) => !before.includes(one)) : after[0];
+        const changed = taken ?? before.find((one) => !after.includes(one));
+        const option = this.listbox?.options.find((one) => one.value === changed);
+        if (!option) {
+            return;
+        }
+        this.status.say(taken === undefined ? option.text : formatWords(this, 'selectedLabel', { name: option.text }));
+    }
     removeLastToken() {
         const last = this.values.at(-1);
         if (last !== undefined) {

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

@@ -486,7 +486,13 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     unavailableMessage: string;
     /**
      * The message for text that is no date, where `bad-input-message` is not
-     * set. `{mode}` is `single`, `range`, or `multiple`.
+     * set. `{mode}` is `single`, `range`, or `multiple`, and `{example}` is a
+     * date written as the field writes one, `August 24, 2026` in `en-US` and
+     * `24. August 2026` in `de-DE` at the default `date-style`.
+     *
+     * **The default names a date the field reads back.** It said "Enter a date
+     * as YYYY-MM-DD." to a reader whose field showed `August 4, 2026`, and a
+     * pattern token is words for a developer. Time Input says the same.
      */
     unreadableMessage: string;
     /**

package/dist/date-input/root/date-input-root.js

@@ -12,6 +12,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../date-picker/index.js';
 import '../../tag/root/index.js';
+const EXAMPLE = '2026-08-24';
 const dates = (value) => value
     .replace(/\s+[–-]\s+/g, ',')
     .split(',')
@@ -119,7 +120,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
             }
         };
         this.unavailableMessage = 'Choose a date that is available.';
-        this.unreadableMessage = '{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}';
+        this.unreadableMessage = '{mode, select, single {Enter a date such as {example}.} other {Enter dates such as {example}, separated by commas.}}';
         this.yearViewLabel = '{heading}. Choose a year';
         this.handleIconChange = () => {
             this.requestUpdate();
@@ -232,7 +233,10 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         const held = dates(this.value);
         if (held.length > 0 && !held.every(isDateValue)) {
             return (this.badInputMessage ||
-                formatWords(this, 'unreadableMessage', { mode: this.mode ?? 'single' }));
+                formatWords(this, 'unreadableMessage', {
+                    example: this.written(EXAMPLE),
+                    mode: this.mode ?? 'single',
+                }));
         }
         if (this.min !== '' && held.some((one) => one < this.min)) {
             return [

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

@@ -117,8 +117,12 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * **Every sentence a control raises in the browser's bubble is a property**,
      * named for the validity flag it reports, so a form in another language
      * speaks it. Unset is the sentence registered for the page's language, then
-     * the English. `{mode}` is `single`, `range` or `multiple`, so each can have
-     * its own sentence.
+     * the English. `{example}` is a date written as the calendar names one,
+     * `August 24, 2026` in `en-US` and `24. August 2026` in `de-DE`, and `{mode}`
+     * is `single`, `range` or `multiple`, so each can have its own sentence.
+     *
+     * **The default names a date in words.** It said "Enter a date as
+     * YYYY-MM-DD.", and a pattern token is words for a developer.
      */
     badInputMessage: string;
     /**

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

@@ -9,6 +9,7 @@ import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+const EXAMPLE = '2026-08-24';
 const KEYS = new Set([
     'ArrowDown',
     'ArrowLeft',
@@ -25,7 +26,7 @@ const firstOf = (year, month) => addMonths(asDate('2000-01-01'), (year - 2000) *
 let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
-        this.badInputMessage = '{mode, select, single {Enter a date as YYYY-MM-DD.} other {Enter dates as YYYY-MM-DD, separated by commas.}}';
+        this.badInputMessage = '{mode, select, single {Enter a date such as {example}.} other {Enter dates such as {example}, separated by commas.}}';
         this.defaultMonth = '';
         this.disableDates = '';
         this.disableDays = '';
@@ -491,7 +492,10 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         if (held.length > 0 && held.some((one) => asDate(one) === null)) {
             return [
                 { badInput: true },
-                formatWords(this, 'badInputMessage', { mode: this.mode ?? 'single' }),
+                formatWords(this, 'badInputMessage', {
+                    example: this.spoken(EXAMPLE),
+                    mode: this.mode ?? 'single',
+                }),
             ];
         }
         for (const one of held) {

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

@@ -360,8 +360,9 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      *
      * Not through `commit`, and that is the point of the split: a reset is the
      * form's decision and there is nothing here for a listener to refuse. What it
-     * owes is the report and the platform's own announcement, which is what
-     * `settle` is.
+     * owes is the report to the form, and no `input` or `change`: a native file
+     * input sends neither on `form.reset()`, measured in Chromium, where this
+     * sent both.
      */
     formResetCallback(): void;
     /**

package/dist/file-input/root/file-input-root.js

@@ -224,10 +224,13 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         }
         control.files = holding.files;
     }
-    settle() {
+    settle(announce = true) {
         this.committed = this.files;
         this.sync();
         this.requestUpdate();
+        if (!announce) {
+            return;
+        }
         this.announceInput();
         this.announceChange();
     }
@@ -265,7 +268,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         if (this.control) {
             restoreValue(this.control, '');
         }
-        this.settle();
+        this.settle(false);
     }
     renderMeta(file) {
         return html `<${this.tag('tag')} part="size"

package/dist/pin-input/root/pin-input-root.js

@@ -133,6 +133,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         }
         this.placeCaret(true);
         if (applied && this.value === code && code.length === this.count) {
+            this.runPendingUpdate();
             this.dispatchEvent(new HelixCompleteEvent({ value: code }));
             this.commit();
             if (this.autosubmit) {

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

@@ -277,7 +277,13 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     unavailableMessage: string;
     /**
      * The message for text that is no time, where `bad-input-message` is not
-     * set. `{mode}` is `single`, `range`, or `multiple`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`.
+     * set. `{mode}` is `single`, `range`, or `multiple`, `{example}` is a time
+     * written as the field writes one, `2:30 PM` in `en-US` and `14:30` in
+     * `de-DE`, and `{shape}` is `HH:mm`, or `HH:mm:ss` with `seconds`.
+     *
+     * **The default names a time the field reads back.** It said "Enter a time
+     * as HH:mm." to a reader whose field showed `2:30 PM`, and a pattern token
+     * is words for a developer.
      */
     unreadableMessage: string;
     /** Every time in the value, which may hold more than one. */

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

@@ -36,7 +36,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
         this.unavailableMessage = 'Choose a time that is available.';
-        this.unreadableMessage = '{mode, select, single {Enter a time as {shape}.} other {Enter times as {shape}, separated by commas.}}';
+        this.unreadableMessage = '{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}';
         this.draft = '';
         this.handleTextCommit = (event) => {
             if (this.mode !== 'multiple') {
@@ -182,10 +182,13 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
     }
     validate() {
         const held = this.held;
-        const shape = this.seconds ? 'HH:mm:ss' : 'HH:mm';
         if (held.length > 0 && !held.every((one) => this.isTime(one))) {
             return (this.badInputMessage ||
-                formatWords(this, 'unreadableMessage', { mode: this.mode ?? 'single', shape }));
+                formatWords(this, 'unreadableMessage', {
+                    example: this.written(this.seconds ? '14:30:15' : '14:30'),
+                    mode: this.mode ?? 'single',
+                    shape: this.seconds ? 'HH:mm:ss' : 'HH:mm',
+                }));
         }
         const rules = { disableTimes: this.disableTimes, max: this.max, min: this.min };
         const faults = held.map((one) => timeFault(one, rules));

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

@@ -131,9 +131,14 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * **Every sentence a control raises in the browser's bubble is a property**,
      * named for the validity flag it reports, so a form in another language
      * speaks it. Unset is the sentence registered for the page's language, then
-     * the English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and
-     * `{mode}` is `single`, `range` or `multiple`, so each can have its own
-     * sentence.
+     * the English. `{example}` is a time written as the picker writes one,
+     * `2:30 PM` in `en-US` and `14:30` in `de-DE`, `{shape}` is `HH:mm` or
+     * `HH:mm:ss`, and `{mode}` is `single`, `range` or `multiple`, so each can
+     * have its own sentence.
+     *
+     * **The default names a time as the picker shows one.** It said "Enter a
+     * time as HH:mm." to a reader whose list showed `2:30 PM`, and a pattern
+     * token is words for a developer. Time Input says the same.
      */
     badInputMessage: string;
     /**

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

@@ -14,7 +14,7 @@ import '../../option/root/index.js';
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
-        this.badInputMessage = '{mode, select, single {Enter a time as {shape}.} other {Enter times as {shape}, separated by commas.}}';
+        this.badInputMessage = '{mode, select, single {Enter a time such as {example}.} other {Enter times such as {example}, separated by commas.}}';
         this.disableTimes = '';
         this.emptyText = 'No times to choose from';
         this.hint = '';
@@ -300,6 +300,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             return [
                 { badInput: true },
                 formatWords(this, 'badInputMessage', {
+                    example: writeClock(this.seconds ? '14:30:15' : '14:30', this.clock, this.seconds),
                     mode: this.mode ?? 'single',
                     shape: this.seconds ? 'HH:mm:ss' : 'HH:mm',
                 }),