@fusion.dev/helix 0.177.1 → 0.178.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.177.1",
+  "version": "0.178.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -54,13 +54,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.177.1",
-    "@fusion.dev/helix-headless": "0.177.1",
-    "@fusion.dev/helix-styles": "0.177.1"
+    "@fusion.dev/helix-core": "0.178.0",
+    "@fusion.dev/helix-headless": "0.178.0",
+    "@fusion.dev/helix-styles": "0.178.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.177.1",
-    "@fusion.dev/helix-testing": "0.177.1",
+    "@fusion.dev/helix-cem": "0.178.0",
+    "@fusion.dev/helix-testing": "0.178.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -12361,10 +12361,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?: (HelixDateInput["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"?: (HelixDateInput["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?: (HelixDateInput["unreadableMessage"]) | undefined;
   /** The name of the calendar's heading where it shows a page of years, with
 `{heading}` filled in. */
@@ -12881,10 +12893,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"?: (HelixDateInput["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"?: (HelixDateInput["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"?: (HelixDateInput["unreadableMessage"]) | undefined;
   /** The name of the calendar's heading where it shows a page of years, with
 `{heading}` filled in. */
@@ -13013,16 +13037,24 @@ a reset should return to. */
 **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"?: (HelixDatePicker["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?: (HelixDatePicker["badInputMessage"]) | undefined;
   /** The calendar the heading, the days, and the months are written in.
 
@@ -13358,16 +13390,24 @@ a reset should return to. */
 **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"?: (HelixDatePicker["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"?: (HelixDatePicker["badInputMessage"]) | undefined;
   /** The calendar the heading, the days, and the months are written in.
 
@@ -16089,6 +16129,14 @@ an icon. */
   /** The name of the clear button, read by screen readers. The button shows only
 an icon. */
   clearLabel?: (HelixFilterInput["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"?: (HelixFilterInput["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?: (HelixFilterInput["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. */
@@ -16166,6 +16214,13 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   name?: (HelixFilterInput["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?: (HelixFilterInput["source"]) | undefined;
 
   /** Fired when the suggestions panel opens or closes, with `newState` and `oldState`. */
   ontoggle?: ((e: HelixFilterInputToggleElementEvent) => void) | undefined;
@@ -16187,7 +16242,7 @@ Here rather than on each control. */
   "onhelix-dismiss"?: ((e: HelixFilterInputHelixDismissElementEvent) => 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: HelixFilterInputHelixFacetElementEvent) => 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: HelixFilterInputHelixSelectElementEvent) => void) | undefined;
   /** Fired when the text changes. */
   oninput?: ((e: HelixFilterInputElementEvent) => void) | undefined;
@@ -16335,6 +16390,14 @@ an icon. */
   /** The name of the clear button, read by screen readers. The button shows only
 an icon. */
   "prop:clearLabel"?: (HelixFilterInput["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"?: (HelixFilterInput["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"?: (HelixFilterInput["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. */
@@ -16412,6 +16475,13 @@ imperatively later, and nothing is hydrating by then.
 
 Here rather than on each control. */
   "prop:name"?: (HelixFilterInput["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"?: (HelixFilterInput["source"]) | undefined;
   /** Fired when the suggestions panel opens or closes, with `newState` and `oldState`. */
   "on:toggle"?: ((e: HelixFilterInputToggleElementEvent) => void) | undefined;
   /** Fired from the input when the user finishes editing the text. */
@@ -16432,7 +16502,7 @@ Here rather than on each control. */
   "on:helix-dismiss"?: ((e: HelixFilterInputHelixDismissElementEvent) => 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. */
   "on:helix-facet"?: ((e: HelixFilterInputHelixFacetElementEvent) => 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: HelixFilterInputHelixSelectElementEvent) => void) | undefined;
   /** Fired when the text changes. */
   "on:input"?: ((e: HelixFilterInputElementEvent) => void) | undefined;
@@ -17158,6 +17228,14 @@ or hides its notes. Drawn where the notes have two groups or more. */
   "legend-label"?: (HelixGraph["legendLabel"]) | undefined;
   /** The legend's name, read by screen readers. */
   legendLabel?: (HelixGraph["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"?: (HelixGraph["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?: (HelixGraph["linkCountLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
   "linked-both-label"?: (HelixGraph["linkedBothLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
@@ -17237,6 +17315,16 @@ the list then holds, written with `count-label`. */
   "using-label"?: (HelixGraph["usingLabel"]) | undefined;
   /** The line shown while the graph, with `gestures="activate"`, has the gestures. */
   usingLabel?: (HelixGraph["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"?: (HelixGraph["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?: (HelixGraph["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"?: (HelixGraph["wheelHintLabel"]) | undefined;
@@ -17280,7 +17368,7 @@ markup. */
   "onhelix-graph-layout"?: ((e: HelixGraphHelixGraphLayoutElementEvent) => void) | undefined;
   /** A pan button or arrow key was pressed. `connectGraph` moves the drawing, then calls `moved()`. */
   "onhelix-graph-pan"?: ((e: HelixGraphHelixGraphPanElementEvent) => 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: HelixGraphHelixGraphPartChangeElementEvent,
   ) => void) | undefined;
@@ -17485,6 +17573,14 @@ or hides its notes. Drawn where the notes have two groups or more. */
   "attr:legend-label"?: (HelixGraph["legendLabel"]) | undefined;
   /** The legend's name, read by screen readers. */
   "prop:legendLabel"?: (HelixGraph["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"?: (HelixGraph["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"?: (HelixGraph["linkCountLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
   "attr:linked-both-label"?: (HelixGraph["linkedBothLabel"]) | undefined;
   /** How a note linked both to and from the selected one is described, with `{note}`. */
@@ -17564,6 +17660,16 @@ the list then holds, written with `count-label`. */
   "attr:using-label"?: (HelixGraph["usingLabel"]) | undefined;
   /** The line shown while the graph, with `gestures="activate"`, has the gestures. */
   "prop:usingLabel"?: (HelixGraph["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"?: (HelixGraph["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"?: (HelixGraph["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"?: (HelixGraph["wheelHintLabel"]) | undefined;
@@ -17606,7 +17712,7 @@ markup. */
   "on:helix-graph-layout"?: ((e: HelixGraphHelixGraphLayoutElementEvent) => void) | undefined;
   /** A pan button or arrow key was pressed. `connectGraph` moves the drawing, then calls `moved()`. */
   "on:helix-graph-pan"?: ((e: HelixGraphHelixGraphPanElementEvent) => 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: HelixGraphHelixGraphPartChangeElementEvent,
   ) => void) | undefined;
@@ -37193,18 +37299,28 @@ a reset should return to. */
 **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"?: (HelixTimePicker["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?: (HelixTimePicker["badInputMessage"]) | undefined;
   /** Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
 
@@ -37541,18 +37657,28 @@ a reset should return to. */
 **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"?: (HelixTimePicker["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"?: (HelixTimePicker["badInputMessage"]) | undefined;
   /** Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
 
@@ -49682,7 +49808,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.
    * - `disabled`: Whether the control is disabled and cannot be used.
@@ -49971,8 +50103,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
@@ -52525,6 +52661,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.
@@ -52573,6 +52712,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
@@ -52630,7 +52775,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.
    *
    * ## Slots
@@ -52756,7 +52901,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.
@@ -52766,7 +52911,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.
@@ -53168,6 +53313,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}`.
@@ -53192,6 +53340,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()`.
@@ -53239,7 +53391,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()`.
@@ -68167,9 +68319,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
@@ -79349,7 +79506,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.
    * - `disabled`: Whether the control is disabled and cannot be used.
@@ -79641,8 +79804,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
@@ -82240,6 +82407,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.
@@ -82288,6 +82458,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
@@ -82345,7 +82521,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.
    *
    * ## Slots
@@ -82471,7 +82647,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.
@@ -82481,7 +82657,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.
@@ -82891,6 +83067,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}`.
@@ -82915,6 +83094,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()`.
@@ -82962,7 +83145,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()`.
@@ -98163,9 +98346,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