@fusion.dev/helix-headless 0.177.1 → 0.178.0

package/types/jsx.d.ts

@@ -10536,10 +10536,22 @@ Empty is the reader's own. Dates are plain `YYYY-MM-DD` and carry no zone. */
   /** The message shown when `disable-dates` or `disable-days` bars a date. */
   unavailableMessage?: (HelixHeadlessDateInput["unavailableMessage"]) | undefined;
   /** The message for text that is no date, where `bad-input-message` is not
-set. `{mode}` is `single`, `range`, or `multiple`. */
+set. `{mode}` is `single`, `range`, or `multiple`, and `{example}` is a
+date written as the field writes one, `August 24, 2026` in `en-US` and
+`24. August 2026` in `de-DE` at the default `date-style`.
+
+**The default names a date the field reads back.** It said "Enter a date
+as YYYY-MM-DD." to a reader whose field showed `August 4, 2026`, and a
+pattern token is words for a developer. Time Input says the same. */
   "unreadable-message"?: (HelixHeadlessDateInput["unreadableMessage"]) | undefined;
   /** The message for text that is no date, where `bad-input-message` is not
-set. `{mode}` is `single`, `range`, or `multiple`. */
+set. `{mode}` is `single`, `range`, or `multiple`, and `{example}` is a
+date written as the field writes one, `August 24, 2026` in `en-US` and
+`24. August 2026` in `de-DE` at the default `date-style`.
+
+**The default names a date the field reads back.** It said "Enter a date
+as YYYY-MM-DD." to a reader whose field showed `August 4, 2026`, and a
+pattern token is words for a developer. Time Input says the same. */
   unreadableMessage?: (HelixHeadlessDateInput["unreadableMessage"]) | undefined;
   /** The name of the calendar's heading where it shows a page of years, with
 `{heading}` filled in. */
@@ -11056,10 +11068,22 @@ Empty is the reader's own. Dates are plain `YYYY-MM-DD` and carry no zone. */
   /** The message shown when `disable-dates` or `disable-days` bars a date. */
   "prop:unavailableMessage"?: (HelixHeadlessDateInput["unavailableMessage"]) | undefined;
   /** The message for text that is no date, where `bad-input-message` is not
-set. `{mode}` is `single`, `range`, or `multiple`. */
+set. `{mode}` is `single`, `range`, or `multiple`, and `{example}` is a
+date written as the field writes one, `August 24, 2026` in `en-US` and
+`24. August 2026` in `de-DE` at the default `date-style`.
+
+**The default names a date the field reads back.** It said "Enter a date
+as YYYY-MM-DD." to a reader whose field showed `August 4, 2026`, and a
+pattern token is words for a developer. Time Input says the same. */
   "attr:unreadable-message"?: (HelixHeadlessDateInput["unreadableMessage"]) | undefined;
   /** The message for text that is no date, where `bad-input-message` is not
-set. `{mode}` is `single`, `range`, or `multiple`. */
+set. `{mode}` is `single`, `range`, or `multiple`, and `{example}` is a
+date written as the field writes one, `August 24, 2026` in `en-US` and
+`24. August 2026` in `de-DE` at the default `date-style`.
+
+**The default names a date the field reads back.** It said "Enter a date
+as YYYY-MM-DD." to a reader whose field showed `August 4, 2026`, and a
+pattern token is words for a developer. Time Input says the same. */
   "prop:unreadableMessage"?: (HelixHeadlessDateInput["unreadableMessage"]) | undefined;
   /** The name of the calendar's heading where it shows a page of years, with
 `{heading}` filled in. */
