@fusion.dev/helix-headless 0.143.0 → 0.144.0

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, fillTemplate, timeAsValue as fromTime, HelixFormElement, isTimeValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, valueAsMinutes, writeTime, writtenList, } 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';
@@ -12,11 +12,11 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.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;
@@ -26,6 +26,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         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';
@@ -35,7 +36,7 @@ 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.requestPicked([...held, this.draft].sort().join(','));
@@ -62,7 +63,7 @@ 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();
         };
@@ -94,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') {
@@ -117,33 +135,33 @@ 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),
             });
         }
-        const barred = writtenList(this.disableTimes);
-        if (held.some((one) => barred.includes(one))) {
+        if (faults.includes('unavailable')) {
             return this.unavailableMessage || 'Choose a time that is available.';
         }
         if (this.mode === 'range' && held.length > 2) {
@@ -181,9 +199,11 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
       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}
@@ -194,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}
@@ -216,26 +236,30 @@ 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}
-          @change=${this.handleCommit}
-          @focus=${this.handleFocus}
-          @input=${this.handleInput}
-          @keydown=${this.handleDraftKey}
-          @keypress=${this.handleKeypress}
-        />
+        ${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"
@@ -284,6 +308,9 @@ __decorate([
 __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);
@@ -311,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);

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`.
  *
@@ -96,6 +101,15 @@ 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.
      */
@@ -178,15 +192,19 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      */
     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.
      *
@@ -199,6 +217,8 @@ 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`.
@@ -243,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;
@@ -251,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.
@@ -299,7 +321,22 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      */
     required: boolean;
     /**
-     * How far apart the offered times are, in minutes.
+     * 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.
@@ -446,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.