@fusion.dev/helix-headless 0.155.0 → 0.157.0

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

@@ -96,6 +96,11 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
  * | Tab | Leaves the table. |
  *
+ * When the rows did not load, set `error-text`, such as "The orders did not
+ * load", and put a button that tries again in the `error` slot. The line shows
+ * after the rows in place of the empty and loading lines, the live region says
+ * it, and the table takes the `error` state. Clear it once you try again.
+ *
  * The CSS custom properties listed for this component are written by it and
  * read by the stylesheet that draws it. Do not set them. Each holds a number
  * the component computes and CSS cannot, so the stylesheet can draw the table
@@ -109,6 +114,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  *
  * @slot - The table's rows.
  * @slot empty - Content shown when there are no rows and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
+ * @slot error - Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
  * @slot heading - Words that name the table, shown above it, such as a heading.
  * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  *
@@ -132,6 +138,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart checkbox-mark-indeterminate - Added to `checkbox-mark` while only some rows are selected.
  * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
  * @csspart empty - The text shown when there are no rows.
+ * @csspart error - The line shown after the rows while `error-text` is set, in place of the empty and loading text.
  * @csspart grid-end - An empty box after the rows, in a `grid` table. Tab focuses it on its way out of the table, so the key leaves from the end.
  * @csspart grid-start - An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
  * @csspart grip-head - The heading over the row grips, in a `reorderable` table.
@@ -142,6 +149,9 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart table - The grid.
  *
  * @cssproperty --table-template - The column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set `columns` to change the tracks.
+ *
+ * @cssstate empty - While there are no rows and none are loading.
+ * @cssstate error - While `error-text` is set.
  */
 export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     /**
@@ -214,6 +224,16 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     descendingLabel: string;
     /** What screen readers hear when a held row is dropped, in a `reorderable` table. */
     droppedLabel: string;
