@fusion.dev/helix-headless 0.159.0 → 0.160.0

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

@@ -1,4 +1,4 @@
-import { type DateCalendar, HelixElement } from '@fusion.dev/helix-core';
+import { type DateCalendar, HelixElement, type MonthCalendar } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A timestamp, formatted for the user's locale.
@@ -45,8 +45,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * **A date is written in a calendar Date Picker draws**: the locale's own
  * where its months are the Gregorian months, as `th-TH` writes 2569 for 2026,
- * and `gregory` where they are not, as for `fa-IR`. `calendar` picks one of
- * the five.
+ * and `gregory` where they are not, as for `fa-IR`. `calendar` picks any of
+ * them, `persian` and `hebrew` included.
  *
  * @since 0.1.0
  * @status stable
@@ -57,6 +57,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @csspart day - The day of the month, with `fields`.
  * @csspart day-period - AM or PM, or the locale's word for the part of the day, with `fields`.
  * @csspart era - The era, such as AD, with `fields` and `era`.
+ * @csspart fractional-second - The fraction of a second, with `fields` and `fractional-second-digits`.
  * @csspart hour - The hour, with `fields`.
  * @csspart minute - The minute, with `fields`.
  * @csspart month - The month, with `fields`.
@@ -72,14 +73,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 export declare class HelixHeadlessFormatDate extends HelixElement {
     /**
      * The calendar a date is written in: `gregory`, `buddhist`, `japanese`,
-     * `roc`, or `iso8601`, the calendars Date Picker and Date Input draw.
+     * `roc`, or `iso8601`, or a calendar with months of its own, such as
+     * `persian`, `hebrew`, `islamic-umalqura`, `ethiopic`, or `chinese`: every
+     * calendar Date Picker and Date Input draw.
      *
-     * Absent is the locale's own where it is one of the five, such as
-     * `buddhist` for `th-TH`, and `gregory` for every other, such as `persian`
-     * for `fa-IR`, so a date written here reads as the same date a Date Picker
-     * beside it shows.
+     * Absent is the locale's own where its months are the Gregorian months,
+     * such as `buddhist` for `th-TH`, and `gregory` for every other, such as
+     * `persian` for `fa-IR`, so a date written here reads as the same date a
+     * Date Picker beside it shows. Write `calendar="persian"` for Mehr 14, 1405.
      */
-    calendar?: DateCalendar;
+    calendar?: DateCalendar | MonthCalendar;
     /**
      * The timestamp, in any format `Date` can parse.
      *
@@ -107,6 +110,12 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * How the day of the month is written, where a date is shown.
      */
     day?: 'numeric' | '2-digit';
+    /**
+     * Writes the part of the day in words, such as "in the morning" or "at
+     * night", in its `long`, `short`, or `narrow` form, where `hour` is on a
+     * twelve-hour clock.
+     */
+    dayPeriod?: 'long' | 'narrow' | 'short';
     /**
      * Shows how long ago the timestamp was, in a compact form such as "3h", in
      * place of the date.
@@ -130,6 +139,11 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * way.
      */
     fields?: boolean;
+    /**
+     * How many digits of a fraction of a second to write after `second`: 1, 2,
+     * or 3, as in 09:41:07.250.
+     */
+    fractionalSecondDigits?: 1 | 2 | 3;
     /**
      * Draws an `elapsed` or `relative` reading once and leaves it, where it
      * would otherwise move on as it goes stale.
@@ -206,9 +220,11 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      */
     timeZone?: string;
     /**
-     * Shows the name of the time zone, in its `long` or `short` form.
+     * Shows the name of the time zone: `long` or `short`, as Pacific Daylight
+     * Time or PDT, `longOffset` or `shortOffset`, as GMT-07:00 or GMT-7, or
+     * `longGeneric` or `shortGeneric`, as Pacific Time or PT.
      */
-    timeZoneName?: 'long' | 'short';
+    timeZoneName?: 'long' | 'longGeneric' | 'longOffset' | 'short' | 'shortGeneric' | 'shortOffset';
     /**
      * How the weekday is written, where one is shown.
      */

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

@@ -132,6 +132,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "day", void 0);
+__decorate([
+    property({ attribute: 'day-period' })
+], HelixHeadlessFormatDate.prototype, "dayPeriod", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "elapsed", void 0);
@@ -141,6 +144,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "fields", void 0);
+__decorate([
+    property({ attribute: 'fractional-second-digits', type: Number })
+], HelixHeadlessFormatDate.prototype, "fractionalSecondDigits", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "frozen", void 0);

