@fusion.dev/helix-headless 0.168.0 → 0.170.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.168.0",
+  "version": "0.170.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -49,13 +49,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.168.0",
-    "@fusion.dev/helix-icons": "0.168.0",
+    "@fusion.dev/helix-core": "0.170.0",
+    "@fusion.dev/helix-icons": "0.170.0",
     "uqr": "^0.1.3"
   },
   "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

@@ -1601,7 +1601,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?: (HelixHeadlessAvatar["status"]) | undefined;
 
   /** Relayed from the image when it fails. */
@@ -1659,7 +1661,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"?: (HelixHeadlessAvatar["status"]) | undefined;
   /** Relayed from the image when it fails. */
   "on:error"?: ((e: HelixHeadlessAvatarElementEvent) => void) | undefined;
@@ -21590,6 +21594,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?: (HelixHeadlessNavigation["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?: (HelixHeadlessNavigation["variant"]) | undefined;
 };
 
 export type HelixHeadlessNavigationSolidJsProps = {
@@ -21608,6 +21632,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"?: (HelixHeadlessNavigation["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"?: (HelixHeadlessNavigation["variant"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -37510,7 +37554,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
@@ -43199,10 +43245,15 @@ export type CustomElements = {
    *
    * 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`:
    *
@@ -43552,7 +43603,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.
@@ -52832,6 +52883,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
@@ -66458,7 +66528,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
@@ -72201,10 +72273,15 @@ export type CustomElementsSolidJs = {
    *
    * 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`:
    *
@@ -72554,7 +72631,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.
@@ -81946,6 +82023,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

package/types/vue.d.ts

@@ -896,7 +896,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?: (HelixHeadlessAvatar["status"]) | undefined;
 };
 
@@ -11065,6 +11067,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?: (HelixHeadlessNavigation["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?: (HelixHeadlessNavigation["variant"]) | undefined;
 };
 
 export type HelixHeadlessNavigationVueEvents = {};
@@ -19034,7 +19056,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCopyButtonVueProps,
     HelixHeadlessCopyButtonVueEvents
   >;
-  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  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.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one last   chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | 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. | | 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. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
+  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **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':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one last   chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | 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. | | 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. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'. */
   "helix-headless-data-table": DefineCustomElement<
     HelixHeadlessDataTable,
     HelixHeadlessDataTableVueProps,