+    /**
+     * The text shown and announced when the rows could not load. Set it when a
+     * fetch fails, and clear it once you try again. Empty, the default, shows
+     * nothing.
+     *
+     * While it is set, a line after the rows shows it, or your own content in the
+     * `error` slot, in place of the empty and loading lines, and the live region
+     * says it.
+     */
+    errorText: string;
     /**
      * The table's name where neither `label` nor an `aria-label` or
      * `aria-labelledby` on the host gives it one.

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

@@ -44,7 +44,7 @@ const SAMPLE = 200;
 const textOf = (element) => (element?.textContent ?? '').replace(/\s+/g, ' ').trim();
 const lengthOf = (element) => textOf(element).length;
 const numberOf = (value) => Number(value.replaceAll(',', ''));
-const STATUS = new Set(['empty', 'loading']);
+const STATUS = new Set(['empty', 'error', 'loading']);
 const NAMED = new Set([...STATUS, 'heading']);
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
@@ -57,6 +57,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.defaultSort = '';
         this.descendingLabel = 'descending';
         this.droppedLabel = 'Dropped';
+        this.errorText = '';
         this.fallbackLabel = 'Table';
         this.grid = false;
         this.label = '';
@@ -496,6 +497,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }
     updated(changed) {
         super.updated(changed);
+        this.toggleState('error', this.errorText !== '');
+        this.toggleState('empty', !this.loading && !this.hasRows);
         this.assign();
         this.alignCells();
         this.markSorted();
@@ -561,8 +564,12 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.handleSlotChange();
         }}
       ></slot>
-      ${this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')}
-    </div>${end}${this.renderLive(this.hasRows)}${this.reorder.drawDragPreview()}`;
+      ${this.errorText === ''
+            ? this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')
+            : html `<p part="error" role="row"><span role=${grid ? 'gridcell' : 'cell'}><slot name="error">${this.errorText}</slot></span></p>`}
+    </div>${end}${this.errorText === ''
+            ? this.renderLive(this.hasRows)
+            : html `<span part="live" role="status">${this.errorText}</span>`}${this.reorder.drawDragPreview()}`;
     }
 };
 __decorate([
@@ -590,6 +597,9 @@ __decorate([
     words,
     property({ attribute: 'dropped-label' })
 ], HelixHeadlessTable.prototype, "droppedLabel", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], HelixHeadlessTable.prototype, "errorText", void 0);
 __decorate([
     words,
     property({ attribute: 'fallback-label' })

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

@@ -34,17 +34,41 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * 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.
  *
+ * Text that is not a time gives the form an empty value, as a native time
+ * field does, and `value` keeps the text so it can be corrected.
+ *
+ * **Keyboard.** The field is one tab stop, or each segment is with
+ * `segmented`, and the trigger is one more.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down | In the text field, opens the list on the chosen time. |
+ * | Alt with Down | Opens the list, from the text field or a segment. |
+ * | Enter | In the text field, takes the typed time and submits the form, as a native field does. In the list, chooses the highlighted time. |
+ * | Escape | Closes the list and puts focus back in the field. |
+ * | Up, Down on a segment | Steps the segment by one, round from its last value to its first. |
+ * | Page Up, Page Down on a segment | Steps by a page: two hours, or fifteen minutes or seconds. |
+ * | Home, End on a segment | Goes to the segment's first or last value. |
+ * | Digits on a segment | Fill it, and move to the next once it can take no more. |
+ * | A letter on the half of the day | Picks the half whose name starts with it, such as A for AM. |
+ * | Backspace, Delete on a segment | Empty the segment. |
+ * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
+ *
+ * In the list, the keys are `TimePicker`'s.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases TimeField, InputTime
  * @documentation https://fusion.dev/helix/components/time-input
  *
+ * @slot end - Content after the time, before the trigger, such as a clear button.
  * @slot feedback - The message that says what is wrong with the value.
  * @slot hint - Help under the field.
  * @slot label - The label, for content richer than the `label` text.
  * @slot panel-footer - Content in the panel under the times, such as a note or an action.
  * @slot panel-header - Content in the panel above the times, such as a heading or a shortcut.
+ * @slot start - Content before the time, such as an icon.
  * @slot trigger - The icon on the field that shows a list opens.
  *
  * @event {Event} change - Fired after the value changes.
@@ -76,6 +100,8 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-column-search-field - The filter field.
  * @csspart picker-columns - The row of columns, in `wheels`.
  * @csspart picker-feedback - The picker's own message, under the times, while the picker's `feedback` is set.
+ * @csspart picker-hint - The picker's hint, which Time Input never sets: help under the field is the field's own `hint`.
+ * @csspart picker-label - The picker's visible label, which Time Input never draws: the field's `label` names it.
  * @csspart picker-list - The listbox holding the times, in `list`.
  * @csspart picker-list-empty - The text shown when the filter hides every option.
  * @csspart picker-list-error - The list's `error` part, which the list never sets: its times do not load.
@@ -283,7 +309,12 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * what says the reader is done.
      */
     private readonly handleWheelEnter;
-    /** Each time, where `mode` holds several, sent one entry each. */
+    /**
+     * Each time, where `mode` holds several, sent one entry each.
+     *
+     * One time that is text and no time, such as `2:45 P`, is sent as an empty
+     * entry, as a native time field sends a time it cannot read.
+     */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the times, which the text input cannot say. */
     protected validate(): string | readonly [keyof ValidityStateFlags, string];

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

@@ -146,7 +146,11 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         return held.length > 0 && held.every((one) => this.isTime(one)) ? held.join(',') : '';
     }
     get answers() {
-        return this.mode === undefined ? undefined : this.held;
+        if (this.mode !== undefined) {
+            return this.held;
+        }
+        const text = this.value.trim();
+        return text === '' || this.isTime(text) ? undefined : [''];
     }
     validate() {
         const held = this.held;
@@ -197,7 +201,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
         column-filter-mark: picker-column-filter-mark, column-hint: picker-column-hint,
         column-items: picker-column-items, column-label: picker-column-label,
         column-live: picker-column-live, column-loading: picker-column-loading, column-search: picker-column-search,
-        column-search-field: picker-column-search-field, columns: picker-columns, feedback: picker-feedback, list: picker-list,
+        column-search-field: picker-column-search-field, columns: picker-columns, feedback: picker-feedback, hint: picker-hint,
+        label: picker-label, list: picker-list,
         list-empty: picker-list-empty, list-error: picker-list-error, list-feedback: picker-list-feedback,
         list-filter-icon: picker-list-filter-icon, list-filter-mark: picker-list-filter-mark,
         list-hint: picker-list-hint, list-items: picker-list-items, list-label: picker-list-label,
@@ -269,10 +274,12 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
+        <slot name="start"></slot>
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownTimes.map((at) => this.renderTag(at)), this.restCount)
             : nothing}
         ${this.segmentsShown ? this.renderSegments() : this.renderControl()}
