@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -4,17 +4,45 @@ 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, slottedWords } from '@fusion.dev/helix-core';
-import { x } from '@fusion.dev/helix-icons';
+import { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, slottedWords, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { property } from 'lit/decorators.js';
 let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
         this.dismissLabel = 'Remove';
+        this.disabled = false;
+        this.href = '';
+        this.value = '';
+    }
+    get words() {
+        return this.childrenKnown ? slottedWords(this, ['start', '']) : '';
+    }
+    get grouped() {
+        return this.focusable !== undefined;
+    }
+    focusItem() {
+        this.renderRoot
+            .querySelector(this.grouped ? '[part~="cell"]' : '[part~="link"], [part~="dismiss"]')
+            ?.focus();
+    }
+    get returnFocusTo() {
+        if (this.disabled) {
+            return null;
+        }
+        return this.grouped
+            ? this.renderRoot.querySelector('[part~="cell"]')
+            : super.returnFocusTo;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { role: this.grouped ? 'row' : '' });
+        this.internals.ariaSelected = this.selected === undefined ? null : String(this.selected);
+        this.internals.ariaDisabled = this.disabled ? 'true' : null;
+        this.toggleState('selected', this.selected === true);
     }
     get removeName() {
-        const words = this.childrenKnown ? slottedWords(this, ['start', '']) : '';
+        const words = this.words;
         if (this.dismissLabel.includes('{label}')) {
             return this.dismissLabel.replace('{label}', words).trim();
         }
@@ -28,22 +56,50 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
         this.finishHydration();
     }
     render() {
-        return html `<slot name="start" part="start"></slot>
-      <slot part="label"></slot>
-      ${this.dismissible
-            ? html `<button
-            part="dismiss"
-            type="button"
-            aria-label=${this.removeName}
-            @click=${() => this.dismiss()}
-          >
-            <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">
-              ${unsafeSVG(x.content)}
-            </svg>
-          </button>`
-            : nothing}`;
+        const content = html `<slot name="start" part="start"></slot>${this.renderLabel()}${this.dismissible ? this.renderDismiss() : nothing}`;
+        return this.grouped
+            ? html `<span part="cell" role="gridcell" tabindex=${this.focusable ? '0' : '-1'}
+          >${content}</span
+        >`
+            : content;
+    }
+    renderLabel() {
+        if (this.href === '') {
+            return html `<slot part="label"></slot>`;
+        }
+        return html `<a
+      aria-disabled=${this.disabled ? 'true' : nothing}
+      href=${this.disabled ? nothing : this.href}
+      part="link"
+      tabindex=${this.grouped ? '-1' : nothing}
+      ><slot part="label"></slot
+    ></a>`;
+    }
+    renderDismiss() {
+        return drawDismiss({
+            disabled: this.disabled,
+            label: this.removeName,
+            mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
+            onDismiss: () => this.dismiss(),
+            tabindex: this.grouped ? '-1' : undefined,
+        });
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTag.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTag.prototype, "focusable", void 0);
+__decorate([
+    property()
+], HelixHeadlessTag.prototype, "href", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTag.prototype, "selected", void 0);
+__decorate([
+    property()
+], HelixHeadlessTag.prototype, "value", void 0);
 HelixHeadlessTag = __decorate([
     customElement('helix-headless-tag')
 ], HelixHeadlessTag);

package/dist/tag/selection.d.ts

@@ -0,0 +1,10 @@
+/** How many tags a group lets a reader select. */
+export type TagSelectionMode = 'multiple' | 'none' | 'single';
+/**
+ * The `value` a press on the tag carrying `pressed` leaves.
+ *
+ * `single` selects that tag alone, or none where it was the one selected.
+ * `multiple` adds it, or takes it out. `none` selects nothing and leaves the
+ * value as it was.
+ */
+export declare const pressedValue: (mode: TagSelectionMode, value: string, pressed: string) => string;

package/dist/tag/selection.js

@@ -0,0 +1,12 @@
+import { commaList, toggleValue } from '@fusion.dev/helix-core';
+export const pressedValue = (mode, value, pressed) => {
+    const now = commaList(value);
+    const held = now.includes(pressed);
+    if (mode === 'single') {
+        return held ? '' : pressed;
+    }
+    if (mode === 'multiple') {
+        return toggleValue(now, pressed).join(', ');
+    }
+    return value;
+};

package/dist/textarea/grow.d.ts

