@fusion.dev/helix 0.184.0 → 0.185.0

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.184.0",
+  "version": "0.185.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -54,14 +54,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.184.0",
-    "@fusion.dev/helix-headless": "0.184.0",
-    "@fusion.dev/helix-styles": "0.184.0",
+    "@fusion.dev/helix-core": "0.185.0",
+    "@fusion.dev/helix-headless": "0.185.0",
+    "@fusion.dev/helix-styles": "0.185.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.184.0",
-    "@fusion.dev/helix-testing": "0.184.0",
+    "@fusion.dev/helix-cem": "0.185.0",
+    "@fusion.dev/helix-testing": "0.185.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -11141,6 +11141,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   childField?: (HelixDataTable["childField"]) | undefined;
+  /** The column tracks, as a grid track list such as `2fr 1fr max-content`,
+dealt out one track to a column in the order the columns are written. A
+column's own `width` wins in its place, and a column it does not reach
+takes the track a column with no `width` takes.
+
+**The one track list a server can send.** A server rendering this element
+has no columns to read a `width` from, and neither has a stylesheet laying
+out the rows a page served before the table upgrades, so a table sized here
+lays those rows out at the widths it draws. */
+  columns?: (HelixDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "default-expanded"?: (HelixDataTable["defaultExpanded"]) | undefined;
@@ -11560,6 +11570,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   "prop:childField"?: (HelixDataTable["childField"]) | undefined;
+  /** The column tracks, as a grid track list such as `2fr 1fr max-content`,
+dealt out one track to a column in the order the columns are written. A
+column's own `width` wins in its place, and a column it does not reach
+takes the track a column with no `width` takes.
+
+**The one track list a server can send.** A server rendering this element
+has no columns to read a `width` from, and neither has a stylesheet laying
+out the rows a page served before the table upgrades, so a table sized here
+lays those rows out at the widths it draws. */
+  "prop:columns"?: (HelixDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "attr:default-expanded"?: (HelixDataTable["defaultExpanded"]) | undefined;
@@ -34752,13 +34772,11 @@ and each column may say otherwise.
 **It is also the only track list a server can send.** The shim has no tree
 to walk, so a render there knows of no columns and this attribute is the
 whole answer: a table given one lays its grid out in the first paint, and a
-table sized only by its columns is one track wide until it upgrades.
+table sized only by its columns takes, until it upgrades, a track for each
+column at the width a column with no `width` takes (`helix.css`).
 
-**Data Table has none of this, and should not.** Its columns are its schema
-rather than an option, so there is always a column to write a `width` on
-and a list here would be a second way to say what that says. This table's
-cells are markup, and a table written as rows of cells with no column
-declared in it has nowhere else to be sized from. */
+Data Table takes the same list, for the same reason: a data table that
+serves its first page as rows is laid out by it before it upgrades. */
   columns?: (HelixTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -35015,13 +35033,11 @@ and each column may say otherwise.
 **It is also the only track list a server can send.** The shim has no tree
 to walk, so a render there knows of no columns and this attribute is the
 whole answer: a table given one lays its grid out in the first paint, and a
-table sized only by its columns is one track wide until it upgrades.
+table sized only by its columns takes, until it upgrades, a track for each
+column at the width a column with no `width` takes (`helix.css`).
 
-**Data Table has none of this, and should not.** Its columns are its schema
-rather than an option, so there is always a column to write a `width` on
-and a list here would be a second way to say what that says. This table's
-cells are markup, and a table written as rows of cells with no column
-declared in it has nowhere else to be sized from. */
+Data Table takes the same list, for the same reason: a data table that
+serves its first page as rows is laid out by it before it upgrades. */
   "prop:columns"?: (HelixTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -49411,7 +49427,9 @@ export type CustomElements = {
    * Write it under the columns as `helix-table-row` and `helix-table-cell`
    * elements. `@fusion.dev/helix-styles/helix.css` lays them out as the table
    * draws them before it upgrades, and the table shows them until `rows` holds a
-   * row.
+   * row. It holds the checkbox column and the pagination's row from the first
+   * paint, and takes the widths from `columns`, so nothing moves when the table
+   * upgrades or draws its own rows.
    *
    * ## Attributes & Properties
    *
@@ -49432,6 +49450,15 @@ export type CustomElements = {
    *
    * Reflected, because the styled tier indents a tree grid's row headers by
    * it. No default, so a table that sets none writes nothing onto its host.
+   * - `columns`: The column tracks, as a grid track list such as `2fr 1fr max-content`,
+   * dealt out one track to a column in the order the columns are written. A
+   * column's own `width` wins in its place, and a column it does not reach
+   * takes the track a column with no `width` takes.
+   *
+   * **The one track list a server can send.** A server rendering this element
+   * has no columns to read a `width` from, and neither has a stylesheet laying
+   * out the rows a page served before the table upgrades, so a table sized here
+   * lays those rows out at the widths it draws.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows open at the start, separated by commas. Used until
    * `expanded` is set.
    * - `default-filter`/`defaultFilter`: The starting search query, used until `filter` is set.
@@ -66111,7 +66138,7 @@ export type CustomElements = {
    *
    * The ribbon stops moving in these cases:
    * - `prefers-reduced-motion` is set. The element shows one still frame, and in
-   *   `travel` still follows the scroll, without easing.
+   *   `travel` still follows the scroll.
    * - The element is off screen or in a background tab.
    *
    * It shows a gradient from the same tokens in these cases, and matches
@@ -66840,13 +66867,11 @@ export type CustomElements = {
    * **It is also the only track list a server can send.** The shim has no tree
    * to walk, so a render there knows of no columns and this attribute is the
    * whole answer: a table given one lays its grid out in the first paint, and a
-   * table sized only by its columns is one track wide until it upgrades.
+   * table sized only by its columns takes, until it upgrades, a track for each
+   * column at the width a column with no `width` takes (`helix.css`).
    *
-   * **Data Table has none of this, and should not.** Its columns are its schema
-   * rather than an option, so there is always a column to write a `width` on
-   * and a list here would be a second way to say what that says. This table's
-   * cells are markup, and a table written as rows of cells with no column
-   * declared in it has nowhere else to be sized from.
+   * Data Table takes the same list, for the same reason: a data table that
+   * serves its first page as rows is laid out by it before it upgrades.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
    * commas. Used until `expanded` is set.
    * - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`
@@ -79254,7 +79279,9 @@ export type CustomElementsSolidJs = {
    * Write it under the columns as `helix-table-row` and `helix-table-cell`
    * elements. `@fusion.dev/helix-styles/helix.css` lays them out as the table
    * draws them before it upgrades, and the table shows them until `rows` holds a
-   * row.
+   * row. It holds the checkbox column and the pagination's row from the first
+   * paint, and takes the widths from `columns`, so nothing moves when the table
+   * upgrades or draws its own rows.
    *
    * ## Attributes & Properties
    *
@@ -79275,6 +79302,15 @@ export type CustomElementsSolidJs = {
    *
    * Reflected, because the styled tier indents a tree grid's row headers by
    * it. No default, so a table that sets none writes nothing onto its host.
+   * - `columns`: The column tracks, as a grid track list such as `2fr 1fr max-content`,
+   * dealt out one track to a column in the order the columns are written. A
+   * column's own `width` wins in its place, and a column it does not reach
+   * takes the track a column with no `width` takes.
+   *
+   * **The one track list a server can send.** A server rendering this element
+   * has no columns to read a `width` from, and neither has a stylesheet laying
+   * out the rows a page served before the table upgrades, so a table sized here
+   * lays those rows out at the widths it draws.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows open at the start, separated by commas. Used until
    * `expanded` is set.
    * - `default-filter`/`defaultFilter`: The starting search query, used until `filter` is set.
@@ -96243,7 +96279,7 @@ export type CustomElementsSolidJs = {
    *
    * The ribbon stops moving in these cases:
    * - `prefers-reduced-motion` is set. The element shows one still frame, and in
-   *   `travel` still follows the scroll, without easing.
+   *   `travel` still follows the scroll.
    * - The element is off screen or in a background tab.
    *
    * It shows a gradient from the same tokens in these cases, and matches
@@ -96987,13 +97023,11 @@ export type CustomElementsSolidJs = {
    * **It is also the only track list a server can send.** The shim has no tree
    * to walk, so a render there knows of no columns and this attribute is the
    * whole answer: a table given one lays its grid out in the first paint, and a
-   * table sized only by its columns is one track wide until it upgrades.
+   * table sized only by its columns takes, until it upgrades, a track for each
+   * column at the width a column with no `width` takes (`helix.css`).
    *
-   * **Data Table has none of this, and should not.** Its columns are its schema
-   * rather than an option, so there is always a column to write a `width` on
-   * and a list here would be a second way to say what that says. This table's
-   * cells are markup, and a table written as rows of cells with no column
-   * declared in it has nowhere else to be sized from.
+   * Data Table takes the same list, for the same reason: a data table that
+   * serves its first page as rows is laid out by it before it upgrades.
    * - `default-expanded`/`defaultExpanded`: The keys of the rows whose rows are shown at the start, separated by
    * commas. Used until `expanded` is set.
    * - `default-selected`/`defaultSelected`: The keys selected at the start, separated by commas. Used until `selected`

package/types/vue.d.ts

@@ -5762,6 +5762,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   childField?: (HelixDataTable["childField"]) | undefined;
+  /** The column tracks, as a grid track list such as `2fr 1fr max-content`,
+dealt out one track to a column in the order the columns are written. A
+column's own `width` wins in its place, and a column it does not reach
+takes the track a column with no `width` takes.
+
+**The one track list a server can send.** A server rendering this element
+has no columns to read a `width` from, and neither has a stylesheet laying
+out the rows a page served before the table upgrades, so a table sized here
+lays those rows out at the widths it draws. */
+  columns?: (HelixDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "default-expanded"?: (HelixDataTable["defaultExpanded"]) | undefined;
@@ -17848,13 +17858,11 @@ and each column may say otherwise.
 **It is also the only track list a server can send.** The shim has no tree
 to walk, so a render there knows of no columns and this attribute is the
 whole answer: a table given one lays its grid out in the first paint, and a
-table sized only by its columns is one track wide until it upgrades.
+table sized only by its columns takes, until it upgrades, a track for each
+column at the width a column with no `width` takes (`helix.css`).
 
-**Data Table has none of this, and should not.** Its columns are its schema
-rather than an option, so there is always a column to write a `width` on
-and a list here would be a second way to say what that says. This table's
-cells are markup, and a table written as rows of cells with no column
-declared in it has nowhere else to be sized from. */
+Data Table takes the same list, for the same reason: a data table that
+serves its first page as rows is laid out by it before it upgrades. */
   columns?: (HelixTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -24455,7 +24463,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixCopyButtonVueProps,
     HelixCopyButtonVueEvents
   >;
-  /** Rows have hairline rules between them and no fill, and the headings are set apart by weight and color. Helix shows depth with a single border and no elevation, and a header band would be elevation.  The grid scrolls in its own box, and the toolbar and footer sit outside it, so the search field stays in place when the columns scroll sideways.  'windowed' draws only the rows in view, for a result too long to lay out at once, and the headings stay in place while the rows scroll. It works with or without 'paginated' and with either 'mode', so a page or a chunk from a server can be windowed.  **Write the first page as rows, so the served HTML carries the values.** Write it under the columns as 'helix-table-row' and 'helix-table-cell' elements. '@fusion.dev/helix-styles/helix.css' lays them out as the table draws them before it upgrades, and the table shows them until 'rows' holds a row. */
+  /** Rows have hairline rules between them and no fill, and the headings are set apart by weight and color. Helix shows depth with a single border and no elevation, and a header band would be elevation.  The grid scrolls in its own box, and the toolbar and footer sit outside it, so the search field stays in place when the columns scroll sideways.  'windowed' draws only the rows in view, for a result too long to lay out at once, and the headings stay in place while the rows scroll. It works with or without 'paginated' and with either 'mode', so a page or a chunk from a server can be windowed.  **Write the first page as rows, so the served HTML carries the values.** Write it under the columns as 'helix-table-row' and 'helix-table-cell' elements. '@fusion.dev/helix-styles/helix.css' lays them out as the table draws them before it upgrades, and the table shows them until 'rows' holds a row. It holds the checkbox column and the pagination's row from the first paint, and takes the widths from 'columns', so nothing moves when the table upgrades or draws its own rows. */
   "helix-data-table": DefineCustomElement<
     HelixDataTable,
     HelixDataTableVueProps,
@@ -25025,7 +25033,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixStepVueProps,
     HelixStepVueEvents
   >;
-  /** Hundreds of thin strands are drawn as one ribbon, and the light they add together is bloomed, so where they converge the ribbon burns hot. The ribbon moves on its own all the time: it sways and breathes, its strands wave and roll over one another, and light runs along them.  Its palette comes from the tokens. The strands are '--helix-color-primary', a few are '--helix-color-accent' for depth, and the page they light is '--helix-color-background'. On a light page the light becomes ink, because light added to near-white cannot be seen.  **Four forms, set with 'variant'.** 'bend' turns bright strands through one tight point, with its arms opening to the right. 'ribbon', the default, is a broad, soft ribbon in long curves. 'sweep' enters at a top corner, the one 'at' is nearer, and crosses in one diagonal to the far side. 'waves' is sharp strands crossing the full width.  **Quiet behind words.** 'quiet' names elements, such as a hero's words, that the light dims behind to a faint glow, so a bright ribbon can cross the page under them and they stay crisp.  **In its own box, by default.** The element fills the box it is given, the way an image does, and 'at' places the bend's apex or the ribbon's axis across it. Content placed inside sits over the ribbon, in the 'content' part.  **Down the whole page, with 'travel'.** The element fixes itself behind the page, on '--helix-layer-beneath', and lays one ribbon from the top of the page to the bottom, so scrolling travels along it. Put 'helix-strands-stop' elements inside to pin a form to a section: each names an element with 'for' and says which form the ribbon takes there. Between stops the ribbon fills the gap in its own 'variant', and between two waves less than a screen and a half apart it turns off screen so each wave reads alone. Set 'z-index' on the element to move it.  The ribbon stops moving in these cases: - 'prefers-reduced-motion' is set. The element shows one still frame, and in   'travel' still follows the scroll, without easing. - The element is off screen or in a background tab.  It shows a gradient from the same tokens in these cases, and matches ':state(fallback)' and sends 'helix-strands-fallback' with the reason: - The renderer draws on the CPU, such as a headless browser or a machine with   no usable GPU. - There is no WebGL, or the browser took the drawing context back.  Strands is styled only and has behavior, as 'Aura' does: its behavior is drawing to a canvas, so there is no structure for a headless version to hold. */
+  /** Hundreds of thin strands are drawn as one ribbon, and the light they add together is bloomed, so where they converge the ribbon burns hot. The ribbon moves on its own all the time: it sways and breathes, its strands wave and roll over one another, and light runs along them.  Its palette comes from the tokens. The strands are '--helix-color-primary', a few are '--helix-color-accent' for depth, and the page they light is '--helix-color-background'. On a light page the light becomes ink, because light added to near-white cannot be seen.  **Four forms, set with 'variant'.** 'bend' turns bright strands through one tight point, with its arms opening to the right. 'ribbon', the default, is a broad, soft ribbon in long curves. 'sweep' enters at a top corner, the one 'at' is nearer, and crosses in one diagonal to the far side. 'waves' is sharp strands crossing the full width.  **Quiet behind words.** 'quiet' names elements, such as a hero's words, that the light dims behind to a faint glow, so a bright ribbon can cross the page under them and they stay crisp.  **In its own box, by default.** The element fills the box it is given, the way an image does, and 'at' places the bend's apex or the ribbon's axis across it. Content placed inside sits over the ribbon, in the 'content' part.  **Down the whole page, with 'travel'.** The element fixes itself behind the page, on '--helix-layer-beneath', and lays one ribbon from the top of the page to the bottom, so scrolling travels along it. Put 'helix-strands-stop' elements inside to pin a form to a section: each names an element with 'for' and says which form the ribbon takes there. Between stops the ribbon fills the gap in its own 'variant', and between two waves less than a screen and a half apart it turns off screen so each wave reads alone. Set 'z-index' on the element to move it.  The ribbon stops moving in these cases: - 'prefers-reduced-motion' is set. The element shows one still frame, and in   'travel' still follows the scroll. - The element is off screen or in a background tab.  It shows a gradient from the same tokens in these cases, and matches ':state(fallback)' and sends 'helix-strands-fallback' with the reason: - The renderer draws on the CPU, such as a headless browser or a machine with   no usable GPU. - There is no WebGL, or the browser took the drawing context back.  Strands is styled only and has behavior, as 'Aura' does: its behavior is drawing to a canvas, so there is no structure for a headless version to hold. */
   "helix-strands": DefineCustomElement<
     HelixStrands,
     HelixStrandsVueProps,