@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -12,6 +12,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * renders both `minute` and `month` as `m`, so a compact "3m" could mean three
  * minutes or three months. `elapsedTime` in `helix/core` does the measurement.
  *
+ * **`relative` shows the same reading in words**, such as "3 hours ago" at
+ * `long`, "3 hr. ago" at `short` and "3h ago" at `narrow`, the styles
+ * `sl-relative-time` offers. `numeric="always"` says "1 day ago" where the
+ * default says "yesterday".
+ *
+ * **`date-style` and `time-style` take each locale's own pattern**, such as
+ * "Tuesday, August 4, 2026" at `full`, and stand in for the separate fields,
+ * which `Intl` refuses beside them. `hour-cycle` sets a twelve or twenty-four
+ * hour clock either way.
+ *
  * **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.
@@ -53,6 +63,11 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * browser may use either.
      */
     date: string;
+    /**
+     * The locale's own pattern for the date: `full`, `long`, `medium`, or
+     * `short`. Set, it stands in for `weekday`, `day`, `month`, `year` and `era`.
+     */
+    dateStyle?: 'full' | 'long' | 'medium' | 'short';
     /**
      * How the day of the month is written, where a date is shown.
      */
@@ -66,10 +81,22 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * few characters and a date is not.
      */
     elapsed: boolean;
+    /**
+     * How the era is written, such as AD, where a date is shown.
+     */
+    era?: 'long' | 'narrow' | 'short';
     /**
      * How the hour is written, where a time of day is shown.
      */
     hour?: 'numeric' | '2-digit';
+    /**
+     * The clock a time of day is written on: `h12` or `h11` for twelve hours,
+     * `h23` or `h24` for twenty-four.
+     *
+     * Absent is the locale's own, which is right unless your product shows every
+     * reader the same clock whatever their language.
+     */
+    hourCycle?: 'h11' | 'h12' | 'h23' | 'h24';
     /**
      * The locale to format the timestamp in.
      *
@@ -84,10 +111,30 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * How the month is written, where a date is shown.
      */
     month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+    /**
+     * Whether a `relative` reading may use a word for a number: `auto` says
+     * "yesterday" and "now", and `always` says "1 day ago" and "in 0 seconds".
+     */
+    numeric?: 'always' | 'auto';
+    /**
+     * Shows how long ago the timestamp was, or how long until it, in words, in
+     * place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
+     * `narrow` ("3h ago").
+     *
+     * The reading refreshes as it goes stale, as `elapsed` does, and the whole
+     * date is its title. `elapsed` wins where both are set.
+     */
+    relative?: 'long' | 'narrow' | 'short';
     /**
      * How the second is written, where a time of day is shown.
      */
     second?: 'numeric' | '2-digit';
+    /**
+     * The locale's own pattern for the time of day: `full`, `long`, `medium`, or
+     * `short`. Set, it stands in for `hour`, `minute`, `second` and
+     * `time-zone-name`.
+     */
+    timeStyle?: 'full' | 'long' | 'medium' | 'short';
     /**
      * The time zone to read the timestamp in.
      *
@@ -126,6 +173,10 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
     private get moment();
     /** Every `Intl.DateTimeFormat` option a consumer set, and none they did not. */
     private get options();
