@fusion.dev/helix 0.168.0 → 0.170.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.168.0",
+  "version": "0.170.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -54,13 +54,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.168.0",
-    "@fusion.dev/helix-headless": "0.168.0",
-    "@fusion.dev/helix-styles": "0.168.0"
+    "@fusion.dev/helix-core": "0.170.0",
+    "@fusion.dev/helix-headless": "0.170.0",
+    "@fusion.dev/helix-styles": "0.170.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.168.0",
-    "@fusion.dev/helix-testing": "0.168.0",
+    "@fusion.dev/helix-cem": "0.170.0",
+    "@fusion.dev/helix-testing": "0.170.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

@@ -2033,7 +2033,9 @@ Read-only to a consumer: it is a report rather than a setting, and the same
 report `Image` gives, for the same reason. `load` and `error` fire once, so
 a listener bound after the picture settled hears neither, which is the
 platform on an `<img>` too, and this is what that listener asks instead.
-Mirrored to `data-status` rather than reflected, as `Image` explains. */
+Mirrored to `data-status` rather than reflected, as `Image` explains, once a
+picture has loaded or failed. An avatar with no `src` reports `error` here
+and as `:state(error)`, and writes no `data-status`. */
   status?: (HelixAvatar["status"]) | undefined;
 
   /** Relayed from the image when it fails. */
@@ -2099,7 +2101,9 @@ Read-only to a consumer: it is a report rather than a setting, and the same
 report `Image` gives, for the same reason. `load` and `error` fire once, so
 a listener bound after the picture settled hears neither, which is the
 platform on an `<img>` too, and this is what that listener asks instead.
-Mirrored to `data-status` rather than reflected, as `Image` explains. */
+Mirrored to `data-status` rather than reflected, as `Image` explains, once a
+picture has loaded or failed. An avatar with no `src` reports `error` here
+and as `:state(error)`, and writes no `data-status`. */
   "prop:status"?: (HelixAvatar["status"]) | undefined;
   /** Relayed from the image when it fails. */
   "on:error"?: ((e: HelixAvatarElementEvent) => void) | undefined;
@@ -24308,6 +24312,26 @@ second "Main". */
 for a header or a footer. The marker follows the current destination down
 the column as it does along the row. */
   orientation?: (HelixNavigation["orientation"]) | undefined;
