@fusion.dev/helix-headless 0.53.6 → 0.55.0

package/types/jsx.d.ts

@@ -1017,19 +1017,12 @@ is showing a count must not lose the count for being handed one. */
 };
 
 export type HelixHeadlessBarChartProps = {
-  /** Whether the categories run down the side rather than along the bottom.
-
-Absent is columns. `horizontal` is the one to reach for when the category
-names are words rather than dates: a row of long names either overlaps or
-turns on its side, and neither is as readable as putting them down the left
-where they read normally. */
-  direction?: (HelixHeadlessBarChart["direction"]) | undefined;
   /** Which rules are drawn across the plot, if any.
 
 Absent draws none. `value` rules the axis the columns are *measured* on,
 `category` rules the axis they are *arranged* on with one through each
 group, and `both` draws both. Which of those is horizontal turns with
-`direction`, because a rule belongs to an axis and not to a screen edge.
+`orientation`, because a rule belongs to an axis and not to a screen edge.
 
 **A bare `gridlines` means `value`**, and so does anything unrecognized: an
 unrecognized value that draws nothing is indistinguishable from the
@@ -1065,6 +1058,16 @@ A line among columns measures from zero, because the columns do and they
 share the axis. So does a line on the second scale, which is that scale's
 own rule rather than this one's. */
   lines?: (HelixHeadlessBarChart["lines"]) | undefined;
+  /** Whether the categories run down the side rather than along the bottom.
+
+Absent is columns. `horizontal` is the one to reach for when the category
+names are words rather than dates: a row of long names either overlaps or
+turns on its side, and neither is as readable as putting them down the left
+where they read normally.
+
+`orientation` and not `orientation`, which `Trend` uses in the same group for
+which way a number moved. */
+  orientation?: (HelixHeadlessBarChart["orientation"]) | undefined;
   /** Which series are measured against a scale of their own, by name.
 
 Separated and matched the way `lines` is, against the column headings the
@@ -1115,19 +1118,12 @@ words and is already written. */
 };
 
 export type HelixHeadlessBarChartSolidJsProps = {
-  /** Whether the categories run down the side rather than along the bottom.
-
-Absent is columns. `horizontal` is the one to reach for when the category
-names are words rather than dates: a row of long names either overlaps or
-turns on its side, and neither is as readable as putting them down the left
-where they read normally. */
-  "prop:direction"?: (HelixHeadlessBarChart["direction"]) | undefined;
   /** Which rules are drawn across the plot, if any.
 
 Absent draws none. `value` rules the axis the columns are *measured* on,
 `category` rules the axis they are *arranged* on with one through each
 group, and `both` draws both. Which of those is horizontal turns with
-`direction`, because a rule belongs to an axis and not to a screen edge.
+`orientation`, because a rule belongs to an axis and not to a screen edge.
 
 **A bare `gridlines` means `value`**, and so does anything unrecognized: an
 unrecognized value that draws nothing is indistinguishable from the
@@ -1163,6 +1159,16 @@ A line among columns measures from zero, because the columns do and they
 share the axis. So does a line on the second scale, which is that scale's
 own rule rather than this one's. */
   "prop:lines"?: (HelixHeadlessBarChart["lines"]) | undefined;
+  /** Whether the categories run down the side rather than along the bottom.
+
+Absent is columns. `horizontal` is the one to reach for when the category
+names are words rather than dates: a row of long names either overlaps or
+turns on its side, and neither is as readable as putting them down the left
+where they read normally.
+
+`orientation` and not `orientation`, which `Trend` uses in the same group for
+which way a number moved. */
+  "prop:orientation"?: (HelixHeadlessBarChart["orientation"]) | undefined;
   /** Which series are measured against a scale of their own, by name.
 
 Separated and matched the way `lines` is, against the column headings the
@@ -9147,7 +9153,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
 narrow exception the server specs describe covers a mirror that can only
 become true long after hydration, and a viewport measured before the first
 paint is the opposite case. See `MixinControllerOpen` on `open`. */
-  "full-below"?: (HelixHeadlessMegamenu["fullBelow"] | `${number}`) | undefined;
+  "band-below"?: (HelixHeadlessMegamenu["bandBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
 A card is a panel hung off one word, and there is no room to hang anything
@@ -9171,7 +9177,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
 narrow exception the server specs describe covers a mirror that can only
 become true long after hydration, and a viewport measured before the first
 paint is the opposite case. See `MixinControllerOpen` on `open`. */
-  fullBelow?: (HelixHeadlessMegamenu["fullBelow"]) | undefined;
+  bandBelow?: (HelixHeadlessMegamenu["bandBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   label?: (HelixHeadlessMegamenu["label"]) | undefined;
   /** Whether hovering the trigger opens the panel, or only a press does.
@@ -9191,16 +9197,23 @@ heavy enough that opening it on the way past is rude. */
   /** Whether the panel is a card under the trigger or a band across the page.
 
 The resting one is the card, hanging off the trigger and as wide as it
-needs to be. `full` is the other shape navigations use: a band from edge to
+needs to be. `band` is the other shape navigations use: a run from edge to
 edge under the header, with its contents held to the page's own measure, so
 a set of destinations too wide to sit under one word gets the whole width
 to lay out in.
 
-It changes where the panel goes as well as how it looks, which is why this
-tier knows about it at all: a band spans the viewport, so there is nothing
-to measure it against and nothing to flip or shift to, and the placing pass
-is told not to run. Everything else the popover gives, the top layer and
-the dismissal, is exactly what such a band needs. */
+**A band and not a width, which is why the word is not `full`.** It changes
+where the panel goes as well as how wide it is, which is why this tier
+knows about it at all: a band spans the viewport, so there is nothing to
+measure it against and nothing to flip or shift to, and the placing pass is
+told not to run. Everything else the popover gives, the top layer and the
+dismissal, is exactly what such a band needs. `full` is the registry's word
+for a width, and `Button` and `Dialog` are the two families answering that
+question; borrowing it here would put a third meaning on it.
+
+`variant` and not an axis, for the reason the registry gives: a card under
+a word and a band under a header are two arrangements this family has, and
+no other family is being asked the same question. */
   variant?: (HelixHeadlessMegamenu["variant"]) | undefined;
   /** Whether the element is open.
 
@@ -9256,7 +9269,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
 narrow exception the server specs describe covers a mirror that can only
 become true long after hydration, and a viewport measured before the first
 paint is the opposite case. See `MixinControllerOpen` on `open`. */
-  "attr:full-below"?: (HelixHeadlessMegamenu["fullBelow"] | `${number}`) | undefined;
+  "attr:band-below"?: (HelixHeadlessMegamenu["bandBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
 A card is a panel hung off one word, and there is no room to hang anything
@@ -9280,7 +9293,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
 narrow exception the server specs describe covers a mirror that can only
 become true long after hydration, and a viewport measured before the first
 paint is the opposite case. See `MixinControllerOpen` on `open`. */
-  "prop:fullBelow"?: (HelixHeadlessMegamenu["fullBelow"]) | undefined;
+  "prop:bandBelow"?: (HelixHeadlessMegamenu["bandBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   "prop:label"?: (HelixHeadlessMegamenu["label"]) | undefined;
   /** Whether hovering the trigger opens the panel, or only a press does.
@@ -9300,16 +9313,23 @@ heavy enough that opening it on the way past is rude. */
   /** Whether the panel is a card under the trigger or a band across the page.
 
 The resting one is the card, hanging off the trigger and as wide as it
-needs to be. `full` is the other shape navigations use: a band from edge to
+needs to be. `band` is the other shape navigations use: a run from edge to
 edge under the header, with its contents held to the page's own measure, so
 a set of destinations too wide to sit under one word gets the whole width
 to lay out in.
 
-It changes where the panel goes as well as how it looks, which is why this
-tier knows about it at all: a band spans the viewport, so there is nothing
-to measure it against and nothing to flip or shift to, and the placing pass
-is told not to run. Everything else the popover gives, the top layer and
-the dismissal, is exactly what such a band needs. */
+**A band and not a width, which is why the word is not `full`.** It changes
+where the panel goes as well as how wide it is, which is why this tier
+knows about it at all: a band spans the viewport, so there is nothing to
+measure it against and nothing to flip or shift to, and the placing pass is
+told not to run. Everything else the popover gives, the top layer and the
+dismissal, is exactly what such a band needs. `full` is the registry's word
+for a width, and `Button` and `Dialog` are the two families answering that
+question; borrowing it here would put a third meaning on it.
+
+`variant` and not an axis, for the reason the registry gives: a card under
+a word and a band under a header are two arrangements this family has, and
+no other family is being asked the same question. */
   "prop:variant"?: (HelixHeadlessMegamenu["variant"]) | undefined;
   /** Whether the element is open.
 
@@ -14037,26 +14057,6 @@ export type HelixHeadlessTableColumnHelixBeforeResizeElementEvent =
   HelixHeadlessTableColumnElementEvent<HelixBeforeResizeEvent>;
 
 export type HelixHeadlessTableColumnProps = {
-  /** Which edge the values line up against.
-
-`end` is what a column of numbers wants, so digits of the same magnitude
-sit above each other. Left unset the cell inherits the table's own
-alignment, which is `start` for text in either writing direction.
-`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
-consumer wrote, so the table writes nothing onto them: it publishes the
-edge to each cell under this column as `--table-cell-align`, which
-`@fusion.dev/helix` reads. The heading is this element's own, and
-`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
-inline end, so in a right-to-left table it is the left.
-
-**Reflected, because the heading is drawn by a stylesheet and has no other
-way to learn it.** Set as a property, which is how React sets it, an
-unreflected `align` left no attribute to select on, so the heading stayed at
-the start over a column of digits set to the end. It is the author's
-declaration and nothing moves it afterwards, so an attribute cannot come to
-disagree with the element, which is the reason `open` records a custom
-state instead. No default, so an unset column writes nothing onto its host. */
-  align?: (HelixHeadlessTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
 Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -14091,6 +14091,62 @@ how React sets it, an unreflected `sortable` left no attribute to match.
 `false` reflects as no attribute at all, so an unset column writes nothing
 onto its host. */
   sortable?: (HelixHeadlessTableColumn["sortable"]) | undefined;
+  /** Which edge the values line up against.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where a thing sits in a container, and they are
+named for the properties they mirror; this is `text-align` down a column of
+values, and `Dialog` answers the same question under the same name. One
+word for both questions is how a consumer who learned it on a layout writes
+it here and gets no error, a value a component does not have leaving the
+default in place and looking deliberate.
+
+`end` is what a column of numbers wants, so digits of the same magnitude
+sit above each other. Left unset the cell inherits the table's own
+alignment, which is `start` for text in either writing direction.
+`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+consumer wrote, so the table writes nothing onto them: it publishes the
+edge to each cell under this column as `--table-cell-align`, which
+`@fusion.dev/helix` reads. The heading is this element's own, and
+`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+inline end, so in a right-to-left table it is the left.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected edge left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
+  "text-align"?: (HelixHeadlessTableColumn["textAlign"]) | undefined;
+  /** Which edge the values line up against.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where a thing sits in a container, and they are
+named for the properties they mirror; this is `text-align` down a column of
+values, and `Dialog` answers the same question under the same name. One
+word for both questions is how a consumer who learned it on a layout writes
+it here and gets no error, a value a component does not have leaving the
+default in place and looking deliberate.
+
+`end` is what a column of numbers wants, so digits of the same magnitude
+sit above each other. Left unset the cell inherits the table's own
+alignment, which is `start` for text in either writing direction.
+`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+consumer wrote, so the table writes nothing onto them: it publishes the
+edge to each cell under this column as `--table-cell-align`, which
+`@fusion.dev/helix` reads. The heading is this element's own, and
+`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+inline end, so in a right-to-left table it is the left.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected edge left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
+  textAlign?: (HelixHeadlessTableColumn["textAlign"]) | undefined;
   /** The track this column takes, as CSS.
 
 A single track value, so anything valid in `grid-template-columns` works:
@@ -14139,26 +14195,6 @@ correct default: the raw value is what an API sorted by. */
 };
 
 export type HelixHeadlessTableColumnSolidJsProps = {
-  /** Which edge the values line up against.
-
-`end` is what a column of numbers wants, so digits of the same magnitude
-sit above each other. Left unset the cell inherits the table's own
-alignment, which is `start` for text in either writing direction.
-`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
-consumer wrote, so the table writes nothing onto them: it publishes the
-edge to each cell under this column as `--table-cell-align`, which
-`@fusion.dev/helix` reads. The heading is this element's own, and
-`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
-inline end, so in a right-to-left table it is the left.
-
-**Reflected, because the heading is drawn by a stylesheet and has no other
-way to learn it.** Set as a property, which is how React sets it, an
-unreflected `align` left no attribute to select on, so the heading stayed at
-the start over a column of digits set to the end. It is the author's
-declaration and nothing moves it afterwards, so an attribute cannot come to
-disagree with the element, which is the reason `open` records a custom
-state instead. No default, so an unset column writes nothing onto its host. */
-  "prop:align"?: (HelixHeadlessTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
 Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -14193,6 +14229,62 @@ how React sets it, an unreflected `sortable` left no attribute to match.
 `false` reflects as no attribute at all, so an unset column writes nothing
 onto its host. */
   "prop:sortable"?: (HelixHeadlessTableColumn["sortable"]) | undefined;
+  /** Which edge the values line up against.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where a thing sits in a container, and they are
+named for the properties they mirror; this is `text-align` down a column of
+values, and `Dialog` answers the same question under the same name. One
+word for both questions is how a consumer who learned it on a layout writes
+it here and gets no error, a value a component does not have leaving the
+default in place and looking deliberate.
+
+`end` is what a column of numbers wants, so digits of the same magnitude
+sit above each other. Left unset the cell inherits the table's own
+alignment, which is `start` for text in either writing direction.
+`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+consumer wrote, so the table writes nothing onto them: it publishes the
+edge to each cell under this column as `--table-cell-align`, which
+`@fusion.dev/helix` reads. The heading is this element's own, and
+`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+inline end, so in a right-to-left table it is the left.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected edge left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
+  "attr:text-align"?: (HelixHeadlessTableColumn["textAlign"]) | undefined;
+  /** Which edge the values line up against.
+
+**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+box-alignment question, where a thing sits in a container, and they are
+named for the properties they mirror; this is `text-align` down a column of
+values, and `Dialog` answers the same question under the same name. One
+word for both questions is how a consumer who learned it on a layout writes
+it here and gets no error, a value a component does not have leaving the
+default in place and looking deliberate.
+
+`end` is what a column of numbers wants, so digits of the same magnitude
+sit above each other. Left unset the cell inherits the table's own
+alignment, which is `start` for text in either writing direction.
+`DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+consumer wrote, so the table writes nothing onto them: it publishes the
+edge to each cell under this column as `--table-cell-align`, which
+`@fusion.dev/helix` reads. The heading is this element's own, and
+`@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+inline end, so in a right-to-left table it is the left.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected edge left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
+  "prop:textAlign"?: (HelixHeadlessTableColumn["textAlign"]) | undefined;
   /** The track this column takes, as CSS.
 
 A single track value, so anything valid in `grid-template-columns` works:
@@ -18692,18 +18784,12 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `direction`: Whether the categories run down the side rather than along the bottom.
-   *
-   * Absent is columns. `horizontal` is the one to reach for when the category
-   * names are words rather than dates: a row of long names either overlaps or
-   * turns on its side, and neither is as readable as putting them down the left
-   * where they read normally.
    * - `gridlines`: Which rules are drawn across the plot, if any.
    *
    * Absent draws none. `value` rules the axis the columns are *measured* on,
    * `category` rules the axis they are *arranged* on with one through each
    * group, and `both` draws both. Which of those is horizontal turns with
-   * `direction`, because a rule belongs to an axis and not to a screen edge.
+   * `orientation`, because a rule belongs to an axis and not to a screen edge.
    *
    * **A bare `gridlines` means `value`**, and so does anything unrecognized: an
    * unrecognized value that draws nothing is indistinguishable from the
@@ -18737,6 +18823,15 @@ export type CustomElements = {
    * A line among columns measures from zero, because the columns do and they
    * share the axis. So does a line on the second scale, which is that scale's
    * own rule rather than this one's.
+   * - `orientation`: Whether the categories run down the side rather than along the bottom.
+   *
+   * Absent is columns. `horizontal` is the one to reach for when the category
+   * names are words rather than dates: a row of long names either overlaps or
+   * turns on its side, and neither is as readable as putting them down the left
+   * where they read normally.
+   *
+   * `orientation` and not `orientation`, which `Trend` uses in the same group for
+   * which way a number moved.
    * - `secondary`: Which series are measured against a scale of their own, by name.
    *
    * Separated and matched the way `lines` is, against the column headings the
@@ -21284,9 +21379,8 @@ export type CustomElements = {
    * - `footer`: The row holding the value and the tools.
    * - `format`: The control that changes the syntax the value is written in.
    * - `format-button`: The inner control.
-   * - `grid`: The saturation and brightness square.
+   * - `grid`: The saturation and brightness square. The mark showing where in the square the color sits is drawn on the square itself, which is `::part(grid)::after` from a consumer's sheet: the two channels are already on the square as `--color-picker-saturation` and `--color-picker-brightness`, so a box would have carried nothing, and this tier ships no CSS.
    * - `grid-brightness`: The range input for its vertical axis.
-   * - `grid-handle`: The mark showing where in the square the color sits.
    * - `grid-saturation`: The range input for the square's horizontal axis.
    * - `sample`: The chip of the current color, which copies it when pressed.
    * - `swatch`: One preset.
@@ -21964,7 +22058,7 @@ export type CustomElements = {
    * ```html
    * <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">
    *   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>
-   *   <helix-headless-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
+   *   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
    * </helix-headless-data-table>
    * ```
    *
@@ -25954,10 +26048,9 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `entry`: One name and its swatch.
+   * - `entry`: One name and its swatch. The swatch is drawn on the entry, which is `::part(entry)::before` from a consumer's sheet: the series is already on the entry as `--chart-series`, so a box would have carried nothing, and this tier ships no CSS.
    * - `list`: The list itself.
    * - `name`: One series name.
-   * - `swatch`: The color a series is drawn in.
    *
    * ## CSS States
    *
@@ -26738,7 +26831,7 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `full-below`/`fullBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
+   * - `band-below`/`bandBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
    *
    * A card is a panel hung off one word, and there is no room to hang anything
    * off a word on a phone: the columns do not shrink past
@@ -26771,16 +26864,23 @@ export type CustomElements = {
    * - `variant`: Whether the panel is a card under the trigger or a band across the page.
    *
    * The resting one is the card, hanging off the trigger and as wide as it
-   * needs to be. `full` is the other shape navigations use: a band from edge to
+   * needs to be. `band` is the other shape navigations use: a run from edge to
    * edge under the header, with its contents held to the page's own measure, so
    * a set of destinations too wide to sit under one word gets the whole width
    * to lay out in.
    *
-   * It changes where the panel goes as well as how it looks, which is why this
-   * tier knows about it at all: a band spans the viewport, so there is nothing
-   * to measure it against and nothing to flip or shift to, and the placing pass
-   * is told not to run. Everything else the popover gives, the top layer and
-   * the dismissal, is exactly what such a band needs.
+   * **A band and not a width, which is why the word is not `full`.** It changes
+   * where the panel goes as well as how wide it is, which is why this tier
+   * knows about it at all: a band spans the viewport, so there is nothing to
+   * measure it against and nothing to flip or shift to, and the placing pass is
+   * told not to run. Everything else the popover gives, the top layer and the
+   * dismissal, is exactly what such a band needs. `full` is the registry's word
+   * for a width, and `Button` and `Dialog` are the two families answering that
+   * question; borrowing it here would put a third meaning on it.
+   *
+   * `variant` and not an axis, for the reason the registry gives: a card under
+   * a word and a band under a header are two arrangements this family has, and
+   * no other family is being asked the same question.
    * - `open`: Whether the element is open.
    *
    * One property, not two, so `dialog.open` answers the question anyone
@@ -26860,7 +26960,7 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
-   * - `narrow`: While the page is under `full-below`, so the panel is a band whether or not one was asked for.
+   * - `narrow`: While the page is under `band-below`, so the panel is a band whether or not one was asked for.
    * - `open`: While the panel is open, which is when the trigger reads as current.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
@@ -29807,10 +29907,9 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `box`: The circle.
+   * - `box`: The circle. The dot inside it is drawn on the box itself, which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `item`: The button, which is the whole row.
    * - `label`: The words beside it.
-   * - `mark`: The dot inside it.
    *
    * ## CSS States
    *
@@ -31717,6 +31816,13 @@ export type CustomElements = {
    * with two hidden in CSS: the accessibility tree would otherwise carry marks
    * that are not there.
    *
+   * **The two half lines either side of the mark are a sheet's, on `::before` and
+   * `::after` of the step.** Both are placed entirely from properties the list
+   * hands down, so there was nothing about them for a box to carry, and this tier
+   * ships no CSS: a box it rendered for one to paint would be an empty child
+   * costing whatever the consumer's own layout charges for a child. `ListItem`
+   * measured that.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -31776,10 +31882,8 @@ export type CustomElements = {
    * - `description`: The line under it.
    * - `label`: The step's name, which is a control.
    * - `label-button`: The inner control.
-   * - `lead`: The half line arriving from the step before.
    * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
    * - `marker`: The shape carrying the number or the check.
-   * - `trail`: The half line running on to the next.
    *
    * ## CSS States
    *
@@ -31957,8 +32061,7 @@ export type CustomElements = {
    * - `field`: The row: the track and its label.
    * - `hint`: Help under the control, while nothing is wrong.
    * - `label`: The words beside it.
-   * - `thumb`: The part that moves.
-   * - `track`: The groove the thumb travels in.
+   * - `track`: The groove. The thumb that travels in it is drawn on the groove itself, which is `::part(track)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -32042,7 +32145,7 @@ export type CustomElements = {
    *
    * **It is also where every per-column fact goes**, which is the reason
    * `DataTable` needs no column config object. `field` names the key the cell
-   * reads, `sortable` says a reader may reorder by it, `align` says which edge
+   * reads, `sortable` says a reader may reorder by it, `text-align` says which edge
    * the values line up against, and `cell` takes a function for anything the
    * field alone cannot express. The schema is markup and the data is a property:
    * a schema is small, declarative, and something a reader should be able to see
@@ -32077,25 +32180,6 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Which edge the values line up against.
-   *
-   * `end` is what a column of numbers wants, so digits of the same magnitude
-   * sit above each other. Left unset the cell inherits the table's own
-   * alignment, which is `start` for text in either writing direction.
-   * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
-   * consumer wrote, so the table writes nothing onto them: it publishes the
-   * edge to each cell under this column as `--table-cell-align`, which
-   * `@fusion.dev/helix` reads. The heading is this element's own, and
-   * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
-   * inline end, so in a right-to-left table it is the left.
-   *
-   * **Reflected, because the heading is drawn by a stylesheet and has no other
-   * way to learn it.** Set as a property, which is how React sets it, an
-   * unreflected `align` left no attribute to select on, so the heading stayed at
-   * the start over a column of digits set to the end. It is the author's
-   * declaration and nothing moves it afterwards, so an attribute cannot come to
-   * disagree with the element, which is the reason `open` records a custom
-   * state instead. No default, so an unset column writes nothing onto its host.
    * - `field`: The key this column reads out of a row.
    *
    * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -32127,6 +32211,33 @@ export type CustomElements = {
    * how React sets it, an unreflected `sortable` left no attribute to match.
    * `false` reflects as no attribute at all, so an unset column writes nothing
    * onto its host.
+   * - `text-align`/`textAlign`: Which edge the values line up against.
+   *
+   * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+   * box-alignment question, where a thing sits in a container, and they are
+   * named for the properties they mirror; this is `text-align` down a column of
+   * values, and `Dialog` answers the same question under the same name. One
+   * word for both questions is how a consumer who learned it on a layout writes
+   * it here and gets no error, a value a component does not have leaving the
+   * default in place and looking deliberate.
+   *
+   * `end` is what a column of numbers wants, so digits of the same magnitude
+   * sit above each other. Left unset the cell inherits the table's own
+   * alignment, which is `start` for text in either writing direction.
+   * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+   * consumer wrote, so the table writes nothing onto them: it publishes the
+   * edge to each cell under this column as `--table-cell-align`, which
+   * `@fusion.dev/helix` reads. The heading is this element's own, and
+   * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+   * inline end, so in a right-to-left table it is the left.
+   *
+   * **Reflected, because the heading is drawn by a stylesheet and has no other
+   * way to learn it.** Set as a property, which is how React sets it, an
+   * unreflected edge left no attribute to select on, so the heading stayed at
+   * the start over a column of digits set to the end. It is the author's
+   * declaration and nothing moves it afterwards, so an attribute cannot come to
+   * disagree with the element, which is the reason `open` records a custom
+   * state instead. No default, so an unset column writes nothing onto its host.
    * - `width`: The track this column takes, as CSS.
    *
    * A single track value, so anything valid in `grid-template-columns` works:
@@ -33609,11 +33720,10 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `connector`: The line arriving at this entry.
    * - `content`: What happened, and the time above it.
    * - `dot`: The mark drawn where nothing was slotted for one.
    * - `marker`: The mark on the line.
-   * - `rail`: The column holding the mark and the line.
+   * - `rail`: The column holding the mark and the line. Both halves of the line are drawn on the rail, which is `::part(rail)::before` and `::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `time`: When it happened.
    *
    * ## CSS States
@@ -34068,13 +34178,12 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `divider`: The rule after an inline label, separating it from the items.
    * - `feedback`: What is wrong with it.
    * - `hint`: Help under the row, while nothing is wrong.
    * - `indicator`: The moving marker behind the selected item.
    * - `label`: The question, over the row.
    * - `row`: The line the track sits on, with whatever flanks it.
-   * - `track`: The bar the items sit in.
+   * - `track`: The bar the items sit in. The rule after an inline label, separating it from the items, is drawn on the bar, which is `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -35624,8 +35733,7 @@ export type CustomElements = {
    * - `failure`: What is said when the source will not play.
    * - `forward`: The control that goes on ten seconds.
    * - `fullscreen`: The whole screen, and back.
-   * - `loading`: What is said while the picture waits for more of itself.
-   * - `loading-mark`: The part of that which spins.
+   * - `loading`: What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `more`: The button that opens it.
    * - `mute`: Sound on and off.
    * - `next`: Asks for the next item, where it was asked for.
@@ -36647,18 +36755,12 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `direction`: Whether the categories run down the side rather than along the bottom.
-   *
-   * Absent is columns. `horizontal` is the one to reach for when the category
-   * names are words rather than dates: a row of long names either overlaps or
-   * turns on its side, and neither is as readable as putting them down the left
-   * where they read normally.
    * - `gridlines`: Which rules are drawn across the plot, if any.
    *
    * Absent draws none. `value` rules the axis the columns are *measured* on,
    * `category` rules the axis they are *arranged* on with one through each
    * group, and `both` draws both. Which of those is horizontal turns with
-   * `direction`, because a rule belongs to an axis and not to a screen edge.
+   * `orientation`, because a rule belongs to an axis and not to a screen edge.
    *
    * **A bare `gridlines` means `value`**, and so does anything unrecognized: an
    * unrecognized value that draws nothing is indistinguishable from the
@@ -36692,6 +36794,15 @@ export type CustomElementsSolidJs = {
    * A line among columns measures from zero, because the columns do and they
    * share the axis. So does a line on the second scale, which is that scale's
    * own rule rather than this one's.
+   * - `orientation`: Whether the categories run down the side rather than along the bottom.
+   *
+   * Absent is columns. `horizontal` is the one to reach for when the category
+   * names are words rather than dates: a row of long names either overlaps or
+   * turns on its side, and neither is as readable as putting them down the left
+   * where they read normally.
+   *
+   * `orientation` and not `orientation`, which `Trend` uses in the same group for
+   * which way a number moved.
    * - `secondary`: Which series are measured against a scale of their own, by name.
    *
    * Separated and matched the way `lines` is, against the column headings the
@@ -39274,9 +39385,8 @@ export type CustomElementsSolidJs = {
    * - `footer`: The row holding the value and the tools.
    * - `format`: The control that changes the syntax the value is written in.
    * - `format-button`: The inner control.
-   * - `grid`: The saturation and brightness square.
+   * - `grid`: The saturation and brightness square. The mark showing where in the square the color sits is drawn on the square itself, which is `::part(grid)::after` from a consumer's sheet: the two channels are already on the square as `--color-picker-saturation` and `--color-picker-brightness`, so a box would have carried nothing, and this tier ships no CSS.
    * - `grid-brightness`: The range input for its vertical axis.
-   * - `grid-handle`: The mark showing where in the square the color sits.
    * - `grid-saturation`: The range input for the square's horizontal axis.
    * - `sample`: The chip of the current color, which copies it when pressed.
    * - `swatch`: One preset.
@@ -39962,7 +40072,7 @@ export type CustomElementsSolidJs = {
    * ```html
    * <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">
    *   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>
-   *   <helix-headless-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
+   *   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
    * </helix-headless-data-table>
    * ```
    *
@@ -44003,10 +44113,9 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `entry`: One name and its swatch.
+   * - `entry`: One name and its swatch. The swatch is drawn on the entry, which is `::part(entry)::before` from a consumer's sheet: the series is already on the entry as `--chart-series`, so a box would have carried nothing, and this tier ships no CSS.
    * - `list`: The list itself.
    * - `name`: One series name.
-   * - `swatch`: The color a series is drawn in.
    *
    * ## CSS States
    *
@@ -44805,7 +44914,7 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `full-below`/`fullBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
+   * - `band-below`/`bandBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
    *
    * A card is a panel hung off one word, and there is no room to hang anything
    * off a word on a phone: the columns do not shrink past
@@ -44838,16 +44947,23 @@ export type CustomElementsSolidJs = {
    * - `variant`: Whether the panel is a card under the trigger or a band across the page.
    *
    * The resting one is the card, hanging off the trigger and as wide as it
-   * needs to be. `full` is the other shape navigations use: a band from edge to
+   * needs to be. `band` is the other shape navigations use: a run from edge to
    * edge under the header, with its contents held to the page's own measure, so
    * a set of destinations too wide to sit under one word gets the whole width
    * to lay out in.
    *
-   * It changes where the panel goes as well as how it looks, which is why this
-   * tier knows about it at all: a band spans the viewport, so there is nothing
-   * to measure it against and nothing to flip or shift to, and the placing pass
-   * is told not to run. Everything else the popover gives, the top layer and
-   * the dismissal, is exactly what such a band needs.
+   * **A band and not a width, which is why the word is not `full`.** It changes
+   * where the panel goes as well as how wide it is, which is why this tier
+   * knows about it at all: a band spans the viewport, so there is nothing to
+   * measure it against and nothing to flip or shift to, and the placing pass is
+   * told not to run. Everything else the popover gives, the top layer and the
+   * dismissal, is exactly what such a band needs. `full` is the registry's word
+   * for a width, and `Button` and `Dialog` are the two families answering that
+   * question; borrowing it here would put a third meaning on it.
+   *
+   * `variant` and not an axis, for the reason the registry gives: a card under
+   * a word and a band under a header are two arrangements this family has, and
+   * no other family is being asked the same question.
    * - `open`: Whether the element is open.
    *
    * One property, not two, so `dialog.open` answers the question anyone
@@ -44927,7 +45043,7 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
-   * - `narrow`: While the page is under `full-below`, so the panel is a band whether or not one was asked for.
+   * - `narrow`: While the page is under `band-below`, so the panel is a band whether or not one was asked for.
    * - `open`: While the panel is open, which is when the trigger reads as current.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
@@ -47918,10 +48034,9 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `box`: The circle.
+   * - `box`: The circle. The dot inside it is drawn on the box itself, which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `item`: The button, which is the whole row.
    * - `label`: The words beside it.
-   * - `mark`: The dot inside it.
    *
    * ## CSS States
    *
@@ -49867,6 +49982,13 @@ export type CustomElementsSolidJs = {
    * with two hidden in CSS: the accessibility tree would otherwise carry marks
    * that are not there.
    *
+   * **The two half lines either side of the mark are a sheet's, on `::before` and
+   * `::after` of the step.** Both are placed entirely from properties the list
+   * hands down, so there was nothing about them for a box to carry, and this tier
+   * ships no CSS: a box it rendered for one to paint would be an empty child
+   * costing whatever the consumer's own layout charges for a child. `ListItem`
+   * measured that.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -49926,10 +50048,8 @@ export type CustomElementsSolidJs = {
    * - `description`: The line under it.
    * - `label`: The step's name, which is a control.
    * - `label-button`: The inner control.
-   * - `lead`: The half line arriving from the step before.
    * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
    * - `marker`: The shape carrying the number or the check.
-   * - `trail`: The half line running on to the next.
    *
    * ## CSS States
    *
@@ -50110,8 +50230,7 @@ export type CustomElementsSolidJs = {
    * - `field`: The row: the track and its label.
    * - `hint`: Help under the control, while nothing is wrong.
    * - `label`: The words beside it.
-   * - `thumb`: The part that moves.
-   * - `track`: The groove the thumb travels in.
+   * - `track`: The groove. The thumb that travels in it is drawn on the groove itself, which is `::part(track)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -50201,7 +50320,7 @@ export type CustomElementsSolidJs = {
    *
    * **It is also where every per-column fact goes**, which is the reason
    * `DataTable` needs no column config object. `field` names the key the cell
-   * reads, `sortable` says a reader may reorder by it, `align` says which edge
+   * reads, `sortable` says a reader may reorder by it, `text-align` says which edge
    * the values line up against, and `cell` takes a function for anything the
    * field alone cannot express. The schema is markup and the data is a property:
    * a schema is small, declarative, and something a reader should be able to see
@@ -50236,25 +50355,6 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `align`: Which edge the values line up against.
-   *
-   * `end` is what a column of numbers wants, so digits of the same magnitude
-   * sit above each other. Left unset the cell inherits the table's own
-   * alignment, which is `start` for text in either writing direction.
-   * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
-   * consumer wrote, so the table writes nothing onto them: it publishes the
-   * edge to each cell under this column as `--table-cell-align`, which
-   * `@fusion.dev/helix` reads. The heading is this element's own, and
-   * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
-   * inline end, so in a right-to-left table it is the left.
-   *
-   * **Reflected, because the heading is drawn by a stylesheet and has no other
-   * way to learn it.** Set as a property, which is how React sets it, an
-   * unreflected `align` left no attribute to select on, so the heading stayed at
-   * the start over a column of digits set to the end. It is the author's
-   * declaration and nothing moves it afterwards, so an attribute cannot come to
-   * disagree with the element, which is the reason `open` records a custom
-   * state instead. No default, so an unset column writes nothing onto its host.
    * - `field`: The key this column reads out of a row.
    *
    * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -50286,6 +50386,33 @@ export type CustomElementsSolidJs = {
    * how React sets it, an unreflected `sortable` left no attribute to match.
    * `false` reflects as no attribute at all, so an unset column writes nothing
    * onto its host.
+   * - `text-align`/`textAlign`: Which edge the values line up against.
+   *
+   * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+   * box-alignment question, where a thing sits in a container, and they are
+   * named for the properties they mirror; this is `text-align` down a column of
+   * values, and `Dialog` answers the same question under the same name. One
+   * word for both questions is how a consumer who learned it on a layout writes
+   * it here and gets no error, a value a component does not have leaving the
+   * default in place and looking deliberate.
+   *
+   * `end` is what a column of numbers wants, so digits of the same magnitude
+   * sit above each other. Left unset the cell inherits the table's own
+   * alignment, which is `start` for text in either writing direction.
+   * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+   * consumer wrote, so the table writes nothing onto them: it publishes the
+   * edge to each cell under this column as `--table-cell-align`, which
+   * `@fusion.dev/helix` reads. The heading is this element's own, and
+   * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+   * inline end, so in a right-to-left table it is the left.
+   *
+   * **Reflected, because the heading is drawn by a stylesheet and has no other
+   * way to learn it.** Set as a property, which is how React sets it, an
+   * unreflected edge left no attribute to select on, so the heading stayed at
+   * the start over a column of digits set to the end. It is the author's
+   * declaration and nothing moves it afterwards, so an attribute cannot come to
+   * disagree with the element, which is the reason `open` records a custom
+   * state instead. No default, so an unset column writes nothing onto its host.
    * - `width`: The track this column takes, as CSS.
    *
    * A single track value, so anything valid in `grid-template-columns` works:
@@ -51794,11 +51921,10 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `connector`: The line arriving at this entry.
    * - `content`: What happened, and the time above it.
    * - `dot`: The mark drawn where nothing was slotted for one.
    * - `marker`: The mark on the line.
-   * - `rail`: The column holding the mark and the line.
+   * - `rail`: The column holding the mark and the line. Both halves of the line are drawn on the rail, which is `::part(rail)::before` and `::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `time`: When it happened.
    *
    * ## CSS States
@@ -52263,13 +52389,12 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `divider`: The rule after an inline label, separating it from the items.
    * - `feedback`: What is wrong with it.
    * - `hint`: Help under the row, while nothing is wrong.
    * - `indicator`: The moving marker behind the selected item.
    * - `label`: The question, over the row.
    * - `row`: The line the track sits on, with whatever flanks it.
-   * - `track`: The bar the items sit in.
+   * - `track`: The bar the items sit in. The rule after an inline label, separating it from the items, is drawn on the bar, which is `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -53847,8 +53972,7 @@ export type CustomElementsSolidJs = {
    * - `failure`: What is said when the source will not play.
    * - `forward`: The control that goes on ten seconds.
    * - `fullscreen`: The whole screen, and back.
-   * - `loading`: What is said while the picture waits for more of itself.
-   * - `loading-mark`: The part of that which spins.
+   * - `loading`: What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `more`: The button that opens it.
    * - `mute`: Sound on and off.
    * - `next`: Asks for the next item, where it was asked for.