@fusion.dev/helix-headless 0.159.0 → 0.161.0

package/dist/table/row/table-row.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, followLink, HelixElement, hostAria, pressedOwnControl, } from '@fusion.dev/helix-core';
-import { dotsSixVertical } from '@fusion.dev/helix-icons';
+import { caretRight, dotsSixVertical } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -17,6 +17,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.isTableRow = true;
         this.disabled = false;
         this.href = '';
+        this.parent = '';
         this.rel = '';
         this.target = '';
         this.value = '';
@@ -29,6 +30,12 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.move = undefined;
         this.gridCell = false;
         this.selectStop = false;
+        this.level = 0;
+        this.branch = false;
+        this.open = false;
+        this.expandLabel = '';
+        this.expandStop = false;
+        this.expandWith = undefined;
         this.columnRules = undefined;
         this.handleClick = (event) => {
             if (this.disabled || this.href === '' || event.button !== 0 || event.defaultPrevented) {
@@ -70,6 +77,10 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         hostAria(this.internals, { role: 'row' });
         this.internals.ariaSelected = this.gridCell && this.selectable ? String(this.selected) : null;
         this.internals.ariaDisabled = this.disabled ? 'true' : null;
+        const tree = this.gridCell && this.level > 0;
+        this.internals.ariaLevel = tree ? String(this.level) : null;
+        this.internals.ariaExpanded = tree && this.branch ? String(this.open) : null;
+        this.toggleState('expanded', this.branch && this.open);
         this.toggleState('selected', this.selectable && this.selected);
         this.toggleState('link', this.href !== '' && !this.disabled);
         this.toggleState('dragging', this.move === 'dragging');
@@ -125,8 +136,30 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
       ><svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsSixVertical.viewBox}>${unsafeSVG(dotsSixVertical.content)}</svg></button
     ></span>`;
     }
+    renderExpand() {
+        if (this.level === 0) {
+            return nothing;
+        }
+        const grid = this.gridCell;
+        return html `<span
+      part="expand"
+      role=${grid ? 'gridcell' : 'cell'}
+      style="--table-row-level: ${this.level}"
+      tabindex=${grid ? (this.expandStop ? '0' : '-1') : nothing}
+      >${this.branch
+            ? html `<button
+              part="expand-button"
+              type="button"
+              tabindex=${grid ? '-1' : nothing}
+              aria-label=${this.expandLabel}
+              aria-expanded=${this.open ? 'true' : 'false'}
+              @click=${() => this.expandWith?.()}
+            ><svg aria-hidden="true" data-mirror fill="currentColor" part="expand-mark" viewBox=${caretRight.viewBox}>${unsafeSVG(caretRight.content)}</svg></button>`
+            : nothing}</span
+    >`;
+    }
     render() {
-        return html `${this.renderGrip()}${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
+        return html `${this.renderGrip()}${this.renderSelect()}${this.renderExpand()}<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
 __decorate([
@@ -135,6 +168,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTableRow.prototype, "href", void 0);
+__decorate([
+    property()
+], HelixHeadlessTableRow.prototype, "parent", void 0);
 __decorate([
     property()
 ], HelixHeadlessTableRow.prototype, "rel", void 0);
@@ -171,6 +207,24 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableRow.prototype, "selectStop", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "level", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "branch", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "open", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "expandLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "expandStop", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "expandWith", void 0);
 HelixHeadlessTableRow = __decorate([
     customElement('helix-headless-table-row')
 ], HelixHeadlessTableRow);

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

@@ -19,20 +19,25 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * `seconds`, because that is what the form
  * submits, what `min` and `max` compare against, and what sorts correctly as a
  * string. While idle, the field shows the time in the user's locale format.
- * Once the caret is in the field, it shows the value itself, because a
- * formatted time such as `2:30 PM` cannot be typed back and `Intl` has no
- * parser for it.
+ * Once the caret is in the field, it shows the value itself. You can type
+ * `14:30`, or a time as you write one, such as `2:30 PM`, `2.30pm`, or
+ * `14h30`, and the field reads it as you leave it, with AM and PM in the
+ * locale's words.
  *
  * Typing sends `input` on each keystroke and `change` when you leave the
  * field. The trigger and ArrowDown open the list, and so does a press into the
- * field; Tab into the field opens nothing. In the list, the arrow keys, typed digits and PageUp and PageDown
+ * field; Tab into the field opens nothing. The text field is a `combobox`
+ * with `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls`, since
+ * Down opens the list from it. In the list, the arrow keys, typed digits and PageUp and PageDown
  * move through the times, and Enter, Space or a click chooses one and closes
  * the panel. With `variant="wheels"` each wheel moves the time as you turn it,
  * the panel stays open, and Enter or Escape closes it.
  *
  * With `segmented`, the field is a row of segments in place of the text: an
  * hour, a minute, and AM or PM where the clock has them, each set with digits
- * or the arrow keys. Alt+Down opens the list from a segment.
+ * or the arrow keys. Alt+Down opens the list from a segment. A `range` is two
+ * rows with a dash between them, the start and the end, and `multiple` keeps
+ * the text.
  *
  * Text that is not a time gives the form an empty value, as a native time
  * field does, and `value` keeps the text so it can be corrected.
@@ -62,6 +67,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @aliases TimeField, InputTime
  * @documentation https://fusion.dev/helix/components/time-input
  *
+ * @slot clear-icon - Replaces the cross on the clear button, under `clearable`.
  * @slot end - Content after the time, before the trigger, such as a clear button.
  * @slot feedback - The message that says what is wrong with the value.
  * @slot hint - Help under the field.
@@ -75,9 +81,11 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the time changes. Cancelable: canceling it stops the change and leaves the decision to you.
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.
+ * @event {HelixClearEvent} helix-clear - Fired after the clear button has emptied the field, after `input` and `change`.
  * @event {Event} input - Fired after the value changes.
  * @event {ToggleEvent} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
  *
+ * @csspart clear - The button that empties the field, under `clearable`, while it holds a time.
  * @csspart control - The text input.
  * @csspart feedback - The message that says what is wrong with the value.
  * @csspart field - The box that holds the text and the trigger.
@@ -123,6 +131,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-option-item-selected - The row of a chosen time: the one time, or either end of a range.
  * @csspart picker-option-label - The option's label.
  * @csspart picker-option-text - The label and the caption, as one column.
+ * @csspart range-separator - The dash between a range's two rows of segments, in `segmented`, beside `literal`.
  * @csspart rest - The count of times held beyond the ones shown. A `<button>` with `expandable`, and a `<span>` without it.
  * @csspart segment - One part of the time, an hour, a minute, a second or AM and PM, in `segmented`.
  * @csspart segment-placeholder - A segment with nothing in it yet. Applied with `segment`.
@@ -139,6 +148,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart trigger - The control that opens the list.
  * @csspart trigger-icon - The icon on the button that opens the clock.
  *
+ * @cssstate blank - The field holds no time.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate open - While the clock is open.
  */
@@ -156,6 +166,14 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * lets autofill work at all.
      */
     autocomplete: string;
+    /**
+     * Whether the field shows a button that empties it, as Input's `clearable`
+     * does. Shown only while the field holds something to clear and is neither
+     * disabled nor read-only.
+     */
+    clearable: boolean;
+    /** The accessible name of the clear button, which shows only an icon. */
+    clearLabel: string;
     /** Typed, so a keystroke is announced as `input` alone. See `announcesInput`. */
     protected readonly announcesInput = true;
     /**
@@ -256,13 +274,20 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * The message shown when `disable-times` bars a time.
      */
     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`.
+     */
+    unreadableMessage: string;
     /** Every time in the value, which may hold more than one. */
     private get held();
     /**
-     * Segments hold one time, so `range` and `multiple` keep the line of text,
-     * whose separators and tags are how those modes write several.
+     * A row of segments holds one time, and `range` takes two rows with a dash
+     * between them, as React Aria's range fields do. `multiple` keeps the line
+     * of text, whose tags are how it writes several.
      */
     protected get segmentable(): boolean;
+    protected get segmentGroups(): number;
     protected get segmentedKind(): 'time';
     protected get segmentLocale(): string;
     protected get segmentOptions(): {
@@ -287,6 +312,18 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     private get shownTimes();
     /** How many are held beyond the ones shown. */
     private get restCount();
+    /**
+     * A time as the reader wrote it, as the value writes one: `HH:mm` as it
+     * is, and `2:30 PM`, `2.30pm`, `14h30`, or `1430` read back, with the half
+     * of the day in the locale's words. Empty where it is no time.
+     */
+    private read;
+    /**
+     * The text the reader leaves, read: a time written as a reader writes one
+     * becomes the value as the field commits. Not on each key, where `2:3` is
+     * a time a moment before it is `2:30`.
+     */
+    private readonly handleTextCommit;
     /** Adds what was typed to the set, or takes the last one back out. */
     private readonly handleDraftKey;
     /** Takes one time back out of the set. */
@@ -368,8 +405,19 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * consumer gets an inert unknown element and no mark whatsoever.
      */
     protected renderTrigger(): TemplateResult;
+    /** Whether there is a clear button on screen right now. */
+    private get showsClear();
+    /**
+     * Empties the field, through `requestValue` so a consumer who owns the
+     * value decides, then says `change` and `helix-clear` and puts focus back
+     * in the field, the button having gone.
+     */
+    private readonly handleClear;
+    /** The cross on the clear button, behind a seam a tier can move. */
+    protected renderClearIcon(): TemplateResult;
     /** The line of text the times are typed into, where the field shows no segments. */
     private renderControl;
+    protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**
      * The value as a `Date` on January 1, 1970 UTC, or `null` while there is no

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