@fusion.dev/helix-headless 0.148.0 → 0.149.0

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

@@ -95,6 +95,11 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-file-input': { triggerLabel: 'Dateien auswählen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /**
      * Which files the picker offers and a drop takes, as a native `accept` list.
@@ -108,6 +113,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * `{count}` filled in.
      */
     addedText: string;
+    /**
+     * A file's size under a kilobyte. `{count}` is how many bytes, written in
+     * the locale, and each language writes the forms it has.
+     */
+    bytesLabel: string;
     /**
      * Which camera or microphone a mobile picker should offer, if any.
      */
@@ -118,9 +128,9 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      */
     directory: boolean;
     /**
-     * Language tag the sizes are written in.
-     *
-     * Absent uses the runtime's own.
+     * The locale the words, the sizes, and the numbers and lists in sentences
+     * are in, as a BCP 47 tag such as `pl`. Empty reads the nearest `lang`, then
+     * the browser's language.
      */
     locale: string;
     /**
@@ -219,6 +229,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      * count is written as the language writes a number.
      */
     private listed;
+    /**
+     * A name about one file: `{name}` filled in, or the file's name after a
+     * page's label that has no `{name}`.
+     */
+    private aboutFile;
     /** The element slotted into `remove-icon`, one copy per row's remove button. */
     private readonly removeIcon;
     private readonly handleRemoveIcon;

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, labelWith, MixinField, requestChange, restoreValue, SlottedGlyph, StatusController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, drawStatus, formatWords, HelixBeforeChangeEvent, HelixFormElement, HelixRejectEvent, labelWith, MixinField, requestChange, restoreValue, SlottedGlyph, StatusController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { trash } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -12,19 +12,19 @@ import { html } from 'lit/static-html.js';
 import { screenFiles } from '../screen.js';
 import { barOf, saysStatus } from '../status.js';
 import '../../tag/index.js';
-const size = (bytes, locale) => {
-    const units = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+const size = (bytes, locale, inBytes) => {
+    const units = ['', 'KB', 'MB', 'GB', 'TB'];
     let value = bytes;
     let step = 0;
     while (value >= 1024 && step < units.length - 1) {
         value /= 1024;
         step += 1;
     }
-    const written = new Intl.NumberFormat(locale || undefined, {
-        maximumFractionDigits: step === 0 ? 0 : 1,
-    }).format(value);
-    const unit = step === 0 && value === 1 ? 'byte' : units[step];
-    return `${written} ${unit}`;
+    if (step === 0) {
+        return inBytes(value);
+    }
+    const written = new Intl.NumberFormat(locale || undefined, { maximumFractionDigits: 1 }).format(value);
+    return `${written} ${units[step]}`;
 };
 const kind = (file) => {
     const extension = /\.([a-z0-9]{1,6})$/i.exec(file.name)?.[1];
@@ -43,6 +43,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         });
         this.accept = '';
         this.addedText = 'Added: {names}';
+        this.bytesLabel = '{count, plural, one {# byte} other {# bytes}}';
         this.directory = false;
         this.locale = '';
         this.multiple = false;
@@ -107,6 +108,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             });
         };
     }
