@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -4,27 +4,29 @@ 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, clockLocale, customElement, fillTemplate, timeAsValue as fromTime, HelixFormElement, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, timeFault, writeClock, } 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)))))) {
+let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmentedField(MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement))))))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.partNamed('control'),
+            target: () => this.partNamed('control') ?? this.segmentGroup,
         });
         this.autocomplete = '';
+        this.announcesInput = true;
+        this.disableTimes = '';
         this.locale = '';
         this.max = '23:59';
         this.min = '00:00';
         this.placeholder = 'HH:mm';
         this.removeLabel = 'Remove {name}';
+        this.seconds = false;
         this.step = 15;
         this.timeStyle = 'local';
         this.triggerLabel = 'Choose a time';
@@ -34,19 +36,19 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
                 return;
             }
             const held = this.held;
-            if (event.key === 'Enter' && isTimeValue(this.draft)) {
+            if (event.key === 'Enter' && this.isTime(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();
@@ -61,19 +63,30 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
                 .split(',')
                 .map((one) => one.trim())
                 .filter(Boolean);
-            const whole = held.length > 0 && held.every(isTimeValue);
+            const whole = held.length > 0 && held.every((one) => this.isTime(one));
             this.requestValue(whole ? held.join(',') : typed);
             this.restore();
         };
         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
@@ -82,8 +95,25 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
             .map((one) => one.trim())
             .filter(Boolean);
     }
+    get segmentable() {
+        return this.mode === undefined;
+    }
+    get segmentedKind() {
+        return 'time';
+    }
+    get segmentLocale() {
+        return this.locale;
+    }
+    get segmentOptions() {
+        return { hourCycle: this.hourCycle, seconds: this.seconds };
+    }
+    isTime(at) {
+        return isClockValue(at, this.seconds);
+    }
     written(at) {
-        return this.timeStyle === 'iso' || !isTimeValue(at) ? at : writeTime(at, this.locale);
+        return this.timeStyle === 'iso' || !this.isTime(at)
+            ? at
+            : writeClock(at, clockLocale(this.locale, this.hourCycle), this.seconds);
     }
     get display() {
         if (this.mode === 'multiple') {
@@ -105,31 +135,35 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
     }
     get picked() {
         const held = this.held;
-        return held.length > 0 && held.every(isTimeValue) ? held.join(',') : '';
+        return held.length > 0 && held.every((one) => this.isTime(one)) ? 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)) {
+        const shape = this.seconds ? 'HH:mm:ss' : 'HH:mm';
+        if (held.length > 0 && !held.every((one) => this.isTime(one))) {
             return (this.badInputMessage ||
                 (this.mode === undefined
-                    ? 'Enter a time as HH:mm.'
-                    : 'Enter times as HH:mm, separated by commas.'));
+                    ? `Enter a time as ${shape}.`
+                    : `Enter times as ${shape}, separated by commas.`));
         }
-        if (held.some((one) => (valueAsMinutes(one) ?? 0) < floor)) {
+        const rules = { disableTimes: this.disableTimes, max: this.max, min: this.min };
+        const faults = held.map((one) => timeFault(one, rules));
+        if (faults.includes('rangeUnderflow')) {
             return fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
-                min: writeTime(this.min, this.locale),
+                min: writeClock(this.min, clockLocale(this.locale, this.hourCycle), this.seconds),
             });
         }
-        if (held.some((one) => (valueAsMinutes(one) ?? 0) > ceiling)) {
+        if (faults.includes('rangeOverflow')) {
             return fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
-                max: writeTime(this.max, this.locale),
+                max: writeClock(this.max, clockLocale(this.locale, this.hourCycle), this.seconds),
             });
         }
