@fusion.dev/helix-headless 0.142.0 → 0.143.0

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
 /**
@@ -36,8 +36,13 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
 export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     protected readonly keys: KeyboardNavigationController;
     private readonly indicator;
+    /** Carries a host `aria-label` and `aria-labelledby` to the tab list. */
+    protected readonly aria: AriaForwardController;
     /**
      * The tab list's name, read by screen readers.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the tab list too,
+     * and wins over this.
      */
     label: string;
     /**

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
@@ -23,10 +23,14 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             observe: () => this.tabs,
             surface: () => this.partNamed('tabs'),
         });
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('tabs'),
+        });
         this.label = 'Tabs';
         this.manual = false;
         this.handleSelection = (event) => {
-            if (event.defaultPrevented) {
+            if (event.defaultPrevented || !this.tabs.includes(event.target)) {
                 return;
             }
             this.requestActive(event.detail.value);

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
  * @summary A short label that adds metadata to content.
@@ -12,6 +12,13 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * The remove button sends `helix-dismiss`. The tag does not remove itself,
  * because your code owns the list it is in, so remove it in your handler. A
  * listener can cancel `helix-dismiss`, and `dismiss()` then returns `false`.
+ * When the handler removes a tag whose remove button has focus, focus moves to
+ * the next tag's remove button, or to the previous one's after the last tag.
+ *
+ * The remove button is named for its tag, such as "Remove Apple", so a list of
+ * buttons says which tag each one removes. Write `{label}` in `dismiss-label`
+ * to put the tag's words somewhere else, such as `dismiss-label="{label}
+ * entfernen"`.
  *
  * @since 0.1.0
  * @status stable
@@ -31,6 +38,21 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  */
 export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
     dismissLabel: string;
+    /**
+     * The remove button's name: `dismissLabel` with the tag's own words.
+     *
+     * **Named for its tag**, because a set of tags each named "Remove" is a list
+     * of buttons that says nothing about which tag each one takes away. The
+     * words are the tag's slotted text, its category first, and `{label}` in
+     * `dismissLabel` says where they go. Without it they follow the verb, unless
+     * the label already holds them, which is what a page naming each button by
+     * hand wrote.
+     *
+     * Read from the children, so empty on a server and while hydrating, where
+     * the name is the verb alone until the update after.
+     */
+    private get removeName();
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/tag/root/tag-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, MixinDismissible } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinDismissible, slottedWords } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -13,6 +13,20 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
         super(...arguments);
         this.dismissLabel = 'Remove';
     }
