@fusion.dev/helix-headless 0.183.0 → 0.184.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.183.0",
+  "version": "0.184.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -49,14 +49,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.183.0",
-    "@fusion.dev/helix-icons": "0.183.0",
+    "@fusion.dev/helix-core": "0.184.0",
+    "@fusion.dev/helix-icons": "0.184.0",
     "tslib": "^2.8.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.183.0",
-    "@fusion.dev/helix-testing": "0.183.0",
+    "@fusion.dev/helix-cem": "0.184.0",
+    "@fusion.dev/helix-testing": "0.184.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

@@ -6392,7 +6392,11 @@ whole of it, which Shiki writes, are taken off, so the lines sit level
 with the gutter's numbers and the block keeps one tab stop. The code stays
 in the slot, so the copy button copies it as written and a reader without
 the script still has it. Not called on a server, which has no code to
-read, nor for a diff. */
+read, nor for a diff.
+
+Absent, the block draws with the highlighter `registerHighlighter` gave
+every block, where an entry such as `@fusion.dev/helix-sandbox/code-block`
+registered one, and plain otherwise. */
   highlight?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
 
   /** A file tab showed its file, whose name `file` now holds. */
@@ -6634,7 +6638,11 @@ whole of it, which Shiki writes, are taken off, so the lines sit level
 with the gutter's numbers and the block keeps one tab stop. The code stays
 in the slot, so the copy button copies it as written and a reader without
 the script still has it. Not called on a server, which has no code to
-read, nor for a diff. */
+read, nor for a diff.
+
+Absent, the block draws with the highlighter `registerHighlighter` gave
+every block, where an entry such as `@fusion.dev/helix-sandbox/code-block`
+registered one, and plain otherwise. */
   "prop:highlight"?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
   /** A file tab showed its file, whose name `file` now holds. */
   "on:change"?: ((e: HelixHeadlessCodeBlockElementEvent) => void) | undefined;
@@ -21529,7 +21537,11 @@ Cleared as the menu closes and as a submenu opens or closes, so each page
 starts with every row showing. */
   filter?: (HelixHeadlessMenu["filter"]) | undefined;
   /** Whether the menu shows a field above its rows that narrows them as the
-reader types, with focus staying in the field. */
+reader types, with focus staying in the field, once
+`@fusion.dev/helix/menu/filter` (or `@fusion.dev/helix-headless/menu/filter`)
+is imported. Without that import it does nothing, so a menu that never
+filters carries none of the filter's code, and a development build says
+which import is missing. */
   filterable?: (HelixHeadlessMenu["filterable"]) | undefined;
   /** The filter field's name and placeholder. */
   "filter-label"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
@@ -21667,7 +21679,11 @@ Cleared as the menu closes and as a submenu opens or closes, so each page
 starts with every row showing. */
   "prop:filter"?: (HelixHeadlessMenu["filter"]) | undefined;
   /** Whether the menu shows a field above its rows that narrows them as the
-reader types, with focus staying in the field. */
+reader types, with focus staying in the field, once
+`@fusion.dev/helix/menu/filter` (or `@fusion.dev/helix-headless/menu/filter`)
+is imported. Without that import it does nothing, so a menu that never
+filters carries none of the filter's code, and a development build says
+which import is missing. */
   "prop:filterable"?: (HelixHeadlessMenu["filterable"]) | undefined;
   /** The filter field's name and placeholder. */
   "attr:filter-label"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
