@fusion.dev/helix 0.38.0 → 0.40.0

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

@@ -9,7 +9,7 @@ import type { CSSResultGroup } from 'lit';
  * a way to move through 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

@@ -14,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * second name for it here would be a second thing to keep in step.
  *
  * @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

@@ -5,7 +5,7 @@ import '../../button/index.js';
  * @summary One stage in a sequence.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Stage
  * @documentation https://fusion.dev/helix/components/steps
  */

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

@@ -4,17 +4,24 @@ import type { CSSResultGroup } from 'lit';
  * @summary A row of tabs and the panel each one shows.
  *
  * @description
- * Selection is marked with a rule under the active tab rather than a filled
- * pill, which keeps the row flat and lets the underline animate between tabs as
- * a movement instead of two separate fills.
+ * One mark travels between the tabs rather than each of them filling and
+ * emptying in turn. A fill that swaps is two things changing at once and reads
+ * as a flicker; one that moves is a single object the eye follows, and it says
+ * where the current tab was as well as where it is. `Navigation` marks its
+ * destinations the same way and for the same reason.
+ *
+ * What the mark is depends on `variant`: unset it is a raised pill on the
+ * selected tab with nothing behind the row, `underlined` makes it a bar along
+ * the bottom of the strip on a rule, and `segmented` grows it to the tab's own
+ * box inside a sunken track.
  *
  * @since 0.1.0
  * @status experimental
  * @category navigation
  * @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.
  *
  * @csspart panels - The panel container.
  * @csspart tabs - The tab list.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,14 +47,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.38.0",
-    "@fusion.dev/helix-headless": "0.38.0",
-    "@fusion.dev/helix-styles": "0.38.0"
+    "@fusion.dev/helix-core": "0.40.0",
+    "@fusion.dev/helix-headless": "0.40.0",
+    "@fusion.dev/helix-styles": "0.40.0"
   },
   "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

@@ -390,12 +390,12 @@ export type HelixAccordionItemElementEvent<E = Event> = TypedEvent<
   HelixAccordionItem,
   E
 >;
-/** `helix-before-open` event type */
-export type HelixAccordionItemHelixBeforeOpenElementEvent =
-  HelixAccordionItemElementEvent<HelixBeforeOpenEvent>;
 /** `helix-before-close` event type */
 export type HelixAccordionItemHelixBeforeCloseElementEvent =
   HelixAccordionItemElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixAccordionItemHelixBeforeOpenElementEvent =
