@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -4,12 +4,13 @@ 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, commaList, customElement, cycle, fillTemplate, format, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, MixinCollection, parse, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, } from '@fusion.dev/helix-core';
+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 { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../checkbox/index.js';
 import { edgeOf } from '../column/table-column.js';
+import { TableGridController } from '../grid-controller.js';
 const tracksOf = (list, wanted) => {
     const words = splitValues(list, ' ');
     const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
@@ -51,6 +52,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.defaultSelected = '';
         this.defaultSort = '';
         this.descendingLabel = 'descending';
+        this.grid = false;
         this.label = '';
         this.selectable = false;
         this.selectAllLabel = 'Select every row';
@@ -65,6 +67,15 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             label: true,
             target: () => this.partNamed('table'),
         });
+        this.gridKeys = new TableGridController(this, {
+            activate: (place, event) => this.activate(place, event),
+            columns: () => this.tableColumns.filter((column) => column.shown),
+            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.heardSort = undefined;
         this.heardSortBefore = undefined;
         this.heardSelected = undefined;
@@ -74,10 +85,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 return;
             }
             const root = origin.getRootNode();
-            const keys = this.chosen;
             if (root === this.renderRoot) {
                 event.preventDefault();
-                this.requestSelected(new Set(toggleEvery(keys, this.keyed.map(({ key }) => key))));
+                this.chooseAll();
                 return;
             }
             const found = this.keyed.find(({ row }) => row.shadowRoot === root);
@@ -85,13 +95,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 return;
             }
             event.preventDefault();
-            if (event.detail.checked) {
-                keys.add(found.key);
-            }
-            else {
-                keys.delete(found.key);
-            }
-            this.requestSelected(keys);
+            this.chooseRow(found.key, event.detail.checked);
         };
         this.handleHeadClick = (event) => {
             const path = event.composedPath();
@@ -204,9 +208,55 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             },
             event: (value) => new HelixSelectEvent({ value }),
             host: this,
-            next: [...keys].join(','),
+            next: inRowOrder(keys, this.keyed.map(({ key }) => key)).join(','),
         });
     }
+    get everyKey() {
+        return this.keyed.map(({ key }) => key);
+    }
+    chooseAll() {
+        this.requestSelected(new Set(toggleEvery(this.chosen, this.everyKey)));
+    }
+    chooseRow(key, on) {
+        const keys = this.chosen;
+        if (on) {
+            keys.add(key);
+        }
+        else {
+            keys.delete(key);
+        }
+        this.requestSelected(keys);
+    }
+    activate(place, event) {
+        const lead = this.selectable && place.column === 0;
+        if (event.key === 'F2') {
+            return false;
+        }
+        if (place.row === -1) {
+            if (lead) {
+                this.chooseAll();
+                return true;
+            }
+            const shown = this.tableColumns.filter((one) => one.shown);
+            const column = shown[place.column - (this.selectable ? 1 : 0)];
+            if (column?.canSort) {
+                this.toggleSort(column.field);
+                return true;
+            }
+            return false;
+        }
+        const row = this.arrangedRows[place.row];
+        const found = this.keyed.find((one) => one.row === row);
+        if (this.selectable && found && (event.key === ' ' || lead)) {
+            this.chooseRow(found.key, !this.chosen.has(found.key));
+            return true;
+        }
+        if (event.key === 'Enter' && row?.href) {
+            followLink(this.ownerDocument, { href: row.href, rel: row.rel, target: row.target }, event);
+            return true;
+        }
+        return false;
+    }
     markSelected() {
         const keys = this.chosen;
         for (const { key, row } of this.keyed) {
@@ -230,6 +280,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }
     markSorted() {
         const current = parse(this.sort);
+        const android = onAndroid();
         for (const column of this.tableColumns) {
             column.sorted =
                 current && column.canSort && column.field === current.field
@@ -237,6 +288,13 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                         ? 'ascending'
                         : 'descending'
                     : undefined;
+            column.sortWords =
+                android && column.sorted
+                    ? fillTemplate(this.sortedLabel, {
+                        column: column.textContent?.trim() || column.field,
+                        order: column.sorted === 'ascending' ? this.ascendingLabel : this.descendingLabel,
+                    })
+                    : '';
         }
     }
     get tableColumns() {
@@ -317,16 +375,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             }
             return;
         }