@@ -11358,16 +11382,24 @@ export type HelixHeadlessDatePickerProps = {
 **Every sentence a control raises in the browser's bubble is a property**,
 named for the validity flag it reports, so a form in another language
 speaks it. Unset is the sentence registered for the page's language, then
-the English. `{mode}` is `single`, `range` or `multiple`, so each can have
-its own sentence. */
+the English. `{example}` is a date written as the calendar names one,
+`August 24, 2026` in `en-US` and `24. August 2026` in `de-DE`, and `{mode}`
+is `single`, `range` or `multiple`, so each can have its own sentence.
+
+**The default names a date in words.** It said "Enter a date as
+YYYY-MM-DD.", and a pattern token is words for a developer. */
   "bad-input-message"?: (HelixHeadlessDatePicker["badInputMessage"]) | undefined;
   /** The validation message for a value that is not a date.
 
 **Every sentence a control raises in the browser's bubble is a property**,
 named for the validity flag it reports, so a form in another language
 speaks it. Unset is the sentence registered for the page's language, then
-the English. `{mode}` is `single`, `range` or `multiple`, so each can have
-its own sentence. */
+the English. `{example}` is a date written as the calendar names one,
+`August 24, 2026` in `en-US` and `24. August 2026` in `de-DE`, and `{mode}`
+is `single`, `range` or `multiple`, so each can have its own sentence.
+
+**The default names a date in words.** It said "Enter a date as
+YYYY-MM-DD.", and a pattern token is words for a developer. */
   badInputMessage?: (HelixHeadlessDatePicker["badInputMessage"]) | undefined;
   /** The calendar the heading, the days, and the months are written in.
 
@@ -11705,16 +11737,24 @@ export type HelixHeadlessDatePickerSolidJsProps = {
 **Every sentence a control raises in the browser's bubble is a property**,
 named for the validity flag it reports, so a form in another language
 speaks it. Unset is the sentence registered for the page's language, then
-the English. `{mode}` is `single`, `range` or `multiple`, so each can have
-its own sentence. */
+the English. `{example}` is a date written as the calendar names one,
+`August 24, 2026` in `en-US` and `24. August 2026` in `de-DE`, and `{mode}`
+is `single`, `range` or `multiple`, so each can have its own sentence.
+
+**The default names a date in words.** It said "Enter a date as
+YYYY-MM-DD.", and a pattern token is words for a developer. */
   "attr:bad-input-message"?: (HelixHeadlessDatePicker["badInputMessage"]) | undefined;
   /** The validation message for a value that is not a date.
 
 **Every sentence a control raises in the browser's bubble is a property**,
 named for the validity flag it reports, so a form in another language
 speaks it. Unset is the sentence registered for the page's language, then
-the English. `{mode}` is `single`, `range` or `multiple`, so each can have
-its own sentence. */
+the English. `{example}` is a date written as the calendar names one,
+`August 24, 2026` in `en-US` and `24. August 2026` in `de-DE`, and `{mode}`
+is `single`, `range` or `multiple`, so each can have its own sentence.
+
+**The default names a date in words.** It said "Enter a date as
+YYYY-MM-DD.", and a pattern token is words for a developer. */
   "prop:badInputMessage"?: (HelixHeadlessDatePicker["badInputMessage"]) | undefined;
   /** The calendar the heading, the days, and the months are written in.
 
@@ -14058,6 +14098,14 @@ an icon. */
   /** The name of the clear button, read by screen readers. The button shows only
 an icon. */
   clearLabel?: (HelixHeadlessFilterInput["clearLabel"]) | undefined;
+  /** How long typing rests before `source` is asked, in milliseconds. A delay
+sends one request for a word in place of one for each letter. The arrow
+keys and Enter ask at once. `0` asks on every keystroke. */
+  "filter-delay"?: (HelixHeadlessFilterInput["filterDelay"] | `${number}`) | undefined;
+  /** How long typing rests before `source` is asked, in milliseconds. A delay
+sends one request for a word in place of one for each letter. The arrow
+keys and Enter ask at once. `0` asks on every keystroke. */
+  filterDelay?: (HelixHeadlessFilterInput["filterDelay"]) | undefined;
   /** Whether the panel narrows itself to the suggestions that hold the term
 being typed, as React Aria's Autocomplete filters. Off, the panel shows
 what you slot and you narrow it. */
@@ -14251,6 +14299,13 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixHeadlessFilterInput["name"]) | undefined;
+  /** Where the suggestions come from: a function given the term at the caret,
+the field it is a value of, the whole text, and an `AbortSignal`, which
+returns the suggestions or a promise of them. Each is a string, or a
+`value` with a `label` and `disabled`. The field draws them as options in
+the panel, beside any you slot. A property only, there being no way to
+write a function in markup. See the class description. */
+  source?: (HelixHeadlessFilterInput["source"]) | undefined;
 
   /** Fired from the input when the user finishes editing the text. */
   onchange?: ((e: HelixHeadlessFilterInputElementEvent) => void) | undefined;
@@ -14272,7 +14327,7 @@ Here rather than on each control. */
   ) => void) | undefined;
   /** Fired when a filter changes, whether it was typed, picked, or removed. Cancelable: call `preventDefault()` to leave the text and the chip as they were. */
   "onhelix-facet"?: ((e: HelixHeadlessFilterInputHelixFacetElementEvent) => void) | undefined;
-  /** Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on a choice; you decide what it does. */
+  /** Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on an option you slotted, and you decide what it does. A suggestion from `source` is written over the term at the caret unless you cancel it. */
   "onhelix-select"?: ((
     e: HelixHeadlessFilterInputHelixSelectElementEvent,
   ) => void) | undefined;
@@ -14308,6 +14363,14 @@ an icon. */
   /** The name of the clear button, read by screen readers. The button shows only
 an icon. */
   "prop:clearLabel"?: (HelixHeadlessFilterInput["clearLabel"]) | undefined;
+  /** How long typing rests before `source` is asked, in milliseconds. A delay
+sends one request for a word in place of one for each letter. The arrow
+keys and Enter ask at once. `0` asks on every keystroke. */
+  "attr:filter-delay"?: (HelixHeadlessFilterInput["filterDelay"] | `${number}`) | undefined;
+  /** How long typing rests before `source` is asked, in milliseconds. A delay
+sends one request for a word in place of one for each letter. The arrow
+keys and Enter ask at once. `0` asks on every keystroke. */
+  "prop:filterDelay"?: (HelixHeadlessFilterInput["filterDelay"]) | undefined;
   /** Whether the panel narrows itself to the suggestions that hold the term
 being typed, as React Aria's Autocomplete filters. Off, the panel shows
 what you slot and you narrow it. */
@@ -14501,6 +14564,13 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   "prop:name"?: (HelixHeadlessFilterInput["name"]) | undefined;
+  /** Where the suggestions come from: a function given the term at the caret,
+the field it is a value of, the whole text, and an `AbortSignal`, which
+returns the suggestions or a promise of them. Each is a string, or a
+`value` with a `label` and `disabled`. The field draws them as options in
+the panel, beside any you slot. A property only, there being no way to
+write a function in markup. See the class description. */
+  "prop:source"?: (HelixHeadlessFilterInput["source"]) | undefined;
   /** Fired from the input when the user finishes editing the text. */
   "on:change"?: ((e: HelixHeadlessFilterInputElementEvent) => void) | undefined;
   /** Fired as the text changes. Cancelable: call `preventDefault()` to keep the current text. */
@@ -14523,7 +14593,7 @@ Here rather than on each control. */
   "on:helix-facet"?: ((
     e: HelixHeadlessFilterInputHelixFacetElementEvent,
   ) => void) | undefined;
