@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/switch/root/switch-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, markRegion, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, markRegion, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -16,6 +16,7 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
         });
         this.clicks = new HostClickController(this, () => this.partNamed('control'));
         this.value = 'on';
+        this.valueMissingMessage = 'Turn this on to continue.';
         this.handleChange = (event) => {
             event.stopPropagation();
             const control = event.target;
@@ -27,9 +28,10 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
             this.announceChange();
         };
     }
+    static { this.words = 'helix-switch'; }
     sync() {
         this.internals.setFormValue(this.checked ? this.value : null);
-        this.reportRequired(!this.checked, 'Turn this on to continue.', 'control');
+        this.reportRequired(!this.checked, this.valueMissingMessage, 'control');
     }
     formResetCallback() {
         super.formResetCallback();
@@ -72,6 +74,10 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
 __decorate([
     property()
 ], HelixHeadlessSwitch.prototype, "value", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessSwitch.prototype, "valueMissingMessage", void 0);
 HelixHeadlessSwitch = __decorate([
     customElement('helix-headless-switch')
 ], HelixHeadlessSwitch);

package/dist/table/column/table-column.d.ts

@@ -86,6 +86,11 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
  * @cssstate sorted-descending - While the table is sorted by this column, largest first.
  */
 export declare class HelixHeadlessTableColumn extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-table-column': { resizeLabel: '{name} anpassen' } })`.
+     */
+    static words: string;
     /**
      * A function that reads the cell's content from a row, for cells that `field`
      * alone cannot read.
@@ -124,8 +129,9 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      */
     field: string;
     /**
-     * The accessible name of the grip that moves the column. `{name}` is replaced
-     * with the heading text.
+     * The accessible name of the grip that moves the column. `{name}` is the
+     * heading text, and `{named}` is `no` for a column without one, so the
+     * sentence for it can name the column another way.
      *
      * **Every word a column speaks is a property**, so a table in another
      * language hears its own rather than English around its own headings.
@@ -142,7 +148,7 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
     resizable: boolean;
     /**
      * The accessible name of the separator that resizes the column. `{name}` is
-     * replaced with the heading text.
+     * the heading text, and `{named}` is `no` for a column without one.
      */
     resizeLabel: string;
     /**
@@ -234,7 +240,8 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
     width: string;
     /**
      * The text screen readers announce for the column's width. `{width}` is
-     * replaced with the width.
+     * the width in pixels, written in the locale, and each language writes the
+     * forms it has.
      */
     widthLabel: string;
     /**

package/dist/table/column/table-column.js

@@ -5,8 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessTableColumn_1;
-import { customElement, fillTemplate, HelixBeforeResizeEvent, HelixElement, HelixResizedEvent, hostAria, inlineStep, isRtl, requestChange, valueAt, } from '@fusion.dev/helix-core';
-import { dotsThreeVertical } from '@fusion.dev/helix-icons';
+import { customElement, formatWords, HelixBeforeResizeEvent, HelixElement, HelixResizedEvent, hostAria, inlineStep, isRtl, requestChange, valueAt, words, } from '@fusion.dev/helix-core';
+import { dotsSixVertical } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -18,13 +18,13 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         this.cell = undefined;
         this.compare = undefined;
         this.field = '';
-        this.moveLabel = 'Move {name}';
+        this.moveLabel = '{named, select, no {Move column} other {Move {name}}}';
         this.resizable = false;
-        this.resizeLabel = 'Resize {name}';
+        this.resizeLabel = '{named, select, no {Resize column} other {Resize {name}}}';
         this.rowHeader = false;
         this.sortable = false;
         this.width = '';
-        this.widthLabel = '{width} pixels';
+        this.widthLabel = '{width, plural, one {# pixel} other {# pixels}}';
         this.isTableColumn = true;
         this.sorted = undefined;
         this.movable = false;
@@ -67,6 +67,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         };
     }
     static { HelixHeadlessTableColumn_1 = this; }
+    static { this.words = 'helix-table-column'; }
     static { this.NARROWEST = 48; }
     static { this.STEP = 16; }
     get track() {
@@ -170,6 +171,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     }
     render() {
         const name = this.name;
+        const named = { name, named: name ? 'yes' : 'no' };
         const grid = this.gridCell;
         const control = grid ? '-1' : nothing;
         return html `<span
@@ -179,9 +181,9 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
       aria-sort=${grid && this.canSort ? (this.sorted ?? 'none') : nothing}
       aria-label=${grid && (this.movable || this.resizable) && name ? name : nothing}
     >${this.movable
-            ? html `<button part="grip" type="button" tabindex=${control} aria-label=${fillTemplate(this.moveLabel, { name: name || 'column' })}>
-            <svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsThreeVertical.viewBox}>
-              ${unsafeSVG(dotsThreeVertical.content)}
+            ? html `<button part="grip" type="button" tabindex=${control} aria-label=${formatWords(this, 'moveLabel', named)}>
+            <svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsSixVertical.viewBox}>
+              ${unsafeSVG(dotsSixVertical.content)}
             </svg>
           </button>`
             : nothing}${this.canSort
@@ -191,12 +193,12 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             part="resizer"
             role="separator"
             tabindex=${grid ? '-1' : '0'}
-            aria-label=${fillTemplate(this.resizeLabel, { name: name || 'column' })}
+            aria-label=${formatWords(this, 'resizeLabel', named)}
             aria-orientation="vertical"
             aria-valuemin=${HelixHeadlessTableColumn_1.NARROWEST}
             aria-valuemax="4096"
             aria-valuenow=${Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn)}
-            aria-valuetext=${fillTemplate(this.widthLabel, { width: this.drawn })}
+            aria-valuetext=${formatWords(this, 'widthLabel', { width: this.drawn })}
             @keydown=${this.handleResizeKey}
             @pointerdown=${this.handleResizeStart}
             @pointermove=${this.handleResizeMove}
@@ -216,12 +218,14 @@ __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "field", void 0);
 __decorate([
+    words,
     property({ attribute: 'move-label' })
 ], HelixHeadlessTableColumn.prototype, "moveLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "resizable", void 0);
 __decorate([
+    words,
     property({ attribute: 'resize-label' })
 ], HelixHeadlessTableColumn.prototype, "resizeLabel", void 0);
 __decorate([
@@ -237,6 +241,7 @@ __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "width", void 0);
 __decorate([
+    words,
     property({ attribute: 'width-label' })
 ], HelixHeadlessTableColumn.prototype, "widthLabel", void 0);
 __decorate([

package/dist/table/grid-controller.d.ts

@@ -1,6 +1,11 @@
 import { type GridPlace } from '@fusion.dev/helix-core';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type { HelixHeadlessTableColumn } from './column/table-column.js';
+/**
+ * A column the table draws before the consumer's cells: the grips of a
+ * `reorderable` table, and the checkboxes of a `selectable` one.
+ */
+export type LeadColumn = 'grip' | 'select';
 /** A place in the grid with the element that holds focus there. */
 export interface GridCell extends GridPlace {
     cell: HTMLElement;
@@ -13,14 +18,14 @@ export interface TableGridOptions {
     activate: (place: GridCell, event: KeyboardEvent) => boolean;
     /** The headings that are drawn, in order. */
     columns: () => HelixHeadlessTableColumn[];
+    /** The columns the table draws before the consumer's cells, in order. */
+    lead: () => readonly LeadColumn[];
     /** The element in the table's own shadow root holding a part of that name. */
     part: (name: string) => HTMLElement | null;
     /** The rows in the order they are drawn. */
     rows: () => Element[];
     /** Selects every row for Control or Command with A, and says whether it did. */
     selectAll: () => boolean;
-    /** Whether a checkbox column leads. */
-    selectable: () => boolean;
     /** Whether the table is a grid now. */
     on: () => boolean;
 }
@@ -66,7 +71,7 @@ export declare class TableGridController implements ReactiveController {
      * table draws itself are drawn with the stop where it now is.
      */
     hostUpdate(): void;
-    /** How many columns lead the consumer's cells: the checkbox column, where there is one. */
+    /** How many columns lead the consumer's cells: the grips and the checkboxes, where there are any. */
     private get offset();
     /** The first row: the headings where there are any, and the first row of cells otherwise. */
     private get top();

package/dist/table/grid-controller.js

@@ -1,4 +1,5 @@
 import { deepActiveElement, deepContains, focusableElements, gridMove, inlineStep, pageRows, scrollingAncestor, scrollRoom, selectsAll, whenHydrated, } from '@fusion.dev/helix-core';
+const HEADS = { grip: 'grip-head', select: 'select-all' };
 const shown = (element) => {
     const hidden = element.getAttribute('hidden');
     return hidden === null || hidden === 'until-found';
@@ -125,10 +126,10 @@ export class TableGridController {
         this.focusRow = undefined;
     }
     get offset() {
-        return this.options.selectable() ? 1 : 0;
+        return this.options.lead().length;
     }
     get top() {
-        return this.options.columns().length > 0 || this.options.selectable() ? -1 : 0;
+        return this.options.columns().length > 0 || this.offset > 0 ? -1 : 0;
     }
     cellsOf(row) {
         return [...(row?.children ?? [])].filter(shown);
@@ -138,15 +139,15 @@ export class TableGridController {
         return this.offset + own;
     }
     cellAt({ column, row }) {
-        const lead = column < this.offset;
+        const lead = this.options.lead()[column];
         if (row === -1) {
             return lead
-                ? this.options.part('select-all')
+                ? this.options.part(HEADS[lead])
                 : (this.options.columns()[column - this.offset]?.cellBox ?? null);
         }
         const line = this.options.rows()[row];
         if (lead) {
-            return line?.shadowRoot?.querySelector('[part~="select"]') ?? null;
+            return line?.shadowRoot?.querySelector(`[part~="${lead}"]`) ?? null;
         }
         return this.cellsOf(line)[column - this.offset] ?? null;
     }
@@ -178,12 +179,14 @@ export class TableGridController {
                 return cell ? { cell, column: heading + this.offset, row: -1 } : undefined;
             }
             const part = node.getAttribute('part') ?? '';
-            if (part === 'select-all' && node.getRootNode() === this.host.shadowRoot) {
-                return { cell: node, column: 0, row: -1 };
-            }
             const root = node.getRootNode();
-            if (part.split(' ').includes('select') && rows.includes(root.host)) {
-                return { cell: node, column: 0, row: rows.indexOf(root.host) };
+            for (const [column, lead] of this.options.lead().entries()) {
+                if (part === HEADS[lead] && root === this.host.shadowRoot) {
+                    return { cell: node, column, row: -1 };
+                }
+                if (part.split(' ').includes(lead) && rows.includes(root.host)) {
+                    return { cell: node, column, row: rows.indexOf(root.host) };
+                }
             }
             const parent = node.parentElement;
             if (parent && rows.includes(parent) && shown(node)) {
@@ -202,6 +205,7 @@ export class TableGridController {
     mark() {
         const on = this.options.on();
         const at = this.current();
+        const lead = this.options.lead();
         this.stopIndex = Math.max(0, at.row);
         const columns = this.options.columns();
         for (const [index, column] of columns.entries()) {
@@ -211,9 +215,11 @@ export class TableGridController {
         for (const [index, line] of this.options.rows().entries()) {
             const row = line;
             if (row.isTableRow) {
+                const here = on && at.row === index;
                 whenHydrated(row, () => {
                     row.gridCell = on;
-                    row.selectStop = on && at.row === index && at.column === 0 && this.offset === 1;
+                    row.gripStop = here && lead[at.column] === 'grip';
+                    row.selectStop = here && lead[at.column] === 'select';
                 });
             }
             for (const [place, cell] of this.cellsOf(line).entries()) {

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

@@ -53,6 +53,25 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * Tab reaches each checkbox, and Space ticks it. To act on one row, put a
  * link or a button in a cell, or give the row an `href`.
  *
+ * **Moving rows.** `reorderable` adds a column of grips before the checkboxes,
+ * under a heading named by `row-grips-label`.
+ *
+ * 1. Each row is known by its `value`, or by its place among the rows where it
+ *    has none, as for selecting. Give rows a `value` when they move, so a key
+ *    stays with its row.
+ * 2. A grip is a button named by `move-row-label` ("Move {row}") with the
+ *    words of the row's first cell. Drag it to move its row, and the page
+ *    scrolls near an edge. Or press it with Space, Enter, or a click to pick
+ *    the row up, move it with Up, Down, Home, and End, and press it again to
+ *    drop it. A click on another row drops it there, and Escape puts it back.
+ * 3. `helix-before-reorder` asks first, and `helix-reorder` follows with
+ *    `keys`, every row's key in the new order. **You move the rows**: the
+ *    table moves no element of yours, and focus goes back to the moved row's
+ *    grip once you have.
+ * 4. Each step is said in the table's live region, in words you can change:
+ *    `picked-up-label`, `moved-label`, `dropped-label`, and `canceled-label`.
+ *    The grips do nothing while a sort is set.
+ *
  * **A grid.** `grid` makes the table one tab stop that the arrow keys move
  * through cell by cell, the headings included, as React Aria's table is. The
  * table is then a `grid` and each value a `gridcell`, and the table gives
@@ -70,6 +89,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | Enter on a cell of a row with `href` | Follows the row's link. |
  * | Enter, Space on a sortable heading | Sorts by the column. |
  * | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a `selectable` table. |
+ * | Enter or Space on a grip cell | Picks the row up, or drops it, in a `reorderable` table. Up, Down, Home, and End move a row picked up, and Escape puts it back. |
  * | Control or Command with A | Selects every row, in a `selectable` table. |
  * | Tab | Leaves the table. |
  *
@@ -87,6 +107,8 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @slot - The table's rows.
  * @slot heading - Words that name the table, shown above it, such as a heading.
  *
+ * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when a row is dropped at a new place, in a `reorderable` table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is.
+ * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen.
  * @event {HelixSelectEvent} helix-select - The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection.
  * @event {HelixSelectedEvent} helix-selected - Fired after the selection changes, with every selected key, separated by commas.
  * @event {HelixSortEvent} helix-sort - A different sort order was requested, as `field:direction`, or empty for the order the rows were written in. Cancelable: cancel it to keep the current order.
@@ -103,11 +125,13 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart checkbox-mark-checked - Added to `checkbox-mark` while its box is checked.
  * @csspart checkbox-mark-dash - Added to `checkbox-mark` while it draws the dash, which it keeps until its box is checked.
  * @csspart checkbox-mark-indeterminate - Added to `checkbox-mark` while only some rows are selected.
+ * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
  * @csspart empty - The text shown when there are no rows.
  * @csspart grid-end - An empty box after the rows, in a `grid` table. Tab focuses it on its way out of the table, so the key leaves from the end.
  * @csspart grid-start - An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
+ * @csspart grip-head - The heading over the row grips, in a `reorderable` table.
  * @csspart head - The row that holds the column headings. It has `display: contents`, so it takes no space of its own.
- * @csspart live - A live region that repeats the empty and loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
+ * @csspart live - A live region that repeats the empty and loading text, and says each step of a move, so screen readers announce it when it changes. Visually hidden in the styled tier.
  * @csspart loading - The text shown while the rows are loading.
  * @csspart select-all - The heading that holds the checkbox that selects every row.
  * @csspart table - The grid.
@@ -115,8 +139,24 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @cssproperty --table-template - The column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set `columns` to change the tracks.
  */
 export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
-    /** The word for an ascending sort, in `sorted-label`. */
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-table': { selectAllLabel: 'Alle Zeilen auswählen' } })`.
+     */
+    static words: string;
+    /**
+     * The word for an ascending sort, in a `sorted-label` that writes `{order}`.
+     *
+     * @deprecated Write the whole sentence for each order in `sorted-label`, with
+     * `{direction, select, ascending {...} descending {...} other {...}}`.
+     * Removed in the next major version.
+     */
     ascendingLabel: string;
+    /**
+     * What screen readers hear when a held row is put back, or a move is
+     * refused, in a `reorderable` table.
+     */
+    canceledLabel: string;
     /**
      * The column widths as one track list, written once on the table.
      *
@@ -157,8 +197,21 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * The starting sort order, used until `sort` is set.
      */
     defaultSort: string;
-    /** The word for a descending sort, in `sorted-label`. */
+    /**
+     * The word for a descending sort, in a `sorted-label` that writes `{order}`.
+     *
+     * @deprecated Write the whole sentence for each order in `sorted-label`, with
+     * `{direction, select, ascending {...} descending {...} other {...}}`.
+     * Removed in the next major version.
+     */
     descendingLabel: string;
+    /** What screen readers hear when a held row is dropped, in a `reorderable` table. */
+    droppedLabel: string;
+    /**
+     * The table's name where neither `label` nor an `aria-label` or
+     * `aria-labelledby` on the host gives it one.
+     */
+    fallbackLabel: string;
     /**
      * Makes the table a grid: one tab stop, and the arrow keys, Home, End and the
      * Page keys move focus between its cells, the headings included. Enter moves
@@ -176,6 +229,29 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * wins over this.
      */
     label: string;
+    /**
+     * What screen readers hear each time a key moves a held row, in a
+     * `reorderable` table. `{name}` is the row's words, `{position}` the place it
+     * would go, counting from 1, and `{count}` the number of rows.
+     */
+    movedLabel: string;
+    /**
+     * The name of a row's grip, in a `reorderable` table. `{row}` is replaced
+     * with the words of the row's first cell.
+     */
+    moveRowLabel: string;
+    /**
+     * What screen readers hear when a key or a click picks up a row, in a
+     * `reorderable` table. `{name}` is the row's words.
+     */
+    pickedUpLabel: string;
+    /**
+     * Adds a column of grips that move rows, by dragging or with the keys. The
+     * table moves no row itself: you move your rows on `helix-reorder`.
+     */
+    reorderable: boolean;
+    /** The name of the heading over the row grips, in a `reorderable` table. */
+    rowGripsLabel: string;
     /**
      * Adds a column of checkboxes for selecting rows. Each row is known by its
      * `value`, and by its place among the rows as written where it has none.
@@ -194,7 +270,9 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     set selected(next: string);
     /**
      * What screen readers hear when the chosen rows change. `{count}` is how many
-     * rows are chosen.
+     * rows are chosen, written in the locale, and a language that needs plural
+     * forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
+     * {# wybranych} other {# wybranego}}`.
      */
     selectedLabel: string;
     /**
@@ -215,7 +293,9 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     set sort(next: string);
     /**
      * What screen readers hear when the table is sorted. `{column}` is the
-     * column's heading and `{order}` is `ascending-label` or `descending-label`.
+     * column's heading and `{direction}` is `ascending` or `descending`, so each
+     * order has its whole sentence. `{order}` is the deprecated
+     * `ascending-label` or `descending-label`.
      */
     sortedLabel: string;
     /** What screen readers hear when the table stops being sorted. */
@@ -235,6 +315,21 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     protected readonly aria: AriaForwardController;
     /** The keyboard of a `grid` table, in `grid-controller.ts`. */
     private readonly gridKeys;
+    /**
+     * Moving rows by their grips, in a `reorderable` table. The rows are the
+     * page's, so a drop asks the page to move them, and the grips do nothing
+     * while a sort decides the order.
+     */
+    private readonly reorder;
+    /** The columns drawn before the consumer's cells: the grips, then the checkboxes. */
+    private get lead();
+    /** The row that stands for a key. */
+    private rowFor;
+    /**
+     * What takes focus for a row's grip, in a `reorderable` table: the cell in a
+     * grid, where every cell takes focus, and the button otherwise.
+     */
+    private gripOf;
     /**
      * Asks for a different order, and reports whether the request stood.
      */
@@ -264,6 +359,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * new order is said. Not on the first render, which is the table arriving.
      */
     private news;
+    /**
+     * The sentence a sort is said in: `sorted-label` with the column, and the
+     * order both as `{direction}` and as the deprecated `{order}` word.
+     */
+    private sortSaid;
     /** The sort as the last render had it, so a selection said beside a sort waits. */
     private heardSortBefore;
     /** The selection last heard, so a render that changed nothing says nothing. */
@@ -442,6 +542,8 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     private alignCells;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** The heading over the row grips, named by `row-grips-label`. */
+    private renderGripHead;
     /** The heading of the checkbox column, which selects every row. */
     private renderSelectAll;
     protected render(): TemplateResult;