@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/splitter/root/splitter-root.js

@@ -5,13 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessSplitter_1;
-import { AriaForwardController, capturePointer, closestInstance, commaList, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { AriaForwardController, capturePointer, closestInstance, commaList, customElement, formatPercent, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { snapTo } from '../snap.js';
 const STACK_BELOW = 512;
 const channel = new WeakMap();
-let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitter extends HelixElement {
+let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
+    static { HelixHeadlessSplitter_1 = this; }
+    static { this.words = 'helix-splitter'; }
     get collapsed() {
         const held = this.collapsedState;
         if (held === undefined) {
@@ -144,6 +146,9 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
                 const previous = this.position;
                 this.positionState = value;
                 this.requestUpdate('position', previous);
+                if (value !== previous) {
+                    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+                }
                 this.dispatchEvent(new HelixResizedEvent({ value: String(value) }));
             },
             event: (value) => new HelixBeforeResizeEvent({ value: String(value) }),
@@ -447,6 +452,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         super.firstUpdated(changed);
         this.watchWidth();
         this.findOuter();
+        this.finishHydration();
     }
     updated(changed) {
         super.updated(changed);
@@ -473,6 +479,8 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('dragging', this.dragging);
+        this.toggleState('collapsed', this.collapsed !== undefined);
+        this.toggleState('vertical', this.vertical);
     }
     render() {
         const position = this.showing;
@@ -494,7 +502,11 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         aria-valuemax=${this.collapsed ? 100 : this.clamp(this.maxPercent)}
         aria-valuemin=${this.collapsed ? 0 : this.clamp(this.minPercent)}
         aria-valuenow=${Math.round(position)}
-        aria-valuetext=${this.collapsed ? this.collapsedLabel : nothing}
+        aria-valuetext=${this.collapsed
+            ? this.collapsedLabel
+            : this.hydrating
+                ? nothing
+                : formatPercent(Math.round(position) / 100, wordsLocale(this))}
         ?data-dragging=${this.dragging}
         ?data-flush=${this.flush}
         @dblclick=${this.handleDoubleClick}
@@ -503,7 +515,9 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         @pointerdown=${this.handlePointerDown}
         @pointermove=${this.handlePointerMove}
         @pointerup=${this.handlePointerUp}
-      ></div>
+      >
+        <slot name="handle"></slot>
+      </div>
       <div part="end" ?data-dragging=${this.dragging}>
         <slot name="end"></slot>
       </div>
@@ -516,6 +530,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
           aria-valuemax="100"
           aria-valuemin="0"
           aria-valuenow=${Math.round(crossing.at)}
+          aria-valuetext=${formatPercent(Math.round(crossing.at) / 100, wordsLocale(this))}
           data-cross=${index}
           style="--splitter-corner-at: ${crossing.at}%; --splitter-position: ${position}%"
           @dblclick=${this.handleCornerDoubleClick}
@@ -531,12 +546,14 @@ __decorate([
     property()
 ], HelixHeadlessSplitter.prototype, "collapsed", null);
 __decorate([
+    words,
     property({ attribute: 'collapsed-label' })
 ], HelixHeadlessSplitter.prototype, "collapsedLabel", void 0);
 __decorate([
     property({ attribute: 'collapsed-size', type: Number })
 ], HelixHeadlessSplitter.prototype, "collapsedSize", void 0);
 __decorate([
+    words,
     property({ attribute: 'corner-label' })
 ], HelixHeadlessSplitter.prototype, "cornerLabel", void 0);
 __decorate([
@@ -546,6 +563,7 @@ __decorate([
     property({ attribute: 'default-position', type: Number })
 ], HelixHeadlessSplitter.prototype, "defaultPosition", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessSplitter.prototype, "label", void 0);
 __decorate([

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

@@ -58,6 +58,11 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * @cssstate complete - Every stage is complete.
  */
 export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-steps': { progressLabel: '{share, number, percent} erledigt' } })`.
+     */
+    static words: string;
     /**
      * The sequence's name, read by screen readers.
      *
@@ -85,8 +90,10 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      */
     orientation?: 'vertical';
     /**
-     * What the `progress` part says to a screen reader, with `{percent}` filled
-     * in with `progress`.
+     * What the `progress` part says to a screen reader. `{share, number,
+     * percent}` writes `progress` as a percentage the way the locale writes one,
+     * such as `40%`, or `40 %` in French. `{percent}` is `progress` as a whole
+     * number, for a sentence that places the sign itself.
      */
     progressLabel: string;
     /**

package/dist/steps/root/steps-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 { customElement, fillTemplate, HelixElement, hostAria, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, hostAria, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { canReach, progressOf } from '../reach.js';
@@ -13,7 +13,7 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         super(...arguments);
         this.label = 'Steps';
         this.linear = false;
-        this.progressLabel = '{percent}% complete';
+        this.progressLabel = '{share, number, percent} complete';
         this.handleSelection = (event) => {
             if (event.defaultPrevented || !this.steps.includes(event.target)) {
                 return;
@@ -29,6 +29,7 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             this.lock();
         };
     }
+    static { this.words = 'helix-steps'; }
     get progress() {
         return progressOf(this.steps);
     }
@@ -141,13 +142,14 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow=${progress}
-        aria-valuetext=${fillTemplate(this.progressLabel, { percent: String(progress) })}
+        aria-valuetext=${formatWords(this, 'progressLabel', { percent: progress, share: progress / 100 })}
         style="--steps-progress: ${progress}%"
         hidden
       ></div>`;
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessSteps.prototype, "label", void 0);
 __decorate([
@@ -157,6 +159,7 @@ __decorate([
     property({ reflect: true })
 ], HelixHeadlessSteps.prototype, "orientation", void 0);
 __decorate([
+    words,
     property({ attribute: 'progress-label' })
 ], HelixHeadlessSteps.prototype, "progressLabel", void 0);
 __decorate([

package/dist/steps/step/step.d.ts

@@ -55,10 +55,22 @@ import '../../button/index.js';
  * @cssstate invalid - The sequence's `validate` last answered that this stage is not valid.
  */
 export declare class HelixHeadlessStep extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-step': { completeLabel: 'Erledigt' } })`.
+     */
+    static words: string;
     /**
      * Whether this stage is finished.
      */
     complete: boolean;
+    /**
+     * What a screen reader hears when the stage is finished while the page is
+     * open. `{name}` is the stage's name and `{complete}` is `complete-label`, so
+     * a language can write the whole sentence in its own order. A stage with no
+     * name says `complete-label` alone.
+     */
+    completedLabel: string;
     /**
      * The words that tell a screen reader the stage is finished. Translate it
      * with the page.

package/dist/steps/step/step.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 { customElement, drawStatus, HelixElement, HelixSelectEvent, hostAria, StatusController, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, formatWords, HelixElement, HelixSelectEvent, hostAria, StatusController, slottedWords, words, } from '@fusion.dev/helix-core';
 import { check, circle, record } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -15,6 +15,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     constructor() {
         super(...arguments);
         this.complete = false;
+        this.completedLabel = '{name}, {complete}';
         this.completeLabel = 'Complete';
         this.current = false;
         this.disabled = false;
@@ -24,6 +25,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         this.value = '';
         this.status = new StatusController(this);
     }
+    static { this.words = 'helix-step'; }
     select() {
         if (this.disabled || this.locked) {
             return;
@@ -47,7 +49,9 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         super.updated(changed);
         if (changed.get('complete') === false && this.complete) {
             const name = slottedWords(this, ['']);
-            this.status.say(name === '' ? this.completeLabel : `${name}, ${this.completeLabel}`);
+            this.status.say(name === ''
+                ? this.completeLabel
+                : formatWords(this, 'completedLabel', { complete: this.completeLabel, name }));
         }
     }
     renderLabel() {
@@ -78,6 +82,11 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessStep.prototype, "complete", void 0);
 __decorate([
+    words,
+    property({ attribute: 'completed-label' })
+], HelixHeadlessStep.prototype, "completedLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'complete-label' })
 ], HelixHeadlessStep.prototype, "completeLabel", void 0);
 __decorate([

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

@@ -58,6 +58,11 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-switch': { valueMissingMessage: '...' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** A click on the element itself, `click()` or a page's `<label for>`, toggles it. */
     protected readonly clicks: HostClickController;
@@ -65,6 +70,12 @@ export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
      * Value submitted when the switch is on.
      */
     value: string;
+    /**
+     * The message reported when the field is required and the switch is off.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     private readonly handleChange;
     /** Reports what the form would submit, and the verdict on it. */
     private sync;

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/cell/table-cell.d.ts

@@ -14,7 +14,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *   table with no `TableColumn` heads its columns with.
  *
  * The role is on the host so the cell stays a child of its row in the flat
- * tree, which keeps the table structure intact.
+ * tree, which keeps the table structure intact. In a `grid` table a value is
+ * a `gridcell`, and the table gives the cell a `tabindex` so focus can rest on
+ * it.
  *
  * @since 0.1.0
  * @status stable
@@ -33,6 +35,11 @@ export declare class HelixHeadlessTableCell extends HelixElement {
      * column in a row of headers alone.
      */
     header: boolean;
+    /**
+     * @internal Whether the cell is a cell of a `grid` table, which moves focus
+     * between its cells, written by that table. Not a consumer's to set.
+     */
+    gridCell: boolean;
     /**
      * @internal Read by the row and by the cells beside it, to tell a header
      * cell from a value. Not a consumer's to read or set.

package/dist/table/cell/table-cell.js

@@ -6,11 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessTableCell = class HelixHeadlessTableCell extends HelixElement {
     constructor() {
         super(...arguments);
         this.header = false;
+        this.gridCell = false;
         this.isTableCell = true;
         this.handleSlotChange = () => {
             const text = [...this.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').trim() !== '');
@@ -27,7 +28,7 @@ let HelixHeadlessTableCell = class HelixHeadlessTableCell extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         const header = this.headsRow ? 'rowheader' : 'columnheader';
-        hostAria(this.internals, { role: this.header ? header : 'cell' });
+        hostAria(this.internals, { role: this.header ? header : this.gridCell ? 'gridcell' : 'cell' });
     }
     updated(changed) {
         super.updated(changed);
@@ -47,6 +48,9 @@ let HelixHeadlessTableCell = class HelixHeadlessTableCell extends HelixElement {
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTableCell.prototype, "header", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableCell.prototype, "gridCell", void 0);
 HelixHeadlessTableCell = __decorate([
     customElement('helix-headless-table-cell')
 ], HelixHeadlessTableCell);

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

@@ -0,0 +1,122 @@
+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;
+}
+export interface TableGridOptions {
+    /**
+     * Acts on a cell for Enter, Space or F2, and says whether it did. A key it
+     * leaves alone moves into the cell's controls, Enter and F2 only.
+     */
+    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 the table is a grid now. */
+    on: () => boolean;
+}
+/**
+ * The keyboard of a `grid` table: one tab stop among its cells, the arrow
+ * keys, Home, End and the Page keys between them, and Enter or F2 into a
+ * cell's controls.
+ *
+ * **Tab leaves the grid.** The controls in a cell are the consumer's, so their
+ * tab order is left as written: Tab on a cell, or past the last control of a
+ * cell, focuses an empty box at the grid's end (Shift: its start) and lets the
+ * key go on from there, as React Aria's collections do. A control in a cell
+ * that focus reaches from outside by the keyboard hands it to the stop, so the
+ * grid is one stop from either side. A press, or a script focusing a cell, is
+ * left where it lands, and the stop follows it.
+ */
+export declare class TableGridController implements ReactiveController {
+    private readonly host;
+    private readonly options;
+    /** The row holding the stop, `head` for the headings, or nothing for the first row. */
+    private stopRow;
+    /** The column holding the stop. */
+    private stopColumn;
+    /** Where the stop's row was drawn when last marked, for the row that takes over when it goes. */
+    private stopIndex;
+    /** The row focus is in, while it is in the grid's rows. */
+    private focusRow;
+    /** Whether the next update focuses the stop, after a key moved it. */
+    private focusWanted;
+    /** Whether focus is arriving from a press, which keeps its place. */
+    private pointing;
+    /** The cells given a `tabindex`, so a table that stops being a grid takes it back. */
+    private readonly given;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: TableGridOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * A row taken away while it held the stop hands it to the row drawn in its
+     * place, or to the row before where it was the last, at the same column.
+     * Where focus was in that row and went with it, focus follows the stop, as
+     * React Aria's collections move it to a neighbor; focus that had already
+     * left the grid is left where it is. Before the render, so the cells the
+     * table draws itself are drawn with the stop where it now is.
+     */
+    hostUpdate(): void;
+    /** 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();
+    /** A row's cells that are drawn, in order. */
+    private cellsOf;
+    /** How many columns a row has. */
+    private widthOf;
+    /** The element that takes focus at a place, or nothing where there is none. */
+    cellAt({ column, row }: GridPlace): HTMLElement | null;
+    /** The place holding the stop now, held to the grid as it is. */
+    current(): GridPlace;
+    /** Whether the stop is at a place, for a cell the table draws itself. */
+    isStop(place: GridPlace): boolean;
+    /** The place an event came from or through, with the element that holds focus there. */
+    private placeOf;
+    /** Moves the stop to a place, and focus with it on the next update. */
+    private moveTo;
+    /**
+     * Writes the stops: a `tabindex` on every cell, `0` on the one holding the
+     * stop, and the grid's state on the rows and headings. Takes it all back
+     * once the table stops being a grid. Called by the table after each update.
+     */
+    mark(): void;
+    /** Focuses the stop where a key asked for it. Called by the table after `mark`. */
+    place(): void;
+    /** The controls in a cell, in order: what Enter and F2 move into, and Tab moves between. */
+    private controlsIn;
+    /**
+     * Hands focus to the empty box at the grid's end, or its start, so the Tab
+     * under way goes on from there and out of the grid.
+     */
+    private leave;
+    /** How many rows a Page key moves from a cell. */
+    private pageFrom;
+    private readonly handleKeydown;
+    /** The keys the grid takes while focus is on a control inside a cell. */
+    private handleControlKey;
+    /**
+     * Focus arriving on a cell, or inside one. From outside the grid by the
+     * keyboard, anywhere but the stop is handed to the stop; otherwise the stop
+     * moves to where focus went.
+     */
+    private readonly handleFocusIn;
+    /** Focus leaving for somewhere outside the grid's host is no longer in a row. */
+    private readonly handleFocusOut;
+    /** A press is under way, so the focus it brings stays where it lands. */
+    private readonly handlePointerDown;
+}