+    get removeName() {
+        const words = this.childrenKnown ? slottedWords(this, ['start', '']) : '';
+        if (this.dismissLabel.includes('{label}')) {
+            return this.dismissLabel.replace('{label}', words).trim();
+        }
+        return words === '' || this.dismissLabel.includes(words)
+            ? this.dismissLabel
+            : `${this.dismissLabel} ${words}`;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', () => this.requestUpdate());
+        this.finishHydration();
+    }
     render() {
         return html `<slot name="start" part="start"></slot>
       <slot part="label"></slot>
@@ -20,7 +34,7 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
             ? html `<button
             part="dismiss"
             type="button"
-            aria-label=${this.dismissLabel}
+            aria-label=${this.removeName}
             @click=${() => this.dismiss()}
           >
             <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">

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

@@ -21,6 +21,10 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * @aliases Multiline, TextArea
  * @documentation https://fusion.dev/helix/components/textarea
  *
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
+ *
  * @event {Event} change - Sent from the textarea when the user finishes an edit.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired as the text changes, and cancelable.
  * @event {Event} input - Fired after the value changes.

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

@@ -103,7 +103,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         this.control?.focus(options);
     }
     sync() {
-        this.internals.setFormValue(this.formValue());
+        this.internals.setFormValue(this.formValue(), this.value);
         const control = this.control;
         if (!control) {
             return;

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

@@ -1,6 +1,5 @@
 import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
 declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
@@ -23,6 +22,12 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * formatted time such as `2:30 PM` cannot be typed back and `Intl` has no
  * parser for it.
  *
+ * Typing sends `input` on each keystroke and `change` when you leave the
+ * field. 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -38,7 +43,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @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 {Event} input - Fired after the value changes.
- * @event {Event} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
  *
  * @csspart control - The text input.
  * @csspart feedback - The message that says what is wrong with the value.
@@ -102,6 +107,15 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * lets autofill work at all.
      */
     autocomplete: string;
+    /** Typed, so a keystroke is announced as `input` alone. See `announcesInput`. */
+    protected readonly announcesInput = true;
+    /**
+     * Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
+     *
+     * Handed to the list, which offers them as unavailable, and checked against
+     * a typed time, which is then invalid.
+     */
+    disableTimes: string;
     /**
      * Language tag the times are written in.
      *
@@ -172,6 +186,10 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * The name of the button that opens the list, read by screen readers.
      */
     triggerLabel: string;
+    /**
+     * The message shown when `disable-times` bars a time.
+     */
+    unavailableMessage?: string;
     /** Every time in the value, which may hold more than one. */
     private get held();
     /** One time, written the way `time-style` asks for. */
@@ -204,6 +222,14 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     private get picked();
     private readonly handleInput;
     private readonly handlePicked;
+    /**
+     * Enter on the wheels closes the panel, the time on them being the answer.
+     *
+     * The list closes on the choice Enter makes. A wheel turned by the arrows
+     * already holds its time, so Enter there chooses nothing new, and this is
+     * what says the reader is done.
+     */
+    private readonly handleWheelEnter;
     /** 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. */

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

@@ -4,13 +4,12 @@ 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, fillTemplate, 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, writtenList, } from '@fusion.dev/helix-core';
 import { clock } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
 let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))))) {
@@ -20,6 +19,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
             target: () => this.partNamed('control'),
         });
         this.autocomplete = '';
+        this.announcesInput = true;
+        this.disableTimes = '';
         this.locale = '';
         this.max = '23:59';
         this.min = '00:00';
@@ -37,16 +38,16 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
             if (event.key === 'Enter' && isTimeValue(this.draft)) {
                 event.preventDefault();
                 if (!held.includes(this.draft)) {
-                    this.requestValue([...held, this.draft].sort().join(','));
+                    this.requestPicked([...held, this.draft].sort().join(','));
                 }
                 this.draft = '';
             }
             else if (event.key === 'Backspace' && this.draft === '' && held.length > 0) {
-                this.requestValue(held.slice(0, -1).join(','));
+                this.requestPicked(held.slice(0, -1).join(','));
             }
         };
         this.removeTime = (at) => {
-            this.requestValue(this.held.filter((one) => one !== at).join(','));
+            this.requestPicked(this.held.filter((one) => one !== at).join(','));
         };
         this.handleInput = (event) => {
             event.stopPropagation();
@@ -67,13 +68,24 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         };
         this.handlePicked = (event) => {
             event.stopPropagation();
-            this.requestValue(event.detail.value);
+            if (!this.requestPicked(event.detail.value)) {
+                event.preventDefault();
+                this.restore();
+                return;
+            }
             this.restore();
-            if (this.mode === undefined) {
+            if (this.mode === undefined && this.variant !== 'wheels') {
                 this.requestOpen(false);
                 this.updateComplete.then(() => this.returnFocus());
             }
         };
+        this.handleWheelEnter = (event) => {
+            if (event.key === 'Enter' && this.variant === 'wheels' && this.open) {
+                event.preventDefault();
+                this.requestOpen(false);
+                this.returnFocus();
+            }
+        };
     }
     get held() {
         return this.value
@@ -130,6 +142,10 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
                 max: writeTime(this.max, this.locale),
             });
         }
+        const barred = writtenList(this.disableTimes);
+        if (held.some((one) => barred.includes(one))) {
+            return this.unavailableMessage || 'Choose a time that is available.';
+        }
         if (this.mode === 'range' && held.length > 2) {
             return this.rangeLengthMessage || 'A range is two times.';
         }
@@ -162,6 +178,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
       ?invalid=${this.resolvedFeedback !== ''}
       mode=${this.mode ?? nothing}
       variant=${this.variant ?? nothing}
