@fusion.dev/helix-headless 0.147.0 → 0.148.0

package/dist/file-input/root/file-input-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 { AriaForwardController, customElement, drawIcon, drawStatus, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, MixinField, requestChange, restoreValue, SlottedGlyph, StatusController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, drawStatus, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, labelWith, MixinField, requestChange, restoreValue, SlottedGlyph, StatusController, } from '@fusion.dev/helix-core';
 import { trash } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -12,7 +12,6 @@ import { html } from 'lit/static-html.js';
 import { screenFiles } from '../screen.js';
 import { barOf, saysStatus } from '../status.js';
 import '../../tag/index.js';
-const named = (label, name) => label.includes('{name}') ? fillTemplate(label, { name }) : `${label} ${name}`;
 const size = (bytes, locale) => {
     const units = ['bytes', 'KB', 'MB', 'GB', 'TB'];
     let value = bytes;
@@ -281,7 +280,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
               part="progress"
               max="1"
               value=${bar === 'unmeasured' ? nothing : bar}
-              aria-label=${named(this.progressLabel, file.name)}
+              aria-label=${labelWith(this.progressLabel, 'name', file.name)}
             ></progress>`}${status.text ? html `<span part="status-text">${status.text}</span>` : nothing}</span
     >`;
     }
@@ -346,7 +345,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                   <button
                     part="remove"
                     type="button"
-                    aria-label=${named(this.removeLabel, file.name)}
+                    aria-label=${labelWith(this.removeLabel, 'name', file.name)}
                     data-at=${at}
                     ?disabled=${this.isDisabled}
                     @click=${this.handleRemove}

package/dist/file-input/status.js

@@ -1,7 +1,8 @@
+import { clamp } from '@fusion.dev/helix-core';
 export const barOf = (status) => {
     const { progress, state } = status;
     if (typeof progress === 'number' && Number.isFinite(progress)) {
-        return Math.min(1, Math.max(0, progress));
+        return clamp(progress, 0, 1);
     }
     return state === 'uploading' ? 'unmeasured' : undefined;
 };

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, slottedWords } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, labelWith, 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';
@@ -21,8 +21,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
         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();
+        return labelWith(this.dismissLabel, 'label', words);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);

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

@@ -0,0 +1,20 @@
+import { type TemplateResult } from 'lit';
+/**
+ * Each date field `Intl` names, drawn as a part of its own.
+ *
+ * Keyed by the `type` of `Intl.DateTimeFormat#formatToParts`. Written out one
+ * template to a field rather than bound through one `part` binding, because a
+ * part is read from the source as a literal: a bound name is a part no
+ * stylesheet check can find. A type left out, the punctuation between the
+ * fields among them, is drawn as plain text.
+ */
+export declare const FIELD: Record<string, (value: string) => TemplateResult>;
+/**
+ * A formatted date, each field in a part of its own and the text between them
+ * as it is.
+ *
+ * The words are the ones `format` would give, in the same order, so the reading
+ * a screen reader hears and the text a reader copies do not change: an inline
+ * span with no style of its own changes nothing on the page either.
+ */
+export declare const drawFields: (parts: readonly Intl.DateTimeFormatPart[]) => unknown[];

package/dist/format-date/fields.js

@@ -0,0 +1,14 @@
+import { html } from 'lit';
+export const FIELD = {
+    day: (value) => html `<span part="day">${value}</span>`,
+    dayPeriod: (value) => html `<span part="day-period">${value}</span>`,
+    era: (value) => html `<span part="era">${value}</span>`,
+    hour: (value) => html `<span part="hour">${value}</span>`,
+    minute: (value) => html `<span part="minute">${value}</span>`,
+    month: (value) => html `<span part="month">${value}</span>`,
+    second: (value) => html `<span part="second">${value}</span>`,
+    timeZoneName: (value) => html `<span part="time-zone-name">${value}</span>`,
+    weekday: (value) => html `<span part="weekday">${value}</span>`,
+    year: (value) => html `<span part="year">${value}</span>`,
+};
+export const drawFields = (parts) => parts.map(({ type, value }) => FIELD[type]?.(value) ?? value);

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