+        <slot name="end"></slot>
         <button
           part="trigger"
           type="button"

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

@@ -35,12 +35,37 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * its choice in markup for the same reason. The list and the wheels both do
  * this, because each wheel is also a listbox.
  *
+ * **Keyboard.** The list is one tab stop, and each wheel is one.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | Moves to the next or the previous time, or in a wheel to the next or the previous hour, minute, second, or half of the day. |
+ * | Home, End | Moves to the first or the last time, or the first or the last in a wheel. |
+ * | Page Down, Page Up | Moves by as many times as the list shows at once. |
+ * | Digits | Moves to the next time that starts with what you typed, such as `9` for 9:00. |
+ * | Enter, Space | Chooses the highlighted time. Moving chooses too, except under `manual` or with a `mode`. With a `mode`, Space adds or removes the time. |
+ * | Right, Left | In the wheels, moves to the next or the previous wheel, mirrored right to left. |
+ * | Tab | Moves to the next wheel, then out of the picker. |
+ *
+ * **ARIA.** The list is a `listbox` named by `label`, a slotted label, the
+ * host's `aria-label` or its `aria-labelledby`. A development build warns
+ * where all four are empty. The list is described by the hint, or by the
+ * message in `feedback` in its place, and carries `aria-multiselectable` with
+ * a `mode` and `aria-invalid` while `feedback` says what is wrong. The wheels
+ * are a `group` with that name, holding one `listbox` per wheel, named "Hour",
+ * "Minute", "Second" and "AM/PM" in the page's language, and each described
+ * the same way.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases Time, TimeList
  * @documentation https://fusion.dev/helix/components/time-picker
  *
+ * @slot empty - What the list shows when no time falls between `min` and `max`, for content richer than `empty-text`.
+ * @slot hint - Help under the times, for content richer than the `hint` text.
+ * @slot label - A visible label above the times, which names the list, for content richer than the `label` text.
+ *
  * @event {Event} change - Fired after the value changes.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the time changes, and cancelable. Canceling it keeps the current time.
  * @event {Event} input - Fired after the value changes.
@@ -60,6 +85,8 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart column-search-field - The filter field.
  * @csspart columns - The row of columns, in `wheels`.
  * @csspart feedback - The message under the times, while `feedback` is set.
+ * @csspart hint - Help under the times, shown while there is no message in `feedback`.
+ * @csspart label - The visible label above the times, drawn while a label is slotted.
  * @csspart list - The listbox holding the times, in `list`.
  * @csspart list-empty - The text shown when the filter hides every option.
  * @csspart list-error - The list's `error` part, which Time Picker never sets: its times do not load.
@@ -115,6 +142,19 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * reached honestly rather than by handing over an empty range.
      */
     disableTimes: string;
+    /**
+     * What the list says when no time falls between `min` and `max`.
+     *
+     * The fallback of the `empty` slot.
+     */
+    emptyText: string;
+    /**
+     * Help under the times, such as the hours a shop is open, read by screen
+     * readers as the list's description. A message in `feedback` replaces it.
+     *
+     * The fallback of the `hint` slot.
+     */
+    hint: string;
     /**
      * The clock the times are written on: `h12` for twelve hours with a
      * meridiem, `h23` for twenty-four.
@@ -134,7 +174,8 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     /**
      * 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.
+     * An `aria-label` or `aria-labelledby` on the host names the list instead,
+     * and so does a label slotted into `label`, which is also drawn above it.
      */
     label: string;
     /**
@@ -473,6 +514,26 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * aria-label="Slot">` was a listbox named "Time".
      */
     private get listName();