@@ -0,0 +1,22 @@
+/** What a box adds around its lines, and how tall one line is, in pixels. */
+export interface LineMetrics {
+    /** Padding and border above and below the lines. */
+    readonly around: number;
+    /** The height of one line. */
+    readonly line: number;
+}
+/**
+ * The height a growing field takes: what its text needs, held to `maxRows`
+ * lines where that is a positive number. The second answer says whether the
+ * text is taller than the cap, so the field scrolls.
+ */
+export declare const grownHeight: (needed: number, maxRows: number | undefined, metrics: LineMetrics) => {
+    height: number;
+    scrolls: boolean;
+};
+/**
+ * Reads a box's line height and what it adds around its lines from its
+ * computed style. A `normal` line height counts as 1.2 times the font size,
+ * which is what browsers draw it as for most fonts.
+ */
+export declare const lineMetrics: (style: CSSStyleDeclaration) => LineMetrics;

package/dist/textarea/grow.js

@@ -0,0 +1,20 @@
+export const grownHeight = (needed, maxRows, metrics) => {
+    if (maxRows === undefined || !(maxRows > 0) || metrics.line <= 0) {
+        return { height: needed, scrolls: false };
+    }
+    const cap = Math.ceil(maxRows * metrics.line + metrics.around);
+    return needed > cap ? { height: cap, scrolls: true } : { height: needed, scrolls: false };
+};
+export const lineMetrics = (style) => {
+    const px = (value) => Number.parseFloat(value) || 0;
+    const line = style.lineHeight === 'normal' || style.lineHeight === ''
+        ? px(style.fontSize) * 1.2
+        : px(style.lineHeight);
+    const around = style.boxSizing === 'border-box'
+        ? px(style.paddingBlockStart) +
+            px(style.paddingBlockEnd) +
+            px(style.borderBlockStartWidth) +
+            px(style.borderBlockEndWidth)
+        : 0;
+    return { around, line };
+};

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

@@ -14,6 +14,8 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  *
  * `rows` sets the starting height, and `auto-grow` makes the field grow with
  * its content. You can use both: `rows` sets where an empty field begins.
+ * `max-rows` stops the growth at that many lines, and the field scrolls past
+ * them.
  *
  * @since 0.1.0
  * @status stable
@@ -21,9 +23,11 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * @aliases Multiline, TextArea
  * @documentation https://fusion.dev/helix/components/textarea
  *
+ * @slot end - After the text, for an icon or an action beside it.
  * @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.
+ * @slot start - Before the text, for an icon.
  *
  * @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.
@@ -79,6 +83,11 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * The most characters the value can have.
      */
     maxLength?: number;
