@fusion.dev/helix-headless 0.145.0 → 0.147.0

package/dist/filter-input/chip/filter-chip.d.ts

@@ -27,6 +27,15 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  * dismissal, which is also how you take control of the interaction for one
  * press. `requestChange` documents the pattern.
  *
+ * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
+ * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
+ * field asks to remove the last chip.
+ *
+ * The remove button is named `dismiss-label` followed by the chip's words,
+ * such as "Remove filter Status is not open", so a row of chips says which
+ * filter each button removes. Write `{label}` in `dismiss-label` to put the
+ * words elsewhere.
+ *
  * To let the user change the operator, slot a menu trigger into `operator`.
  * With the text fallback, the operator is a label. The chip does not interpret
  * operators: their meaning belongs to your domain, as `FilterOperator`
@@ -100,6 +109,20 @@ export declare class HelixHeadlessFilterChip extends HelixHeadlessFilterChip_bas
      * makes an unusual filter look unusual.
      */
     operatorLabel: string;
+    /**
+     * The remove button's name: `dismissLabel` with the chip's words, its field,
+     * its comparison and its values, such as "Remove filter Status is not open".
+     *
+     * **Named for its chip**, as File Input names each remove button for its
+     * file: a row of buttons each called "Remove filter" says nothing about
+     * which filter each one takes away. `{label}` in `dismiss-label` says where
+     * the words go, and without it they follow the label.
+     *
+     * Each word is read from what is slotted and otherwise from `label` and
+     * `operator-label`, which is all a server and a hydrating render can read,
+     * so the values join the update after.
+     */
+    private get removeName();
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

package/dist/filter-input/chip/filter-chip.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, MixinDismissible } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinDismissible, slottedWords } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -16,8 +16,17 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
         this.label = '';
         this.operatorLabel = '';
     }