+    static { this.words = 'helix-file-input'; }
     setFileStatus(file, status) {
         const was = this.statuses.get(file);
         if (status) {
@@ -150,9 +152,9 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             this.dispatchEvent(new HelixRejectEvent({ files: refused }));
         }
         const words = [
-            applied && !picked && added.length > 0 ? this.listed(this.addedText, added) : '',
+            applied && !picked && added.length > 0 ? this.listed('addedText', added) : '',
             refused.length > 0
-                ? this.listed(this.rejectedText, refused.map((one) => one.file))
+                ? this.listed('rejectedText', refused.map((one) => one.file))
                 : '',
         ].filter((one) => one !== '');
         if (words.length > 0) {
@@ -160,11 +162,16 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         }
     }
     listed(sentence, files) {
-        return fillTemplate(sentence, {
-            count: formatNumbers(this.lang)(files.length),
-            names: new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(files.map((file) => file.name)),
+        return formatWords(this, sentence, {
+            count: files.length,
+            names: new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' }).format(files.map((file) => file.name)),
         });
     }
+    aboutFile(label, name) {
+        return this[label].includes('{name}')
+            ? formatWords(this, label, { name })
+            : labelWith(this[label], 'name', name);
+    }
     removeMark(at) {
         return this.removeIcon.copyFor(at) ?? drawIcon(trash);
     }
@@ -180,7 +187,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     removeAt(at) {
         const gone = this.files[at];
         if (gone && this.commit(this.files.filter((_, index) => index !== at))) {
-            this.status.say(fillTemplate(this.removedText, { name: gone.name }));
+            this.status.say(formatWords(this, 'removedText', { name: gone.name }));
         }
     }
     commit(next) {
@@ -262,7 +269,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     }
     renderMeta(file) {
         return html `<${this.tag('tag')} part="size"
-    exportparts="cell: size-cell, dismiss: size-dismiss, dismiss-mark: size-dismiss-mark, label: size-label, link: size-link, start: size-start">${size(file.size, this.locale)}</${this.tag('tag')}>
+    exportparts="cell: size-cell, dismiss: size-dismiss, dismiss-mark: size-dismiss-mark, label: size-label, link: size-link, start: size-start">${size(file.size, wordsLocale(this), (count) => formatWords(this, 'bytesLabel', { count }))}</${this.tag('tag')}>
       <${this.tag('tag')}
         part="kind"
       exportparts="cell: kind-cell, dismiss: kind-dismiss, dismiss-mark: kind-dismiss-mark, label: kind-label, link: kind-link, start: kind-start">${kind(file)}</${this.tag('tag')}>`;
@@ -280,7 +287,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
               part="progress"
               max="1"
               value=${bar === 'unmeasured' ? nothing : bar}
-              aria-label=${labelWith(this.progressLabel, 'name', file.name)}
+              aria-label=${this.aboutFile('progressLabel', file.name)}
             ></progress>`}${status.text ? html `<span part="status-text">${status.text}</span>` : nothing}</span
     >`;
     }
@@ -345,7 +352,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                   <button
                     part="remove"
                     type="button"
-                    aria-label=${labelWith(this.removeLabel, 'name', file.name)}
+                    aria-label=${this.aboutFile('removeLabel', file.name)}
                     data-at=${at}
                     ?disabled=${this.isDisabled}
                     @click=${this.handleRemove}
@@ -361,8 +368,13 @@ __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "accept", void 0);
 __decorate([
+    words,
     property({ attribute: 'added-text' })
 ], HelixHeadlessFileInput.prototype, "addedText", void 0);
+__decorate([
+    words,
+    property({ attribute: 'bytes-label' })
+], HelixHeadlessFileInput.prototype, "bytesLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "capture", void 0);
@@ -382,15 +394,19 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessFileInput.prototype, "multiple", void 0);
 __decorate([
+    words,
     property({ attribute: 'progress-label' })
 ], HelixHeadlessFileInput.prototype, "progressLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'rejected-text' })
 ], HelixHeadlessFileInput.prototype, "rejectedText", void 0);
 __decorate([
+    words,
     property({ attribute: 'removed-text' })
 ], HelixHeadlessFileInput.prototype, "removedText", void 0);
 __decorate([
+    words,
     property({ attribute: 'remove-label' })
 ], HelixHeadlessFileInput.prototype, "removeLabel", void 0);
 __decorate([
@@ -400,6 +416,7 @@ __decorate([
     property({ attribute: false })
 ], HelixHeadlessFileInput.prototype, "transformFiles", void 0);
 __decorate([
+    words,
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessFileInput.prototype, "triggerLabel", void 0);
 __decorate([

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

@@ -63,6 +63,19 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  * @csspart values - The values the field is compared to.
  */
 export declare class HelixHeadlessFilterChip extends HelixHeadlessFilterChip_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-filter-chip': { dismissLabel: 'Filter entfernen' } })`.
+     */
+    static words: string;
+    /**
+     * The remove button's name, read by screen readers. The chip's own words
+     * follow it, so several chips are told apart.
+     *
+     * "Remove filter" rather than the mixin's "Dismiss", for the reason `Tag`
+     * gives its own: taking a filter out of a set is a different act from
+     * closing a message.
+     */
     dismissLabel: string;
     /**
      * The name of the field the filter is on, as shown on the chip.

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, labelWith, MixinDismissible, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, labelWith, MixinDismissible, slottedWords, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -16,6 +16,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
         this.label = '';
         this.operatorLabel = '';
     }
+    static { this.words = 'helix-filter-chip'; }
     get removeName() {
         const read = (slot, fallback) => (this.childrenKnown && slottedWords(this, [slot])) || fallback;
         const words = [read('field', this.label), read('operator', this.operatorLabel), read('', '')]
@@ -51,6 +52,10 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
             : nothing}`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessFilterChip.prototype, "dismissLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessFilterChip.prototype, "label", void 0);

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

@@ -85,6 +85,11 @@ import '../../menu/index.js';
  * @csspart menu-title - The name of the field whose page is showing.
  */
 export declare class HelixHeadlessFilterMenu extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-filter-menu': { label: 'Filtern' } })`.
+     */
+    static words: string;
     /**
      * The menu's name, read by screen readers.
      */

package/dist/filter-input/menu/filter-menu.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, HelixFacetEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixFacetEvent, words } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -55,6 +55,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
             this.apply(field, [...ticked]);
         };
     }
+    static { this.words = 'helix-filter-menu'; }
     get fields() {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessFilterField);
     }
@@ -203,6 +204,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessFilterMenu.prototype, "label", void 0);
 HelixHeadlessFilterMenu = __decorate([

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

@@ -132,6 +132,11 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @cssstate open - The suggestions are open.
  */
 export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-filter-input': { clearLabel: 'Leeren' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed, so every keystroke is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
@@ -161,9 +166,21 @@ export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_b
      * Not a label: it goes when typing starts.
      */
     placeholder: string;
-    /** What a reader hears for one suggestion, with `{count}` filled in. */
-    suggestionLabel: string;
-    /** What a reader hears for any other number of suggestions, with `{count}` filled in. */
+    /**
+     * What a reader hears for one suggestion, where `suggestions-label` should
+     * not say it. `{count}` is the count.
+     *
+     * @deprecated Write every form in `suggestions-label`, as `{count, plural,
+     * one {# suggestion} other {# suggestions}}`. Removed in the next major
+     * version.
+     */
+    suggestionLabel?: string;
+    /**
+     * What a reader hears as the panel opens on its suggestions. `{count}` is
+     * how many, written in the locale, and each language writes the forms it
+     * has: `{count, plural, one {# sugestia} few {# sugestie} many {# sugestii}
+     * other {# sugestii}}`.
+     */
     suggestionsLabel: string;
     /** The live region, rendered from the first count said. */
     private readonly status;

package/dist/filter-input/root/filter-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, countLabel, customElement, drawIcon, drawStatus, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, restoreValue, StatusController, scrollItemIntoView, } from '@fusion.dev/helix-core';
+import { AriaForwardController, countLabel, customElement, drawIcon, drawStatus, formatWords, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, restoreValue, StatusController, scrollItemIntoView, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -25,8 +25,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         this.clearLabel = 'Clear';
         this.filterSuggestions = false;
         this.placeholder = '';
-        this.suggestionLabel = '{count} suggestion';
-        this.suggestionsLabel = '{count} suggestions';
+        this.suggestionsLabel = '{count, plural, one {# suggestion} other {# suggestions}}';
         this.status = new StatusController(this);
         this.saidCount = -1;
         this.narrowed = new Set();
@@ -161,6 +160,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
             this.over = this.hideOverflow(this.tokens);
         };
     }