+    /**
+     * How many lines an `auto-grow` field grows to before it scrolls. Absent,
+     * it grows with all of its text.
+     */
+    maxRows?: number;
     /**
      * The fewest characters the value can have.
      *

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { AriaForwardController, customElement, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { grownHeight, lineMetrics } from '../grow.js';
 let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -51,7 +52,9 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         if (next === 0) {
             return;
         }
-        control.style.blockSize = `${next}px`;
+        const grown = grownHeight(next, this.maxRows, lineMetrics(getComputedStyle(control)));
+        control.style.blockSize = `${grown.height}px`;
+        control.style.overflowY = grown.scrolls ? 'auto' : '';
     }
     formValue() {
         const control = this.control;
@@ -155,6 +158,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
     render() {
         return html `${this.renderLabel()}
     <div part="field">
+      <slot name="start"></slot>
       <textarea
         part="control"
         id=${this.controlId}
@@ -175,6 +179,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         @input=${this.handleInput}
         @change=${this.handleChange}
       ></textarea>
+      <slot name="end"></slot>
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }
@@ -194,6 +199,9 @@ __decorate([
 __decorate([
     property({ attribute: 'maxlength', type: Number })
 ], HelixHeadlessTextarea.prototype, "maxLength", void 0);
+__decorate([
+    property({ attribute: 'max-rows', type: Number })
+], HelixHeadlessTextarea.prototype, "maxRows", void 0);
 __decorate([
     property({ attribute: 'minlength', type: Number })
 ], HelixHeadlessTextarea.prototype, "minLength", void 0);

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

@@ -1,8 +1,8 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, type HourCycle } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 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;
+declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSegmentedFieldInterface) & (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;
 /**
  * @summary A field for a time, typed or picked from a list.
  *
@@ -15,7 +15,8 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * You can type a time or pick one. The list offers times at a step, and the
  * field lets you enter any time, such as `09:07`.
  *
- * The value is always `HH:mm` on a 24-hour clock, because that is what the form
+ * The value is always `HH:mm` on a 24-hour clock, or `HH:mm:ss` with
+ * `seconds`, because that is what the form
  * submits, what `min` and `max` compare against, and what sorts correctly as a
  * string. While idle, the field shows the time in the user's locale format.
  * Once the caret is in the field, it shows the value itself, because a
@@ -23,11 +24,16 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * 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
+ * field. The trigger and ArrowDown open the list, and so does a press into the
+ * field; Tab into the field opens nothing. In the list, the arrow keys, typed digits and PageUp and PageDown
  * move through the times, and Enter, Space or a click chooses one and closes
  * the panel. With `variant="wheels"` each wheel moves the time as you turn it,
  * the panel stays open, and Enter or Escape closes it.
  *
+ * With `segmented`, the field is a row of segments in place of the text: an
+ * hour, a minute, and AM or PM where the clock has them, each set with digits
+ * or the arrow keys. Alt+Down opens the list from a segment.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -50,6 +56,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart field - The box that holds the text and the trigger.
  * @csspart hint - Help under the field, while nothing is wrong.
  * @csspart label - The label above the field.
+ * @csspart literal - The text the locale writes between two segments, such as a colon, in `segmented`.
  * @csspart picker - The time picker inside the panel.
  * @csspart picker-column - One column of the picker.
  * @csspart picker-column-empty - The text shown when the filter hides every option.
@@ -85,12 +92,17 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-option-label - The option's label.
  * @csspart picker-option-text - The label and the caption, as one column.
  * @csspart rest - The count of times held beyond the ones shown. A `<button>` with `expandable`, and a `<span>` without it.
+ * @csspart segment - One part of the time, an hour, a minute, a second or AM and PM, in `segmented`.
+ * @csspart segment-placeholder - A segment with nothing in it yet. Applied with `segment`.
+ * @csspart segments - The row of segments that holds the time, in `segmented`.
  * @csspart surface - The floating panel.
  * @csspart tags - The row the times sit in.
  * @csspart time - One held time, as a tag, in `multiple`.
+ * @csspart time-cell - The tag's grid cell, which a tag draws only inside a tag group.
  * @csspart time-dismiss - The remove button, when `dismissible`.
  * @csspart time-dismiss-mark - The default icon on the remove button, shown when none is slotted.
  * @csspart time-label - The label, trimmed to its capitals and baseline.
+ * @csspart time-link - The tag's link around its label, which a tag draws only with `href`.
  * @csspart time-start - The category before the label.
  * @csspart trigger - The control that opens the list.
  * @csspart trigger-icon - The icon on the button that opens the clock.
@@ -116,6 +128,13 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * a typed time, which is then invalid.
      */
     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.
+     *
+     * Handed to the list. The value is `HH:mm` on twenty-four hours either way.
+     */
+    hourCycle?: HourCycle;
     /**
      * Language tag the times are written in.
      *
@@ -169,7 +188,14 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      */
     removeLabel: string;
     /**
-     * How far apart the offered times are, in minutes.
+     * Whether times carry their seconds: the value is `HH:mm:ss`, a typed time
+     * may give them, the field writes them, and the list's `step` counts seconds.
+     * See Time Picker's `seconds`.
+     */
+    seconds: boolean;
+    /**
+     * How far apart the offered times are, in minutes, or in seconds with
+     * `seconds`.
      */
     step: number;
     /**
@@ -192,6 +218,19 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     unavailableMessage?: string;
     /** Every time in the value, which may hold more than one. */
     private get held();
+    /**
+     * Segments hold one time, so `range` and `multiple` keep the line of text,
+     * whose separators and tags are how those modes write several.
+     */
+    protected get segmentable(): boolean;
+    protected get segmentedKind(): 'time';
+    protected get segmentLocale(): string;
+    protected get segmentOptions(): {
+        hourCycle?: HourCycle | undefined;
+        seconds: boolean;
+    };
+    /** Whether a typed time is one this field holds, to the second where it holds seconds. */
+    private isTime;
     /** One time, written the way `time-style` asks for. */
     private written;
     /** What the field shows: the value while it is being edited, a reading when not. */

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);