+        if (faults.includes('unavailable')) {
+            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,10 +196,14 @@ 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'}
+      hour-cycle=${this.hourCycle ?? nothing}
       locale=${this.locale || nothing}
       max=${this.max}
       min=${this.min}
+      ?seconds=${this.seconds}
       step=${this.step}
       .value=${this.picked}
       @helix-before-change=${this.handlePicked}
@@ -176,7 +214,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
     renderTag(at) {
         return html `<${this.tag('tag')}
                   part="time"
-      exportparts="dismiss: time-dismiss, dismiss-mark: time-dismiss-mark, label: time-label, start: time-start"
+      exportparts="cell: time-cell, dismiss: time-dismiss, dismiss-mark: time-dismiss-mark, label: time-label, link: time-link, start: time-start"
                   dismissible
                   dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(at) })}
                   ?disabled=${this.isDisabled}
@@ -198,39 +236,55 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownTimes.map((at) => this.renderTag(at)), this.restCount)
             : nothing}
-        <input
-          part="control"
-          id=${this.controlId}
-          type="text"
-          .value=${this.display}
-          name=${this.name || nothing}
-          placeholder=${this.mode === 'multiple' && this.held.length > 0 ? nothing : this.placeholder || nothing}
-          autocomplete=${this.autocomplete || nothing}
-          aria-describedby=${this.describedBy ?? nothing}
-          aria-invalid=${this.invalidity ?? nothing}
-          ?disabled=${this.isDisabled}
-          ?readonly=${this.readOnly}
-          ?required=${this.required}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-          @input=${this.handleInput}
-          @keydown=${this.handleDraftKey}
-        />
+        ${this.segmentsShown
+            ? this.renderSegments()
+            : html `<input
+                part="control"
+                id=${this.controlId}
+                type="text"
+                .value=${this.display}
+                name=${this.name || nothing}
+                placeholder=${this.mode === 'multiple' && this.held.length > 0
+                ? nothing
+                : this.placeholder || nothing}
+                autocomplete=${this.autocomplete || nothing}
+                aria-describedby=${this.describedBy ?? nothing}
+                aria-invalid=${this.invalidity ?? nothing}
+                ?disabled=${this.isDisabled}
+                ?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 +305,12 @@ 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({ attribute: 'hour-cycle' })
+], HelixHeadlessTimeInput.prototype, "hourCycle", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "locale", void 0);
@@ -278,6 +338,9 @@ __decorate([
 __decorate([
     property({ attribute: 'remove-label' })
 ], HelixHeadlessTimeInput.prototype, "removeLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTimeInput.prototype, "seconds", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimeInput.prototype, "step", void 0);
@@ -287,6 +350,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

@@ -1,4 +1,4 @@
-import { HelixFormElement } from '@fusion.dev/helix-core';
+import { HelixFormElement, type HourCycle } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
 import '../../option/index.js';
@@ -10,14 +10,19 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * Shows the times at each `step` as a `Listbox`, which provides the keyboard
  * behavior, typeahead, scrolling into view, and announcements for a set of
  * options. `variant="wheels"` shows a column each for the hour, the minute, and
- * the meridiem.
+ * the meridiem, and one for the second with `seconds`. Left and Right move
+ * between the wheels, and Tab does too.
+ *
+ * `hour-cycle` writes every time on a twelve or a twenty-four hour clock
+ * whatever the locale, and `seconds` holds times to the second.
  *
  * The step keeps the list usable. At the default of 15 minutes a day is 96
  * rows, which people can scroll or type into. At 1 minute it is 1,440. Use the
  * list for the times your product offers, and Time Input for any time, the same
  * way Date Input separates typing a date from picking one on the calendar.
  *
- * The value is always `HH:mm` on a 24-hour clock. A form submits that shape,
+ * The value is always `HH:mm` on a 24-hour clock, or `HH:mm:ss` with
+ * `seconds`. A form submits that shape,
  * `min` and `max` compare against it, and it sorts as a string. Each row's text
  * follows the person's own conventions, from `Intl`.
  *
@@ -84,7 +89,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 +101,19 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * reached honestly rather than by handing over an empty range.
      */
     disableTimes: string;
+    /**
+     * The clock the times are written on: `h12` for twelve hours with a
+     * meridiem, `h23` for twenty-four.
+     *
+     * Absent is the locale's own, which is right for a reader's own form. Set it
+     * where every reader must see the same clock whatever their language, as a
+     * timetable does. The value is `HH:mm` on twenty-four hours either way.
+     */
+    hourCycle?: HourCycle;
+    /**
+     * What the wheel of hours is called, read by screen readers.
+     */
+    hourLabel: string;
     /**
      * Whether the current selection fails validation.
      *
@@ -108,6 +126,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 +136,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,33 +182,29 @@ 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.
+     * Every time on offer, as seconds since midnight.
      *
      * Built from `min` upward rather than from midnight, so a list that starts at
      * `09:00` steps from nine rather than offering `09:15` because that is where
      * the quarter hours from midnight happen to land. A step that does not divide
      * the hour is a real thing to want, twenty minutes being the obvious one, and
-     * this is the reading that makes it behave.
+     * this is the reading that makes it behave. See `offeredTimes`.
      */
     private get times();
+    /** The locale with the clock `hour-cycle` asks for. */
+    private get clock();
+    /** A time as the value writes it, to the second where `seconds` asks. */
+    private valueFor;
     /**
      * Whether a time is barred by name.
      *
@@ -184,6 +217,19 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * outside the bounds is absent rather than present and refused.
      */
     private barred;
+    /** The same question of seconds since midnight, matching `09:30` and `09:30:00` alike. */
+    private barredAt;
+    /**
+     * 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.
      *
@@ -217,7 +263,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     private readonly handleChange;
     /** Whether a time falls inside a range, which is what gets banded. */
     private between;
-    /** The three readings a wheel shows, from the value or from `min`. */
+    /** The readings the wheels show, from the value or from `min`. */
     private get parts();
     /** Puts a changed column back together into a whole time. */
     private readonly moveColumn;
@@ -225,6 +271,8 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     private get hours();
     /** Every minute offered within the hour currently shown. */
     private get minutes();
+    /** Every second offered within the minute currently shown. */
+    private get secondsShown();
     /**
      * Scrolls each wheel to its selected value, and the list to its selected
      * time.
@@ -253,19 +301,69 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      */
     reveal(): void;
     /**
-     * How far apart the offered times are, in minutes.
+     * 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;
+    /**
+     * What the wheel of seconds is called, read by screen readers.
+     */
+    secondLabel: string;
+    /**
+     * Whether times carry their seconds.
+     *
+     * The value becomes `HH:mm:ss`, each time is written with its seconds, the
+     * wheels take a column of seconds, and `step` counts seconds, the unit
+     * `<input type="time">` counts in. A list at a step of one second is 86,400
+     * rows, so give `seconds` a `step` and bounds that keep it a list, or use
+     * the wheels.
+     */
+    seconds: boolean;
+    /**
+     * How far apart the offered times are, in minutes, or in seconds with
+     * `seconds`.
      *
      * Fifteen, which is four rows an hour and ninety-six in a day: enough that a
      * reader scrolls rather than hunts, and few enough that the list is a list.
      * 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 +444,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.
@@ -363,7 +483,16 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * barred only when every minute in it is, since one free minute is a reason to
      * open the wheel rather than to close it.
      */
-    protected renderColumn(part: 'hour' | 'meridiem' | 'minute', label: string, values: string[], written: (one: string) => string, value: string, barred?: (one: string) => boolean): TemplateResult;
+    protected renderColumn(part: 'hour' | 'meridiem' | 'minute' | 'second', label: string, values: string[], written: (one: string) => string, value: string, barred?: (one: string) => boolean): TemplateResult;
+    /**
+     * Left and Right move between the wheels, as Web Awesome's columns do, and
+     * Tab still does.
+     *
+     * A wheel is a listbox and takes Up and Down, so the horizontal pair was
+     * free. Along the line of text, which runs from the right on a right-to-left
+     * page, and stopping at the first and last wheel.
+     */
+    private readonly handleColumnsKeydown;
     private renderSpinner;
     /**
      * The flat list of times, for the variant that is not wheels, behind a seam the styled tier can move.