+    /** Whether a hint is slotted, which draws the `hint` part around it. */
+    private hintSlotted;
+    /** Whether the hint shows: there is one, and no message stands in its place. */
+    private get hinted();
+    /** The ids that describe each list: the hint, or the message in its place. */
+    private get describedBy();
+    /**
+     * The hint under the times, or a bare slot while there is none to show,
+     * hidden while a message stands in its place, so a slotted hint goes too.
+     */
+    private renderHint;
+    /** Whether a label is slotted, which draws the `label` part around it. */
+    private labelSlotted;
+    /** Reads the `label` slot, and the list's name again with it. */
+    private readonly handleLabelSlot;
+    /**
+     * The slotted label, in the `label` part, above the times. A bare slot while
+     * nothing is slotted, which draws no box.
+     */
+    private renderSlottedLabel;
     /**
      * Hears the host's `aria-label` and `aria-labelledby` change, which no
      * property reports. Made on connection, there being no `MutationObserver` on
@@ -482,6 +543,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * Moves focus to the list, or to the first wheel.

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

@@ -4,9 +4,9 @@ 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 { clockLocale, commaList, customElement, dayPeriod, formatWords, HelixFormElement, hostWords, inlineStep, isTwelveHour, MixinControllerValue, MixinPickerFeedback, nearestTime, offeredTimes, reportValues, secondsAsValue, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
+import { auditName, clockLocale, commaList, customElement, dayPeriod, formatWords, HelixFormElement, hostWords, inlineStep, isTwelveHour, MixinControllerValue, MixinPickerFeedback, nearestTime, offeredTimes, reportValues, secondsAsValue, slotFilled, slottedWords, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { wheelName } from '../wheel-name.js';
 import '../../listbox/index.js';
@@ -16,6 +16,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         super(...arguments);
         this.badInputMessage = '{mode, select, single {Enter a time as {shape}.} other {Enter times as {shape}, separated by commas.}}';
         this.disableTimes = '';
+        this.emptyText = 'No times to choose from';
+        this.hint = '';
         this.label = 'Time';
         this.locale = '';
         this.manual = false;
@@ -83,6 +85,12 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.unavailableMessage = 'Choose a time that is available.';
         this.valueMissingMessage = 'Choose a time.';
         this.listRevealed = false;
+        this.hintSlotted = false;
+        this.labelSlotted = false;
+        this.handleLabelSlot = (event) => {
+            this.labelSlotted = slotFilled(event.target);
+            this.requestUpdate();
+        };
         this.naming = undefined;
         this.handleColumnsKeydown = (event) => {
             const step = inlineStep(this, event.key);
@@ -247,7 +255,27 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.reveal();
     }
     get listName() {
-        return hostWords(this, this.label);
+        const slotted = this.labelSlotted ? slottedWords(this, ['label']) : '';
+        return hostWords(this, slotted || this.label);
+    }
+    get hinted() {
+        return (this.hint !== '' || this.hintSlotted) && this.feedback === '';
+    }
+    get describedBy() {
+        return this.feedback !== '' ? 'feedback' : this.hinted ? 'hint' : nothing;
+    }
+    renderHint() {
+        const read = (event) => {
+            this.hintSlotted = slotFilled(event.target);
+        };
+        return this.hinted
+            ? html `<p part="hint" id="hint"><slot name="hint" @slotchange=${read}>${this.hint}</slot></p>`
+            : html `<slot name="hint" ?hidden=${this.feedback !== ''} @slotchange=${read}></slot>`;
+    }
+    renderSlottedLabel() {
+        return this.labelSlotted
+            ? html `<div part="label"><slot name="label" @slotchange=${this.handleLabelSlot}></slot></div>`
+            : html `<slot name="label" @slotchange=${this.handleLabelSlot}></slot>`;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -264,6 +292,14 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         this.report();
         this.toggleState('blank', this.value === '');
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        auditName(this, () => null, 'Give it a `label`, a label in the `label` slot, or an `aria-label` that says what the time is for.', () => this.listName !== '');
+        const list = this.partNamed('list');
+        if (list) {
+            auditName(list, () => null, '', () => true);
+        }
+    }
     updated(changed) {
         super.updated(changed);
         this.reportRequired();
@@ -284,7 +320,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
         return html `<${this.tag('listbox')}
       part="column"
       data-column=${part}
-      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+      aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: column-empty, error: column-error, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
@@ -336,7 +372,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     renderList() {
         return html `<${this.tag('listbox')}
       part="list"
-      aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
+      aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
       exportparts="empty: list-empty, error: list-error, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
@@ -344,6 +380,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       aria-label=${this.listName}
       data-unset=${this.value === '' ? '' : nothing}
       ?disabled=${this.isDisabled}
+      empty-text=${this.emptyText}
       ?manual=${this.manual}
       ?multiple=${this.mode !== undefined}
       .value=${this.value}
@@ -365,13 +402,14 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
           >${writeClock(at, this.clock, this.seconds)}</${this.tag('option')}
         >`;
         })}
+      <slot name="empty" slot="empty">${this.emptyText}</slot>
     </${this.tag('listbox')}>`;
     }
     render() {
         if (this.variant === 'wheels' && this.mode === undefined) {
-            return html `${this.renderSpinner()}${this.renderPickerFeedback()}`;
+            return html `${this.renderSlottedLabel()}${this.renderSpinner()}${this.renderHint()}${this.renderPickerFeedback()}`;
         }
-        return html `${this.renderList()}${this.renderPickerFeedback()}`;
+        return html `${this.renderSlottedLabel()}${this.renderList()}${this.renderHint()}${this.renderPickerFeedback()}`;
     }
     get valueAsDate() {
         const at = valueAsSeconds(this.value);
@@ -397,6 +435,13 @@ __decorate([
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
+__decorate([
+    words,
+    property({ attribute: 'empty-text' })
+], HelixHeadlessTimePicker.prototype, "emptyText", void 0);
+__decorate([
+    property()
+], HelixHeadlessTimePicker.prototype, "hint", void 0);
 __decorate([
     property({ attribute: 'hour-cycle' })
 ], HelixHeadlessTimePicker.prototype, "hourCycle", void 0);
@@ -466,6 +511,12 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimePicker.prototype, "variant", void 0);
+__decorate([
+    state()
+], HelixHeadlessTimePicker.prototype, "hintSlotted", void 0);
+__decorate([
+    state()
+], HelixHeadlessTimePicker.prototype, "labelSlotted", void 0);
 HelixHeadlessTimePicker = __decorate([
     customElement('helix-headless-time-picker')
 ], HelixHeadlessTimePicker);

package/dist/timeline/item/timeline-item.d.ts

@@ -8,6 +8,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * machine-readable value such as "2026-08-19" travels with a label such as
  * "yesterday". Without `datetime`, the label is a `<span>`.
  *
+ * **`relative` writes the time for you** as how long ago it was, such as "3
+ * hours ago", from `datetime`, where the `time` slot is empty. The words move
+ * on as they go stale, "3 hours ago" becoming "4 hours ago", with one wakeup
+ * shared by every reading on the page, as `FormatDate` keeps its own. They are
+ * in the language of the page, or of the nearest `lang`.
+ *
  * Each entry draws the connector line that arrives at it and hides it when it
  * is the first entry, using `:host(:first-child)`. This needs no index, no
  * counting parent, and no script. `Steps` and `Breadcrumbs` work the same way.
@@ -44,6 +50,25 @@ export declare class HelixHeadlessTimelineItem extends HelixElement {
      * know what instant it names.
      */
     datetime: string;
