@fusion.dev/helix-headless 0.177.0 → 0.177.1

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-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/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));