@fusion.dev/helix 0.183.0 → 0.184.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.184.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.184.0",
+    "@fusion.dev/helix-headless": "0.184.0",
+    "@fusion.dev/helix-styles": "0.184.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.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

@@ -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;
@@ -24301,7 +24309,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 +24447,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;
@@ -36806,6 +36822,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 +36868,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 +37244,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 +37290,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 +47554,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
@@ -58364,7 +58412,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 +62729,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 +62921,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`.
    *
@@ -68241,6 +68306,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 +68325,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 +77377,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
@@ -88328,7 +88402,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 +92798,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 +92993,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`.
    *
@@ -98387,6 +98478,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 +98497,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;
 };
 
@@ -12495,7 +12499,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;
@@ -19001,6 +19009,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 +19055,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;
@@ -24877,13 +24899,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,

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