@fusion.dev/helix-headless 0.183.0 → 0.185.0

package/custom-elements.json

@@ -31992,9 +31992,34 @@
       "kind": "javascript-module",
       "path": "src/code-block/root/code-block-root.ts",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "registerHighlighter",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "highlighter",
+              "type": {
+                "text": "CodeBlockHighlighter | undefined"
+              }
+            },
+            {
+              "name": "sheet",
+              "optional": true,
+              "type": {
+                "text": "CSSResult"
+              }
+            }
+          ],
+          "description": "Gives every Code Block of both tiers a highlighter, for the blocks that set\nno `highlight` of their own, and the sheet that colors what it returns.\n\n**Opt-in, so a page that shows plain code carries no grammar.** Code Block\nships none: a grammar is the larger part of any highlighter, and a block\nthat registers one for every page makes every page pay for it. A page that\nwants color imports one entry that calls this, such as\n`@fusion.dev/helix-sandbox/code-block`, which reads `css`, `html`, `js`,\n`jsx`, `sh`, `ts` and `tsx` with the sandbox's Lezer grammars and colors\nthem from the `--helix-color-syntax-*` tokens.\n\nA block's own `highlight` wins over this. Blocks already on the page draw\nagain with it, and every block built after has it. `undefined` takes it\naway again."
+        },
         {
           "kind": "class",
-          "description": "Renders a `<pre><code>` pair: `pre` keeps the whitespace, and `code` marks it\nas code. Long lines scroll inside the block and do not wrap, because a line\nbreak can be significant in code.\n\nA copy button is on by default. Set `no-copy` to remove it. The button copies\nthe slotted text, so there is no second copy of the code to keep in sync.\n\nFor a fragment of code inside a sentence, use `Code`.\n\nSet `line-numbers` to number the lines in a gutter beside the code, hidden\nfrom the accessibility tree and left out of a copy. Set `mark-lines` to\nmark lines a reader should look at, such as `2, 4-6`: the block draws a\nband behind each run, placed where the lines are laid out, so it follows a\nhighlighter's markup and lines that wrap. `added-lines` and\n`removed-lines` mark lines the same way as inserted and deleted, as\nExpressive Code's `ins` and `del` do, in code that is not a diff. The bands\nare drawn and hidden from screen readers, so say in the text around the\nblock what a marked line means. Set `wrap` to wrap long lines\nrather than scroll them; a gutter then numbers each line where it starts.\nSet `wrappable` for a button in the header that turns `wrap` on and off,\npressed while the lines wrap.\n\nThe header holds the name, the `actions` slot, and the copy button. Slot a\ncontrol into `actions`, such as a button that sets `wrap` or one that opens\nthe code in an editor, and the block draws a header for it even with no\nname. `copy-icon` and `copied-icon` replace the copy button's two icons. Set `highlight` to a\nfunction that turns the code into highlighted markup, such as one wrapping\nShiki or Prism, and the block draws what it returns; it is handed the\nblock's `language`, so one function serves every block. The code stays in\nthe slot, so the copy button and the page's own text are the code as\nwritten.\n\nSet `expandable` on a block whose height is capped, such as by\n`--code-block-max-block-size`, and a button under it shows every line and\nthen fewer again, as a docs site's long example does. The button is drawn\nonly while the cap hides something, says whether the block is expanded with\n`aria-expanded`, names the block it opens with `aria-controls`, and the block\ncarries `:state(expanded)` while it is.\n\nSet `diff` to show a change. Put a unified diff, the output of `git diff` or\n`diff -u`, in the same slot, and the block draws the lines it added and\nremoved. The block never computes a diff itself. Line numbers come from the\nhunk headers and are hidden from the accessibility tree. Changed lines are\n`<ins>` and `<del>` with the `+` and `-` kept as text, so the change does not\ndepend on color. Where a removed line is paired with the added line that\nreplaced it, the words each does not share with the other are the `changed`\npart, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name,\nand its copy button copies the new version of the file. `variant=\"split\"`\nshows the old version beside the new, each removal opposite its replacement.\n`context-lines` folds each long run of unchanged lines, keeping that many\nbeside each change, behind a button that shows them and hides them again,\nas a code host draws a diff written with more context than a reader needs.\n\n**A block that scrolls is a tab stop.** While its lines run past its width or\nits cap, the scroller is a region named for the block, such as \"Code,\napp.ts\", that Tab reaches, so a keyboard scrolls it with the arrow keys in\nevery browser. Chromium and Firefox make a scrolling box focusable on their\nown, and Safari does not. A block that fits is no stop at all.\n\n**The code the block draws is marked untranslated**, `translate=\"no\"` on\nits `<pre>`, so a page translator leaves highlighted lines and a diff as\nwritten. Code in the slot takes its translation mode from the element, which\nwrites nothing onto itself, so set `translate=\"no\"` on the element to keep a\ntranslator off plain code too.\n\nOn the server, the slot renders as ordinary code, so a diff first appears as\nthe patch text in a `<pre>`. The client makes the same first render, which\nkeeps hydration clean, and draws the diff once it can read the content. Diff\nmode is experimental. The rest of the family is stable.\n\n**Several blocks are files**, one shown at a time under a row of tabs, as\nSandbox shows its source panes. Put Code Blocks in the default slot of a\nCode Block, and each is a file named on its tab by its `label` or, without\none, its `language`. `file` holds the name of the file shown. The tabs are a\ntab list: the arrow keys move to a tab and show its file, the two swapping\non a right-to-left page, and Home and End go to the first and the last.\nChoosing one sends `helix-before-change` with the file's name, which you can\ncancel, and `change` once `file` holds it. The files not shown carry\n`hidden`, and the one shown draws no name of its own, its tab naming it. One\nblock draws no tabs. A server cannot see the blocks inside, so the client\ndraws the tabs once it upgrades.",
+          "description": "Renders a `<pre><code>` pair: `pre` keeps the whitespace, and `code` marks it\nas code. Long lines scroll inside the block and do not wrap, because a line\nbreak can be significant in code.\n\nA copy button is on by default. Set `no-copy` to remove it. The button copies\nthe slotted text, so there is no second copy of the code to keep in sync.\n\nFor a fragment of code inside a sentence, use `Code`.\n\nSet `line-numbers` to number the lines in a gutter beside the code, hidden\nfrom the accessibility tree and left out of a copy. Set `mark-lines` to\nmark lines a reader should look at, such as `2, 4-6`: the block draws a\nband behind each run, placed where the lines are laid out, so it follows a\nhighlighter's markup and lines that wrap. `added-lines` and\n`removed-lines` mark lines the same way as inserted and deleted, as\nExpressive Code's `ins` and `del` do, in code that is not a diff. The bands\nare drawn and hidden from screen readers, so say in the text around the\nblock what a marked line means. Set `wrap` to wrap long lines\nrather than scroll them; a gutter then numbers each line where it starts.\nSet `wrappable` for a button in the header that turns `wrap` on and off,\npressed while the lines wrap.\n\nThe header holds the name, the `actions` slot, and the copy button. Slot a\ncontrol into `actions`, such as a button that sets `wrap` or one that opens\nthe code in an editor, and the block draws a header for it even with no\nname. `copy-icon` and `copied-icon` replace the copy button's two icons. Set `highlight` to a\nfunction that turns the code into highlighted markup, such as one wrapping\nShiki or Prism, and the block draws what it returns; it is handed the\nblock's `language`, so one function serves every block. The code stays in\nthe slot, so the copy button and the page's own text are the code as\nwritten.\n\n**Code Block ships no grammar**, so plain code costs you no parser. To color\ncode without a highlighter of your own, import one more entry beside the\nblock's. It colors every block by its `language` (`css`, `html`, `js`,\n`jsx`, `sh`, `ts`, or `tsx`) with the Lezer grammars of the sandbox's\neditor, in the editor's colors:\n\n```js\nimport '@fusion.dev/helix/code-block'\nimport '@fusion.dev/helix-sandbox/code-block'\n```\n\nThat entry calls `registerHighlighter`, which you can also call yourself to\ngive every block one highlighter of your own.\n\nSet `expandable` on a block whose height is capped, such as by\n`--code-block-max-block-size`, and a button under it shows every line and\nthen fewer again, as a docs site's long example does. The button is drawn\nonly while the cap hides something, says whether the block is expanded with\n`aria-expanded`, names the block it opens with `aria-controls`, and the block\ncarries `:state(expanded)` while it is.\n\nSet `diff` to show a change. Put a unified diff, the output of `git diff` or\n`diff -u`, in the same slot, and the block draws the lines it added and\nremoved. The block never computes a diff itself. Line numbers come from the\nhunk headers and are hidden from the accessibility tree. Changed lines are\n`<ins>` and `<del>` with the `+` and `-` kept as text, so the change does not\ndepend on color. Where a removed line is paired with the added line that\nreplaced it, the words each does not share with the other are the `changed`\npart, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name,\nand its copy button copies the new version of the file. `variant=\"split\"`\nshows the old version beside the new, each removal opposite its replacement.\n`context-lines` folds each long run of unchanged lines, keeping that many\nbeside each change, behind a button that shows them and hides them again,\nas a code host draws a diff written with more context than a reader needs.\n\n**A block that scrolls is a tab stop.** While its lines run past its width or\nits cap, the scroller is a region named for the block, such as \"Code,\napp.ts\", that Tab reaches, so a keyboard scrolls it with the arrow keys in\nevery browser. Chromium and Firefox make a scrolling box focusable on their\nown, and Safari does not. A block that fits is no stop at all.\n\n**The code the block draws is marked untranslated**, `translate=\"no\"` on\nits `<pre>`, so a page translator leaves highlighted lines and a diff as\nwritten. Code in the slot takes its translation mode from the element, which\nwrites nothing onto itself, so set `translate=\"no\"` on the element to keep a\ntranslator off plain code too.\n\nOn the server, the slot renders as ordinary code, so a diff first appears as\nthe patch text in a `<pre>`. The client makes the same first render, which\nkeeps hydration clean, and draws the diff once it can read the content. Diff\nmode is experimental. The rest of the family is stable.\n\n**Several blocks are files**, one shown at a time under a row of tabs, as\nSandbox shows its source panes. Put Code Blocks in the default slot of a\nCode Block, and each is a file named on its tab by its `label` or, without\none, its `language`. `file` holds the name of the file shown. The tabs are a\ntab list: the arrow keys move to a tab and show its file, the two swapping\non a right-to-left page, and Home and End go to the first and the last.\nChoosing one sends `helix-before-change` with the file's name, which you can\ncancel, and `change` once `file` holds it. The files not shown carry\n`hidden`, and the one shown draws no name of its own, its tab naming it. One\nblock draws no tabs. A server cannot see the blocks inside, so the client\ndraws the tabs once it upgrades.",
           "name": "HelixHeadlessCodeBlock",
           "cssProperties": [
             {
@@ -32401,7 +32426,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."
             },
             {
               "kind": "field",
@@ -33792,6 +33817,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "registerHighlighter",
+          "declaration": {
+            "name": "registerHighlighter",
+            "module": "src/code-block/root/code-block-root.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "HelixHeadlessCodeBlock",
@@ -46764,7 +46797,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Declare the columns as `TableColumn` children and pass the rows as an array.\nThe schema stays readable in the HTML, and the rows can be windowed, which\nten thousand row elements cannot be.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n  <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n  <helix-headless-table-column field=\"size\" text-align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\nFor a short table written out by hand, use `Table`, which takes rows as\nmarkup.\n\nSort and filter apply to the whole set, including the rows on other pages.\n\n**Write the first page as rows, so the served HTML carries the values.** The\ntable reads each cell from its column, and a server does not pass the column\nchildren to this element, so on its own it serves the headings and no values.\nWrite the first page under the columns as `TableRow` and `TableCell`\nelements, in the table's sort and page size and formatted as its columns draw\nthem. The table shows your rows until `rows` holds a row, then draws its own\nin their place and leaves yours in the page, unshown. A development build\nwarns when the two differ. In React, map the first page of the same array in\nthe same server component.\n\n`selectable` adds a column of checkboxes, keyed on `row-key`:\n\n- A row is selected by its key, so the selection survives a sort, a filter,\n  and a page change.\n- `selected` holds the chosen keys, comma separated, the same shape `Listbox`\n  uses for a multiple choice. As with `sort`, writing it applies the\n  selection, and `default-selected` holds what the markup declared.\n- The checkbox in the heading selects every row in the result, across pages,\n  and shows a dash while only some are chosen.\n- Shift with a press on a checkbox selects every row between it and the row\n  last chosen.\n- `selection-behavior=\"replace\"` makes a press or a move select the row\n  alone, as a file list does. Control or Command with a press adds or takes\n  out one row, and Shift with a press selects every row from the one last\n  chosen.\n\nTo act on a single row, such as opening it, put a link or a button in a cell.\n\n**Keyboard.** The grid is one tab stop, and the arrow keys move between its\ncells, the headings included.\n\n| Key | What it does |\n|---|---|\n| Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |\n| Down, Up | Moves one row, the heading row and the `load-more` row included. |\n| Home, End | Moves to the first or the last cell of the row. |\n| Control with Home or End | Moves to the first or the last cell of the grid. |\n| Page Down, Page Up | Moves by the rows that fit in view. |\n| Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |\n| Enter, Space on a sortable heading | Sorts by the column. |\n| Enter, Space on the `load-more` row | Sends `helix-load-more`. |\n| Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior=\"replace\"`, selects it alone, and Control or Command with Space adds or takes out the row. |\n| Down, Up, Page Down, Page Up under `selection-behavior=\"replace\"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |\n| Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |\n| Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |\n| Control or Command with A | Selects every row, in a `selectable` table. |\n| Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |\n| Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |\n| A letter or a word | Moves to the next row whose row header starts with what you typed. |\n\n`selected` and `expanded` hold their keys in the order of the rows, as do\n`helix-select`, `helix-selected` and `helix-expand`.\n\nEach row is named by its row header, the column marked `row-header`, or the\nfirst column with a `field` where none is. A screen reader says it as a reader\nmoves between rows.\n\n**Rows that hold rows.** `child-field` names the field that holds a row's\nchild rows, and the grid becomes a tree grid. The row header column draws a\nmark that a press opens and closes a row by, and `expanded` holds the keys of the open\nrows, which `row-key` names. Right on a closed row's header opens it, Left on\nan open one closes it, and Left on a child moves to its parent. A sort orders\nthe rows under each parent, and a search shows the rows that lead to each\nmatch, open.\n\n`load-more` adds a row after the last one with a button that sends\n`helix-load-more`. A `windowed` table also sends it by itself once a reader\nscrolls within one screen of the end, once for each number of rows. Add the\nnext rows to `rows`, and set `loading` while they are on their way.\n\nWhen a fetch fails, set `error-text`, such as \"The files did not load\", and\nput a button that tries again in the `error` slot. The line shows after the\nrows in place of the empty and loading lines, the live region says it, and\nthe table takes the `error` state. Clear it once you try again.\n\nThe controls inside the cells leave the tab order, so Tab moves past the\nwhole grid. A windowed table keeps the row holding focus drawn while the\nrest scroll away.\n\nPeople can resize and reorder the columns. `resizable` on a column puts a\nseparator on its edge. `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The new order\nis written to `order` as a list of fields. Your markup is not rewritten: the\ntable assigns the headings to its header in that order.\n\n**`reorderable-rows` lets people move rows.** A column of grips leads each\nrow, named by `move-row-label`. Drag a grip to move its row, and the table\nscrolls near an edge. Or press Space or Enter on a grip, or click it, to pick\nup its row, move it with Down and Up, Home and End, and press Space or Enter\nagain to drop it. A click on another row drops it there, and Escape puts it\nback. The table says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder` with\n`kind` set to `row`, whose `keys` hold every key of `rows` in the new order.\n**You move the rows**: set `rows` to the new order, and the table draws it.\nSet `row-key`, so a row is known by its key once it has moved. The grips do\nnothing while a `sort` is set, since the sort decides the order, and a tree\ngrid draws none.\n\n`csv()` returns the result as text: every row that passes the filter, in the\norder and the columns on screen. Saving the file is up to you.\n\n`DataTable` has no `columns` attribute. Each `TableColumn` is part of the\nschema, so you size a column with its own `width`. `Table` has `columns`\nbecause its cells are markup you write and it can have no columns at all.\nWritten on `DataTable`, `columns` has no effect, so watch for it when you\nmove a table from `Table` to `DataTable`.\n\n**The columns are an import of their own.** A column is the Table family's\n`TableColumn`, which the data table does not register, so a page that writes\none imports the Table entry beside the data table:\n\n```js\nimport '@fusion.dev/helix/data-table'\nimport '@fusion.dev/helix/table'\n```\n\nIn development, a data table holding a column nobody registered says so once\nthe page has loaded, with the line to add.",
+          "description": "Declare the columns as `TableColumn` children and pass the rows as an array.\nThe schema stays readable in the HTML, and the rows can be windowed, which\nten thousand row elements cannot be.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n  <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n  <helix-headless-table-column field=\"size\" text-align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\nFor a short table written out by hand, use `Table`, which takes rows as\nmarkup.\n\nSort and filter apply to the whole set, including the rows on other pages.\n\n**Write the first page as rows, so the served HTML carries the values.** The\ntable reads each cell from its column, and a server does not pass the column\nchildren to this element, so on its own it serves the headings and no values.\nWrite the first page under the columns as `TableRow` and `TableCell`\nelements, in the table's sort and page size and formatted as its columns draw\nthem. The table shows your rows until `rows` holds a row, then draws its own\nin their place and leaves yours in the page, unshown. A development build\nwarns when the two differ. In React, map the first page of the same array in\nthe same server component.\n\n`selectable` adds a column of checkboxes, keyed on `row-key`:\n\n- A row is selected by its key, so the selection survives a sort, a filter,\n  and a page change.\n- `selected` holds the chosen keys, comma separated, the same shape `Listbox`\n  uses for a multiple choice. As with `sort`, writing it applies the\n  selection, and `default-selected` holds what the markup declared.\n- The checkbox in the heading selects every row in the result, across pages,\n  and shows a dash while only some are chosen.\n- Shift with a press on a checkbox selects every row between it and the row\n  last chosen.\n- `selection-behavior=\"replace\"` makes a press or a move select the row\n  alone, as a file list does. Control or Command with a press adds or takes\n  out one row, and Shift with a press selects every row from the one last\n  chosen.\n\nTo act on a single row, such as opening it, put a link or a button in a cell.\n\n**Keyboard.** The grid is one tab stop, and the arrow keys move between its\ncells, the headings included.\n\n| Key | What it does |\n|---|---|\n| Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |\n| Down, Up | Moves one row, the heading row and the `load-more` row included. |\n| Home, End | Moves to the first or the last cell of the row. |\n| Control with Home or End | Moves to the first or the last cell of the grid. |\n| Page Down, Page Up | Moves by the rows that fit in view. |\n| Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |\n| Enter, Space on a sortable heading | Sorts by the column. |\n| Enter, Space on the `load-more` row | Sends `helix-load-more`. |\n| Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior=\"replace\"`, selects it alone, and Control or Command with Space adds or takes out the row. |\n| Down, Up, Page Down, Page Up under `selection-behavior=\"replace\"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |\n| Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |\n| Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |\n| Control or Command with A | Selects every row, in a `selectable` table. |\n| Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |\n| Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |\n| A letter or a word | Moves to the next row whose row header starts with what you typed. |\n\n`selected` and `expanded` hold their keys in the order of the rows, as do\n`helix-select`, `helix-selected` and `helix-expand`.\n\nEach row is named by its row header, the column marked `row-header`, or the\nfirst column with a `field` where none is. A screen reader says it as a reader\nmoves between rows.\n\n**Rows that hold rows.** `child-field` names the field that holds a row's\nchild rows, and the grid becomes a tree grid. The row header column draws a\nmark that a press opens and closes a row by, and `expanded` holds the keys of the open\nrows, which `row-key` names. Right on a closed row's header opens it, Left on\nan open one closes it, and Left on a child moves to its parent. A sort orders\nthe rows under each parent, and a search shows the rows that lead to each\nmatch, open.\n\n`load-more` adds a row after the last one with a button that sends\n`helix-load-more`. A `windowed` table also sends it by itself once a reader\nscrolls within one screen of the end, once for each number of rows. Add the\nnext rows to `rows`, and set `loading` while they are on their way.\n\nWhen a fetch fails, set `error-text`, such as \"The files did not load\", and\nput a button that tries again in the `error` slot. The line shows after the\nrows in place of the empty and loading lines, the live region says it, and\nthe table takes the `error` state. Clear it once you try again.\n\nThe controls inside the cells leave the tab order, so Tab moves past the\nwhole grid. A windowed table keeps the row holding focus drawn while the\nrest scroll away.\n\nPeople can resize and reorder the columns. `resizable` on a column puts a\nseparator on its edge. `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The new order\nis written to `order` as a list of fields. Your markup is not rewritten: the\ntable assigns the headings to its header in that order.\n\n**`reorderable-rows` lets people move rows.** A column of grips leads each\nrow, named by `move-row-label`. Drag a grip to move its row, and the table\nscrolls near an edge. Or press Space or Enter on a grip, or click it, to pick\nup its row, move it with Down and Up, Home and End, and press Space or Enter\nagain to drop it. A click on another row drops it there, and Escape puts it\nback. The table says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder` with\n`kind` set to `row`, whose `keys` hold every key of `rows` in the new order.\n**You move the rows**: set `rows` to the new order, and the table draws it.\nSet `row-key`, so a row is known by its key once it has moved. The grips do\nnothing while a `sort` is set, since the sort decides the order, and a tree\ngrid draws none.\n\n`csv()` returns the result as text: every row that passes the filter, in the\norder and the columns on screen. Saving the file is up to you.\n\nSize a column with its own `width`, or every column at once with `columns`,\na track list dealt out one track to a column in the order they are written,\nas `Table` deals it. A column's `width` wins in its place. **A table that\nserves its first page takes its widths from `columns`**: a server and a\nstylesheet can read the table's own attributes and not its columns', so the\nserved rows are laid out at the widths the table draws.\n\n**The columns are an import of their own.** A column is the Table family's\n`TableColumn`, which the data table does not register, so a page that writes\none imports the Table entry beside the data table:\n\n```js\nimport '@fusion.dev/helix/data-table'\nimport '@fusion.dev/helix/table'\n```\n\nIn development, a data table holding a column nobody registered says so once\nthe page has loaded, with the line to add.",
           "name": "HelixHeadlessDataTable",
           "cssProperties": [
             {
@@ -47118,6 +47151,16 @@
               "attribute": "child-field",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The column tracks, as a grid track list such as `2fr 1fr max-content`,\ndealt out one track to a column in the order the columns are written. A\ncolumn's own `width` wins in its place, and a column it does not reach\ntakes the track a column with no `width` takes.\n\n**The one track list a server can send.** A server rendering this element\nhas no columns to read a `width` from, and neither has a stylesheet laying\nout the rows a page served before the table upgrades, so a table sized here\nlays those rows out at the widths it draws.",
+              "attribute": "columns"
+            },
             {
               "kind": "field",
               "name": "defaultExpanded",
@@ -48192,7 +48235,7 @@
                 "text": "string"
               },
               "privacy": "private",
-              "description": "The track list, from the columns if there are any.",
+              "description": "The track list: each column's `width`, or its track in `columns`, or the\ntrack a column with neither takes.\n\nA render that knows no columns, on a server or hydrating what one sent,\nhas `columns` alone, and sends it as it is.",
               "readonly": true
             },
             {
@@ -50241,6 +50284,15 @@
               "description": "The field that holds a row's child rows, as an array. Set it, and `row-key`,\nand the grid becomes a tree grid.\n\nReflected, because the styled tier indents a tree grid's row headers by\nit. No default, so a table that sets none writes nothing onto its host.",
               "fieldName": "childField"
             },
+            {
+              "name": "columns",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The column tracks, as a grid track list such as `2fr 1fr max-content`,\ndealt out one track to a column in the order the columns are written. A\ncolumn's own `width` wins in its place, and a column it does not reach\ntakes the track a column with no `width` takes.\n\n**The one track list a server can send.** A server rendering this element\nhas no columns to read a `width` from, and neither has a stylesheet laying\nout the rows a page served before the table upgrades, so a table sized here\nlays those rows out at the widths it draws.",
+              "fieldName": "columns"
+            },
             {
               "name": "default-expanded",
               "type": {
@@ -85795,6 +85847,14 @@
             "module": "src/megamenu/index.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/menu/filter/index.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -111680,6 +111740,392 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/menu/filter/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "filterMenu",
+          "declaration": {
+            "name": "filterMenu",
+            "module": "./menu-filter.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuFilterController",
+          "declaration": {
+            "name": "MenuFilterController",
+            "module": "./menu-filter.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/menu/filter/menu-filter.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "drawFilter",
+          "return": {
+            "type": {
+              "text": "TemplateResult"
+            }
+          },
+          "parameters": [
+            {
+              "name": "host",
+              "type": {
+                "text": "HelixHeadlessMenu"
+              }
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "TemplateResult"
+              }
+            },
+            {
+              "name": "busy",
+              "type": {
+                "text": "string | typeof nothing"
+              }
+            },
+            {
+              "name": "onInput",
+              "type": {
+                "text": "(event: Event) => void"
+              }
+            }
+          ],
+          "description": "The field and then the `menu`: a menu holds menu items and nothing else, so\nthe field stands beside it, as React Aria's `Autocomplete` puts its search\nfield beside its menu. The menu calls it through its filter, so the parts it\nwrites are the menu's."
+        },
+        {
+          "kind": "class",
+          "description": "Narrows a `filterable` menu's rows as the reader types in a field above\nthem, with focus staying in the field and the highlight moving through the\nrows that are left.\n\n**Its own entry**, `@fusion.dev/helix-headless/menu/filter`, so a menu that\nnever filters carries none of this. Importing the entry gives every menu of\nthe tier one, and `filterable` turns it on. Menu's description says what a\nreader gets; this is the part of it the menu does not hold:\n\n- the field and the `menu` after it, which the menu draws in its surface\n- which rows the filter keeps, and the words each matched, marked\n- the keys the field answers: Up and Down move the highlight, Enter presses\n  the highlighted row, and Escape clears the filter before it closes\n- `helix-filter`, sent as the text changes, which a listener cancels to\n  keep every row showing\n- how many rows are kept, or `no-results-text`, said in the live region\n\nThe styled tier's entry hands in the sheet that draws the field, which the\nmenu adopts while it filters.",
+          "name": "MenuFilterController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "HelixHeadlessMenu"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "inside",
+              "type": {
+                "text": "Inside"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "description": "The same menu, read through what it keeps to itself."
+            },
+            {
+              "kind": "field",
+              "name": "sheet",
+              "type": {
+                "text": "CSSResult | undefined"
+              },
+              "description": "The sheet the menu adopts while it filters, from the styled tier.",
+              "default": "sheet"
+            },
+            {
+              "kind": "field",
+              "name": "highlighted",
+              "type": {
+                "text": "Row | undefined"
+              },
+              "description": "The row the keys reached while focus stays in the field."
+            },
+            {
+              "kind": "field",
+              "name": "page",
+              "type": {
+                "text": "Row | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "The submenu the filter narrows, or null for the top page."
+            },
+            {
+              "kind": "field",
+              "name": "refused",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private",
+              "description": "The filter a listener refused, which narrows nothing."
+            },
+            {
+              "kind": "field",
+              "name": "seen",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''",
+              "description": "The filter the last update saw, so a change moves a highlight it hid."
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "field",
+              "type": {
+                "text": "HTMLInputElement | null"
+              },
+              "description": "The field, while it is drawn.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "filtering",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the filter is narrowing the rows.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "kept",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "Row"
+                  }
+                }
+              ],
+              "description": "Whether the filter keeps a row: one of another page, or one whose words it matches."
+            },
+            {
+              "kind": "field",
+              "name": "keptRows",
+              "type": {
+                "text": "Row[]"
+              },
+              "privacy": "private",
+              "description": "The rows of the page the filter narrows that it keeps.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "request",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "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."
+            },
+            {
+              "kind": "method",
+              "name": "by",
+              "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."
+            },
+            {
+              "kind": "method",
+              "name": "highlight",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "Row | undefined"
+                  }
+                }
+              ],
+              "description": "Puts the highlight on a row, which the field names with\n`aria-activedescendant`. An element reference, because the field is in\nthe menu's shadow root and the row in the tree around it, the one\ndirection a reference crosses."
+            },
+            {
+              "kind": "method",
+              "name": "keydown",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "Row[]"
+                  }
+                },
+                {
+                  "name": "at",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Answers a key the field takes, and returns whether it did: Up and Down\nmove the highlight through the rows kept, Enter presses the highlighted\nrow, and Escape over text empties the filter, the next one going back or\nclosing."
+            },
+            {
+              "kind": "field",
+              "name": "handleMouseDown",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Keeps focus in the field through a press on a row or the way back, as\nReact Aria's virtual focus does: the press still chooses."
+            },
+            {
+              "kind": "field",
+              "name": "handleInput",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "status",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | undefined"
+                }
+              },
+              "description": "What a filter that keeps no rows shows, or nothing where it keeps some.\n\nIt sets what the live region says as well: `no-results-text` where the\nfilter keeps no rows, and how many it keeps where it keeps some, as React\nAria and Web Awesome say the count. Only \"No matches\" was said before\nthat, so a filter that kept forty rows and one that kept one sounded the\nsame."
+            },
+            {
+              "kind": "method",
+              "name": "drawFilter",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "rows",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                },
+                {
+                  "name": "busy",
+                  "type": {
+                    "text": "string | typeof nothing"
+                  }
+                }
+              ],
+              "description": "The field and then the `menu`, for the menu to draw in its surface. See `drawFilter`."
+            }
+          ],
+          "helix": {}
+        },
+        {
+          "kind": "function",
+          "name": "filterMenu",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "typeof HelixHeadlessMenu"
+              }
+            },
+            {
+              "name": "sheet",
+              "optional": true,
+              "type": {
+                "text": "CSSResult"
+              }
+            }
+          ],
+          "description": "Gives every menu of a class a `MenuFilterController`, which `filterable`\nturns on.\n\nThe entries call it for their own tier's class: the headless entry for\n`HelixHeadlessMenu`, and the styled one for `HelixMenu`, with the sheet that\ndraws the field. **Menus already on the page are given one too**, and drawn\nagain, so a page that imports the menu and then this entry gets the field."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "drawFilter",
+          "declaration": {
+            "name": "drawFilter",
+            "module": "src/menu/filter/menu-filter.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MenuFilterController",
+          "declaration": {
+            "name": "MenuFilterController",
+            "module": "src/menu/filter/menu-filter.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "filterMenu",
+          "declaration": {
+            "name": "filterMenu",
+            "module": "src/menu/filter/menu-filter.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/menu/index.ts",
@@ -112736,7 +113182,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The trigger is slotted and stays your own element, as with the tooltip. The\nmenu renders its surface in the top layer with the popover API, so an\nancestor with `overflow: hidden` does not clip it and it needs no `z-index`.\n\nSlot a `helix-button` or `helix-icon-button` as the trigger, and the menu\ntells it that it opens a menu and whether the menu is open, inside its own\nshadow root. On a plain element, such as a `<button>`, the menu writes\n`aria-haspopup=\"menu\"` and `aria-expanded`, from a frame after its own first\nrender, so a server's markup is never changed while a framework hydrates it.\nIt never writes `aria-expanded` where you wrote it yourself.\n\nSubmenus drill down by default. A submenu replaces the panel's content, and a\nback row returns to the previous page. One panel stays inside a narrow\nwindow, and works on touch screens, which have no hover. Focus follows a\nmouse resting on a row in either mode, and a drilled page is a `menu` named\nby the row that opened it.\n\n**`submenus=\"flyout\"` opens each submenu in a panel of its own beside its\nrow**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the\npointer on the row opens it, and a pointer crossing toward the open panel\nover the rows between keeps it open, as Radix's grace area does. Right Arrow\nopens a row's submenu on its first row, and Left Arrow or Escape closes it\nand returns focus to the row, the two arrows swapping on a right-to-left\npage. The row says `aria-expanded`, and the panel is a `menu` named by the\nrow.\n\nThe root holds which page is open, because only one page shows at a time. It\nsets this on items as a property, never as an attribute. An attribute written\nonto your element after it upgrades causes a hydration mismatch.\n\nGroup rows under a heading with `Menu.Section`, which is a `group` named by\nits heading. Between runs of rows, a `<helix-divider>` is a separator a\nscreen reader announces.\n\nKeys: Enter, Space or Down Arrow on the trigger opens the menu on its first\nrow, and Up Arrow on its last. In the menu, Up and Down Arrow move between\nrows, Home and End go to the first and the last, a typed letter moves to\nthe next row whose name starts with it, Enter and Space choose (Space on a\nchoice row changes it and leaves the menu open), Right Arrow\nopens a row's submenu and Left Arrow goes back, the two swapping on a\nright-to-left page. Left Arrow on the top page does nothing. Escape closes\nthe menu and returns focus to the trigger. Tab closes it and moves on.\n\nWhile it is open, the surface carries the trigger's width as\n`--floating-anchor-inline-size` and the room left below it as\n`--floating-available-block-size`, as Radix's dropdown menu publishes its\ntrigger's width, for a menu as wide as its trigger:\n`helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }`.\n\n**The choices in one place.** `checkedValues` holds the values of the rows\nthat are checked, anywhere in the menu, and setting it checks exactly\nthose rows, as React Aria's `selectedKeys` does. `change` is sent on the\nmenu when a reader's choice changes it.\n\nWith `context`, the trigger is an area and the menu is its context menu: a\nright-click, a long press, Shift+F10 or the menu key over the area opens it\nat the pointer, or at the area's corner from the keyboard, as Radix's context\nmenu does. A press on the area does not open it, and closing it returns focus\nto where it was. A touch or a pen held still on the area opens it too, on\nevery browser, since iOS sends no `contextmenu` for one.\n\n**A trigger with its own action.** With `open-on=\"long-press\"`, a press on\nthe trigger is the trigger's own, and a press held for half a second opens\nthe menu, as React Aria's `trigger=\"longPress\"` does. Alt+Down or Alt+Up\nopens it from the keyboard, and the trigger is described by\n`long-press-label`, which says so.\n\n**A filter field.** With `filterable`, the menu opens with focus in a field\nabove its rows, and typing narrows the rows of the page the keys move in,\nas React Aria's `Autocomplete` around a `Menu` does. A row is kept where its\nwords hold the filter, in any case, or where `filterMatch` says so. Each\npage starts unfiltered, and the filter is cleared as the menu closes. Where\ntyping keeps no row, the menu shows `no-results-text`. Focus stays in the\nfield: Up and Down Arrow move the highlight through the rows that are left,\nEnter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow\non a submenu goes back, and Escape clears the filter and then closes the\nmenu. A screen reader hears how many rows the filter keeps\n(`results-label`). Home, End and the other keys move the caret and type. The field names\nthe highlighted row with `aria-activedescendant`, and the rows are a `menu`\nafter the field. Cancel `helix-filter` to keep every row\nshowing and narrow the rows yourself, such as by replacing them with rows\nfrom a server.",
+          "description": "The trigger is slotted and stays your own element, as with the tooltip. The\nmenu renders its surface in the top layer with the popover API, so an\nancestor with `overflow: hidden` does not clip it and it needs no `z-index`.\n\nSlot a `helix-button` or `helix-icon-button` as the trigger, and the menu\ntells it that it opens a menu and whether the menu is open, inside its own\nshadow root. On a plain element, such as a `<button>`, the menu writes\n`aria-haspopup=\"menu\"` and `aria-expanded`, from a frame after its own first\nrender, so a server's markup is never changed while a framework hydrates it.\nIt never writes `aria-expanded` where you wrote it yourself.\n\nSubmenus drill down by default. A submenu replaces the panel's content, and a\nback row returns to the previous page. One panel stays inside a narrow\nwindow, and works on touch screens, which have no hover. Focus follows a\nmouse resting on a row in either mode, and a drilled page is a `menu` named\nby the row that opened it.\n\n**`submenus=\"flyout\"` opens each submenu in a panel of its own beside its\nrow**, as React Aria's `SubmenuTrigger` and Radix's `Sub` do. Resting the\npointer on the row opens it, and a pointer crossing toward the open panel\nover the rows between keeps it open, as Radix's grace area does. Right Arrow\nopens a row's submenu on its first row, and Left Arrow or Escape closes it\nand returns focus to the row, the two arrows swapping on a right-to-left\npage. The row says `aria-expanded`, and the panel is a `menu` named by the\nrow.\n\nThe root holds which page is open, because only one page shows at a time. It\nsets this on items as a property, never as an attribute. An attribute written\nonto your element after it upgrades causes a hydration mismatch.\n\nGroup rows under a heading with `Menu.Section`, which is a `group` named by\nits heading. Between runs of rows, a `<helix-divider>` is a separator a\nscreen reader announces.\n\nKeys: Enter, Space or Down Arrow on the trigger opens the menu on its first\nrow, and Up Arrow on its last. In the menu, Up and Down Arrow move between\nrows, Home and End go to the first and the last, a typed letter moves to\nthe next row whose name starts with it, Enter and Space choose (Space on a\nchoice row changes it and leaves the menu open), Right Arrow\nopens a row's submenu and Left Arrow goes back, the two swapping on a\nright-to-left page. Left Arrow on the top page does nothing. Escape closes\nthe menu and returns focus to the trigger. Tab closes it and moves on.\n\nWhile it is open, the surface carries the trigger's width as\n`--floating-anchor-inline-size` and the room left below it as\n`--floating-available-block-size`, as Radix's dropdown menu publishes its\ntrigger's width, for a menu as wide as its trigger:\n`helix-menu::part(surface) { min-inline-size: var(--floating-anchor-inline-size) }`.\n\n**The choices in one place.** `checkedValues` holds the values of the rows\nthat are checked, anywhere in the menu, and setting it checks exactly\nthose rows, as React Aria's `selectedKeys` does. `change` is sent on the\nmenu when a reader's choice changes it.\n\nWith `context`, the trigger is an area and the menu is its context menu: a\nright-click, a long press, Shift+F10 or the menu key over the area opens it\nat the pointer, or at the area's corner from the keyboard, as Radix's context\nmenu does. A press on the area does not open it, and closing it returns focus\nto where it was. A touch or a pen held still on the area opens it too, on\nevery browser, since iOS sends no `contextmenu` for one.\n\n**A trigger with its own action.** With `open-on=\"long-press\"`, a press on\nthe trigger is the trigger's own, and a press held for half a second opens\nthe menu, as React Aria's `trigger=\"longPress\"` does. Alt+Down or Alt+Up\nopens it from the keyboard, and the trigger is described by\n`long-press-label`, which says so.\n\n**A filter field** is a separate import, `@fusion.dev/helix/menu/filter`, so\na menu that never filters carries none of its code:\n\n```js\nimport '@fusion.dev/helix/menu'\nimport '@fusion.dev/helix/menu/filter'\n```\n\nWith it imported and `filterable` set, the menu opens with focus in a field\nabove its rows, and typing narrows the rows of the page the keys move in,\nas React Aria's `Autocomplete` around a `Menu` does. A row is kept where its\nwords hold the filter, in any case, or where `filterMatch` says so. Each\npage starts unfiltered, and the filter is cleared as the menu closes. Where\ntyping keeps no row, the menu shows `no-results-text`. Focus stays in the\nfield: Up and Down Arrow move the highlight through the rows that are left,\nEnter chooses the highlighted row, Right Arrow opens its submenu, Left Arrow\non a submenu goes back, and Escape clears the filter and then closes the\nmenu. A screen reader hears how many rows the filter keeps\n(`results-label`). Home, End and the other keys move the caret and type. The field names\nthe highlighted row with `aria-activedescendant`, and the rows are a `menu`\nafter the field. Cancel `helix-filter` to keep every row\nshowing and narrow the rows yourself, such as by replacing them with rows\nfrom a server.",
           "name": "HelixHeadlessMenu",
           "cssProperties": [
             {
@@ -112903,7 +113349,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"
             },
             {
@@ -113258,41 +113704,21 @@
             },
             {
               "kind": "field",
-              "name": "field",
-              "type": {
-                "text": "HTMLInputElement | null"
-              },
-              "privacy": "private",
-              "description": "The filter field, with `filterable`.",
-              "readonly": true
-            },
-            {
-              "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`."
             },
             {
               "kind": "field",
-              "name": "refused",
+              "name": "filters",
               "type": {
-                "text": "string | undefined"
+                "text": "MenuFilterController | undefined"
               },
               "privacy": "private",
-              "description": "The filter a listener refused, which narrows nothing."
-            },
-            {
-              "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
             },
             {
@@ -113312,7 +113738,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."
             },
             {
               "kind": "method",
@@ -113331,41 +113757,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."
-            },
-            {
-              "kind": "field",
-              "name": "handleFilterInput",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "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."
-            },
-            {
-              "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`."
             },
             {
               "kind": "method",
@@ -113384,7 +113776,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."
             },
             {
               "kind": "field",
@@ -113630,13 +114022,6 @@
               "readonly": true,
               "description": "A press on the trigger starting: the start of a held one under\n`open-on=\"long-press\"`, or a touch or a pen held on a context menu's area."
             },
-            {
-              "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."
-            },
             {
               "kind": "field",
               "name": "handlePointerMove",
@@ -114573,7 +114958,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"
             },
             {
@@ -162483,7 +162868,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns is one track wide until it upgrades.\n\n**Data Table has none of this, and should not.** Its columns are its schema\nrather than an option, so there is always a column to write a `width` on\nand a list here would be a second way to say what that says. This table's\ncells are markup, and a table written as rows of cells with no column\ndeclared in it has nowhere else to be sized from.",
+              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns takes, until it upgrades, a track for each\ncolumn at the width a column with no `width` takes (`helix.css`).\n\nData Table takes the same list, for the same reason: a data table that\nserves its first page as rows is laid out by it before it upgrades.",
               "attribute": "columns"
             },
             {
@@ -164419,7 +164804,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns is one track wide until it upgrades.\n\n**Data Table has none of this, and should not.** Its columns are its schema\nrather than an option, so there is always a column to write a `width` on\nand a list here would be a second way to say what that says. This table's\ncells are markup, and a table written as rows of cells with no column\ndeclared in it has nowhere else to be sized from.",
+              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns takes, until it upgrades, a track for each\ncolumn at the width a column with no `width` takes (`helix.css`).\n\nData Table takes the same list, for the same reason: a data table that\nserves its first page as rows is laid out by it before it upgrades.",
               "fieldName": "columns"
             },
             {
@@ -165527,6 +165912,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/table/tracks.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "tracksOf",
+          "return": {
+            "type": {
+              "text": "string[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "list",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "wanted",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "The first `wanted` tracks of a track list, one entry each, so every declared\ncolumn can take the one in its place.\n\nSplit on the spaces between tracks and never inside a function, so\n`minmax(0, 1fr)` stays one track. A `repeat()` with a count is that many\ntracks, written out; an automatic one names no count and yields none. Line\nnames go with the track after them.\n\nEverything above the split is a fact about a grid track list rather than\nabout a value list, which is why only the split itself is shared.\n\n**A track the grid would refuse yields nothing either**, where the platform\ncan say. One invalid track makes the whole `grid-template-columns` invalid,\nwhich a grid ignores in silence and draws as one column. That is the failure\nthat once had `columns` deprecated, a list of headings handed over as widths,\nand dealt out a track at a time it costs the one column its width and no\nmore."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "tracksOf",
+          "declaration": {
+            "name": "tracksOf",
+            "module": "src/table/tracks.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tabs/index.ts",
@@ -172618,6 +173043,19 @@
               "attribute": "mode",
               "reflects": true
             },
+            {
+              "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
+              }
+            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -172693,6 +173131,16 @@
               "description": "Whether times carry their seconds: the value is `HH:mm:ss`, a typed time\nmay give them, the field writes them, and the list's `step` counts seconds.\nSee Time Picker's `seconds`.",
               "attribute": "seconds"
             },
+            {
+              "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"
+            },
             {
               "kind": "field",
               "name": "step",
@@ -175910,6 +176358,15 @@
               "description": "How many times the field holds at once.\n\nAbsent is one. `range` holds a start and an end, `multiple` holds any\nnumber, and both are carried as one comma-separated value, which is what a\nform submits. `TimePicker` carries the longer note on the interaction and\non why a wheel cannot do either.",
               "fieldName": "mode"
             },
+            {
+              "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"
+            },
             {
               "name": "placeholder",
               "type": {
@@ -175964,6 +176421,15 @@
               "description": "Whether times carry their seconds: the value is `HH:mm:ss`, a typed time\nmay give them, the field writes them, and the list's `step` counts seconds.\nSee Time Picker's `seconds`.",
               "fieldName": "seconds"
             },
+            {
+              "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"
+            },
             {
               "name": "step",
               "type": {
@@ -202148,6 +202614,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.183.0"
+    "version": "0.185.0"
   }
 }