@fusion.dev/helix-headless 0.159.0 → 0.160.0

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

@@ -4,8 +4,8 @@ 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, formatWords, timeAsValue as fromTime, HelixFormElement, handedLocale, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
-import { clock } from '@fusion.dev/helix-icons';
+import { AriaForwardController, valueAsTime as asTime, clockLocale, customElement, drawIcon, formatWords, timeAsValue as fromTime, HelixClearEvent, HelixFormElement, handedLocale, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, readWrittenTime, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
+import { clock, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -19,6 +19,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             target: () => this.partNamed('control') ?? this.segmentGroup,
         });
         this.autocomplete = '';
+        this.clearable = false;
+        this.clearLabel = 'Clear';
         this.announcesInput = true;
         this.disableTimes = '';
         this.locale = '';
@@ -34,16 +36,28 @@ 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.draft = '';
+        this.handleTextCommit = (event) => {
+            if (this.mode !== 'multiple') {
+                const held = this.held;
+                const read = held.map((one) => this.read(one));
+                if (held.length > 0 && !held.every((one) => this.isTime(one)) && read.every(Boolean)) {
+                    this.requestValue(read.join(','));
+                }
+            }
+            this.handleCommit(event);
+        };
         this.handleDraftKey = (event) => {
             if (this.mode !== 'multiple') {
                 return;
             }
             const held = this.held;
-            if (event.key === 'Enter' && this.isTime(this.draft)) {
+            const draft = this.read(this.draft.trim());
+            if (event.key === 'Enter' && draft !== '') {
                 event.preventDefault();
-                if (!held.includes(this.draft)) {
-                    this.requestPicked([...held, this.draft].sort().join(','));
+                if (!held.includes(draft)) {
+                    this.requestPicked([...held, draft].sort().join(','));
                 }
                 this.draft = '';
             }
@@ -91,6 +105,13 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
                 this.returnFocus();
             }
         };
+        this.handleClear = () => {
+            if (this.value !== '' && this.requestValue('')) {
+                this.announceChange();
+                this.dispatchEvent(new HelixClearEvent());
+            }
+            void this.updateComplete.then(() => this.returnFocus());
+        };
     }
     static { this.words = 'helix-time-input'; }
     get language() {
@@ -104,7 +125,10 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             .filter(Boolean);
     }
     get segmentable() {
-        return this.mode === undefined;
+        return this.mode !== 'multiple';
+    }
+    get segmentGroups() {
+        return this.mode === 'range' ? 2 : 1;
     }
     get segmentedKind() {
         return 'time';
@@ -141,6 +165,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
     get restCount() {
         return Math.max(0, this.held.length - this.shownTimes.length);
     }
+    read(text) {
+        return this.isTime(text) ? text : readWrittenTime(text, this.language, this.seconds);
+    }
     get picked() {
         const held = this.held;
         return held.length > 0 && held.every((one) => this.isTime(one)) ? held.join(',') : '';
@@ -157,9 +184,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         const shape = this.seconds ? 'HH:mm:ss' : 'HH:mm';
         if (held.length > 0 && !held.every((one) => this.isTime(one))) {
             return (this.badInputMessage ||
-                (this.mode === undefined
-                    ? `Enter a time as ${shape}.`
-                    : `Enter times as ${shape}, separated by commas.`));
+                formatWords(this, 'unreadableMessage', { mode: this.mode ?? 'single', shape }));
         }
         const rules = { disableTimes: this.disableTimes, max: this.max, min: this.min };
         const faults = held.map((one) => timeFault(one, rules));
@@ -249,6 +274,12 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         ${unsafeSVG(clock.content)}
       </svg></slot>`;
     }
+    get showsClear() {
+        return this.clearable && this.value !== '' && !this.isDisabled && !this.readOnly;
+    }
+    renderClearIcon() {
+        return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
+    }
     renderControl() {
         return html `<input
       part="control"
@@ -257,6 +288,10 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       .value=${this.display}
       name=${this.name || nothing}
       placeholder=${this.mode === 'multiple' && this.held.length > 0 ? nothing : this.placeholder || nothing}
+      role="combobox"
+      aria-controls="surface"
+      aria-expanded=${this.open ? 'true' : 'false'}
+      aria-haspopup="dialog"
       autocomplete=${this.autocomplete || nothing}
       aria-describedby=${this.describedBy ?? nothing}
       aria-invalid=${this.invalidity ?? nothing}
@@ -264,13 +299,17 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       ?readonly=${this.readOnly}
       ?required=${this.required}
       @blur=${this.handleBlur}
-      @change=${this.handleCommit}
+      @change=${this.handleTextCommit}
       @focus=${this.handleFocus}
       @input=${this.handleInput}
       @keydown=${this.handleDraftKey}
       @keypress=${this.handleKeypress}
     />`;
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('blank', this.value === '');
+    }
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
@@ -280,6 +319,16 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
             : nothing}
         ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
         <slot name="end"></slot>
+        ${this.showsClear
+            ? html `<button
+                part="clear"
+                type="button"
+                aria-label=${this.clearLabel}
+                @click=${this.handleClear}
+              >
+                ${this.renderClearIcon()}
+              </button>`
+            : nothing}
         <button
           part="trigger"
           type="button"
@@ -327,6 +376,13 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTimeInput.prototype, "clearable", void 0);
+__decorate([
+    words,
+    property({ attribute: 'clear-label' })
+], HelixHeadlessTimeInput.prototype, "clearLabel", void 0);
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimeInput.prototype, "disableTimes", void 0);
@@ -382,6 +438,10 @@ __decorate([
     words,
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessTimeInput.prototype, "unavailableMessage", void 0);
+__decorate([
+    words,
+    property({ attribute: 'unreadable-message' })
+], HelixHeadlessTimeInput.prototype, "unreadableMessage", void 0);
 __decorate([
     state()
 ], HelixHeadlessTimeInput.prototype, "draft", void 0);

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

@@ -1,4 +1,4 @@
-import { HelixFormElement, type HourCycle } from '@fusion.dev/helix-core';
+import { HelixFormElement, type HourCycle, type PickerFailure } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
 import '../../option/index.js';
@@ -51,7 +51,10 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * host's `aria-label` or its `aria-labelledby`. A development build warns
  * where all four are empty. The list is described by the hint, or by the
  * message in `feedback` in its place, and carries `aria-multiselectable` with
- * a `mode` and `aria-invalid` while `feedback` says what is wrong. The wheels
+ * a `mode`. It carries `aria-invalid` while `feedback` says what is wrong,
+ * while it holds a time outside `min` and `max` or one the picker does not
+ * offer, and, for a `required` picker with no time, once the reader has
+ * chosen one or a form has refused the picker. The wheels
  * are a `group` with that name, holding one `listbox` per wheel, named "Hour",
  * "Minute", "Second" and "AM/PM" in the page's language, and each described
  * the same way.
@@ -100,7 +103,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart list-loading - The text shown while the options load.
  * @csspart list-search - The region that holds the filter field.
  * @csspart list-search-field - The filter field.
- * @csspart option - One time in the list. It carries `data-between` inside a range.
+ * @csspart option - One time in the list. It carries `data-between` inside a range, and inside the run to the time under the pointer while a range waits for its second end.
  * @csspart option-between - A time inside a chosen range, excluding its ends, beside `option`.
  * @csspart option-description - The caption under the time's label, when there is one.
  * @csspart option-item - The row.
@@ -110,7 +113,8 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @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.
+ * @cssstate invalid - While `invalid` is set, `feedback` says what is wrong, or the list carries `aria-invalid`.
+ * @cssstate range-pending - While a `range` holds its first time and waits for the second.
  */
 export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
     /**
@@ -318,7 +322,18 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * sequence.
      */
     private readonly handleChange;
-    /** Whether a time falls inside a range, which is what gets banded. */
+    /**
+     * The time under the pointer while a range holds one end, which the list
+     * bands the range to before it is chosen, as Date Picker does.
+     */
+    private previewed;
+    private readonly handleListHover;
+    private readonly handleListLeave;
+    /**
+     * Whether a time falls inside a range, which is what gets banded: the
+     * chosen range, or while one end waits, the run to the time under the
+     * pointer.
+     */
     private between;
     /** The readings the wheels show, from the value or from `min`. */
     private get parts();
@@ -463,6 +478,13 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * browser points its bubble at.
      */
     private reportRequired;
+    /**
+     * What is wrong with the answer, as validity flags and a message, or nothing.
+     * `reportRequired` hands it to the form, and `failure` to the mark.
+     */
+    private get problem();
+    /** A missing time waits for the reader; a refused one is marked at once. */
+    protected get failure(): PickerFailure | undefined;
     /**
      * Reports the times to the form, one entry each.
      *

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

@@ -53,6 +53,19 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             const added = next.find((one) => !before.has(one));
             this.requestValue(added ?? '');
         };
+        this.previewed = '';
+        this.handleListHover = (event) => {
+            const option = event
+                .composedPath()
+                .find((one) => one instanceof HTMLElement && one.hasAttribute('value'));
+            const at = option?.getAttribute('value') ?? '';
+            if (this.mode === 'range' && this.held.length === 1 && at !== this.previewed) {
+                this.previewed = at;
+            }
+        };
+        this.handleListLeave = () => {
+            this.previewed = '';
+        };
         this.moveColumn = (part, to) => {
             if (this.isDisabled) {
                 return;
@@ -146,8 +159,11 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         if (this.mode !== 'range') {
             return false;
         }
-        const [from, to] = this.held;
-        return from !== undefined && to !== undefined && at > from && at < to;
+        const [from, to = this.previewed] = this.held;
+        if (from === undefined || to === '' || this.held.length > 2) {
+            return false;
+        }
+        return at > (from < to ? from : to) && at < (from < to ? to : from);
     }
     get parts() {
         const at = valueAsSeconds(this.value) ?? valueAsSeconds(this.min) ?? 0;
@@ -218,27 +234,41 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         }
     }
     reportRequired() {
-        const anchor = this.partNamed('list') ?? undefined;
-        if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, anchor);
+        const problem = this.problem;
+        if (problem) {
+            this.internals.setValidity(problem[0], problem[1], this.partNamed('list') ?? undefined);
             return;
         }
+        this.internals.setValidity({});
+    }
+    get problem() {
+        if (this.required && this.value === '') {
+            return [{ valueMissing: true }, this.valueMissingMessage];
+        }
         const held = this.held;
         if (held.length > 0 && held.some((one) => valueAsSeconds(one) === null)) {
-            this.internals.setValidity({ badInput: true }, formatWords(this, 'badInputMessage', {
-                mode: this.mode ?? 'single',
-                shape: this.seconds ? 'HH:mm:ss' : 'HH:mm',
-            }), anchor);
-            return;
+            return [
+                { badInput: true },
+                formatWords(this, 'badInputMessage', {
+                    mode: this.mode ?? 'single',
+                    shape: this.seconds ? 'HH:mm:ss' : 'HH:mm',
+                }),
+            ];
         }
         for (const one of held) {
             const fault = this.fault(one);
             if (fault) {
-                this.internals.setValidity({ [fault[0]]: true }, fault[1], anchor);
-                return;
+                return [{ [fault[0]]: true }, fault[1]];
             }
         }
-        this.internals.setValidity({});
+        return undefined;
+    }
+    get failure() {
+        const problem = this.problem;
+        if (!problem) {
+            return undefined;
+        }
+        return problem[0].valueMissing ? 'missing' : 'refused';
     }
     report() {
         if (this.isDisabled) {
@@ -290,7 +320,11 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     willUpdate(changed) {
         super.willUpdate(changed);
         this.report();
+        if (changed.has('value')) {
+            this.previewed = '';
+        }
         this.toggleState('blank', this.value === '');
+        this.toggleState('range-pending', this.mode === 'range' && this.held.length === 1);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -386,6 +420,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       .value=${this.value}
       @helix-before-change=${this.handleChange}
       @input=${this.handleListInput}
+      @pointerleave=${this.handleListLeave}
+      @pointerover=${this.handleListHover}
     >
       ${this.times.map((seconds) => {
             const at = this.valueFor(seconds);
@@ -481,6 +517,9 @@ __decorate([
     words,
     property({ attribute: 'range-underflow-message' })
 ], HelixHeadlessTimePicker.prototype, "rangeUnderflowMessage", void 0);
+__decorate([
+    state()
+], HelixHeadlessTimePicker.prototype, "previewed", void 0);
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "readOnly", void 0);

package/dist/toggle/group/toggle-group.d.ts

@@ -37,7 +37,7 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * | Right, Down | Moves to the next item, from the last back to the first. In a single group, chooses it. |
  * | Left, Up | Moves to the item before, from the first round to the last. In a single group, chooses it. |
  * | Home, End | Moves to the first or the last item. In a single group, chooses it. |
- * | Space, Enter | Chooses the focused item, or presses or releases it in a multiple group. |
+ * | Space, Enter | Chooses the focused item, or presses or releases it in a multiple group. With `allow-empty-selection`, takes back the chosen item. |
  *
  * Left and Right swap on a right-to-left page, and a disabled item is passed
  * over. A single group is a `radiogroup` of items with `role="radio"` and
@@ -117,6 +117,15 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      * `MixinCollection` records for the same reason.
      */
     private adopt;
+    /**
+     * The items whose `selected` this group has written, which `adopt` passes
+     * over: the mark is this group's answer, and the markup declared nothing.
+     *
+     * Measured before this: in a group with no default, choosing List and then
+     * resetting the form left List chosen and submitted, because `adopt` read
+     * the mark `sync` had put on it as a declaration and made it the default.
+     */
+    private readonly marked;
     /** Marks the chosen item, separately from placing the indicator. */
     private sync;
     /**
@@ -139,6 +148,14 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     private get chosenItem();
     /** Whether several items can be pressed at once. */
     private get multiple();
+    /**
+     * Whether a press on the chosen item, or Space or Enter on it, takes it
+     * back so nothing is chosen, as React Aria's `ToggleButtonGroup` and
+     * Radix's `ToggleGroup` do in a single group. Absent, a single group always
+     * keeps its choice once it has one, as a radio group does. A multiple group
+     * releases a pressed item either way.
+     */
+    allowEmptySelection: boolean;
     /**
      * Whether the group holds a tab stop of its own.
      *

package/dist/toggle/group/toggle-group.js

@@ -11,6 +11,7 @@ import { HelixHeadlessToggle } from '../root/toggle-root.js';
 let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
+        this.marked = new WeakSet();
         this.lastFocused = undefined;
         this.noteFocus = (event) => {
             const item = event.target;
@@ -19,6 +20,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
                 this.sync();
             }
         };
+        this.allowEmptySelection = false;
         this.focusable = true;
         this.indicator = new IndicatorController(this, {
             active: () => this.chosenItem,
@@ -40,7 +42,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
                 }
                 const value = event.detail.value;
                 if (!this.multiple) {
-                    this.requestValue(value);
+                    this.requestValue(this.allowEmptySelection && value === this.value ? '' : value);
                     return;
                 }
                 const next = toggleValue(this.values, value, this.items.map((item) => item.value));
@@ -63,7 +65,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         if (this.value !== '' || this.children === undefined) {
             return;
         }
-        const declared = this.items.find((item) => item.selected);
+        const declared = this.items.find((item) => item.defaultSelected || (item.selected && !this.marked.has(item)));
         if (declared) {
             this.defaultValue = declared.value;
         }
@@ -73,6 +75,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         const pressed = new Set(this.values);
         const entry = this.focusable ? this.entry() : undefined;
         for (const item of this.items) {
+            this.marked.add(item);
             item.selected = item === active;
             item.pressed = this.multiple ? pressed.has(item.value) : undefined;
             item.focusable = item === entry;
@@ -192,6 +195,9 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         return html `${inside ? nothing : label}<div part="row"><slot name="start"></slot><div part="track">${inside ? label : nothing}<div part="indicator" aria-hidden="true"></div><slot @slotchange=${this.handleItems}></slot></div><slot name="end"></slot></div>${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: 'allow-empty-selection', type: Boolean })
+], HelixHeadlessToggleGroup.prototype, "allowEmptySelection", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessToggleGroup.prototype, "focusable", void 0);

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

@@ -31,9 +31,9 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
  * @event {Event} change - Fired after a toggle button on its own is pressed or released.
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.
  *
- * @csspart item - The radio button.
+ * @csspart item - The button: a radio in a group where one is chosen, and a button with `aria-pressed` on its own or in a group where several can be.
  *
- * @cssstate pressed - The item is pressed, in a group where several can be.
+ * @cssstate pressed - The item is pressed, on its own or in a group where several can be.
  * @cssstate selected - The item is chosen.
  */
 export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {

package/dist/toggle/root/toggle-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 { customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
+import { auditName, customElement, HelixElement, HostClickController, MixinSelectableItem, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(HelixElement) {
@@ -39,6 +39,7 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
+        auditName(this, () => this.partNamed('item'), 'Give it words in its default slot, an `aria-label`, or a label on the icon it holds.');
     }
     render() {
         const alone = this.alone;