@fusion.dev/helix-headless 0.154.0 → 0.156.0

package/dist/tag/group/tag-group.js

@@ -11,8 +11,10 @@ import { HelixHeadlessTag } from '../root/tag-root.js';
 let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     constructor() {
         super(...arguments);
+        this.disallowEmptySelection = false;
         this.emptyLabel = 'No tags';
         this.label = '';
+        this.selectionBehavior = 'toggle';
         this.value = '';
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.reachable.map((tag) => this.navigable(tag)),
@@ -34,6 +36,13 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                 }
                 return;
             }
+            if ((event.ctrlKey || event.metaKey) && event.key === ' ') {
+                if (this.replaces && multiple) {
+                    event.preventDefault();
+                    this.press(tag, event);
+                }
+                return;
+            }
             if (event.ctrlKey || event.metaKey) {
                 return;
             }
@@ -45,6 +54,9 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                 else if (!event.shiftKey) {
                     this.anchor = to;
                     this.reached = to;
+                    if (this.replaces && to && !to.disabled) {
+                        this.ask(this.valueFor(to));
+                    }
                 }
                 return;
             }
@@ -62,7 +74,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             }
             if ((event.key === ' ' || event.key === 'Enter') && this.selectionMode) {
                 event.preventDefault();
-                this.press(tag);
+                this.press(tag, event);
             }
         };
         this.handleClick = (event) => {
@@ -72,7 +84,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                 .some((node) => node instanceof Element &&
                 /(^| )(dismiss|link)( |$)/.test(node.getAttribute('part') ?? ''));
             if (tag && !control) {
-                this.press(tag);
+                this.press(tag, event);
             }
         };
         this.handleDismiss = (event) => {
@@ -172,14 +184,33 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             .composedPath()
             .find((node) => node instanceof HelixHeadlessTag);
     }
-    press(tag) {
+    press(tag, cause) {
         const mode = this.selectionMode ?? 'none';
         if (mode === 'none' || tag.disabled) {
             return;
         }
+        if (mode === 'multiple' && cause?.shiftKey && this.anchor?.isConnected) {
+            this.extend(this.anchor, tag);
+            return;
+        }
         this.anchor = tag;
         this.reached = tag;
-        requestValue(this, pressedValue(mode, this.written, this.valueFor(tag)), (value) => {
+        const adds = cause?.ctrlKey === true || cause?.metaKey === true;
+        this.ask(this.replaces && !(adds && mode === 'multiple')
+            ? this.valueFor(tag)
+            : pressedValue(mode, this.written, this.valueFor(tag)));
+    }
+    get replaces() {
+        return this.selectionMode !== undefined && this.selectionBehavior === 'replace';
+    }
+    ask(next) {
+        if (next === this.written) {
+            return;
+        }
+        if (this.disallowEmptySelection && commaList(next).length === 0) {
+            return;
+        }
+        requestValue(this, next, (value) => {
             this.value = value;
         });
     }
@@ -199,13 +230,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         this.choose(this.tags.filter((tag) => chosen.includes(tag)));
     }
     choose(tags) {
-        const next = [...new Set(tags.map((tag) => this.valueFor(tag)))].join(', ');
-        if (next === this.written) {
-            return;
-        }
-        requestValue(this, next, (value) => {
-            this.value = value;
-        });
+        this.ask([...new Set(tags.map((tag) => this.valueFor(tag)))].join(', '));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -241,6 +266,9 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         return html `<slot @slotchange=${this.handleSlotchange}></slot>${empty}`;
     }
 };
+__decorate([
+    property({ attribute: 'disallow-empty-selection', type: Boolean })
+], HelixHeadlessTagGroup.prototype, "disallowEmptySelection", void 0);
 __decorate([
     words,
     property({ attribute: 'empty-label' })
@@ -248,6 +276,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTagGroup.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'selection-behavior' })
+], HelixHeadlessTagGroup.prototype, "selectionBehavior", void 0);
 __decorate([
     property({ attribute: 'selection-mode' })
 ], HelixHeadlessTagGroup.prototype, "selectionMode", void 0);

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/toggle/root/toggle-root.d.ts

@@ -25,6 +25,8 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
  * @documentation https://fusion.dev/helix/components/toggle
  *
  * @slot - The item's label.
+ * @slot end - Content after the label, such as a count or a shortcut.
+ * @slot start - Content before the label, such as an icon.
  *
  * @event {Event} change - Fired after a toggle button on its own is pressed or released.
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.

package/dist/toggle/root/toggle-root.js

@@ -53,7 +53,7 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
       ?disabled=${this.disabled}
       tabindex=${alone || (this.focusable ?? this.selected) || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
-    ><slot></slot></button>`;
+    ><slot name="start"></slot><slot></slot><slot name="end"></slot></button>`;
     }
 };
 __decorate([

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

@@ -146,6 +146,11 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * tree: the item being moved, or the one the drop indicator is beside.
      */
     move?: TreeItemMove | undefined;
+    /**
+     * @internal The item's place among its siblings, counting from one, written
+     * by the tree for `aria-posinset`, for the reason `level` gives.
+     */
+    position?: number | undefined;
     /**
      * The link's `rel` value, which describes how the linked page relates to this
      * one.
@@ -168,6 +173,11 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * row is not part of the tree React hydrates.
      */
     selected: boolean;
+    /**
+     * @internal How many siblings the item has, itself included, written by the
+     * tree for `aria-setsize`, for the reason `level` gives.
+     */
+    setSize?: number | undefined;
     /**
      * Where the link opens. Use it for a row that leaves the site.
      */

package/dist/tree/item/tree-item.js

@@ -174,6 +174,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         const linked = this.href !== '';
         const level = this.level ?? 1;
         const depth = this.level ?? nothing;
+        const position = this.position ?? nothing;
+        const size = this.setSize ?? nothing;
         const expanded = this.isBranch ? (this.open ? 'true' : 'false') : nothing;
         const chosen = this.checkable ? undefined : this.selected ? 'true' : 'false';
         const checked = this.checkable
@@ -193,6 +195,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         aria-disabled=${linked ? nothing : off}
         aria-busy=${linked ? nothing : busy}
         aria-level=${linked ? nothing : depth}
+        aria-posinset=${linked ? nothing : position}
+        aria-setsize=${linked ? nothing : size}
         tabindex=${linked ? nothing : tabIndex}
       >
         ${linked
@@ -208,6 +212,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
                 aria-disabled=${off}
                 aria-busy=${busy}
                 aria-level=${depth}
+                aria-posinset=${position}
+                aria-setsize=${size}
                 tabindex=${tabIndex}
                 style="--tree-level: ${level}"
                 @click=${this.handleRowClick}
@@ -255,12 +261,18 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTreeItem.prototype, "move", void 0);
+__decorate([
+    property({ attribute: false, type: Number })
+], HelixHeadlessTreeItem.prototype, "position", void 0);
 __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "rel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTreeItem.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false, type: Number })
+], HelixHeadlessTreeItem.prototype, "setSize", void 0);
 __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "target", void 0);