+    /** Whether the reading is how long ago rather than the date. */
+    private get reading();
+    /** What the reading says now, and when it stops being true. */
+    private readingAt;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, elapsedTime, HelixElement, relativeTime, subscribe, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { formatOptions } from '../options.js';
 const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement {
     constructor() {
@@ -31,38 +32,33 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         return Number.isNaN(parsed.getTime()) ? undefined : parsed;
     }
     get options() {
-        const asked = {};
-        if (this.day) {
-            asked.day = this.day;
-        }
-        if (this.hour) {
-            asked.hour = this.hour;
-        }
-        if (this.minute) {
-            asked.minute = this.minute;
-        }
-        if (this.month) {
-            asked.month = this.month;
-        }
-        if (this.second) {
-            asked.second = this.second;
-        }
-        if (this.timeZone) {
-            asked.timeZone = this.timeZone;
-        }
-        else if (this.dateOnly) {
-            asked.timeZone = 'UTC';
-        }
-        if (this.timeZoneName) {
-            asked.timeZoneName = this.timeZoneName;
-        }
-        if (this.weekday) {
-            asked.weekday = this.weekday;
-        }
-        if (this.year) {
-            asked.year = this.year;
-        }
-        return asked;
+        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,
+        });
+    }
+    get reading() {
+        return this.elapsed || this.relative !== undefined;
+    }
+    readingAt(moment, now) {
+        return this.elapsed
+            ? elapsedTime(this.locale)(moment, now)
+            : relativeTime(this.locale, {
+                numeric: this.numeric ?? 'auto',
+                style: this.relative ?? 'long',
+            })(moment, now);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -88,7 +84,11 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         if (this.childrenKnown) {
             this.read();
         }
-        if (changed.has('date') || changed.has('elapsed') || changed.has('locale')) {
+        if (changed.has('date') ||
+            changed.has('elapsed') ||
+            changed.has('locale') ||
+            changed.has('numeric') ||
+            changed.has('relative')) {
             this.tick();
         }
     }
@@ -111,12 +111,12 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         this.stopTicking?.();
         this.stopTicking = undefined;
         const moment = this.moment;
-        if (!moment || !this.elapsed) {
+        if (!moment || !this.reading) {
             return;
         }
         const now = new Date();
         this.clock = now.getTime();
-        const { next } = elapsedTime(this.locale)(moment, now);
+        const { next } = this.readingAt(moment, now);
         if (!Number.isFinite(next) || !this.isConnected) {
             return;
         }
@@ -128,7 +128,7 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
             return nothing;
         }
         const datetime = this.dateOnly ? (this.date || this.written).trim() : moment.toISOString();
-        if (!this.elapsed) {
+        if (!this.reading) {
             const text = new Intl.DateTimeFormat(this.locale || undefined, this.options).format(moment);
             return html `<time part="time" datetime=${datetime}>${text}</time>`;
         }
@@ -137,28 +137,39 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         const whole = new Intl.DateTimeFormat(this.locale || 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;
         return html `<time
       part="time"
       datetime=${datetime}
-      aria-label=${relativeTime(this.locale)(moment, now).text}
+      aria-label=${spoken}
       title=${whole}
-    >${elapsedTime(this.locale)(moment, now).text}</time>`;
+    >${this.readingAt(moment, now).text}</time>`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "date", void 0);
+__decorate([
+    property({ attribute: 'date-style' })
+], HelixHeadlessFormatDate.prototype, "dateStyle", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "day", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "elapsed", void 0);
+__decorate([
+    property()
+], HelixHeadlessFormatDate.prototype, "era", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "hour", void 0);
+__decorate([
+    property({ attribute: 'hour-cycle' })
+], HelixHeadlessFormatDate.prototype, "hourCycle", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "locale", void 0);
@@ -168,9 +179,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "month", void 0);
+__decorate([
+    property()
+], HelixHeadlessFormatDate.prototype, "numeric", void 0);
+__decorate([
+    property()
+], HelixHeadlessFormatDate.prototype, "relative", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "second", void 0);
+__decorate([
+    property({ attribute: 'time-style' })
+], HelixHeadlessFormatDate.prototype, "timeStyle", void 0);
 __decorate([
     property({ attribute: 'time-zone' })
 ], HelixHeadlessFormatDate.prototype, "timeZone", void 0);

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

@@ -26,6 +26,12 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * your own stylesheet defines that property. The headless tier does not use
  * `var(--helix-color-*)`.
  *
+ * **The strip is read by key.** It takes focus once it has cells. The up and
+ * down arrows move a cell, the left and right arrows move a column, which is a
+ * week with `rows="7"`, and Home and End go to the first and the last. The
+ * tooltip follows, the `live` part says the cell's row in words, and Escape
+ * puts the tooltip away.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
@@ -39,12 +45,14 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @event {HelixResizeEvent} helix-resize - Fired when the number of cells drawn changes, with the new number.
  *
  * @csspart cell - One reading.
+ * @csspart cell-active - The cell the pointer or the keys rest on. Set alongside `cell`.
  * @csspart empty - Shown when the table has no readings. It stays hidden until the table can be read: on the server and during hydration, there is no document to resolve `for` in.
  * @csspart end - The trailing slot's box.
  * @csspart footer - The three-slot row under the strip.
+ * @csspart live - The readout: a polite live region that says the cell the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart start - The leading slot's box.
- * @csspart strip - The grid of cells. It is an image, named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
+ * @csspart strip - The grid of cells, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart summary - The middle slot's box.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
@@ -55,6 +63,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @csspart tooltip-arrow-top - The point while the bubble is above the reading, on its bottom edge. Set alongside `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading. Set alongside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the series keys rest on, in the charts whose readings hold several series. A strip draws one, so it is never set here.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading. Set alongside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.
@@ -183,11 +192,6 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * this component writes out as custom properties, run backwards.
      */
     private metrics;
-    /**
-     * Which drawn cell the pointer is on, as an index into `drawn`, or -1 for
-     * none.
-     */
-    private hovered;
     /**
      * Carries a host `aria-labelledby` and `aria-describedby` to the strip, the
      * image a reader lands on. The host is a generic around it.
@@ -283,6 +287,19 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * keep the oldest is answering a question nobody asked.
      */
     private get drawn();
+    /**
+     * The number of cells drawn, which the keys walk.
+     *
+     * The mixin counts the table's rows, and a strip too narrow for all of them
+     * draws the newest, so a key stepping by rows would walk off the drawing.
+     */
+    get readings(): number;
+    /**
+     * Tells the keys how many days stand in a column, so the up and down arrows
+     * move a day and the across pair a week. Here rather than in `updated`, for
+     * the reason `BarChart` gives: SSR calls this one.
+     */
+    protected willUpdate(changed: PropertyValues<this>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

package/dist/heatmap/root/heatmap-root.js

@@ -20,7 +20,6 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.tones = '';
         this.width = undefined;
         this.metrics = undefined;
-        this.hovered = -1;
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('strip'),
         });
@@ -30,12 +29,14 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             if (!this.pointer.accepts(event)) {
                 return;
             }
-            const cell = event.target?.closest?.('[part="cell"]');
+            const cell = event.target?.closest?.('[part~="cell"]');
             const index = Number(cell?.getAttribute('data-index') ?? -1);
-            this.hovered = Number.isInteger(index) ? index : -1;
+            this.pointer.set(Number.isInteger(index) ? index : -1);
         };
         this.onPointerLeave = () => {
-            this.hovered = -1;
+            if (!this.pointer.keyed) {
+                this.pointer.set(-1);
+            }
         };
     }
     get visible() {
@@ -98,6 +99,13 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const all = this.points;
         return all.slice(Math.max(0, all.length - this.room));
     }