-  /** Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on a choice; you decide what it does. */
+  /** Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on an option you slotted, and you decide what it does. A suggestion from `source` is written over the term at the caret unless you cancel it. */
   "on:helix-select"?: ((
     e: HelixHeadlessFilterInputHelixSelectElementEvent,
   ) => void) | undefined;
@@ -14910,6 +14980,14 @@ or hides its notes. Drawn where the notes have two groups or more. */
   "legend-label"?: (HelixHeadlessGraph["legendLabel"]) | undefined;
   /** The legend's name, read by screen readers. */
   legendLabel?: (HelixHeadlessGraph["legendLabel"]) | undefined;
+  /** What screen readers hear when a walk along the links reaches a note that
+has no link to follow, or goes back to a note: `{note}` for its name and
+`{count}` for how many notes the list holds that it links to or from. */
+  "link-count-label"?: (HelixHeadlessGraph["linkCountLabel"]) | undefined;
+  /** What screen readers hear when a walk along the links reaches a note that
+has no link to follow, or goes back to a note: `{note}` for its name and
+`{count}` for how many notes the list holds that it links to or from. */
+  linkCountLabel?: (HelixHeadlessGraph["linkCountLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
   "linked-both-label"?: (HelixHeadlessGraph["linkedBothLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
@@ -14989,6 +15067,16 @@ the list then holds, written with `count-label`. */
   "using-label"?: (HelixHeadlessGraph["usingLabel"]) | undefined;
   /** The line shown while the graph, with `gestures="activate"`, has the gestures. */
   usingLabel?: (HelixHeadlessGraph["usingLabel"]) | undefined;
+  /** What screen readers hear when a walk along the links moves to a note:
+`{note}` for its name, `{relation}` for how it stands to the note the
+step came from, such as "Linked from Roadmap", and `{index}` and `{count}`
+for its place among that note's links. */
+  "walk-label"?: (HelixHeadlessGraph["walkLabel"]) | undefined;
+  /** What screen readers hear when a walk along the links moves to a note:
+`{note}` for its name, `{relation}` for how it stands to the note the
+step came from, such as "Linked from Roadmap", and `{index}` and `{count}`
+for its place among that note's links. */
+  walkLabel?: (HelixHeadlessGraph["walkLabel"]) | undefined;
   /** The hint shown when the wheel scrolls past the graph with
 `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere. */
   "wheel-hint-label"?: (HelixHeadlessGraph["wheelHintLabel"]) | undefined;
@@ -15187,7 +15275,7 @@ markup. */
   "onhelix-graph-pan"?: ((
     e: HelixHeadlessGraphHelixGraphPanElementEvent,
   ) => void) | undefined;
-  /** The notes, the links, the selection, the depth or the gestures changed. Used by `connectGraph`; pages do not need to listen for it. */
+  /** The notes, the links, the selection, the depth, the note the keys are on, or the gestures changed. Used by `connectGraph`; pages do not need to listen for it. */
   "onhelix-graph-part-change"?: ((
     e: HelixHeadlessGraphHelixGraphPartChangeElementEvent,
   ) => void) | undefined;
@@ -15249,6 +15337,14 @@ or hides its notes. Drawn where the notes have two groups or more. */
   "attr:legend-label"?: (HelixHeadlessGraph["legendLabel"]) | undefined;
   /** The legend's name, read by screen readers. */
   "prop:legendLabel"?: (HelixHeadlessGraph["legendLabel"]) | undefined;
+  /** What screen readers hear when a walk along the links reaches a note that
+has no link to follow, or goes back to a note: `{note}` for its name and
+`{count}` for how many notes the list holds that it links to or from. */
+  "attr:link-count-label"?: (HelixHeadlessGraph["linkCountLabel"]) | undefined;
+  /** What screen readers hear when a walk along the links reaches a note that
+has no link to follow, or goes back to a note: `{note}` for its name and
+`{count}` for how many notes the list holds that it links to or from. */
+  "prop:linkCountLabel"?: (HelixHeadlessGraph["linkCountLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
   "attr:linked-both-label"?: (HelixHeadlessGraph["linkedBothLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
@@ -15328,6 +15424,16 @@ the list then holds, written with `count-label`. */
   "attr:using-label"?: (HelixHeadlessGraph["usingLabel"]) | undefined;
   /** The line shown while the graph, with `gestures="activate"`, has the gestures. */
   "prop:usingLabel"?: (HelixHeadlessGraph["usingLabel"]) | undefined;
+  /** What screen readers hear when a walk along the links moves to a note:
+`{note}` for its name, `{relation}` for how it stands to the note the
+step came from, such as "Linked from Roadmap", and `{index}` and `{count}`
+for its place among that note's links. */
+  "attr:walk-label"?: (HelixHeadlessGraph["walkLabel"]) | undefined;
+  /** What screen readers hear when a walk along the links moves to a note:
+`{note}` for its name, `{relation}` for how it stands to the note the
+step came from, such as "Linked from Roadmap", and `{index}` and `{count}`
+for its place among that note's links. */
+  "prop:walkLabel"?: (HelixHeadlessGraph["walkLabel"]) | undefined;
   /** The hint shown when the wheel scrolls past the graph with
 `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere. */
   "attr:wheel-hint-label"?: (HelixHeadlessGraph["wheelHintLabel"]) | undefined;
@@ -15527,7 +15633,7 @@ markup. */
   "on:helix-graph-pan"?: ((
     e: HelixHeadlessGraphHelixGraphPanElementEvent,
   ) => void) | undefined;
-  /** The notes, the links, the selection, the depth or the gestures changed. Used by `connectGraph`; pages do not need to listen for it. */
+  /** The notes, the links, the selection, the depth, the note the keys are on, or the gestures changed. Used by `connectGraph`; pages do not need to listen for it. */
   "on:helix-graph-part-change"?: ((
     e: HelixHeadlessGraphHelixGraphPartChangeElementEvent,
   ) => void) | undefined;
@@ -32384,18 +32490,28 @@ export type HelixHeadlessTimePickerProps = {
 **Every sentence a control raises in the browser's bubble is a property**,
 named for the validity flag it reports, so a form in another language
 speaks it. Unset is the sentence registered for the page's language, then
-the English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and
-`{mode}` is `single`, `range` or `multiple`, so each can have its own
-sentence. */
+the English. `{example}` is a time written as the picker writes one,
+`2:30 PM` in `en-US` and `14:30` in `de-DE`, `{shape}` is `HH:mm` or
+`HH:mm:ss`, and `{mode}` is `single`, `range` or `multiple`, so each can
+have its own sentence.
+
+**The default names a time as the picker shows one.** It said "Enter a
+time as HH:mm." to a reader whose list showed `2:30 PM`, and a pattern
+token is words for a developer. Time Input says the same. */
   "bad-input-message"?: (HelixHeadlessTimePicker["badInputMessage"]) | undefined;
   /** The validation message for a value that is not a time.
 
 **Every sentence a control raises in the browser's bubble is a property**,
 named for the validity flag it reports, so a form in another language
 speaks it. Unset is the sentence registered for the page's language, then
-the English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and
-`{mode}` is `single`, `range` or `multiple`, so each can have its own
-sentence. */
+the English. `{example}` is a time written as the picker writes one,
+`2:30 PM` in `en-US` and `14:30` in `de-DE`, `{shape}` is `HH:mm` or
+`HH:mm:ss`, and `{mode}` is `single`, `range` or `multiple`, so each can
+have its own sentence.
+
+**The default names a time as the picker shows one.** It said "Enter a
+time as HH:mm." to a reader whose list showed `2:30 PM`, and a pattern
+token is words for a developer. Time Input says the same. */
   badInputMessage?: (HelixHeadlessTimePicker["badInputMessage"]) | undefined;
   /** Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
 
@@ -32732,18 +32848,28 @@ export type HelixHeadlessTimePickerSolidJsProps = {
 **Every sentence a control raises in the browser's bubble is a property**,
 named for the validity flag it reports, so a form in another language
 speaks it. Unset is the sentence registered for the page's language, then
-the English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and
-`{mode}` is `single`, `range` or `multiple`, so each can have its own
-sentence. */
+the English. `{example}` is a time written as the picker writes one,
+`2:30 PM` in `en-US` and `14:30` in `de-DE`, `{shape}` is `HH:mm` or
+`HH:mm:ss`, and `{mode}` is `single`, `range` or `multiple`, so each can
+have its own sentence.
+
+**The default names a time as the picker shows one.** It said "Enter a
+time as HH:mm." to a reader whose list showed `2:30 PM`, and a pattern
+token is words for a developer. Time Input says the same. */
   "attr:bad-input-message"?: (HelixHeadlessTimePicker["badInputMessage"]) | undefined;
   /** The validation message for a value that is not a time.
 
 **Every sentence a control raises in the browser's bubble is a property**,
 named for the validity flag it reports, so a form in another language
 speaks it. Unset is the sentence registered for the page's language, then
-the English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and
-`{mode}` is `single`, `range` or `multiple`, so each can have its own
-sentence. */
+the English. `{example}` is a time written as the picker writes one,
+`2:30 PM` in `en-US` and `14:30` in `de-DE`, `{shape}` is `HH:mm` or
+`HH:mm:ss`, and `{mode}` is `single`, `range` or `multiple`, so each can
+have its own sentence.
+
+**The default names a time as the picker shows one.** It said "Enter a
+time as HH:mm." to a reader whose list showed `2:30 PM`, and a pattern
+token is words for a developer. Time Input says the same. */
   "prop:badInputMessage"?: (HelixHeadlessTimePicker["badInputMessage"]) | undefined;
   /** Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
 
@@ -44613,7 +44739,13 @@ export type CustomElements = {
    * - `trigger-label`/`triggerLabel`: The name of the button that opens the calendar, read by screen readers.
    * - `unavailable-message`/`unavailableMessage`: The message shown when `disable-dates` or `disable-days` bars a date.
    * - `unreadable-message`/`unreadableMessage`: The message for text that is no date, where `bad-input-message` is not
-   * set. `{mode}` is `single`, `range`, or `multiple`.
+   * set. `{mode}` is `single`, `range`, or `multiple`, and `{example}` is a
+   * date written as the field writes one, `August 24, 2026` in `en-US` and
+   * `24. August 2026` in `de-DE` at the default `date-style`.
+   *
+   * **The default names a date the field reads back.** It said "Enter a date
+   * as YYYY-MM-DD." to a reader whose field showed `August 4, 2026`, and a
+   * pattern token is words for a developer. Time Input says the same.
    * - `year-view-label`/`yearViewLabel`: The name of the calendar's heading where it shows a page of years, with
    * `{heading}` filled in.
    * - `empty-message`/`emptyMessage`: What a row of segments reports when the field is required and every
@@ -44997,8 +45129,12 @@ export type CustomElements = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * named for the validity flag it reports, so a form in another language
    * speaks it. Unset is the sentence registered for the page's language, then
-   * the English. `{mode}` is `single`, `range` or `multiple`, so each can have
-   * its own sentence.
+   * the English. `{example}` is a date written as the calendar names one,
+   * `August 24, 2026` in `en-US` and `24. August 2026` in `de-DE`, and `{mode}`
+   * is `single`, `range` or `multiple`, so each can have its own sentence.
+   *
+   * **The default names a date in words.** It said "Enter a date as
+   * YYYY-MM-DD.", and a pattern token is words for a developer.
    * - `calendar`: The calendar the heading, the days, and the months are written in.
    *
    * `gregory`, `buddhist`, `japanese`, `roc`, and `iso8601` are the five
@@ -47652,9 +47788,15 @@ export type CustomElements = {
    *
    * **The picker has an entry of its own.** `FilterMenu` draws its pages with
    * `Menu`, which a field without a picker does not need, so this family's entry
-   * leaves it out. A page that writes one imports
-   * `@fusion.dev/helix/filter-input/menu` as well, and a picker written without it
-   * is reported once the page has loaded, with the entry to add.
+   * leaves it out. A page that writes a `FilterMenu` imports both entries:
+   *
+   * ```js
+   * import '@fusion.dev/helix/filter-input'
+   * import '@fusion.dev/helix/filter-input/menu'
+   * ```
+   *
+   * A picker written without the second is reported once the page has loaded,
+   * with the entry to add.
    *
    * **Suggestions.** Slot options into `suggestions` and the field shows them,
    * moves through them with the arrow keys, and presses one on Enter. The option
@@ -47670,6 +47812,24 @@ export type CustomElements = {
    * completion back and put the caret after it, or the next parse reads the wrong
    * term.
    *
+   * **Suggestions from a source.** Set `source` to a function, and the field asks
+   * it for suggestions as the text changes and draws them as options in the
+   * panel. It is given the term at the caret, the field the term is a value of,
+   * the whole text, and an `AbortSignal`, and returns the suggestions or a
+   * promise of them. `filter-delay` waits for typing to rest before asking, and
+   * a later keystroke aborts a request still out. While a promise is pending, the
+   * panel shows `loading-text` and a screen reader hears it, then the count.
+   * Choosing a suggestion writes its value over the term at the caret, and a
+   * finished `field:value` is read into a chip as Enter would. Cancel its
+   * `helix-select` to write it yourself.
+   *
+   * ```js
+   * filter.source = async ({ field, term, signal }) => {
+   *   const response = await fetch(`/values?field=${field}&q=${term}`, { signal })
+   *   return response.json()
+   * }
+   * ```
+   *
    * **State.** Three things have three different owners:
    *
    * - `value` is the text. The user types, the element applies it, and `input`
@@ -47711,6 +47871,9 @@ export type CustomElements = {
    * them.
    * - `clear-label`/`clearLabel`: The name of the clear button, read by screen readers. The button shows only
    * an icon.
+   * - `filter-delay`/`filterDelay`: How long typing rests before `source` is asked, in milliseconds. A delay
+   * sends one request for a word in place of one for each letter. The arrow
+   * keys and Enter ask at once. `0` asks on every keystroke.
    * - `filter-suggestions`/`filterSuggestions`: Whether the panel narrows itself to the suggestions that hold the term
    * being typed, as React Aria's Autocomplete filters. Off, the panel shows
    * what you slot and you narrow it.
@@ -47818,6 +47981,12 @@ export type CustomElements = {
    * imperatively later, and nothing is hydrating by then.
    *
    * Here rather than on each control.
+   * - `source`: Where the suggestions come from: a function given the term at the caret,
+   * the field it is a value of, the whole text, and an `AbortSignal`, which
+   * returns the suggestions or a promise of them. Each is a string, or a
+   * `value` with a `label` and `disabled`. The field draws them as options in
+   * the panel, beside any you slot. A property only, there being no way to
+   * write a function in markup. See the class description. (property only)
    * - `selectionDirection`: The direction of the selection, named as on `<input>`.
    *
    * **Published for the reason `Input` publishes them, and this element needs
@@ -47874,7 +48043,7 @@ export type CustomElements = {
    * - `helix-before-open`: Fired before the suggestions open. Cancelable: call `preventDefault()` to keep them closed.
    * - `helix-dismiss`: Fired when the user removes a token with its remove button or with Backspace in an empty field. A `FilterChip` that names a declared field sends `helix-facet` instead. Cancelable: call `preventDefault()` to keep the token.
    * - `helix-facet`: Fired when a filter changes, whether it was typed, picked, or removed. Cancelable: call `preventDefault()` to leave the text and the chip as they were.
-   * - `helix-select`: Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on a choice; you decide what it does.
+   * - `helix-select`: Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on an option you slotted, and you decide what it does. A suggestion from `source` is written over the term at the caret unless you cancel it.
    * - `input`: Fired when the text changes.
    * - `toggle`: Fired when the suggestions panel opens or closes, with `newState` and `oldState`.
    *
@@ -47981,7 +48150,7 @@ export type CustomElements = {
    * - `label`: The label above the field.
    * - `lead`: The box before the text that holds the `start` slot.
    * - `live`: The live region that says how many suggestions the open panel offers. It is rendered from the first time the panel opens with suggestions.
-   * - `loading`: Shown in the panel while the suggestions load.
+   * - `loading`: Shown in the panel while the suggestions load: while `loading` is set, or a request to `source` is out.
    * - `rest`: The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
    * - `surface`: The floating panel the suggestions sit in.
    * - `tags`: The row the tokens sit in.
@@ -47991,7 +48160,7 @@ export type CustomElements = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `invalid`: The field has an error to show, from the browser's validation or from your `feedback`.
-   * - `loading`: While `loading` is set.
+   * - `loading`: While `loading` is set, or a request to `source` is out.
    * - `no-results`: `filter-suggestions` hid every suggestion, and `no-results-text` or the `no-results` slot says so.
    * - `open`: The suggestions are open.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -48211,6 +48380,23 @@ export type CustomElements = {
    * Set `depth` to show the local graph: only the notes within that many links
    * of the selected one.
    *
+   * The search field is a combobox over the list. Down and Up move through the
+   * notes while the focus stays in the field, and Enter selects one.
+   *
+   * **Walk the links with Alt and the arrow keys**, in the list or in the
+   * search field once its keys are on a note. The note the keys are on is
+   * marked in the drawing.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Alt+Right | Follows a link, to the first note the one the keys are on links to or from. |
+   * | Alt+Down, Alt+Up | Moves to the next or the previous note linked to the one the step came from, wrapping. |
+   * | Alt+Left | Goes back along the links walked. |
+   *
+   * Right and Left swap on a right-to-left page. Each step says the note, how it
+   * stands to the note it came from, and its place among that note's links,
+   * such as "Hiring plan. Linked from Roadmap. 2 of 3". Enter selects the note.
+   *
    * Set `legend` to name the groups over the drawing, each a button that shows
    * or hides its notes. `hiddenGroups` holds the groups turned off, and the
    * list holds only what the drawing shows. The legend is a toolbar and one tab
@@ -48246,6 +48432,9 @@ export type CustomElements = {
    * - `legend`: Names the groups over the drawing, each a button in its color that shows
    * or hides its notes. Drawn where the notes have two groups or more.
    * - `legend-label`/`legendLabel`: The legend's name, read by screen readers.
+   * - `link-count-label`/`linkCountLabel`: What screen readers hear when a walk along the links reaches a note that
+   * has no link to follow, or goes back to a note: `{note}` for its name and
+   * `{count}` for how many notes the list holds that it links to or from.
    * - `linked-both-label`/`linkedBothLabel`: How a note linked both to and from the selected one is described, with `{note}`.
    * - `linked-from-label`/`linkedFromLabel`: How a note the selected one links to is described, with `{note}`, the selected note's name.
    * - `links-to-label`/`linksToLabel`: How a note that links to the selected one is described, with `{note}`.
@@ -48270,6 +48459,10 @@ export type CustomElements = {
    * the list then holds, written with `count-label`.
    * - `two-finger-hint-label`/`twoFingerHintLabel`: The hint shown when one finger swipes over the graph with `gestures="cooperative"`.
    * - `using-label`/`usingLabel`: The line shown while the graph, with `gestures="activate"`, has the gestures.
+   * - `walk-label`/`walkLabel`: What screen readers hear when a walk along the links moves to a note:
+   * `{note}` for its name, `{relation}` for how it stands to the note the
+   * step came from, such as "Linked from Roadmap", and `{index}` and `{count}`
+   * for its place among that note's links.
    * - `wheel-hint-label`/`wheelHintLabel`: The hint shown when the wheel scrolls past the graph with
    * `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
    * - `zoomed-in-label`/`zoomedInLabel`: What screen readers hear once the drawing has zoomed in, after `moved()`.
@@ -48403,7 +48596,7 @@ export type CustomElements = {
    * - `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.
    * - `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.
    * - `helix-graph-pan`: A pan button or arrow key was pressed. `connectGraph` moves the drawing, then calls `moved()`.
-   * - `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.
+   * - `helix-graph-part-change`: The notes, the links, the selection, the depth, the note the keys are on, or the gestures changed. Used by `connectGraph`; pages do not need to listen for it.
    * - `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.
    * - `helix-graph-signal`: Something passed between two notes, sent by `signal()`. Used by `connectGraph`; pages do not need to listen for it.
    * - `helix-graph-zoom`: A zoom button or key was pressed. `connectGraph` zooms the drawing, then calls `moved()`.
@@ -62663,9 +62856,14 @@ export type CustomElements = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * named for the validity flag it reports, so a form in another language
    * speaks it. Unset is the sentence registered for the page's language, then
-   * the English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and
-   * `{mode}` is `single`, `range` or `multiple`, so each can have its own
-   * sentence.
+   * the English. `{example}` is a time written as the picker writes one,
+   * `2:30 PM` in `en-US` and `14:30` in `de-DE`, `{shape}` is `HH:mm` or
+   * `HH:mm:ss`, and `{mode}` is `single`, `range` or `multiple`, so each can
+   * have its own sentence.
+   *
+   * **The default names a time as the picker shows one.** It said "Enter a
+   * time as HH:mm." to a reader whose list showed `2:30 PM`, and a pattern
+   * token is words for a developer. Time Input says the same.
    * - `disable-times`/`disableTimes`: Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
    *
    * The counterpart to Date Picker's `disable-dates`, and it exists for the same
@@ -74103,7 +74301,13 @@ export type CustomElementsSolidJs = {
    * - `trigger-label`/`triggerLabel`: The name of the button that opens the calendar, read by screen readers.
    * - `unavailable-message`/`unavailableMessage`: The message shown when `disable-dates` or `disable-days` bars a date.
    * - `unreadable-message`/`unreadableMessage`: The message for text that is no date, where `bad-input-message` is not
-   * set. `{mode}` is `single`, `range`, or `multiple`.
+   * set. `{mode}` is `single`, `range`, or `multiple`, and `{example}` is a
+   * date written as the field writes one, `August 24, 2026` in `en-US` and
+   * `24. August 2026` in `de-DE` at the default `date-style`.
+   *
+   * **The default names a date the field reads back.** It said "Enter a date
+   * as YYYY-MM-DD." to a reader whose field showed `August 4, 2026`, and a
+   * pattern token is words for a developer. Time Input says the same.
    * - `year-view-label`/`yearViewLabel`: The name of the calendar's heading where it shows a page of years, with
    * `{heading}` filled in.
    * - `empty-message`/`emptyMessage`: What a row of segments reports when the field is required and every
@@ -74490,8 +74694,12 @@ export type CustomElementsSolidJs = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * named for the validity flag it reports, so a form in another language
    * speaks it. Unset is the sentence registered for the page's language, then
-   * the English. `{mode}` is `single`, `range` or `multiple`, so each can have
-   * its own sentence.
+   * the English. `{example}` is a date written as the calendar names one,
+   * `August 24, 2026` in `en-US` and `24. August 2026` in `de-DE`, and `{mode}`
+   * is `single`, `range` or `multiple`, so each can have its own sentence.
+   *
+   * **The default names a date in words.** It said "Enter a date as
+   * YYYY-MM-DD.", and a pattern token is words for a developer.
    * - `calendar`: The calendar the heading, the days, and the months are written in.
    *
    * `gregory`, `buddhist`, `japanese`, `roc`, and `iso8601` are the five
@@ -77172,9 +77380,15 @@ export type CustomElementsSolidJs = {
    *
    * **The picker has an entry of its own.** `FilterMenu` draws its pages with
    * `Menu`, which a field without a picker does not need, so this family's entry
-   * leaves it out. A page that writes one imports
-   * `@fusion.dev/helix/filter-input/menu` as well, and a picker written without it
-   * is reported once the page has loaded, with the entry to add.
+   * leaves it out. A page that writes a `FilterMenu` imports both entries:
+   *
+   * ```js
+   * import '@fusion.dev/helix/filter-input'
+   * import '@fusion.dev/helix/filter-input/menu'
+   * ```
+   *
+   * A picker written without the second is reported once the page has loaded,
+   * with the entry to add.
    *
    * **Suggestions.** Slot options into `suggestions` and the field shows them,
    * moves through them with the arrow keys, and presses one on Enter. The option
@@ -77190,6 +77404,24 @@ export type CustomElementsSolidJs = {
    * completion back and put the caret after it, or the next parse reads the wrong
    * term.
    *
+   * **Suggestions from a source.** Set `source` to a function, and the field asks
+   * it for suggestions as the text changes and draws them as options in the
+   * panel. It is given the term at the caret, the field the term is a value of,
+   * the whole text, and an `AbortSignal`, and returns the suggestions or a
+   * promise of them. `filter-delay` waits for typing to rest before asking, and
+   * a later keystroke aborts a request still out. While a promise is pending, the
+   * panel shows `loading-text` and a screen reader hears it, then the count.
+   * Choosing a suggestion writes its value over the term at the caret, and a
+   * finished `field:value` is read into a chip as Enter would. Cancel its
+   * `helix-select` to write it yourself.
+   *
+   * ```js
+   * filter.source = async ({ field, term, signal }) => {
+   *   const response = await fetch(`/values?field=${field}&q=${term}`, { signal })
+   *   return response.json()
+   * }
+   * ```
+   *
    * **State.** Three things have three different owners:
    *
    * - `value` is the text. The user types, the element applies it, and `input`
@@ -77231,6 +77463,9 @@ export type CustomElementsSolidJs = {
    * them.
    * - `clear-label`/`clearLabel`: The name of the clear button, read by screen readers. The button shows only
    * an icon.
+   * - `filter-delay`/`filterDelay`: How long typing rests before `source` is asked, in milliseconds. A delay
+   * sends one request for a word in place of one for each letter. The arrow
+   * keys and Enter ask at once. `0` asks on every keystroke.
    * - `filter-suggestions`/`filterSuggestions`: Whether the panel narrows itself to the suggestions that hold the term
    * being typed, as React Aria's Autocomplete filters. Off, the panel shows
    * what you slot and you narrow it.
@@ -77338,6 +77573,12 @@ export type CustomElementsSolidJs = {
    * imperatively later, and nothing is hydrating by then.
    *
    * Here rather than on each control.
+   * - `source`: Where the suggestions come from: a function given the term at the caret,
+   * the field it is a value of, the whole text, and an `AbortSignal`, which
+   * returns the suggestions or a promise of them. Each is a string, or a
+   * `value` with a `label` and `disabled`. The field draws them as options in
+   * the panel, beside any you slot. A property only, there being no way to
+   * write a function in markup. See the class description. (property only)
    * - `selectionDirection`: The direction of the selection, named as on `<input>`.
    *
    * **Published for the reason `Input` publishes them, and this element needs
@@ -77394,7 +77635,7 @@ export type CustomElementsSolidJs = {
    * - `helix-before-open`: Fired before the suggestions open. Cancelable: call `preventDefault()` to keep them closed.
    * - `helix-dismiss`: Fired when the user removes a token with its remove button or with Backspace in an empty field. A `FilterChip` that names a declared field sends `helix-facet` instead. Cancelable: call `preventDefault()` to keep the token.
    * - `helix-facet`: Fired when a filter changes, whether it was typed, picked, or removed. Cancelable: call `preventDefault()` to leave the text and the chip as they were.
-   * - `helix-select`: Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on a choice; you decide what it does.
+   * - `helix-select`: Fired by an option in `suggestions` when it is chosen, and bubbles out of the field. Cancelable: call `preventDefault()` to stop other listeners acting on it. The field takes no action on an option you slotted, and you decide what it does. A suggestion from `source` is written over the term at the caret unless you cancel it.
    * - `input`: Fired when the text changes.
    * - `toggle`: Fired when the suggestions panel opens or closes, with `newState` and `oldState`.
    *
@@ -77501,7 +77742,7 @@ export type CustomElementsSolidJs = {
    * - `label`: The label above the field.
    * - `lead`: The box before the text that holds the `start` slot.
    * - `live`: The live region that says how many suggestions the open panel offers. It is rendered from the first time the panel opens with suggestions.
-   * - `loading`: Shown in the panel while the suggestions load.
+   * - `loading`: Shown in the panel while the suggestions load: while `loading` is set, or a request to `source` is out.
    * - `rest`: The count of tokens that did not fit. It is a `<button>` with `expandable` and a `<span>` without it.
    * - `surface`: The floating panel the suggestions sit in.
    * - `tags`: The row the tokens sit in.
@@ -77511,7 +77752,7 @@ export type CustomElementsSolidJs = {
    * These can be used to apply styling when a component is in a given state.
    *
    * - `invalid`: The field has an error to show, from the browser's validation or from your `feedback`.
-   * - `loading`: While `loading` is set.
+   * - `loading`: While `loading` is set, or a request to `source` is out.
    * - `no-results`: `filter-suggestions` hid every suggestion, and `no-results-text` or the `no-results` slot says so.
    * - `open`: The suggestions are open.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -77733,6 +77974,23 @@ export type CustomElementsSolidJs = {
    * Set `depth` to show the local graph: only the notes within that many links
    * of the selected one.
    *
+   * The search field is a combobox over the list. Down and Up move through the
+   * notes while the focus stays in the field, and Enter selects one.
+   *
+   * **Walk the links with Alt and the arrow keys**, in the list or in the
+   * search field once its keys are on a note. The note the keys are on is
+   * marked in the drawing.
+   *
+   * | Key | What it does |
+   * |---|---|
+   * | Alt+Right | Follows a link, to the first note the one the keys are on links to or from. |
+   * | Alt+Down, Alt+Up | Moves to the next or the previous note linked to the one the step came from, wrapping. |
+   * | Alt+Left | Goes back along the links walked. |
+   *
+   * Right and Left swap on a right-to-left page. Each step says the note, how it
+   * stands to the note it came from, and its place among that note's links,
+   * such as "Hiring plan. Linked from Roadmap. 2 of 3". Enter selects the note.
+   *
    * Set `legend` to name the groups over the drawing, each a button that shows
    * or hides its notes. `hiddenGroups` holds the groups turned off, and the
    * list holds only what the drawing shows. The legend is a toolbar and one tab
@@ -77768,6 +78026,9 @@ export type CustomElementsSolidJs = {
    * - `legend`: Names the groups over the drawing, each a button in its color that shows
    * or hides its notes. Drawn where the notes have two groups or more.
    * - `legend-label`/`legendLabel`: The legend's name, read by screen readers.
+   * - `link-count-label`/`linkCountLabel`: What screen readers hear when a walk along the links reaches a note that
+   * has no link to follow, or goes back to a note: `{note}` for its name and
+   * `{count}` for how many notes the list holds that it links to or from.
    * - `linked-both-label`/`linkedBothLabel`: How a note linked both to and from the selected one is described, with `{note}`.
    * - `linked-from-label`/`linkedFromLabel`: How a note the selected one links to is described, with `{note}`, the selected note's name.
    * - `links-to-label`/`linksToLabel`: How a note that links to the selected one is described, with `{note}`.
@@ -77792,6 +78053,10 @@ export type CustomElementsSolidJs = {
    * the list then holds, written with `count-label`.
    * - `two-finger-hint-label`/`twoFingerHintLabel`: The hint shown when one finger swipes over the graph with `gestures="cooperative"`.
    * - `using-label`/`usingLabel`: The line shown while the graph, with `gestures="activate"`, has the gestures.
+   * - `walk-label`/`walkLabel`: What screen readers hear when a walk along the links moves to a note:
+   * `{note}` for its name, `{relation}` for how it stands to the note the
+   * step came from, such as "Linked from Roadmap", and `{index}` and `{count}`
+   * for its place among that note's links.
    * - `wheel-hint-label`/`wheelHintLabel`: The hint shown when the wheel scrolls past the graph with
    * `gestures="cooperative"`. `{key}` is ⌘ on a Mac and Ctrl elsewhere.
    * - `zoomed-in-label`/`zoomedInLabel`: What screen readers hear once the drawing has zoomed in, after `moved()`.
@@ -77925,7 +78190,7 @@ export type CustomElementsSolidJs = {
    * - `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.
    * - `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.
    * - `helix-graph-pan`: A pan button or arrow key was pressed. `connectGraph` moves the drawing, then calls `moved()`.
-   * - `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.
+   * - `helix-graph-part-change`: The notes, the links, the selection, the depth, the note the keys are on, or the gestures changed. Used by `connectGraph`; pages do not need to listen for it.
    * - `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.
    * - `helix-graph-signal`: Something passed between two notes, sent by `signal()`. Used by `connectGraph`; pages do not need to listen for it.
    * - `helix-graph-zoom`: A zoom button or key was pressed. `connectGraph` zooms the drawing, then calls `moved()`.
@@ -92372,9 +92637,14 @@ export type CustomElementsSolidJs = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * named for the validity flag it reports, so a form in another language
    * speaks it. Unset is the sentence registered for the page's language, then
-   * the English. `{shape}` is how a time is written, `HH:mm` or `HH:mm:ss`, and
-   * `{mode}` is `single`, `range` or `multiple`, so each can have its own
-   * sentence.
+   * the English. `{example}` is a time written as the picker writes one,
+   * `2:30 PM` in `en-US` and `14:30` in `de-DE`, `{shape}` is `HH:mm` or
+   * `HH:mm:ss`, and `{mode}` is `single`, `range` or `multiple`, so each can
+   * have its own sentence.
+   *
+   * **The default names a time as the picker shows one.** It said "Enter a
+   * time as HH:mm." to a reader whose list showed `2:30 PM`, and a pattern
+   * token is words for a developer. Time Input says the same.
    * - `disable-times`/`disableTimes`: Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
    *
    * The counterpart to Date Picker's `disable-dates`, and it exists for the same