@@ -18,7 +18,8 @@ export interface Asked {
     year?: 'numeric' | '2-digit' | undefined;
 }
 /**
- * The `Intl.DateTimeFormat` options for what was asked, and none that was not.
+ * The `Intl.DateTimeFormat` options for what was asked, and none that was not:
+ * an option not asked for is `undefined`, which `Intl` reads as absent.
  *
  * **A style wins over the fields.** `dateStyle` and `timeStyle` are each
  * locale's own whole pattern, and `Intl` throws a `TypeError` when one is

package/dist/format-date/options.js

@@ -1,42 +1,13 @@
-const FIELDS = [
-    'day',
-    'era',
-    'hour',
-    'minute',
-    'month',
-    'second',
-    'timeZoneName',
-    'weekday',
-    'year',
-];
+import { FIELD } from './fields.js';
+const FIELDS = Object.keys(FIELD);
 export const formatOptions = (asked, dateOnly = false) => {
-    const options = {};
-    const styled = asked.dateStyle !== undefined || asked.timeStyle !== undefined;
-    if (styled) {
-        if (asked.dateStyle) {
-            options.dateStyle = asked.dateStyle;
-        }
-        if (asked.timeStyle) {
-            options.timeStyle = asked.timeStyle;
-        }
-    }
-    else {
-        for (const field of FIELDS) {
-            const value = asked[field];
-            if (value) {
-                ;
-                options[field] = value;
-            }
-        }
-    }
-    if (asked.hourCycle) {
-        options.hourCycle = asked.hourCycle;
-    }
-    if (asked.timeZone) {
-        options.timeZone = asked.timeZone;
-    }
-    else if (dateOnly) {
-        options.timeZone = 'UTC';
+    const options = {
+        hourCycle: asked.hourCycle,
+        timeZone: asked.timeZone || (dateOnly ? 'UTC' : undefined),
+    };
+    const styled = asked.dateStyle || asked.timeStyle;
+    for (const field of styled ? ['dateStyle', 'timeStyle'] : FIELDS) {
+        options[field] = asked[field];
     }
     return options;
 };

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

@@ -27,6 +27,12 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * showing a date schedules none, so a long feed left open costs almost nothing.
  * `frozen` draws the reading once and leaves it.
  *
+ * **`fields` draws each field of a date as a part of its own**, such as
+ * `day`, `month` and `year`, so a stylesheet can set the year in a lighter ink
+ * or the weekday in capitals with `::part()`. The text between the fields is
+ * the locale's own and has no part. An `elapsed` or `relative` reading is one
+ * phrase, with no parts inside 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
  * screen reader reads the text, so an `elapsed` reading is named in full, such
@@ -43,7 +49,20 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @aliases RelativeTime, Timestamp, TimeAgo
  * @documentation https://fusion.dev/helix/components/format-date
  *
+ * @csspart day - The day of the month, with `fields`.
+ * @csspart day-period - AM or PM, or the locale's word for the part of the day, with `fields`.
+ * @csspart era - The era, such as AD, with `fields` and `era`.
+ * @csspart hour - The hour, with `fields`.
+ * @csspart minute - The minute, with `fields`.
+ * @csspart month - The month, with `fields`.
+ * @csspart second - The second, with `fields`.
  * @csspart time - The `<time>` element that holds the formatted text.
+ * @csspart time-zone-name - The time zone's name, with `fields`, where `time-zone-name` or a `long` or `full` `time-style` shows it.
+ * @csspart weekday - The day of the week, with `fields`.
+ * @csspart year - The year, with `fields`.
+ *
+ * @cssstate future - An `elapsed` or `relative` reading of a moment still to come, such as "in 3 hours".
+ * @cssstate past - An `elapsed` or `relative` reading of a moment gone, such as "3 hours ago".
  */
 export declare class HelixHeadlessFormatDate extends HelixElement {
     /**
@@ -86,6 +105,16 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * How the era is written, such as AD, where a date is shown.
      */
     era?: 'long' | 'narrow' | 'short';
+    /**
+     * Draws each field of a date in a part of its own: `weekday`, `day`,
+     * `month`, `year`, `era`, `hour`, `minute`, `second`, `day-period` and
+     * `time-zone-name`, so `::part(year)` can set the year apart.
+     *
+     * Off by default, which draws the date as one run of text, as Shoelace and
+     * Web Awesome do. An `elapsed` or `relative` reading is one phrase either
+     * way.
+     */
+    fields?: boolean;
     /**
      * Draws an `elapsed` or `relative` reading once and leaves it, where it
      * would otherwise move on as it goes stale.
@@ -184,15 +213,18 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
     private readonly clock;
     /**
      * The date read out of the light DOM, where no attribute carried one.
+     *
+     * Not a reactive state: `read` asks for the update itself, which keeps the
+     * `state` decorator out of this element's bundle.
      */
     private written;
-    private watching;
+    private watching?;
     /** Whether the timestamp is a day with no time, which is formatted in UTC. */
     private get dateOnly();
     /** The timestamp, or nothing where there is not one to read. */
     private get moment();
-    /** Every `Intl.DateTimeFormat` option a consumer set, and none they did not. */
-    private get options();
+    /** The timestamp as written, in the attribute or in the light DOM. */
+    private get source();
     /** 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. */

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

@@ -6,7 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 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 { property } from 'lit/decorators.js';
+import { drawFields } from '../fields.js';
 import { formatOptions } from '../options.js';
 const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement {
@@ -22,28 +23,27 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
                 if (!moment || !this.reading) {
                     return undefined;
                 }
-                return this.frozen ? Number.POSITIVE_INFINITY : this.readingAt(moment, now).next;
+                return this.frozen ? Infinity : this.readingAt(moment, now).next;
             },
         });
         this.written = '';
