@fusion.dev/helix-headless 0.168.0 → 0.170.0

package/custom-elements.json

@@ -5613,7 +5613,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`."
             },
             {
               "kind": "field",
@@ -45780,7 +45780,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Declare the columns as `TableColumn` children and pass the rows as an array.\nThe schema stays readable in the HTML, and the rows can be windowed, which\nten thousand row elements cannot be.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n  <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n  <helix-headless-table-column field=\"size\" text-align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\nFor a short table written out by hand, use `Table`, which takes rows as\nmarkup.\n\nSort and filter apply to the whole set, including the rows on other pages.\n\n**The cell values do not server-render.** The headings and the row elements\ndo. Reading a cell needs the columns, and Lit SSR does not pass the column\nchildren to this element, so a crawler sees an empty table of the right\nshape. Use `Table` when the served HTML has to carry the values.\n\n`selectable` adds a column of checkboxes, keyed on `row-key`:\n\n- A row is selected by its key, so the selection survives a sort, a filter,\n  and a page change.\n- `selected` holds the chosen keys, comma separated, the same shape `Listbox`\n  uses for a multiple choice. As with `sort`, writing it applies the\n  selection, and `default-selected` holds what the markup declared.\n- The checkbox in the heading selects every row in the result, across pages,\n  and shows a dash while only some are chosen.\n- Shift with a press on a checkbox selects every row between it and the row\n  last chosen.\n- `selection-behavior=\"replace\"` makes a press or a move select the row\n  alone, as a file list does. Control or Command with a press adds or takes\n  out one row, and Shift with a press selects every row from the one last\n  chosen.\n\nTo act on a single row, such as opening it, put a link or a button in a cell.\n\n**Keyboard.** The grid is one tab stop, and the arrow keys move between its\ncells, the headings included.\n\n| Key | What it does |\n|---|---|\n| Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |\n| Down, Up | Moves one row, the heading row and the `load-more` row included. |\n| Home, End | Moves to the first or the last cell of the row. |\n| Control with Home or End | Moves to the first or the last cell of the grid. |\n| Page Down, Page Up | Moves by the rows that fit in view. |\n| Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |\n| Enter, Space on a sortable heading | Sorts by the column. |\n| Enter, Space on the `load-more` row | Sends `helix-load-more`. |\n| Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior=\"replace\"`, selects it alone, and Control or Command with Space adds or takes out the row. |\n| Down, Up, Page Down, Page Up under `selection-behavior=\"replace\"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |\n| Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |\n| Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |\n| Control or Command with A | Selects every row, in a `selectable` table. |\n| Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |\n| Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |\n| A letter or a word | Moves to the next row whose row header starts with what you typed. |\n\n`selected` and `expanded` hold their keys in the order of the rows, as do\n`helix-select`, `helix-selected` and `helix-expand`.\n\nEach row is named by its row header, the column marked `row-header`, or the\nfirst column with a `field` where none is. A screen reader says it as a reader\nmoves between rows.\n\n**Rows that hold rows.** `child-field` names the field that holds a row's\nchild rows, and the grid becomes a tree grid. The row header column draws a\nmark that a press opens and closes a row by, and `expanded` holds the keys of the open\nrows, which `row-key` names. Right on a closed row's header opens it, Left on\nan open one closes it, and Left on a child moves to its parent. A sort orders\nthe rows under each parent, and a search shows the rows that lead to each\nmatch, open.\n\n`load-more` adds a row after the last one with a button that sends\n`helix-load-more`. A `windowed` table also sends it by itself once a reader\nscrolls within one screen of the end, once for each number of rows. Add the\nnext rows to `rows`, and set `loading` while they are on their way.\n\nWhen a fetch fails, set `error-text`, such as \"The files did not load\", and\nput a button that tries again in the `error` slot. The line shows after the\nrows in place of the empty and loading lines, the live region says it, and\nthe table takes the `error` state. Clear it once you try again.\n\nThe controls inside the cells leave the tab order, so Tab moves past the\nwhole grid. A windowed table keeps the row holding focus drawn while the\nrest scroll away.\n\nPeople can resize and reorder the columns. `resizable` on a column puts a\nseparator on its edge. `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The new order\nis written to `order` as a list of fields. Your markup is not rewritten: the\ntable assigns the headings to its header in that order.\n\n**`reorderable-rows` lets people move rows.** A column of grips leads each\nrow, named by `move-row-label`. Drag a grip to move its row, and the table\nscrolls near an edge. Or press Space or Enter on a grip, or click it, to pick\nup its row, move it with Down and Up, Home and End, and press Space or Enter\nagain to drop it. A click on another row drops it there, and Escape puts it\nback. The table says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder` with\n`kind` set to `row`, whose `keys` hold every key of `rows` in the new order.\n**You move the rows**: set `rows` to the new order, and the table draws it.\nSet `row-key`, so a row is known by its key once it has moved. The grips do\nnothing while a `sort` is set, since the sort decides the order, and a tree\ngrid draws none.\n\n`csv()` returns the result as text: every row that passes the filter, in the\norder and the columns on screen. Saving the file is up to you.\n\n`DataTable` has no `columns` attribute. Each `TableColumn` is part of the\nschema, so you size a column with its own `width`. `Table` has `columns`\nbecause its cells are markup you write and it can have no columns at all.\nWritten on `DataTable`, `columns` has no effect, so watch for it when you\nmove a table from `Table` to `DataTable`.",
+          "description": "Declare the columns as `TableColumn` children and pass the rows as an array.\nThe schema stays readable in the HTML, and the rows can be windowed, which\nten thousand row elements cannot be.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n  <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n  <helix-headless-table-column field=\"size\" text-align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\nFor a short table written out by hand, use `Table`, which takes rows as\nmarkup.\n\nSort and filter apply to the whole set, including the rows on other pages.\n\n**Write the first page as rows, so the served HTML carries the values.** The\ntable reads each cell from its column, and a server does not pass the column\nchildren to this element, so on its own it serves the headings and no values.\nWrite the first page under the columns as `TableRow` and `TableCell`\nelements, in the table's sort and page size and formatted as its columns draw\nthem. The table shows your rows until `rows` holds a row, then draws its own\nin their place and leaves yours in the page, unshown. A development build\nwarns when the two differ. In React, map the first page of the same array in\nthe same server component.\n\n`selectable` adds a column of checkboxes, keyed on `row-key`:\n\n- A row is selected by its key, so the selection survives a sort, a filter,\n  and a page change.\n- `selected` holds the chosen keys, comma separated, the same shape `Listbox`\n  uses for a multiple choice. As with `sort`, writing it applies the\n  selection, and `default-selected` holds what the markup declared.\n- The checkbox in the heading selects every row in the result, across pages,\n  and shows a dash while only some are chosen.\n- Shift with a press on a checkbox selects every row between it and the row\n  last chosen.\n- `selection-behavior=\"replace\"` makes a press or a move select the row\n  alone, as a file list does. Control or Command with a press adds or takes\n  out one row, and Shift with a press selects every row from the one last\n  chosen.\n\nTo act on a single row, such as opening it, put a link or a button in a cell.\n\n**Keyboard.** The grid is one tab stop, and the arrow keys move between its\ncells, the headings included.\n\n| Key | What it does |\n|---|---|\n| Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. |\n| Down, Up | Moves one row, the heading row and the `load-more` row included. |\n| Home, End | Moves to the first or the last cell of the row. |\n| Control with Home or End | Moves to the first or the last cell of the grid. |\n| Page Down, Page Up | Moves by the rows that fit in view. |\n| Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. |\n| Enter, Space on a sortable heading | Sorts by the column. |\n| Enter, Space on the `load-more` row | Sends `helix-load-more`. |\n| Space on a row | Selects the row, in a `selectable` table. Under `selection-behavior=\"replace\"`, selects it alone, and Control or Command with Space adds or takes out the row. |\n| Down, Up, Page Down, Page Up under `selection-behavior=\"replace\"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |\n| Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |\n| Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |\n| Control or Command with A | Selects every row, in a `selectable` table. |\n| Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. |\n| Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. |\n| A letter or a word | Moves to the next row whose row header starts with what you typed. |\n\n`selected` and `expanded` hold their keys in the order of the rows, as do\n`helix-select`, `helix-selected` and `helix-expand`.\n\nEach row is named by its row header, the column marked `row-header`, or the\nfirst column with a `field` where none is. A screen reader says it as a reader\nmoves between rows.\n\n**Rows that hold rows.** `child-field` names the field that holds a row's\nchild rows, and the grid becomes a tree grid. The row header column draws a\nmark that a press opens and closes a row by, and `expanded` holds the keys of the open\nrows, which `row-key` names. Right on a closed row's header opens it, Left on\nan open one closes it, and Left on a child moves to its parent. A sort orders\nthe rows under each parent, and a search shows the rows that lead to each\nmatch, open.\n\n`load-more` adds a row after the last one with a button that sends\n`helix-load-more`. A `windowed` table also sends it by itself once a reader\nscrolls within one screen of the end, once for each number of rows. Add the\nnext rows to `rows`, and set `loading` while they are on their way.\n\nWhen a fetch fails, set `error-text`, such as \"The files did not load\", and\nput a button that tries again in the `error` slot. The line shows after the\nrows in place of the empty and loading lines, the live region says it, and\nthe table takes the `error` state. Clear it once you try again.\n\nThe controls inside the cells leave the tab order, so Tab moves past the\nwhole grid. A windowed table keeps the row holding focus drawn while the\nrest scroll away.\n\nPeople can resize and reorder the columns. `resizable` on a column puts a\nseparator on its edge. `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The new order\nis written to `order` as a list of fields. Your markup is not rewritten: the\ntable assigns the headings to its header in that order.\n\n**`reorderable-rows` lets people move rows.** A column of grips leads each\nrow, named by `move-row-label`. Drag a grip to move its row, and the table\nscrolls near an edge. Or press Space or Enter on a grip, or click it, to pick\nup its row, move it with Down and Up, Home and End, and press Space or Enter\nagain to drop it. A click on another row drops it there, and Escape puts it\nback. The table says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder` with\n`kind` set to `row`, whose `keys` hold every key of `rows` in the new order.\n**You move the rows**: set `rows` to the new order, and the table draws it.\nSet `row-key`, so a row is known by its key once it has moved. The grips do\nnothing while a `sort` is set, since the sort decides the order, and a tree\ngrid draws none.\n\n`csv()` returns the result as text: every row that passes the filter, in the\norder and the columns on screen. Saving the file is up to you.\n\n`DataTable` has no `columns` attribute. Each `TableColumn` is part of the\nschema, so you size a column with its own `width`. `Table` has `columns`\nbecause its cells are markup you write and it can have no columns at all.\nWritten on `DataTable`, `columns` has no effect, so watch for it when you\nmove a table from `Table` to `DataTable`.",
           "name": "HelixHeadlessDataTable",
           "cssProperties": [
             {
@@ -46020,7 +46020,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": ""
             },
             {
@@ -46776,6 +46776,36 @@
               "default": "false",
               "description": "Whether the last render drew the `more` row, which follows the page's rows."
             },
+            {
+              "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."
+            },
+            {
+              "kind": "field",
+              "name": "serving",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the last render showed the rows the page served."
+            },
+            {
+              "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."
+            },
             {
               "kind": "field",
               "name": "typeahead",
@@ -47251,6 +47281,27 @@
                 "module": "src/mixins/mixin-collection/mixin-collection.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
+            },
+            {
+              "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."
+            },
             {
               "kind": "field",
               "name": "sourceKnown",
@@ -113053,6 +113104,16 @@
               "attribute": "orientation",
               "reflects": true
             },
+            {
+              "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
+            },
             {
               "kind": "field",
               "name": "current",
@@ -113484,6 +113545,14 @@
               },
               "description": "Stacks the destinations in a column, for a sidebar, where unset is a row\nfor a header or a footer. The marker follows the current destination down\nthe column as it does along the row.",
               "fieldName": "orientation"
+            },
+            {
+              "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"
             }
           ],
           "cssStates": [
@@ -196364,6 +196433,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.168.0"
+    "version": "0.170.0"
   }
 }

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