+    /**
+     * Writes the time as how long ago it was, or how long until it, from
+     * `datetime`, where the `time` slot is empty: `long` ("3 hours ago"),
+     * `short` ("3 hr. ago") or `narrow` ("3h ago"). Set with no value, it is
+     * `long`. The words move on as they go stale.
+     */
+    relative?: 'long' | 'narrow' | 'short';
+    /** The time the reading is drawn against, moved on when the words go stale. */
+    private readonly clock;
+    /**
+     * What the `time` slot shows where nothing is slotted: the reading under
+     * `relative`, read against the clock before each render, and nothing
+     * otherwise.
+     */
+    private reading;
+    /** The instant `datetime` names, where `relative` asks for a reading of it. */
+    private get moment();
+    /** What the reading says at `now`, and when it stops being true. */
+    private readingAt;
     /**
      * The kind of event. It sets the color of the mark and nothing else.
      */

package/dist/timeline/item/timeline-item.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, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, RelativeClockController, relativeTime, wordsLocale, } from '@fusion.dev/helix-core';
 import { circle, record } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -13,9 +13,31 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
     constructor() {
         super(...arguments);
         this.datetime = '';
+        this.clock = new RelativeClockController(this, {
+            expires: (now) => {
+                const moment = this.moment;
+                return moment ? this.readingAt(moment, now).next : undefined;
+            },
+        });
+        this.reading = '';
+    }
+    get moment() {
+        if (this.relative === undefined || this.datetime === '') {
+            return undefined;
+        }
+        const parsed = new Date(this.datetime);
+        return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+    }
+    readingAt(moment, now) {
+        return relativeTime(wordsLocale(this), { style: this.relative || 'long' })(moment, now);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        if (['datetime', 'relative'].some((key) => changed.has(key))) {
+            this.clock.tick();
+        }
+        const moment = this.moment;
+        this.reading = moment ? this.readingAt(moment, new Date(this.clock.now)).text : '';
         hostAria(this.internals, { role: 'listitem' });
     }
     renderMarker() {
@@ -29,7 +51,7 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
     >`;
     }
     render() {
-        const when = html `<slot name="time"></slot>`;
+        const when = html `<slot name="time">${this.reading}</slot>`;
         return html `<div part="rail">
         ${this.renderMarker()}
       </div>
@@ -46,6 +68,9 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
 __decorate([
     property()
 ], HelixHeadlessTimelineItem.prototype, "datetime", void 0);
+__decorate([
+    property()
+], HelixHeadlessTimelineItem.prototype, "relative", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTimelineItem.prototype, "tone", void 0);

package/dist/toast/item/toast-item.d.ts

@@ -25,6 +25,9 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  * control. While it moves, the distance is on the `item` part as
  * `--toast-swipe-x`.
  *
+ * **Escape dismisses the message holding focus**, through the same
+ * `helix-dismiss`, and focus moves to the next message.
+ *
  * **Messages are inverted by default.** The item flips `color-scheme`, so a new
  * message stands out from the page without using a color that carries meaning.
  *
@@ -57,6 +60,10 @@ declare const HelixHeadlessToastItem_base: (new (...args: any[]) => import("@fus
  *
  * @cssproperty --toast-duration - How long this message stays, in milliseconds, for a progress hint.
  * @cssproperty --toast-swipe-x - How far a swipe has moved the message across, in pixels, toward the right.
+ *
+ * @cssstate closed - The message has been dismissed and is hidden, or leaving.
+ * @cssstate paused - The dismiss timer is paused, while a pointer or focus is on the message, or while the page is hidden.
+ * @cssstate waiting - The region holds the message back, past its `max-visible`, until a message before it goes.
  */
 export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base {
     /**
@@ -110,6 +117,18 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
      * A subset of the tone axis: a toast reports a status and never a brand role.
      */
     tone?: 'danger' | 'info' | 'success' | 'warning';
+    /**
+     * Whether the region holds the message back, because more messages are
+     * showing than its `max-visible`. The region sets it. A waiting message is
+     * hidden, its timer has not started, and it is said once it shows.
+     */
+    waiting: boolean;
+    /** Whether the dismiss timer has started, which it does once the message first shows. */
+    private started;
+    /** Whether the timer is held for `waiting`, so the hold is let go once. */
+    private holding;
+    /** Starts the timer when the message first shows, and holds it while it waits again. */
+    private wait;
     /** Whether it is showing, whoever said so, and `undefined` until somebody has. */
     private openState;
     /**
@@ -128,6 +147,13 @@ export declare class HelixHeadlessToastItem extends HelixHeadlessToastItem_base
     private readonly handlePause;
     private readonly handleResume;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Escape dismisses the message holding focus, as Radix's toast does. Taken
+     * only when the dismissal goes ahead, so a refused one leaves the key to
+     * the page.
+     */
+    private readonly handleKeydown;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** The elements assigned to one of the message's named slots. */