@fusion.dev/helix-headless 0.158.0 → 0.160.0

package/dist/steps/root/steps-root.js

@@ -34,14 +34,16 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             wrap: false,
         });
         this.handleSelection = (event) => {
-            if (event.defaultPrevented || !this.steps.includes(event.target)) {
+            if (!this.steps.includes(event.target)) {
                 return;
             }
-            const index = this.steps.indexOf(event.target);
-            if (!this.reachable(index) || !this.valid(index)) {
-                return;
-            }
-            this.requestActive(event.detail.value);
+            queueMicrotask(() => {
+                const index = this.steps.indexOf(event.target);
+                if (event.defaultPrevented || !this.reachable(index) || !this.valid(index)) {
+                    return;
+                }
+                this.requestActive(event.detail.value);
+            });
         };
         this.handleSlotChange = () => {
             this.sync();

package/dist/steps/step/step.d.ts

@@ -27,6 +27,10 @@ import '../../button/index.js';
  * region. The current stage's button carries `aria-current="step"`, and only
  * the button, so the state is said once, on the control.
  *
+ * A stage's `content`, while it holds anything, is a group named by the
+ * stage's name, so a screen reader moving into it hears which stage it
+ * belongs to.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Stage
@@ -105,6 +109,11 @@ export declare class HelixHeadlessStep extends HelixElement {
      * The value the step sends in `helix-select`.
      */
     value: string;
+    /** Whether anything is slotted into `content`, which makes it a named group. */
+    private holding;
+    /** Reads whether the `content` slot holds anything. */
+    private readonly readContent;
+    protected firstUpdated(changed: PropertyValues): void;
     /** Says a stage was finished, from the first time one is. */
     private readonly status;
     /**

package/dist/steps/step/step.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, drawStatus, formatWords, HelixElement, HelixSelectEvent, hostAria, StatusController, slottedWords, words, } from '@fusion.dev/helix-core';
 import { check, circle, record } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
@@ -23,9 +23,18 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         this.locked = false;
         this.optional = false;
         this.value = '';
+        this.holding = false;
+        this.readContent = () => {
+            const slot = this.renderRoot.querySelector('slot[name="content"]');
+            this.holding = (slot?.assignedNodes() ?? []).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? '').trim() !== '');
+        };
         this.status = new StatusController(this);
     }
     static { this.words = 'helix-step'; }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readContent();
+    }
     focus(options) {
         this.partNamed('label')?.focus(options);
     }
@@ -60,6 +69,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     }
     renderLabel() {
         return html `<${this.tag('button')}
+      id="label"
       part="label"
       exportparts="button: label-button, live: label-live, spinner: label-spinner, text: label-text"
       emphasis="ghost"
@@ -79,7 +89,11 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         ${this.renderLabel()}
         <span part="description"><slot name="description"></slot></span>
       </span>
-      <div part="content"><slot name="content"></slot></div>${drawStatus(this.status)}`;
+      <div
+        part="content"
+        role=${this.holding ? 'group' : nothing}
+        aria-labelledby=${this.holding ? 'label' : nothing}
+      ><slot name="content" @slotchange=${this.readContent}></slot></div>${drawStatus(this.status)}`;
     }
 };
 __decorate([
@@ -111,6 +125,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessStep.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessStep.prototype, "holding", void 0);
 HelixHeadlessStep = __decorate([
     customElement('helix-headless-step')
 ], HelixHeadlessStep);

package/dist/tabs/panel/tab-panel.d.ts

@@ -15,15 +15,24 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * the tab list lands on the panel's first link or control where there is one,
  * and on the panel itself where there is none.
  *
+ * **Set `lazy` for a panel that is expensive to draw.** Its content waits in a
+ * `<template>` inside it, and goes into the panel the first time the panel is
+ * shown, so it costs nothing until a reader opens that tab. Once in, it stays.
+ * The panel sends `helix-load` at the same moment, for content your code
+ * renders itself.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases TabPanel
  * @documentation https://fusion.dev/helix/components/tabs
  *
- * @slot - The panel's content.
+ * @slot - The panel's content. Under `lazy`, a `<template>` holding it.
+ *
+ * @event {HelixLoadEvent} helix-load - Fired the first time a `lazy` panel is shown, once its template's content is in.
  *
  * @csspart panel - The panel container, which takes the focus while it holds nothing focusable.
  *
+ * @cssstate loaded - Once a `lazy` panel has been shown and its content is in.
  * @cssstate selected - While its tab is the one selected.
  */
 export declare class HelixHeadlessTabPanel extends HelixElement {
@@ -40,6 +49,18 @@ export declare class HelixHeadlessTabPanel extends HelixElement {
      * the pattern names one anyway.
      */
     label: string;
+    /**
+     * Whether the panel's content waits in a `<template>` until the panel is
+     * first shown.
+     */
+    lazy: boolean;
+    /** Whether a `lazy` panel has put its content in. */
+    private loaded;
+    /**
+     * Puts a `lazy` panel's content in the first time the panel is shown: the
+     * content of each `<template>` it holds, in place of the template.
+     */
+    private load;
     /**
      * Whether this panel is the visible one.
      */

package/dist/tabs/panel/tab-panel.js

@@ -4,13 +4,15 @@ 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, focusableElements, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, focusableElements, HelixElement, HelixLoadEvent, hostAria, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.lazy = false;
+        this.loaded = false;
         this.selected = false;
         this.value = '';
         this.holdsStop = false;
@@ -21,6 +23,19 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
             this.holdsStop = this.selected && focusableElements(this).length > 0;
         };
     }
+    load() {
+        if (!this.lazy || !this.selected || this.loaded) {
+            return;
+        }
+        this.loaded = true;
+        for (const template of [...this.children]) {
+            if (template instanceof HTMLTemplateElement) {
+                template.replaceWith(document.importNode(template.content, true));
+            }
+        }
+        this.toggleState('loaded', true);
+        this.dispatchEvent(new HelixLoadEvent());
+    }
     connectedCallback() {
         super.connectedCallback();
         this.watcher?.observe(this, {
@@ -36,6 +51,9 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
+        if (changed.has('selected') || changed.has('lazy')) {
+            this.load();
+        }
         if (changed.has('selected')) {
             this.readStops();
         }
@@ -58,6 +76,9 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTabPanel.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTabPanel.prototype, "lazy", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTabPanel.prototype, "selected", void 0);

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

@@ -46,9 +46,9 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * | Enter, Space | Selects the tab with focus, or follows its link. |
  * | Tab | Leaves the list for the selected panel. |
  *
- * Removing the selected tab selects the first enabled tab that is left, and
- * `active` says so, with `helix-activate`. Where the removed tab had focus,
- * focus moves to the tab now selected.
+ * Removing the selected tab selects the enabled tab beside it, the next one
+ * or else the one before, and `active` says so, with `helix-activate`. Where
+ * the removed tab had focus, focus moves to the tab now selected.
  *
  * **More tabs than fit.** With `scroll-controls`, a strip that scrolls shows a
  * button at each end it can scroll toward, as Web Awesome's tab group does,
@@ -74,6 +74,8 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @slot - The tabs, as direct children of this element.
  * @slot indicator - A mark of your own, drawn inside the `indicator` part, where `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size` reach it.
  * @slot panels - The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
+ * @slot scroll-end-icon - Replaces the glyph on the button that scrolls the strip toward its end.
+ * @slot scroll-start-icon - Replaces the glyph on the button that scrolls the strip toward its start.
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the active tab changes, so the element already holds the new value.
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the active tab changes, and cancelable. Canceling it is the only way to block a change.
@@ -85,7 +87,9 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  *   and animate yourself.
  * @csspart panels - The panel container.
  * @csspart scroll-end - The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way.
+ * @csspart scroll-end-mark - The glyph on that button, where none is slotted.
  * @csspart scroll-start - The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way.
+ * @csspart scroll-start-mark - The glyph on that button, where none is slotted.
  * @csspart tabs - The tab list.
  */
 export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
@@ -169,6 +173,12 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private scrollStrip;
     /** The values of the tabs the last pairing read, to tell a removed tab from one not yet here. */
     private held;
+    /**
+     * The enabled tab nearest to where a removed one stood: the next ones
+     * nearest first, then the ones before it nearest first. The same order a
+     * dismissed tab hands focus in.
+     */
+    private beside;
     /** Pushes the current value down to whichever tab and panel own it. */
     private sync;
     /** The tab that last had focus, so its removal can hand focus on. */
@@ -205,10 +215,16 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private readonly handleSlotChange;
     protected updated(changed: PropertyValues): void;
     /**
-     * One of the two scroll buttons, pointing the way it scrolls. A caret along
-     * the line is mirrored on a right-to-left page, and one down a column is not.
+     * One of the two scroll buttons, with the glyph pointing the way it scrolls.
      */
     private renderScroll;
+    /**
+     * The glyph on a scroll button, behind a seam: slot fallback, so a consumer
+     * replaces it by slotting, and a method, so a tier above replaces it by
+     * overriding. A caret along the line is mirrored on a right-to-left page, and
+     * one down a column is not.
+     */
+    protected renderScrollIcon(toward: 1 | -1): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/tabs/root/tabs-root.js

@@ -33,10 +33,14 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         this.manual = false;
         this.scrollControls = false;
         this.handleSelection = (event) => {
-            if (event.defaultPrevented || !this.tabs.includes(event.target)) {
+            if (!this.tabs.includes(event.target)) {
                 return;
             }
-            this.requestActive(event.detail.value);
+            queueMicrotask(() => {
+                if (!event.defaultPrevented) {
+                    this.requestActive(event.detail.value);
+                }
+            });
         };
         this.more = { end: false, start: false };
         this.measure = () => {
@@ -89,12 +93,19 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         const behavior = matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
         strip.scrollBy(down ? { behavior, top: by } : { behavior, left: isRtl(this) ? -by : by });
     }
+    beside(gone, tabs) {
+        const at = this.held.indexOf(gone);
+        const by = new Map(tabs.map((tab) => [tab.value, tab]));
+        const order = [...this.held.slice(at + 1), ...this.held.slice(0, at).reverse()];
+        return order.map((value) => by.get(value)).find((tab) => tab !== undefined && !tab.disabled);
+    }
     sync() {
         const tabs = this.tabs;
         const declared = this.active === '' ? tabs.find((tab) => tab.selected) : undefined;
-        const value = (declared ?? this.resolveActive(tabs))?.value ?? '';
         const previous = this.active;
         const gone = this.held.includes(previous) && !tabs.some((tab) => tab.value === previous);
+        const value = (declared ?? (gone ? this.beside(previous, tabs) : undefined) ?? this.resolveActive(tabs))
+            ?.value ?? '';
         this.held = tabs.map((tab) => tab.value);
         if (gone && value !== '') {
             this.active = value;
@@ -192,19 +203,19 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         if (!this.scrollControls) {
             return nothing;
         }
-        const down = this.orientation === 'vertical';
-        const icon = down ? (toward > 0 ? caretDown : caretUp) : toward > 0 ? caretRight : caretLeft;
-        const glyph = html `<svg
-      data-mirror=${down ? nothing : ''}
-      aria-hidden="true"
-      fill="currentColor"
-      viewBox=${icon.viewBox}
-    >${unsafeSVG(icon.content)}</svg>`;
         const shown = toward > 0 ? this.more.end : this.more.start;
         const keepFocus = (event) => event.preventDefault();
         return toward > 0
-            ? html `<button part="scroll-end" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(1)}>${glyph}</button>`
-            : html `<button part="scroll-start" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(-1)}>${glyph}</button>`;
+            ? html `<button part="scroll-end" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(1)}>${this.renderScrollIcon(1)}</button>`
+            : html `<button part="scroll-start" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(-1)}>${this.renderScrollIcon(-1)}</button>`;
+    }
+    renderScrollIcon(toward) {
+        const down = this.orientation === 'vertical';
+        const icon = down ? (toward > 0 ? caretDown : caretUp) : toward > 0 ? caretRight : caretLeft;
+        const mirror = down ? nothing : '';
+        return toward > 0
+            ? html `<slot name="scroll-end-icon"><svg part="scroll-end-mark" data-mirror=${mirror} aria-hidden="true" fill="currentColor" viewBox=${icon.viewBox}>${unsafeSVG(icon.content)}</svg></slot>`
+            : html `<slot name="scroll-start-icon"><svg part="scroll-start-mark" data-mirror=${mirror} aria-hidden="true" fill="currentColor" viewBox=${icon.viewBox}>${unsafeSVG(icon.content)}</svg></slot>`;
     }
     render() {
         return html `<div

package/dist/tabs/tab/tab.d.ts

@@ -16,8 +16,8 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  * can: a press on its `dismiss` mark, or Delete or Backspace while the tab
  * has focus, sends `helix-dismiss`. The tab does not remove itself, because
  * your code owns the set, so remove the tab and its panel in your handler.
- * Focus moves to the tab beside it, and the tab set selects a tab that is
- * left.
+ * Focus moves to the tab beside it, and where the tab was selected, the tab
+ * set selects that same tab.
  * The tab says the key through `aria-keyshortcuts`, and the mark is for the
  * pointer, hidden from screen readers.
  *
@@ -27,11 +27,13 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  * @documentation https://fusion.dev/helix/components/tabs
  *
  * @slot - The tab's label.
+ * @slot dismiss-icon - Replaces the glyph on the mark that closes a `dismissible` tab.
  *
  * @event {HelixDismissEvent} helix-dismiss - A `dismissible` tab was asked to close. The tab does not remove itself, so remove it and its panel in response. Cancelable.
  * @event {HelixSelectEvent} helix-select - Fired when the tab is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
  *
  * @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
+ * @csspart dismiss-mark - The glyph on that mark, where none is slotted.
  * @csspart tab - The tab itself.
  *
  * @cssstate selected - While it is the tab selected.

package/dist/tabs/tab/tab.js

@@ -53,7 +53,9 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSele
             return nothing;
         }
         return html `<span part="dismiss" aria-hidden="true" title=${this.dismissLabel} @click=${this.handleDismissPress}
-      ><svg fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">${unsafeSVG(x.content)}</svg></span
+      ><slot name="dismiss-icon"
+        ><svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">${unsafeSVG(x.content)}</svg></slot
+      ></span
     >`;
     }
     updated(changed) {

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