@fusion.dev/helix 0.169.0 → 0.170.0

package/custom-elements.json

@@ -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,
@@ -245786,6 +245861,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.169.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.