@@ -95,7 +95,9 @@ export declare class HelixHeadlessAvatar extends HelixElement {
      * 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: 'error' | 'loaded' | 'loading';
     /**

package/dist/avatar/root/avatar-root.js

@@ -78,8 +78,8 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
         if (changed.has('src') || changed.has('fallbackDelay')) {
             this.startWait();
         }
-        if (changed.has('status')) {
-            if (this.status === 'loading') {
+        if (changed.has('status') || changed.has('src')) {
+            if (this.status === 'loading' || this.src === '') {
                 this.removeAttribute('data-status');
             }
             else {

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

@@ -24,10 +24,15 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *
  * Sort and filter apply to the whole set, including the rows on other pages.
  *
- * **The cell values do not server-render.** The headings and the row elements
- * do. Reading a cell needs the columns, and Lit SSR does not pass the column
- * children to this element, so a crawler sees an empty table of the right
- * shape. Use `Table` when the served HTML has to carry the values.
+ * **Write the first page as rows, so the served HTML carries the values.** The
+ * table reads each cell from its column, and a server does not pass the column
+ * children to this element, so on its own it serves the headings and no values.
+ * Write the first page under the columns as `TableRow` and `TableCell`
+ * elements, in the table's sort and page size and formatted as its columns draw
+ * them. The table shows your rows until `rows` holds a row, then draws its own
+ * in their place and leaves yours in the page, unshown. A development build
+ * warns when the two differ. In React, map the first page of the same array in
+ * the same server component.
  *
  * `selectable` adds a column of checkboxes, keyed on `row-key`:
  *
@@ -132,7 +137,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @aliases Grid, Result table, Data grid
  * @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.
@@ -610,6 +615,15 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private drawnPage;
     /** Whether the last render drew the `more` row, which follows the page's rows. */
     private moreDrawn;
+    /**
+     * Whether `rows` has held a row, after which the rows the page served are
+     * never shown again, whatever `rows` holds later.
+     */
+    private drewRows;
+    /** Whether the last render showed the rows the page served. */
+    private serving;
+    /** Whether the render before the last showed them, so the change is checked once. */
+    private servedLast;
     /** The letters typed at the grid, which move to the row whose header they start. */
     private readonly typeahead;
     /**
@@ -841,6 +855,27 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * what this replaced.
      */
     protected get hasRows(): boolean;
+    /**
+     * The rows the page served: the first page, written as `TableRow` children.
+     *
+     * By tag, because the page may not register `Table`, and an element that is
+     * not defined has no `isTableRow` to find it by.
+     */
+    private get servedRows();
+    /**
+     * Whether this render shows the rows the page served in place of drawing its
+     * own.
+     *
+     * **Until `rows` has held a row, and never after.** A server cannot tell
+     * whether the page served any, and a render hydrating what one sent has to
+     * render the same, so both show the slot that would hold them. In a browser
+     * the rows are shown while `rows` is empty, which is how a framework that
+     * renders on a server leaves the property until it hydrates. Once the table
+     * has drawn its own rows it stops showing the served ones and never removes
+     * them: they are the page's markup, and a framework that rendered them owns
+     * them.
+     */
+    private serves;
     /**
      * Whether this render can tell a result with no rows from one not yet handed
      * over.

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { anchorAt, arranged, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, format, formatWords, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, handedLocale, hostAria, inlineStep, inRowOrder, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, placeKey, ReorderController, rangeAdd, reportRuntime, requestChange, requestReorder, scrollingAncestor, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, words, wordsLocale, writtenList, } from '@fusion.dev/helix-core';
+import { anchorAt, arranged, auditServed, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, format, formatWords, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, handedLocale, hostAria, inlineStep, inRowOrder, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, placeKey, ReorderController, rangeAdd, reportRuntime, requestChange, requestReorder, scrollingAncestor, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, words, wordsLocale, writtenList, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight, dotsSixVertical } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -86,6 +86,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.focusWanted = false;
         this.drawnPage = [];
         this.moreDrawn = false;
+        this.drewRows = false;
+        this.serving = false;
+        this.servedLast = false;
         this.typeahead = new Typeahead();
         this.anchorKey = undefined;
         this.shiftPressed = false;
@@ -656,7 +659,17 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         })).length;
     }
     get hasRows() {
-        return this.view.available > 0 || !this.sourceKnown;
+        return this.view.available > 0 || !this.sourceKnown || this.serving;
+    }
+    get servedRows() {
+        return this.knownChildren.filter((child) => /^helix-(headless-)?table-row$/.test(child.localName));
+    }
+    serves() {
+        if (!this.sourceKnown) {
+            return true;
+        }
+        this.drewRows ||= this.rows.length > 0;
+        return !this.drewRows && this.servedRows.length > 0;
     }
     get sourceKnown() {
         return this.childrenKnown;
@@ -909,6 +922,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         }
         const columns = this.orderedColumns;
         head.assign(...columns);
+        root
+            .querySelector('[part="table"] > slot:not([name])')
+            ?.assign(...(this.serving ? this.servedRows : []));
         const rest = [...this.children].filter((child) => !columns.includes(child));
         for (const [name, wanted] of [
             ['toolbar', true],
@@ -986,6 +1002,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.toggleState('empty', !this.loading && !this.hasRows);
         this.toggleState('loading', this.loading);
         this.assign();
+        if (this.servedLast && !this.serving) {
+            auditServed(this, this.servedRows, [...this.renderRoot.querySelectorAll('[part~="row"]')], this.drawnPage.length);
+        }
+        this.servedLast = this.serving;
         this.announceSort();
         this.quietControls();
         this.placeFocus();
@@ -1186,7 +1206,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     render() {
         const { available, matched, page } = this.view;
-        this.drawnPage = page;
+        const serving = this.serves();
+        this.serving = serving;
+        this.drawnPage = serving ? [] : page;
         this.moreDrawn = this.loadMore && !this.loading && this.errorText === '' && page.length > 0;
         const rows = this.windowOf(page);
         const kept = this.keptRow(page);
@@ -1196,7 +1218,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const columns = this.shownColumns;
         const pagination = this.tag('pagination');
         const counted = this.mode === 'server' ? Math.max(this.total, available) : matched;
-        const countKnown = counted > 0 || this.sourceKnown;
+        const countKnown = counted > 0 || (this.sourceKnown && !serving);
         this.counts = {
             columns: columns.length ? columns.length + this.lead : undefined,
             rows: countKnown ? counted + 1 + (this.moreDrawn ? 1 : 0) : undefined,
@@ -1210,13 +1232,19 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         @scroll=${this.handleScroll}
       >
         <div part="head" role="row" aria-rowindex="1">
-          ${this.rowGrips ? this.renderGripHead(headStop && this.currentColumn === 0) : nothing}${this.selectable
+          ${this.rowGrips && this.sourceKnown
+            ? this.renderGripHead(headStop && this.currentColumn === 0)
+            : nothing}${this.selectable && this.sourceKnown
             ? this.renderSelectAll(headStop && this.currentColumn === this.selectAt)
             : nothing}${this.assignsByName && !this.hydrating
             ? this.orderedColumns.map((_, index) => html `<slot name=${`column-${index + 1}`} @slotchange=${this.handleSlotChange}></slot>`)
-            : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}
+            : html `<slot name="columns" @slotchange=${this.handleSlotChange}></slot>`}${this.sourceKnown ? nothing : html `<slot @slotchange=${this.handleSlotChange}></slot>`}
         </div>
-        ${this.renderSpacer('before', kept)}${this.renderRows(rows, page)}${this.renderSpacer('after', kept)}
+        ${serving
+            ? this.sourceKnown
+                ? html `<slot @slotchange=${this.handleSlotChange}></slot>`
+                : nothing
+            : html `${this.renderSpacer('before', kept)}${this.renderRows(rows, page)}${this.renderSpacer('after', kept)}`}
         ${this.renderMore(page)}${this.errorText === '' ? this.renderStatus(filled, 'gridcell') : this.renderError()}
       </div>
       ${this.errorText === '' ? this.renderLive(filled) : html `<span part="live" role="status">${this.errorText}</span>`}

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

@@ -90,6 +90,28 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      * the column as it does along the row.
      */
     orientation?: 'vertical';
+    /**
+     * 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?: 'segmented' | 'underlined';
     private current;
     /** The disclosures among the destinations that are open. */
     private readonly opened;

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

@@ -155,6 +155,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessNavigation.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessNavigation.prototype, "variant", void 0);
 HelixHeadlessNavigation = __decorate([
     customElement('helix-headless-navigation')
 ], HelixHeadlessNavigation);