+    get readings() {
+        return this.drawn.length;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.pointer.grid = this.rowCount;
+    }
     connectedCallback() {
         super.connectedCallback();
         if (typeof ResizeObserver !== 'undefined') {
@@ -141,12 +149,14 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const bounds = writtenNumbers(this.thresholds);
         const palette = writtenList(this.tones);
         const cells = this.drawn;
+        const readable = cells.length > 0;
         return html `<div
         aria-label=${this.getAttribute?.('aria-label') || this.named || 'Heatmap'}
         part="strip"
         id=${CHART_PLOT}
-        role="img"
+        role=${readable ? 'application' : 'img'}
         style="--heatmap-rows: ${this.rowCount}"
+        tabindex=${readable ? '0' : nothing}
         @pointerover=${this.onPointerOver}
         @pointerleave=${this.onPointerLeave}
       >
@@ -154,10 +164,14 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             ? nothing
             : cells.map((reading, index) => {
                 const tone = toneOf(reading, bounds, palette);
+                const active = this.pointer.at === index;
                 return tone === undefined
-                    ? html `<span part="cell" data-index=${index}></span>`
+                    ? html `<span
+                      part="cell${active ? ' cell-active' : ''}"
+                      data-index=${index}
+                    ></span>`
                     : html `<span
-                part="cell"
+                part="cell${active ? ' cell-active' : ''}"
                 data-index=${index}
                 data-tone=${tone}
                 style="--heatmap-tone: var(--heatmap-tone-${tone})"
@@ -173,9 +187,9 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
       </div>`;
     }
     renderTooltip() {
-        const at = this.hovered;
+        const at = this.pointer.at;
         if (at < 0) {
-            return nothing;
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
         const offset = this.points.length - this.drawn.length;
         const cell = this.cellPx;
@@ -186,7 +200,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             placement: 'top',
             x: `${column * (cell + gap) + cell / 2}px`,
             y: `${row * (cell + gap)}px`,
-        });
+        }, undefined, this.pointer);
     }
 };
 __decorate([
@@ -213,9 +227,6 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessHeatmap.prototype, "metrics", void 0);
-__decorate([
-    state()
-], HelixHeadlessHeatmap.prototype, "hovered", void 0);
 HelixHeadlessHeatmap = __decorate([
     customElement('helix-headless-heatmap')
 ], HelixHeadlessHeatmap);

package/dist/icon/index.d.ts

@@ -1 +1,3 @@
+import './set.js';
+export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon } from './registry.js';
 export * from './root/icon-root.js';

package/dist/icon/index.js

@@ -1 +1,3 @@
+import './set.js';
+export { registerIconLibrary, registerIcons, resolveIcon } from './registry.js';
 export * from './root/icon-root.js';

package/dist/icon/registry.d.ts

@@ -0,0 +1,37 @@
+import type { HelixIcon } from '@fusion.dev/helix-icons';
+/** What a library gives for a name: a glyph, a glyph later, or nothing. */
+export type IconResolver = (name: string) => HelixIcon | Promise<HelixIcon | undefined> | undefined;
+/**
+ * Makes glyphs resolvable by name: a record of names to glyphs, such as the
+ * whole set, or a list of glyphs, each under its own `name`.
+ *
+ * A name registered again takes the newer glyph.
+ */
+export declare const registerIcons: (glyphs: Record<string, HelixIcon> | readonly HelixIcon[]) => void;
+/**
+ * Resolves names written `prefix:name` through a library of your own, such as
+ * another icon set or glyphs fetched from a server.
+ *
+ * The resolver may answer at once or with a promise; an element waiting on a
+ * promise draws the glyph when it arrives and fires `load`. Each written name
+ * is asked once, and a prefix registered again is asked afresh.
+ */
+export declare const registerIconLibrary: (prefix: string, resolve: IconResolver) => void;
+/**
+ * Calls `watcher` whenever a glyph or a library is registered, so an element
+ * drawn before its glyph was registered can look again. Returns the function
+ * that stops it.
+ */
+export declare const watchIcons: (watcher: () => void) => (() => void);
+/** The registered glyph of this name, or `undefined`. */
+export declare const registeredIcon: (name: string) => HelixIcon | undefined;
+/**
+ * The glyph for a name: a registered one at once, or what the library its
+ * prefix names gives, which may be a promise. `undefined` where nothing
+ * answers.
+ *
+ * A registered name wins over a library, so a page can override one glyph of
+ * a library by registering it under the same written name. A library that
+ * fails answers nothing.
+ */
+export declare const resolveIcon: (name: string) => HelixIcon | Promise<HelixIcon | undefined> | undefined;

package/dist/icon/registry.js

@@ -0,0 +1,83 @@
+const KEY = Symbol.for('helix.icon-registry');
+const changed = (held) => {
+    for (const watcher of held.watchers) {
+        watcher();
+    }
+};
+const registry = () => {
+    const held = globalThis;
+    let found = held[KEY];
+    if (!found) {
+        found = { answers: new Map(), glyphs: new Map(), libraries: new Map(), watchers: new Set() };
+        held[KEY] = found;
+    }
+    return found;
+};
+export const registerIcons = (glyphs) => {
+    const held = registry();
+    const into = held.glyphs;
+    const entries = Array.isArray(glyphs)
+        ? glyphs.map((glyph) => [glyph.name, glyph])
+        : Object.entries(glyphs);
+    for (const [name, glyph] of entries) {
+        into.set(name, glyph);
+    }
+    changed(held);
+};
+export const registerIconLibrary = (prefix, resolve) => {
+    const held = registry();
+    held.libraries.set(prefix, resolve);
+    for (const name of held.answers.keys()) {
+        if (name.startsWith(`${prefix}:`)) {
+            held.answers.delete(name);
+        }
+    }
+    changed(held);
+};
+export const watchIcons = (watcher) => {
+    const held = registry();
+    held.watchers.add(watcher);
+    return () => {
+        held.watchers.delete(watcher);
+    };
+};
+export const registeredIcon = (name) => registry().glyphs.get(name);
+export const resolveIcon = (name) => {
+    const registered = registeredIcon(name);
+    if (registered || name === '') {
+        return registered;
+    }
+    const split = name.indexOf(':');
+    if (split <= 0) {
+        return undefined;
+    }
+    const held = registry();
+    if (held.answers.has(name)) {
+        return held.answers.get(name);
+    }
+    const library = held.libraries.get(name.slice(0, split));
+    if (!library) {
+        return undefined;
+    }
+    const answer = asked(library, name.slice(split + 1));
+    if (answer instanceof Promise) {
+        const settled = answer.then((glyph) => glyph, () => undefined);
+        held.answers.set(name, settled);
+        void settled.then((glyph) => {
+            if (held.answers.get(name) === settled) {
+                held.answers.set(name, glyph);
+            }
+        });
+        return settled;
+    }
+    held.answers.set(name, answer);
+    return answer;
+};
+const asked = (library, name) => {
+    try {
+        return library(name);
+    }
+    catch {
+        return undefined;
+    }
+};

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type HelixIcon } from '@fusion.dev/helix-icons';
+import type { HelixIcon } from '@fusion.dev/helix-icons';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A named icon from the Helix set.
@@ -18,6 +18,15 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * a dark background. Shapes that set their own `fill` or `stroke` are
  * unaffected.
  *
+ * **A name is looked up in a registry.** The family's entry registers the
+ * whole set, so any name in it draws. The element's own entry,
+ * `@fusion.dev/helix-headless/icon/root`, registers none: a page that imports
+ * it and calls `registerIcons` with the glyphs it names ships those and no
+ * others. `registerIconLibrary` resolves names under a prefix of your own,
+ * such as `lucide:camera`, at once or later, and the element fires `load` when
+ * a glyph that came later is drawn. A glyph registered after the element
+ * rendered is drawn then.
+ *
  * A name with no match renders nothing, and the element fires `error`, so a
  * typo in a name can be heard.
  *
@@ -32,7 +41,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Glyph, Symbol
  * @documentation https://fusion.dev/helix/components/icon
  *
- * @event {Event} error - `name` matches no icon in the set, so nothing is drawn.
+ * @event {Event} error - `name` matches no registered icon and no library answers it, so nothing is drawn.
+ * @event {Event} load - A glyph a library gave later for `name` is drawn.
  *
  * @csspart svg - The rendered SVG.
  */
@@ -73,8 +83,12 @@ export declare class HelixHeadlessIcon extends HelixElement {
      * so it is what markup can carry, and resolving one means an index of the
      * whole set that no bundler can shake: 15 kB for a consumer who renders one
      * mark. An attribute is the only thing an HTML author can write, and that is
-     * worth the index; a consumer who would rather not pay it hands over the
-     * value instead.
+     * worth the index; a consumer who would rather not pay it imports the
+     * element from `icon/root` and registers the glyphs it names, or hands over
+     * the value instead.
+     *
+     * A name written `prefix:name` asks the library registered under that
+     * prefix.
      */
     name: string;
     /**
@@ -92,6 +106,18 @@ export declare class HelixHeadlessIcon extends HelixElement {
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     /** The name the last `error` was fired for, so it fires once per name. */
     private missed;
+    /** The glyph this render draws, from `icon` or the registry. */
+    private drawn;
+    /** A library is still answering for `name`, so it is not missing yet. */
+    private waiting;
+    /** The name whose late glyph arrived and has not been announced with `load`. */
+    private arrived;
+    /** Stops listening to the registry. */
+    private unwatch;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** What the registry gives for `name` now, starting the wait for a late glyph. */
+    private lookup;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult | typeof nothing;