+    static { this.words = 'helix-filter-input'; }
     narrow() {
         const term = this.filterSuggestions
             ? currentTerm(this.value, this.control?.selectionStart ?? this.value.length)
@@ -186,7 +186,9 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         if (count < 0) {
             return;
         }
-        this.status.sayNow(countLabel(count, this.suggestionLabel, this.suggestionsLabel, this.lang));
+        this.status.sayNow(this.suggestionLabel
+            ? countLabel(count, this.suggestionLabel, this.suggestionsLabel, wordsLocale(this))
+            : formatWords(this, 'suggestionsLabel', { count }));
     }
     formValue() {
         const entries = (this.tokens?.assignedElements({ flatten: true }) ?? [])
@@ -443,6 +445,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessFilterInput.prototype, "clearable", void 0);
 __decorate([
+    words,
     property({ attribute: 'clear-label' })
 ], HelixHeadlessFilterInput.prototype, "clearLabel", void 0);
 __decorate([
@@ -455,6 +458,7 @@ __decorate([
     property({ attribute: 'suggestion-label' })
 ], HelixHeadlessFilterInput.prototype, "suggestionLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'suggestions-label' })
 ], HelixHeadlessFilterInput.prototype, "suggestionsLabel", void 0);
 __decorate([

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { type DateCalendar, HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A timestamp, formatted for the user's locale.
@@ -43,6 +43,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * Picker format their dates, so a reader west of UTC sees August 4 and not
  * August 3.
  *
+ * **A date is written in a calendar Date Picker draws**: the locale's own
+ * where its months are the Gregorian months, as `th-TH` writes 2569 for 2026,
+ * and `gregory` where they are not, as for `fa-IR`. `calendar` picks one of
+ * the five.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -65,6 +70,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate past - An `elapsed` or `relative` reading of a moment gone, such as "3 hours ago".
  */
 export declare class HelixHeadlessFormatDate extends HelixElement {
+    /**
+     * The calendar a date is written in: `gregory`, `buddhist`, `japanese`,
+     * `roc`, or `iso8601`, the calendars Date Picker and Date Input draw.
+     *
+     * Absent is the locale's own where it is one of the five, such as
+     * `buddhist` for `th-TH`, and `gregory` for every other, such as `persian`
+     * for `fa-IR`, so a date written here reads as the same date a Date Picker
+     * beside it shows.
+     */
+    calendar?: DateCalendar;
     /**
      * The timestamp, in any format `Date` can parse.
      *
@@ -147,7 +162,10 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * 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`. */
+    /**
+     * The locale the words are written in, `locale` or the page's `lang`, with
+     * the calendar.
+     */
     private get language();
     /**
      * How the minute is written, where a time of day is shown.

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, localeOf, RelativeClockController, relativeTime, } from '@fusion.dev/helix-core';
+import { calendarLocale, customElement, elapsedTime, HelixElement, RelativeClockController, relativeTime, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { drawFields } from '../fields.js';
@@ -29,7 +29,7 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         this.written = '';
     }
     get language() {
-        return localeOf(this, this.locale);
+        return calendarLocale(wordsLocale(this), this.calendar);
     }
     get dateOnly() {
         return DATE_ONLY.test(this.source);
@@ -120,6 +120,9 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         return html `<time part="time" datetime=${datetime} aria-label=${spoken} title=${whole}>${this.readingAt(moment, now).text}</time>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessFormatDate.prototype, "calendar", void 0);
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "date", void 0);

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

@@ -87,6 +87,17 @@ export declare const within: (adjacency: Adjacency, from: string, depth: number)
  * its order instead.
  */
 export declare const entriesOf: (sorted: readonly GraphNode[], adjacency: Adjacency, active: string, query: string, shown?: ReadonlySet<string>) => Entry[];
+/**
+ * The row the keyboard stays on once the rows are read again from changed
+ * notes or links: the row of the note it was on, `id`, wherever that note now
+ * is, or, where the note was taken away, the row at `at` that took its place,
+ * the last row where the list grew shorter than that.
+ *
+ * **The reader stays where they were.** A graph a page feeds as things happen
+ * changes its notes every few seconds, and a cursor sent to the top on each
+ * change threw a reader moving through the list back to its first row.
+ */
+export declare const cursorAfter: (entries: readonly Entry[], id: string | undefined, at: number) => number;
 /** The notes in the order of their names, as the page's language orders words. */
 export declare const sortedOf: (nodes: readonly GraphNode[], lang?: string) => GraphNode[];
 /** One group the notes are in, as the legend names it. */

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

@@ -69,6 +69,10 @@ export const entriesOf = (sorted, adjacency, active, query, shown) => {
     }
     return [...first, ...neighbors, ...rest];
 };
+export const cursorAfter = (entries, id, at) => {
+    const found = id === undefined ? -1 : entries.findIndex((entry) => entry.node.id === id);
+    return found >= 0 ? found : Math.max(0, Math.min(at, entries.length - 1));
+};
 export const sortedOf = (nodes, lang) => {
     const collator = new Intl.Collator(lang || undefined, { numeric: true, sensitivity: 'base' });
     return [...nodes].sort((one, other) => collator.compare(nameOf(one), nameOf(other)));

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

@@ -1,4 +1,4 @@
-import { type GraphSignalDetail, HelixElement, type ViewportGestureLabels, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
+import { type GraphSignalDetail, HelixElement, type ViewportPanDetail, type ViewportZoomDetail } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { type GraphLink, type GraphNode } from './graph-model.js';
 declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.dev/helix-core").ViewportElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
@@ -54,11 +54,11 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @event {HelixBeforeActivateEvent} helix-before-activate - A note is about to be selected. Cancelable: cancel it to keep the selection in your own state.
  * @event {HelixGraphFilterEvent} helix-graph-filter - A group in the legend was pressed, to show or hide its notes. The detail's `hidden` is every group that would be hidden. Cancelable: cancel it to keep the groups as they were, or to set `hiddenGroups` yourself.
  * @event {HelixGraphLayoutEvent} helix-graph-layout - A layout settled, with where it put each note, sent by `laidOut()`. Keep the positions and pass them back as each note's `x` and `y`, and `z` where a renderer draws in three dimensions.
- * @event {HelixGraphPanEvent} helix-graph-pan - A pan button or arrow key was pressed. `connectGraph` moves the drawing.
+ * @event {HelixGraphPanEvent} helix-graph-pan - A pan button or arrow key was pressed. `connectGraph` moves the drawing, then calls `moved()`.
  * @event {HelixGraphPartChangeEvent} helix-graph-part-change - The notes, the links, the selection, the depth or the gestures changed. Used by `connectGraph`; pages do not need to listen for it.
  * @event {HelixGraphReadyEvent} helix-graph-ready - The graph has been drawn whole, laid out and settled. Sent each time `drawn()` says it is drawn after it was not.
  * @event {HelixGraphSignalEvent} helix-graph-signal - Something passed between two notes, sent by `signal()`. Used by `connectGraph`; pages do not need to listen for it.
- * @event {HelixGraphZoomEvent} helix-graph-zoom - A zoom button or key was pressed. `connectGraph` zooms the drawing.
+ * @event {HelixGraphZoomEvent} helix-graph-zoom - A zoom button or key was pressed. `connectGraph` zooms the drawing, then calls `moved()`.
  *
  * @csspart after - The room the notes after those drawn would take, so the list scrolls its whole length.
  * @csspart before - The room the notes before those drawn would take.
@@ -77,7 +77,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart legend-item-hidden - A group in the legend whose notes are hidden.
  * @csspart legend-swatch - The mark in a group's color, before its name.
  * @csspart list - The list of notes, which draws only the rows in view.
- * @csspart live - What screen readers hear when a search changes how many notes there are.
+ * @csspart live - What screen readers hear: how many notes there are when a search or the legend changes it, and which way the drawing went after a key or a control moved it.
  * @csspart note - One note in the list.
  * @csspart note-cursor - The note the keyboard is on in the list.
  * @csspart note-linked - A note linked to or from the selected one.
@@ -110,13 +110,36 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @cssstate using - A graph with `gestures="activate"` has been pressed and has the gestures.
  */
 export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
-    /** What the list says of a note's count, with `{count}`. */
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-graph': { searchLabel: 'Notiz suchen' } })`.
+     */
+    static words: string;
+    /**
+     * The hint shown when the graph, waiting to be pressed with
+     * `gestures="activate"`, is scrolled or swiped over.
+     */
+    activateHintLabel: string;
+    /**
+     * The name of the group of controls, read by screen readers, which names
+     * what the controls drive rather than the mechanism.
+     */
+    controlsLabel: string;
+    /**
+     * What the list says of how many notes it holds. `{count}` is the count,
+     * written in the locale, and each language writes the forms it has.
+     */
     countLabel: string;
     /**
      * How many links from the selected note to show, for its local graph. Unset
      * shows every note. The list holds what the drawing shows.
      */
     depth?: number;
+    /**
+     * The graph's name where `label` is empty and the host has no
+     * `aria-label`.
+     */
+    fallbackLabel: string;
     /** The groups turned off in the legend, by name, whose notes neither the drawing nor the list shows. A property, never an attribute. */
     hiddenGroups: readonly string[];
     /**
@@ -139,6 +162,14 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     links: readonly GraphLink[];
     /** How a note that links to the selected one is described, with `{note}`. */
     linksToLabel: string;
+    /** What screen readers hear once the drawing has moved down, after `moved()`. */
+    movedDownLabel: string;
+    /** What screen readers hear once the drawing has moved left, after `moved()`. */
+    movedLeftLabel: string;
+    /** What screen readers hear once the drawing has moved right, after `moved()`. */
+    movedRightLabel: string;
+    /** What screen readers hear once the drawing has moved up, after `moved()`. */
+    movedUpLabel: string;
     /** The notes. A property, never an attribute. */
     nodes: readonly GraphNode[];
     /**
@@ -153,6 +184,19 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     searchLabel: string;
     /** How the selected note is described in the list. */
     selectedLabel: string;
+    /** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
+    twoFingerHintLabel: string;
+    /** The line shown while the graph, with `gestures="activate"`, has the gestures. */
+    usingLabel: string;
+    /**
+     * The hint shown when the wheel scrolls past the graph with
+     * `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
+     */
+    wheelHintLabel: string;
+    /** What screen readers hear once the drawing has zoomed in, after `moved()`. */
+    zoomedInLabel: string;
+    /** What screen readers hear once the drawing has zoomed out, after `moved()`. */
+    zoomedOutLabel: string;
     /** What the search field holds. */
     private query;
     /** The row the keyboard is on, as an index into the list. */
@@ -175,8 +219,15 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     private groups;
     /** Whether the graph has been drawn whole, which `drawn()` says. */
     private whole;
-    /** How many notes there were when the count was last said. */
+    /** What the live region says now. */
     private said;
+    /**
+     * Which way a reader last asked the drawing to go, by a key or a control,
+     * until `moved()` says it went: a side, `in` or `out`.
+     */
+    private asked;
+    /** Whether the next change of the list's rows is one a reader asked for by the legend, whose count is then said. */
+    private countAsked;
     private readonly virtualize;
     /**
      * @internal The notes the drawing shows, which `connectGraph` reads: those
@@ -217,16 +268,34 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     signal(from: string, to: string, options?: {
         tone?: GraphSignalDetail['tone'];
     }): void;
+    /**
+     * Says the drawing moved the way a reader asked, by a key or a control:
+     * the live region says "Moved right" or "Zoomed in" in the frame's words.
+     * Called by `connectGraph` once the renderer has moved; a page answering
+     * `helix-graph-pan` and `helix-graph-zoom` itself calls it once its view
+     * has moved.
+     *
+     * **Said once the drawing has moved, and only then.** The frame asks and
+     * the renderer moves, so a frame with nothing to answer it says nothing: a
+     * move said that never happened is worse than silence.
+     */
+    moved(): void;
+    /**
+     * Puts words in the live region. **The same words twice differ by a space
+     * no reader hears**, since a region whose text does not change is not read
+     * again, and a second "Moved left" is news as much as the first.
+     */
+    private say;
+    protected firstUpdated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** The pan request, and the side it goes to, which `moved()` then says. */
     protected panEvent(detail: ViewportPanDetail): Event;
+    /** The zoom request, and which way it goes, which `moved()` then says. */
     protected zoomEvent(detail: ViewportZoomDetail): Event;
     protected get restingControls(): string;
-    protected get restingControlsLabel(): string;
     /** Which gestures the renderer takes, which `connectGraph` hears from here. */
     protected gesturesChanged(): void;
-    /** What the graph says about its gestures where the page does not say it. */
-    protected get restingGestureLabels(): ViewportGestureLabels;
     /** How many notes the list holds, in the page's numbers. */
     private countText;
     /** How a row stands to the selected note, in words, or nothing where it does not. */