+  HelixAccordionItemElementEvent<HelixBeforeOpenEvent>;
 
 export type HelixAccordionItemProps = {
   /** Whether the element is open.
@@ -452,14 +452,14 @@ it, and the resting state of a reflected property is the attribute's
 absence. Caught by `hydration.dom.spec.ts`. */
   name?: (HelixAccordionItem["name"]) | undefined;
 
-  /** Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves. */
-  "onhelix-before-open"?: ((
-    e: HelixAccordionItemHelixBeforeOpenElementEvent,
-  ) => void) | undefined;
   /** Fired before the section closes, and cancelable. */
   "onhelix-before-close"?: ((
     e: HelixAccordionItemHelixBeforeCloseElementEvent,
   ) => void) | undefined;
+  /** Fired before the section opens. Cancelable: refusing it takes the decision and nothing moves. */
+  "onhelix-before-open"?: ((
+    e: HelixAccordionItemHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
   /** Says the state moved, carrying `newState` and `oldState`. */
   ontoggle?: ((e: HelixAccordionItemElementEvent) => void) | undefined;
 };
@@ -518,14 +518,14 @@ empty string writes `name=""` onto every item ever rendered: Lit reflects
 it, and the resting state of a reflected property is the attribute's
 absence. Caught by `hydration.dom.spec.ts`. */
   "prop:name"?: (HelixAccordionItem["name"]) | undefined;
-  /** Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves. */
-  "on:helix-before-open"?: ((
-    e: HelixAccordionItemHelixBeforeOpenElementEvent,
-  ) => void) | undefined;
   /** Fired before the section closes, and cancelable. */
   "on:helix-before-close"?: ((
     e: HelixAccordionItemHelixBeforeCloseElementEvent,
   ) => void) | undefined;
+  /** Fired before the section opens. Cancelable: refusing it takes the decision and nothing moves. */
+  "on:helix-before-open"?: ((
+    e: HelixAccordionItemHelixBeforeOpenElementEvent,
+  ) => void) | undefined;
   /** Says the state moved, carrying `newState` and `oldState`. */
   "on:toggle"?: ((e: HelixAccordionItemElementEvent) => void) | undefined;
 
@@ -6441,18 +6441,20 @@ reader makes in one of these. */
 };
 
 export type HelixDescriptionListItemProps = {
-  /** 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?: (HelixDescriptionListItem["label"]) | undefined;
 };
 
 export type HelixDescriptionListItemSolidJsProps = {
-  /** 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"?: (HelixDescriptionListItem["label"]) | undefined;
 
   /** Set the innerHTML of the element */
@@ -8270,9 +8272,15 @@ shadow root names a table in that root rather than in the document. A
 Absent falls back to the table's own caption, which is usually the right
 words and is already written. */
   label?: (HelixHeatmap["label"]) | 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`. */
   "empty-text"?: (HelixHeatmap["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?: (HelixHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels, for the same reason `min-cell` is a
 number. */
@@ -8359,9 +8367,15 @@ shadow root names a table in that root rather than in the document. A
 Absent falls back to the table's own caption, which is usually the right
 words and is already written. */
   "prop:label"?: (HelixHeatmap["label"]) | 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`. */
   "attr:empty-text"?: (HelixHeatmap["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"?: (HelixHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels, for the same reason `min-cell` is a
 number. */
@@ -11679,12 +11693,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"?: (HelixObjectInspector["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?: (HelixObjectInspector["noCopy"]) | undefined;
   /** Whether to draw only the rows in view.
 
@@ -11727,12 +11755,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"?: (HelixObjectInspector["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"?: (HelixObjectInspector["noCopy"]) | undefined;
   /** Whether to draw only the rows in view.
 
@@ -19928,8 +19970,8 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-before-open`: Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves.
    * - `helix-before-close`: Fired before the section closes, and cancelable.
+   * - `helix-before-open`: Fired before the section opens. Cancelable: refusing it takes the decision and nothing moves.
    * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
    *
    * ## Slots
@@ -19970,7 +20012,7 @@ export type CustomElements = {
    * - `chevron`: The open and close indicator.
    * - `container`: The outer wrapper.
    * - `content`: The revealed region.
-   * - `content-inner`: Padding wrapper inside the animated region.
+   * - `content-inner`: The clipping box inside the animated region. The inset is on the slot within it, not here: padding on the grid item survives a zero track, which left a shut section with a band of space under it.
    * - `trigger`: The clickable summary row.
    *
    * ## CSS States
@@ -24510,6 +24552,7 @@ export type CustomElements = {
    * - `--data-table-padding-inline`: Space either side of a cell's content. (default: `undefined`)
    * - `--data-table-rule-color`: Color of the hairline between rows. A color and not a border: it lands in the color slot of a shorthand, so a whole border written into it produces invalid CSS and drops the rule. Drawn on the cells rather than the row, which is `display: contents` and measures `0px`. (default: `undefined`)
    * - `--data-table-text`: Type size, headings and cells alike. (default: `undefined`)
+   * - `--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
@@ -24531,7 +24574,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.
@@ -25126,10 +25169,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
@@ -25259,7 +25303,7 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--description-list-gap`: Space between one pair and the next. (default: `undefined`)
+   * - `--description-list-gap`: Space between one pair and the next. Its resting value is tighter with `direction="row"` than stacked, a row of pairs needing less air between them than a column of them does, and setting this takes both. (default: `undefined`)
    *
    * ## CSS Parts
    *
@@ -27231,6 +27275,9 @@ export type CustomElements = {
    * Absent falls back to the table's own caption, which is usually the right
    * words and is already written.
    * - `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.
@@ -27347,7 +27394,6 @@ export type CustomElements = {
    *
    * Areas where markup can be added to the component.
    *
-   * - `(default)`: The `<table>` this draws, where it is not named by `for`.
    * - `end`: Below the strip, at the trailing edge.
    * - `start`: Below the strip, at the leading edge.
    * - `summary`: Below the strip, in the middle.
@@ -27399,7 +27445,7 @@ export type CustomElements = {
    * - `tooltip-right`: The bubble while it is right of the reading, beside `tooltip`.
    * - `tooltip-top`: The bubble while it is above the reading, beside `tooltip`.
    * - `tooltip-value`: A column's value inside the tooltip.
-   * - `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.
    * - `start`: The leading slot's box.
    * - `summary`: The middle slot's box.
@@ -29227,9 +29273,12 @@ export type CustomElements = {
   >;
 
   /**
-   * The tick and the arrow hold their space whether or not they are showing, so
-   * the labels in a menu start at one place and the rows read as a column rather
-   * than as a ragged list.
+   * A row draws a column beside its label only where it has something to put in
+   * one, and the width is the menu's rather than the row's: the page reserves a
+   * leading or a trailing track as soon as any row on it fills one, so every
+   * label on that page starts at the same edge and a page that fills neither pays
+   * for neither. A row knows about its own slots and nothing about its
+   * neighbors, which is why the reservation is not made here.
    *
    * ## Attributes & Properties
    *
@@ -30444,6 +30493,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
@@ -34717,7 +34773,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.
    *
@@ -35359,9 +35415,16 @@ export type CustomElements = {
   >;
 
   /**
-   * Selection is marked with a rule under the active tab rather than a filled
-   * pill, which keeps the row flat and lets the underline animate between tabs as
-   * a movement instead of two separate fills.
+   * One mark travels between the tabs rather than each of them filling and
+   * emptying in turn. A fill that swaps is two things changing at once and reads
+   * as a flicker; one that moves is a single object the eye follows, and it says
+   * where the current tab was as well as where it is. `Navigation` marks its
+   * destinations the same way and for the same reason.
+   *
+   * What the mark is depends on `variant`: unset it is a raised pill on the
+   * selected tab with nothing behind the row, `underlined` makes it a bar along
+   * the bottom of the strip on a rule, and `segmented` grows it to the tab's own
+   * box inside a sunken track.
    *
    * ## Attributes & Properties
    *
@@ -35431,8 +35494,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
    *
@@ -38757,8 +38820,8 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-before-open`: Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves.
    * - `helix-before-close`: Fired before the section closes, and cancelable.
+   * - `helix-before-open`: Fired before the section opens. Cancelable: refusing it takes the decision and nothing moves.
    * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
    *
    * ## Slots
@@ -38799,7 +38862,7 @@ export type CustomElementsSolidJs = {
    * - `chevron`: The open and close indicator.
    * - `container`: The outer wrapper.
    * - `content`: The revealed region.
-   * - `content-inner`: Padding wrapper inside the animated region.
+   * - `content-inner`: The clipping box inside the animated region. The inset is on the slot within it, not here: padding on the grid item survives a zero track, which left a shut section with a band of space under it.
    * - `trigger`: The clickable summary row.
    *
    * ## CSS States
@@ -43427,6 +43490,7 @@ export type CustomElementsSolidJs = {
    * - `--data-table-padding-inline`: Space either side of a cell's content. (default: `undefined`)
    * - `--data-table-rule-color`: Color of the hairline between rows. A color and not a border: it lands in the color slot of a shorthand, so a whole border written into it produces invalid CSS and drops the rule. Drawn on the cells rather than the row, which is `display: contents` and measures `0px`. (default: `undefined`)
    * - `--data-table-text`: Type size, headings and cells alike. (default: `undefined`)
+   * - `--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
@@ -43448,7 +43512,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.
@@ -44052,10 +44116,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
@@ -44186,7 +44251,7 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--description-list-gap`: Space between one pair and the next. (default: `undefined`)
+   * - `--description-list-gap`: Space between one pair and the next. Its resting value is tighter with `direction="row"` than stacked, a row of pairs needing less air between them than a column of them does, and setting this takes both. (default: `undefined`)
    *
    * ## CSS Parts
    *
@@ -46209,6 +46274,9 @@ export type CustomElementsSolidJs = {
    * Absent falls back to the table's own caption, which is usually the right
    * words and is already written.
    * - `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.
@@ -46325,7 +46393,6 @@ export type CustomElementsSolidJs = {
    *
    * Areas where markup can be added to the component.
    *
-   * - `(default)`: The `<table>` this draws, where it is not named by `for`.
    * - `end`: Below the strip, at the trailing edge.
    * - `start`: Below the strip, at the leading edge.
    * - `summary`: Below the strip, in the middle.
@@ -46377,7 +46444,7 @@ export type CustomElementsSolidJs = {
    * - `tooltip-right`: The bubble while it is right of the reading, beside `tooltip`.
    * - `tooltip-top`: The bubble while it is above the reading, beside `tooltip`.
    * - `tooltip-value`: A column's value inside the tooltip.
-   * - `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.
    * - `start`: The leading slot's box.
    * - `summary`: The middle slot's box.
@@ -48245,9 +48312,12 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * The tick and the arrow hold their space whether or not they are showing, so
-   * the labels in a menu start at one place and the rows read as a column rather
-   * than as a ragged list.
+   * A row draws a column beside its label only where it has something to put in
+   * one, and the width is the menu's rather than the row's: the page reserves a
+   * leading or a trailing track as soon as any row on it fills one, so every
+   * label on that page starts at the same edge and a page that fills neither pays
+   * for neither. A row knows about its own slots and nothing about its
+   * neighbors, which is why the reservation is not made here.
    *
    * ## Attributes & Properties
    *
@@ -49487,6 +49557,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
@@ -53869,7 +53946,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.
    *
@@ -54533,9 +54610,16 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * Selection is marked with a rule under the active tab rather than a filled
-   * pill, which keeps the row flat and lets the underline animate between tabs as
-   * a movement instead of two separate fills.
+   * One mark travels between the tabs rather than each of them filling and
+   * emptying in turn. A fill that swaps is two things changing at once and reads
+   * as a flicker; one that moves is a single object the eye follows, and it says
+   * where the current tab was as well as where it is. `Navigation` marks its
+   * destinations the same way and for the same reason.
+   *
+   * What the mark is depends on `variant`: unset it is a raised pill on the
+   * selected tab with nothing behind the row, `underlined` makes it a bar along
+   * the bottom of the strip on a rule, and `segmented` grows it to the tab's own
+   * box inside a sunken track.
    *
    * ## Attributes & Properties
    *
@@ -54605,8 +54689,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
    *
@@ -58217,6 +58301,8 @@ export type CustomCssProperties = {
   "--data-table-rule-color"?: (string) | undefined;
   /** Type size, headings and cells alike. */
   "--data-table-text"?: (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;
   /** Fill behind the field. */
@@ -58241,7 +58327,7 @@ export type CustomCssProperties = {
   "--date-picker-track-size"?: (string) | undefined;
   /** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */
   "--date-picker-column-count"?: (string) | undefined;
-  /** Space between one pair and the next. */
+  /** Space between one pair and the next. Its resting value is tighter with `direction="row"` than stacked, a row of pairs needing less air between them than a column of them does, and setting this takes both. */
   "--description-list-gap"?: (string) | undefined;
   /** Color of the panel's edge. */
   "--dialog-border-color"?: (string) | undefined;