@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/table/root/table-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, assignSlots, commaList, customElement, cycle, everyState, fillTemplate, followLink, format, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -48,17 +48,25 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     constructor() {
         super(...arguments);
         this.ascendingLabel = 'ascending';
+        this.canceledLabel = 'Canceled';
         this.columns = '';
         this.defaultSelected = '';
         this.defaultSort = '';
         this.descendingLabel = 'descending';
+        this.droppedLabel = 'Dropped';
+        this.fallbackLabel = 'Table';
         this.grid = false;
         this.label = '';
+        this.movedLabel = '{name} moved to position {position} of {count}';
+        this.moveRowLabel = 'Move {row}';
+        this.pickedUpLabel = 'Picked up {name}';
+        this.reorderable = false;
+        this.rowGripsLabel = 'Move rows';
         this.selectable = false;
         this.selectAllLabel = 'Select every row';
         this.selectedLabel = '{count} selected';
         this.selectRowLabel = 'Select {row}';
-        this.sortedLabel = 'Sorted by {column}, {order}';
+        this.sortedLabel = '{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}';
         this.unsortedLabel = 'Not sorted';
         this.sortState = undefined;
         this.selectedState = undefined;
@@ -70,11 +78,31 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.gridKeys = new TableGridController(this, {
             activate: (place, event) => this.activate(place, event),
             columns: () => this.tableColumns.filter((column) => column.shown),
+            lead: () => this.lead,
             on: () => this.grid,
             part: (name) => this.partNamed(name),
             rows: () => (this.childrenKnown ? this.arrangedRows : []),
             selectAll: () => this.selectable && this.requestSelected(new Set(this.everyKey)),
-            selectable: () => this.selectable,
+        });
+        this.reorder = new ReorderController(this, {
+            axis: 'block',
+            box: (key) => this.gripOf(this.rowFor(key))?.getBoundingClientRect(),
+            enabled: () => this.reorderable && !parse(this.sort),
+            grip: (event) => {
+                const path = event.composedPath();
+                const found = this.keyed.find(({ row }) => path.includes(this.gripOf(row)));
+                const element = this.gripOf(found?.row);
+                return found && element ? { element, key: found.key } : undefined;
+            },
+            item: (event) => {
+                const path = event.composedPath();
+                return this.keyed.find(({ row }) => path.includes(row))?.key;
+            },
+            keys: () => this.everyKey,
+            kind: 'row',
+            name: (key) => textOf(this.rowFor(key)?.children[0]) || key,
+            preview: (key) => this.rowFor(key),
+            refocus: (key) => this.gripOf(this.rowFor(key))?.focus(),
         });
         this.heardSort = undefined;
         this.heardSortBefore = undefined;
@@ -115,6 +143,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.alignment = undefined;
         this.aligned = '';
     }
+    static { this.words = 'helix-table'; }
     get selected() {
         return this.selectedState ?? this.defaultSelected;
     }
@@ -131,6 +160,19 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.sortState = next;
         this.requestUpdate('sort', previous);
     }