package/dist/listbox/root/listbox-root.js

@@ -98,6 +98,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
                 }
                 else if (event.key === ' ') {
                     event.preventDefault();
+                    const at = this.currentValue || shown.find((option) => !option.disabled)?.value;
+                    if (at) {
+                        this.activeValue = at;
+                        this.choose(at);
+                    }
                 }
                 return;
             }

package/dist/notifications/notification/notification.d.ts

@@ -56,6 +56,7 @@ declare const HelixHeadlessNotification_base: (new (...args: any[]) => import("@
  * @csspart time-day - Format Date's `day`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-day-period - Format Date's `day-period`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-era - Format Date's `era`, forwarded for a time drawn as fields. An elapsed time draws none.
+ * @csspart time-fractional-second - Format Date's `fractional-second`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-hour - Format Date's `hour`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-minute - Format Date's `minute`, forwarded for a time drawn as fields. An elapsed time draws none.
  * @csspart time-month - Format Date's `month`, forwarded for a time drawn as fields. An elapsed time draws none.

package/dist/notifications/notification/notification.js

@@ -104,7 +104,8 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
     renderTime() {
         const stamp = this.tag('format-date');
         return html `<${stamp}
-      exportparts="time, day: time-day, day-period: time-day-period, era: time-era, hour: time-hour,
+      exportparts="time, day: time-day, day-period: time-day-period, era: time-era,
+        fractional-second: time-fractional-second, hour: time-hour,
         minute: time-minute, month: time-month, second: time-second,
         time-zone-name: time-time-zone-name, weekday: time-weekday, year: time-year"
       elapsed

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

@@ -28,6 +28,10 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * `min-steps-between-thumbs` keeps them that many steps apart, and the readout
  * joins the two as `range-text` writes them.
  *
+ * A press on a range's track takes the nearest thumb to the point pressed,
+ * and moving the pointer drags it, as React Aria's and Web Awesome's sliders
+ * do. The thumb takes focus, and `change` is sent as the press ends.
+ *
  * `origin` sets where a single thumb's fill starts: at `min`, at the middle of
  * the track, or at `max`. A balance or an offset from zero fills from the
  * middle, as Zag's slider `origin` does. The fill's ends are published as
@@ -52,7 +56,7 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * |---|---|
  * | Right, Up | Moves the thumb up by `step`. |
  * | Left, Down | Moves the thumb down by `step`. |
- * | Page Up, Page Down | Moves the thumb by a larger step. |
+ * | Page Up, Page Down | Moves the thumb by `page-step`, or by the platform's larger step where it is not set. |
  * | Home, End | Moves the thumb to its lowest or highest value. |
  *
  * Under `readonly` none of these move the thumb, and Tab still reaches it.
@@ -97,6 +101,8 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @cssproperty --slider-marker-at - Where one marker sits, as a percentage of the track.
  * @cssproperty --slider-to - Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`.
  *
+ * @cssstate dragging - A thumb is being dragged, by its thumb or from a press on the track.
+ * @cssstate focus-visible - A thumb has focus that the keyboard brought, where the browser draws a focus ring.
  * @cssstate invalid - The slider has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
@@ -193,6 +199,12 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * between its thumbs and ignores it.
      */
     origin?: 'center' | 'end' | 'start';
+    /**
+     * How far Page Up and Page Down move a thumb, in the slider's own units, as
+     * React Aria's `pageSize` and Zag's `largeStep` do. Absent leaves the keys
+     * to the platform, which moves a tenth of the track.
+     */
+    pageStep?: number;
     /**
      * Adds a second thumb, so the value is a pair.
      *
@@ -298,13 +310,52 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     /** Where one value sits along the track, as a fraction of it. */
     private along;
     private readonly handleInput;
+    /** Whether a pointer is dragging a thumb, which `:state(dragging)` says. */
+    private dragging;
+    /** Ends a drag when its pointer lifts, wherever it lifts. */
+    private readonly endDrag;
+    private startDrag;
+    /**
+     * Half a thumb, which is where the thumb's center stops short of each end
+     * of its input. Measured off the thumb's length as the stylesheet sets it,
+     * or a platform thumb's 16 pixels where none does.
+     */
+    private thumbInset;
+    /**
+     * The value under a pointer, along a thumb's input, less `inset` at each
+     * end. Upward on a vertical track, and from the right on a right-to-left
+     * page.
+     */
+    private valueAt;
+    /** Moves one of a range's thumbs, kept between its neighbors, and says whether it moved. */
+    private moveThumb;
+    /**
+     * A press on the field: on a thumb, the start of the platform's own drag,
+     * and on a range's track, the nearest thumb taken to the point and dragged
+     * from there.
+     *
+     * **A range's inputs take presses on their thumbs only**, being stacked on
+     * one track, so a press beside a thumb reached no input at all and did
+     * nothing. Measured before this: a press at 90 on a range holding 20 and 60
+     * left it at 20 and 60. React Aria's and Web Awesome's sliders move the
+     * nearest thumb there.
+     */
+    private readonly handlePress;
+    disconnectedCallback(): void;
     /** Relayed, because `change` does not cross a shadow boundary on its own. */
     private readonly handleChange;
     /**
-     * Keeps a read-only thumb still under the keys that move it. Tab and every
-     * other key pass, so focus moves on.
+     * Keeps a read-only thumb still under the keys that move it, and moves a
+     * thumb by `page-step` under Page Up and Page Down. Tab and every other key
+     * pass, so focus moves on.
      */
     private readonly handleKeydown;
+    /**
+     * Says whether the keyboard brought focus to a thumb, as
+     * `:state(focus-visible)` on the host, where a stylesheet outside can reach
+     * the whole control: a ring around the track, or the readout in bold.
+     */
+    private readonly handleFocusChange;
     /**
      * Reports the value: one entry, or for a named range one entry per thumb.
      * The joined pair is the state the browser restores.

package/dist/slider/root/slider-root.js

@@ -4,9 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, MixinControllerValue, MixinField, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, isRtl, MixinControllerValue, MixinField, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 const SLIDER_KEYS = new Set([
     'ArrowDown',
     'ArrowLeft',
@@ -63,6 +63,54 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             this.requestValue(next);
             restoreValue(control, this.value);
         };
+        this.dragging = false;
+        this.endDrag = () => {
+            this.dragging = false;
+            window.removeEventListener('pointerup', this.endDrag);
+            window.removeEventListener('pointercancel', this.endDrag);
+        };
+        this.handlePress = (event) => {
+            if (this.isDisabled || this.readOnly || event.button !== 0) {
+                return;
+            }
+            const inputs = [...this.renderRoot.querySelectorAll('input[part="control"]')];
+            if (inputs.includes(event.composedPath()[0])) {
+                this.startDrag();
+                return;
+            }
+            const first = inputs[0];
+            const field = event.currentTarget;
+            if (!this.range || !first) {
+                return;
+            }
+            const inset = this.thumbInset(field);
+            const wanted = this.valueAt(event, first, inset);
+            let at = 0;
+            this.points.forEach((one, index) => {
+                const distance = Math.abs(one - wanted);
+                const best = Math.abs((this.points[at] ?? 0) - wanted);
+                if (distance < best || (distance === best && wanted > one)) {
+                    at = index;
+                }
+            });
+            event.preventDefault();
+            this.moveThumb(at, wanted);
+            inputs[at]?.focus({ focusVisible: false, preventScroll: true });
+            this.startDrag();
+            field.setPointerCapture?.(event.pointerId);
+            const move = (next) => {
+                this.moveThumb(at, this.valueAt(next, first, inset));
+            };
+            const end = () => {
+                field.removeEventListener('pointermove', move);
+                field.removeEventListener('pointerup', end);
+                field.removeEventListener('pointercancel', end);
+                this.announceChange();
+            };
+            field.addEventListener('pointermove', move);
+            field.addEventListener('pointerup', end);
+            field.addEventListener('pointercancel', end);
+        };
         this.handleChange = (event) => {
             event.stopPropagation();
             if (!this.readOnly) {
@@ -72,7 +120,31 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.handleKeydown = (event) => {
             if (this.readOnly && SLIDER_KEYS.has(event.key)) {
                 event.preventDefault();
+                return;
+            }
+            const by = this.pageStep;
+            if ((event.key !== 'PageUp' && event.key !== 'PageDown') || !by || this.isDisabled) {
+                return;
             }
+            event.preventDefault();
+            const sign = event.key === 'PageUp' ? 1 : -1;
+            if (this.range) {
+                const at = Number(event.target.dataset.index ?? 0);
+                if (!this.moveThumb(at, this.settled((this.points[at] ?? this.min) + sign * by))) {
+                    return;
+                }
+            }
+            else {
+                const next = String(this.settled(Number(this.value) + sign * by));
+                if (next === this.value || !this.requestValue(next)) {
+                    return;
+                }
+            }
+            this.announceChange();
+        };
+        this.handleFocusChange = (event) => {
+            const input = event.target;
+            this.toggleState('focus-visible', event.type === 'focusin' && input.matches?.(':focus-visible') === true);
         };
         this.valueText = '';
         this.handleThumbSlot = () => {
@@ -132,6 +204,46 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         }
         return Math.min(1, Math.max(0, (at - this.min) / span));
     }
+    startDrag() {
+        this.dragging = true;
+        window.addEventListener('pointerup', this.endDrag);
+        window.addEventListener('pointercancel', this.endDrag);
+    }
+    thumbInset(field) {
+        const probe = document.createElement('span');
+        probe.style.cssText =
+            'position:absolute;visibility:hidden;inline-size:var(--_slider-thumb-length,16px)';
+        field.append(probe);
+        const length = probe.getBoundingClientRect().width;
+        probe.remove();
+        return length / 2;
+    }
+    valueAt(event, input, inset) {
+        const box = input.getBoundingClientRect();
+        const vertical = this.orientation === 'vertical';
+        const length = vertical ? box.height : box.width;
+        const from = vertical
+            ? box.bottom - event.clientY
+            : isRtl(this)
+                ? box.right - event.clientX
+                : event.clientX - box.left;
+        const fraction = Math.min(1, Math.max(0, (from - inset) / Math.max(1, length - inset * 2)));
+        return this.settled(this.min + fraction * (this.max - this.min));
+    }
+    moveThumb(at, wanted) {
+        const points = this.points;
+        const gap = this.gap;
+        const low = at > 0 ? (points[at - 1] ?? this.min) + gap : Number.NEGATIVE_INFINITY;
+        const high = at < points.length - 1 ? (points[at + 1] ?? this.max) - gap : Number.POSITIVE_INFINITY;
+        const next = points
+            .map((one, index) => (index === at ? Math.min(high, Math.max(low, wanted)) : one))
+            .join(',');
+        return next !== points.join(',') && this.requestValue(next);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.endDrag();
+    }
     sync() {
         if (this.range && this.name) {
             reportValues(this.internals, this.name, this.points.map(String));
@@ -168,6 +280,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('dragging', this.dragging);
         if (!this.hasUpdated && this.value === '') {
             this.defaultValue = this.range
                 ? `${this.min},${this.max}`
@@ -306,6 +419,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             : nothing}
     <div
       part="field"
+      @focusin=${this.handleFocusChange}
+      @focusout=${this.handleFocusChange}
+      @pointerdown=${this.handlePress}
       data-markers=${this.markerValues.length > 0 ? '' : nothing}
       data-range=${this.range ? '' : nothing}
       data-thumbs=${this.thumbContent ? '' : nothing}
@@ -405,6 +521,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSlider.prototype, "origin", void 0);
+__decorate([
+    property({ attribute: 'page-step', type: Number })
+], HelixHeadlessSlider.prototype, "pageStep", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "range", void 0);
@@ -428,6 +547,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessSlider.prototype, "tooltip", void 0);
+__decorate([
+    state()
+], HelixHeadlessSlider.prototype, "dragging", void 0);
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessSlider.prototype, "valueText", void 0);

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