+    get removeName() {
+        const read = (slot, fallback) => (this.childrenKnown && slottedWords(this, [slot])) || fallback;
+        const words = [read('field', this.label), read('operator', this.operatorLabel), read('', '')]
+            .filter(Boolean)
+            .join(' ');
+        const label = this.dismissLabel;
+        return label.includes('{label}') ? label.replace('{label}', words) : `${label} ${words}`.trim();
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', () => this.requestUpdate());
         this.finishHydration();
     }
     render() {
@@ -33,7 +42,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
             ? html `<button
               part="dismiss"
               type="button"
-              aria-label=${this.dismissLabel}
+              aria-label=${this.removeName}
               @click=${() => this.dismiss()}
             >
               <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">

package/dist/filter-input/menu/filter-menu.d.ts

@@ -71,6 +71,8 @@ import '../../menu/index.js';
  * @csspart entry-mark - The mark at the end of a row: a check mark on a chosen value, and a caret on a field.
  * @csspart entry-shortcut - The key drawn for a row's shortcut. The filter menu sets none, so it renders only where a subclass does.
  * @csspart entry-shortcut-kbd - The key inside it.
+ * @csspart entry-shortcut-key - One key of the shortcut's chord.
+ * @csspart entry-shortcut-separator - The `+` between two keys of the shortcut, where the platform writes one.
  * @csspart entry-start - The leading column.
  * @csspart menu - The menu the fields are offered in.
  * @csspart menu-back - The button that goes back from a field's page.

package/dist/filter-input/menu/filter-menu.js

@@ -138,7 +138,9 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
             return html `<${item}
           part="entry"
           exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-            shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
           data-facet="field"
           data-field=${name}
         >
@@ -147,7 +149,9 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                 ? html `<${item}
                   part="entry"
                   exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-            shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
                   slot="submenu"
                   data-facet="comparison"
                   data-field=${name}
@@ -156,7 +160,9 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                   ${operators.map((operator) => html `<${item}
                       part="entry"
                       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-            shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
                       slot="submenu"
                       checkable
                       exclusive
@@ -179,7 +185,9 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
           ${offered.map((option) => html `<${item}
               part="entry"
               exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-            shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
               slot="submenu"
               checkable
               ?exclusive=${using?.arity === 'one'}

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

@@ -13,12 +13,36 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * its tokens show a selection it owns, drawn from the options it was given.
  *
  * `value` is the typed text. Every keystroke fires `input` with the text on the
- * element, so a table can narrow as the user types. A form receives the text
- * under `name`, and then one more entry under `name` for each token: its
- * `value` attribute, or for a `FilterChip`, its field and values written
- * `field:values` as the field reads them typed. Backspace in an empty field fires
- * `helix-dismiss` on the last token, the same event its remove control fires,
- * so one handler covers the pointer and the keyboard.
+ * element, so a table can narrow as the user types. Backspace in an empty field
+ * fires `helix-dismiss` on the last token, the same event its remove control
+ * fires, so one handler covers the pointer and the keyboard.
+ *
+ * **What a form receives.** The text under `name`, and then one more entry
+ * under `name` for each token, in the order the tokens stand:
+ *
+ * | Token | Entry |
+ * |---|---|
+ * | Any element with a `value` attribute | The value as written: `saved:mine` |
+ * | `FilterChip` with `name` and values | `status:open,pending` |
+ * | The same, with `operator="none"` (what a typed `-status:` makes) | `-status:open,pending` |
+ * | The same, with any other `operator` except `any` | `created[after]:2024` |
+ * | A token with neither | Nothing |
+ *
+ * The values are the chip's text outside its `field` and `operator` slots,
+ * with the spaces around each comma removed. A server splits an entry at its
+ * first colon, reads a leading `-` as the negation, and reads a word in
+ * brackets before the colon as the comparison.
+ *
+ * **Keyboard.** Focus stays in the text. The text names the highlighted
+ * suggestion as its `aria-activedescendant`.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Enter | Presses the highlighted suggestion. With none highlighted, reads the typed filters into chips, or submits the form when there are none. |
+ * | Down, Up | Moves the highlight through the suggestions, wrapping, and opens the panel. |
+ * | Home, End | Highlights the first or the last suggestion while the panel is open. |
+ * | Escape | Closes the panel and stops there, so a dialog around the field stays open. |
+ * | Backspace | In an empty field, asks the last token to go. |
  *
  * **Typed filters.** The field parses only the fields you declare. Write
  * `FilterField` elements, usually inside the `FilterMenu` slotted into `start`,
@@ -73,6 +97,7 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @aliases SearchField, FacetInput, TokenInput
  * @documentation https://fusion.dev/helix/components/filter-input
  *
+ * @slot clear-icon - Replaces the cross on the clear button, under `clearable`.
  * @slot end - Content after the text, such as a count or a control.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the control, for content richer than the `hint` text.
@@ -232,6 +257,11 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * and one that pretends it was never there.
      */
     private get suggestions();
+    /**
+     * Every option slotted into `suggestions`, and every option one level inside
+     * a group slotted there, hidden or not.
+     */
+    private get options();
     /**
      * The direction of the selection, named as on `<input>`.
      *
@@ -413,6 +443,8 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
     private markActive;
     /** Puts the caret in the text field. */
     focus(options?: FocusOptions): void;
+    /** The cross on the clear button, behind a seam a tier can move. */
+    protected renderClearIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -162,22 +162,18 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         };
     }
     narrow() {
-        const slot = this.renderRoot?.querySelector('slot[name="suggestions"]');
         const term = this.filterSuggestions
             ? currentTerm(this.value, this.control?.selectionStart ?? this.value.length)
             : '';
-        for (const node of slot?.assignedElements({ flatten: true }) ?? []) {
-            const options = isOption(node) ? [node] : [...node.children].filter(isOption);
-            for (const option of options) {
-                const hide = !suggests(option.textContent ?? '', term);
-                if (hide && !option.hidden) {
-                    option.hidden = true;
-                    this.narrowed.add(option);
-                }
-                else if (!hide && this.narrowed.has(option)) {
-                    option.hidden = false;
-                    this.narrowed.delete(option);
-                }
+        for (const option of this.options) {
+            const hide = !suggests(option.textContent ?? '', term);
+            if (hide && !option.hidden) {
+                option.hidden = true;
+                this.narrowed.add(option);
+            }
+            else if (!hide && this.narrowed.has(option)) {
+                option.hidden = false;
+                this.narrowed.delete(option);
             }
         }
     }
@@ -220,20 +216,11 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         return this.clearable && this.value !== '' && !this.isDisabled;
     }
     get suggestions() {
+        return this.options.filter((option) => !option.disabled && !option.hidden);
+    }
+    get options() {
         const slot = this.renderRoot?.querySelector('slot[name="suggestions"]');
-        const found = [];
-        for (const node of slot?.assignedElements({ flatten: true }) ?? []) {
-            if (isOption(node)) {
-                found.push(node);
-                continue;
-            }
-            for (const child of node.children) {
-                if (isOption(child)) {
-                    found.push(child);
-                }
-            }
-        }
-        return found.filter((option) => !option.disabled && !option.hidden);
+        return (slot?.assignedElements({ flatten: true }) ?? []).flatMap((node) => isOption(node) ? [node] : [...node.children].filter(isOption));
     }
     get selectionDirection() {
         return this.control?.selectionDirection ?? 'none';
@@ -364,7 +351,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         super.updated(changed);
         this.releaseCaret?.();
         this.releaseCaret = undefined;
-        this.internals.setFormValue(this.formValue());
+        this.internals.setFormValue(this.formValue(), this.value);
         this.sayCount();
         const control = this.control;
         if (control) {
@@ -392,6 +379,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     focus(options) {
         this.control?.focus(options);
     }
+    renderClearIcon() {
+        return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
+    }
     render() {
         return html `${this.renderLabel()}
     <div part="field" @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}>
@@ -426,7 +416,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
               aria-label=${this.clearLabel}
               @click=${this.handleClear}
             >
-              ${drawIcon(x)}
+              ${this.renderClearIcon()}
             </button>`
             : nothing}
     </div>

package/dist/filter-input/suggest.d.ts

@@ -9,9 +9,34 @@
 export declare const currentTerm: (text: string, caret?: number) => string;
 /** Whether a suggestion's words hold the term, ignoring case and accents. */
 export declare const suggests: (words: string, term: string) => boolean;
+/** What a token says about the filter it shows, as `tokenEntry` reads it. */
+export interface TokenWords {
+    /** The field it filters, from its `name` attribute. */
+    readonly field: string | null;
+    /** The comparison, from its `operator` attribute. */
+    readonly operator: string | null;
+    /** The values it shows, from its text. */
+    readonly text: string;
+    /** What it sends as written, from its `value` attribute. */
+    readonly value: string | null;
+}
 /**
- * What a token sends a form: its `value` attribute, or for a token naming a
- * field, the field and the values it shows, written `field:values` the way the
- * field reads them typed. Nothing for a token that says neither.
+ * The form entry for a token's words: its `value` where it has one, or else
+ * `field:values`, the way the field reads a filter typed.
+ *
+ * - The values are the token's text, with the spaces around each comma taken
+ *   out: `status:open,pending`.
+ * - The comparison named `none`, which a typed `-field:` asks for, leads with a
+ *   `-`: `-team:ops`.
+ * - Any comparison other than `any` and `none` is written in brackets after
+ *   the field, so a chip that says `is after` keeps it: `created[after]:2024`.
+ *   `any`, or no `operator`, writes none.
+ * - A token naming no field, or showing no values, sends nothing.
+ */
+export declare const entryFor: ({ field, operator, text, value }: TokenWords) => string | null;
+/**
+ * The form entry for a slotted token. See `entryFor`. The values are the text
+ * of the token's unslotted content, so a name or a comparison slotted into a
+ * chip's `field` or `operator` is not read as a value.
  */
 export declare const tokenEntry: (token: Element) => string | null;

package/dist/filter-input/suggest.js

@@ -8,16 +8,26 @@ export const suggests = (words, term) => {
     const plain = (text) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
     return term === '' || plain(words).includes(plain(term));
 };
-export const tokenEntry = (token) => {
-    const written = token.getAttribute('value');
-    if (written !== null) {
-        return written;
+export const entryFor = ({ field, operator, text, value }) => {
+    if (value !== null) {
+        return value;
     }
-    const field = token.getAttribute('name');
-    const values = (token.textContent ?? '').replace(/\s+/gu, ' ').trim();
+    const values = text.replace(/\s+/gu, ' ').trim();
     if (!field || values === '') {
         return null;
     }
-    const negated = token.getAttribute('operator')?.startsWith('not') ? '-' : '';
-    return `${negated}${field}:${values.replace(/\s*,\s*/gu, ',')}`;
+    const shown = values.replace(/\s*,\s*/gu, ',');
+    if (operator === 'none') {
+        return `-${field}:${shown}`;
+    }
+    return operator && operator !== 'any' ? `${field}[${operator}]:${shown}` : `${field}:${shown}`;
 };
+export const tokenEntry = (token) => entryFor({
+    field: token.getAttribute('name'),
+    operator: token.getAttribute('operator'),
+    text: [...token.childNodes]
+        .filter((node) => !(node.nodeType === 1 && node.hasAttribute('slot')))
+        .map((node) => node.textContent ?? '')
+        .join(''),
+    value: token.getAttribute('value'),
+});

package/dist/format-date/options.d.ts

@@ -1,9 +1,8 @@
 /**
  * What a Format Date was asked for, in its own spelling: the `Intl` options a
- * consumer set, and whether the timestamp is a day with no time of day.
+ * consumer set. The element itself is one, so it passes itself.
  */
 export interface Asked {
-    dateOnly: boolean;
     dateStyle?: 'full' | 'long' | 'medium' | 'short' | undefined;
     day?: 'numeric' | '2-digit' | undefined;
     era?: 'long' | 'narrow' | 'short' | undefined;
@@ -26,8 +25,8 @@ export interface Asked {
  * given beside `month` or `hour`, so the fields are left out wherever a style
  * is set. `hourCycle` and `timeZone` go with either.
  *
- * **A day with no time is read in UTC** unless a zone is given. Parsed, it is
+ * **A day with no time, `dateOnly`, is read in UTC** unless a zone is given. Parsed, it is
  * midnight UTC, and read in a zone west of it that is the day before: measured
  * before this, `2026-08-04` read "August 3, 2026" in Los Angeles.
  */
-export declare const formatOptions: (asked: Asked) => Intl.DateTimeFormatOptions;
+export declare const formatOptions: (asked: Asked, dateOnly?: boolean) => Intl.DateTimeFormatOptions;

package/dist/format-date/options.js

@@ -9,7 +9,7 @@ const FIELDS = [
     'weekday',
     'year',
 ];
-export const formatOptions = (asked) => {
+export const formatOptions = (asked, dateOnly = false) => {
     const options = {};
     const styled = asked.dateStyle !== undefined || asked.timeStyle !== undefined;
     if (styled) {
@@ -35,7 +35,7 @@ export const formatOptions = (asked) => {
     if (asked.timeZone) {
         options.timeZone = asked.timeZone;
     }
-    else if (asked.dateOnly) {
+    else if (dateOnly) {
         options.timeZone = 'UTC';
     }
     return options;

package/dist/format-date/root/format-date-root.d.ts

@@ -25,6 +25,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * **The text refreshes on one timer shared by the page.** Each element
  * schedules an update for when its current reading expires, and an element
  * showing a date schedules none, so a long feed left open costs almost nothing.
+ * `frozen` draws the reading once and leaves it.
  *
  * **The output is always `<time datetime>`**, so copy and paste and scripts
  * parsing the page get the exact instant, whatever the visible text says. A
@@ -85,6 +86,19 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * How the era is written, such as AD, where a date is shown.
      */
     era?: 'long' | 'narrow' | 'short';
+    /**
+     * Draws an `elapsed` or `relative` reading once and leaves it, where it
+     * would otherwise move on as it goes stale.
+     *
+     * For a reading that describes a moment the page itself is about, such as
+     * "3 hours ago" in a report generated then, or a list a reader compares
+     * line by line while it should not change under them. The reading is taken
+     * when the element draws, and again whenever `date` or another option
+     * changes. Turned off, the reading catches up and moves on again.
+     * `sl-relative-time` and `wa-relative-time` keep still unless `sync` is
+     * set; this keeps moving unless `frozen` is.
+     */
+    frozen: boolean;
     /**
      * How the hour is written, where a time of day is shown.
      */
@@ -100,9 +114,12 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
     /**
      * The locale to format the timestamp in.
      *
-     * Empty is the runtime's own.
+     * Absent is the page's: the `lang` of the nearest element with one, as
+     * Shoelace and Web Awesome read it, then the runtime's own.
      */
     locale: string;
+    /** The locale the words are written in: `locale`, or the page's `lang`. */
+    private get language();
     /**
      * How the minute is written, where a time of day is shown.
      */
@@ -154,18 +171,21 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      */
     year?: 'numeric' | '2-digit';
     /**
-     * The clock this element last drew against.
+     * The clock this element last drew against, moved on when the reading goes
+     * stale.
      *
-     * A state field and not a read of `Date.now()` inside `render`, which would
-     * make the template a function of something Lit cannot see change: the element
-     * would draw the right text once and never notice it had gone stale.
+     * A controller's time and not a read of `Date.now()` inside `render`, which
+     * would make the template a function of something Lit cannot see change: the
+     * element would draw the right text once and never notice it had gone stale.
+     * The formatter says when its own answer expires, so the clock wakes at
+     * exactly that moment rather than polling: an item minutes old once a minute,
+     * an item hours old once an hour, and an item showing a date never.
      */
-    private clock;
+    private readonly clock;
     /**
      * The date read out of the light DOM, where no attribute carried one.
      */
     private written;
-    private stopTicking;
     private watching;
     /** Whether the timestamp is a day with no time, which is formatted in UTC. */
     private get dateOnly();
@@ -184,16 +204,6 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
     /** The light DOM's own text, which is the other way to write the value. */
     private read;
     private watch;
-    /**
-     * Schedules the next reading, and only the next one.
-     *
-     * The formatter says when its own answer expires, so this asks for exactly
-     * that moment rather than polling: an item minutes old wakes once a minute, an
-     * item hours old once an hour, and an item showing a date never, which is the
-     * difference between a feed that costs nothing to leave open and one that
-     * does.
-     */
-    private tick;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

package/dist/format-date/root/format-date-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, elapsedTime, HelixElement, relativeTime, subscribe, } from '@fusion.dev/helix-core';
+import { customElement, elapsedTime, HelixElement, localeOf, RelativeClockController, relativeTime, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { formatOptions } from '../options.js';
@@ -14,12 +14,23 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         super(...arguments);
         this.date = '';
         this.elapsed = false;
+        this.frozen = false;
         this.locale = '';
-        this.clock = undefined;
+        this.clock = new RelativeClockController(this, {
+            expires: (now) => {
+                const moment = this.moment;
+                if (!moment || !this.reading) {
+                    return undefined;
+                }
+                return this.frozen ? Number.POSITIVE_INFINITY : this.readingAt(moment, now).next;
+            },
+        });
         this.written = '';
-        this.stopTicking = undefined;
         this.watching = undefined;
     }
+    get language() {
+        return localeOf(this, this.locale);
+    }
     get dateOnly() {
         return DATE_ONLY.test((this.date || this.written).trim());
     }
@@ -32,45 +43,27 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         return Number.isNaN(parsed.getTime()) ? undefined : parsed;
     }
     get options() {
-        return formatOptions({
-            dateOnly: this.dateOnly,
-            dateStyle: this.dateStyle,
-            day: this.day,
-            era: this.era,
-            hour: this.hour,
-            hourCycle: this.hourCycle,
-            minute: this.minute,
-            month: this.month,
-            second: this.second,
-            timeStyle: this.timeStyle,
-            timeZone: this.timeZone,
-            timeZoneName: this.timeZoneName,
-            weekday: this.weekday,
-            year: this.year,
-        });
+        return formatOptions(this, this.dateOnly);
     }
     get reading() {
         return this.elapsed || this.relative !== undefined;
     }
     readingAt(moment, now) {
         return this.elapsed
-            ? elapsedTime(this.locale)(moment, now)
-            : relativeTime(this.locale, {
+            ? elapsedTime(this.language)(moment, now)
+            : relativeTime(this.language, {
                 numeric: this.numeric ?? 'auto',
                 style: this.relative ?? 'long',
             })(moment, now);
     }
     connectedCallback() {
         super.connectedCallback();
-        this.tick();
         if (this.hasUpdated) {
             this.watch();
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.stopTicking?.();
-        this.stopTicking = undefined;
         this.watching?.disconnect();
         this.watching = undefined;
     }
@@ -86,10 +79,11 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         }
         if (changed.has('date') ||
             changed.has('elapsed') ||
+            changed.has('frozen') ||
             changed.has('locale') ||
             changed.has('numeric') ||
             changed.has('relative')) {
-            this.tick();
+            this.clock.tick();
         }
     }
     read() {
@@ -99,7 +93,7 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         const written = this.textContent?.trim() ?? '';
         if (written !== this.written) {
             this.written = written;
-            this.tick();
+            this.clock.tick();
         }
     }
     watch() {
@@ -107,21 +101,6 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         this.watching = new MutationObserver(() => this.read());
         this.watching.observe(this, { characterData: true, childList: true, subtree: true });
     }
-    tick() {
-        this.stopTicking?.();
-        this.stopTicking = undefined;
-        const moment = this.moment;
-        if (!moment || !this.reading) {
-            return;
-        }
-        const now = new Date();
-        this.clock = now.getTime();
-        const { next } = this.readingAt(moment, now);
-        if (!Number.isFinite(next) || !this.isConnected) {
-            return;
-        }
-        this.stopTicking = subscribe(next, () => this.tick());
-    }
     render() {
         const moment = this.moment;
         if (!moment) {
@@ -129,18 +108,18 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         }
         const datetime = this.dateOnly ? (this.date || this.written).trim() : moment.toISOString();
         if (!this.reading) {
-            const text = new Intl.DateTimeFormat(this.locale || undefined, this.options).format(moment);
+            const text = new Intl.DateTimeFormat(this.language || undefined, this.options).format(moment);
             return html `<time part="time" datetime=${datetime}>${text}</time>`;
         }
-        const now = new Date(this.clock ?? Date.now());
+        const now = new Date(this.clock.now);
         const zone = this.timeZone || (this.dateOnly ? 'UTC' : undefined);
-        const whole = new Intl.DateTimeFormat(this.locale || undefined, {
+        const whole = new Intl.DateTimeFormat(this.language || undefined, {
             dateStyle: 'long',
             ...(this.dateOnly ? {} : { timeStyle: 'short' }),
             ...(this.hourCycle ? { hourCycle: this.hourCycle } : {}),
             ...(zone ? { timeZone: zone } : {}),
         }).format(moment);
-        const spoken = relativeTime(this.locale, { numeric: this.numeric ?? 'auto' })(moment, now).text;
+        const spoken = relativeTime(this.language, { numeric: this.numeric ?? 'auto' })(moment, now).text;
         return html `<time
       part="time"
       datetime=${datetime}
@@ -164,6 +143,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "era", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessFormatDate.prototype, "frozen", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "hour", void 0);
@@ -203,9 +185,6 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "year", void 0);
-__decorate([
-    state()
-], HelixHeadlessFormatDate.prototype, "clock", void 0);
 __decorate([
     state()
 ], HelixHeadlessFormatDate.prototype, "written", void 0);