-        this.watching = undefined;
     }
     get language() {
         return localeOf(this, this.locale);
     }
     get dateOnly() {
-        return DATE_ONLY.test((this.date || this.written).trim());
+        return DATE_ONLY.test(this.source);
     }
     get moment() {
-        const source = this.date || this.written;
+        const source = this.source;
         if (source === '') {
             return undefined;
         }
         const parsed = new Date(source);
         return Number.isNaN(parsed.getTime()) ? undefined : parsed;
     }
-    get options() {
-        return formatOptions(this, this.dateOnly);
+    get source() {
+        return (this.date || this.written).trim();
     }
     get reading() {
         return this.elapsed || this.relative !== undefined;
@@ -65,7 +65,6 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
     disconnectedCallback() {
         super.disconnectedCallback();
         this.watching?.disconnect();
-        this.watching = undefined;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -77,14 +76,12 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         if (this.childrenKnown) {
             this.read();
         }
-        if (changed.has('date') ||
-            changed.has('elapsed') ||
-            changed.has('frozen') ||
-            changed.has('locale') ||
-            changed.has('numeric') ||
-            changed.has('relative')) {
+        if (['date', 'elapsed', 'frozen', 'locale', 'numeric', 'relative'].some((key) => changed.has(key))) {
             this.clock.tick();
         }
+        const ahead = this.reading ? (this.moment?.getTime() ?? NaN) - this.clock.now : NaN;
+        this.toggleState('past', ahead <= 0);
+        this.toggleState('future', ahead > 0);
     }
     read() {
         if (this.date !== '') {
@@ -93,6 +90,7 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         const written = this.textContent?.trim() ?? '';
         if (written !== this.written) {
             this.written = written;
+            this.requestUpdate();
             this.clock.tick();
         }
     }
@@ -106,26 +104,20 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         if (!moment) {
             return nothing;
         }
-        const datetime = this.dateOnly ? (this.date || this.written).trim() : moment.toISOString();
+        const datetime = this.dateOnly ? this.source : moment.toISOString();
         if (!this.reading) {
-            const text = new Intl.DateTimeFormat(this.language || undefined, this.options).format(moment);
-            return html `<time part="time" datetime=${datetime}>${text}</time>`;
+            const format = new Intl.DateTimeFormat(this.language || undefined, formatOptions(this, this.dateOnly));
+            return html `<time part="time" datetime=${datetime}>${this.fields ? drawFields(format.formatToParts(moment)) : format.format(moment)}</time>`;
         }
         const now = new Date(this.clock.now);
-        const zone = this.timeZone || (this.dateOnly ? 'UTC' : undefined);
-        const whole = new Intl.DateTimeFormat(this.language || undefined, {
+        const whole = new Intl.DateTimeFormat(this.language || undefined, formatOptions({
             dateStyle: 'long',
-            ...(this.dateOnly ? {} : { timeStyle: 'short' }),
-            ...(this.hourCycle ? { hourCycle: this.hourCycle } : {}),
-            ...(zone ? { timeZone: zone } : {}),
-        }).format(moment);
+            hourCycle: this.hourCycle,
+            timeStyle: this.dateOnly ? undefined : 'short',
+            timeZone: this.timeZone,
+        }, this.dateOnly)).format(moment);
         const spoken = relativeTime(this.language, { numeric: this.numeric ?? 'auto' })(moment, now).text;
-        return html `<time
-      part="time"
-      datetime=${datetime}
-      aria-label=${spoken}
-      title=${whole}
-    >${this.readingAt(moment, now).text}</time>`;
+        return html `<time part="time" datetime=${datetime} aria-label=${spoken} title=${whole}>${this.readingAt(moment, now).text}</time>`;
     }
 };
 __decorate([
@@ -143,6 +135,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "era", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessFormatDate.prototype, "fields", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFormatDate.prototype, "frozen", void 0);
@@ -185,9 +180,6 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "year", void 0);
-__decorate([
-    state()
-], HelixHeadlessFormatDate.prototype, "written", void 0);
 HelixHeadlessFormatDate = __decorate([
     customElement('helix-headless-format-date')
 ], HelixHeadlessFormatDate);

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

@@ -41,7 +41,14 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @slot - The renderer's box, which the drawing is made in.
  * @slot filter-icon - The icon in the search field. Defaults to a magnifying glass.
  * @slot footer - Content below the graph.
+ * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
  * @slot header - Content above the graph.
+ * @slot pan-down-icon - Replaces the glyph inside the pan down button.
+ * @slot pan-end-icon - Replaces the glyph inside the button that pans toward the end of a line of text.
+ * @slot pan-start-icon - Replaces the glyph inside the button that pans toward the start of a line of text.
+ * @slot pan-up-icon - Replaces the glyph inside the pan up button.
+ * @slot zoom-in-icon - Replaces the glyph inside the zoom-in button.
+ * @slot zoom-out-icon - Replaces the glyph inside the zoom-out button.
  *
  * @event {HelixActivateEvent} helix-activate - A note was selected, in the list or in the drawing. The detail's `value` is its `id`.
  * @event {HelixBeforeActivateEvent} helix-before-activate - A note is about to be selected. Cancelable: cancel it to keep the selection in your own state.
@@ -91,9 +98,14 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart zoom-in - The zoom in button.
  * @csspart zoom-out - The zoom out button.
  *
+ * @cssstate empty - The list holds no notes: the graph has none, or a search or the groups hid them all.
  * @cssstate fullscreen - The graph fills the screen.
  * @cssstate idle - The user has been still long enough for the header and footer to fade.
+ * @cssstate local - The drawing shows the selected note's local graph, with `depth`.
+ * @cssstate panel-open - A graph with `no-panel` has the search and the list open over the drawing.
  * @cssstate ready - The graph has been drawn whole, after `helix-graph-ready`.
+ * @cssstate searching - The search field holds words, and the list holds only the notes they find.
+ * @cssstate selected - A note is selected, in the list or in the drawing.
  * @cssstate sharing - The page keeps the plain wheel and one finger, with `gestures="cooperative"` or while a graph with `gestures="activate"` waits to be pressed.
  * @cssstate using - A graph with `gestures="activate"` has been pressed and has the gestures.
  */
@@ -255,14 +267,20 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
      * drawing: a reader moving through the list was moving the graph under it.
      */
     private readonly handleListKeydown;
-    /** What has been typed toward a note's name, and when the last letter came. */
-    private typed;
+    /** What has been typed toward a note's name. */
+    private readonly typed;
     /**
-     * Moves to the next note whose name starts with what was typed, as a
-     * listbox does. Letters within half a second of each other run together,
-     * and a repeated letter steps through the names that start with it.
+     * Moves to the next note whose name starts with what was typed, through
+     * core's `Typeahead`, as a listbox does: letters within half a second run
+     * together, and a repeated letter steps through the names that start with it.
      */
     private typeahead;
+    /**
+     * How many rows Page Down and Page Up move: the rows that fit in the list's
+     * box, or in the window where the list does not scroll, less one, so the
+     * row at one edge lands at the other.
+     */
+    private pageRows;
     /**
      * The search field's keys, which belong to the field and never pan the
      * graph. Escape empties a search that has words in it, and passes through

package/dist/graph/root/graph-root.js

@@ -4,14 +4,13 @@ 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, fillTemplate, formatNumbers, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, scrollItemIntoView, VirtualizeController, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumbers, HelixElement, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, MixinControllerActive, MixinViewport, scrollItemIntoView, scrollRoom, Typeahead, VirtualizeController, } from '@fusion.dev/helix-core';
 import { list, magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { adjacencyOf, entriesOf, groupsOf, nameOf, sortedOf, within, withoutGroups, } from './graph-model.js';
-const PAGE = 10;
 let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinControllerActive(HelixElement)) {
     constructor() {
         super(...arguments);
@@ -53,8 +52,8 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
                 ArrowUp: this.cursor - 1,
                 End: this.entries.length - 1,
                 Home: 0,
-                PageDown: this.cursor + PAGE,
-                PageUp: this.cursor - PAGE,
+                PageDown: this.cursor + this.pageRows(),
+                PageUp: this.cursor - this.pageRows(),
             };
             if (event.key in moves) {
                 event.preventDefault();
@@ -74,7 +73,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
                 this.typeahead(event.key);
             }
         };
-        this.typed = { at: 0, text: '' };
+        this.typed = new Typeahead();
         this.handleSearchKeydown = (event) => {
             if (event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -126,6 +125,9 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         super.willUpdate(changed);
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
+        this.toggleState('panel-open', this.noPanel && this.panelOpen);
+        this.toggleState('searching', this.query.trim() !== '');
+        this.toggleState('selected', this.active !== '');
         if (changed.has('links')) {
             this.adjacency = adjacencyOf(this.links);
         }
@@ -141,9 +143,11 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
                 ? within(this.adjacency, this.active, Math.max(0, this.depth))
                 : undefined;
             this.kept = withoutGroups(this.nodes, local, this.hiddenGroups);
+            this.toggleState('local', local !== undefined);
         }
         if (['nodes', 'links', 'active', 'depth', 'hiddenGroups', 'query'].some((name) => changed.has(name))) {
             this.entries = entriesOf(this.sorted, this.adjacency, this.active, this.query, this.kept);
+            this.toggleState('empty', this.entries.length === 0);
             this.cursor = 0;
             const list = this.partNamed('list');
             if (list) {
@@ -272,23 +276,16 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         return this.entries.length > 0 && (cursor < first || cursor >= last) ? cursor : undefined;
     }
     typeahead(letter) {
-        const now = Date.now();
-        const text = now - this.typed.at < 500 ? this.typed.text + letter : letter;
-        this.typed = { at: now, text };
-        const wanted = text.toLocaleLowerCase();
-        const repeated = [...wanted].every((one) => one === wanted[0]);
-        const prefix = repeated ? (wanted[0] ?? '') : wanted;
-        const entries = this.entries;
-        const start = repeated ? this.cursor + 1 : this.cursor;
-        for (let step = 0; step < entries.length; step += 1) {
-            const at = (start + step) % entries.length;
-            const entry = entries[at];
-            if (entry && nameOf(entry.node).toLocaleLowerCase().startsWith(prefix)) {
-                this.moveTo(at);
-                return;
-            }
+        const at = this.typed.match(letter, this.entries.map((entry) => nameOf(entry.node)), this.cursor);
+        if (at >= 0) {
+            this.moveTo(at);
         }
     }
+    pageRows() {
+        const room = scrollRoom(this.partNamed('list'));
+        const tall = this.virtualize.sizeOf(this.cursor) || 32;
+        return Math.max(1, Math.floor(room / tall) - 1);
+    }
     togglePanel(open = !this.panelOpen) {
         const inside = this.panelOpen && this.partNamed('panel')?.contains(this.shadowRoot?.activeElement ?? null);
         this.panelOpen = open;

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

@@ -155,6 +155,12 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * days.
      */
     rows: number;
+    /**
+     * What the readout adds for a selected cell, under `selection-mode`, after
+     * where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
+     * nothing.
+     */
+    selectedLabel: string;
     /**
      * What the `selection` part says after the selection changes, with `{count}` for
      * how many cells are selected.
@@ -409,6 +415,12 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * pitch is `cell + gap` and both are measured.
      */
     protected renderTooltip(): TemplateResult | typeof nothing;
+    /**
+     * The readout's cursor: the pointer, with the selected word after where a
+     * selected cell stands, so a reader moving through the strip hears which
+     * cells are in the selection and not only how many.
+     */
+    private reading;
     /**
      * Which drawn cell the pointer is over, or -1.
      *

package/dist/heatmap/root/heatmap-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 { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestChange, StatusController, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, fillTemplate, formatNumbers, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestValue, StatusController, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -17,6 +17,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.gap = 2;
         this.minCell = 8;
         this.rows = 1;
+        this.selectedLabel = 'selected';
         this.selectionLabel = '{count} selected';
         this.thresholds = '';
         this.tones = '';
@@ -84,15 +85,9 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         if (next === this.value) {
             return;
         }
-        requestChange({
-            apply: (value) => {
-                this.value = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-                this.status.say(fillTemplate(this.selectionLabel, { count: commaList(value).length }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next,
+        requestValue(this, next, (value) => {
+            this.value = value;
+            this.status.say(fillTemplate(this.selectionLabel, { count: commaList(value).length }));
         });
     }
     press(index) {
@@ -277,7 +272,24 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             placement: 'top',
             x: `${column * (cell + gap) + cell / 2}px`,
             y: `${row * (cell + gap)}px`,
-        }, undefined, this.pointer);
+        }, undefined, this.reading(at));
+    }
+    reading(at) {
+        const pointer = this.pointer;
+        const key = this.keysOf(this.drawn)[at] ?? '';
+        if (!this.selectionMode || key === '' || this.selectedLabel === '') {
+            return pointer;
+        }
+        if (!commaList(this.value).includes(key)) {
+            return pointer;
+        }
+        return {
+            column: pointer.column,
+            keyed: pointer.keyed,
+            position: pointer.position,
+            shows: (cell) => pointer.shows(cell),
+            state: this.selectedLabel,
+        };
     }
 };
 __decorate([
@@ -295,6 +307,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessHeatmap.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessHeatmap.prototype, "selectedLabel", void 0);
 __decorate([
     property({ attribute: 'selection-label' })
 ], HelixHeadlessHeatmap.prototype, "selectionLabel", void 0);

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

@@ -16,6 +16,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * its own. The fallback is read once the picture fails, after the picture's
  * `alt`, so a reader hears that it did not load, as a sighted reader sees.
  *
+ * **An image with no `alt` says so.** At its first render it reports a
+ * `missing-alt` warning, printed in the console and counted by
+ * `@fusion.dev/helix-diagnostics`, which names the fix: describe the picture
+ * in `alt`, or write `alt=""` for one that is decoration. An image hidden with
+ * `aria-hidden="true"` needs neither and is not reported.
+ *
+ * A sheet of yours reads the state as `:state(loading)`, `:state(loaded)`,
+ * `:state(error)`, and `:state(waiting)`, the last while `placeholder-delay`
+ * holds the placeholder back. It can also read `data-status` on the host once
+ * the picture has loaded or failed.
+ *
  * @since 0.1.0
  * @status stable
  * @category media

package/dist/kbd/root/kbd-root.js

@@ -4,10 +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 { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, matchesChord, onApple, printableChord, wordsConverter, } from '@fusion.dev/helix-core';
+import { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, keyNames, matchesChord, onApple, printableChord, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { keyNames } from '../keys.js';
 import { claimShortcut, releaseShortcut } from '../shortcut.js';
 const typing = (node) => {
     if (node instanceof HTMLTextAreaElement) {