@fusion.dev/helix 0.183.0 → 0.184.0

package/custom-elements.json

@@ -39555,6 +39555,22 @@
       "path": "src/code-block/index.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "CodeBlockHighlighter",
+          "declaration": {
+            "name": "CodeBlockHighlighter",
+            "package": "@fusion.dev/helix-headless/code-block"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerHighlighter",
+          "declaration": {
+            "name": "registerHighlighter",
+            "package": "@fusion.dev/helix-headless/code-block"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -39952,7 +39968,7 @@
               "type": {
                 "text": "(code: string, language: string) => string | undefined"
               },
-              "description": "Turns the code into highlighted markup, which the block draws in place of\nthe plain text.\n\nCalled with the code as written and the block's `language`, and returning\nHTML, such as the output of Shiki's `codeToHtml` or Prism's `highlight`.\nOne function serves every block on a page, each block saying its own\nlanguage:\n\n```js\nfor (const block of document.querySelectorAll('helix-code-block')) {\n  block.highlight = (code, lang) => codeToHtml(code, { lang, theme: 'github-light' })\n}\n```\n\n**The markup is drawn as given**, so it has to escape the code it was\nhanded, which those highlighters do. A `<pre>` and `<code>` around the\nwhole of it, which Shiki writes, are taken off, so the lines sit level\nwith the gutter's numbers and the block keeps one tab stop. The code stays\nin the slot, so the copy button copies it as written and a reader without\nthe script still has it. Not called on a server, which has no code to\nread, nor for a diff.",
+              "description": "Turns the code into highlighted markup, which the block draws in place of\nthe plain text.\n\nCalled with the code as written and the block's `language`, and returning\nHTML, such as the output of Shiki's `codeToHtml` or Prism's `highlight`.\nOne function serves every block on a page, each block saying its own\nlanguage:\n\n```js\nfor (const block of document.querySelectorAll('helix-code-block')) {\n  block.highlight = (code, lang) => codeToHtml(code, { lang, theme: 'github-light' })\n}\n```\n\n**The markup is drawn as given**, so it has to escape the code it was\nhanded, which those highlighters do. A `<pre>` and `<code>` around the\nwhole of it, which Shiki writes, are taken off, so the lines sit level\nwith the gutter's numbers and the block keeps one tab stop. The code stays\nin the slot, so the copy button copies it as written and a reader without\nthe script still has it. Not called on a server, which has no code to\nread, nor for a diff.\n\nAbsent, the block draws with the highlighter `registerHighlighter` gave\nevery block, where an entry such as `@fusion.dev/helix-sandbox/code-block`\nregistered one, and plain otherwise.",
               "inheritedFrom": {
                 "name": "HelixHeadlessCodeBlock",
                 "module": "src/code-block/root/code-block-root.ts"
@@ -104909,6 +104925,14 @@
             "module": "src/megamenu/index.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/menu/filter/index.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -135521,6 +135545,49 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/menu/filter/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "filterMenu",
+          "declaration": {
+            "name": "filterMenu",
+            "package": "@fusion.dev/helix-headless/menu/filter"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuFilterController",
+          "declaration": {
+            "name": "MenuFilterController",
+            "package": "@fusion.dev/helix-headless/menu/filter"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/menu/filter/menu-filter.css.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/menu/filter/menu-filter.css.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/menu/index.ts",
@@ -137397,7 +137464,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu shows a field above its rows that narrows them as the\nreader types, with focus staying in the field.",
+              "description": "Whether the menu shows a field above its rows that narrows them as the\nreader types, with focus staying in the field, once\n`@fusion.dev/helix/menu/filter` (or `@fusion.dev/helix-headless/menu/filter`)\nis imported. Without that import it does nothing, so a menu that never\nfilters carries none of the filter's code, and a development build says\nwhich import is missing.",
               "attribute": "filterable",
               "inheritedFrom": {
                 "name": "HelixHeadlessMenu",
@@ -137888,27 +137955,12 @@
             },
             {
               "kind": "field",
-              "name": "field",
-              "type": {
-                "text": "HTMLInputElement | null"
-              },
-              "privacy": "private",
-              "description": "The filter field, with `filterable`.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "HelixHeadlessMenu",
-                "module": "src/menu/root/menu-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "filterPage",
+              "name": "filterer",
               "type": {
-                "text": "HelixHeadlessMenuItem | null"
+                "text": "MenuFilterController | undefined"
               },
               "privacy": "private",
-              "default": "null",
-              "description": "The submenu the filter narrows, or null for the top page.",
+              "description": "The filter `menu/filter` gives this menu, which `filterable` turns on.\n\nDeclared and never initialized, because the entry sets it from the\nconstructor Lit runs initializers in, which is before this class's own\nfields: an initializer here would set it back to `undefined`.",
               "inheritedFrom": {
                 "name": "HelixHeadlessMenu",
                 "module": "src/menu/root/menu-root.ts"
@@ -137916,25 +137968,12 @@
             },
             {
               "kind": "field",
-              "name": "refused",
+              "name": "filters",
               "type": {
-                "text": "string | undefined"
+                "text": "MenuFilterController | undefined"
               },
               "privacy": "private",
-              "description": "The filter a listener refused, which narrows nothing.",
-              "inheritedFrom": {
-                "name": "HelixHeadlessMenu",
-                "module": "src/menu/root/menu-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "filtering",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "description": "Whether the filter is narrowing the rows.",
+              "description": "The filter, while `filterable` is set and `menu/filter` is imported.",
               "readonly": true,
               "inheritedFrom": {
                 "name": "HelixHeadlessMenu",
@@ -137958,7 +137997,7 @@
                   }
                 }
               ],
-              "description": "Whether the filter keeps a row: one of another page, or one whose words it matches.",
+              "description": "Whether the filter keeps a row, which every row is without one.",
               "inheritedFrom": {
                 "name": "HelixHeadlessMenu",
                 "module": "src/menu/root/menu-root.ts"
@@ -137981,53 +138020,7 @@
                   }
                 }
               ],
-              "description": "Asks to filter by new text, which the field and `filter` then hold. A\nrefusal keeps every row showing, for a page that narrows them itself.",
-              "inheritedFrom": {
-                "name": "HelixHeadlessMenu",
-                "module": "src/menu/root/menu-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "handleFilterInput",
-              "privacy": "private",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "HelixHeadlessMenu",
-                "module": "src/menu/root/menu-root.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "filterBy",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Filters by what the reader typed, and highlights the first row kept.",
-              "inheritedFrom": {
-                "name": "HelixHeadlessMenu",
-                "module": "src/menu/root/menu-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "highlighted",
-              "type": {
-                "text": "HelixHeadlessMenuItem | undefined"
-              },
-              "privacy": "private",
-              "description": "The row the keys reached while focus stays in the filter field.",
+              "description": "Asks to filter by new text. See `MenuFilterController.request`.",
               "inheritedFrom": {
                 "name": "HelixHeadlessMenu",
                 "module": "src/menu/root/menu-root.ts"
@@ -138050,7 +138043,7 @@
                   }
                 }
               ],
-              "description": "Moves the reader to a row: focus, or with `filterable` the highlight,\nwhich the field names with `aria-activedescendant`. An element reference,\nbecause the field is in this shadow root and the row in the tree around\nit, the one direction a reference crosses.",
+              "description": "Moves the reader to a row: focus, or with a filter the highlight, focus\nstaying in the filter field.",
               "inheritedFrom": {
                 "name": "HelixHeadlessMenu",
                 "module": "src/menu/root/menu-root.ts"
@@ -138384,17 +138377,6 @@
                 "module": "src/menu/root/menu-root.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "handleMouseDown",
-              "privacy": "private",
-              "readonly": true,
-              "description": "Keeps focus in the filter field through a press on a row or the way\nback, as React Aria's virtual focus does: the press still chooses.",
-              "inheritedFrom": {
-                "name": "HelixHeadlessMenu",
-                "module": "src/menu/root/menu-root.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "handlePointerMove",
@@ -139179,7 +139161,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the menu shows a field above its rows that narrows them as the\nreader types, with focus staying in the field.",
+              "description": "Whether the menu shows a field above its rows that narrows them as the\nreader types, with focus staying in the field, once\n`@fusion.dev/helix/menu/filter` (or `@fusion.dev/helix-headless/menu/filter`)\nis imported. Without that import it does nothing, so a menu that never\nfilters carries none of the filter's code, and a development build says\nwhich import is missing.",
               "fieldName": "filterable",
               "inheritedFrom": {
                 "name": "HelixHeadlessMenu",
@@ -172401,6 +172383,96 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/sandbox/compile.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "COMPILER",
+          "type": {
+            "text": "string"
+          },
+          "default": "'sucrase@3.35.1'",
+          "description": "The compiler a module file in TypeScript or JSX runs through before the\nframe loads it, by its npm name and its pinned version.\n\n**Sucrase, measured against esbuild-wasm on October 8, 2026**, on a TSX\nmodule of 241 lines with the automatic JSX runtime:\n\n| | Sucrase 3.35 | esbuild-wasm 0.28 |\n| --- | --- | --- |\n| Download, gzip | 48 KB, and 9 KB of `buffer` esm.sh adds | 3.2 MB of WebAssembly, and 19 KB |\n| First compile | 14 ms | 188 ms, the WebAssembly starting |\n| Each after | 0.8 ms | 4.6 ms |\n| Automatic JSX runtime | yes | yes |\n| Source map | yes | yes |\n\nBoth compile what a sandbox holds, and neither checks types. esbuild-wasm\ndownloads 56 times as much before the first module runs, which a reader\nwaits through on the first edit of every page. Sucrase also keeps every line\nwhere it was, so a line number in an error in the frame is the line in the\npane even where a browser ignores the source map.\n\n**Loaded the first time a module needs it**, from the preview's `cdn` as a\npackage in `dependencies` is, so the published package carries no compiler\nand a sandbox with no TypeScript loads none.\n\n**In a worker of its own**, which has no access to the page and keeps a\nlong compile off the page's thread. The worker's script is text, so the\n`import()` of an address known only at run time is one no bundler reads:\nwritten in this module, Turbopack refused to build a page that imported\nit, the TypeScript build having dropped the comments that tell bundlers to\nleave it alone. The compiler reads the source as text, and the example\nitself still runs only in the frame."
+        },
+        {
+          "kind": "variable",
+          "name": "COMPILED",
+          "description": "Whether a module file is TypeScript or JSX, which a browser cannot run as written."
+        },
+        {
+          "kind": "variable",
+          "name": "compilers",
+          "default": "new Map<string, Transform>()",
+          "description": "The compiler for each `cdn`, so each is set up once a page. A spec puts a\nstand-in here, for an address of its own."
+        },
+        {
+          "kind": "function",
+          "name": "compile",
+          "return": {
+            "type": {
+              "text": "Promise<string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "cdn",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "path",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "source",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "A module file compiled to JavaScript, with its source map inline, for the\nframe to load as its other modules.\n\n`.ts` is read as TypeScript, `.tsx` as TypeScript with JSX, and `.jsx` as\nJSX. JSX compiles to the automatic runtime, `react/jsx-runtime`, which an\nexample lists in `dependencies`, or to the runtime a\n`@jsxImportSource preact` comment in the file names.\n\n**What fails to compile still runs, as a module that throws** what the\ncompiler said, such as `Error transforming app.tsx: Unexpected token (2:1)`.\nThe frame reports it as it reports any error an example does not catch, so\nit shows over the example in the preview's `error` part and in the\nterminal, and only where the example imports the file."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "COMPILER",
+          "declaration": {
+            "name": "COMPILER",
+            "module": "src/sandbox/compile.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COMPILED",
+          "declaration": {
+            "name": "COMPILED",
+            "module": "src/sandbox/compile.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "compilers",
+          "declaration": {
+            "name": "compilers",
+            "module": "src/sandbox/compile.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "compile",
+          "declaration": {
+            "name": "compile",
+            "module": "src/sandbox/compile.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/sandbox/frame.ts",
@@ -172805,7 +172877,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A sandboxed `<iframe>` that loads `src`, a document you provide. That\ndocument imports what the examples need, listens for a render message, and\nwrites the markup into itself.\n\n**Without `src`, the frame loads a built-in document**, so a sandbox renders\nwith nothing to host. It runs HTML, CSS, and scripts, and reports the\nconsole, uncaught errors, its height, and presses as a frame on\n`servePreview` does. It defines no element, so an example that uses Helix\ncomponents needs a `src` that imports them.\n\n**`imports` lets an example import packages by name** in the built-in\ndocument, as an import map: each name maps to the address of an ES module,\nsuch as `{\"canvas-confetti\": \"https://esm.sh/canvas-confetti@1.9.3\"}`, and\n`import confetti from 'canvas-confetti'` in the `js` pane then loads it. A\nCDN that serves npm packages as modules, such as esm.sh or jsDelivr's\n`+esm`, gives every package an address. A new map loads the document again,\nsince a browser reads one only as a document starts. A `src` document\ndeclares its own.\n\n**`dependencies` names packages by version instead**, as a `package.json`\ndoes: `{\"canvas-confetti\": \"^1.9\"}` loads `canvas-confetti` and the paths\nunder it from `cdn`, `https://esm.sh/` by default, at the version or range\ngiven. An address in `imports` wins over a package of the same name.\n\n**`modules` holds files the example imports by a relative path**: each path,\nsuch as `utils.js`, to its source, and `import { add } from './utils.js'`\nin the `js` pane or in another module loads it. A sandbox writes each pane\nnamed for a module file here.\n\n**Examples render in a frame**, so an example's styles and scripts do not\naffect the page around the sandbox, and `position: fixed` stays inside the\npane. The frame starts empty, with its own stylesheets and its own custom\nelement registry, so `src` must load the styles and components the examples\nuse.\n\n**The source is untrusted, and the frame keeps it isolated.** The frame uses\n`sandbox=\"allow-scripts\"` and never `allow-same-origin`. Together, the two\nlet a document on the same origin remove its own sandbox, which is the same\nas having none.\n\n**A preview says where it is.** It is `:state(loading)` from the moment it\nhas a `src` until that document can take the example, and again through\n`reload()`. It is `:state(failed)` once the example throws an error it does\nnot catch, until the next source is sent, which a frame on `servePreview`\nreports. A page draws its own spinner or message from either, such as a\nsibling shown by `helix-sandbox-preview:state(failed) + .message`.\n\n**A failed preview shows the error over the example**, in the `error` part,\nuntil the next source is sent. The terminal says it too, so the part is not\nannounced, and it is the frame's description while it shows, so a screen\nreader reads it with the frame. Hide it with `::part(error) { display: none }`\nwhere the page draws its own.\n\n**`controls` draws two buttons in the preview's corner**: one reloads the\nframe's document, as `reload()` does, and one opens the example in a new\ntab, as `open()` does. The tab runs it in a frame sandboxed as this one is.",
+          "description": "A sandboxed `<iframe>` that loads `src`, a document you provide. That\ndocument imports what the examples need, listens for a render message, and\nwrites the markup into itself.\n\n**Without `src`, the frame loads a built-in document**, so a sandbox renders\nwith nothing to host. It runs HTML, CSS, and scripts, and reports the\nconsole, uncaught errors, its height, and presses as a frame on\n`servePreview` does. It defines no element, so an example that uses Helix\ncomponents needs a `src` that imports them.\n\n**`imports` lets an example import packages by name** in the built-in\ndocument, as an import map: each name maps to the address of an ES module,\nsuch as `{\"canvas-confetti\": \"https://esm.sh/canvas-confetti@1.9.3\"}`, and\n`import confetti from 'canvas-confetti'` in the `js` pane then loads it. A\nCDN that serves npm packages as modules, such as esm.sh or jsDelivr's\n`+esm`, gives every package an address. A new map loads the document again,\nsince a browser reads one only as a document starts. A `src` document\ndeclares its own.\n\n**`dependencies` names packages by version instead**, as a `package.json`\ndoes: `{\"canvas-confetti\": \"^1.9\"}` loads `canvas-confetti` and the paths\nunder it from `cdn`, `https://esm.sh/` by default, at the version or range\ngiven. An address in `imports` wins over a package of the same name.\n\n**`modules` holds files the example imports by a relative path**: each path,\nsuch as `utils.js`, to its source, and `import { add } from './utils.js'`\nin the `js` pane or in another module loads it. A sandbox writes each pane\nnamed for a module file here.\n\n**A module in TypeScript or JSX runs too**: a path ending in `.ts`, `.tsx`\nor `.jsx` is compiled to JavaScript first, and imported by its path or by\nits path without the extension. The compiler, Sucrase, loads from `cdn` the\nfirst time a module needs it, so the package carries none and a preview\nwith no such module loads none. JSX compiles to the automatic runtime,\n`react/jsx-runtime`, from `dependencies`, or to the one a\n`@jsxImportSource` comment names. What fails to compile shows in the\n`error` part as an error the example threw, when the example imports it.\n\n**Examples render in a frame**, so an example's styles and scripts do not\naffect the page around the sandbox, and `position: fixed` stays inside the\npane. The frame starts empty, with its own stylesheets and its own custom\nelement registry, so `src` must load the styles and components the examples\nuse.\n\n**The source is untrusted, and the frame keeps it isolated.** The frame uses\n`sandbox=\"allow-scripts\"` and never `allow-same-origin`. Together, the two\nlet a document on the same origin remove its own sandbox, which is the same\nas having none.\n\n**A preview says where it is.** It is `:state(loading)` from the moment it\nhas a `src` until that document can take the example, and again through\n`reload()`. It is `:state(failed)` once the example throws an error it does\nnot catch, until the next source is sent, which a frame on `servePreview`\nreports. A page draws its own spinner or message from either, such as a\nsibling shown by `helix-sandbox-preview:state(failed) + .message`.\n\n**A failed preview shows the error over the example**, in the `error` part,\nuntil the next source is sent. The terminal says it too, so the part is not\nannounced, and it is the frame's description while it shows, so a screen\nreader reads it with the frame. Hide it with `::part(error) { display: none }`\nwhere the page draws its own.\n\n**`controls` draws two buttons in the preview's corner**: one reloads the\nframe's document, as `reload()` does, and one opens the example in a new\ntab, as `open()` does. The tab runs it in a frame sandboxed as this one is.",
           "name": "HelixSandboxPreview",
           "cssParts": [
             {
@@ -173021,6 +173093,31 @@
               "privacy": "private",
               "description": "What the example threw and did not catch, while the preview is `failed`."
             },
+            {
+              "kind": "field",
+              "name": "compiled",
+              "privacy": "private",
+              "default": "new Map<string, string>()",
+              "description": "Each module file compiled to JavaScript, by its path and source."
+            },
+            {
+              "kind": "field",
+              "name": "compiling",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<string>()",
+              "description": "The module files being compiled, by their path and source."
+            },
+            {
+              "kind": "field",
+              "name": "map",
+              "type": {
+                "text": "Record<string, string>"
+              },
+              "privacy": "private",
+              "default": "{}",
+              "description": "The import map the built-in document loads with: the last one with every\nmodule file compiled, so a frame never loads without one an example\nimports."
+            },
             {
               "kind": "method",
               "name": "fail",
@@ -173064,12 +173161,43 @@
               "kind": "field",
               "name": "importMap",
               "type": {
-                "text": "Record<string, string>"
+                "text": "Record<string, string> | undefined"
               },
               "privacy": "private",
               "description": "The import map of the built-in document: each module file, by its path\nand by the address its neighbors import it at, each package in\n`dependencies` and the paths under it, and `imports` over all of them.",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "compileModule",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "path",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "source",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Compiles a module file, once, then draws again with it. Not on a server,\nwhich loads no frame."
+            },
             {
               "kind": "field",
               "name": "handleFrameLoad",
@@ -173134,7 +173262,7 @@
                   "text": "void"
                 }
               },
-              "description": "Sends the current source to the frame, once it is listening."
+              "description": "Sends the current source to the frame, once it is listening and no\nmodule it may import is still compiling."
             },
             {
               "kind": "method",
@@ -173784,7 +173912,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A source pane dispatches `helix-before-edit`, which bubbles, and the sandbox\npasses the value to the preview slotted into it. The source pane and the\npreview do not reference each other, so you can replace either one or use it\nalone.\n\nThe preview runs an edit once typing has rested for `preview-delay`, 300\nmilliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.\n\nThe event carries the pane's `name`, so one sandbox can hold several panes.\nThe names the sandbox writes into its previews:\n\n- `html` sets the preview's markup.\n- `css` sets its stylesheet.\n- `js` sets a script that runs as a module after the markup.\n- A module file name ending in `.js` or `.mjs`, such as `utils.js`, is a\n  module the other scripts import by its path, `./utils.js`.\n- `package.json` sets the npm packages the scripts import by name, from its\n  `dependencies`, which load from the preview's `cdn`.\n\nThe sandbox ignores a pane with any other name, so that pane can show\ncontent without changing the preview.\n\n**The sandbox is `:state(modified)` while a source pane holds an edit**, and\nthat pane's file tab is also `file-modified` and described as modified to\na screen reader. `reset()` puts every pane back to the source it was given.\n\n**The dividers are two nested `helix-splitter` elements**, which handle the\npointer, the keyboard, and the corner. The inner splitter holds the panes and\nthe outer one holds the panel, so the panel spans the full width.\n\n**Several source panes are files**, one shown at a time under a row of\ntabs, each named by the pane's `label` or, without one, its `name`. `file`\nholds the `name` of the pane shown. The tabs are a tab list: the arrow keys\nmove between them and show each pane, and `Home` and `End` go to the first\nand the last. Choosing one sends `helix-before-change` with the pane's\n`name`, which you can cancel, and `change` once `file` holds it. The panes\nnot shown carry `hidden`. One pane draws no tabs.\n\n**Any editor can be the source pane**: an element in the `source` slot with\na `name` that dispatches `helix-before-edit` with its text, which bubbles.\nA wrapper around CodeMirror or Monaco sends one on each change and is a pane\nlike `helix-sandbox-source`, and the sandbox reads its `value` to seed the\npreview. Dispatch `helix-caret` from it too for the status bar's position.\n\nSandbox is styled only and has behavior, as `Aura` is. Its behavior is the\nhand-off from a source pane to a preview frame, which works with any pane\nthat sends `helix-before-edit`, and what it draws is the layout around them:\ndividers, file tabs, and a panel. A page that wants another look slots its\nown panes and keeps the hand-off, so there is nothing for a headless version\nto hold.\n\nA development build warns about a source pane with no `label` and no `name`,\nwhose file tab would have no words.\n\nOn a focused divider, the arrow keys move it, and `Home` and `End` move it\nto its ends. `Enter` on the panes divider shuts the lead pane, and pressed\nagain it opens the pane where it was. `Enter` on the panel divider shuts the\npanel to `panel-collapsed-size`, and pressed again it opens the panel to its\nlast height.",
+          "description": "A source pane dispatches `helix-before-edit`, which bubbles, and the sandbox\npasses the value to the preview slotted into it. The source pane and the\npreview do not reference each other, so you can replace either one or use it\nalone.\n\nThe preview runs an edit once typing has rested for `preview-delay`, 300\nmilliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.\n\nThe event carries the pane's `name`, so one sandbox can hold several panes.\nThe names the sandbox writes into its previews:\n\n- `html` sets the preview's markup.\n- `css` sets its stylesheet.\n- `js` sets a script that runs as a module after the markup.\n- A module file name ending in `.js` or `.mjs`, such as `utils.js`, is a\n  module the other scripts import by its path, `./utils.js`.\n- A module file name ending in `.ts`, `.tsx` or `.jsx`, such as `app.tsx`,\n  is one too, which the preview compiles to JavaScript first. The `js` pane\n  runs it with `import './app.tsx'`. A file that does not compile shows\n  why over the preview, as an error the example threw.\n- `package.json` sets the npm packages the scripts import by name, from its\n  `dependencies`, which load from the preview's `cdn`.\n\nThe sandbox ignores a pane with any other name, so that pane can show\ncontent without changing the preview.\n\n**The sandbox is `:state(modified)` while a source pane holds an edit**, and\nthat pane's file tab is also `file-modified` and described as modified to\na screen reader. `reset()` puts every pane back to the source it was given.\n\n**The dividers are two nested `helix-splitter` elements**, which handle the\npointer, the keyboard, and the corner. The inner splitter holds the panes and\nthe outer one holds the panel, so the panel spans the full width.\n\n**Several source panes are files**, one shown at a time under a row of\ntabs, each named by the pane's `label` or, without one, its `name`. `file`\nholds the `name` of the pane shown. The tabs are a tab list: the arrow keys\nmove between them and show each pane, and `Home` and `End` go to the first\nand the last. Choosing one sends `helix-before-change` with the pane's\n`name`, which you can cancel, and `change` once `file` holds it. The panes\nnot shown carry `hidden`. One pane draws no tabs.\n\n**Any editor can be the source pane**: an element in the `source` slot with\na `name` that dispatches `helix-before-edit` with its text, which bubbles.\nA wrapper around CodeMirror or Monaco sends one on each change and is a pane\nlike `helix-sandbox-source`, and the sandbox reads its `value` to seed the\npreview. Dispatch `helix-caret` from it too for the status bar's position.\n\nSandbox is styled only and has behavior, as `Aura` is. Its behavior is the\nhand-off from a source pane to a preview frame, which works with any pane\nthat sends `helix-before-edit`, and what it draws is the layout around them:\ndividers, file tabs, and a panel. A page that wants another look slots its\nown panes and keeps the hand-off, so there is nothing for a headless version\nto hold.\n\nA development build warns about a source pane with no `label` and no `name`,\nwhose file tab would have no words.\n\nOn a focused divider, the arrow keys move it, and `Home` and `End` move it\nto its ends. `Enter` on the panes divider shuts the lead pane, and pressed\nagain it opens the pane where it was. `Enter` on the panel divider shuts the\npanel to `panel-collapsed-size`, and pressed again it opens the panel to its\nlast height.",
           "name": "HelixSandbox",
           "cssProperties": [
             {
@@ -220435,6 +220563,23 @@
                 "module": "src/time-input/root/time-input-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "nowLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Now'",
+              "description": "The words on the list's button that chooses the current time, drawn with\n`show-now`.",
+              "attribute": "now-label",
+              "helix": {
+                "words": true
+              },
+              "inheritedFrom": {
+                "name": "HelixHeadlessTimeInput",
+                "module": "src/time-input/root/time-input-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -220534,6 +220679,20 @@
                 "module": "src/time-input/root/time-input-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "showNow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a button under the times in the list that chooses the current time,\nmoved to the nearest time on offer. See Time Picker's `show-now`. Its words\nare `now-label`.",
+              "attribute": "show-now",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTimeInput",
+                "module": "src/time-input/root/time-input-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "step",
@@ -222266,6 +222425,19 @@
                 "module": "src/time-input/root/time-input-root.ts"
               }
             },
+            {
+              "name": "now-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Now'",
+              "description": "The words on the list's button that chooses the current time, drawn with\n`show-now`.",
+              "fieldName": "nowLabel",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTimeInput",
+                "module": "src/time-input/root/time-input-root.ts"
+              }
+            },
             {
               "name": "placeholder",
               "type": {
@@ -222344,6 +222516,19 @@
                 "module": "src/time-input/root/time-input-root.ts"
               }
             },
+            {
+              "name": "show-now",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a button under the times in the list that chooses the current time,\nmoved to the nearest time on offer. See Time Picker's `show-now`. Its words\nare `now-label`.",
+              "fieldName": "showNow",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTimeInput",
+                "module": "src/time-input/root/time-input-root.ts"
+              }
+            },
             {
               "name": "step",
               "type": {
@@ -253867,6 +254052,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.183.0"
+    "version": "0.184.0"
   }
 }

package/dist/code-block/index.d.ts

@@ -1 +1,2 @@
+export { type CodeBlockHighlighter, registerHighlighter, } from '@fusion.dev/helix-headless/code-block';
 export * from './root/code-block-root.js';

package/dist/code-block/index.js

@@ -1 +1,2 @@
+export { registerHighlighter, } from '@fusion.dev/helix-headless/code-block';
 export * from './root/code-block-root.js';

package/dist/index.d.ts

@@ -62,6 +62,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './map/index.js';
 export * from './megamenu/index.js';
+export * from './menu/filter/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';
 export * from './navigation/index.js';

package/dist/index.js

@@ -57,6 +57,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './map/index.js';
 export * from './megamenu/index.js';
+export * from './menu/filter/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';
 export * from './navigation/index.js';

package/dist/menu/filter/index.d.ts

@@ -0,0 +1 @@
+export { filterMenu, MenuFilterController } from '@fusion.dev/helix-headless/menu/filter';

package/dist/menu/filter/index.js

@@ -0,0 +1,5 @@
+import { filterMenu } from '@fusion.dev/helix-headless/menu/filter';
+import { HelixMenu } from '../root/menu-root.js';
+import { styles } from './menu-filter.css.js';
+filterMenu(HelixMenu, styles);
+export { filterMenu, MenuFilterController } from '@fusion.dev/helix-headless/menu/filter';

package/dist/menu/filter/menu-filter.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/menu/filter/menu-filter.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`input {appearance: none;background-color: var(--menu-background-color, var(--helix-color-surface-overlay));border: none;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);inline-size: 100%;inset-block-start: calc(var(--helix-space-xs) * -1);margin-block: calc(var(--helix-space-xs) * -1) var(--helix-space-xs);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);position: sticky;z-index: 1}input:focus-visible {outline: none}[data-filtered] slot::slotted(helix-divider) {display: none}`);

package/dist/menu/root/menu-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part="surface"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs)}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none)}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium)}::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none}[part="search-field"] {appearance: none;background-color: var(--menu-background-color, var(--helix-color-surface-overlay));border: none;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);inline-size: 100%;inset-block-start: calc(var(--helix-space-xs) * -1);margin-block: calc(var(--helix-space-xs) * -1) var(--helix-space-xs);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);position: sticky;z-index: 1}[part="search-field"]:focus-visible {outline: none}[part="surface"][data-filtered] slot::slotted(helix-divider) {display: none}:host([loading]) [part="surface"] {opacity: 0.5}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {display: contents}[part="surface"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs)}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none)}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium)}::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none}:host([loading]) [part="surface"] {opacity: 0.5}@media print {:host {display: none}}`);