@fusion.dev/helix 0.168.0 → 0.170.0

package/custom-elements.json

@@ -8414,7 +8414,7 @@
                 "text": "'error' | 'loaded' | 'loading'"
               },
               "default": "'loading'",
-              "description": "The image's state: `loading` while it is on its way, `loaded` once it\narrives, or `error` when it fails and the initials replace it. An avatar\nwith no `src` has no image to wait for, and reports `error` as well, since\nthe initials are what it shows.\n\nRead-only to a consumer: it is a report rather than a setting, and the same\nreport `Image` gives, for the same reason. `load` and `error` fire once, so\na listener bound after the picture settled hears neither, which is the\nplatform on an `<img>` too, and this is what that listener asks instead.\nMirrored to `data-status` rather than reflected, as `Image` explains.",
+              "description": "The image's state: `loading` while it is on its way, `loaded` once it\narrives, or `error` when it fails and the initials replace it. An avatar\nwith no `src` has no image to wait for, and reports `error` as well, since\nthe initials are what it shows.\n\nRead-only to a consumer: it is a report rather than a setting, and the same\nreport `Image` gives, for the same reason. `load` and `error` fire once, so\na listener bound after the picture settled hears neither, which is the\nplatform on an `<img>` too, and this is what that listener asks instead.\nMirrored to `data-status` rather than reflected, as `Image` explains, once a\npicture has loaded or failed. An avatar with no `src` reports `error` here\nand as `:state(error)`, and writes no `data-status`.",
               "inheritedFrom": {
                 "name": "HelixHeadlessAvatar",
                 "module": "src/avatar/root/avatar-root.ts"
@@ -56093,7 +56093,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Rows have hairline rules between them and no fill, and the headings are set\napart by weight and color. Helix shows depth with a single border and no\nelevation, and a header band would be elevation.\n\nThe grid scrolls in its own box, and the toolbar and footer sit outside it,\nso the search field stays in place when the columns scroll sideways.\n\n`windowed` draws only the rows in view, for a result too long to lay out at\nonce, and the headings stay in place while the rows scroll. It works with or\nwithout `paginated` and with either `mode`, so a page or a chunk from a\nserver can be windowed.\n\n**The cell values do not server-render.** Use `helix-table` when the content\nhas to be in the served HTML.",
+          "description": "Rows have hairline rules between them and no fill, and the headings are set\napart by weight and color. Helix shows depth with a single border and no\nelevation, and a header band would be elevation.\n\nThe grid scrolls in its own box, and the toolbar and footer sit outside it,\nso the search field stays in place when the columns scroll sideways.\n\n`windowed` draws only the rows in view, for a result too long to lay out at\nonce, and the headings stay in place while the rows scroll. It works with or\nwithout `paginated` and with either `mode`, so a page or a chunk from a\nserver can be windowed.\n\n**Write the first page as rows, so the served HTML carries the values.**\nWrite it under the columns as `helix-table-row` and `helix-table-cell`\nelements. `@fusion.dev/helix-styles/helix.css` lays them out as the table\ndraws them before it upgrades, and the table shows them until `rows` holds a\nrow.",
           "name": "HelixDataTable",
           "cssProperties": [
             {
@@ -56701,7 +56701,7 @@
           ],
           "slots": [
             {
-              "description": "The columns, as `TableColumn` elements.",
+              "description": "The columns, as `TableColumn` elements, and the first page served as `TableRow` elements, which show until `rows` holds a row.",
               "name": "",
               "inheritedFrom": {
                 "name": "HelixHeadlessDataTable",
@@ -57954,6 +57954,48 @@
                 "module": "src/data-table/root/data-table-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "drewRows",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether `rows` has held a row, after which the rows the page served are\nnever shown again, whatever `rows` holds later.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessDataTable",
+                "module": "src/data-table/root/data-table-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "serving",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the last render showed the rows the page served.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessDataTable",
+                "module": "src/data-table/root/data-table-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "servedLast",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the render before the last showed them, so the change is checked once.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessDataTable",
+                "module": "src/data-table/root/data-table-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "typeahead",
@@ -58575,6 +58617,35 @@
                 "module": "src/data-table/root/data-table-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "servedRows",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "private",
+              "description": "The rows the page served: the first page, written as `TableRow` children.\n\nBy tag, because the page may not register `Table`, and an element that is\nnot defined has no `isTableRow` to find it by.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessDataTable",
+                "module": "src/data-table/root/data-table-root.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "serves",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Whether this render shows the rows the page served in place of drawing its\nown.\n\n**Until `rows` has held a row, and never after.** A server cannot tell\nwhether the page served any, and a render hydrating what one sent has to\nrender the same, so both show the slot that would hold them. In a browser\nthe rows are shown while `rows` is empty, which is how a framework that\nrenders on a server leaves the property until it hydrates. Once the table\nhas drawn its own rows it stops showing the served ones and never removes\nthem: they are the page's markup, and a framework that rendered them owns\nthem.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessDataTable",
+                "module": "src/data-table/root/data-table-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "sourceKnown",
@@ -60554,6 +60625,10 @@
                 "description": "Rows selected by their key, and columns you can reorder and resize.",
                 "slug": "selecting-and-arranging"
               },
+              {
+                "description": "The first page written out as rows, so the HTML carries the values before the table draws its own.",
+                "slug": "serving-the-first-page"
+              },
               {
                 "description": "A summary of the rows shown and a page size menu, on either side of the built-in pagination.",
                 "min": 520,
@@ -137475,7 +137550,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "One marker moves to the current destination. A moving marker is easier to\nfollow than a background that switches from one item to another, and the\nmovement shows which page you came from as well as which one is current.",
+          "description": "One marker moves to the current destination. A moving marker is easier to\nfollow than a background that switches from one item to another, and the\nmovement shows which page you came from as well as which one is current.\n\nThe marker depends on `variant`, as `Tabs`' mark does:\n\n- Unset, it is a pill on the current destination, with nothing behind the\n  row.\n- `underlined` makes it a bar along the bottom of the row, on a rule.\n- `segmented` makes it a raised pill inside a sunken track.",
           "name": "HelixNavigation",
           "cssProperties": [
             {
@@ -137487,7 +137562,7 @@
               "name": "--navigation-gap"
             },
             {
-              "description": "Fill of the marker on the current destination.",
+              "description": "Fill of the marker on the current destination: the bar under `underlined`, and the pill otherwise.",
               "name": "--navigation-indicator-color"
             },
             {
@@ -137495,9 +137570,13 @@
               "name": "--navigation-indicator-radius"
             },
             {
-              "description": "Shadow under the marker, for a marker that sits raised on the bar.",
+              "description": "Shadow under the marker, for a marker that sits raised on the bar, as `segmented` draws it.",
               "name": "--navigation-indicator-shadow"
             },
+            {
+              "description": "Height of the bar under `underlined`, and its width down a column.",
+              "name": "--navigation-indicator-thickness"
+            },
             {
               "description": "Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot.",
               "name": "--navigation-item-color"
@@ -137533,6 +137612,10 @@
             {
               "description": "Corner radius of a destination, which its hover background follows.",
               "name": "--navigation-item-radius"
+            },
+            {
+              "description": "Color of the rule under the row in `underlined`.",
+              "name": "--navigation-rule-color"
             }
           ],
           "members": [
@@ -137629,6 +137712,20 @@
                 "module": "src/navigation/root/navigation-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'segmented' | 'underlined' | undefined"
+              },
+              "description": "How the destinations are drawn, with `Tabs`' three values and for the same\nreasons.\n\nUnset is a pill under the current destination with nothing behind the row,\nfor a bar inside other chrome. `underlined` is a rule under the row and a\nthicker one under the current destination, for a bar that heads a page, as\na repository's or a project's sections do. `segmented` puts the pill in a\nframed, sunken track, for a short set that reads as one control.\n\n**The same words as `Tabs`, because a reader cannot tell the two apart.**\nNavigation moves between pages and tabs between the panels of one page,\nand the bar looks the same either way. A console whose sections are pages\ncould not draw them the way its underlined tabs were drawn.\n\nDown a column, `underlined` stands the rule and the mark along the\ncolumn's inline end.\n\nReflected and left unset by default, so the host carries nothing a\nconsumer's server markup does not already have.",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessNavigation",
+                "module": "src/navigation/root/navigation-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "current",
@@ -138084,6 +138181,14 @@
               {
                 "description": "Links with the current page marked by a marker that moves to it.",
                 "slug": "preview"
+              },
+              {
+                "description": "Links in a sunken track, with the current page marked by a raised pill.",
+                "slug": "segmented"
+              },
+              {
+                "description": "Links with the current page marked by a bar on a rule under the row.",
+                "slug": "underlined"
               }
             ],
             "source": "helix/styled/src/navigation"
@@ -138164,6 +138269,18 @@
                 "name": "HelixHeadlessNavigation",
                 "module": "src/navigation/root/navigation-root.ts"
               }
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'segmented' | 'underlined' | undefined"
+              },
+              "description": "How the destinations are drawn, with `Tabs`' three values and for the same\nreasons.\n\nUnset is a pill under the current destination with nothing behind the row,\nfor a bar inside other chrome. `underlined` is a rule under the row and a\nthicker one under the current destination, for a bar that heads a page, as\na repository's or a project's sections do. `segmented` puts the pill in a\nframed, sunken track, for a short set that reads as one control.\n\n**The same words as `Tabs`, because a reader cannot tell the two apart.**\nNavigation moves between pages and tabs between the panels of one page,\nand the bar looks the same either way. A console whose sections are pages\ncould not draw them the way its underlined tabs were drawn.\n\nDown a column, `underlined` stands the rule and the mark along the\ncolumn's inline end.\n\nReflected and left unset by default, so the host carries nothing a\nconsumer's server markup does not already have.",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "HelixHeadlessNavigation",
+                "module": "src/navigation/root/navigation-root.ts"
+              }
             }
           ],
           "cssStates": [
@@ -245744,6 +245861,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.168.0"
+    "version": "0.170.0"
   }
 }

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