+      disable-times=${this.disableTimes || nothing}
+      manual
       label=${this.label || 'Time'}
       locale=${this.locale || nothing}
       max=${this.max}
@@ -212,25 +230,37 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
           ?readonly=${this.readOnly}
           ?required=${this.required}
           @blur=${this.handleBlur}
+          @change=${this.handleCommit}
           @focus=${this.handleFocus}
           @input=${this.handleInput}
           @keydown=${this.handleDraftKey}
+          @keypress=${this.handleKeypress}
         />
         <button
           part="trigger"
           type="button"
           aria-controls="surface"
+          aria-disabled=${this.readOnly ? 'true' : nothing}
           aria-expanded=${this.open ? 'true' : 'false'}
-          aria-haspopup="listbox"
+          aria-haspopup="dialog"
           aria-label=${this.triggerLabel}
           ?disabled=${this.isDisabled}
-          @click=${() => this.toggleOpen()}
+          @click=${this.handleTriggerClick}
         >
           ${this.renderTrigger()}
         </button>
       </div>
 
-      <div part="surface" id="surface" popover="manual" ?hidden=${!this.open}>
+      ${''}
+      <div
+        part="surface"
+        id="surface"
+        role="dialog"
+        aria-label=${this.triggerLabel}
+        popover="manual"
+        ?hidden=${!this.open}
+        @keydown=${this.handleWheelEnter}
+      >
         ${this.renderPicker()}
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
@@ -251,6 +281,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: 'disable-times' })
+], HelixHeadlessTimeInput.prototype, "disableTimes", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "locale", void 0);
@@ -287,6 +320,9 @@ __decorate([
 __decorate([
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessTimeInput.prototype, "triggerLabel", void 0);
+__decorate([
+    property({ attribute: 'unavailable-message' })
+], HelixHeadlessTimeInput.prototype, "unavailableMessage", void 0);
 __decorate([
     state()
 ], HelixHeadlessTimeInput.prototype, "draft", void 0);

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

@@ -84,7 +84,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      */
     badInputMessage?: string;
     /**
-     * Times that cannot be chosen, comma separated, as `HH:mm`.
+     * Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
      *
      * The counterpart to Date Picker's `disable-dates`, and it exists for the same
      * shape of problem: `min` and `max` take away a span, and what a booking
@@ -96,6 +96,10 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * reached honestly rather than by handing over an empty range.
      */
     disableTimes: string;
+    /**
+     * What the wheel of hours is called, read by screen readers.
+     */
+    hourLabel: string;
     /**
      * Whether the current selection fails validation.
      *
@@ -108,6 +112,8 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     invalid: boolean;
     /**
      * Accessible name for the list, which has no visible one of its own.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the list instead.
      */
     label: string;
     /**
@@ -116,14 +122,31 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * Absent uses the runtime's own.
      */
     locale: string;
+    /**
+     * Stops the arrow keys in the list from choosing each time they move to.
+     * Enter, Space or a click chooses.
+     *
+     * Time Input sets it, so a reader moves through the list before the panel
+     * closes on a time.
+     */
+    manual: boolean;
     /**
      * Latest time offered, as `HH:mm`.
      */
     max: string;
+    /**
+     * What the wheel of the half of the day is called, read by screen readers.
+     * Its two options are written as the locale writes them, such as AM and PM.
+     */
+    meridiemLabel: string;
     /**
      * Earliest time offered, as `HH:mm`.
      */
     min: string;
+    /**
+     * What the wheel of minutes is called, read by screen readers.
+     */
+    minuteLabel: string;
     /**
      * How many times can be held at once.
      *
@@ -145,23 +168,15 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      */
     mode?: 'multiple' | 'range';
     /**
-     * Blocks changes to the time. The value is still submitted with the form.
-     *
-     * **Enforced by refusing every request in one place**, which is the seam this
-     * component already has: `requestValue` is what every path here comes through,
-     * and gating it once is what stops the next call site from being written
-     * without the check.
-     *
-     * Not `disabled`, which is the confusion worth naming: a disabled control
-     * submits nothing and leaves the tab order, and a read-only one submits its
-     * value and stays reachable, which is what a form showing a value somebody
-     * else set needs.
+     * The validation message for a time after `max`. `{max}` is replaced with
+     * `max`, written in `locale`.
      */
-    readOnly: boolean;
+    rangeOverflowMessage?: string;
     /**
-     * Stops the form from submitting while no time is chosen.
+     * The validation message for a time before `min`. `{min}` is replaced with
+     * `min`, written in `locale`.
      */
-    required: boolean;
+    rangeUnderflowMessage?: string;
     /**
      * Every time on offer, as minutes since midnight.
      *
@@ -184,6 +199,17 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * outside the bounds is absent rather than present and refused.
      */
     private barred;
+    /**
+     * The offered time nearest to one the wheels built, which keeps them inside
+     * `min`, `max` and `step`.
+     *
+     * A wheel sets one part of a time and keeps the others, so moving the hour
+     * from 16:45 to 17 built 17:45 against a `max` of 17:00, and moving the half
+     * of the day built 05:45 against a `min` of 09:00. Measured before this,
+     * both reported valid and were submitted. The nearest earlier time wins a
+     * tie, so a step past `max` lands on `max`'s own row.
+     */
+    private nearest;
     /**
      * Whether every offered time in an hour is barred.
      *
@@ -252,6 +278,26 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * rather than wrong, which is why it can be left in.
      */
     reveal(): void;
+    /**
+     * Blocks changes to the time. The value is still submitted with the form.
+     *
+     * **Enforced by refusing every request in one place**, which is the seam this
+     * component already has: `requestValue` is what every path here comes through,
+     * and gating it once is what stops the next call site from being written
+     * without the check.
+     *
+     * Not `disabled`, which is the confusion worth naming: a disabled control
+     * submits nothing and leaves the tab order, and a read-only one submits its
+     * value and stays reachable, which is what a form showing a value somebody
+     * else set needs.
+     */
+    readOnly: boolean;
+    /** Refuses every change while read-only. See `readOnly`. */
+    requestValue(next: string): boolean;
+    /**
+     * Stops the form from submitting while no time is chosen.
+     */
+    required: boolean;
     /**
      * How far apart the offered times are, in minutes.
      *
@@ -260,12 +306,27 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * Anything under five is a thousand rows and wants a field instead.
      */
     step: number;
-    /** Refuses every change while read-only. See `readOnly`. */
-    requestValue(next: string): boolean;
+    /**
+     * The validation message for a time that `step` skips.
+     */
+    stepMismatchMessage?: string;
+    /**
+     * The validation message for a time that `disable-times` bars.
+     */
+    unavailableMessage?: string;
     /**
      * The validation message for a required time picker with no time chosen.
      */
     valueMissingMessage?: string;
+    /**
+     * What is wrong with a time the picker can read, as a validity flag and a
+     * message, or nothing.
+     *
+     * Measured before this: a time past `max` or one `disable-times` bars,
+     * whether set by a script or built on the wheels, reported valid and was
+     * submitted, where a native time input reports the bound it is past.
+     */
+    private fault;
     /**
      * Shows the times as one `list`, or as `wheels` with a column for each part
      * of the time.
@@ -346,9 +407,31 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * and after that only whatever opens a panel calls `reveal`.
      */
     private listRevealed;
+    /**
+     * The list's name: the host's `aria-labelledby` read out, then its
+     * `aria-label`, then `label`.
+     *
+     * Read out as words, because the list is inside two shadow roots and an id on
+     * the page reaches neither. Measured before this: `<helix-time-picker
+     * aria-label="Slot">` was a listbox named "Time".
+     */
+    private get listName();
+    /**
+     * Hears the host's `aria-label` and `aria-labelledby` change, which no
+     * property reports. Made on connection, there being no `MutationObserver` on
+     * a server.
+     */
+    private naming;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /** Moves focus to the list, which is the only control in the picker. */
+    /**
+     * Moves focus to the list, or to the first wheel.
+     *
+     * The wheels render no list, so focus went nowhere on them and a wrapping
+     * component could not move focus into the picker.
+     */
     focus(options?: FocusOptions): void;
     /**
      * One wheel, which is a listbox like the whole list is.