-        const head = this.renderRoot?.querySelector('slot[name="columns"]');
-        const body = this.renderRoot?.querySelector('slot:not([name])');
-        if (!head || !body) {
-            return;
-        }
-        head.assign(...this.tableColumns);
-        body.assign(...this.arrangedRows);
-        this.renderRoot
-            ?.querySelector('slot[name="heading"]')
-            ?.assign(...this.headings);
+        const columns = new Set(this.tableColumns);
+        const headings = new Set(this.headings);
+        assignSlots(this.renderRoot, [...columns, ...headings, ...this.arrangedRows], (child) => (columns.has(child) ? 'columns' : headings.has(child) ? 'heading' : ''));
     }
     alignCells() {
         if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
@@ -360,33 +411,43 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.markSorted();
         this.markSelected();
         this.nameByHeading();
+        if (this.childrenKnown) {
+            this.gridKeys.mark();
+            this.gridKeys.place();
+        }
     }
     renderSelectAll() {
         if (!this.selectable) {
             return nothing;
         }
         const every = this.childrenKnown ? this.keyed.map(({ key }) => key) : [];
-        const keys = this.chosen;
-        const count = every.filter((key) => keys.has(key)).length;
+        const { checked, indeterminate } = everyState(this.chosen, every);
         const checkbox = this.tag('checkbox');
+        const grid = this.grid;
         return html `<span part="select-all" role="columnheader"
+      tabindex=${grid ? (this.gridKeys.isStop({ column: 0, row: -1 }) ? '0' : '-1') : nothing}
       ><${checkbox}
         part="checkbox"
+        tabindex=${grid ? '-1' : nothing}
         exportparts="box: checkbox-box, control: checkbox-control, feedback: checkbox-feedback,
           field: checkbox-field, hint: checkbox-hint, label: checkbox-label, mark: checkbox-mark,
           mark-checked: checkbox-mark-checked, mark-dash: checkbox-mark-dash,
           mark-indeterminate: checkbox-mark-indeterminate"
         aria-label=${this.selectAllLabel}
-        .checked=${every.length > 0 && count === every.length}
-        .indeterminate=${count > 0 && count < every.length}
+        .checked=${checked}
+        .indeterminate=${indeterminate}
       ></${checkbox}
     ></span>`;
     }
     render() {
         const template = this.template;
-        return html `<slot name="heading"></slot><div
+        const grid = this.grid;
+        const start = grid ? html `<span part="grid-start" tabindex="-1"></span>` : nothing;
+        const end = grid ? html `<span part="grid-end" tabindex="-1"></span>` : nothing;
+        return html `<slot name="heading"></slot>${start}<div
       part="table"
-      role="table"
+      role=${grid ? 'grid' : 'table'}
+      aria-multiselectable=${grid && this.selectable ? 'true' : nothing}
       aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label || 'Table'}
       style=${template ? `--table-template: ${template}` : ''}
@@ -398,8 +459,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.handleSlotChange();
         }}
       ></slot>