+  /** How the destinations are drawn, with `Tabs`' three values and for the same
+reasons.
+
+Unset is a pill under the current destination with nothing behind the row,
+for a bar inside other chrome. `underlined` is a rule under the row and a
+thicker one under the current destination, for a bar that heads a page, as
+a repository's or a project's sections do. `segmented` puts the pill in a
+framed, sunken track, for a short set that reads as one control.
+
+**The same words as `Tabs`, because a reader cannot tell the two apart.**
+Navigation moves between pages and tabs between the panels of one page,
+and the bar looks the same either way. A console whose sections are pages
+could not draw them the way its underlined tabs were drawn.
+
+Down a column, `underlined` stands the rule and the mark along the
+column's inline end.
+
+Reflected and left unset by default, so the host carries nothing a
+consumer's server markup does not already have. */
+  variant?: (HelixNavigation["variant"]) | undefined;
 };
 
 export type HelixNavigationSolidJsProps = {
@@ -24326,6 +24350,26 @@ second "Main". */
 for a header or a footer. The marker follows the current destination down
 the column as it does along the row. */
   "prop:orientation"?: (HelixNavigation["orientation"]) | undefined;
+  /** How the destinations are drawn, with `Tabs`' three values and for the same
+reasons.
+
+Unset is a pill under the current destination with nothing behind the row,
+for a bar inside other chrome. `underlined` is a rule under the row and a
+thicker one under the current destination, for a bar that heads a page, as
+a repository's or a project's sections do. `segmented` puts the pill in a
+framed, sunken track, for a short set that reads as one control.
+
+**The same words as `Tabs`, because a reader cannot tell the two apart.**
+Navigation moves between pages and tabs between the panels of one page,
+and the bar looks the same either way. A console whose sections are pages
+could not draw them the way its underlined tabs were drawn.
+
+Down a column, `underlined` stands the rule and the mark along the
+column's inline end.
+
+Reflected and left unset by default, so the host carries nothing a
+consumer's server markup does not already have. */
+  "prop:variant"?: (HelixNavigation["variant"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -42465,7 +42509,9 @@ export type CustomElements = {
    * report `Image` gives, for the same reason. `load` and `error` fire once, so
    * a listener bound after the picture settled hears neither, which is the
    * platform on an `<img>` too, and this is what that listener asks instead.
-   * Mirrored to `data-status` rather than reflected, as `Image` explains. (property only)
+   * Mirrored to `data-status` rather than reflected, as `Image` explains, once a
+   * picture has loaded or failed. An avatar with no `src` reports `error` here
+   * and as `:state(error)`, and writes no `data-status`. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -48181,8 +48227,11 @@ export type CustomElements = {
    * without `paginated` and with either `mode`, so a page or a chunk from a
    * server can be windowed.
    *
-   * **The cell values do not server-render.** Use `helix-table` when the content
-   * has to be in the served HTML.
+   * **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.
    *
    * ## Attributes & Properties
    *
@@ -48435,7 +48484,7 @@ export type CustomElements = {
    *
    * Areas where markup can be added to the component.
    *
-   * - `(default)`: The columns, as `TableColumn` elements.
+   * - `(default)`: The columns, as `TableColumn` elements, and the first page served as `TableRow` elements, which show until `rows` holds a row.
    * - `empty`: Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
    * - `error`: Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
    * - `footer`: Content below the grid. It replaces the built-in pagination.
@@ -57477,6 +57526,13 @@ export type CustomElements = {
    * follow than a background that switches from one item to another, and the
    * movement shows which page you came from as well as which one is current.
    *
+   * The marker depends on `variant`, as `Tabs`' mark does:
+   *
+   * - Unset, it is a pill on the current destination, with nothing behind the
+   *   row.
+   * - `underlined` makes it a bar along the bottom of the row, on a rule.
+   * - `segmented` makes it a raised pill inside a sunken track.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -57493,6 +57549,25 @@ export type CustomElements = {
    * - `orientation`: Stacks the destinations in a column, for a sidebar, where unset is a row
    * for a header or a footer. The marker follows the current destination down
    * the column as it does along the row.
+   * - `variant`: How the destinations are drawn, with `Tabs`' three values and for the same
+   * reasons.
+   *
+   * Unset is a pill under the current destination with nothing behind the row,
+   * for a bar inside other chrome. `underlined` is a rule under the row and a
+   * thicker one under the current destination, for a bar that heads a page, as
+   * a repository's or a project's sections do. `segmented` puts the pill in a
+   * framed, sunken track, for a short set that reads as one control.
+   *
+   * **The same words as `Tabs`, because a reader cannot tell the two apart.**
+   * Navigation moves between pages and tabs between the panels of one page,
+   * and the bar looks the same either way. A console whose sections are pages
+   * could not draw them the way its underlined tabs were drawn.
+   *
+   * Down a column, `underlined` stands the rule and the mark along the
+   * column's inline end.
+   *
+   * Reflected and left unset by default, so the host carries nothing a
+   * consumer's server markup does not already have.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -57527,9 +57602,10 @@ export type CustomElements = {
    *
    * - `--navigation-block-size`: Height of the bar in a row. Each destination fills it.
    * - `--navigation-gap`: Space between destinations.
-   * - `--navigation-indicator-color`: Fill of the marker on the current destination.
+   * - `--navigation-indicator-color`: Fill of the marker on the current destination: the bar under `underlined`, and the pill otherwise.
    * - `--navigation-indicator-radius`: Corner radius of the marker.
-   * - `--navigation-indicator-shadow`: Shadow under the marker, for a marker that sits raised on the bar.
+   * - `--navigation-indicator-shadow`: Shadow under the marker, for a marker that sits raised on the bar, as `segmented` draws it.
+   * - `--navigation-indicator-thickness`: Height of the bar under `underlined`, and its width down a column.
    * - `--navigation-item-color`: Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot.
    * - `--navigation-item-current-color`: Text color of the current destination, the one marked `aria-current="page"`.
    * - `--navigation-item-current-font-weight`: Weight of the current destination's text.
@@ -57539,6 +57615,7 @@ export type CustomElements = {
    * - `--navigation-item-hover-color`: Text color of a destination under the pointer.
    * - `--navigation-item-padding-inline`: Space either side of a destination's text.
    * - `--navigation-item-radius`: Corner radius of a destination, which its hover background follows.
+   * - `--navigation-rule-color`: Color of the rule under the row in `underlined`.
    *
    * ## CSS Parts
    *
@@ -71645,7 +71722,9 @@ export type CustomElementsSolidJs = {
    * report `Image` gives, for the same reason. `load` and `error` fire once, so
    * a listener bound after the picture settled hears neither, which is the
    * platform on an `<img>` too, and this is what that listener asks instead.
-   * Mirrored to `data-status` rather than reflected, as `Image` explains. (property only)
+   * Mirrored to `data-status` rather than reflected, as `Image` explains, once a
+   * picture has loaded or failed. An avatar with no `src` reports `error` here
+   * and as `:state(error)`, and writes no `data-status`. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -77438,8 +77517,11 @@ export type CustomElementsSolidJs = {
    * without `paginated` and with either `mode`, so a page or a chunk from a
    * server can be windowed.
    *
-   * **The cell values do not server-render.** Use `helix-table` when the content
-   * has to be in the served HTML.
+   * **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.
    *
    * ## Attributes & Properties
    *
@@ -77692,7 +77774,7 @@ export type CustomElementsSolidJs = {
    *
    * Areas where markup can be added to the component.
    *
-   * - `(default)`: The columns, as `TableColumn` elements.
+   * - `(default)`: The columns, as `TableColumn` elements, and the first page served as `TableRow` elements, which show until `rows` holds a row.
    * - `empty`: Content shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
    * - `error`: Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
    * - `footer`: Content below the grid. It replaces the built-in pagination.
@@ -86891,6 +86973,13 @@ export type CustomElementsSolidJs = {
    * follow than a background that switches from one item to another, and the
    * movement shows which page you came from as well as which one is current.
    *
+   * The marker depends on `variant`, as `Tabs`' mark does:
+   *
+   * - Unset, it is a pill on the current destination, with nothing behind the
+   *   row.
+   * - `underlined` makes it a bar along the bottom of the row, on a rule.
+   * - `segmented` makes it a raised pill inside a sunken track.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -86907,6 +86996,25 @@ export type CustomElementsSolidJs = {
    * - `orientation`: Stacks the destinations in a column, for a sidebar, where unset is a row
    * for a header or a footer. The marker follows the current destination down
    * the column as it does along the row.
+   * - `variant`: How the destinations are drawn, with `Tabs`' three values and for the same
+   * reasons.
+   *
+   * Unset is a pill under the current destination with nothing behind the row,
+   * for a bar inside other chrome. `underlined` is a rule under the row and a
+   * thicker one under the current destination, for a bar that heads a page, as
+   * a repository's or a project's sections do. `segmented` puts the pill in a
+   * framed, sunken track, for a short set that reads as one control.
+   *
+   * **The same words as `Tabs`, because a reader cannot tell the two apart.**
+   * Navigation moves between pages and tabs between the panels of one page,
+   * and the bar looks the same either way. A console whose sections are pages
+   * could not draw them the way its underlined tabs were drawn.
+   *
+   * Down a column, `underlined` stands the rule and the mark along the
+   * column's inline end.
+   *
+   * Reflected and left unset by default, so the host carries nothing a
+   * consumer's server markup does not already have.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -86941,9 +87049,10 @@ export type CustomElementsSolidJs = {
    *
    * - `--navigation-block-size`: Height of the bar in a row. Each destination fills it.
    * - `--navigation-gap`: Space between destinations.
-   * - `--navigation-indicator-color`: Fill of the marker on the current destination.
+   * - `--navigation-indicator-color`: Fill of the marker on the current destination: the bar under `underlined`, and the pill otherwise.
    * - `--navigation-indicator-radius`: Corner radius of the marker.
-   * - `--navigation-indicator-shadow`: Shadow under the marker, for a marker that sits raised on the bar.
+   * - `--navigation-indicator-shadow`: Shadow under the marker, for a marker that sits raised on the bar, as `segmented` draws it.
+   * - `--navigation-indicator-thickness`: Height of the bar under `underlined`, and its width down a column.
    * - `--navigation-item-color`: Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot.
    * - `--navigation-item-current-color`: Text color of the current destination, the one marked `aria-current="page"`.
    * - `--navigation-item-current-font-weight`: Weight of the current destination's text.
@@ -86953,6 +87062,7 @@ export type CustomElementsSolidJs = {
    * - `--navigation-item-hover-color`: Text color of a destination under the pointer.
    * - `--navigation-item-padding-inline`: Space either side of a destination's text.
    * - `--navigation-item-radius`: Corner radius of a destination, which its hover background follows.
+   * - `--navigation-rule-color`: Color of the rule under the row in `underlined`.
    *
    * ## CSS Parts
    *
@@ -101422,12 +101532,14 @@ export type CustomCssProperties = {
   "--navigation-block-size"?: (string) | undefined;
   /** Space between destinations. */
   "--navigation-gap"?: (string) | undefined;
-  /** Fill of the marker on the current destination. */
+  /** Fill of the marker on the current destination: the bar under `underlined`, and the pill otherwise. */
   "--navigation-indicator-color"?: (string) | undefined;
   /** Corner radius of the marker. */
   "--navigation-indicator-radius"?: (string) | undefined;
-  /** Shadow under the marker, for a marker that sits raised on the bar. */
+  /** Shadow under the marker, for a marker that sits raised on the bar, as `segmented` draws it. */
   "--navigation-indicator-shadow"?: (string) | undefined;
+  /** Height of the bar under `underlined`, and its width down a column. */
+  "--navigation-indicator-thickness"?: (string) | undefined;
   /** Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot. */
   "--navigation-item-color"?: (string) | undefined;
   /** Text color of the current destination, the one marked `aria-current="page"`. */
@@ -101446,6 +101558,8 @@ export type CustomCssProperties = {
   "--navigation-item-padding-inline"?: (string) | undefined;
   /** Corner radius of a destination, which its hover background follows. */
   "--navigation-item-radius"?: (string) | undefined;
+  /** Color of the rule under the row in `underlined`. */
+  "--navigation-rule-color"?: (string) | undefined;
   /** Text color in a read item. */
   "--notifications-color"?: (string) | undefined;
   /** Color of the dismiss control. It is `danger`, because dismissing an item removes it for good. */

package/types/vue.d.ts

@@ -1108,7 +1108,9 @@ Read-only to a consumer: it is a report rather than a setting, and the same
 report `Image` gives, for the same reason. `load` and `error` fire once, so
 a listener bound after the picture settled hears neither, which is the
 platform on an `<img>` too, and this is what that listener asks instead.
-Mirrored to `data-status` rather than reflected, as `Image` explains. */
+Mirrored to `data-status` rather than reflected, as `Image` explains, once a
+picture has loaded or failed. An avatar with no `src` reports `error` here
+and as `:state(error)`, and writes no `data-status`. */
   status?: (HelixAvatar["status"]) | undefined;
 };
 
@@ -12479,6 +12481,26 @@ second "Main". */
 for a header or a footer. The marker follows the current destination down
 the column as it does along the row. */
   orientation?: (HelixNavigation["orientation"]) | undefined;
+  /** How the destinations are drawn, with `Tabs`' three values and for the same
+reasons.
+
+Unset is a pill under the current destination with nothing behind the row,
+for a bar inside other chrome. `underlined` is a rule under the row and a
+thicker one under the current destination, for a bar that heads a page, as
+a repository's or a project's sections do. `segmented` puts the pill in a
+framed, sunken track, for a short set that reads as one control.
+
+**The same words as `Tabs`, because a reader cannot tell the two apart.**
+Navigation moves between pages and tabs between the panels of one page,
+and the bar looks the same either way. A console whose sections are pages
+could not draw them the way its underlined tabs were drawn.
+
+Down a column, `underlined` stands the rule and the mark along the
+column's inline end.
+
+Reflected and left unset by default, so the host carries nothing a
+consumer's server markup does not already have. */
+  variant?: (HelixNavigation["variant"]) | undefined;
 };
 
 export type HelixNavigationVueEvents = {};
@@ -22525,12 +22547,14 @@ export type CustomCssProperties = {
   "--navigation-block-size"?: (string) | undefined;
   /** Space between destinations. */
   "--navigation-gap"?: (string) | undefined;
-  /** Fill of the marker on the current destination. */
+  /** Fill of the marker on the current destination: the bar under `underlined`, and the pill otherwise. */
   "--navigation-indicator-color"?: (string) | undefined;
   /** Corner radius of the marker. */
   "--navigation-indicator-radius"?: (string) | undefined;
-  /** Shadow under the marker, for a marker that sits raised on the bar. */
+  /** Shadow under the marker, for a marker that sits raised on the bar, as `segmented` draws it. */
   "--navigation-indicator-shadow"?: (string) | undefined;
+  /** Height of the bar under `underlined`, and its width down a column. */
+  "--navigation-indicator-thickness"?: (string) | undefined;
   /** Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot. */
   "--navigation-item-color"?: (string) | undefined;
   /** Text color of the current destination, the one marked `aria-current="page"`. */
@@ -22549,6 +22573,8 @@ export type CustomCssProperties = {
   "--navigation-item-padding-inline"?: (string) | undefined;
   /** Corner radius of a destination, which its hover background follows. */
   "--navigation-item-radius"?: (string) | undefined;
+  /** Color of the rule under the row in `underlined`. */
+  "--navigation-rule-color"?: (string) | undefined;
   /** Text color in a read item. */
   "--notifications-color"?: (string) | undefined;
   /** Color of the dismiss control. It is `danger`, because dismissing an item removes it for good. */
@@ -23831,7 +23857,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.  **The cell values do not server-render.** Use 'helix-table' when the content has to be in the served HTML. */
+  /** 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. */
   "helix-data-table": DefineCustomElement<
     HelixDataTable,
     HelixDataTableVueProps,
@@ -24143,7 +24169,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixMeterVueProps,
     HelixMeterVueEvents
   >;
-  /** One marker moves to the current destination. A moving marker is easier to follow than a background that switches from one item to another, and the movement shows which page you came from as well as which one is current. */
+  /** One marker moves to the current destination. A moving marker is easier to follow than a background that switches from one item to another, and the movement shows which page you came from as well as which one is current.  The marker depends on 'variant', as 'Tabs'' mark does:  - Unset, it is a pill on the current destination, with nothing behind the   row. - 'underlined' makes it a bar along the bottom of the row, on a rule. - 'segmented' makes it a raised pill inside a sunken track. */
   "helix-navigation": DefineCustomElement<
     HelixNavigation,
     HelixNavigationVueProps,