@@ -1,5 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="table"] {display: grid;grid-template-columns: var(--data-table-columns, var(--data-table-template, minmax(0, 1fr)));inline-size: 100%;overflow-x: auto;}[part="table"] {--_data-table-fade: to right;animation: data-table-edges linear both;animation-timeline: scroll(self inline);mask-image: linear-gradient(
+export const styles = createSheet(`:host {display: block;}[part="toolbar"],
+[part="table"],
+[part="footer"] {grid-column: 1 / -1;}[part="table"] {display: grid;grid-template-columns: var(--data-table-columns, var(--data-table-template, minmax(0, 1fr)));inline-size: 100%;overflow-x: auto;}[part="table"] {--_data-table-fade: to right;animation: data-table-edges linear both;animation-timeline: scroll(self inline);mask-image: linear-gradient(
 var(--_data-table-fade),
 transparent,
 #000 var(--_data-table-fade-start, 0rem),

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

@@ -19,15 +19,18 @@ import '../../table/index.js';
  * 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.
  *
  * @since 0.1.0
  * @status stable
  * @category data
  * @documentation https://fusion.dev/helix/components/data-table
  *
- * @slot - The columns, as `TableColumn` elements.
+ * @slot - The columns, as `TableColumn` elements, and the first page served as `TableRow` elements, which show until `rows` holds a row.
  * @slot 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.
  * @slot 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.
  * @slot footer - Content below the grid. It replaces the built-in pagination.

package/dist/navigation/root/navigation-root.css.js

@@ -2,4 +2,10 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: block;}[part="nav"] {align-items: center;block-size: var(--navigation-block-size, var(--helix-size-control-sm));display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));min-inline-size: 0;overflow-x: auto;position: relative;}::slotted(:is(ul, ol, [role="list"])) {align-items: center;block-size: 100%;display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}:host([orientation="vertical"]) ::slotted(:is(ul, ol, [role="list"])) {align-items: stretch;block-size: auto;flex-direction: column;}[part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));block-size: var(--indicator-block-size, 0);border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));box-shadow: var(--navigation-indicator-shadow, none);inline-size: var(--indicator-inline-size, 0);inset-block-start: 50%;inset-inline-start: 0;opacity: 0;position: absolute;translate: var(--indicator-x, 0) -50%;transition:
 translate var(--helix-duration-normal) var(--helix-easing-emphasized),
 inline-size var(--helix-duration-normal) var(--helix-easing-emphasized),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"][data-placed] {opacity: 1;}:host([orientation="vertical"]) [part="nav"] {align-items: stretch;block-size: auto;flex-direction: column;overflow-x: visible;}:host([orientation="vertical"]) [part="indicator"] {inset-block-start: 0;translate: var(--indicator-x, 0) var(--indicator-y, 0);}@media print {:host {display: none;}}`);
+opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"][data-placed] {opacity: 1;}:host([orientation="vertical"]) [part="nav"] {align-items: stretch;block-size: auto;flex-direction: column;overflow-x: visible;}:host([orientation="vertical"]) [part="indicator"] {inset-block-start: 0;translate: var(--indicator-x, 0) var(--indicator-y, 0);}:host([variant="underlined"]) [part="nav"] {background-image: linear-gradient(
+var(--navigation-rule-color, var(--helix-color-border)),
+var(--navigation-rule-color, var(--helix-color-border))
+);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);}:host([variant="underlined"]) [part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-primary));block-size: var(--navigation-indicator-thickness, var(--helix-border-thick));border-radius: var(--navigation-indicator-radius, var(--helix-radii-none));inset-block-end: 0;inset-block-start: auto;translate: var(--indicator-x, 0) 0;}:host([variant="segmented"]) [part="nav"] {background-color: var(--helix-color-surface-sunken);block-size: var(--navigation-block-size, var(--helix-size-control));border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;inline-size: fit-content;max-inline-size: 100%;padding: var(--helix-space-2xs);}:host([variant="segmented"]) [part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-surface-overlay));border-radius: var(
+--navigation-indicator-radius,
+calc(var(--helix-radii-sm) - var(--helix-border-thin))
+);box-shadow: var(--navigation-indicator-shadow, var(--helix-shadow-sm));}:host([orientation="vertical"][variant="underlined"]) [part="nav"] {background-position: right;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;}:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {block-size: var(--indicator-block-size, 0);inline-size: var(--navigation-indicator-thickness, var(--helix-border-thick));inset-block-start: 0;inset-inline-end: 0;inset-inline-start: auto;translate: 0 var(--indicator-y, 0);}:host([orientation="vertical"][variant="segmented"]) [part="nav"] {block-size: auto;}:host([orientation="vertical"][variant="underlined"]:dir(rtl)) [part="nav"] {background-position: left;}@media print {:host {display: none;}}`);

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

@@ -8,6 +8,13 @@ import type { CSSResultGroup } from 'lit';
  * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -16,10 +23,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --navigation-block-size - Height of the bar in a row. Each destination fills it.
  * @cssproperty --navigation-gap - Space between destinations.
- * @cssproperty --navigation-indicator-color - Fill of the marker on the current destination.
+ * @cssproperty --navigation-indicator-color - Fill of the marker on the current destination: the bar under `underlined`, and the pill otherwise.
  * @cssproperty --navigation-indicator-radius - Corner radius of the marker.
  * @cssproperty --navigation-indicator-shadow - Shadow under the marker, for a marker that sits
- *   raised on the bar.
+ *   raised on the bar, as `segmented` draws it.
+ * @cssproperty --navigation-indicator-thickness - Height of the bar under `underlined`, and its width down a column.
  * @cssproperty --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.
  * @cssproperty --navigation-item-current-color - Text color of the current destination, the one marked `aria-current="page"`.
  * @cssproperty --navigation-item-current-font-weight - Weight of the current destination's text.
@@ -29,6 +37,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --navigation-item-hover-color - Text color of a destination under the pointer.
  * @cssproperty --navigation-item-padding-inline - Space either side of a destination's text.
  * @cssproperty --navigation-item-radius - Corner radius of a destination, which its hover background follows.
+ * @cssproperty --navigation-rule-color - Color of the rule under the row in `underlined`.
  */
 export declare class HelixNavigation extends HelixHeadlessNavigation {
     static styles: CSSResultGroup;