@fusion.dev/helix-headless 0.103.2 → 0.104.0

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

@@ -55,28 +55,6 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssproperty --splitter-position - Where the divider sits, as a percentage of the box.
  */
 export declare class HelixHeadlessSplitter extends HelixElement {
-    /**
-     * How much of a shut pane is still shown, as a percentage.
-     *
-     * Zero by default, which is a pane fully gone. A tab strip or a title bar
-     * that should survive its own collapse says how much of itself to keep, and
-     * only whoever put it there knows that, which is the same reason `min` is a
-     * consumer's to set.
-     */
-    collapsedSize: number;
-    /**
-     * Where the divider sits, as a percentage of the whole.
-     *
-     * Reading gives where it is; writing declares it the consumer's, and
-     * `default-position` seeds one this element owns. The same accessor pair
-     * `Pagination.page` and the calendar's `month` carry.
-     */
-    get position(): number;
-    set position(next: number);
-    /**
-     * Accessible name for the handle where two dividers cross.
-     */
-    cornerLabel: string;
     /**
      * Which pane is shut, if either.
      *
@@ -92,6 +70,28 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      */
     get collapsed(): 'end' | 'start' | undefined;
     set collapsed(next: 'end' | 'start' | undefined);
+    /**
+     * What the divider says while a pane is shut, in place of a number.
+     *
+     * **A shut pane is off the scale the divider reports**, which is `min` to
+     * `max`, the sliver a drag keeps. The divider said a value outside its own
+     * range, 0 against a minimum of 20, which reads as broken rather than as
+     * shut. While shut it reports the whole 0 to 100 it sits on and says this.
+     */
+    collapsedLabel: string;
+    /**
+     * How much of a shut pane is still shown, as a percentage.
+     *
+     * Zero by default, which is a pane fully gone. A tab strip or a title bar
+     * that should survive its own collapse says how much of itself to keep, and
+     * only whoever put it there knows that, which is the same reason `min` is a
+     * consumer's to set.
+     */
+    collapsedSize: number;
+    /**
+     * Accessible name for the handle where two dividers cross.
+     */
+    cornerLabel: string;
     /**
      * Which pane starts shut, where nothing declared it.
      */
@@ -108,19 +108,6 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * Nearest it may come to the end, on the same terms as `min`.
      */
     max: number | string;
-    /**
-     * Either kind of bound as a percentage of the box.
-     *
-     * Measured rather than cached: a length is only meaningful against the size
-     * the splitter is right now, and the drag that asks is already reading layout.
-     * Falls back where there is nothing to measure, which is the server and an
-     * element that is not displayed, so `aria-valuemin` is a number either way.
-     */
-    private toPercent;
-    /** `min` as a percentage, whichever way it was written. */
-    private get minPercent();
-    /** `max` as a percentage, whichever way it was written. */
-    private get maxPercent();
     /**
      * Nearest the divider may come to the start.
      *
@@ -141,6 +128,19 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * passes through.
      */
     min: number | string;
+    /**
+     * Either kind of bound as a percentage of the box.
+     *
+     * Measured rather than cached: a length is only meaningful against the size
+     * the splitter is right now, and the drag that asks is already reading layout.
+     * Falls back where there is nothing to measure, which is the server and an
+     * element that is not displayed, so `aria-valuemin` is a number either way.
+     */
+    private toPercent;
+    /** `min` as a percentage, whichever way it was written. */
+    private get minPercent();
+    /** `max` as a percentage, whichever way it was written. */
+    private get maxPercent();
     /**
      * Which way the panes are laid out.
      *
@@ -168,6 +168,15 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * has an honest answer.
      */
     orientation?: 'auto' | 'horizontal' | 'vertical';
+    /**
+     * Where the divider sits, as a percentage of the whole.
+     *
+     * Reading gives where it is; writing declares it the consumer's, and
+     * `default-position` seeds one this element owns. The same accessor pair
+     * `Pagination.page` and the calendar's `month` carry.
+     */
+    get position(): number;
+    set position(next: number);
     /**
      * How far one arrow press moves it, as a percentage.
      */

package/dist/splitter/root/splitter-root.js

@@ -6,12 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var HelixHeadlessSplitter_1;
 import { capturePointer, closestInstance, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixElement, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 const STACK_BELOW = 512;
 let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitter extends HelixElement {
     constructor() {
         super(...arguments);
+        this.collapsedLabel = 'Collapsed';
         this.collapsedSize = 0;
         this.cornerLabel = 'Resize both';
         this.defaultPosition = 50;
@@ -181,19 +182,6 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             this.leaveSeparator(event);
         };
     }
-    get position() {
-        const shut = this.collapsed;
-        if (shut) {
-            return shut === 'start' ? this.sliver : 100 - this.sliver;
-        }
-        return this.clamp(this.positionState ?? this.defaultPosition);
-    }
-    set position(next) {
-        const previous = this.position;
-        this.positionState = next;
-        this.reached = undefined;
-        this.requestUpdate('position', previous);
-    }
     get collapsed() {
         const held = this.collapsedState;
         if (held === undefined) {
@@ -236,6 +224,19 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     get maxPercent() {
         return this.toPercent(this.max, 100);
     }
+    get position() {
+        const shut = this.collapsed;
+        if (shut) {
+            return shut === 'start' ? this.sliver : 100 - this.sliver;
+        }
+        return this.clamp(this.positionState ?? this.defaultPosition);
+    }
+    set position(next) {
+        const previous = this.position;
+        this.positionState = next;
+        this.reached = undefined;
+        this.requestUpdate('position', previous);
+    }
     get showing() {
         return this.reached === undefined ? this.position : this.clamp(this.reached);
     }
@@ -437,9 +438,10 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         tabindex="0"
         aria-label=${this.label}
         aria-orientation=${this.vertical ? 'horizontal' : 'vertical'}
-        aria-valuemax=${this.clamp(this.maxPercent)}
-        aria-valuemin=${this.clamp(this.minPercent)}
+        aria-valuemax=${this.collapsed ? 100 : this.clamp(this.maxPercent)}
+        aria-valuemin=${this.collapsed ? 0 : this.clamp(this.minPercent)}
         aria-valuenow=${Math.round(position)}
+        aria-valuetext=${this.collapsed ? this.collapsedLabel : nothing}
         ?data-dragging=${this.dragging}
         ?data-flush=${this.flush}
         @dblclick=${this.handleDoubleClick}
@@ -472,18 +474,18 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         ></div>`)}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessSplitter.prototype, "collapsed", null);
+__decorate([
+    property({ attribute: 'collapsed-label' })
+], HelixHeadlessSplitter.prototype, "collapsedLabel", void 0);
 __decorate([
     property({ attribute: 'collapsed-size', type: Number })
 ], HelixHeadlessSplitter.prototype, "collapsedSize", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessSplitter.prototype, "position", null);
 __decorate([
     property({ attribute: 'corner-label' })
 ], HelixHeadlessSplitter.prototype, "cornerLabel", void 0);
-__decorate([
-    property()
-], HelixHeadlessSplitter.prototype, "collapsed", null);
 __decorate([
     property({ attribute: 'default-collapsed' })
 ], HelixHeadlessSplitter.prototype, "defaultCollapsed", void 0);
@@ -502,6 +504,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSplitter.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessSplitter.prototype, "position", null);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSplitter.prototype, "step", void 0);

package/dist/switch/root/switch-root.js

@@ -30,6 +30,7 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
         this.reportRequired(!this.checked, 'Turn this on to continue.', 'control');
     }
     formResetCallback() {
+        super.formResetCallback();
         this.resetChecked();
     }
     updated(changed) {

package/dist/table/column/table-column.d.ts

@@ -131,6 +131,14 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * such a column is never sortable however it is marked.
      */
     field: string;
+    /**
+     * What the grip that moves the column is called, with the heading's words as
+     * `{name}`.
+     *
+     * **Every word a column speaks is a property**, so a table in another
+     * language hears its own rather than English around its own headings.
+     */
+    moveLabel: string;
     /**
      * Whether a reader may change this column's width.
      *
@@ -140,6 +148,11 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * stores the widths can take the decision.
      */
     resizable: boolean;
+    /**
+     * What the separator that resizes the column is called, with the heading's
+     * words as `{name}`.
+     */
+    resizeLabel: string;
     /**
      * Whether a reader may reorder the set by this column.
      *
@@ -212,6 +225,10 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * the overflow either way, that being paint, and gets the honest track list.
      */
     width: string;
+    /**
+     * How the separator reads out the column's width, with `{width}` filled in.
+     */
+    widthLabel: string;
     /**
      * @internal Read by a parent to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than

package/dist/table/column/table-column.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessTableColumn_1;
-import { customElement, HelixBeforeResizeEvent, HelixElement, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixBeforeResizeEvent, HelixElement, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
 import { dotsThreeVertical } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -34,9 +34,12 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         this.cell = undefined;
         this.compare = undefined;
         this.field = '';
+        this.moveLabel = 'Move {name}';
         this.resizable = false;
+        this.resizeLabel = 'Resize {name}';
         this.sortable = false;
         this.width = '';
+        this.widthLabel = '{width} pixels';
         this.isTableColumn = true;
         this.sorted = undefined;
         this.movable = false;
@@ -165,7 +168,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     render() {
         const name = this.name;
         return html `<span part="column">${this.movable
-            ? html `<button part="grip" type="button" aria-label=${name ? `Move ${name}` : 'Move column'}>
+            ? html `<button part="grip" type="button" aria-label=${fillTemplate(this.moveLabel, { name: name || 'column' })}>
             <svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsThreeVertical.viewBox}>
               ${unsafeSVG(dotsThreeVertical.content)}
             </svg>
@@ -177,12 +180,12 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             part="resizer"
             role="separator"
             tabindex="0"
-            aria-label=${name ? `Resize ${name}` : 'Resize column'}
+            aria-label=${fillTemplate(this.resizeLabel, { name: name || 'column' })}
             aria-orientation="vertical"
             aria-valuemin=${HelixHeadlessTableColumn_1.NARROWEST}
             aria-valuemax="4096"
             aria-valuenow=${Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn)}
-            aria-valuetext=${`${this.drawn} pixels`}
+            aria-valuetext=${fillTemplate(this.widthLabel, { width: this.drawn })}
             @keydown=${this.handleResizeKey}
             @pointerdown=${this.handleResizeStart}
             @pointermove=${this.handleResizeMove}
@@ -201,9 +204,15 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "field", void 0);
+__decorate([
+    property({ attribute: 'move-label' })
+], HelixHeadlessTableColumn.prototype, "moveLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "resizable", void 0);
+__decorate([
+    property({ attribute: 'resize-label' })
+], HelixHeadlessTableColumn.prototype, "resizeLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "sortable", void 0);
@@ -213,6 +222,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "width", void 0);
+__decorate([
+    property({ attribute: 'width-label' })
+], HelixHeadlessTableColumn.prototype, "widthLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "sorted", void 0);

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

@@ -31,6 +31,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  *
  * @csspart empty - Shown when there are no rows to show.
  * @csspart head - The row the column headings sit in. `display: contents`, so it takes no space.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the rows are still on their way.
  * @csspart table - The grid.
  *

package/dist/table/root/table-root.js

@@ -136,7 +136,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         }}
       ></slot>
       ${this.renderStatus(this.hasRows)}
-    </div>`;
+    </div>${this.renderLive(this.hasRows)}`;
     }
 };
 __decorate([

package/dist/textarea/root/textarea-root.js

@@ -108,7 +108,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         if (!control) {
             return;
         }
-        this.internals.setValidity(control.validity, control.validationMessage, control);
+        this.copyValidity(control);
         this.refreshFeedback();
     }
     connectedCallback() {

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

@@ -56,6 +56,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-column-hint - Help under the list.
  * @csspart picker-column-items - The list itself.
  * @csspart picker-column-label - The question, over the list.
+ * @csspart picker-column-live - The inner column's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart picker-column-loading - Shown while the options are still on their way.
  * @csspart picker-column-search - The region holding the field that narrows the list.
  * @csspart picker-column-search-field - The field itself.
@@ -68,6 +69,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-list-hint - Help under the list.
  * @csspart picker-list-items - The list itself.
  * @csspart picker-list-label - The question, over the list.
+ * @csspart picker-list-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart picker-list-loading - Shown while the options are still on their way.
  * @csspart picker-list-search - The region holding the field that narrows the list.
  * @csspart picker-list-search-field - The field itself.
@@ -128,6 +130,31 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * What the field says before a time is in it.
      */
     placeholder: string;
+    /**
+     * What a reader is told when a range holds more than two times.
+     *
+     * **Every sentence a control raises in the browser's bubble is a property**,
+     * so a form in another language speaks it. Absent is the control's own
+     * sentence, in English.
+     */
+    rangeLengthMessage?: string;
+    /**
+     * What a reader is told when a time is after `max`, with `{max}` filled in
+     * as the field writes it.
+     */
+    rangeOverflowMessage?: string;
+    /**
+     * What a reader is told when a time is before `min`, with `{min}` filled
+     * in as the field writes it.
+     */
+    rangeUnderflowMessage?: string;
+    /**
+     * What the control removing one time is called, with `{name}` filled in.
+     *
+     * **The name goes in**, so a row of them is heard as which one each
+     * removes rather than as "Remove" said once per time.
+     */
+    removeLabel: string;
     /**
      * How far apart the offered times are, in minutes.
      */
@@ -177,6 +204,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     private get picked();
     private readonly handleInput;
     private readonly handlePicked;
+    /** Each time, where `mode` holds several, sent one entry each. */
+    protected get answers(): readonly string[] | undefined;
     /** What is wrong with the times, which the text input cannot say. */
     protected validate(): string;
     /**

package/dist/time-input/root/time-input-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 { AriaForwardController, valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, isTimeValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, customElement, fillTemplate, timeAsValue as fromTime, HelixFormElement, isTimeValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
 import { clock } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -24,6 +24,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         this.max = '23:59';
         this.min = '00:00';
         this.placeholder = 'HH:mm';
+        this.removeLabel = 'Remove {name}';
         this.step = 15;
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
@@ -106,23 +107,31 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         const held = this.held;
         return held.length > 0 && held.every(isTimeValue) ? held.join(',') : '';
     }
+    get answers() {
+        return this.mode === undefined ? undefined : this.held;
+    }
     validate() {
         const held = this.held;
         const floor = valueAsMinutes(this.min) ?? 0;
         const ceiling = valueAsMinutes(this.max) ?? 1439;
         if (held.length > 0 && !held.every(isTimeValue)) {
-            return this.mode === undefined
-                ? 'Enter a time as HH:mm.'
-                : 'Enter times as HH:mm, separated by commas.';
+            return (this.badInputMessage ||
+                (this.mode === undefined
+                    ? 'Enter a time as HH:mm.'
+                    : 'Enter times as HH:mm, separated by commas.'));
         }
         if (held.some((one) => (valueAsMinutes(one) ?? 0) < floor)) {
-            return `Choose a time at or after ${writeTime(this.min, this.locale)}.`;
+            return fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                min: writeTime(this.min, this.locale),
+            });
         }
         if (held.some((one) => (valueAsMinutes(one) ?? 0) > ceiling)) {
-            return `Choose a time at or before ${writeTime(this.max, this.locale)}.`;
+            return fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                max: writeTime(this.max, this.locale),
+            });
         }
         if (this.mode === 'range' && held.length > 2) {
-            return 'A range is two times.';
+            return this.rangeLengthMessage || 'A range is two times.';
         }
         return '';
     }
@@ -139,12 +148,12 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         column-feedback: picker-column-feedback, column-filter-icon: picker-column-filter-icon,
         column-filter-mark: picker-column-filter-mark, column-hint: picker-column-hint,
         column-items: picker-column-items, column-label: picker-column-label,
-        column-loading: picker-column-loading, column-search: picker-column-search,
+        column-live: picker-column-live, column-loading: picker-column-loading, column-search: picker-column-search,
         column-search-field: picker-column-search-field, columns: picker-columns, list: picker-list,
         list-empty: picker-list-empty, list-feedback: picker-list-feedback,
         list-filter-icon: picker-list-filter-icon, list-filter-mark: picker-list-filter-mark,
         list-hint: picker-list-hint, list-items: picker-list-items, list-label: picker-list-label,
-        list-loading: picker-list-loading, list-search: picker-list-search,
+        list-live: picker-list-live, list-loading: picker-list-loading, list-search: picker-list-search,
         list-search-field: picker-list-search-field, option: picker-option,
         option-between: picker-option-between, option-item-active: picker-option-item-active,
         option-item-selected: picker-option-item-selected,
@@ -169,7 +178,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
                   part="time"
       exportparts="dismiss: time-dismiss, dismiss-mark: time-dismiss-mark, start: time-start"
                   dismissible
-                  dismiss-label=${`Remove ${this.written(at)}`}
+                  dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(at) })}
                   ?disabled=${this.isDisabled}
                   @helix-dismiss=${(event) => {
             event.stopPropagation();
@@ -256,6 +265,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'range-length-message' })
+], HelixHeadlessTimeInput.prototype, "rangeLengthMessage", void 0);
+__decorate([
+    property({ attribute: 'range-overflow-message' })
+], HelixHeadlessTimeInput.prototype, "rangeOverflowMessage", void 0);
+__decorate([
+    property({ attribute: 'range-underflow-message' })
+], HelixHeadlessTimeInput.prototype, "rangeUnderflowMessage", void 0);
+__decorate([
+    property({ attribute: 'remove-label' })
+], HelixHeadlessTimeInput.prototype, "removeLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimeInput.prototype, "step", void 0);

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

@@ -57,6 +57,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart column-hint - Help under the list.
  * @csspart column-items - The list itself.
  * @csspart column-label - The question, over the list.
+ * @csspart column-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart column-loading - Shown while the options are still on their way.
  * @csspart column-search - The region holding the field that narrows the list.
  * @csspart column-search-field - The field itself.
@@ -69,6 +70,7 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart list-hint - Help under the list.
  * @csspart list-items - The list itself.
  * @csspart list-label - The question, over the list.
+ * @csspart list-live - The inner list's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart list-loading - Shown while the options are still on their way.
  * @csspart list-search - The region holding the field that narrows the list.
  * @csspart list-search-field - The field itself.
@@ -82,6 +84,14 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart option-text - The words and the caption, as one column.
  */
 export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_base {
+    /**
+     * What a reader is told when the value holds something that is not a time.
+     *
+     * **Every sentence a control raises in the browser's bubble is a property**,
+     * named for the validity flag it reports, so a form in another language
+     * speaks it. Absent is the control's own sentence, in English.
+     */
+    badInputMessage?: string;
     /**
      * Times that cannot be chosen, comma separated, as `HH:mm`.
      *
@@ -261,6 +271,10 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     step: number;
     /** Refuses every change while read-only. See `readOnly`. */
     requestValue(next: string): boolean;
+    /**
+     * What a reader is told when a time is required and none is chosen.
+     */
+    valueMissingMessage?: string;
     /**
      * Whether the times are one list or a column each.
      *

package/dist/time-picker/root/time-picker-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 { valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
+import { valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, reportValues, valueAsMinutes, writeTime, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -151,29 +151,25 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     reportRequired() {
         const anchor = this.partNamed('list') ?? undefined;
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, 'Choose a time.', anchor);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a time.', anchor);
             return;
         }
         const held = this.held;
         if (held.length > 0 && held.some((one) => asTime(one) === null)) {
-            this.internals.setValidity({ badInput: true }, this.mode === undefined
-                ? 'Enter a time as HH:mm.'
-                : 'Enter times as HH:mm, separated by commas.', anchor);
+            this.internals.setValidity({ badInput: true }, this.badInputMessage ||
+                (this.mode === undefined
+                    ? 'Enter a time as HH:mm.'
+                    : 'Enter times as HH:mm, separated by commas.'), anchor);
             return;
         }
         this.internals.setValidity({});
     }
     report() {
-        const times = this.held;
-        if (this.name === '' || this.disabled || times.length === 0) {
+        if (this.disabled) {
             this.internals.setFormValue(null);
             return;
         }
-        const data = new FormData();
-        for (const time of times) {
-            data.append(this.name, time);
-        }
-        this.internals.setFormValue(data);
+        reportValues(this.internals, this.name, this.held);
     }
     async revealWhenSettled() {
         const settling = [
@@ -208,7 +204,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       data-column=${part}
       exportparts="empty: column-empty, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
-        loading: column-loading, search: column-search, search-field: column-search-field"
+        live: column-live, loading: column-loading, search: column-search, search-field: column-search-field"
       aria-label=${label}
       ?disabled=${this.isDisabled}
       .value=${value}
@@ -250,7 +246,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       part="list"
       exportparts="empty: list-empty, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
-        loading: list-loading, search: list-search, search-field: list-search-field"
+        live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"
       aria-label=${this.label}
       data-unset=${this.value === '' ? '' : nothing}
       ?disabled=${this.isDisabled}
@@ -295,6 +291,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         this.value = Number.isNaN(ms) ? '' : fromTime(new Date(ms));
     }
 };
+__decorate([
+    property({ attribute: 'bad-input-message' })
+], HelixHeadlessTimePicker.prototype, "badInputMessage", void 0);
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
@@ -325,6 +324,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimePicker.prototype, "step", void 0);
+__decorate([
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessTimePicker.prototype, "valueMissingMessage", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimePicker.prototype, "variant", void 0);