@fusion.dev/helix-headless 0.46.0 → 0.47.0

package/custom-elements.json

@@ -24494,7 +24494,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "**The schema is markup and the data is a property.** Columns are declared as\n`helix-table-column` children, because a schema is small and something a\nreader should see in the HTML; rows are handed over as an array, because a\ntable that draws ten thousand elements cannot window them.\n\n```html\n<helix-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n  <helix-table-column field=\"name\" sortable>Name</helix-table-column>\n  <helix-table-column field=\"size\" align=\"end\" sortable .cell=${bytes}>Size</helix-table-column>\n</helix-data-table>\n```\n\n`helix-table` takes rows as markup and is the right component for a table of\ntwelve things a person wrote out.\n\n**Sort and filter apply to the whole set, never the page.** Sorting the drawn\nwindow is correct on the first screen and wrong on every other one.\n\n**The cell values do not server-render.** The headings do, and the row\nelements do, but reading a cell needs the columns, and the columns are markup\nchildren Lit SSR does not hand this element. So a crawler sees a table of the\nright shape with nothing in it. That is the cost of the first paragraph: use\n`helix-table` where the served HTML has to carry the values.\n\n**`selectable` adds a column of checkboxes, keyed on `row-key`.** A row is\nselected by its identity rather than its position, so a selection survives a\nsort, a filter and a page. `selected` is the chosen keys, comma separated, the\nshape Listbox uses for a multiple choice, and like `sort` it is controlled\nwhen set and seeded by `default-selected`. The box in the heading selects every\nrow in the result, across pages, and shows a dash while only some are chosen.\nChoosing one of many, rather than several, is opening a row, and that is a\nlink or a button in a cell rather than a selection.\n\n**A reader can size and order 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 order lands\nin `order` as fields, and the consumer's own markup is never rewritten: the\ntable assigns the headings to its header in that order instead.\n\n**`csv()` hands back the result as text**: every row the filter lets through,\nin the order on screen, in the columns on screen. Saving it is the page's\nbusiness, the same as any other file.",
+          "description": "**The schema is markup and the data is a property.** Columns are declared as\n`helix-table-column` children, because a schema is small and something a\nreader should see in the HTML; rows are handed over as an array, because a\ntable that draws ten thousand elements cannot window them.\n\n```html\n<helix-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n  <helix-table-column field=\"name\" sortable>Name</helix-table-column>\n  <helix-table-column field=\"size\" align=\"end\" sortable .cell=${bytes}>Size</helix-table-column>\n</helix-data-table>\n```\n\n`helix-table` takes rows as markup and is the right component for a table of\ntwelve things a person wrote out.\n\n**Sort and filter apply to the whole set, never the page.** Sorting the drawn\nwindow is correct on the first screen and wrong on every other one.\n\n**The cell values do not server-render.** The headings do, and the row\nelements do, but reading a cell needs the columns, and the columns are markup\nchildren Lit SSR does not hand this element. So a crawler sees a table of the\nright shape with nothing in it. That is the cost of the first paragraph: use\n`helix-table` where the served HTML has to carry the values.\n\n**`selectable` adds a column of checkboxes, keyed on `row-key`.** A row is\nselected by its identity rather than its position, so a selection survives a\nsort, a filter and a page. `selected` is the chosen keys, comma separated, the\nshape Listbox uses for a multiple choice, and like `sort` it is controlled\nwhen set and seeded by `default-selected`. The box in the heading selects every\nrow in the result, across pages, and shows a dash while only some are chosen.\nChoosing one of many, rather than several, is opening a row, and that is a\nlink or a button in a cell rather than a selection.\n\n**A reader can size and order 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 order lands\nin `order` as fields, and the consumer's own markup is never rewritten: the\ntable assigns the headings to its header in that order instead.\n\n**`csv()` hands back the result as text**: every row the filter lets through,\nin the order on screen, in the columns on screen. Saving it is the page's\nbusiness, the same as any other file.\n\n**There is no `columns` attribute here, and `helix-table` has one.** The\ndifference is what a column is in each: here it is the schema, so a table\nwithout one has nothing to read a row with, and every column is a place to\nwrite a `width`. A `helix-table` holds cells a consumer wrote and can be\nwritten with no column at all, so its `columns` is where such a table is\nsized from. Written on this element the attribute is inert, which is the trap\nworth knowing when moving between the two. What both take is the CSS hook,\n`--data-table-columns` here and `--table-columns` there.",
           "name": "HelixHeadlessDataTable",
           "cssProperties": [
             {
@@ -85507,7 +85507,7 @@
           "summary": "One cell of a table.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/table",
             "aliases": [
               "Cell",
@@ -85600,7 +85600,7 @@
         },
         {
           "kind": "class",
-          "description": "**The column is the source of both its heading and its track.** Add one and\nthe table has another track; remove one and it does not. Declaring the widths\nseparately, as a CSS track list on the table, leaves nothing tying the two\ntogether: a table with three headings and a two-track list renders without\ncomplaint, and a track list that is accidentally the headings is invalid CSS\nthe grid silently ignores, collapsing the whole table into one column.\n\n**It is also where every per-column fact goes**, which is the reason\n`helix-data-table` needs no column config object. `field` names the key the\ncell reads, `sortable` says a reader may reorder by it, `align` says which\nedge the values line up against, and `cell` takes a function for anything the\nfield alone cannot express. The schema is markup and the data is a property:\na schema is small, declarative, and something a reader should be able to see\nin the HTML, and data is large and windowed.\n\n**The same element serves both tables**, the markup one and the data one. It\nis identified by a flag rather than by `instanceof`, so a `helix-table-column`\nworks inside either without the two roots sharing anything else.\n\n**It generates no box of its own**, the same as a row: the heading is a grid\nitem of the table, so it lines up with the cells under it rather than sitting\nin a wrapper that has to be kept the same width.\n\n**`hidden` takes the column out of the grid**, its heading and its track\nboth, so the columns after it keep their own widths and every row keeps its\ncells under their headings. `hidden=\"until-found\"` keeps its track, the\nheading being left drawn, as every Helix element leaves one with that value.\n`helix-data-table` draws the cells, so it leaves out the ones under a hidden\ncolumn. A `helix-table`'s cells are markup the consumer wrote, so hide them\nwith the column, as removing a column means removing its cells: a row with a\ncell more than the table has tracks wraps into the next.\n\n**A heading that does something holds a control that does it.** The host is\nthe column header, and a header is not focusable, so a sortable heading is a\n`<button>` inside it: the pattern for a sortable table, and the only way a\nreader on a keyboard reaches the sort at all. A column a reader may resize\ncarries a `separator` on its end edge, moved by dragging it or with the arrow\nkeys, and a column in a table that lets a reader reorder its columns carries\na grip the table moves.",
+          "description": "**The column is the source of both its heading and its track.** Add one and\nthe table has another track; remove one and it does not. That is what ties\nthe two together, and a table-level track list on its own does not: a list\nthat is accidentally the headings is invalid CSS a grid ignores in silence,\ndrawing the whole table as one column. `helix-table`'s `columns` is dealt out\na track at a time against the columns declared under it, so a heading among\nthe widths costs its own column a width and no more, and a list longer or\nshorter than the columns is trimmed or shared rather than being a second\ncount of them. A column's own `width` wins over the track in its place.\n\n**It is also where every per-column fact goes**, which is the reason\n`helix-data-table` needs no column config object. `field` names the key the\ncell reads, `sortable` says a reader may reorder by it, `align` says which\nedge the values line up against, and `cell` takes a function for anything the\nfield alone cannot express. The schema is markup and the data is a property:\na schema is small, declarative, and something a reader should be able to see\nin the HTML, and data is large and windowed.\n\n**The same element serves both tables**, the markup one and the data one. It\nis identified by a flag rather than by `instanceof`, so a `helix-table-column`\nworks inside either without the two roots sharing anything else.\n\n**It generates no box of its own**, the same as a row: the heading is a grid\nitem of the table, so it lines up with the cells under it rather than sitting\nin a wrapper that has to be kept the same width.\n\n**`hidden` takes the column out of the grid**, its heading and its track\nboth, so the columns after it keep their own widths and every row keeps its\ncells under their headings. `hidden=\"until-found\"` keeps its track, the\nheading being left drawn, as every Helix element leaves one with that value.\n`helix-data-table` draws the cells, so it leaves out the ones under a hidden\ncolumn. A `helix-table`'s cells are markup the consumer wrote, so hide them\nwith the column, as removing a column means removing its cells: a row with a\ncell more than the table has tracks wraps into the next.\n\n**A heading that does something holds a control that does it.** The host is\nthe column header, and a header is not focusable, so a sortable heading is a\n`<button>` inside it: the pattern for a sortable table, and the only way a\nreader on a keyboard reaches the sort at all. A column a reader may resize\ncarries a `separator` on its end edge, moved by dragging it or with the arrow\nkeys, and a column in a table that lets a reader reorder its columns carries\na grip the table moves.",
           "name": "HelixHeadlessTableColumn",
           "cssParts": [
             {
@@ -86310,7 +86310,7 @@
           "summary": "One column of a table: its heading, how wide it is, and what it reads.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/table",
             "aliases": [
               "Column header",
@@ -86409,10 +86409,6 @@
           "description": "A grid rather than a `<table>`, so every column lines up across rows while\neach row stays a real element that can be styled, hidden, or made\ninteractive. Table layout gives column alignment and takes away almost\neverything else; grid gives both.\n\nThe cost is that the roles have to be declared, since a grid of divs is not a\ntable to anyone reading it. `table`, `row`, `cell`, and `columnheader` are\nall set explicitly, and rows are `display: contents` so their cells become\nitems of the one grid that does the aligning.\n\nThe properties below are written by this component and read by whoever draws\nit. A consumer sets none of them: they carry a number this element computed\nand CSS cannot, which is what lets a stylesheet on this tier draw the thing\nwithout measuring anything itself.",
           "name": "HelixHeadlessTable",
           "cssProperties": [
-            {
-              "description": "Track list for the columns.",
-              "name": "--table-columns"
-            },
             {
               "description": "The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--table-columns` is the one to set.",
               "name": "--table-template"
@@ -86450,7 +86446,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The column widths as one track list, written once on the table.\n\nWith `helix-table-column` children, each track sizes the column in its\nplace, a hidden column counted, so hiding one takes its track with it and\nthe rest keep theirs. The columns decide how many tracks there are and this\nlist only how wide: a track past the last column is dropped, and a column\npast the last track shares what is left. With no columns declared it is\nthe whole track list. Tracks count as the grid counts them, so\n`minmax(0, 1fr)` is one and `repeat(2, 8rem)` is two, and one the grid\nwould refuse leaves its column at the default rather than taking the table\ndown 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.",
+              "description": "The column widths as one track list, written once on the table.\n\nWith `helix-table-column` children, each track sizes the column in its\nplace, a hidden column counted, so hiding one takes its track with it and\nthe rest keep theirs. The columns decide how many tracks there are and this\nlist only how wide: a track past the last column is dropped, and a column\npast the last track shares what is left. With no columns declared it is\nthe whole track list. Tracks count as the grid counts them, so\n`minmax(0, 1fr)` is one and `repeat(2, 8rem)` is two, and one the grid\nwould refuse leaves its column at the default rather than taking the table\ndown 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**`helix-data-table` has none of this, and should not.** Its columns are\nits schema rather than an option, so there is always a column to write a\n`width` on and a list here would be a second way to say what that says.\nThis table's cells are markup, and a table written as rows of cells with no\n`helix-table-column` in it has nowhere else to be sized from. Both families\ntake the same CSS hook, `--table-columns` and `--data-table-columns`, which\nwins over whichever list the element worked out.",
               "attribute": "columns"
             },
             {
@@ -87025,7 +87021,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The column widths as one track list, written once on the table.\n\nWith `helix-table-column` children, each track sizes the column in its\nplace, a hidden column counted, so hiding one takes its track with it and\nthe rest keep theirs. The columns decide how many tracks there are and this\nlist only how wide: a track past the last column is dropped, and a column\npast the last track shares what is left. With no columns declared it is\nthe whole track list. Tracks count as the grid counts them, so\n`minmax(0, 1fr)` is one and `repeat(2, 8rem)` is two, and one the grid\nwould refuse leaves its column at the default rather than taking the table\ndown 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.",
+              "description": "The column widths as one track list, written once on the table.\n\nWith `helix-table-column` children, each track sizes the column in its\nplace, a hidden column counted, so hiding one takes its track with it and\nthe rest keep theirs. The columns decide how many tracks there are and this\nlist only how wide: a track past the last column is dropped, and a column\npast the last track shares what is left. With no columns declared it is\nthe whole track list. Tracks count as the grid counts them, so\n`minmax(0, 1fr)` is one and `repeat(2, 8rem)` is two, and one the grid\nwould refuse leaves its column at the default rather than taking the table\ndown 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**`helix-data-table` has none of this, and should not.** Its columns are\nits schema rather than an option, so there is always a column to write a\n`width` on and a list here would be a second way to say what that says.\nThis table's cells are markup, and a table written as rows of cells with no\n`helix-table-column` in it has nowhere else to be sized from. Both families\ntake the same CSS hook, `--table-columns` and `--data-table-columns`, which\nwins over whichever list the element worked out.",
               "fieldName": "columns"
             },
             {
@@ -87091,7 +87087,7 @@
           "helix": {
             "category": "data",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/table",
             "aliases": [
               "DataTable",
@@ -87500,7 +87496,7 @@
           "summary": "One row of a table.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/table",
             "aliases": [
               "Row",
@@ -102191,8 +102187,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Depth from the root, set by the tree so indentation needs no CSS nesting.\n\nNot reflected. The tree assigns this after it upgrades, so an attribute\nhere would be a change to markup the consumer rendered and hydration would\nreport it. The indent it drives is written onto the row instead, inside the\nshadow root, which is not part of the tree React hydrates.",
-              "attribute": "level"
+              "description": "Depth from the root, counted by the tree so indentation needs no CSS nesting.\n\n**Read rather than written, and no attribute at all.** The tree counts the\nitems a row sits inside and assigns this on every sync, so a value declared\nhere is overwritten before the first paint: measured at `level=\"2\"` on three\nrows of a flat list, all three back to 1 with `--tree-level: 1` on every\nrow. It carried an attribute and a shipped example setting it for as long as\nboth existed, which is a depth a consumer could state and nothing would\nhonor. Depth in this tree is where a row is, not what it claims: a branch's\nchildren go in its `children` slot, and that nesting is also what decides\nwhich rows a shut branch hides and which row the outward arrow moves to.\n\nNot reflected either. The tree assigns this after it upgrades, so an\nattribute here would be a change to markup the consumer rendered and\nhydration would report it. The indent it drives is written onto the row\ninstead, inside the shadow root, which is not part of the tree React\nhydrates."
             },
             {
               "kind": "field",
@@ -102211,7 +102206,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this item is the current one.\n\nNot reflected, for the reason `level` below gives in full: the tree assigns\nthis after it upgrades, so the attribute would be a change to markup the\nconsumer rendered and hydration would report it. Mirroring to\n`data-selected` on the host instead is the same fault under another name.\n\nThe stylesheet reads it from the row inside this shadow root, because the\nrow is not part of the tree React hydrates.",
+              "description": "Whether this item is the current one.\n\nNot reflected, for the reason `level` above gives in full: the tree assigns\nthis after it upgrades, so the attribute would be a change to markup the\nconsumer rendered and hydration would report it. Mirroring to\n`data-selected` on the host instead is the same fault under another name.\n\nThe stylesheet reads it from the row inside this shadow root, because the\nrow is not part of the tree React hydrates.",
               "attribute": "selected"
             },
             {
@@ -102801,14 +102796,6 @@
               "description": "Where this node goes, which makes its row a real link.\n\nUnset by default, and unreflected: a tree of choosable nodes is not a tree\nof links, and an empty `href` written onto every row would be a link to the\ncurrent page on every item a consumer never asked to be one.",
               "fieldName": "href"
             },
-            {
-              "name": "level",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Depth from the root, set by the tree so indentation needs no CSS nesting.\n\nNot reflected. The tree assigns this after it upgrades, so an attribute\nhere would be a change to markup the consumer rendered and hydration would\nreport it. The indent it drives is written onto the row instead, inside the\nshadow root, which is not part of the tree React hydrates.",
-              "fieldName": "level"
-            },
             {
               "name": "rel",
               "type": {
@@ -102824,7 +102811,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this item is the current one.\n\nNot reflected, for the reason `level` below gives in full: the tree assigns\nthis after it upgrades, so the attribute would be a change to markup the\nconsumer rendered and hydration would report it. Mirroring to\n`data-selected` on the host instead is the same fault under another name.\n\nThe stylesheet reads it from the row inside this shadow root, because the\nrow is not part of the tree React hydrates.",
+              "description": "Whether this item is the current one.\n\nNot reflected, for the reason `level` above gives in full: the tree assigns\nthis after it upgrades, so the attribute would be a change to markup the\nconsumer rendered and hydration would report it. Mirroring to\n`data-selected` on the host instead is the same fault under another name.\n\nThe stylesheet reads it from the row inside this shadow root, because the\nrow is not part of the tree React hydrates.",
               "fieldName": "selected"
             },
             {
@@ -102902,7 +102889,7 @@
           "summary": "One node in a tree.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/tree",
             "aliases": [
               "TreeNode",
@@ -103795,7 +103782,7 @@
           "helix": {
             "category": "navigation",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/tree",
             "aliases": [
               "FileTree",

package/dist/data-table/root/data-table-root.d.ts

@@ -52,6 +52,15 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * in the order on screen, in the columns on screen. Saving it is the page's
  * business, the same as any other file.
  *
+ * **There is no `columns` attribute here, and `helix-table` has one.** The
+ * difference is what a column is in each: here it is the schema, so a table
+ * without one has nothing to read a row with, and every column is a place to
+ * write a `width`. A `helix-table` holds cells a consumer wrote and can be
+ * written with no column at all, so its `columns` is where such a table is
+ * sized from. Written on this element the attribute is inert, which is the trap
+ * worth knowing when moving between the two. What both take is the CSS hook,
+ * `--data-table-columns` here and `--table-columns` there.
+ *
  * @since 0.1.0
  * @status stable
  * @category data

package/dist/table/cell/table-cell.d.ts

@@ -13,7 +13,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * to hold together.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Cell, TableCell
  * @documentation https://fusion.dev/helix/components/table
  *

package/dist/table/column/table-column.d.ts

@@ -35,11 +35,14 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
  *
  * @description
  * **The column is the source of both its heading and its track.** Add one and
- * the table has another track; remove one and it does not. Declaring the widths
- * separately, as a CSS track list on the table, leaves nothing tying the two
- * together: a table with three headings and a two-track list renders without
- * complaint, and a track list that is accidentally the headings is invalid CSS
- * the grid silently ignores, collapsing the whole table into one column.
+ * the table has another track; remove one and it does not. That is what ties
+ * the two together, and a table-level track list on its own does not: a list
+ * that is accidentally the headings is invalid CSS a grid ignores in silence,
+ * drawing the whole table as one column. `helix-table`'s `columns` is dealt out
+ * a track at a time against the columns declared under it, so a heading among
+ * the widths costs its own column a width and no more, and a list longer or
+ * shorter than the columns is trimmed or shared rather than being a second
+ * count of them. A column's own `width` wins over the track in its place.
  *
  * **It is also where every per-column fact goes**, which is the reason
  * `helix-data-table` needs no column config object. `field` names the key the
@@ -75,7 +78,7 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
  * a grip the table moves.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Column header, Th
  * @documentation https://fusion.dev/helix/components/table
  *

package/dist/table/root/table-root.d.ts

@@ -22,7 +22,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * without measuring anything itself.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category data
  * @aliases DataTable, Grid table
  * @documentation https://fusion.dev/helix/components/table
@@ -34,7 +34,6 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart loading - Shown while the rows are still on their way.
  * @csspart table - The grid.
  *
- * @cssproperty --table-columns - Track list for the columns.
  * @cssproperty --table-template - The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--table-columns` is the one to set.
  */
 export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
@@ -57,6 +56,19 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * were this list to win, the drag would move the separator and leave the
      * track where the list put it. This is the table's default for its columns,
      * and each column may say otherwise.
+     *
+     * **It is also the only track list a server can send.** The shim has no tree
+     * to walk, so a render there knows of no columns and this attribute is the
+     * whole answer: a table given one lays its grid out in the first paint, and a
+     * table sized only by its columns is one track wide until it upgrades.
+     *
+     * **`helix-data-table` has none of this, and should not.** Its columns are
+     * its schema rather than an option, so there is always a column to write a
+     * `width` on and a list here would be a second way to say what that says.
+     * This table's cells are markup, and a table written as rows of cells with no
+     * `helix-table-column` in it has nowhere else to be sized from. Both families
+     * take the same CSS hook, `--table-columns` and `--data-table-columns`, which
+     * wins over whichever list the element worked out.
      */
     columns: string;
     /**

package/dist/table/row/table-row.d.ts

@@ -10,7 +10,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * cells are laid out by the table algorithm.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Row, TableRow
  * @documentation https://fusion.dev/helix/components/table
  *

package/dist/tree/item/tree-item.d.ts

@@ -24,7 +24,7 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * click, no status bar. Given an `href` the row *is* an `<a>`.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases TreeNode, Branch, Leaf
  * @documentation https://fusion.dev/helix/components/tree
  *
@@ -59,12 +59,23 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      */
     href: string;
     /**
-     * Depth from the root, set by the tree so indentation needs no CSS nesting.
+     * Depth from the root, counted by the tree so indentation needs no CSS nesting.
      *
-     * Not reflected. The tree assigns this after it upgrades, so an attribute
-     * here would be a change to markup the consumer rendered and hydration would
-     * report it. The indent it drives is written onto the row instead, inside the
-     * shadow root, which is not part of the tree React hydrates.
+     * **Read rather than written, and no attribute at all.** The tree counts the
+     * items a row sits inside and assigns this on every sync, so a value declared
+     * here is overwritten before the first paint: measured at `level="2"` on three
+     * rows of a flat list, all three back to 1 with `--tree-level: 1` on every
+     * row. It carried an attribute and a shipped example setting it for as long as
+     * both existed, which is a depth a consumer could state and nothing would
+     * honor. Depth in this tree is where a row is, not what it claims: a branch's
+     * children go in its `children` slot, and that nesting is also what decides
+     * which rows a shut branch hides and which row the outward arrow moves to.
+     *
+     * Not reflected either. The tree assigns this after it upgrades, so an
+     * attribute here would be a change to markup the consumer rendered and
+     * hydration would report it. The indent it drives is written onto the row
+     * instead, inside the shadow root, which is not part of the tree React
+     * hydrates.
      */
     level?: number;
     /**
@@ -79,7 +90,7 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
     /**
      * Whether this item is the current one.
      *
-     * Not reflected, for the reason `level` below gives in full: the tree assigns
+     * Not reflected, for the reason `level` above gives in full: the tree assigns
      * this after it upgrades, so the attribute would be a change to markup the
      * consumer rendered and hydration would report it. Mirroring to
      * `data-selected` on the host instead is the same fault under another name.
@@ -111,9 +122,11 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
     private branch;
     protected firstUpdated(changed: PropertyValues): void;
     /**
-     * @internal Read by the tree to identify a branch across the light DOM,
-     * which is cheaper than `instanceof` and is why this is public rather than
-     * protected. A consumer asks `branch`, which is the property they set.
+     * @internal Whether this row holds children, read by the tree, which moves
+     * and opens differently for a branch. Public rather than protected because
+     * the tree is another element and there is no other way across; not a
+     * consumer's to read, and there is nothing to set: it is what the `children`
+     * slot was given, which is the markup they already wrote.
      */
     get isBranch(): boolean;
     /**

package/dist/tree/item/tree-item.js

@@ -148,7 +148,7 @@ __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "href", void 0);
 __decorate([
-    property({ attribute: 'level', type: Number })
+    property({ attribute: false, type: Number })
 ], HelixHeadlessTreeItem.prototype, "level", void 0);
 __decorate([
     property()

package/dist/tree/root/tree-root.d.ts

@@ -14,7 +14,7 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * does not learn about the styled one.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases FileTree, Navigation tree
  * @documentation https://fusion.dev/helix/components/tree

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.46.0",
-    "@fusion.dev/helix-icons": "0.46.0",
+    "@fusion.dev/helix-core": "0.47.0",
+    "@fusion.dev/helix-icons": "0.47.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.46.0",
-    "@fusion.dev/helix-testing": "0.46.0",
+    "@fusion.dev/helix-cem": "0.47.0",
+    "@fusion.dev/helix-testing": "0.47.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -13809,7 +13809,20 @@ on the column it sizes, which is the more particular statement, and it is
 where a resize lands: a reader dragging a column's edge writes `width`, so
 were this list to win, the drag would move the separator and leave the
 track where the list put it. This is the table's default for its columns,
-and each column may say otherwise. */
+and each column may say otherwise.
+
+**It is also the only track list a server can send.** The shim has no tree
+to walk, so a render there knows of no columns and this attribute is the
+whole answer: a table given one lays its grid out in the first paint, and a
+table sized only by its columns is one track wide until it upgrades.
+
+**`helix-data-table` has none of this, and should not.** Its columns are
+its schema rather than an option, so there is always a column to write a
+`width` on and a list here would be a second way to say what that says.
+This table's cells are markup, and a table written as rows of cells with no
+`helix-table-column` in it has nowhere else to be sized from. Both families
+take the same CSS hook, `--table-columns` and `--data-table-columns`, which
+wins over whichever list the element worked out. */
   columns?: (HelixHeadlessTable["columns"]) | undefined;
   /** Accessible name for the table. */
   label?: (HelixHeadlessTable["label"]) | undefined;
@@ -13847,7 +13860,20 @@ on the column it sizes, which is the more particular statement, and it is
 where a resize lands: a reader dragging a column's edge writes `width`, so
 were this list to win, the drag would move the separator and leave the
 track where the list put it. This is the table's default for its columns,
-and each column may say otherwise. */
+and each column may say otherwise.
+
+**It is also the only track list a server can send.** The shim has no tree
+to walk, so a render there knows of no columns and this attribute is the
+whole answer: a table given one lays its grid out in the first paint, and a
+table sized only by its columns is one track wide until it upgrades.
+
+**`helix-data-table` has none of this, and should not.** Its columns are
+its schema rather than an option, so there is always a column to write a
+`width` on and a list here would be a second way to say what that says.
+This table's cells are markup, and a table written as rows of cells with no
+`helix-table-column` in it has nowhere else to be sized from. Both families
+take the same CSS hook, `--table-columns` and `--data-table-columns`, which
+wins over whichever list the element worked out. */
   "prop:columns"?: (HelixHeadlessTable["columns"]) | undefined;
   /** Accessible name for the table. */
   "prop:label"?: (HelixHeadlessTable["label"]) | undefined;
@@ -16189,13 +16215,6 @@ Unset by default, and unreflected: a tree of choosable nodes is not a tree
 of links, and an empty `href` written onto every row would be a link to the
 current page on every item a consumer never asked to be one. */
   href?: (HelixHeadlessTreeItem["href"]) | undefined;
-  /** Depth from the root, set by the tree so indentation needs no CSS nesting.
-
-Not reflected. The tree assigns this after it upgrades, so an attribute
-here would be a change to markup the consumer rendered and hydration would
-report it. The indent it drives is written onto the row instead, inside the
-shadow root, which is not part of the tree React hydrates. */
-  level?: (HelixHeadlessTreeItem["level"]) | undefined;
   /** What the link declares about where it goes.
 
 Set by the consumer rather than derived from `target`: `noreferrer` is a
@@ -16205,7 +16224,7 @@ this library supports implies it for `target="_blank"` already. */
   rel?: (HelixHeadlessTreeItem["rel"]) | undefined;
   /** Whether this item is the current one.
 
-Not reflected, for the reason `level` below gives in full: the tree assigns
+Not reflected, for the reason `level` above gives in full: the tree assigns
 this after it upgrades, so the attribute would be a change to markup the
 consumer rendered and hydration would report it. Mirroring to
 `data-selected` on the host instead is the same fault under another name.
@@ -16234,6 +16253,24 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "default-open"?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
   /** Initial open state for uncontrolled use, where nothing declared one. */
   defaultOpen?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
+  /** Depth from the root, counted by the tree so indentation needs no CSS nesting.
+
+**Read rather than written, and no attribute at all.** The tree counts the
+items a row sits inside and assigns this on every sync, so a value declared
+here is overwritten before the first paint: measured at `level="2"` on three
+rows of a flat list, all three back to 1 with `--tree-level: 1` on every
+row. It carried an attribute and a shipped example setting it for as long as
+both existed, which is a depth a consumer could state and nothing would
+honor. Depth in this tree is where a row is, not what it claims: a branch's
+children go in its `children` slot, and that nesting is also what decides
+which rows a shut branch hides and which row the outward arrow moves to.
+
+Not reflected either. The tree assigns this after it upgrades, so an
+attribute here would be a change to markup the consumer rendered and
+hydration would report it. The indent it drives is written onto the row
+instead, inside the shadow root, which is not part of the tree React
+hydrates. */
+  level?: (HelixHeadlessTreeItem["level"]) | undefined;
   /** Whether this item holds the tree's single tab stop. */
   focusable?: (HelixHeadlessTreeItem["focusable"]) | undefined;
 
@@ -16258,13 +16295,6 @@ Unset by default, and unreflected: a tree of choosable nodes is not a tree
 of links, and an empty `href` written onto every row would be a link to the
 current page on every item a consumer never asked to be one. */
   "prop:href"?: (HelixHeadlessTreeItem["href"]) | undefined;
-  /** Depth from the root, set by the tree so indentation needs no CSS nesting.
-
-Not reflected. The tree assigns this after it upgrades, so an attribute
-here would be a change to markup the consumer rendered and hydration would
-report it. The indent it drives is written onto the row instead, inside the
-shadow root, which is not part of the tree React hydrates. */
-  "prop:level"?: (HelixHeadlessTreeItem["level"]) | undefined;
   /** What the link declares about where it goes.
 
 Set by the consumer rather than derived from `target`: `noreferrer` is a
@@ -16274,7 +16304,7 @@ this library supports implies it for `target="_blank"` already. */
   "prop:rel"?: (HelixHeadlessTreeItem["rel"]) | undefined;
   /** Whether this item is the current one.
 
-Not reflected, for the reason `level` below gives in full: the tree assigns
+Not reflected, for the reason `level` above gives in full: the tree assigns
 this after it upgrades, so the attribute would be a change to markup the
 consumer rendered and hydration would report it. Mirroring to
 `data-selected` on the host instead is the same fault under another name.
@@ -16303,6 +16333,24 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "bool:default-open"?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
   /** Initial open state for uncontrolled use, where nothing declared one. */
   "prop:defaultOpen"?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
+  /** Depth from the root, counted by the tree so indentation needs no CSS nesting.
+
+**Read rather than written, and no attribute at all.** The tree counts the
+items a row sits inside and assigns this on every sync, so a value declared
+here is overwritten before the first paint: measured at `level="2"` on three
+rows of a flat list, all three back to 1 with `--tree-level: 1` on every
+row. It carried an attribute and a shipped example setting it for as long as
+both existed, which is a depth a consumer could state and nothing would
+honor. Depth in this tree is where a row is, not what it claims: a branch's
+children go in its `children` slot, and that nesting is also what decides
+which rows a shut branch hides and which row the outward arrow moves to.
+
+Not reflected either. The tree assigns this after it upgrades, so an
+attribute here would be a change to markup the consumer rendered and
+hydration would report it. The indent it drives is written onto the row
+instead, inside the shadow root, which is not part of the tree React
+hydrates. */
+  "prop:level"?: (HelixHeadlessTreeItem["level"]) | undefined;
   /** Whether this item holds the tree's single tab stop. */
   "prop:focusable"?: (HelixHeadlessTreeItem["focusable"]) | undefined;
   /** Fired before a branch closes, and cancelable. */
@@ -21393,6 +21441,15 @@ export type CustomElements = {
    * in the order on screen, in the columns on screen. Saving it is the page's
    * business, the same as any other file.
    *
+   * **There is no `columns` attribute here, and `helix-table` has one.** The
+   * difference is what a column is in each: here it is the schema, so a table
+   * without one has nothing to read a row with, and every column is a place to
+   * write a `width`. A `helix-table` holds cells a consumer wrote and can be
+   * written with no column at all, so its `columns` is where such a table is
+   * sized from. Written on this element the attribute is inert, which is the trap
+   * worth knowing when moving between the two. What both take is the CSS hook,
+   * `--data-table-columns` here and `--table-columns` there.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -31339,11 +31396,14 @@ export type CustomElements = {
 
   /**
    * **The column is the source of both its heading and its track.** Add one and
-   * the table has another track; remove one and it does not. Declaring the widths
-   * separately, as a CSS track list on the table, leaves nothing tying the two
-   * together: a table with three headings and a two-track list renders without
-   * complaint, and a track list that is accidentally the headings is invalid CSS
-   * the grid silently ignores, collapsing the whole table into one column.
+   * the table has another track; remove one and it does not. That is what ties
+   * the two together, and a table-level track list on its own does not: a list
+   * that is accidentally the headings is invalid CSS a grid ignores in silence,
+   * drawing the whole table as one column. `helix-table`'s `columns` is dealt out
+   * a track at a time against the columns declared under it, so a heading among
+   * the widths costs its own column a width and no more, and a list longer or
+   * shorter than the columns is trimmed or shared rather than being a second
+   * count of them. A column's own `width` wins over the track in its place.
    *
    * **It is also where every per-column fact goes**, which is the reason
    * `helix-data-table` needs no column config object. `field` names the key the
@@ -31577,6 +31637,19 @@ export type CustomElements = {
    * were this list to win, the drag would move the separator and leave the
    * track where the list put it. This is the table's default for its columns,
    * and each column may say otherwise.
+   *
+   * **It is also the only track list a server can send.** The shim has no tree
+   * to walk, so a render there knows of no columns and this attribute is the
+   * whole answer: a table given one lays its grid out in the first paint, and a
+   * table sized only by its columns is one track wide until it upgrades.
+   *
+   * **`helix-data-table` has none of this, and should not.** Its columns are
+   * its schema rather than an option, so there is always a column to write a
+   * `width` on and a list here would be a second way to say what that says.
+   * This table's cells are markup, and a table written as rows of cells with no
+   * `helix-table-column` in it has nowhere else to be sized from. Both families
+   * take the same CSS hook, `--table-columns` and `--data-table-columns`, which
+   * wins over whichever list the element worked out.
    * - `label`: Accessible name for the table.
    * - `empty-text`/`emptyText`: What is said where there are none, and none are coming.
    * - `loading`: Whether the rows are still on their way.
@@ -31617,7 +31690,6 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--table-columns`: Track list for the columns. (default: `undefined`)
    * - `--table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--table-columns` is the one to set. (default: `undefined`)
    *
    * ## CSS Parts
@@ -33987,12 +34059,6 @@ export type CustomElements = {
    * Unset by default, and unreflected: a tree of choosable nodes is not a tree
    * of links, and an empty `href` written onto every row would be a link to the
    * current page on every item a consumer never asked to be one.
-   * - `level`: Depth from the root, set by the tree so indentation needs no CSS nesting.
-   *
-   * Not reflected. The tree assigns this after it upgrades, so an attribute
-   * here would be a change to markup the consumer rendered and hydration would
-   * report it. The indent it drives is written onto the row instead, inside the
-   * shadow root, which is not part of the tree React hydrates.
    * - `rel`: What the link declares about where it goes.
    *
    * Set by the consumer rather than derived from `target`: `noreferrer` is a
@@ -34001,7 +34067,7 @@ export type CustomElements = {
    * this library supports implies it for `target="_blank"` already.
    * - `selected`: Whether this item is the current one.
    *
-   * Not reflected, for the reason `level` below gives in full: the tree assigns
+   * Not reflected, for the reason `level` above gives in full: the tree assigns
    * this after it upgrades, so the attribute would be a change to markup the
    * consumer rendered and hydration would report it. Mirroring to
    * `data-selected` on the host instead is the same fault under another name.
@@ -34023,6 +34089,23 @@ export type CustomElements = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `default-open`/`defaultOpen`: Initial open state for uncontrolled use, where nothing declared one.
+   * - `level`: Depth from the root, counted by the tree so indentation needs no CSS nesting.
+   *
+   * **Read rather than written, and no attribute at all.** The tree counts the
+   * items a row sits inside and assigns this on every sync, so a value declared
+   * here is overwritten before the first paint: measured at `level="2"` on three
+   * rows of a flat list, all three back to 1 with `--tree-level: 1` on every
+   * row. It carried an attribute and a shipped example setting it for as long as
+   * both existed, which is a depth a consumer could state and nothing would
+   * honor. Depth in this tree is where a row is, not what it claims: a branch's
+   * children go in its `children` slot, and that nesting is also what decides
+   * which rows a shut branch hides and which row the outward arrow moves to.
+   *
+   * Not reflected either. The tree assigns this after it upgrades, so an
+   * attribute here would be a change to markup the consumer rendered and
+   * hydration would report it. The indent it drives is written onto the row
+   * instead, inside the shadow root, which is not part of the tree React
+   * hydrates. (property only)
    * - `focusable`: Whether this item holds the tree's single tab stop. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
@@ -39162,6 +39245,15 @@ export type CustomElementsSolidJs = {
    * in the order on screen, in the columns on screen. Saving it is the page's
    * business, the same as any other file.
    *
+   * **There is no `columns` attribute here, and `helix-table` has one.** The
+   * difference is what a column is in each: here it is the schema, so a table
+   * without one has nothing to read a row with, and every column is a place to
+   * write a `width`. A `helix-table` holds cells a consumer wrote and can be
+   * written with no column at all, so its `columns` is where such a table is
+   * sized from. Written on this element the attribute is inert, which is the trap
+   * worth knowing when moving between the two. What both take is the CSS hook,
+   * `--data-table-columns` here and `--table-columns` there.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -49269,11 +49361,14 @@ export type CustomElementsSolidJs = {
 
   /**
    * **The column is the source of both its heading and its track.** Add one and
-   * the table has another track; remove one and it does not. Declaring the widths
-   * separately, as a CSS track list on the table, leaves nothing tying the two
-   * together: a table with three headings and a two-track list renders without
-   * complaint, and a track list that is accidentally the headings is invalid CSS
-   * the grid silently ignores, collapsing the whole table into one column.
+   * the table has another track; remove one and it does not. That is what ties
+   * the two together, and a table-level track list on its own does not: a list
+   * that is accidentally the headings is invalid CSS a grid ignores in silence,
+   * drawing the whole table as one column. `helix-table`'s `columns` is dealt out
+   * a track at a time against the columns declared under it, so a heading among
+   * the widths costs its own column a width and no more, and a list longer or
+   * shorter than the columns is trimmed or shared rather than being a second
+   * count of them. A column's own `width` wins over the track in its place.
    *
    * **It is also where every per-column fact goes**, which is the reason
    * `helix-data-table` needs no column config object. `field` names the key the
@@ -49508,6 +49603,19 @@ export type CustomElementsSolidJs = {
    * were this list to win, the drag would move the separator and leave the
    * track where the list put it. This is the table's default for its columns,
    * and each column may say otherwise.
+   *
+   * **It is also the only track list a server can send.** The shim has no tree
+   * to walk, so a render there knows of no columns and this attribute is the
+   * whole answer: a table given one lays its grid out in the first paint, and a
+   * table sized only by its columns is one track wide until it upgrades.
+   *
+   * **`helix-data-table` has none of this, and should not.** Its columns are
+   * its schema rather than an option, so there is always a column to write a
+   * `width` on and a list here would be a second way to say what that says.
+   * This table's cells are markup, and a table written as rows of cells with no
+   * `helix-table-column` in it has nowhere else to be sized from. Both families
+   * take the same CSS hook, `--table-columns` and `--data-table-columns`, which
+   * wins over whichever list the element worked out.
    * - `label`: Accessible name for the table.
    * - `empty-text`/`emptyText`: What is said where there are none, and none are coming.
    * - `loading`: Whether the rows are still on their way.
@@ -49548,7 +49656,6 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--table-columns`: Track list for the columns. (default: `undefined`)
    * - `--table-template`: The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--table-columns` is the one to set. (default: `undefined`)
    *
    * ## CSS Parts
@@ -51969,12 +52076,6 @@ export type CustomElementsSolidJs = {
    * Unset by default, and unreflected: a tree of choosable nodes is not a tree
    * of links, and an empty `href` written onto every row would be a link to the
    * current page on every item a consumer never asked to be one.
-   * - `level`: Depth from the root, set by the tree so indentation needs no CSS nesting.
-   *
-   * Not reflected. The tree assigns this after it upgrades, so an attribute
-   * here would be a change to markup the consumer rendered and hydration would
-   * report it. The indent it drives is written onto the row instead, inside the
-   * shadow root, which is not part of the tree React hydrates.
    * - `rel`: What the link declares about where it goes.
    *
    * Set by the consumer rather than derived from `target`: `noreferrer` is a
@@ -51983,7 +52084,7 @@ export type CustomElementsSolidJs = {
    * this library supports implies it for `target="_blank"` already.
    * - `selected`: Whether this item is the current one.
    *
-   * Not reflected, for the reason `level` below gives in full: the tree assigns
+   * Not reflected, for the reason `level` above gives in full: the tree assigns
    * this after it upgrades, so the attribute would be a change to markup the
    * consumer rendered and hydration would report it. Mirroring to
    * `data-selected` on the host instead is the same fault under another name.
@@ -52005,6 +52106,23 @@ export type CustomElementsSolidJs = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `default-open`/`defaultOpen`: Initial open state for uncontrolled use, where nothing declared one.
+   * - `level`: Depth from the root, counted by the tree so indentation needs no CSS nesting.
+   *
+   * **Read rather than written, and no attribute at all.** The tree counts the
+   * items a row sits inside and assigns this on every sync, so a value declared
+   * here is overwritten before the first paint: measured at `level="2"` on three
+   * rows of a flat list, all three back to 1 with `--tree-level: 1` on every
+   * row. It carried an attribute and a shipped example setting it for as long as
+   * both existed, which is a depth a consumer could state and nothing would
+   * honor. Depth in this tree is where a row is, not what it claims: a branch's
+   * children go in its `children` slot, and that nesting is also what decides
+   * which rows a shut branch hides and which row the outward arrow moves to.
+   *
+   * Not reflected either. The tree assigns this after it upgrades, so an
+   * attribute here would be a change to markup the consumer rendered and
+   * hydration would report it. The indent it drives is written onto the row
+   * instead, inside the shadow root, which is not part of the tree React
+   * hydrates. (property only)
    * - `focusable`: Whether this item holds the tree's single tab stop. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
@@ -53118,8 +53236,6 @@ export type CustomCssProperties = {
   "--splitter-position"?: (string) | undefined;
   /** The edge the column this cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the table around it, since the cell is the consumer's markup and nothing is written onto it; read by the sheet that draws the cell, where `justify-content` and `text-align` both take it as it comes and both follow the writing direction. */
   "--table-cell-align"?: (string) | undefined;
-  /** Track list for the columns. */
-  "--table-columns"?: (string) | undefined;
   /** The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--table-columns` is the one to set. */
   "--table-template"?: (string) | undefined;
   /** How long this message stays, in milliseconds, for a progress hint. */

package/types/vue.d.ts

@@ -7083,7 +7083,20 @@ on the column it sizes, which is the more particular statement, and it is
 where a resize lands: a reader dragging a column's edge writes `width`, so
 were this list to win, the drag would move the separator and leave the
 track where the list put it. This is the table's default for its columns,
-and each column may say otherwise. */
+and each column may say otherwise.
+
+**It is also the only track list a server can send.** The shim has no tree
+to walk, so a render there knows of no columns and this attribute is the
+whole answer: a table given one lays its grid out in the first paint, and a
+table sized only by its columns is one track wide until it upgrades.
+
+**`helix-data-table` has none of this, and should not.** Its columns are
+its schema rather than an option, so there is always a column to write a
+`width` on and a list here would be a second way to say what that says.
+This table's cells are markup, and a table written as rows of cells with no
+`helix-table-column` in it has nowhere else to be sized from. Both families
+take the same CSS hook, `--table-columns` and `--data-table-columns`, which
+wins over whichever list the element worked out. */
   columns?: (HelixHeadlessTable["columns"]) | undefined;
   /** Accessible name for the table. */
   label?: (HelixHeadlessTable["label"]) | undefined;
@@ -8316,13 +8329,6 @@ Unset by default, and unreflected: a tree of choosable nodes is not a tree
 of links, and an empty `href` written onto every row would be a link to the
 current page on every item a consumer never asked to be one. */
   href?: (HelixHeadlessTreeItem["href"]) | undefined;
-  /** Depth from the root, set by the tree so indentation needs no CSS nesting.
-
-Not reflected. The tree assigns this after it upgrades, so an attribute
-here would be a change to markup the consumer rendered and hydration would
-report it. The indent it drives is written onto the row instead, inside the
-shadow root, which is not part of the tree React hydrates. */
-  level?: (HelixHeadlessTreeItem["level"]) | undefined;
   /** What the link declares about where it goes.
 
 Set by the consumer rather than derived from `target`: `noreferrer` is a
@@ -8332,7 +8338,7 @@ this library supports implies it for `target="_blank"` already. */
   rel?: (HelixHeadlessTreeItem["rel"]) | undefined;
   /** Whether this item is the current one.
 
-Not reflected, for the reason `level` below gives in full: the tree assigns
+Not reflected, for the reason `level` above gives in full: the tree assigns
 this after it upgrades, so the attribute would be a change to markup the
 consumer rendered and hydration would report it. Mirroring to
 `data-selected` on the host instead is the same fault under another name.
@@ -8361,6 +8367,24 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "default-open"?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
   /** Initial open state for uncontrolled use, where nothing declared one. */
   defaultOpen?: (HelixHeadlessTreeItem["defaultOpen"]) | undefined;
+  /** Depth from the root, counted by the tree so indentation needs no CSS nesting.
+
+**Read rather than written, and no attribute at all.** The tree counts the
+items a row sits inside and assigns this on every sync, so a value declared
+here is overwritten before the first paint: measured at `level="2"` on three
+rows of a flat list, all three back to 1 with `--tree-level: 1` on every
+row. It carried an attribute and a shipped example setting it for as long as
+both existed, which is a depth a consumer could state and nothing would
+honor. Depth in this tree is where a row is, not what it claims: a branch's
+children go in its `children` slot, and that nesting is also what decides
+which rows a shut branch hides and which row the outward arrow moves to.
+
+Not reflected either. The tree assigns this after it upgrades, so an
+attribute here would be a change to markup the consumer rendered and
+hydration would report it. The indent it drives is written onto the row
+instead, inside the shadow root, which is not part of the tree React
+hydrates. */
+  level?: (HelixHeadlessTreeItem["level"]) | undefined;
   /** Whether this item holds the tree's single tab stop. */
   focusable?: (HelixHeadlessTreeItem["focusable"]) | undefined;
 };
@@ -8994,8 +9018,6 @@ export type CustomCssProperties = {
   "--splitter-position"?: (string) | undefined;
   /** The edge the column this cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the table around it, since the cell is the consumer's markup and nothing is written onto it; read by the sheet that draws the cell, where `justify-content` and `text-align` both take it as it comes and both follow the writing direction. */
   "--table-cell-align"?: (string) | undefined;
-  /** Track list for the columns. */
-  "--table-columns"?: (string) | undefined;
   /** The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--table-columns` is the one to set. */
   "--table-template"?: (string) | undefined;
   /** How long this message stays, in milliseconds, for a progress hint. */
@@ -9188,7 +9210,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCopyButtonVueProps,
     HelixHeadlessCopyButtonVueEvents
   >;
-  /** **The schema is markup and the data is a property.** Columns are declared as 'helix-table-column' children, because a schema is small and something a reader should see in the HTML; rows are handed over as an array, because a table that draws ten thousand elements cannot window them.  '''html <helix-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-table-column field="name" sortable>Name</helix-table-column>   <helix-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-table-column> </helix-data-table> '''  'helix-table' takes rows as markup and is the right component for a table of twelve things a person wrote out.  **Sort and filter apply to the whole set, never the page.** Sorting the drawn window is correct on the first screen and wrong on every other one.  **The cell values do not server-render.** The headings do, and the row elements do, but reading a cell needs the columns, and the columns are markup children Lit SSR does not hand this element. So a crawler sees a table of the right shape with nothing in it. That is the cost of the first paragraph: use 'helix-table' where the served HTML has to carry the values.  **'selectable' adds a column of checkboxes, keyed on 'row-key'.** A row is selected by its identity rather than its position, so a selection survives a sort, a filter and a page. 'selected' is the chosen keys, comma separated, the shape Listbox uses for a multiple choice, and like 'sort' it is controlled when set and seeded by 'default-selected'. The box in the heading selects every row in the result, across pages, and shows a dash while only some are chosen. Choosing one of many, rather than several, is opening a row, and that is a link or a button in a cell rather than a selection.  **A reader can size and order the columns.** 'resizable' on a column puts a separator on its edge; 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The order lands in 'order' as fields, and the consumer's own markup is never rewritten: the table assigns the headings to its header in that order instead.  **'csv()' hands back the result as text**: every row the filter lets through, in the order on screen, in the columns on screen. Saving it is the page's business, the same as any other file. */
+  /** **The schema is markup and the data is a property.** Columns are declared as 'helix-table-column' children, because a schema is small and something a reader should see in the HTML; rows are handed over as an array, because a table that draws ten thousand elements cannot window them.  '''html <helix-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-table-column field="name" sortable>Name</helix-table-column>   <helix-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-table-column> </helix-data-table> '''  'helix-table' takes rows as markup and is the right component for a table of twelve things a person wrote out.  **Sort and filter apply to the whole set, never the page.** Sorting the drawn window is correct on the first screen and wrong on every other one.  **The cell values do not server-render.** The headings do, and the row elements do, but reading a cell needs the columns, and the columns are markup children Lit SSR does not hand this element. So a crawler sees a table of the right shape with nothing in it. That is the cost of the first paragraph: use 'helix-table' where the served HTML has to carry the values.  **'selectable' adds a column of checkboxes, keyed on 'row-key'.** A row is selected by its identity rather than its position, so a selection survives a sort, a filter and a page. 'selected' is the chosen keys, comma separated, the shape Listbox uses for a multiple choice, and like 'sort' it is controlled when set and seeded by 'default-selected'. The box in the heading selects every row in the result, across pages, and shows a dash while only some are chosen. Choosing one of many, rather than several, is opening a row, and that is a link or a button in a cell rather than a selection.  **A reader can size and order the columns.** 'resizable' on a column puts a separator on its edge; 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The order lands in 'order' as fields, and the consumer's own markup is never rewritten: the table assigns the headings to its header in that order instead.  **'csv()' hands back the result as text**: every row the filter lets through, in the order on screen, in the columns on screen. Saving it is the page's business, the same as any other file.  **There is no 'columns' attribute here, and 'helix-table' has one.** The difference is what a column is in each: here it is the schema, so a table without one has nothing to read a row with, and every column is a place to write a 'width'. A 'helix-table' holds cells a consumer wrote and can be written with no column at all, so its 'columns' is where such a table is sized from. Written on this element the attribute is inert, which is the trap worth knowing when moving between the two. What both take is the CSS hook, '--data-table-columns' here and '--table-columns' there. */
   "helix-headless-data-table": DefineCustomElement<
     HelixHeadlessDataTable,
     HelixHeadlessDataTableVueProps,
@@ -9614,7 +9636,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessTableCellVueProps,
     HelixHeadlessTableCellVueEvents
   >;
-  /** **The column is the source of both its heading and its track.** Add one and the table has another track; remove one and it does not. Declaring the widths separately, as a CSS track list on the table, leaves nothing tying the two together: a table with three headings and a two-track list renders without complaint, and a track list that is accidentally the headings is invalid CSS the grid silently ignores, collapsing the whole table into one column.  **It is also where every per-column fact goes**, which is the reason 'helix-data-table' needs no column config object. 'field' names the key the cell reads, 'sortable' says a reader may reorder by it, 'align' says which edge the values line up against, and 'cell' takes a function for anything the field alone cannot express. The schema is markup and the data is a property: a schema is small, declarative, and something a reader should be able to see in the HTML, and data is large and windowed.  **The same element serves both tables**, the markup one and the data one. It is identified by a flag rather than by 'instanceof', so a 'helix-table-column' works inside either without the two roots sharing anything else.  **It generates no box of its own**, the same as a row: the heading is a grid item of the table, so it lines up with the cells under it rather than sitting in a wrapper that has to be kept the same width.  **'hidden' takes the column out of the grid**, its heading and its track both, so the columns after it keep their own widths and every row keeps its cells under their headings. 'hidden="until-found"' keeps its track, the heading being left drawn, as every Helix element leaves one with that value. 'helix-data-table' draws the cells, so it leaves out the ones under a hidden column. A 'helix-table''s cells are markup the consumer wrote, so hide them with the column, as removing a column means removing its cells: a row with a cell more than the table has tracks wraps into the next.  **A heading that does something holds a control that does it.** The host is the column header, and a header is not focusable, so a sortable heading is a '<button>' inside it: the pattern for a sortable table, and the only way a reader on a keyboard reaches the sort at all. A column a reader may resize carries a 'separator' on its end edge, moved by dragging it or with the arrow keys, and a column in a table that lets a reader reorder its columns carries a grip the table moves. */
+  /** **The column is the source of both its heading and its track.** Add one and the table has another track; remove one and it does not. That is what ties the two together, and a table-level track list on its own does not: a list that is accidentally the headings is invalid CSS a grid ignores in silence, drawing the whole table as one column. 'helix-table''s 'columns' is dealt out a track at a time against the columns declared under it, so a heading among the widths costs its own column a width and no more, and a list longer or shorter than the columns is trimmed or shared rather than being a second count of them. A column's own 'width' wins over the track in its place.  **It is also where every per-column fact goes**, which is the reason 'helix-data-table' needs no column config object. 'field' names the key the cell reads, 'sortable' says a reader may reorder by it, 'align' says which edge the values line up against, and 'cell' takes a function for anything the field alone cannot express. The schema is markup and the data is a property: a schema is small, declarative, and something a reader should be able to see in the HTML, and data is large and windowed.  **The same element serves both tables**, the markup one and the data one. It is identified by a flag rather than by 'instanceof', so a 'helix-table-column' works inside either without the two roots sharing anything else.  **It generates no box of its own**, the same as a row: the heading is a grid item of the table, so it lines up with the cells under it rather than sitting in a wrapper that has to be kept the same width.  **'hidden' takes the column out of the grid**, its heading and its track both, so the columns after it keep their own widths and every row keeps its cells under their headings. 'hidden="until-found"' keeps its track, the heading being left drawn, as every Helix element leaves one with that value. 'helix-data-table' draws the cells, so it leaves out the ones under a hidden column. A 'helix-table''s cells are markup the consumer wrote, so hide them with the column, as removing a column means removing its cells: a row with a cell more than the table has tracks wraps into the next.  **A heading that does something holds a control that does it.** The host is the column header, and a header is not focusable, so a sortable heading is a '<button>' inside it: the pattern for a sortable table, and the only way a reader on a keyboard reaches the sort at all. A column a reader may resize carries a 'separator' on its end edge, moved by dragging it or with the arrow keys, and a column in a table that lets a reader reorder its columns carries a grip the table moves. */
   "helix-headless-table-column": DefineCustomElement<
     HelixHeadlessTableColumn,
     HelixHeadlessTableColumnVueProps,