+    get lead() {
+        return [
+            ...(this.reorderable ? ['grip'] : []),
+            ...(this.selectable ? ['select'] : []),
+        ];
+    }
+    rowFor(key) {
+        return this.keyed.find((one) => one.key === key)?.row;
+    }
+    gripOf(row) {
+        const cell = row?.shadowRoot?.querySelector('[part~="grip"]');
+        return this.grid ? cell : cell?.querySelector('button');
+    }
     requestSort(next) {
         return requestChange({
             apply: (value) => {
@@ -174,21 +216,25 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 ? this.tableColumns.find((one) => one.field === parsed.field)
                 : undefined;
             said = parsed
-                ? fillTemplate(this.sortedLabel, {
-                    column: column?.textContent?.trim() || parsed.field,
-                    order: parsed.direction === 'asc' ? this.ascendingLabel : this.descendingLabel,
-                })
+                ? this.sortSaid(column?.textContent?.trim() || parsed.field, parsed.direction === 'asc' ? 'ascending' : 'descending')
                 : this.unsortedLabel;
         }
         this.heardSort = current;
         const selected = this.selectable ? this.selected : '';
         if (this.hasUpdated && current === this.heardSortBefore && selected !== this.heardSelected) {
-            said = fillTemplate(this.selectedLabel, { count: this.chosen.size });
+            said = formatWords(this, 'selectedLabel', { count: this.chosen.size });
         }
         this.heardSortBefore = current;
         this.heardSelected = selected;
         return said;
     }
+    sortSaid(column, direction) {
+        return formatWords(this, 'sortedLabel', {
+            column,
+            direction,
+            order: direction === 'ascending' ? this.ascendingLabel : this.descendingLabel,
+        });
+    }
     get keyed() {
         return this.slotted.map((row, index) => ({
             key: row.value || String(index),
@@ -228,7 +274,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.requestSelected(keys);
     }
     activate(place, event) {
-        const lead = this.selectable && place.column === 0;
+        const leads = this.lead;
+        const lead = leads[place.column] === 'select';
         if (event.key === 'F2') {
             return false;
         }
@@ -238,7 +285,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 return true;
             }
             const shown = this.tableColumns.filter((one) => one.shown);
-            const column = shown[place.column - (this.selectable ? 1 : 0)];
+            const column = shown[place.column - leads.length];
             if (column?.canSort) {
                 this.toggleSort(column.field);
                 return true;
@@ -259,15 +306,22 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }
     markSelected() {
         const keys = this.chosen;
+        const still = Boolean(parse(this.sort));
         for (const { key, row } of this.keyed) {
             if (!row.isTableRow) {
                 continue;
             }
-            const label = fillTemplate(this.selectRowLabel, { row: textOf(row.children[0]) || key });
+            const name = textOf(row.children[0]) || key;
+            const label = formatWords(this, 'selectRowLabel', { row: name });
+            const grip = this.reorderable ? formatWords(this, 'moveRowLabel', { row: name }) : '';
+            const move = this.reorder.moveOf(key);
             whenHydrated(row, () => {
                 row.selectable = this.selectable;
                 row.selected = keys.has(key);
                 row.selectLabel = label;
+                row.gripLabel = grip;
+                row.gripStill = still;
+                row.move = move;
             });
         }
     }
@@ -290,10 +344,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                     : undefined;
             column.sortWords =
                 android && column.sorted
-                    ? fillTemplate(this.sortedLabel, {
-                        column: column.textContent?.trim() || column.field,
-                        order: column.sorted === 'ascending' ? this.ascendingLabel : this.descendingLabel,
-                    })
+                    ? this.sortSaid(column.textContent?.trim() || column.field, column.sorted)
                     : '';
         }
     }
@@ -302,7 +353,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }
     get template() {
         const tracks = this.tracks;
-        return this.selectable && tracks ? `max-content ${tracks}` : tracks;
+        const lead = this.lead.map(() => 'max-content ').join('');
+        return tracks ? lead + tracks : tracks;
     }
     get tracks() {
         const declared = this.tableColumns;
@@ -416,6 +468,17 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.gridKeys.place();
         }
     }
+    renderGripHead() {
+        if (!this.reorderable) {
+            return nothing;
+        }
+        return html `<span
+      part="grip-head"
+      role="columnheader"
+      aria-label=${this.rowGripsLabel}
+      tabindex=${this.grid ? (this.gridKeys.isStop({ column: 0, row: -1 }) ? '0' : '-1') : nothing}
+    ></span>`;
+    }
     renderSelectAll() {
         if (!this.selectable) {
             return nothing;
@@ -424,8 +487,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         const { checked, indeterminate } = everyState(this.chosen, every);
         const checkbox = this.tag('checkbox');
         const grid = this.grid;
+        const column = this.lead.indexOf('select');
         return html `<span part="select-all" role="columnheader"
-      tabindex=${grid ? (this.gridKeys.isStop({ column: 0, row: -1 }) ? '0' : '-1') : nothing}
+      tabindex=${grid ? (this.gridKeys.isStop({ column, row: -1 }) ? '0' : '-1') : nothing}
       ><${checkbox}
         part="checkbox"
         tabindex=${grid ? '-1' : nothing}
@@ -449,10 +513,10 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
       role=${grid ? 'grid' : 'table'}
       aria-multiselectable=${grid && this.selectable ? 'true' : nothing}
       aria-busy=${this.loading ? 'true' : nothing}
-      aria-label=${this.label || 'Table'}
+      aria-label=${this.label || this.fallbackLabel}
       style=${template ? `--table-template: ${template}` : ''}
     >
-      <div part="head" role="row">${this.renderSelectAll()}<slot name="columns"></slot></div>
+      <div part="head" role="row">${this.renderGripHead()}${this.renderSelectAll()}<slot name="columns"></slot></div>
       <slot
         @slotchange=${(event) => {
             this.countRows(event);
@@ -460,12 +524,17 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         }}
       ></slot>
       ${this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')}
-    </div>${end}${this.renderLive(this.hasRows)}`;
+    </div>${end}${this.renderLive(this.hasRows)}${this.reorder.drawDragPreview()}`;
     }
 };
 __decorate([
+    words,
     property({ attribute: 'ascending-label' })
 ], HelixHeadlessTable.prototype, "ascendingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'canceled-label' })
+], HelixHeadlessTable.prototype, "canceledLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "columns", void 0);
@@ -476,36 +545,69 @@ __decorate([
     property({ attribute: 'default-sort' })
 ], HelixHeadlessTable.prototype, "defaultSort", void 0);
 __decorate([
+    words,
     property({ attribute: 'descending-label' })
 ], HelixHeadlessTable.prototype, "descendingLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dropped-label' })
+], HelixHeadlessTable.prototype, "droppedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessTable.prototype, "fallbackLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTable.prototype, "grid", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "label", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-label' })
+], HelixHeadlessTable.prototype, "movedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'move-row-label' })
+], HelixHeadlessTable.prototype, "moveRowLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'picked-up-label' })
+], HelixHeadlessTable.prototype, "pickedUpLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTable.prototype, "reorderable", void 0);
+__decorate([
+    words,
+    property({ attribute: 'row-grips-label' })
+], HelixHeadlessTable.prototype, "rowGripsLabel", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTable.prototype, "selectable", void 0);
 __decorate([
+    words,
     property({ attribute: 'select-all-label' })
 ], HelixHeadlessTable.prototype, "selectAllLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "selected", null);
 __decorate([
+    words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessTable.prototype, "selectedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'select-row-label' })
 ], HelixHeadlessTable.prototype, "selectRowLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "sort", null);
 __decorate([
+    words,
     property({ attribute: 'sorted-label' })
 ], HelixHeadlessTable.prototype, "sortedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'unsorted-label' })
 ], HelixHeadlessTable.prototype, "unsortedLabel", void 0);
 __decorate([

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

@@ -1,6 +1,8 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../checkbox/index.js';
+/** Where a row stands in a move: the row being moved, or the one the drop indicator is beside. */
+export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
 /**
  * @summary One row of a table.
  *
@@ -13,6 +15,12 @@ import '../../checkbox/index.js';
  * In a `selectable` table the row draws a checkbox cell before its own cells,
  * and `value` is the key the table's `selected` lists it by.
  *
+ * In a `reorderable` table the row draws a grip cell before those, holding a
+ * button named by the table's `move-row-label`, and `value` is the key
+ * `helix-reorder` lists it by. The table says which row is moving and where
+ * the drop indicator is, with the `dragging`, `drop-before`, and `drop-after`
+ * states.
+ *
  * **`href` makes the whole row a link**, as a row action does in React Aria's
  * table: a press anywhere on the row follows it, except on a link or a control
  * of the row's own, and Control, Command or Shift open it the way they open a
@@ -39,9 +47,15 @@ import '../../checkbox/index.js';
  * @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 grip - The cell that holds the row's grip, in a `reorderable` table.
+ * @csspart grip-button - The button that moves the row.
+ * @csspart grip-mark - The icon on the grip.
  * @csspart select - The cell that holds the row's checkbox, in a `selectable` table.
  * @csspart select-selected - Added to `select` while the row is selected.
  *
+ * @cssstate dragging - The row is being moved, in a `reorderable` table.
+ * @cssstate drop-after - The row being moved goes after this one when it is dropped.
+ * @cssstate drop-before - The row being moved goes before this one when it is dropped.
  * @cssstate link - While the row has `href`, so a press on it follows the link.
  * @cssstate selected - While the row is selected, in a `selectable` table.
  */
@@ -77,6 +91,27 @@ export declare class HelixHeadlessTableRow extends HelixElement {
     selected: boolean;
     /** @internal The name of the row's checkbox, written by the table. Not a consumer's to set. */
     selectLabel: string;
+    /**
+     * @internal The name of the row's grip, written by a `reorderable` table, and
+     * empty in a table that does not reorder, which draws no grip. Not a
+     * consumer's to set.
+     */
+    gripLabel: string;
+    /**
+     * @internal Whether the grip does nothing for now, as while the table is
+     * sorted, written by the table. Not a consumer's to set.
+     */
+    gripStill: boolean;
+    /**
+     * @internal Whether the grip cell holds the grid's one tab stop, written by
+     * the table that sets `gridCell`. Not a consumer's to set.
+     */
+    gripStop: boolean;
+    /**
+     * @internal Where the row stands in a move, written by a `reorderable` table.
+     * Not a consumer's to set.
+     */
+    move: TableRowMove | undefined;
     /**
      * @internal Whether the row is a row of a `grid` table, written by that
      * table. Not a consumer's to set. The checkbox cell is then a `gridcell`
@@ -121,6 +156,13 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * table's `selected` says.
      */
     protected renderSelect(): TemplateResult | typeof nothing;
+    /**
+     * The grip cell, in a `reorderable` table: a cell of the row's own before the
+     * checkbox cell, holding the button that moves the row. In a grid the cell
+     * takes focus and Space or Enter on it picks the row up, and the button
+     * leaves the tab order. `aria-disabled` while a sort decides the order.
+     */
+    protected renderGrip(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/table/row/table-row.js

@@ -5,8 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, followLink, HelixElement, hostAria, pressedOwnControl, } from '@fusion.dev/helix-core';
+import { dotsSixVertical } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../checkbox/index.js';
 let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
@@ -20,6 +22,10 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.selectable = false;
         this.selected = false;
         this.selectLabel = '';
+        this.gripLabel = '';
+        this.gripStill = false;
+        this.gripStop = false;
+        this.move = undefined;
         this.gridCell = false;
         this.selectStop = false;
         this.columnRules = undefined;
@@ -64,6 +70,9 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.internals.ariaSelected = this.gridCell && this.selectable ? String(this.selected) : null;
         this.toggleState('selected', this.selectable && this.selected);
         this.toggleState('link', this.href !== '');
+        this.toggleState('dragging', this.move === 'dragging');
+        this.toggleState('drop-after', this.move === 'drop-after');
+        this.toggleState('drop-before', this.move === 'drop-before');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -95,8 +104,26 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
       ></${checkbox}
     ></span>`;
     }
+    renderGrip() {
+        if (!this.gripLabel) {
+            return nothing;
+        }
+        const grid = this.gridCell;
+        return html `<span
+      part="grip"
+      role=${grid ? 'gridcell' : 'cell'}
+      tabindex=${grid ? (this.gripStop ? '0' : '-1') : nothing}
+      ><button
+        part="grip-button"
+        type="button"
+        tabindex=${grid ? '-1' : nothing}
+        aria-label=${this.gripLabel}
+        aria-disabled=${this.gripStill ? 'true' : nothing}
+      ><svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsSixVertical.viewBox}>${unsafeSVG(dotsSixVertical.content)}</svg></button
+    ></span>`;
+    }
     render() {
-        return html `${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
+        return html `${this.renderGrip()}${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
 __decorate([
@@ -120,6 +147,18 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableRow.prototype, "selectLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "gripLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "gripStill", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "gripStop", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "move", void 0);
 __decorate([
     state()
 ], HelixHeadlessTableRow.prototype, "gridCell", void 0);

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

@@ -63,6 +63,11 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @csspart tabs - The tab list.
  */
 export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tabs': { label: 'Reiter' } })`.
+     */
+    static words: string;
     protected readonly keys: KeyboardNavigationController;
     private readonly indicator;
     /** Carries a host `aria-label` and `aria-labelledby` to the tab list. */

package/dist/tabs/root/tabs-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, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
@@ -40,6 +40,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             this.indicator.place();
         };
     }
+    static { this.words = 'helix-tabs'; }
     get tabs() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessTab);
     }
@@ -111,6 +112,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessTabs.prototype, "label", void 0);
 __decorate([

package/dist/tag/group/tag-group.d.ts

@@ -46,6 +46,11 @@ export type TagSelectionMode = SelectionMode;
  * @csspart empty - Holds the `empty` slot while the group has no tags, rendered only then. Takes focus when the last tag is removed.
  */
 export declare class HelixHeadlessTagGroup extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tag-group': { emptyLabel: 'Keine Schlagwörter' } })`.
+     */
+    static words: string;
     /**
      * The words the group shows and says once its last tag is removed, where
      * nothing is in the `empty` slot.

package/dist/tag/group/tag-group.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 { commaList, customElement, deepActiveElement, deepContains, focusItemOf, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestValue, rovingStop, slottedWords, typeaheadByWords, whenHydrated, } from '@fusion.dev/helix-core';
+import { commaList, customElement, deepActiveElement, deepContains, focusItemOf, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestValue, rovingStop, slottedWords, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTag } from '../root/tag-root.js';
@@ -92,6 +92,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             }
         };
     }
+    static { this.words = 'helix-tag-group'; }
     get written() {
         return typeof this.value === 'string'
             ? this.value
@@ -182,6 +183,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     }
 };
 __decorate([
+    words,
     property({ attribute: 'empty-label' })
 ], HelixHeadlessTagGroup.prototype, "emptyLabel", void 0);
 __decorate([

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

@@ -50,13 +50,26 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * @cssstate selected - The tag is selected in a `Tag.Group` that selects.
  */
 export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
-    dismissLabel: string;
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tag': { dismissLabel: '{label} entfernen' } })`.
+     */
+    static words: string;
     /**
      * Takes the tag out of reach: its link and its remove button stop
      * answering, and in a `Tag.Group` the arrow keys pass over it and it cannot
      * be selected or removed.
      */
     disabled: boolean;
+    /**
+     * The remove button's name, read by screen readers, with `{label}` for the
+     * tag's own words.
+     *
+     * "Remove" rather than the mixin's "Dismiss": a tag is taken out of a set,
+     * which is a different act from closing a message. One sentence with the
+     * tag's words in it, so a translation puts them where its language does.
+     */
+    dismissLabel: string;
     /**
      * Whether the tag holds its group's tab stop.
      *

package/dist/tag/root/tag-root.js

@@ -4,17 +4,18 @@ 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, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
-        this.dismissLabel = 'Remove';
         this.disabled = false;
+        this.dismissLabel = 'Remove {label}';
         this.href = '';
         this.value = '';
     }
+    static { this.words = 'helix-tag'; }
     get words() {
         return this.childrenKnown ? slottedWords(this, ['start', '']) : '';
     }
@@ -45,13 +46,11 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
         this.toggleState('selected', this.selected === true);
     }
     get removeName() {
-        const words = this.words;
-        if (this.dismissLabel.includes('{label}')) {
-            return this.dismissLabel.replace('{label}', words).trim();
+        const { dismissLabel, words } = this;
+        if (dismissLabel.includes('{label}')) {
+            return formatWords(this, 'dismissLabel', { label: words }).trim();
         }
-        return words === '' || this.dismissLabel.includes(words)
-            ? this.dismissLabel
-            : `${this.dismissLabel} ${words}`;
+        return words === '' || dismissLabel.includes(words) ? dismissLabel : `${dismissLabel} ${words}`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -95,6 +94,10 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTag.prototype, "disabled", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessTag.prototype, "dismissLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTag.prototype, "focusable", void 0);

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

@@ -60,6 +60,11 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * @cssstate invalid - The control has an error to show, from the browser's validation, `validate`, or your `feedback`.
  */
 export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-textarea': { clearLabel: 'Leeren' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;