-      ${this.renderStatus(this.hasRows, 'cell')}
-    </div>${this.renderLive(this.hasRows)}`;
+      ${this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')}
+    </div>${end}${this.renderLive(this.hasRows)}`;
     }
 };
 __decorate([
@@ -417,6 +478,9 @@ __decorate([
 __decorate([
     property({ attribute: 'descending-label' })
 ], HelixHeadlessTable.prototype, "descendingLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTable.prototype, "grid", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "label", void 0);

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

@@ -13,6 +13,14 @@ 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.
  *
+ * **`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
+ * link. A drag that selects text follows nothing. A row in a table is not a
+ * stop of its own, so put the same link in a cell, usually the row header,
+ * which is what the keyboard and a screen reader reach. In a `grid` table,
+ * Enter on any cell of the row follows it as well.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Row, TableRow
@@ -34,6 +42,7 @@ import '../../checkbox/index.js';
  * @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 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.
  */
 export declare class HelixHeadlessTableRow extends HelixElement {
@@ -42,6 +51,15 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * finds its columns. Not a consumer's to read or set.
      */
     readonly isTableRow = true;
+    /**
+     * The URL a press on the row follows, which makes the whole row a link.
+     * Empty, the default, leaves presses to the row's cells.
+     */
+    href: string;
+    /** The `rel` of the row's link. You set it yourself, as on an anchor. */
+    rel: string;
+    /** Where the row's link opens, such as `_blank`. */
+    target: string;
     /**
      * The key the table's `selected` lists this row by. Left empty, the row is
      * known by its place among the rows as written.
@@ -59,6 +77,17 @@ 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 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`
+     * that takes focus, and the row says whether it is selected.
+     */
+    gridCell: boolean;
+    /**
+     * @internal Whether the checkbox cell holds the grid's one tab stop, written
+     * by the table that sets `gridCell`. Not a consumer's to set.
+     */
+    selectStop: boolean;
     /** The table's rules this row holds, so the next ones replace them rather than pile up. */
     private columnRules;
     /**
@@ -69,6 +98,13 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      */
     alignCells(rules: CSSStyleSheet): void;
     protected willUpdate(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * A press on the row follows `href`, unless it landed on a link or control
+     * of the row's own, or ended a drag that selected text.
+     */
+    private readonly handleClick;
     /**
      * Asks each cell to read its role again once the cells change.
      *

package/dist/table/row/table-row.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, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, followLink, HelixElement, hostAria, pressedOwnControl, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -13,11 +13,31 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     constructor() {
         super(...arguments);
         this.isTableRow = true;
+        this.href = '';
+        this.rel = '';
+        this.target = '';
         this.value = '';
         this.selectable = false;
         this.selected = false;
         this.selectLabel = '';
+        this.gridCell = false;
+        this.selectStop = false;
         this.columnRules = undefined;
+        this.handleClick = (event) => {
+            if (this.href === '' || event.button !== 0 || event.defaultPrevented) {
+                return;
+            }
+            const cell = event
+                .composedPath()
+                .find((node) => node instanceof Element && node.parentElement === this && 'isTableCell' in node);
+            if (pressedOwnControl(event, cell ?? this)) {
+                return;
+            }
+            if (globalThis.getSelection?.()?.toString()) {
+                return;
+            }
+            followLink(this.ownerDocument, { href: this.href, rel: this.rel, target: this.target }, event);
+        };
         this.handleSlotChange = () => {
             for (const cell of this.children) {
                 if ('isTableCell' in cell) {
@@ -41,15 +61,30 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });
+        this.internals.ariaSelected = this.gridCell && this.selectable ? String(this.selected) : null;
         this.toggleState('selected', this.selectable && this.selected);
+        this.toggleState('link', this.href !== '');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
     }
     renderSelect() {
         if (!this.selectable) {
             return nothing;
         }
         const checkbox = this.tag('checkbox');
-        return html `<span part="select${this.selected ? ' select-selected' : ''}" role="cell"
+        const grid = this.gridCell;
+        return html `<span
+      part="select${this.selected ? ' select-selected' : ''}"
+      role=${grid ? 'gridcell' : 'cell'}
+      tabindex=${grid ? (this.selectStop ? '0' : '-1') : nothing}
       ><${checkbox}
+        tabindex=${grid ? '-1' : nothing}
         part="checkbox"
         exportparts="box: checkbox-box, control: checkbox-control, feedback: checkbox-feedback,
           field: checkbox-field, hint: checkbox-hint, label: checkbox-label, mark: checkbox-mark,
@@ -64,6 +99,15 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         return html `${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessTableRow.prototype, "href", void 0);
+__decorate([
+    property()
+], HelixHeadlessTableRow.prototype, "rel", void 0);
+__decorate([
+    property()
+], HelixHeadlessTableRow.prototype, "target", void 0);
 __decorate([
     property()
 ], HelixHeadlessTableRow.prototype, "value", void 0);
@@ -76,6 +120,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableRow.prototype, "selectLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "gridCell", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "selectStop", void 0);
 HelixHeadlessTableRow = __decorate([
     customElement('helix-headless-table-row')
 ], HelixHeadlessTableRow);

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

@@ -21,9 +21,11 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * between tabs either way.
  *
  * A tab with an `href` is a link, for tabs that are pages of a site. Pressing
- * it follows the link, and the arrow keys move focus without choosing, so
- * arrowing past a tab never leaves the page. Mark the tab of the page you are
- * on with `selected`, or set `active` to its value.
+ * it follows the link. Where any tab is a link, the arrow keys move focus
+ * without choosing on every tab of the list, as under `manual`, so arrowing
+ * past a tab never leaves the page and the list answers the keys one way.
+ * Mark the tab of the page you are on with `selected`, or set `active` to its
+ * value.
  *
  * Each tab says which panel it controls through `aria-controls`, set as an
  * element reference to the panel's host, where the engine has reflection.

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

@@ -22,12 +22,14 @@ export type TagSelectionMode = SelectionMode;
  * that is removed leaves `value`, which then sends `change`.
  *
  * Name the set with `label`. Each tag is named by its words alone, without
- * its remove button.
+ * its remove button. `value` takes an array of values on the property as
+ * well, as React sets `value={['Apple']}`; a press writes it back as a
+ * string.
  *
  * **Removing the last tag keeps focus in the group.** With no tags left the
  * set is a `group`, and focus moves to its `empty` part,
  * which holds the `empty` slot: put words there such as "No filters" for a
- * reader to hear.
+ * reader to hear. With nothing slotted it says `empty-label`, "No tags".
  *
  * @since 0.1.0
  * @status stable
@@ -35,7 +37,7 @@ export type TagSelectionMode = SelectionMode;
  * @documentation https://fusion.dev/helix/components/tag
  *
  * @slot - The tags, in the order they are read.
- * @slot empty - Shown in place of the tags while there are none, such as "No filters".
+ * @slot empty - Shown in place of the tags while there are none, such as "No filters". Its fallback is `empty-label`.
  *
  * @event {Event} change - Fired once a press has changed which tags are selected.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press changes which tags are selected, with the `value` it would leave. Cancelable.
@@ -44,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 words the group shows and says once its last tag is removed, where
+     * nothing is in the `empty` slot.
+     */
+    emptyLabel: string;
     /**
      * The name of the set, such as "Filters", which a screen reader announces
      * before its tags.
@@ -62,7 +69,7 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      * Set it to start with tags selected. A tag's value is its `value`, or its
      * words where it has none.
      */
-    value: string;
+    value: string | readonly string[];
     /** The tag the reader was last on, which keeps the tab stop. */
     private last;
     /**
@@ -72,6 +79,11 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      * a list of tags has a first and a last.
      */
     protected readonly keys: KeyboardNavigationController;
+    /**
+     * `value` as one written list, separated by commas, however it was set:
+     * an array of values is joined.
+     */
+    private get written();
     /** The tags the group holds, in order. */
     get tags(): HelixHeadlessTag[];
     /** The tags a key can land on, which are the ones that are not disabled. */

package/dist/tag/group/tag-group.js

@@ -4,20 +4,21 @@ 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, HelixBeforeChangeEvent, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestChange, rovingStop, slottedWords, typeaheadBy, whenHydrated, } from '@fusion.dev/helix-core';
+import { commaList, customElement, deepActiveElement, deepContains, focusItemOf, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestValue, rovingStop, slottedWords, typeaheadByWords, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTag } from '../root/tag-root.js';
 let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     constructor() {
         super(...arguments);
+        this.emptyLabel = 'No tags';
         this.label = '';
         this.value = '';
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.reachable.map((tag) => this.navigable(tag)),
             origin: 'focus',
             selects: () => false,
-            typeahead: typeaheadBy((item) => item.words),
+            typeahead: typeaheadByWords(),
             wrap: false,
         });
         this.handleKeydown = (event) => {
@@ -63,8 +64,8 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                     return;
                 }
                 const left = this.tags.map((one) => this.valueFor(one));
-                const pruned = prunedValue(this.value, this.valueFor(tag), left);
-                if (pruned !== this.value) {
+                const pruned = prunedValue(this.written, this.valueFor(tag), left);
+                if (pruned !== this.written) {
                     this.value = pruned;
                     this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
                 }
@@ -91,6 +92,14 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             }
         };
     }
+    get written() {
+        return typeof this.value === 'string'
+            ? this.value
+            : this.value
+                .map((one) => String(one).trim())
+                .filter((one) => one !== '')
+                .join(', ');
+    }
     get tags() {
         return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessTag);
     }
@@ -98,21 +107,18 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         return this.tags.filter((tag) => !tag.disabled);
     }
     navigable(tag) {
-        return {
-            contains: (node) => tag.contains(node),
+        return focusItemOf(tag, {
             disabled: tag.disabled,
-            focusItem: () => tag.focusItem(),
-            select: () => { },
-            selected: false,
+            focus: () => tag.focusItem(),
             words: tag.words,
-        };
+        });
     }
     valueFor(tag) {
         return tag.value || slottedWords(tag, ['start', '']);
     }
     sync() {
         const mode = this.selectionMode ?? 'none';
-        const chosen = new Set(commaList(this.value));
+        const chosen = new Set(commaList(this.written));
         const tags = this.tags;
         const items = tags.map((tag) => ({
             disabled: tag.disabled,
@@ -137,14 +143,8 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         if (mode === 'none' || tag.disabled) {
             return;
         }
-        requestChange({
-            apply: (value) => {
-                this.value = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next: pressedValue(mode, this.value, this.valueFor(tag)),
+        requestValue(this, pressedValue(mode, this.written, this.valueFor(tag)), (value) => {
+            this.value = value;
         });
     }
     connectedCallback() {
@@ -176,11 +176,14 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     }
     render() {
         const empty = this.empty
-            ? html `<div part="empty" tabindex="-1"><slot name="empty"></slot></div>`
+            ? html `<div part="empty" tabindex="-1"><slot name="empty">${this.emptyLabel}</slot></div>`
             : nothing;
         return html `<slot @slotchange=${this.handleSlotchange}></slot>${empty}`;
     }
 };
+__decorate([
+    property({ attribute: 'empty-label' })
+], HelixHeadlessTagGroup.prototype, "emptyLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTagGroup.prototype, "label", void 0);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, type OwnRule } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -22,12 +22,22 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * every change once the browser finds nothing wrong, as React Aria's
  * TextField `validate` does.
  *
+ * **Keyboard.** The field's own keys are the platform's, and Enter starts a
+ * new line. The clear button under `clearable` is a tab stop of its own after
+ * the field.
+ *
+ * The inner textarea is named by `label`, or by a host `aria-label`,
+ * `aria-labelledby` or `<label for>`, and is described by the hint and the
+ * message, with `aria-invalid` while a message shows. The clear button is
+ * named `clear-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases Multiline, TextArea
  * @documentation https://fusion.dev/helix/components/textarea
  *
+ * @slot clear-icon - Replaces the cross on the clear button, under `clearable`.
  * @slot end - After the text, for an icon or an action beside it.
  * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
  * @slot hint - Help under the control, for content richer than the `hint` text.
@@ -238,12 +248,14 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * nothing wrong. Return a message, or a list of them, to mark the field
      * invalid, and `true`, `null`, or nothing to accept the value.
      */
-    validate?: (value: string) => string | string[] | true | null | undefined;
+    validate?: OwnRule;
     /**
      * How the browser wraps the text, and whether the breaks are submitted with
      * it.
      */
     wrap: 'hard' | 'off' | 'soft';
+    /** The cross on the clear button, behind a seam a tier can move. */
+    protected renderClearIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {