@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

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

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

@@ -4,17 +4,12 @@ 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 { valueAsTime as asTime, customElement, elementById, fillTemplate, timeAsValue as fromTime, HelixFormElement, MixinControllerValue, minutesAsValue, reportValues, valueAsMinutes, writeTime, writtenList, } from '@fusion.dev/helix-core';
+import { clockLocale, commaList, customElement, dayPeriod, elementById, fillTemplate, HelixFormElement, inlineStep, isTwelveHour, MixinControllerValue, nearestTime, offeredTimes, reportValues, secondsAsValue, timeBarred, timeFault, valueAsSeconds, wheelParts, wholeHour, writeClock, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
-const isTwelveHour = (locale) => new Intl.DateTimeFormat(locale || undefined, { timeStyle: 'short' }).resolvedOptions().hour12 ===
-    true;
-const dayPeriod = (half, locale) => new Intl.DateTimeFormat(locale || undefined, { hour: 'numeric', hour12: true, timeZone: 'UTC' })
-    .formatToParts(new Date(Date.UTC(1970, 0, 1, half === 'AM' ? 9 : 21)))
-    .find((part) => part.type === 'dayPeriod')?.value ?? half;
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControllerValue(HelixFormElement) {
     constructor() {
         super(...arguments);
@@ -60,69 +55,78 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             if (this.isDisabled) {
                 return;
             }
-            const { hour, meridiem, minute } = this.parts;
-            let next = hour * 60 + minute;
+            const { hour, meridiem, minute, second } = this.parts;
+            let [h, m, sec] = [hour, minute, second];
             if (part === 'minute') {
-                next = hour * 60 + Number(to);
+                m = Number(to);
+            }
+            else if (part === 'second') {
+                sec = Number(to);
             }
             else if (part === 'hour') {
-                const shown = Number(to);
-                const whole = isTwelveHour(this.locale) ? (shown % 12) + (meridiem === 'PM' ? 12 : 0) : shown;
-                next = whole * 60 + minute;
+                h = wholeHour(Number(to), isTwelveHour(this.clock) ? meridiem : undefined);
             }
             else {
-                const half = hour % 12;
-                next = (half + (to === 'PM' ? 12 : 0)) * 60 + minute;
+                h = (hour % 12) + (to === 'PM' ? 12 : 0);
             }
-            const whole = minutesAsValue(this.nearest(next));
-            if (this.barred(whole)) {
+            const nearest = this.nearest(h * 3600 + m * 60 + sec);
+            if (this.barredAt(nearest)) {
                 return;
             }
-            this.requestValue(whole);
+            this.requestValue(this.valueFor(nearest));
         };
         this.readOnly = false;
         this.required = false;
+        this.secondLabel = 'Second';
+        this.seconds = false;
         this.step = 15;
         this.listRevealed = false;
         this.naming = undefined;
+        this.handleColumnsKeydown = (event) => {
+            const step = inlineStep(this, event.key);
+            if (step === 0 || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            const columns = [...(this.renderRoot?.querySelectorAll('[part="column"]') ?? [])];
+            const at = columns.findIndex((column) => event.composedPath().includes(column));
+            const next = columns[at + step];
+            if (at < 0 || !next) {
+                return;
+            }
+            event.preventDefault();
+            next.focus();
+        };
     }
     get times() {
-        const from = valueAsMinutes(this.min) ?? 0;
-        const to = valueAsMinutes(this.max) ?? 1439;
-        const step = Math.max(1, Math.round(this.step));
-        const found = [];
-        for (let at = from; at <= to; at += step) {
-            found.push(at);
-        }
-        return found;
+        return offeredTimes(this.min, this.max, this.step, this.seconds);
+    }
+    get clock() {
+        return clockLocale(this.locale, this.hourCycle);
+    }
+    valueFor(at) {
+        return secondsAsValue(at, this.seconds);
     }
     barred(at) {
-        return writtenList(this.disableTimes).includes(at);
-    }
-    nearest(minutes) {
-        const times = this.times;
-        let best = times[0] ?? minutes;
-        for (const at of times) {
-            if (Math.abs(at - minutes) < Math.abs(best - minutes)) {
-                best = at;
-            }
-        }
-        return best;
+        const seconds = valueAsSeconds(at);
+        return seconds !== null && this.barredAt(seconds);
+    }
+    barredAt(at) {
+        return timeBarred(at, this.disableTimes);
+    }
+    nearest(at) {
+        return nearestTime(this.times, at);
     }
     wholeHourBarred(shown, half) {
-        const whole = half === undefined ? shown : (shown % 12) + (half === 'PM' ? 12 : 0);
-        const within = this.times.filter((at) => Math.floor(at / 60) === whole);
-        return within.length > 0 && within.every((at) => this.barred(minutesAsValue(at)));
+        const whole = wholeHour(shown, half);
+        const within = this.times.filter((at) => Math.floor(at / 3600) === whole);
+        return within.length > 0 && within.every((at) => this.barredAt(at));
     }
     halfBarred(half) {
-        const within = this.times.filter((at) => (half === 'PM') === at >= 720);
-        return within.length > 0 && within.every((at) => this.barred(minutesAsValue(at)));
+        const within = this.times.filter((at) => (half === 'PM') === at >= 43_200);
+        return within.length > 0 && within.every((at) => this.barredAt(at));
     }
     get held() {
-        return this.value
-            .split(',')
-            .map((one) => one.trim())
-            .filter(Boolean);
+        return commaList(this.value);
     }
     between(at) {
         if (this.mode !== 'range') {
@@ -132,17 +136,25 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return from !== undefined && to !== undefined && at > from && at < to;
     }
     get parts() {
-        const at = valueAsMinutes(this.value) ?? valueAsMinutes(this.min) ?? 0;
-        const hour = Math.floor(at / 60);
-        return { hour, meridiem: hour < 12 ? 'AM' : 'PM', minute: at % 60 };
+        const at = valueAsSeconds(this.value) ?? valueAsSeconds(this.min) ?? 0;
+        return wheelParts(at, isTwelveHour(this.clock));
     }
     get hours() {
-        const found = new Set(this.times.map((at) => Math.floor(at / 60)));
+        const found = new Set(this.times.map((at) => Math.floor(at / 3600)));
         return [...found];
     }
     get minutes() {
         const hour = this.parts.hour;
-        return this.times.filter((at) => Math.floor(at / 60) === hour).map((at) => at % 60);
+        const found = new Set(this.times
+            .filter((at) => Math.floor(at / 3600) === hour)
+            .map((at) => Math.floor(at / 60) % 60));
+        return [...found];
+    }
+    get secondsShown() {
+        const { hour, minute } = this.parts;
+        return this.times
+            .filter((at) => Math.floor(at / 60) === hour * 60 + minute)
+            .map((at) => at % 60);
     }
     reveal() {
         if (this.mode !== undefined) {
@@ -163,32 +175,33 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return super.requestValue(next);
     }
     fault(at) {
-        const minutes = valueAsMinutes(at) ?? 0;
-        const floor = valueAsMinutes(this.min) ?? 0;
-        const ceiling = valueAsMinutes(this.max) ?? 1439;
-        if (minutes < floor) {
-            return [
-                'rangeUnderflow',
-                fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
-                    min: writeTime(this.min, this.locale),
-                }),
-            ];
-        }
-        if (minutes > ceiling) {
-            return [
-                'rangeOverflow',
-                fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
-                    max: writeTime(this.max, this.locale),
-                }),
-            ];
-        }
-        if (this.barred(at)) {
-            return ['badInput', this.unavailableMessage || 'Choose a time that is available.'];
-        }
-        if (!this.times.includes(minutes)) {
-            return ['stepMismatch', this.stepMismatchMessage || 'Choose one of the times on offer.'];
+        switch (timeFault(at, {
+            disableTimes: this.disableTimes,
+            max: this.max,
+            min: this.min,
+            offered: this.times,
+        })) {
+            case 'rangeUnderflow':
+                return [
+                    'rangeUnderflow',
+                    fillTemplate(this.rangeUnderflowMessage || 'Choose a time at or after {min}.', {
+                        min: writeClock(this.min, this.clock, this.seconds),
+                    }),
+                ];
+            case 'rangeOverflow':
+                return [
+                    'rangeOverflow',
+                    fillTemplate(this.rangeOverflowMessage || 'Choose a time at or before {max}.', {
+                        max: writeClock(this.max, this.clock, this.seconds),
+                    }),
+                ];
+            case 'unavailable':
+                return ['badInput', this.unavailableMessage || 'Choose a time that is available.'];
+            case 'stepMismatch':
+                return ['stepMismatch', this.stepMismatchMessage || 'Choose one of the times on offer.'];
+            default:
+                return undefined;
         }
-        return undefined;
     }
     reportRequired() {
         const anchor = this.partNamed('list') ?? undefined;
@@ -197,11 +210,12 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             return;
         }
         const held = this.held;
-        if (held.length > 0 && held.some((one) => asTime(one) === null)) {
+        if (held.length > 0 && held.some((one) => valueAsSeconds(one) === null)) {
+            const shape = this.seconds ? 'HH:mm:ss' : 'HH:mm';
             this.internals.setValidity({ badInput: true }, this.badInputMessage ||
                 (this.mode === undefined
-                    ? 'Enter a time as HH:mm.'
-                    : 'Enter times as HH:mm, separated by commas.'), anchor);
+                    ? `Enter a time as ${shape}.`
+                    : `Enter times as ${shape}, separated by commas.`), anchor);
             return;
         }
         for (const one of held) {
@@ -297,9 +311,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
     </${this.tag('listbox')}>`;
     }
     renderSpinner() {
-        const twelve = isTwelveHour(this.locale);
-        const { hour, meridiem, minute } = this.parts;
-        const shownHour = twelve ? String(hour % 12 === 0 ? 12 : hour % 12) : String(hour);
+        const twelve = isTwelveHour(this.clock);
+        const { hour, meridiem, minute, second, shown } = this.parts;
         const hours = twelve
             ? [...new Set(this.hours.map((one) => (one % 12 === 0 ? 12 : one % 12)))].sort((a, b) => a - b)
             : this.hours;
@@ -308,11 +321,15 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       role="group"
       aria-label=${this.listName}
       data-unset=${this.value === '' ? '' : nothing}
+      @keydown=${this.handleColumnsKeydown}
     >
-      ${this.renderColumn('hour', this.hourLabel, hours.map(String), (one) => (twelve ? one : one.padStart(2, '0')), shownHour, (one) => this.wholeHourBarred(Number(one), twelve ? meridiem : undefined))}
-      ${this.renderColumn('minute', this.minuteLabel, this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barred(minutesAsValue(hour * 60 + Number(one))))}
+      ${this.renderColumn('hour', this.hourLabel, hours.map(String), (one) => (twelve ? one : one.padStart(2, '0')), String(shown), (one) => this.wholeHourBarred(Number(one), twelve ? meridiem : undefined))}
+      ${this.renderColumn('minute', this.minuteLabel, this.minutes.map(String), (one) => one.padStart(2, '0'), String(minute), (one) => this.barredAt(hour * 3600 + Number(one) * 60))}
+      ${this.seconds
+            ? this.renderColumn('second', this.secondLabel, this.secondsShown.map(String), (one) => one.padStart(2, '0'), String(second), (one) => this.barredAt(hour * 3600 + minute * 60 + Number(one)))
+            : nothing}
       ${twelve
-            ? this.renderColumn('meridiem', this.meridiemLabel, ['AM', 'PM'], (one) => dayPeriod(one, this.locale), meridiem, (one) => this.halfBarred(one))
+            ? this.renderColumn('meridiem', this.meridiemLabel, ['AM', 'PM'], (one) => dayPeriod(one, this.clock), meridiem, (one) => this.halfBarred(one))
             : nothing}
     </div>`;
     }
@@ -332,8 +349,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       @helix-before-change=${this.handleChange}
       @input=${this.handleListInput}
     >
-      ${this.times.map((minutes) => {
-            const at = minutesAsValue(minutes);
+      ${this.times.map((seconds) => {
+            const at = this.valueFor(seconds);
             const between = this.between(at);
             return html `<${this.tag('option')}
           part="option${between ? ' option-between' : ''}"
@@ -344,7 +361,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
           ?disabled=${this.barred(at)}
           ?selected=${this.held.includes(at)}
           data-between=${between ? '' : nothing}
-          >${writeTime(at, this.locale)}</${this.tag('option')}
+          >${writeClock(at, this.clock, this.seconds)}</${this.tag('option')}
         >`;
         })}
     </${this.tag('listbox')}>`;
@@ -356,16 +373,20 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         return html `${this.renderList()}`;
     }
     get valueAsDate() {
-        return asTime(this.value);
+        const at = valueAsSeconds(this.value);
+        return at === null ? null : new Date(at * 1000);
     }
     set valueAsDate(date) {
-        this.value = fromTime(date);
+        this.valueAsNumber = date ? date.getTime() : Number.NaN;
     }
     get valueAsNumber() {
-        return asTime(this.value)?.getTime() ?? Number.NaN;
+        const at = valueAsSeconds(this.value);
+        return at === null ? Number.NaN : at * 1000;
     }
     set valueAsNumber(ms) {
-        this.value = Number.isNaN(ms) ? '' : fromTime(new Date(ms));
+        this.value = Number.isNaN(ms)
+            ? ''
+            : this.valueFor(Math.floor((((ms % 86_400_000) + 86_400_000) % 86_400_000) / 1000));
     }
 };
 __decorate([
@@ -374,6 +395,9 @@ __decorate([
 __decorate([
     property({ attribute: 'disable-times' })
 ], HelixHeadlessTimePicker.prototype, "disableTimes", void 0);
+__decorate([
+    property({ attribute: 'hour-cycle' })
+], HelixHeadlessTimePicker.prototype, "hourCycle", void 0);
 __decorate([
     property({ attribute: 'hour-label' })
 ], HelixHeadlessTimePicker.prototype, "hourLabel", void 0);
@@ -416,6 +440,12 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTimePicker.prototype, "required", void 0);
+__decorate([
+    property({ attribute: 'second-label' })
+], HelixHeadlessTimePicker.prototype, "secondLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTimePicker.prototype, "seconds", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTimePicker.prototype, "step", void 0);

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

@@ -0,0 +1,46 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary A run of timeline entries under a heading, such as a day.
+ *
+ * @description
+ * Groups entries by date, such as "Today" and "Yesterday", in a timeline that
+ * holds many. The group is an entry of the timeline, and its entries are a
+ * list of their own, named by the heading. A screen reader lists the heading
+ * with the page's headings and hears how many entries each day holds.
+ *
+ * The heading's level is `heading-level`, and 3 where it is not set.
+ *
+ * Each group draws its own line, so the line stops at the last entry of one
+ * day and starts again at the first entry of the next.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Day, Section, Date group
+ * @documentation https://fusion.dev/helix/components/timeline
+ *
+ * @slot - The entries.
+ * @slot heading - The heading, when it is more than text. Falls back to `label`.
+ *
+ * @csspart entries - The list that holds the entries.
+ * @csspart heading - The heading.
+ */
+export declare class HelixHeadlessTimelineGroup extends HelixElement {
+    /**
+     * The level of the group's heading, from 1 to 6.
+     */
+    headingLevel?: number;
+    /**
+     * The heading, when it is plain text, such as "Today".
+     *
+     * The fallback of the `heading` slot, so slotted content replaces it.
+     */
+    label: string;
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-timeline-group': HelixHeadlessTimelineGroup;
+    }
+}

package/dist/timeline/group/timeline-group.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { html } from 'lit';
+import { property } from 'lit/decorators.js';
+const HEADING_ID = 'heading';
+let HelixHeadlessTimelineGroup = class HelixHeadlessTimelineGroup extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { role: 'listitem' });
+    }
+    render() {
+        const level = Math.min(6, Math.max(1, Math.trunc(this.headingLevel ?? 3)));
+        return html `<div part="heading" id=${HEADING_ID} role="heading" aria-level=${level}>
+        <slot name="heading">${this.label}</slot>
+      </div>
+      <div part="entries" role="list" aria-labelledby=${HEADING_ID}><slot></slot></div>`;
+    }
+};
+__decorate([
+    property({ attribute: 'heading-level', type: Number })
+], HelixHeadlessTimelineGroup.prototype, "headingLevel", void 0);
+__decorate([
+    property()
+], HelixHeadlessTimelineGroup.prototype, "label", void 0);
+HelixHeadlessTimelineGroup = __decorate([
+    customElement('helix-headless-timeline-group')
+], HelixHeadlessTimelineGroup);
+export { HelixHeadlessTimelineGroup };

package/dist/timeline/index.d.ts

@@ -1,2 +1,3 @@
+export * from './group/timeline-group.js';
 export * from './item/timeline-item.js';
 export * from './root/timeline-root.js';

package/dist/timeline/index.js

@@ -1,2 +1,3 @@
+export * from './group/timeline-group.js';
 export * from './item/timeline-item.js';
 export * from './root/timeline-root.js';

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

@@ -16,8 +16,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The host has `role="list"`, because the entries are your elements in the
  * light DOM. `Steps` does the same.
  *
- * A timeline runs down the page and has no horizontal layout. For stages laid
- * out horizontally, use `Steps`, which is horizontal by default.
+ * **Group entries by date with `Timeline.Group`**, which puts a heading such as
+ * "Today" over its entries. The group is an entry of the timeline, and its
+ * entries are a list of their own named by the heading.
+ *
+ * **The reading order is the order you write the entries in**, in every layout
+ * the styled tier draws: down the page, either side of a line down the middle,
+ * or across the page. Inside each entry the time is read before what happened.
+ * Write the entries in the order the events happened, oldest or newest first,
+ * and the layout only moves where they are drawn.
  *
  * @since 0.1.0
  * @status stable
@@ -25,7 +32,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Activity feed, History, Changelog, Audit trail
  * @documentation https://fusion.dev/helix/components/timeline
  *
- * @slot - The entries.
+ * @slot - The entries, and any groups of them.
  */
 export declare class HelixHeadlessTimeline extends HelixElement {
     /**

package/dist/toast/hotkey.d.ts

@@ -0,0 +1,22 @@
+import { type ChordPress } from '@fusion.dev/helix-core';
+/** A key and the modifiers held with it. */
+export interface Chord {
+    alt: boolean;
+    ctrl: boolean;
+    key: string;
+    meta: boolean;
+    shift: boolean;
+}
+/** What a key press carries that a chord is compared against. */
+export type Pressed = ChordPress;
+/**
+ * Reads a chord written as keys joined by `+`, such as `F8` or `Alt+T`, case
+ * aside. The last part is the key. Empty, or a chord with no key, is none.
+ *
+ * Split as core's `chordParts` splits every chord, and read more strictly than
+ * Kbd reads one: four modifiers by their own names, no `mod`, and Shift held
+ * exactly as written, so the key that moves to the stack is the one written.
+ */
+export declare const parseHotkey: (text: string) => Chord | null;
+/** Whether a press is the chord: the same key, case aside, and exactly its modifiers. */
+export declare const matchesHotkey: (pressed: Pressed, chord: Chord | null) => boolean;

package/dist/toast/hotkey.js

@@ -0,0 +1,23 @@
+import { chordParts } from '@fusion.dev/helix-core';
+const MODIFIERS = new Set(['alt', 'ctrl', 'meta', 'shift']);
+export const parseHotkey = (text) => {
+    const parts = chordParts(text);
+    const key = parts.pop();
+    if (!key || MODIFIERS.has(key.toLowerCase())) {
+        return null;
+    }
+    const held = new Set(parts.map((one) => one.toLowerCase()));
+    return {
+        alt: held.has('alt'),
+        ctrl: held.has('ctrl'),
+        key,
+        meta: held.has('meta'),
+        shift: held.has('shift'),
+    };
+};
+export const matchesHotkey = (pressed, chord) => chord !== null &&
+    pressed.key.toLowerCase() === chord.key.toLowerCase() &&
+    pressed.altKey === chord.alt &&
+    pressed.ctrlKey === chord.ctrl &&
+    pressed.metaKey === chord.meta &&
+    pressed.shiftKey === chord.shift;