@@ -31763,6 +31779,12 @@ number, and both are carried as one comma-separated value, which is what a
 form submits. `TimePicker` carries the longer note on the interaction and
 on why a wheel cannot do either. */
   mode?: (HelixHeadlessTimeInput["mode"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  "now-label"?: (HelixHeadlessTimeInput["nowLabel"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  nowLabel?: (HelixHeadlessTimeInput["nowLabel"]) | undefined;
   /** Placeholder text shown before a time is entered. */
   placeholder?: (HelixHeadlessTimeInput["placeholder"]) | undefined;
   /** The message shown when a range holds more than two times.
@@ -31803,6 +31825,14 @@ removes rather than as "Remove" said once per time. */
 may give them, the field writes them, and the list's `step` counts seconds.
 See Time Picker's `seconds`. */
   seconds?: (HelixHeadlessTimeInput["seconds"]) | undefined;
+  /** Draws a button under the times in the list that chooses the current time,
+moved to the nearest time on offer. See Time Picker's `show-now`. Its words
+are `now-label`. */
+  "show-now"?: (HelixHeadlessTimeInput["showNow"]) | undefined;
+  /** Draws a button under the times in the list that chooses the current time,
+moved to the nearest time on offer. See Time Picker's `show-now`. Its words
+are `now-label`. */
+  showNow?: (HelixHeadlessTimeInput["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`. */
   step?: (HelixHeadlessTimeInput["step"]) | undefined;
@@ -32171,6 +32201,12 @@ number, and both are carried as one comma-separated value, which is what a
 form submits. `TimePicker` carries the longer note on the interaction and
 on why a wheel cannot do either. */
   "prop:mode"?: (HelixHeadlessTimeInput["mode"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  "attr:now-label"?: (HelixHeadlessTimeInput["nowLabel"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  "prop:nowLabel"?: (HelixHeadlessTimeInput["nowLabel"]) | undefined;
   /** Placeholder text shown before a time is entered. */
   "prop:placeholder"?: (HelixHeadlessTimeInput["placeholder"]) | undefined;
   /** The message shown when a range holds more than two times.
@@ -32211,6 +32247,14 @@ removes rather than as "Remove" said once per time. */
 may give them, the field writes them, and the list's `step` counts seconds.
 See Time Picker's `seconds`. */
   "prop:seconds"?: (HelixHeadlessTimeInput["seconds"]) | undefined;
+  /** Draws a button under the times in the list that chooses the current time,
+moved to the nearest time on offer. See Time Picker's `show-now`. Its words
+are `now-label`. */
+  "bool:show-now"?: (HelixHeadlessTimeInput["showNow"]) | undefined;
+  /** Draws a button under the times in the list that chooses the current time,
+moved to the nearest time on offer. See Time Picker's `show-now`. Its words
+are `now-label`. */
+  "prop:showNow"?: (HelixHeadlessTimeInput["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`. */
   "prop:step"?: (HelixHeadlessTimeInput["step"]) | undefined;
@@ -42127,6 +42171,20 @@ export type CustomElements = {
    * the slot, so the copy button and the page's own text are the code as
    * written.
    *
+   * **Code Block ships no grammar**, so plain code costs you no parser. To color
+   * code without a highlighter of your own, import one more entry beside the
+   * block's. It colors every block by its `language` (`css`, `html`, `js`,
+   * `jsx`, `sh`, `ts`, or `tsx`) with the Lezer grammars of the sandbox's
+   * editor, in the editor's colors:
+   *
+   * ```js
+   * import '@fusion.dev/helix/code-block'
+   * import '@fusion.dev/helix-sandbox/code-block'
+   * ```
+   *
+   * That entry calls `registerHighlighter`, which you can also call yourself to
+   * give every block one highlighter of your own.
+   *
    * Set `expandable` on a block whose height is capped, such as by
    * `--code-block-max-block-size`, and a button under it shows every line and
    * then fewer again, as a docs site's long example does. The button is drawn
@@ -42299,7 +42357,11 @@ export type CustomElements = {
    * with the gutter's numbers and the block keeps one tab stop. The code stays
    * in the slot, so the copy button copies it as written and a reader without
    * the script still has it. Not called on a server, which has no code to
-   * read, nor for a diff. (property only)
+   * read, nor for a diff.
+   *
+   * Absent, the block draws with the highlighter `registerHighlighter` gave
+   * every block, where an entry such as `@fusion.dev/helix-sandbox/code-block`
+   * registered one, and plain otherwise. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -53664,7 +53726,15 @@ export type CustomElements = {
    * opens it from the keyboard, and the trigger is described by
    * `long-press-label`, which says so.
    *
-   * **A filter field.** With `filterable`, the menu opens with focus in a field
+   * **A filter field** is a separate import, `@fusion.dev/helix/menu/filter`, so
+   * a menu that never filters carries none of its code:
+   *
+   * ```js
+   * import '@fusion.dev/helix/menu'
+   * import '@fusion.dev/helix/menu/filter'
+   * ```
+   *
+   * With it imported and `filterable` set, the menu opens with focus in a field
    * above its rows, and typing narrows the rows of the page the keys move in,
    * as React Aria's `Autocomplete` around a `Menu` does. A row is kept where its
    * words hold the filter, in any case, or where `filterMatch` says so. Each
@@ -53697,7 +53767,11 @@ export type CustomElements = {
    * Cleared as the menu closes and as a submenu opens or closes, so each page
    * starts with every row showing.
    * - `filterable`: Whether the menu shows a field above its rows that narrows them as the
-   * reader types, with focus staying in the field.
+   * reader types, with focus staying in the field, once
+   * `@fusion.dev/helix/menu/filter` (or `@fusion.dev/helix-headless/menu/filter`)
+   * is imported. Without that import it does nothing, so a menu that never
+   * filters carries none of the filter's code, and a development build says
+   * which import is missing.
    * - `filter-label`/`filterLabel`: The filter field's name and placeholder.
    * - `label`: Accessible name for the surface.
    *
@@ -62684,6 +62758,8 @@ export type CustomElements = {
    * number, and both are carried as one comma-separated value, which is what a
    * form submits. `TimePicker` carries the longer note on the interaction and
    * on why a wheel cannot do either.
+   * - `now-label`/`nowLabel`: The words on the list's button that chooses the current time, drawn with
+   * `show-now`.
    * - `placeholder`: Placeholder text shown before a time is entered.
    * - `range-length-message`/`rangeLengthMessage`: The message shown when a range holds more than two times.
    *
@@ -62701,6 +62777,9 @@ export type CustomElements = {
    * - `seconds`: Whether times carry their seconds: the value is `HH:mm:ss`, a typed time
    * may give them, the field writes them, and the list's `step` counts seconds.
    * See Time Picker's `seconds`.
+   * - `show-now`/`showNow`: Draws a button under the times in the list that chooses the current time,
+   * moved to the nearest time on offer. See Time Picker's `show-now`. Its words
+   * are `now-label`.
    * - `step`: How far apart the offered times are, in minutes, or in seconds with
    * `seconds`.
    * - `time-style`/`timeStyle`: Whether the field shows the time in the local style or as the value
@@ -71901,6 +71980,20 @@ export type CustomElementsSolidJs = {
    * the slot, so the copy button and the page's own text are the code as
    * written.
    *
+   * **Code Block ships no grammar**, so plain code costs you no parser. To color
+   * code without a highlighter of your own, import one more entry beside the
+   * block's. It colors every block by its `language` (`css`, `html`, `js`,
+   * `jsx`, `sh`, `ts`, or `tsx`) with the Lezer grammars of the sandbox's
+   * editor, in the editor's colors:
+   *
+   * ```js
+   * import '@fusion.dev/helix/code-block'
+   * import '@fusion.dev/helix-sandbox/code-block'
+   * ```
+   *
+   * That entry calls `registerHighlighter`, which you can also call yourself to
+   * give every block one highlighter of your own.
+   *
    * Set `expandable` on a block whose height is capped, such as by
    * `--code-block-max-block-size`, and a button under it shows every line and
    * then fewer again, as a docs site's long example does. The button is drawn
@@ -72073,7 +72166,11 @@ export type CustomElementsSolidJs = {
    * with the gutter's numbers and the block keeps one tab stop. The code stays
    * in the slot, so the copy button copies it as written and a reader without
    * the script still has it. Not called on a server, which has no code to
-   * read, nor for a diff. (property only)
+   * read, nor for a diff.
+   *
+   * Absent, the block draws with the highlighter `registerHighlighter` gave
+   * every block, where an entry such as `@fusion.dev/helix-sandbox/code-block`
+   * registered one, and plain otherwise. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -83558,7 +83655,15 @@ export type CustomElementsSolidJs = {
    * opens it from the keyboard, and the trigger is described by
    * `long-press-label`, which says so.
    *
-   * **A filter field.** With `filterable`, the menu opens with focus in a field
+   * **A filter field** is a separate import, `@fusion.dev/helix/menu/filter`, so
+   * a menu that never filters carries none of its code:
+   *
+   * ```js
+   * import '@fusion.dev/helix/menu'
+   * import '@fusion.dev/helix/menu/filter'
+   * ```
+   *
+   * With it imported and `filterable` set, the menu opens with focus in a field
    * above its rows, and typing narrows the rows of the page the keys move in,
    * as React Aria's `Autocomplete` around a `Menu` does. A row is kept where its
    * words hold the filter, in any case, or where `filterMatch` says so. Each
@@ -83591,7 +83696,11 @@ export type CustomElementsSolidJs = {
    * Cleared as the menu closes and as a submenu opens or closes, so each page
    * starts with every row showing.
    * - `filterable`: Whether the menu shows a field above its rows that narrows them as the
-   * reader types, with focus staying in the field.
+   * reader types, with focus staying in the field, once
+   * `@fusion.dev/helix/menu/filter` (or `@fusion.dev/helix-headless/menu/filter`)
+   * is imported. Without that import it does nothing, so a menu that never
+   * filters carries none of the filter's code, and a development build says
+   * which import is missing.
    * - `filter-label`/`filterLabel`: The filter field's name and placeholder.
    * - `label`: Accessible name for the surface.
    *
@@ -92692,6 +92801,8 @@ export type CustomElementsSolidJs = {
    * number, and both are carried as one comma-separated value, which is what a
    * form submits. `TimePicker` carries the longer note on the interaction and
    * on why a wheel cannot do either.
+   * - `now-label`/`nowLabel`: The words on the list's button that chooses the current time, drawn with
+   * `show-now`.
    * - `placeholder`: Placeholder text shown before a time is entered.
    * - `range-length-message`/`rangeLengthMessage`: The message shown when a range holds more than two times.
    *
@@ -92709,6 +92820,9 @@ export type CustomElementsSolidJs = {
    * - `seconds`: Whether times carry their seconds: the value is `HH:mm:ss`, a typed time
    * may give them, the field writes them, and the list's `step` counts seconds.
    * See Time Picker's `seconds`.
+   * - `show-now`/`showNow`: Draws a button under the times in the list that chooses the current time,
+   * moved to the nearest time on offer. See Time Picker's `show-now`. Its words
+   * are `now-label`.
    * - `step`: How far apart the offered times are, in minutes, or in seconds with
    * `seconds`.
    * - `time-style`/`timeStyle`: Whether the field shows the time in the local style or as the value

package/types/vue.d.ts

@@ -40,6 +40,7 @@ import type {
   HelixHeadlessChat,
   HelixHeadlessCheckboxGroup,
   HelixHeadlessCheckbox,
+  registerHighlighter,
   HelixHeadlessCodeBlock,
   HelixHeadlessCode,
   HelixHeadlessColorInput,
@@ -3432,7 +3433,11 @@ whole of it, which Shiki writes, are taken off, so the lines sit level
 with the gutter's numbers and the block keeps one tab stop. The code stays
 in the slot, so the copy button copies it as written and a reader without
 the script still has it. Not called on a server, which has no code to
-read, nor for a diff. */
+read, nor for a diff.
+
+Absent, the block draws with the highlighter `registerHighlighter` gave
+every block, where an entry such as `@fusion.dev/helix-sandbox/code-block`
+registered one, and plain otherwise. */
   highlight?: (HelixHeadlessCodeBlock["highlight"]) | undefined;
 };
 
@@ -11042,7 +11047,11 @@ Cleared as the menu closes and as a submenu opens or closes, so each page
 starts with every row showing. */
   filter?: (HelixHeadlessMenu["filter"]) | undefined;
   /** Whether the menu shows a field above its rows that narrows them as the
-reader types, with focus staying in the field. */
+reader types, with focus staying in the field, once
+`@fusion.dev/helix/menu/filter` (or `@fusion.dev/helix-headless/menu/filter`)
+is imported. Without that import it does nothing, so a menu that never
+filters carries none of the filter's code, and a development build says
+which import is missing. */
   filterable?: (HelixHeadlessMenu["filterable"]) | undefined;
   /** The filter field's name and placeholder. */
   "filter-label"?: (HelixHeadlessMenu["filterLabel"]) | undefined;
@@ -16294,6 +16303,12 @@ number, and both are carried as one comma-separated value, which is what a
 form submits. `TimePicker` carries the longer note on the interaction and
 on why a wheel cannot do either. */
   mode?: (HelixHeadlessTimeInput["mode"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  "now-label"?: (HelixHeadlessTimeInput["nowLabel"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  nowLabel?: (HelixHeadlessTimeInput["nowLabel"]) | undefined;
   /** Placeholder text shown before a time is entered. */
   placeholder?: (HelixHeadlessTimeInput["placeholder"]) | undefined;
   /** The message shown when a range holds more than two times.
@@ -16334,6 +16349,14 @@ removes rather than as "Remove" said once per time. */
 may give them, the field writes them, and the list's `step` counts seconds.
 See Time Picker's `seconds`. */
   seconds?: (HelixHeadlessTimeInput["seconds"]) | undefined;
+  /** Draws a button under the times in the list that chooses the current time,
+moved to the nearest time on offer. See Time Picker's `show-now`. Its words
+are `now-label`. */
+  "show-now"?: (HelixHeadlessTimeInput["showNow"]) | undefined;
+  /** Draws a button under the times in the list that chooses the current time,
+moved to the nearest time on offer. See Time Picker's `show-now`. Its words
+are `now-label`. */
+  showNow?: (HelixHeadlessTimeInput["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`. */
   step?: (HelixHeadlessTimeInput["step"]) | undefined;
@@ -19444,7 +19467,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCheckboxVueProps,
     HelixHeadlessCheckboxVueEvents
   >;
-  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'mark-lines' to mark lines a reader should look at, such as '2, 4-6': the block draws a band behind each run, placed where the lines are laid out, so it follows a highlighter's markup and lines that wrap. 'added-lines' and 'removed-lines' mark lines the same way as inserted and deleted, as Expressive Code's 'ins' and 'del' do, in code that is not a diff. The bands are drawn and hidden from screen readers, so say in the text around the block what a marked line means. Set 'wrap' to wrap long lines rather than scroll them; a gutter then numbers each line where it starts. Set 'wrappable' for a button in the header that turns 'wrap' on and off, pressed while the lines wrap.  The header holds the name, the 'actions' slot, and the copy button. Slot a control into 'actions', such as a button that sets 'wrap' or one that opens the code in an editor, and the block draws a header for it even with no name. 'copy-icon' and 'copied-icon' replace the copy button's two icons. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Where a removed line is paired with the added line that replaced it, the words each does not share with the other are the 'changed' part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement. 'context-lines' folds each long run of unchanged lines, keeping that many beside each change, behind a button that shows them and hides them again, as a code host draws a diff written with more context than a reader needs.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable.  **Several blocks are files**, one shown at a time under a row of tabs, as Sandbox shows its source panes. Put Code Blocks in the default slot of a Code Block, and each is a file named on its tab by its 'label' or, without one, its 'language'. 'file' holds the name of the file shown. The tabs are a tab list: the arrow keys move to a tab and show its file, the two swapping on a right-to-left page, and Home and End go to the first and the last. Choosing one sends 'helix-before-change' with the file's name, which you can cancel, and 'change' once 'file' holds it. The files not shown carry 'hidden', and the one shown draws no name of its own, its tab naming it. One block draws no tabs. A server cannot see the blocks inside, so the client draws the tabs once it upgrades. */
+  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'mark-lines' to mark lines a reader should look at, such as '2, 4-6': the block draws a band behind each run, placed where the lines are laid out, so it follows a highlighter's markup and lines that wrap. 'added-lines' and 'removed-lines' mark lines the same way as inserted and deleted, as Expressive Code's 'ins' and 'del' do, in code that is not a diff. The bands are drawn and hidden from screen readers, so say in the text around the block what a marked line means. Set 'wrap' to wrap long lines rather than scroll them; a gutter then numbers each line where it starts. Set 'wrappable' for a button in the header that turns 'wrap' on and off, pressed while the lines wrap.  The header holds the name, the 'actions' slot, and the copy button. Slot a control into 'actions', such as a button that sets 'wrap' or one that opens the code in an editor, and the block draws a header for it even with no name. 'copy-icon' and 'copied-icon' replace the copy button's two icons. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  **Code Block ships no grammar**, so plain code costs you no parser. To color code without a highlighter of your own, import one more entry beside the block's. It colors every block by its 'language' ('css', 'html', 'js', 'jsx', 'sh', 'ts', or 'tsx') with the Lezer grammars of the sandbox's editor, in the editor's colors:  '''js import '@fusion.dev/helix/code-block' import '@fusion.dev/helix-sandbox/code-block' '''  That entry calls 'registerHighlighter', which you can also call yourself to give every block one highlighter of your own.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Where a removed line is paired with the added line that replaced it, the words each does not share with the other are the 'changed' part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement. 'context-lines' folds each long run of unchanged lines, keeping that many beside each change, behind a button that shows them and hides them again, as a code host draws a diff written with more context than a reader needs.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable.  **Several blocks are files**, one shown at a time under a row of tabs, as Sandbox shows its source panes. Put Code Blocks in the default slot of a Code Block, and each is a file named on its tab by its 'label' or, without one, its 'language'. 'file' holds the name of the file shown. The tabs are a tab list: the arrow keys move to a tab and show its file, the two swapping on a right-to-left page, and Home and End go to the first and the last. Choosing one sends 'helix-before-change' with the file's name, which you can cancel, and 'change' once 'file' holds it. The files not shown carry 'hidden', and the one shown draws no name of its own, its tab naming it. One block draws no tabs. A server cannot see the blocks inside, so the client draws the tabs once it upgrades. */
   "helix-headless-code-block": DefineCustomElement<
     HelixHeadlessCodeBlock,
     HelixHeadlessCodeBlockVueProps,
@@ -19768,7 +19791,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessMenuItemVueProps,
     HelixHeadlessMenuItemVueEvents
   >;
-  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover. Focus follows a mouse resting on a row in either mode, and a drilled page is a 'menu' named by the row that opened it.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose (Space on a choice row changes it and leaves the menu open), Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page. Left Arrow on the top page does nothing. Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  **The choices in one place.** 'checkedValues' holds the values of the rows that are checked, anywhere in the menu, and setting it checks exactly those rows, as React Aria's 'selectedKeys' does. 'change' is sent on the menu when a reader's choice changes it.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so.  **A filter field.** With 'filterable', the menu opens with focus in a field above its rows, and typing narrows the rows of the page the keys move in, as React Aria's 'Autocomplete' around a 'Menu' does. A row is kept where its words hold the filter, in any case, or where 'filterMatch' says so. Each page starts unfiltered, and the filter is cleared as the menu closes. Where typing keeps no row, the menu shows 'no-results-text'. Focus stays in the field: Up and Down Arrow move the highlight through the rows that are left, Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow on a submenu goes back, and Escape clears the filter and then closes the menu. A screen reader hears how many rows the filter keeps ('results-label'). Home, End and the other keys move the caret and type. The field names the highlighted row with 'aria-activedescendant', and the rows are a 'menu' after the field. Cancel 'helix-filter' to keep every row showing and narrow the rows yourself, such as by replacing them with rows from a server. */
+  /** The trigger is slotted and stays your own element, as with the tooltip. The menu renders its surface in the top layer with the popover API, so an ancestor with 'overflow: hidden' does not clip it and it needs no 'z-index'.  Slot a 'helix-button' or 'helix-icon-button' as the trigger, and the menu tells it that it opens a menu and whether the menu is open, inside its own shadow root. On a plain element, such as a '<button>', the menu writes 'aria-haspopup="menu"' and 'aria-expanded', from a frame after its own first render, so a server's markup is never changed while a framework hydrates it. It never writes 'aria-expanded' where you wrote it yourself.  Submenus drill down by default. A submenu replaces the panel's content, and a back row returns to the previous page. One panel stays inside a narrow window, and works on touch screens, which have no hover. Focus follows a mouse resting on a row in either mode, and a drilled page is a 'menu' named by the row that opened it.  **'submenus="flyout"' opens each submenu in a panel of its own beside its row**, as React Aria's 'SubmenuTrigger' and Radix's 'Sub' do. Resting the pointer on the row opens it, and a pointer crossing toward the open panel over the rows between keeps it open, as Radix's grace area does. Right Arrow opens a row's submenu on its first row, and Left Arrow or Escape closes it and returns focus to the row, the two arrows swapping on a right-to-left page. The row says 'aria-expanded', and the panel is a 'menu' named by the row.  The root holds which page is open, because only one page shows at a time. It sets this on items as a property, never as an attribute. An attribute written onto your element after it upgrades causes a hydration mismatch.  Group rows under a heading with 'Menu.Section', which is a 'group' named by its heading. Between runs of rows, a '<helix-divider>' is a separator a screen reader announces.  Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first row, and Up Arrow on its last. In the menu, Up and Down Arrow move between rows, Home and End go to the first and the last, a typed letter moves to the next row whose name starts with it, Enter and Space choose (Space on a choice row changes it and leaves the menu open), Right Arrow opens a row's submenu and Left Arrow goes back, the two swapping on a right-to-left page. Left Arrow on the top page does nothing. Escape closes the menu and returns focus to the trigger. Tab closes it and moves on.  While it is open, the surface carries the trigger's width as '--floating-anchor-inline-size' and the room left below it as '--floating-available-block-size', as Radix's dropdown menu publishes its trigger's width, for a menu as wide as its trigger: 'helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }'.  **The choices in one place.** 'checkedValues' holds the values of the rows that are checked, anywhere in the menu, and setting it checks exactly those rows, as React Aria's 'selectedKeys' does. 'change' is sent on the menu when a reader's choice changes it.  With 'context', the trigger is an area and the menu is its context menu: a right-click, a long press, Shift+F10 or the menu key over the area opens it at the pointer, or at the area's corner from the keyboard, as Radix's context menu does. A press on the area does not open it, and closing it returns focus to where it was. A touch or a pen held still on the area opens it too, on every browser, since iOS sends no 'contextmenu' for one.  **A trigger with its own action.** With 'open-on="long-press"', a press on the trigger is the trigger's own, and a press held for half a second opens the menu, as React Aria's 'trigger="longPress"' does. Alt+Down or Alt+Up opens it from the keyboard, and the trigger is described by 'long-press-label', which says so.  **A filter field** is a separate import, '@fusion.dev/helix/menu/filter', so a menu that never filters carries none of its code:  '''js import '@fusion.dev/helix/menu' import '@fusion.dev/helix/menu/filter' '''  With it imported and 'filterable' set, the menu opens with focus in a field above its rows, and typing narrows the rows of the page the keys move in, as React Aria's 'Autocomplete' around a 'Menu' does. A row is kept where its words hold the filter, in any case, or where 'filterMatch' says so. Each page starts unfiltered, and the filter is cleared as the menu closes. Where typing keeps no row, the menu shows 'no-results-text'. Focus stays in the field: Up and Down Arrow move the highlight through the rows that are left, Enter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow on a submenu goes back, and Escape clears the filter and then closes the menu. A screen reader hears how many rows the filter keeps ('results-label'). Home, End and the other keys move the caret and type. The field names the highlighted row with 'aria-activedescendant', and the rows are a 'menu' after the field. Cancel 'helix-filter' to keep every row showing and narrow the rows yourself, such as by replacing them with rows from a server. */
   "helix-headless-menu": DefineCustomElement<
     HelixHeadlessMenu,
     HelixHeadlessMenuVueProps,

package/types/words.d.ts

@@ -3284,6 +3284,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `{kind, select, date {Enter a whole date.} other {Enter a whole time.}}`
        */
       incompleteMessage: Message
+      /**
+       * The words on the list's button that chooses the current time, drawn with
+       * `show-now`.
+       *
+       * English: `Now`
+       */
+      nowLabel: Message
       /**
        * Placeholder text shown before a time is entered.
        *