@fusion.dev/helix-headless 0.38.0 → 0.40.0

package/custom-elements.json

@@ -663,7 +663,7 @@
           "summary": "One collapsible section of an accordion.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/accordion",
             "aliases": [
               "Collapsible",
@@ -1083,7 +1083,7 @@
           "helix": {
             "category": "layout",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/accordion",
             "aliases": [
               "Collapse",
@@ -24410,6 +24410,10 @@
           "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.",
           "name": "HelixHeadlessDataTable",
           "cssProperties": [
+            {
+              "description": "The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; `helix-table` publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name.",
+              "name": "--data-table-cell-align"
+            },
             {
               "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. `--data-table-columns` is the one to set.",
               "name": "--data-table-template"
@@ -24473,7 +24477,7 @@
               "name": "checkbox-mark-indeterminate"
             },
             {
-              "description": "Shown when no rows match.",
+              "description": "Shown when the result has nothing in it, whether it arrived empty or a filter emptied it. A result still on its way is `loading` instead, which wins over this.",
               "name": "empty"
             },
             {
@@ -25098,7 +25102,7 @@
               },
               "privacy": "protected",
               "readonly": true,
-              "description": "Emptiness is a fact about the data here, not about slotted children.",
+              "description": "Emptiness is a fact about the data here, not about slotted children.\n\n**The page rather than the window**, which is the difference between the two\ncounts `view` carries and the reason this reads `available`. A windowed\ntable draws a slice, and a slice can be short of the rows that are there:\nasking whether *this* slice has rows says \"nothing matched\" about a result\nthat matched plenty.\n\nThe mixin's own answer counts children with no `slot`, which for this\nelement is the columns. Left in place, a table with columns and no data\nwould call itself full.",
               "inheritedFrom": {
                 "name": "MixinCollection",
                 "module": "src/mixins/mixin-collection/mixin-collection.ts"
@@ -25469,7 +25473,8 @@
                     "text": "boolean"
                   }
                 }
-              ]
+              ],
+              "description": "One cell, carrying its column's edge as a fact rather than as a decision.\n\n**A fact published rather than a property chosen**, which is what\n`helix-table` does with the same attribute: what lining up *means*, a\n`justify-content` for a value that fits or a `text-align` for one that\nwraps, belongs to whoever draws the cell. Written here as an inline\n`text-align` it was this tier choosing, in the tier that ships no CSS, and a\nconsumer could not overrule it either, an inline declaration beating any\n`::part(cell)` rule they wrote.\n\nOnly the three edges reach it, `align` being a string anybody can write and\nthis being a style attribute: `edgeOf` is that guard, and `helix-table`\nholds the same value to the same three."
             },
             {
               "kind": "method",
@@ -26453,7 +26458,7 @@
           "helix": {
             "category": "data",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/data-table",
             "aliases": [
               "Grid",
@@ -30698,7 +30703,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "What the value is, for the common case of plain text.\n\nThe fallback of the `label` slot, so slotted content replaces it rather than\nappearing beside it.",
+              "description": "What the value is called, for the common case of plain text.\n\nThe fallback of the `label` slot, so slotted content replaces it rather than\nappearing beside it. The value itself is the default slot: it is the half\nthat varies and is often more than text.",
               "attribute": "label"
             },
             {
@@ -31033,7 +31038,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "What the value is, for the common case of plain text.\n\nThe fallback of the `label` slot, so slotted content replaces it rather than\nappearing beside it.",
+              "description": "What the value is called, for the common case of plain text.\n\nThe fallback of the `label` slot, so slotted content replaces it rather than\nappearing beside it. The value itself is the default slot: it is the half\nthat varies and is often more than text.",
               "fieldName": "label"
             }
           ],
@@ -31044,7 +31049,7 @@
           "summary": "One label and its value.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/description-list",
             "tier": "headless",
             "group": "BaseDescriptionList",
@@ -31459,7 +31464,7 @@
           "helix": {
             "category": "data",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/description-list",
             "aliases": [
               "Data list",
@@ -42749,7 +42754,7 @@
               "name": "cell"
             },
             {
-              "description": "Shown when the table has no readings in it.",
+              "description": "Shown when the table has no readings in it, and not before the table can be read at all: on a server, and while hydrating what one sent, there is no document to resolve `for` in and nothing is known yet.",
               "name": "empty"
             },
             {
@@ -42859,7 +42864,7 @@
                 "text": "string"
               },
               "default": "'No readings'",
-              "description": "Shown when the table has no readings in it.",
+              "description": "Shown when the table has no readings in it.\n\nNever shown while the table cannot be read at all, which is a server render\nand the hydrating one after it: see `sourceKnown`.",
               "attribute": "empty-text"
             },
             {
@@ -42979,6 +42984,16 @@
               "description": "Every reading in the table, oldest first, as the table is written.\n\n**Not `readings`, which the mixin already has and which means a count.**\nTwo members of the same name meaning a number and an array is the kind of\ncollision that type-checks in one direction and reads wrong in both.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "sourceKnown",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Whether this render can tell a table with no readings from one it has not\nresolved yet.\n\n**Unknown is not empty, which is what an empty state must never say.**\n`for` names an id and resolving an id wants a document, so a server has\nnone and a hydrating render must not look either. Without this the server\ndrew \"No readings\" over a table holding ninety days of them, a crawler read\nthat sentence, and the strip flipped to a full one on hydration: the fault\n`MixinCollection` names for a slotted collection, arriving through the one\nchannel that mixin cannot see.\n\nThe same shape as `childrenKnown`, asked of a document rather than of a\ntree. An id that resolves to nothing in a browser is still known, and still\nempty: a `for` naming no table should say so rather than sit blank.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "rowCount",
@@ -43552,7 +43567,7 @@
                 "text": "string"
               },
               "default": "'No readings'",
-              "description": "Shown when the table has no readings in it.",
+              "description": "Shown when the table has no readings in it.\n\nNever shown while the table cannot be read at all, which is a server render\nand the hydrating one after it: see `sourceKnown`.",
               "fieldName": "emptyText"
             },
             {
@@ -43641,7 +43656,7 @@
           "helix": {
             "category": "charts",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/heatmap",
             "aliases": [
               "Contribution graph",
@@ -55110,7 +55125,7 @@
           "summary": "One row in a menu: a command, a choice, or a way into a submenu.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/menu",
             "aliases": [
               "Menu option",
@@ -56170,7 +56185,7 @@
           "helix": {
             "category": "overlays",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/menu",
             "aliases": [
               "Dropdown",
@@ -57407,7 +57422,7 @@
           "helix": {
             "category": "navigation",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/navigation",
             "aliases": [
               "Nav",
@@ -61510,9 +61525,8 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether to leave the copy button off.\n\nNegative for the reason Code Block's is: a boolean attribute defaulting to\ntrue could never be turned off from markup.",
-              "attribute": "no-copy",
-              "reflects": true
+              "description": "Whether to leave the copy button off.\n\nNegative for the reason Code Block's is: a boolean attribute defaulting to\ntrue could never be turned off from markup.\n\n**It does not reflect, where Code Block's does**, and the difference is what\nthe two sheets need. Code Block reserves the button's width with\n`:host(:not([no-copy]))`, so the attribute has to be there for a consumer\nwho set the property. This button is positioned out of the flow and takes no\nroom, so nothing selects on it, and reflection exists so that a selector can\nreach a value.",
+              "attribute": "no-copy"
             },
             {
               "kind": "field",
@@ -61791,7 +61805,8 @@
                     "text": "number"
                   }
                 }
-              ]
+              ],
+              "description": "One entry, named for its state where it holds one.\n\n**`row-active` and no attribute beside it.** Which row the keys are on is\ndrawn by a sheet and by nothing else: the accessibility tree hears it from\n`aria-activedescendant` on the tree, which points at this row's id, so an\nattribute would be a second spelling with no reader. The name is the one a\nconsumer can reach, nothing being able to follow `::part()` with an\nattribute selector."
             },
             {
               "kind": "method",
@@ -62181,7 +62196,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether to leave the copy button off.\n\nNegative for the reason Code Block's is: a boolean attribute defaulting to\ntrue could never be turned off from markup.",
+              "description": "Whether to leave the copy button off.\n\nNegative for the reason Code Block's is: a boolean attribute defaulting to\ntrue could never be turned off from markup.\n\n**It does not reflect, where Code Block's does**, and the difference is what\nthe two sheets need. Code Block reserves the button's width with\n`:host(:not([no-copy]))`, so the attribute has to be there for a consumer\nwho set the property. This button is positioned out of the flow and takes no\nroom, so nothing selects on it, and reflection exists so that a selector can\nreach a value.",
               "fieldName": "noCopy"
             },
             {
@@ -62202,7 +62217,7 @@
           "helix": {
             "category": "data",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/object-inspector",
             "aliases": [
               "JSON viewer",
@@ -65099,7 +65114,7 @@
           "helix": {
             "category": "navigation",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/pagination",
             "aliases": [
               "Pager",
@@ -65765,7 +65780,7 @@
           "summary": "Chooses how many items a page holds.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/pagination",
             "aliases": [
               "Page size",
@@ -66248,7 +66263,7 @@
           "summary": "Reads out which items of how many are on show.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/pagination",
             "aliases": [
               "Result count",
@@ -83013,7 +83028,7 @@
           "helix": {
             "category": "navigation",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/steps",
             "aliases": [
               "Stepper",
@@ -83118,7 +83133,7 @@
               "name": ""
             },
             {
-              "description": "What the stage holds, shown while it is the current one.",
+              "description": "What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with; the styled tier opens it on the current step down a column, and a row has no space under a step to open it into.",
               "name": "content"
             },
             {
@@ -83589,7 +83604,7 @@
           "summary": "One stage in a sequence.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/steps",
             "aliases": [
               "Stage"
@@ -85251,6 +85266,24 @@
           ],
           "description": "A dot path resolved against a row.\n\nWritten here rather than taken from a library, because the whole of what is\nneeded is \"walk the keys and stop at the first thing that is not an object\".\nReturns `undefined` for a path that does not resolve, which the table renders\nas an empty cell: a missing key is a hole in the data and drawing `undefined`\ninto a table tells a reader the software is broken rather than the row is."
         },
+        {
+          "kind": "function",
+          "name": "edgeOf",
+          "return": {
+            "type": {
+              "text": "string | undefined"
+            }
+          },
+          "parameters": [
+            {
+              "name": "align",
+              "type": {
+                "text": "string | undefined"
+              }
+            }
+          ],
+          "description": "The edge a column names, where it names one of the three.\n\n**`align` is a string anybody can write**, the union on the property being a\ncompile-time claim and nothing else, and both tables put the value straight\ninto CSS: `helix-table` into a rule in each row's shadow root, `helix-data-table`\ninto the cell it draws. One guard, here with the property, rather than one in\neach table and only one of them written."
+        },
         {
           "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.",
@@ -85988,6 +86021,14 @@
             "module": "src/table/column/table-column.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "edgeOf",
+          "declaration": {
+            "name": "edgeOf",
+            "module": "src/table/column/table-column.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "HelixHeadlessTableColumn",
@@ -87695,11 +87736,11 @@
           ],
           "slots": [
             {
-              "description": "The tabs.",
+              "description": "The tabs, which are this element's own children.",
               "name": ""
             },
             {
-              "description": "The panels.",
+              "description": "The panels, which are this element's own children. A wrapper around them is assigned to the slot and pairs with nothing, since the pairing walks these children rather than the slot's tree.",
               "name": "panels"
             }
           ],

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

@@ -15,7 +15,7 @@ declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("
  * `display` has overridden the first.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Collapsible, Expander, Disclosure
  * @documentation https://fusion.dev/helix/components/accordion
  *

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

@@ -25,7 +25,7 @@ import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
  * to hear.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category layout
  * @aliases Collapse, Expander group
  * @documentation https://fusion.dev/helix/components/accordion

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

@@ -53,7 +53,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * business, the same as any other file.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category data
  * @aliases Grid, Result table, Data grid
  * @documentation https://fusion.dev/helix/components/data-table
@@ -82,7 +82,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart checkbox-mark - The tick, or the dash while some rows are selected.
  * @csspart checkbox-mark-checked - The mark while its box is checked, beside `checkbox-mark`.
  * @csspart checkbox-mark-indeterminate - The dash while only some rows are selected, beside `checkbox-mark`.
- * @csspart empty - Shown when no rows match.
+ * @csspart empty - Shown when the result has nothing in it, whether it arrived empty or a filter emptied it. A result still on its way is `loading` instead, which wins over this.
  * @csspart footer - The region below the grid.
  * @csspart head - The row the column headings sit in. `display: contents`, so it takes no space.
  * @csspart loading - Shown while the rows are still on their way.
@@ -106,6 +106,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart table - The grid.
  * @csspart toolbar - The region above the grid.
  *
+ * @cssproperty --data-table-cell-align - The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; `helix-table` publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name.
  * @cssproperty --data-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. `--data-table-columns` is the one to set.
  */
 export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base {
@@ -451,7 +452,19 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * asking `view` for it would recurse through the clamp in `page`.
      */
     private get matched();
-    /** Emptiness is a fact about the data here, not about slotted children. */
+    /**
+     * Emptiness is a fact about the data here, not about slotted children.
+     *
+     * **The page rather than the window**, which is the difference between the two
+     * counts `view` carries and the reason this reads `available`. A windowed
+     * table draws a slice, and a slice can be short of the rows that are there:
+     * asking whether *this* slice has rows says "nothing matched" about a result
+     * that matched plenty.
+     *
+     * The mixin's own answer counts children with no `slot`, which for this
+     * element is the columns. Left in place, a table with columns and no data
+     * would call itself full.
+     */
     protected get hasRows(): boolean;
     /**
      * Asks for a different order, and reports whether the request stood.
@@ -575,6 +588,21 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private announceSort;
     /** Columns arrive from the light DOM, which changes no property here. */
     private readonly handleSlotChange;
+    /**
+     * One cell, carrying its column's edge as a fact rather than as a decision.
+     *
+     * **A fact published rather than a property chosen**, which is what
+     * `helix-table` does with the same attribute: what lining up *means*, a
+     * `justify-content` for a value that fits or a `text-align` for one that
+     * wraps, belongs to whoever draws the cell. Written here as an inline
+     * `text-align` it was this tier choosing, in the tier that ships no CSS, and a
+     * consumer could not overrule it either, an inline declaration beating any
+     * `::part(cell)` rule they wrote.
+     *
+     * Only the three edges reach it, `align` being a string anybody can write and
+     * this being a style attribute: `edgeOf` is that guard, and `helix-table`
+     * holds the same value to the same three.
+     */
     private renderCell;
     /**
      * A checkbox, named for what it chooses, whose change the table takes.

package/dist/data-table/root/data-table-root.js

@@ -10,7 +10,7 @@ import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
-import { at } from '../../table/column/table-column.js';
+import { at, edgeOf } from '../../table/column/table-column.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
 import { arranged, cycle, format, ordered, parse, window_, } from './order.js';
@@ -353,7 +353,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         })).length;
     }
     get hasRows() {
-        return this.view.rows.length > 0;
+        return this.view.available > 0;
     }
     requestSort(next) {
         return requestChange({
@@ -547,10 +547,11 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         }
     }
     renderCell(column, row, picked) {
+        const edge = edgeOf(column.align);
         return html `<span
       part="cell${picked ? ' cell-selected' : ''}"
       role="gridcell"
-      style=${column.align ? `text-align: ${column.align}` : nothing}
+      style=${edge ? `--data-table-cell-align: ${edge}` : nothing}
       >${column.read(row)}</span
     >`;
     }
@@ -619,6 +620,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     render() {
         const { available, matched, rows } = this.view;
+        const filled = this.hasRows;
         const template = this.template;
         const columns = this.shownColumns;
         const pagination = this.tag('pagination');
@@ -638,7 +640,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}
         </div>
         ${this.renderSpacer('before')}${this.renderRows(rows)}${this.renderSpacer('after')}
-        ${this.renderStatus(available > 0)}
+        ${this.renderStatus(filled)}
       </div>
       <div part="footer">
         <slot name="footer"></slot>

package/dist/description-list/item/description-list-item.d.ts

@@ -13,7 +13,7 @@ import { type TemplateResult } from 'lit';
  * it is also a property.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @documentation https://fusion.dev/helix/components/description-list
  *
  * @slot - The value.
@@ -24,10 +24,11 @@ import { type TemplateResult } from 'lit';
  */
 export declare class HelixHeadlessDescriptionListItem extends HelixElement {
     /**
-     * What the value is, for the common case of plain text.
+     * What the value is called, for the common case of plain text.
      *
      * The fallback of the `label` slot, so slotted content replaces it rather than
-     * appearing beside it.
+     * appearing beside it. The value itself is the default slot: it is the half
+     * that varies and is often more than text.
      */
     label: string;
     protected render(): TemplateResult;

package/dist/description-list/root/description-list-root.d.ts

@@ -21,7 +21,7 @@ import { type TemplateResult } from 'lit';
  * `display: contents` alike.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category data
  * @aliases Data list, Key-value list, Details, Properties
  * @documentation https://fusion.dev/helix/components/description-list

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

@@ -28,7 +28,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * here is the dependency the tiers exist to prevent.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @aliases Contribution graph, Uptime strip, Calendar heatmap, Activity graph
  * @documentation https://fusion.dev/helix/components/heatmap
@@ -40,7 +40,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @event {HelixResizeEvent} helix-resize - Fired when the number of cells drawn changes, carrying that number.
  *
  * @csspart cell - One reading.
- * @csspart empty - Shown when the table has no readings in it.
+ * @csspart empty - Shown when the table has no readings in it, and not before the table can be read at all: on a server, and while hydrating what one sent, there is no document to resolve `for` in and nothing is known yet.
  * @csspart end - The trailing slot's box.
  * @csspart footer - The three-slot row under the strip.
  * @csspart mark - The invisible point the tooltip is anchored to.
@@ -86,6 +86,9 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
 export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     /**
      * Shown when the table has no readings in it.
+     *
+     * Never shown while the table cannot be read at all, which is a server render
+     * and the hydrating one after it: see `sourceKnown`.
      */
     emptyText: string;
     /**
@@ -201,6 +204,23 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * collision that type-checks in one direction and reads wrong in both.
      */
     private get points();
+    /**
+     * Whether this render can tell a table with no readings from one it has not
+     * resolved yet.
+     *
+     * **Unknown is not empty, which is what an empty state must never say.**
+     * `for` names an id and resolving an id wants a document, so a server has
+     * none and a hydrating render must not look either. Without this the server
+     * drew "No readings" over a table holding ninety days of them, a crawler read
+     * that sentence, and the strip flipped to a full one on hydration: the fault
+     * `MixinCollection` names for a slotted collection, arriving through the one
+     * channel that mixin cannot see.
+     *
+     * The same shape as `childrenKnown`, asked of a document rather than of a
+     * tree. An id that resolves to nothing in a browser is still known, and still
+     * empty: a `for` naming no table should say so rather than sit blank.
+     */
+    private get sourceKnown();
     /**
      * `rows` as a usable count, which is not always what the attribute says.
      *

package/dist/heatmap/root/heatmap-root.js

@@ -38,6 +38,16 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     get points() {
         return this.series[0]?.points ?? [];
     }
+    get sourceKnown() {
+        if (this.for === '') {
+            return true;
+        }
+        if (this.hydrating) {
+            return false;
+        }
+        const root = this.getRootNode();
+        return typeof root.getElementById === 'function';
+    }
     get rowCount() {
         return Math.max(1, Math.floor(this.rows) || 1);
     }
@@ -145,7 +155,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             })}
         ${this.renderTooltip()}
       </div>
-      ${cells.length === 0 ? html `<p part="empty">${this.emptyText}</p>` : nothing}
+      ${cells.length === 0 && this.sourceKnown ? html `<p part="empty">${this.emptyText}</p>` : nothing}
       <div part="footer">
         <span part="start"><slot name="start"></slot></span>
         <span part="summary"><slot name="summary"></slot></span>

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

@@ -21,7 +21,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * upgrades is a hydration mismatch waiting to happen.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Menu option, Menu row
  * @documentation https://fusion.dev/helix/components/menu
  *

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

@@ -23,7 +23,7 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * upgrades is a hydration mismatch waiting to happen.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category overlays
  * @aliases Dropdown, Action menu
  * @documentation https://fusion.dev/helix/components/menu

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

@@ -21,7 +21,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * marker in the right place.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Nav, NavList, Tabs
  * @documentation https://fusion.dev/helix/components/navigation

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -54,7 +54,7 @@ interface Row {
  * gives it and a headless consumer has to.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category data
  * @aliases JSON viewer, Object viewer, Inspector, Data explorer
  * @documentation https://fusion.dev/helix/components/object-inspector
@@ -120,6 +120,13 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      *
      * Negative for the reason Code Block's is: a boolean attribute defaulting to
      * true could never be turned off from markup.
+     *
+     * **It does not reflect, where Code Block's does**, and the difference is what
+     * the two sheets need. Code Block reserves the button's width with
+     * `:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+     * who set the property. This button is positioned out of the flow and takes no
+     * room, so nothing selects on it, and reflection exists so that a selector can
+     * reach a value.
      */
     noCopy: boolean;
     /**
@@ -179,6 +186,16 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private readonly handleKeydown;
     private handleRowClick;
     private renderValue;
+    /**
+     * One entry, named for its state where it holds one.
+     *
+     * **`row-active` and no attribute beside it.** Which row the keys are on is
+     * drawn by a sheet and by nothing else: the accessibility tree hears it from
+     * `aria-activedescendant` on the tree, which points at this row's id, so an
+     * attribute would be a second spelling with no reader. The name is the one a
+     * consumer can reach, nothing being able to follow `::part()` with an
+     * attribute selector.
+     */
     private renderRow;
     /** The copy button, behind the seam Code Block's uses, so each tier renders its own. */
     protected renderCopyButton(row: Row | undefined): TemplateResult;

package/dist/object-inspector/root/object-inspector-root.js

@@ -262,7 +262,6 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
       role="treeitem"
       id=${`row-${index}`}
       data-index=${index}
-      ?data-active=${active}
       aria-level=${row.depth + 1}
       aria-posinset=${row.position}
       aria-setsize=${row.siblings}
@@ -331,7 +330,7 @@ __decorate([
     property()
 ], HelixHeadlessObjectInspector.prototype, "label", void 0);
 __decorate([
-    property({ attribute: 'no-copy', reflect: true, type: Boolean })
+    property({ attribute: 'no-copy', type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "noCopy", void 0);
 __decorate([
     property({ attribute: false })

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

@@ -34,7 +34,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * slot can only offer one place: at one end of one row, in one order.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Pager, Page nav
  * @documentation https://fusion.dev/helix/components/pagination

package/dist/pagination/size/pagination-size.d.ts

@@ -33,7 +33,7 @@ import '../../select/index.js';
  * position should survive it.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Page size, Rows per page
  * @documentation https://fusion.dev/helix/components/pagination
  *

package/dist/pagination/summary/pagination-summary.d.ts

@@ -19,7 +19,7 @@ import { type TemplateResult } from 'lit';
  * does not call it.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Result count, Range
  * @documentation https://fusion.dev/helix/components/pagination
  */

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

@@ -17,7 +17,7 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * count.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Stepper, Wizard, Progress steps
  * @documentation https://fusion.dev/helix/components/steps

package/dist/steps/step/step.d.ts

@@ -22,12 +22,12 @@ import '../../button/index.js';
  * that are not there.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Stage
  * @documentation https://fusion.dev/helix/components/steps
  *
  * @slot - The step's name.
- * @slot content - What the stage holds, shown while it is the current one.
+ * @slot content - What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with; the styled tier opens it on the current step down a column, and a row has no space under a step to open it into.
  * @slot description - A line under the name, for what the stage is for.
  * @slot marker - Replaces the number, or the check a complete step shows.
  *

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

@@ -20,6 +20,16 @@ export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
  * into a table tells a reader the software is broken rather than the row is.
  */
 export declare const at: (row: Readonly<Record<string, unknown>>, path: string) => unknown;
+/**
+ * The edge a column names, where it names one of the three.
+ *
+ * **`align` is a string anybody can write**, the union on the property being a
+ * compile-time claim and nothing else, and both tables put the value straight
+ * into CSS: `helix-table` into a rule in each row's shadow root, `helix-data-table`
+ * into the cell it draws. One guard, here with the property, rather than one in
+ * each table and only one of them written.
+ */
+export declare const edgeOf: (align: string | undefined) => string | undefined;
 /**
  * @summary One column of a table: its heading, how wide it is, and what it reads.
  *

package/dist/table/column/table-column.js

@@ -26,6 +26,8 @@ export const at = (row, path) => {
     }
     return cursor;
 };
+const EDGES = new Set(['center', 'end', 'start']);
+export const edgeOf = (align) => align && EDGES.has(align) ? align : undefined;
 let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixElement {
     constructor() {
         super(...arguments);

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

@@ -1,6 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import type { HelixHeadlessTableColumn } from '../column/table-column.js';
+import { type HelixHeadlessTableColumn } from '../column/table-column.js';
 declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
 /**
  * @summary Tabular data laid out on a grid.

package/dist/table/root/table-root.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, MixinCollection } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-const EDGES = new Set(['center', 'end', 'start']);
+import { edgeOf } from '../column/table-column.js';
 const tracksOf = (list, wanted) => {
     const words = [];
     let depth = 0;
@@ -119,9 +119,10 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
             return;
         }
-        const rules = this.tableColumns.flatMap((column, index) => column.align && EDGES.has(column.align)
-            ? [`::slotted(:nth-child(${index + 1})) { --table-cell-align: ${column.align}; }`]
-            : []);
+        const rules = this.tableColumns.flatMap((column, index) => {
+            const edge = edgeOf(column.align);
+            return edge ? [`::slotted(:nth-child(${index + 1})) { --table-cell-align: ${edge}; }`] : [];
+        });
         const text = ['::slotted(*) { --table-cell-align: initial; }', ...rules].join('\n');
         this.alignment ??= new CSSStyleSheet();
         if (text !== this.aligned) {

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

@@ -21,8 +21,8 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @aliases TabList, Segmented control
  * @documentation https://fusion.dev/helix/components/tabs
  *
- * @slot - The tabs.
- * @slot panels - The panels.
+ * @slot - The tabs, which are this element's own children.
+ * @slot panels - The panels, which are this element's own children. A wrapper around them is assigned to the slot and pairs with nothing, since the pairing walks these children rather than the slot's tree.
  *
  * @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current tab moves, and cancelable. The only way to refuse one.

package/dist/tabs/root/tabs-root.js

@@ -41,7 +41,8 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     }
     sync() {
         const tabs = this.tabs;
-        const value = this.resolveActive(tabs)?.value ?? '';
+        const declared = this.active === '' ? tabs.find((tab) => tab.selected) : undefined;
+        const value = (declared ?? this.resolveActive(tabs))?.value ?? '';
         for (const tab of tabs) {
             tab.selected = tab.value === value;
         }

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.38.0",
+  "version": "0.40.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.38.0",
-    "@fusion.dev/helix-icons": "0.38.0",
+    "@fusion.dev/helix-core": "0.40.0",
+    "@fusion.dev/helix-icons": "0.40.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.38.0",
-    "@fusion.dev/helix-testing": "0.38.0",
+    "@fusion.dev/helix-cem": "0.40.0",
+    "@fusion.dev/helix-testing": "0.40.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

@@ -162,6 +162,7 @@ import type {
   HelixSortEvent,
   HelixTourAskEvent,
   at,
+  edgeOf,
   fromMinutes,
   initialsOf,
   isTime,
@@ -5315,18 +5316,20 @@ reader makes in one of these. */
 };
 
 export type HelixHeadlessDescriptionListItemProps = {
-  /** What the value is, for the common case of plain text.
+  /** What the value is called, for the common case of plain text.
 
 The fallback of the `label` slot, so slotted content replaces it rather than
-appearing beside it. */
+appearing beside it. The value itself is the default slot: it is the half
+that varies and is often more than text. */
   label?: (HelixHeadlessDescriptionListItem["label"]) | undefined;
 };
 
 export type HelixHeadlessDescriptionListItemSolidJsProps = {
-  /** What the value is, for the common case of plain text.
+  /** What the value is called, for the common case of plain text.
 
 The fallback of the `label` slot, so slotted content replaces it rather than
-appearing beside it. */
+appearing beside it. The value itself is the default slot: it is the half
+that varies and is often more than text. */
   "prop:label"?: (HelixHeadlessDescriptionListItem["label"]) | undefined;
 
   /** Set the innerHTML of the element */
@@ -6941,9 +6944,15 @@ export type HelixHeadlessHeatmapHelixResizeElementEvent =
   HelixHeadlessHeatmapElementEvent<HelixResizeEvent>;
 
 export type HelixHeadlessHeatmapProps = {
-  /** Shown when the table has no readings in it. */
+  /** Shown when the table has no readings in it.
+
+Never shown while the table cannot be read at all, which is a server render
+and the hydrating one after it: see `sourceKnown`. */
   "empty-text"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
-  /** Shown when the table has no readings in it. */
+  /** Shown when the table has no readings in it.
+
+Never shown while the table cannot be read at all, which is a server render
+and the hydrating one after it: see `sourceKnown`. */
   emptyText?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels, for the same reason `min-cell` is a
 number. */
@@ -7030,9 +7039,15 @@ words and is already written. */
 };
 
 export type HelixHeadlessHeatmapSolidJsProps = {
-  /** Shown when the table has no readings in it. */
+  /** Shown when the table has no readings in it.
+
+Never shown while the table cannot be read at all, which is a server render
+and the hydrating one after it: see `sourceKnown`. */
   "attr:empty-text"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
-  /** Shown when the table has no readings in it. */
+  /** Shown when the table has no readings in it.
+
+Never shown while the table cannot be read at all, which is a server render
+and the hydrating one after it: see `sourceKnown`. */
   "prop:emptyText"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels, for the same reason `min-cell` is a
 number. */
@@ -9979,12 +9994,26 @@ page's markup should not take the page down over a comma. */
   /** Whether to leave the copy button off.
 
 Negative for the reason Code Block's is: a boolean attribute defaulting to
-true could never be turned off from markup. */
+true could never be turned off from markup.
+
+**It does not reflect, where Code Block's does**, and the difference is what
+the two sheets need. Code Block reserves the button's width with
+`:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+who set the property. This button is positioned out of the flow and takes no
+room, so nothing selects on it, and reflection exists so that a selector can
+reach a value. */
   "no-copy"?: (HelixHeadlessObjectInspector["noCopy"]) | undefined;
   /** Whether to leave the copy button off.
 
 Negative for the reason Code Block's is: a boolean attribute defaulting to
-true could never be turned off from markup. */
+true could never be turned off from markup.
+
+**It does not reflect, where Code Block's does**, and the difference is what
+the two sheets need. Code Block reserves the button's width with
+`:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+who set the property. This button is positioned out of the flow and takes no
+room, so nothing selects on it, and reflection exists so that a selector can
+reach a value. */
   noCopy?: (HelixHeadlessObjectInspector["noCopy"]) | undefined;
   /** Whether to draw only the rows in view.
 
@@ -10029,12 +10058,26 @@ page's markup should not take the page down over a comma. */
   /** Whether to leave the copy button off.
 
 Negative for the reason Code Block's is: a boolean attribute defaulting to
-true could never be turned off from markup. */
+true could never be turned off from markup.
+
+**It does not reflect, where Code Block's does**, and the difference is what
+the two sheets need. Code Block reserves the button's width with
+`:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+who set the property. This button is positioned out of the flow and takes no
+room, so nothing selects on it, and reflection exists so that a selector can
+reach a value. */
   "bool:no-copy"?: (HelixHeadlessObjectInspector["noCopy"]) | undefined;
   /** Whether to leave the copy button off.
 
 Negative for the reason Code Block's is: a boolean attribute defaulting to
-true could never be turned off from markup. */
+true could never be turned off from markup.
+
+**It does not reflect, where Code Block's does**, and the difference is what
+the two sheets need. Code Block reserves the button's width with
+`:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+who set the property. This button is positioned out of the flow and takes no
+room, so nothing selects on it, and reflection exists so that a selector can
+reach a value. */
   "prop:noCopy"?: (HelixHeadlessObjectInspector["noCopy"]) | undefined;
   /** Whether to draw only the rows in view.
 
@@ -21275,6 +21318,7 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--data-table-cell-align`: The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; `helix-table` publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name. (default: `undefined`)
    * - `--data-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. `--data-table-columns` is the one to set. (default: `undefined`)
    *
    * ## CSS Parts
@@ -21295,7 +21339,7 @@ export type CustomElements = {
    * - `checkbox-mark`: The tick, or the dash while some rows are selected.
    * - `checkbox-mark-checked`: The mark while its box is checked, beside `checkbox-mark`.
    * - `checkbox-mark-indeterminate`: The dash while only some rows are selected, beside `checkbox-mark`.
-   * - `empty`: Shown when no rows match.
+   * - `empty`: Shown when the result has nothing in it, whether it arrived empty or a filter emptied it. A result still on its way is `loading` instead, which wins over this.
    * - `footer`: The region below the grid.
    * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
    * - `loading`: Shown while the rows are still on their way.
@@ -21878,10 +21922,11 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: What the value is, for the common case of plain text.
+   * - `label`: What the value is called, for the common case of plain text.
    *
    * The fallback of the `label` slot, so slotted content replaces it rather than
-   * appearing beside it.
+   * appearing beside it. The value itself is the default slot: it is the half
+   * that varies and is often more than text.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -23933,6 +23978,9 @@ export type CustomElements = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `empty-text`/`emptyText`: Shown when the table has no readings in it.
+   *
+   * Never shown while the table cannot be read at all, which is a server render
+   * and the hydrating one after it: see `sourceKnown`.
    * - `gap`: Space between cells, in CSS pixels, for the same reason `min-cell` is a
    * number.
    * - `min-cell`/`minCell`: The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
@@ -24094,7 +24142,7 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `cell`: One reading.
-   * - `empty`: Shown when the table has no readings in it.
+   * - `empty`: Shown when the table has no readings in it, and not before the table can be read at all: on a server, and while hydrating what one sent, there is no document to resolve `for` in and nothing is known yet.
    * - `end`: The trailing slot's box.
    * - `footer`: The three-slot row under the strip.
    * - `mark`: The invisible point the tooltip is anchored to.
@@ -26998,6 +27046,13 @@ export type CustomElements = {
    *
    * Negative for the reason Code Block's is: a boolean attribute defaulting to
    * true could never be turned off from markup.
+   *
+   * **It does not reflect, where Code Block's does**, and the difference is what
+   * the two sheets need. Code Block reserves the button's width with
+   * `:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+   * who set the property. This button is positioned out of the flow and takes no
+   * room, so nothing selects on it, and reflection exists so that a selector can
+   * reach a value.
    * - `windowed`: Whether to draw only the rows in view.
    *
    * For a value of thousands of entries. Reflected, because the box it scrolls
@@ -30547,7 +30602,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The step's name.
-   * - `content`: What the stage holds, shown while it is the current one.
+   * - `content`: What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with; the styled tier opens it on the current step down a column, and a row has no space under a step to open it into.
    * - `description`: A line under the name, for what the stage is for.
    * - `marker`: Replaces the number, or the check a complete step shows.
    *
@@ -31313,8 +31368,8 @@ export type CustomElements = {
    *
    * Areas where markup can be added to the component.
    *
-   * - `(default)`: The tabs.
-   * - `panels`: The panels.
+   * - `(default)`: The tabs, which are this element's own children.
+   * - `panels`: The panels, which are this element's own children. A wrapper around them is assigned to the slot and pairs with nothing, since the pairing walks these children rather than the slot's tree.
    *
    * ## Methods
    *
@@ -38755,6 +38810,7 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--data-table-cell-align`: The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; `helix-table` publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name. (default: `undefined`)
    * - `--data-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. `--data-table-columns` is the one to set. (default: `undefined`)
    *
    * ## CSS Parts
@@ -38775,7 +38831,7 @@ export type CustomElementsSolidJs = {
    * - `checkbox-mark`: The tick, or the dash while some rows are selected.
    * - `checkbox-mark-checked`: The mark while its box is checked, beside `checkbox-mark`.
    * - `checkbox-mark-indeterminate`: The dash while only some rows are selected, beside `checkbox-mark`.
-   * - `empty`: Shown when no rows match.
+   * - `empty`: Shown when the result has nothing in it, whether it arrived empty or a filter emptied it. A result still on its way is `loading` instead, which wins over this.
    * - `footer`: The region below the grid.
    * - `head`: The row the column headings sit in. `display: contents`, so it takes no space.
    * - `loading`: Shown while the rows are still on their way.
@@ -39365,10 +39421,11 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: What the value is, for the common case of plain text.
+   * - `label`: What the value is called, for the common case of plain text.
    *
    * The fallback of the `label` slot, so slotted content replaces it rather than
-   * appearing beside it.
+   * appearing beside it. The value itself is the default slot: it is the half
+   * that varies and is often more than text.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -41448,6 +41505,9 @@ export type CustomElementsSolidJs = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `empty-text`/`emptyText`: Shown when the table has no readings in it.
+   *
+   * Never shown while the table cannot be read at all, which is a server render
+   * and the hydrating one after it: see `sourceKnown`.
    * - `gap`: Space between cells, in CSS pixels, for the same reason `min-cell` is a
    * number.
    * - `min-cell`/`minCell`: The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
@@ -41609,7 +41669,7 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `cell`: One reading.
-   * - `empty`: Shown when the table has no readings in it.
+   * - `empty`: Shown when the table has no readings in it, and not before the table can be read at all: on a server, and while hydrating what one sent, there is no document to resolve `for` in and nothing is known yet.
    * - `end`: The trailing slot's box.
    * - `footer`: The three-slot row under the strip.
    * - `mark`: The invisible point the tooltip is anchored to.
@@ -44564,6 +44624,13 @@ export type CustomElementsSolidJs = {
    *
    * Negative for the reason Code Block's is: a boolean attribute defaulting to
    * true could never be turned off from markup.
+   *
+   * **It does not reflect, where Code Block's does**, and the difference is what
+   * the two sheets need. Code Block reserves the button's width with
+   * `:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+   * who set the property. This button is positioned out of the flow and takes no
+   * room, so nothing selects on it, and reflection exists so that a selector can
+   * reach a value.
    * - `windowed`: Whether to draw only the rows in view.
    *
    * For a value of thousands of entries. Reflected, because the box it scrolls
@@ -48179,7 +48246,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The step's name.
-   * - `content`: What the stage holds, shown while it is the current one.
+   * - `content`: What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with; the styled tier opens it on the current step down a column, and a row has no space under a step to open it into.
    * - `description`: A line under the name, for what the stage is for.
    * - `marker`: Replaces the number, or the check a complete step shows.
    *
@@ -48964,8 +49031,8 @@ export type CustomElementsSolidJs = {
    *
    * Areas where markup can be added to the component.
    *
-   * - `(default)`: The tabs.
-   * - `panels`: The panels.
+   * - `(default)`: The tabs, which are this element's own children.
+   * - `panels`: The panels, which are this element's own children. A wrapper around them is assigned to the slot and pairs with nothing, since the pairing walks these children rather than the slot's tree.
    *
    * ## Methods
    *
@@ -52205,6 +52272,8 @@ export type CustomCssProperties = {
   "--color-picker-saturation"?: (string) | undefined;
   /** A color to paint: the current one on the sample, a preset's on each preset. */
   "--color-picker-swatch"?: (string) | undefined;
+  /** The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; `helix-table` publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name. */
+  "--data-table-cell-align"?: (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. `--data-table-columns` is the one to set. */
   "--data-table-template"?: (string) | undefined;
   /** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */

package/types/vue.d.ts

@@ -105,6 +105,7 @@ import type {
   HelixHeadlessSwitch,
   HelixHeadlessTableCell,
   at,
+  edgeOf,
   HelixHeadlessTableColumn,
   HelixHeadlessTable,
   HelixHeadlessTableRow,
@@ -2729,10 +2730,11 @@ export type HelixHeadlessDatePickerVueEvents = {
 };
 
 export type HelixHeadlessDescriptionListItemVueProps = {
-  /** What the value is, for the common case of plain text.
+  /** What the value is called, for the common case of plain text.
 
 The fallback of the `label` slot, so slotted content replaces it rather than
-appearing beside it. */
+appearing beside it. The value itself is the default slot: it is the half
+that varies and is often more than text. */
   label?: (HelixHeadlessDescriptionListItem["label"]) | undefined;
 };
 
@@ -3563,9 +3565,15 @@ export type HelixHeadlessHeatmapHelixResizeElementEvent =
   HelixHeadlessHeatmapElementEvent<HelixResizeEvent>;
 
 export type HelixHeadlessHeatmapVueProps = {
-  /** Shown when the table has no readings in it. */
+  /** Shown when the table has no readings in it.
+
+Never shown while the table cannot be read at all, which is a server render
+and the hydrating one after it: see `sourceKnown`. */
   "empty-text"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
-  /** Shown when the table has no readings in it. */
+  /** Shown when the table has no readings in it.
+
+Never shown while the table cannot be read at all, which is a server render
+and the hydrating one after it: see `sourceKnown`. */
   emptyText?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels, for the same reason `min-cell` is a
 number. */
@@ -5130,12 +5138,26 @@ page's markup should not take the page down over a comma. */
   /** Whether to leave the copy button off.
 
 Negative for the reason Code Block's is: a boolean attribute defaulting to
-true could never be turned off from markup. */
+true could never be turned off from markup.
+
+**It does not reflect, where Code Block's does**, and the difference is what
+the two sheets need. Code Block reserves the button's width with
+`:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+who set the property. This button is positioned out of the flow and takes no
+room, so nothing selects on it, and reflection exists so that a selector can
+reach a value. */
   "no-copy"?: (HelixHeadlessObjectInspector["noCopy"]) | undefined;
   /** Whether to leave the copy button off.
 
 Negative for the reason Code Block's is: a boolean attribute defaulting to
-true could never be turned off from markup. */
+true could never be turned off from markup.
+
+**It does not reflect, where Code Block's does**, and the difference is what
+the two sheets need. Code Block reserves the button's width with
+`:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+who set the property. This button is positioned out of the flow and takes no
+room, so nothing selects on it, and reflection exists so that a selector can
+reach a value. */
   noCopy?: (HelixHeadlessObjectInspector["noCopy"]) | undefined;
   /** Whether to draw only the rows in view.
 
@@ -8780,6 +8802,8 @@ export type CustomCssProperties = {
   "--color-picker-saturation"?: (string) | undefined;
   /** A color to paint: the current one on the sample, a preset's on each preset. */
   "--color-picker-swatch"?: (string) | undefined;
+  /** The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; `helix-table` publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name. */
+  "--data-table-cell-align"?: (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. `--data-table-columns` is the one to set. */
   "--data-table-template"?: (string) | undefined;
   /** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */