@fusion.dev/helix 0.183.0 → 0.185.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.183.0",
+  "version": "0.185.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -54,14 +54,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.183.0",
-    "@fusion.dev/helix-headless": "0.183.0",
-    "@fusion.dev/helix-styles": "0.183.0",
+    "@fusion.dev/helix-core": "0.185.0",
+    "@fusion.dev/helix-headless": "0.185.0",
+    "@fusion.dev/helix-styles": "0.185.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.183.0",
-    "@fusion.dev/helix-testing": "0.183.0",
+    "@fusion.dev/helix-cem": "0.185.0",
+    "@fusion.dev/helix-testing": "0.185.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

@@ -8045,7 +8045,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?: (HelixCodeBlock["highlight"]) | undefined;
 
   /** A file tab showed its file, whose name `file` now holds. */
@@ -8285,7 +8289,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"?: (HelixCodeBlock["highlight"]) | undefined;
   /** A file tab showed its file, whose name `file` now holds. */
   "on:change"?: ((e: HelixCodeBlockElementEvent) => void) | undefined;
@@ -11133,6 +11141,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   childField?: (HelixDataTable["childField"]) | undefined;
+  /** The column tracks, as a grid track list such as `2fr 1fr max-content`,
+dealt out one track to a column in the order the columns are written. A
+column's own `width` wins in its place, and a column it does not reach
+takes the track a column with no `width` takes.
+
+**The one track list a server can send.** A server rendering this element
+has no columns to read a `width` from, and neither has a stylesheet laying
+out the rows a page served before the table upgrades, so a table sized here
+lays those rows out at the widths it draws. */
+  columns?: (HelixDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "default-expanded"?: (HelixDataTable["defaultExpanded"]) | undefined;
@@ -11552,6 +11570,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   "prop:childField"?: (HelixDataTable["childField"]) | undefined;
+  /** The column tracks, as a grid track list such as `2fr 1fr max-content`,
+dealt out one track to a column in the order the columns are written. A
+column's own `width` wins in its place, and a column it does not reach
+takes the track a column with no `width` takes.
+
+**The one track list a server can send.** A server rendering this element
+has no columns to read a `width` from, and neither has a stylesheet laying
+out the rows a page served before the table upgrades, so a table sized here
+lays those rows out at the widths it draws. */
+  "prop:columns"?: (HelixDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "attr:default-expanded"?: (HelixDataTable["defaultExpanded"]) | undefined;
@@ -24301,7 +24329,11 @@ Cleared as the menu closes and as a submenu opens or closes, so each page
 starts with every row showing. */
   filter?: (HelixMenu["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?: (HelixMenu["filterable"]) | undefined;
   /** The filter field's name and placeholder. */
   "filter-label"?: (HelixMenu["filterLabel"]) | undefined;
@@ -24435,7 +24467,11 @@ Cleared as the menu closes and as a submenu opens or closes, so each page
 starts with every row showing. */
   "prop:filter"?: (HelixMenu["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"?: (HelixMenu["filterable"]) | undefined;
   /** The filter field's name and placeholder. */
   "attr:filter-label"?: (HelixMenu["filterLabel"]) | undefined;
@@ -34736,13 +34772,11 @@ and each column may say otherwise.
 **It is also the only track list a server can send.** The shim has no tree
 to walk, so a render there knows of no columns and this attribute is the
 whole answer: a table given one lays its grid out in the first paint, and a
-table sized only by its columns is one track wide until it upgrades.
+table sized only by its columns takes, until it upgrades, a track for each
+column at the width a column with no `width` takes (`helix.css`).
 
-**Data Table has none of this, and should not.** Its columns are its schema
-rather than an option, so there is always a column to write a `width` on
-and a list here would be a second way to say what that says. This table's
-cells are markup, and a table written as rows of cells with no column
-declared in it has nowhere else to be sized from. */
+Data Table takes the same list, for the same reason: a data table that
+serves its first page as rows is laid out by it before it upgrades. */
   columns?: (HelixTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -34999,13 +35033,11 @@ and each column may say otherwise.
 **It is also the only track list a server can send.** The shim has no tree
 to walk, so a render there knows of no columns and this attribute is the
 whole answer: a table given one lays its grid out in the first paint, and a
-table sized only by its columns is one track wide until it upgrades.
+table sized only by its columns takes, until it upgrades, a track for each
+column at the width a column with no `width` takes (`helix.css`).
 
-**Data Table has none of this, and should not.** Its columns are its schema
-rather than an option, so there is always a column to write a `width` on
-and a list here would be a second way to say what that says. This table's
-cells are markup, and a table written as rows of cells with no column
-declared in it has nowhere else to be sized from. */
+Data Table takes the same list, for the same reason: a data table that
+serves its first page as rows is laid out by it before it upgrades. */
   "prop:columns"?: (HelixTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -36806,6 +36838,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?: (HelixTimeInput["mode"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  "now-label"?: (HelixTimeInput["nowLabel"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  nowLabel?: (HelixTimeInput["nowLabel"]) | undefined;
   /** Placeholder text shown before a time is entered. */
   placeholder?: (HelixTimeInput["placeholder"]) | undefined;
   /** The message shown when a range holds more than two times.
@@ -36846,6 +36884,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?: (HelixTimeInput["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"?: (HelixTimeInput["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?: (HelixTimeInput["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`. */
   step?: (HelixTimeInput["step"]) | undefined;
@@ -37214,6 +37260,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"?: (HelixTimeInput["mode"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  "attr:now-label"?: (HelixTimeInput["nowLabel"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  "prop:nowLabel"?: (HelixTimeInput["nowLabel"]) | undefined;
   /** Placeholder text shown before a time is entered. */
   "prop:placeholder"?: (HelixTimeInput["placeholder"]) | undefined;
   /** The message shown when a range holds more than two times.
@@ -37254,6 +37306,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"?: (HelixTimeInput["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"?: (HelixTimeInput["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"?: (HelixTimeInput["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`. */
   "prop:step"?: (HelixTimeInput["step"]) | undefined;
@@ -47510,7 +47570,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
@@ -49363,7 +49427,9 @@ export type CustomElements = {
    * Write it under the columns as `helix-table-row` and `helix-table-cell`
    * elements. `@fusion.dev/helix-styles/helix.css` lays them out as the table
    * draws them before it upgrades, and the table shows them until `rows` holds a
-   * row.
+   * row. It holds the checkbox column and the pagination's row from the first
+   * paint, and takes the widths from `columns`, so nothing moves when the table
+   * upgrades or draws its own rows.
    *
    * ## Attributes & Properties
    *
@@ -49384,6 +49450,15 @@ export type CustomElements = {
    *
    * Reflected, because the styled tier indents a tree grid's row headers by
    * it. No default, so a table that sets none writes nothing onto its host.
+   * - `columns`: The column tracks, as a grid track list such as `2fr 1fr max-content`,
+   * dealt out one track to a column in the order the columns are written. A
+   * column's own `width` wins in its place, and a column it does not reach
+   * takes the track a column with no `width` takes.
+   *
+   * **The one track list a server can send.** A server rendering this element
+   * has no columns to read a `width` from, and neither has a stylesheet laying
+   * out the rows a page served before the table upgrades, so a table sized here
+   * lays those rows out at the widths it draws.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows open at the start, separated by commas. Used until
    * `expanded` is set.
    * - `default-filter`/`defaultFilter`: The starting search query, used until `filter` is set.
@@ -58364,7 +58439,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.
    *
@@ -62677,6 +62756,15 @@ export type CustomElements = {
    * in the `js` pane or in another module loads it. A sandbox writes each pane
    * named for a module file here.
    *
+   * **A module in TypeScript or JSX runs too**: a path ending in `.ts`, `.tsx`
+   * or `.jsx` is compiled to JavaScript first, and imported by its path or by
+   * its path without the extension. The compiler, Sucrase, loads from `cdn` the
+   * first time a module needs it, so the package carries none and a preview
+   * with no such module loads none. JSX compiles to the automatic runtime,
+   * `react/jsx-runtime`, from `dependencies`, or to the one a
+   * `@jsxImportSource` comment names. What fails to compile shows in the
+   * `error` part as an error the example threw, when the example imports it.
+   *
    * **Examples render in a frame**, so an example's styles and scripts do not
    * affect the page around the sandbox, and `position: fixed` stays inside the
    * pane. The frame starts empty, with its own stylesheets and its own custom
@@ -62860,6 +62948,10 @@ export type CustomElements = {
    * - `js` sets a script that runs as a module after the markup.
    * - A module file name ending in `.js` or `.mjs`, such as `utils.js`, is a
    *   module the other scripts import by its path, `./utils.js`.
+   * - A module file name ending in `.ts`, `.tsx` or `.jsx`, such as `app.tsx`,
+   *   is one too, which the preview compiles to JavaScript first. The `js` pane
+   *   runs it with `import './app.tsx'`. A file that does not compile shows
+   *   why over the preview, as an error the example threw.
    * - `package.json` sets the npm packages the scripts import by name, from its
    *   `dependencies`, which load from the preview's `cdn`.
    *
@@ -66046,7 +66138,7 @@ export type CustomElements = {
    *
    * The ribbon stops moving in these cases:
    * - `prefers-reduced-motion` is set. The element shows one still frame, and in
-   *   `travel` still follows the scroll, without easing.
+   *   `travel` still follows the scroll.
    * - The element is off screen or in a background tab.
    *
    * It shows a gradient from the same tokens in these cases, and matches
@@ -66775,13 +66867,11 @@ export type CustomElements = {
    * **It is also the only track list a server can send.** The shim has no tree
    * to walk, so a render there knows of no columns and this attribute is the
    * whole answer: a table given one lays its grid out in the first paint, and a
-   * table sized only by its columns is one track wide until it upgrades.
+   * table sized only by its columns takes, until it upgrades, a track for each
+   * column at the width a column with no `width` takes (`helix.css`).
    *
-   * **Data Table has none of this, and should not.** Its columns are its schema
-   * rather than an option, so there is always a column to write a `width` on
-   * and a list here would be a second way to say what that says. This table's
-   * cells are markup, and a table written as rows of cells with no column
-   * declared in it has nowhere else to be sized from.
+   * Data Table takes the same list, for the same reason: a data table that
+   * serves its first page as rows is laid out by it before it upgrades.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
    * commas. Used until `expanded` is set.
    * - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`
@@ -68241,6 +68331,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.
    *
@@ -68258,6 +68350,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
@@ -77307,7 +77402,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
@@ -79180,7 +79279,9 @@ export type CustomElementsSolidJs = {
    * Write it under the columns as `helix-table-row` and `helix-table-cell`
    * elements. `@fusion.dev/helix-styles/helix.css` lays them out as the table
    * draws them before it upgrades, and the table shows them until `rows` holds a
-   * row.
+   * row. It holds the checkbox column and the pagination's row from the first
+   * paint, and takes the widths from `columns`, so nothing moves when the table
+   * upgrades or draws its own rows.
    *
    * ## Attributes & Properties
    *
@@ -79201,6 +79302,15 @@ export type CustomElementsSolidJs = {
    *
    * Reflected, because the styled tier indents a tree grid's row headers by
    * it. No default, so a table that sets none writes nothing onto its host.
+   * - `columns`: The column tracks, as a grid track list such as `2fr 1fr max-content`,
+   * dealt out one track to a column in the order the columns are written. A
+   * column's own `width` wins in its place, and a column it does not reach
+   * takes the track a column with no `width` takes.
+   *
+   * **The one track list a server can send.** A server rendering this element
+   * has no columns to read a `width` from, and neither has a stylesheet laying
+   * out the rows a page served before the table upgrades, so a table sized here
+   * lays those rows out at the widths it draws.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows open at the start, separated by commas. Used until
    * `expanded` is set.
    * - `default-filter`/`defaultFilter`: The starting search query, used until `filter` is set.
@@ -88328,7 +88438,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.
    *
@@ -92720,6 +92834,15 @@ export type CustomElementsSolidJs = {
    * in the `js` pane or in another module loads it. A sandbox writes each pane
    * named for a module file here.
    *
+   * **A module in TypeScript or JSX runs too**: a path ending in `.ts`, `.tsx`
+   * or `.jsx` is compiled to JavaScript first, and imported by its path or by
+   * its path without the extension. The compiler, Sucrase, loads from `cdn` the
+   * first time a module needs it, so the package carries none and a preview
+   * with no such module loads none. JSX compiles to the automatic runtime,
+   * `react/jsx-runtime`, from `dependencies`, or to the one a
+   * `@jsxImportSource` comment names. What fails to compile shows in the
+   * `error` part as an error the example threw, when the example imports it.
+   *
    * **Examples render in a frame**, so an example's styles and scripts do not
    * affect the page around the sandbox, and `position: fixed` stays inside the
    * pane. The frame starts empty, with its own stylesheets and its own custom
@@ -92906,6 +93029,10 @@ export type CustomElementsSolidJs = {
    * - `js` sets a script that runs as a module after the markup.
    * - A module file name ending in `.js` or `.mjs`, such as `utils.js`, is a
    *   module the other scripts import by its path, `./utils.js`.
+   * - A module file name ending in `.ts`, `.tsx` or `.jsx`, such as `app.tsx`,
+   *   is one too, which the preview compiles to JavaScript first. The `js` pane
+   *   runs it with `import './app.tsx'`. A file that does not compile shows
+   *   why over the preview, as an error the example threw.
    * - `package.json` sets the npm packages the scripts import by name, from its
    *   `dependencies`, which load from the preview's `cdn`.
    *
@@ -96152,7 +96279,7 @@ export type CustomElementsSolidJs = {
    *
    * The ribbon stops moving in these cases:
    * - `prefers-reduced-motion` is set. The element shows one still frame, and in
-   *   `travel` still follows the scroll, without easing.
+   *   `travel` still follows the scroll.
    * - The element is off screen or in a background tab.
    *
    * It shows a gradient from the same tokens in these cases, and matches
@@ -96896,13 +97023,11 @@ export type CustomElementsSolidJs = {
    * **It is also the only track list a server can send.** The shim has no tree
    * to walk, so a render there knows of no columns and this attribute is the
    * whole answer: a table given one lays its grid out in the first paint, and a
-   * table sized only by its columns is one track wide until it upgrades.
+   * table sized only by its columns takes, until it upgrades, a track for each
+   * column at the width a column with no `width` takes (`helix.css`).
    *
-   * **Data Table has none of this, and should not.** Its columns are its schema
-   * rather than an option, so there is always a column to write a `width` on
-   * and a list here would be a second way to say what that says. This table's
-   * cells are markup, and a table written as rows of cells with no column
-   * declared in it has nowhere else to be sized from.
+   * Data Table takes the same list, for the same reason: a data table that
+   * serves its first page as rows is laid out by it before it upgrades.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
    * commas. Used until `expanded` is set.
    * - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`
@@ -98387,6 +98512,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.
    *
@@ -98404,6 +98531,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

@@ -4261,7 +4261,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?: (HelixCodeBlock["highlight"]) | undefined;
 };
 
@@ -5758,6 +5762,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   childField?: (HelixDataTable["childField"]) | undefined;
+  /** The column tracks, as a grid track list such as `2fr 1fr max-content`,
+dealt out one track to a column in the order the columns are written. A
+column's own `width` wins in its place, and a column it does not reach
+takes the track a column with no `width` takes.
+
+**The one track list a server can send.** A server rendering this element
+has no columns to read a `width` from, and neither has a stylesheet laying
+out the rows a page served before the table upgrades, so a table sized here
+lays those rows out at the widths it draws. */
+  columns?: (HelixDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "default-expanded"?: (HelixDataTable["defaultExpanded"]) | undefined;
@@ -12495,7 +12509,11 @@ Cleared as the menu closes and as a submenu opens or closes, so each page
 starts with every row showing. */
   filter?: (HelixMenu["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?: (HelixMenu["filterable"]) | undefined;
   /** The filter field's name and placeholder. */
   "filter-label"?: (HelixMenu["filterLabel"]) | undefined;
@@ -17840,13 +17858,11 @@ and each column may say otherwise.
 **It is also the only track list a server can send.** The shim has no tree
 to walk, so a render there knows of no columns and this attribute is the
 whole answer: a table given one lays its grid out in the first paint, and a
-table sized only by its columns is one track wide until it upgrades.
+table sized only by its columns takes, until it upgrades, a track for each
+column at the width a column with no `width` takes (`helix.css`).
 
-**Data Table has none of this, and should not.** Its columns are its schema
-rather than an option, so there is always a column to write a `width` on
-and a list here would be a second way to say what that says. This table's
-cells are markup, and a table written as rows of cells with no column
-declared in it has nowhere else to be sized from. */
+Data Table takes the same list, for the same reason: a data table that
+serves its first page as rows is laid out by it before it upgrades. */
   columns?: (HelixTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -19001,6 +19017,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?: (HelixTimeInput["mode"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  "now-label"?: (HelixTimeInput["nowLabel"]) | undefined;
+  /** The words on the list's button that chooses the current time, drawn with
+`show-now`. */
+  nowLabel?: (HelixTimeInput["nowLabel"]) | undefined;
   /** Placeholder text shown before a time is entered. */
   placeholder?: (HelixTimeInput["placeholder"]) | undefined;
   /** The message shown when a range holds more than two times.
@@ -19041,6 +19063,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?: (HelixTimeInput["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"?: (HelixTimeInput["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?: (HelixTimeInput["showNow"]) | undefined;
   /** How far apart the offered times are, in minutes, or in seconds with
 `seconds`. */
   step?: (HelixTimeInput["step"]) | undefined;
@@ -24433,7 +24463,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixCopyButtonVueProps,
     HelixCopyButtonVueEvents
   >;
-  /** Rows have hairline rules between them and no fill, and the headings are set apart by weight and color. Helix shows depth with a single border and no elevation, and a header band would be elevation.  The grid scrolls in its own box, and the toolbar and footer sit outside it, so the search field stays in place when the columns scroll sideways.  'windowed' draws only the rows in view, for a result too long to lay out at once, and the headings stay in place while the rows scroll. It works with or without 'paginated' and with either 'mode', so a page or a chunk from a server can be windowed.  **Write the first page as rows, so the served HTML carries the values.** Write it under the columns as 'helix-table-row' and 'helix-table-cell' elements. '@fusion.dev/helix-styles/helix.css' lays them out as the table draws them before it upgrades, and the table shows them until 'rows' holds a row. */
+  /** Rows have hairline rules between them and no fill, and the headings are set apart by weight and color. Helix shows depth with a single border and no elevation, and a header band would be elevation.  The grid scrolls in its own box, and the toolbar and footer sit outside it, so the search field stays in place when the columns scroll sideways.  'windowed' draws only the rows in view, for a result too long to lay out at once, and the headings stay in place while the rows scroll. It works with or without 'paginated' and with either 'mode', so a page or a chunk from a server can be windowed.  **Write the first page as rows, so the served HTML carries the values.** Write it under the columns as 'helix-table-row' and 'helix-table-cell' elements. '@fusion.dev/helix-styles/helix.css' lays them out as the table draws them before it upgrades, and the table shows them until 'rows' holds a row. It holds the checkbox column and the pagination's row from the first paint, and takes the widths from 'columns', so nothing moves when the table upgrades or draws its own rows. */
   "helix-data-table": DefineCustomElement<
     HelixDataTable,
     HelixDataTableVueProps,
@@ -24877,13 +24907,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixRatingVueProps,
     HelixRatingVueEvents
   >;
-  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Without 'src', the frame loads a built-in document**, so a sandbox renders with nothing to host. It runs HTML, CSS, and scripts, and reports the console, uncaught errors, its height, and presses as a frame on 'servePreview' does. It defines no element, so an example that uses Helix components needs a 'src' that imports them.  **'imports' lets an example import packages by name** in the built-in document, as an import map: each name maps to the address of an ES module, such as '{"canvas-confetti": "https://esm.sh/canvas-confetti@1.9.3"}', and 'import confetti from 'canvas-confetti'' in the 'js' pane then loads it. A CDN that serves npm packages as modules, such as esm.sh or jsDelivr's '+esm', gives every package an address. A new map loads the document again, since a browser reads one only as a document starts. A 'src' document declares its own.  **'dependencies' names packages by version instead**, as a 'package.json' does: '{"canvas-confetti": "^1.9"}' loads 'canvas-confetti' and the paths under it from 'cdn', 'https://esm.sh/' by default, at the version or range given. An address in 'imports' wins over a package of the same name.  **'modules' holds files the example imports by a relative path**: each path, such as 'utils.js', to its source, and 'import { add } from './utils.js'' in the 'js' pane or in another module loads it. A sandbox writes each pane named for a module file here.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none.  **A preview says where it is.** It is ':state(loading)' from the moment it has a 'src' until that document can take the example, and again through 'reload()'. It is ':state(failed)' once the example throws an error it does not catch, until the next source is sent, which a frame on 'servePreview' reports. A page draws its own spinner or message from either, such as a sibling shown by 'helix-sandbox-preview:state(failed) + .message'.  **A failed preview shows the error over the example**, in the 'error' part, until the next source is sent. The terminal says it too, so the part is not announced, and it is the frame's description while it shows, so a screen reader reads it with the frame. Hide it with '::part(error) { display: none }' where the page draws its own.  **'controls' draws two buttons in the preview's corner**: one reloads the frame's document, as 'reload()' does, and one opens the example in a new tab, as 'open()' does. The tab runs it in a frame sandboxed as this one is. */
+  /** A sandboxed '<iframe>' that loads 'src', a document you provide. That document imports what the examples need, listens for a render message, and writes the markup into itself.  **Without 'src', the frame loads a built-in document**, so a sandbox renders with nothing to host. It runs HTML, CSS, and scripts, and reports the console, uncaught errors, its height, and presses as a frame on 'servePreview' does. It defines no element, so an example that uses Helix components needs a 'src' that imports them.  **'imports' lets an example import packages by name** in the built-in document, as an import map: each name maps to the address of an ES module, such as '{"canvas-confetti": "https://esm.sh/canvas-confetti@1.9.3"}', and 'import confetti from 'canvas-confetti'' in the 'js' pane then loads it. A CDN that serves npm packages as modules, such as esm.sh or jsDelivr's '+esm', gives every package an address. A new map loads the document again, since a browser reads one only as a document starts. A 'src' document declares its own.  **'dependencies' names packages by version instead**, as a 'package.json' does: '{"canvas-confetti": "^1.9"}' loads 'canvas-confetti' and the paths under it from 'cdn', 'https://esm.sh/' by default, at the version or range given. An address in 'imports' wins over a package of the same name.  **'modules' holds files the example imports by a relative path**: each path, such as 'utils.js', to its source, and 'import { add } from './utils.js'' in the 'js' pane or in another module loads it. A sandbox writes each pane named for a module file here.  **A module in TypeScript or JSX runs too**: a path ending in '.ts', '.tsx' or '.jsx' is compiled to JavaScript first, and imported by its path or by its path without the extension. The compiler, Sucrase, loads from 'cdn' the first time a module needs it, so the package carries none and a preview with no such module loads none. JSX compiles to the automatic runtime, 'react/jsx-runtime', from 'dependencies', or to the one a '@jsxImportSource' comment names. What fails to compile shows in the 'error' part as an error the example threw, when the example imports it.  **Examples render in a frame**, so an example's styles and scripts do not affect the page around the sandbox, and 'position: fixed' stays inside the pane. The frame starts empty, with its own stylesheets and its own custom element registry, so 'src' must load the styles and components the examples use.  **The source is untrusted, and the frame keeps it isolated.** The frame uses 'sandbox="allow-scripts"' and never 'allow-same-origin'. Together, the two let a document on the same origin remove its own sandbox, which is the same as having none.  **A preview says where it is.** It is ':state(loading)' from the moment it has a 'src' until that document can take the example, and again through 'reload()'. It is ':state(failed)' once the example throws an error it does not catch, until the next source is sent, which a frame on 'servePreview' reports. A page draws its own spinner or message from either, such as a sibling shown by 'helix-sandbox-preview:state(failed) + .message'.  **A failed preview shows the error over the example**, in the 'error' part, until the next source is sent. The terminal says it too, so the part is not announced, and it is the frame's description while it shows, so a screen reader reads it with the frame. Hide it with '::part(error) { display: none }' where the page draws its own.  **'controls' draws two buttons in the preview's corner**: one reloads the frame's document, as 'reload()' does, and one opens the example in a new tab, as 'open()' does. The tab runs it in a frame sandboxed as this one is. */
   "helix-sandbox-preview": DefineCustomElement<
     HelixSandboxPreview,
     HelixSandboxPreviewVueProps,
     HelixSandboxPreviewVueEvents
   >;
-  /** A source pane dispatches 'helix-before-edit', which bubbles, and the sandbox passes the value to the preview slotted into it. The source pane and the preview do not reference each other, so you can replace either one or use it alone.  The preview runs an edit once typing has rested for 'preview-delay', 300 milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.  The event carries the pane's 'name', so one sandbox can hold several panes. The names the sandbox writes into its previews:  - 'html' sets the preview's markup. - 'css' sets its stylesheet. - 'js' sets a script that runs as a module after the markup. - A module file name ending in '.js' or '.mjs', such as 'utils.js', is a   module the other scripts import by its path, './utils.js'. - 'package.json' sets the npm packages the scripts import by name, from its   'dependencies', which load from the preview's 'cdn'.  The sandbox ignores a pane with any other name, so that pane can show content without changing the preview.  **The sandbox is ':state(modified)' while a source pane holds an edit**, and that pane's file tab is also 'file-modified' and described as modified to a screen reader. 'reset()' puts every pane back to the source it was given.  **The dividers are two nested 'helix-splitter' elements**, which handle the pointer, the keyboard, and the corner. The inner splitter holds the panes and the outer one holds the panel, so the panel spans the full width.  **Several source panes are files**, one shown at a time under a row of tabs, each named by the pane's 'label' or, without one, its 'name'. 'file' holds the 'name' of the pane shown. The tabs are a tab list: the arrow keys move between them and show each pane, and 'Home' and 'End' go to the first and the last. Choosing one sends 'helix-before-change' with the pane's 'name', which you can cancel, and 'change' once 'file' holds it. The panes not shown carry 'hidden'. One pane draws no tabs.  **Any editor can be the source pane**: an element in the 'source' slot with a 'name' that dispatches 'helix-before-edit' with its text, which bubbles. A wrapper around CodeMirror or Monaco sends one on each change and is a pane like 'helix-sandbox-source', and the sandbox reads its 'value' to seed the preview. Dispatch 'helix-caret' from it too for the status bar's position.  Sandbox is styled only and has behavior, as 'Aura' is. Its behavior is the hand-off from a source pane to a preview frame, which works with any pane that sends 'helix-before-edit', and what it draws is the layout around them: dividers, file tabs, and a panel. A page that wants another look slots its own panes and keeps the hand-off, so there is nothing for a headless version to hold.  A development build warns about a source pane with no 'label' and no 'name', whose file tab would have no words.  On a focused divider, the arrow keys move it, and 'Home' and 'End' move it to its ends. 'Enter' on the panes divider shuts the lead pane, and pressed again it opens the pane where it was. 'Enter' on the panel divider shuts the panel to 'panel-collapsed-size', and pressed again it opens the panel to its last height. */
+  /** A source pane dispatches 'helix-before-edit', which bubbles, and the sandbox passes the value to the preview slotted into it. The source pane and the preview do not reference each other, so you can replace either one or use it alone.  The preview runs an edit once typing has rested for 'preview-delay', 300 milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.  The event carries the pane's 'name', so one sandbox can hold several panes. The names the sandbox writes into its previews:  - 'html' sets the preview's markup. - 'css' sets its stylesheet. - 'js' sets a script that runs as a module after the markup. - A module file name ending in '.js' or '.mjs', such as 'utils.js', is a   module the other scripts import by its path, './utils.js'. - A module file name ending in '.ts', '.tsx' or '.jsx', such as 'app.tsx',   is one too, which the preview compiles to JavaScript first. The 'js' pane   runs it with 'import './app.tsx''. A file that does not compile shows   why over the preview, as an error the example threw. - 'package.json' sets the npm packages the scripts import by name, from its   'dependencies', which load from the preview's 'cdn'.  The sandbox ignores a pane with any other name, so that pane can show content without changing the preview.  **The sandbox is ':state(modified)' while a source pane holds an edit**, and that pane's file tab is also 'file-modified' and described as modified to a screen reader. 'reset()' puts every pane back to the source it was given.  **The dividers are two nested 'helix-splitter' elements**, which handle the pointer, the keyboard, and the corner. The inner splitter holds the panes and the outer one holds the panel, so the panel spans the full width.  **Several source panes are files**, one shown at a time under a row of tabs, each named by the pane's 'label' or, without one, its 'name'. 'file' holds the 'name' of the pane shown. The tabs are a tab list: the arrow keys move between them and show each pane, and 'Home' and 'End' go to the first and the last. Choosing one sends 'helix-before-change' with the pane's 'name', which you can cancel, and 'change' once 'file' holds it. The panes not shown carry 'hidden'. One pane draws no tabs.  **Any editor can be the source pane**: an element in the 'source' slot with a 'name' that dispatches 'helix-before-edit' with its text, which bubbles. A wrapper around CodeMirror or Monaco sends one on each change and is a pane like 'helix-sandbox-source', and the sandbox reads its 'value' to seed the preview. Dispatch 'helix-caret' from it too for the status bar's position.  Sandbox is styled only and has behavior, as 'Aura' is. Its behavior is the hand-off from a source pane to a preview frame, which works with any pane that sends 'helix-before-edit', and what it draws is the layout around them: dividers, file tabs, and a panel. A page that wants another look slots its own panes and keeps the hand-off, so there is nothing for a headless version to hold.  A development build warns about a source pane with no 'label' and no 'name', whose file tab would have no words.  On a focused divider, the arrow keys move it, and 'Home' and 'End' move it to its ends. 'Enter' on the panes divider shuts the lead pane, and pressed again it opens the pane where it was. 'Enter' on the panel divider shuts the panel to 'panel-collapsed-size', and pressed again it opens the panel to its last height. */
   "helix-sandbox": DefineCustomElement<
     HelixSandbox,
     HelixSandboxVueProps,
@@ -25003,7 +25033,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixStepVueProps,
     HelixStepVueEvents
   >;
-  /** Hundreds of thin strands are drawn as one ribbon, and the light they add together is bloomed, so where they converge the ribbon burns hot. The ribbon moves on its own all the time: it sways and breathes, its strands wave and roll over one another, and light runs along them.  Its palette comes from the tokens. The strands are '--helix-color-primary', a few are '--helix-color-accent' for depth, and the page they light is '--helix-color-background'. On a light page the light becomes ink, because light added to near-white cannot be seen.  **Four forms, set with 'variant'.** 'bend' turns bright strands through one tight point, with its arms opening to the right. 'ribbon', the default, is a broad, soft ribbon in long curves. 'sweep' enters at a top corner, the one 'at' is nearer, and crosses in one diagonal to the far side. 'waves' is sharp strands crossing the full width.  **Quiet behind words.** 'quiet' names elements, such as a hero's words, that the light dims behind to a faint glow, so a bright ribbon can cross the page under them and they stay crisp.  **In its own box, by default.** The element fills the box it is given, the way an image does, and 'at' places the bend's apex or the ribbon's axis across it. Content placed inside sits over the ribbon, in the 'content' part.  **Down the whole page, with 'travel'.** The element fixes itself behind the page, on '--helix-layer-beneath', and lays one ribbon from the top of the page to the bottom, so scrolling travels along it. Put 'helix-strands-stop' elements inside to pin a form to a section: each names an element with 'for' and says which form the ribbon takes there. Between stops the ribbon fills the gap in its own 'variant', and between two waves less than a screen and a half apart it turns off screen so each wave reads alone. Set 'z-index' on the element to move it.  The ribbon stops moving in these cases: - 'prefers-reduced-motion' is set. The element shows one still frame, and in   'travel' still follows the scroll, without easing. - The element is off screen or in a background tab.  It shows a gradient from the same tokens in these cases, and matches ':state(fallback)' and sends 'helix-strands-fallback' with the reason: - The renderer draws on the CPU, such as a headless browser or a machine with   no usable GPU. - There is no WebGL, or the browser took the drawing context back.  Strands is styled only and has behavior, as 'Aura' does: its behavior is drawing to a canvas, so there is no structure for a headless version to hold. */
+  /** Hundreds of thin strands are drawn as one ribbon, and the light they add together is bloomed, so where they converge the ribbon burns hot. The ribbon moves on its own all the time: it sways and breathes, its strands wave and roll over one another, and light runs along them.  Its palette comes from the tokens. The strands are '--helix-color-primary', a few are '--helix-color-accent' for depth, and the page they light is '--helix-color-background'. On a light page the light becomes ink, because light added to near-white cannot be seen.  **Four forms, set with 'variant'.** 'bend' turns bright strands through one tight point, with its arms opening to the right. 'ribbon', the default, is a broad, soft ribbon in long curves. 'sweep' enters at a top corner, the one 'at' is nearer, and crosses in one diagonal to the far side. 'waves' is sharp strands crossing the full width.  **Quiet behind words.** 'quiet' names elements, such as a hero's words, that the light dims behind to a faint glow, so a bright ribbon can cross the page under them and they stay crisp.  **In its own box, by default.** The element fills the box it is given, the way an image does, and 'at' places the bend's apex or the ribbon's axis across it. Content placed inside sits over the ribbon, in the 'content' part.  **Down the whole page, with 'travel'.** The element fixes itself behind the page, on '--helix-layer-beneath', and lays one ribbon from the top of the page to the bottom, so scrolling travels along it. Put 'helix-strands-stop' elements inside to pin a form to a section: each names an element with 'for' and says which form the ribbon takes there. Between stops the ribbon fills the gap in its own 'variant', and between two waves less than a screen and a half apart it turns off screen so each wave reads alone. Set 'z-index' on the element to move it.  The ribbon stops moving in these cases: - 'prefers-reduced-motion' is set. The element shows one still frame, and in   'travel' still follows the scroll. - The element is off screen or in a background tab.  It shows a gradient from the same tokens in these cases, and matches ':state(fallback)' and sends 'helix-strands-fallback' with the reason: - The renderer draws on the CPU, such as a headless browser or a machine with   no usable GPU. - There is no WebGL, or the browser took the drawing context back.  Strands is styled only and has behavior, as 'Aura' does: its behavior is drawing to a canvas, so there is no structure for a headless version to hold. */
   "helix-strands": DefineCustomElement<
     HelixStrands,
     HelixStrandsVueProps,

package/types/words.d.ts

@@ -502,6 +502,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Notes`
        */
       notesLabel: Message
+      /**
+       * The words on the list's button that chooses the current time, drawn with
+       * `show-now`.
+       *
+       * English: `Now`
+       */
+      nowLabel: Message
       /**
        * The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
        * `busiest-label` and `total-label`, `{busiest}` the busiest reading's name