@fusion.dev/helix-headless 0.146.0 → 0.147.0

package/dist/sparkline/root/sparkline-root.js

@@ -4,10 +4,10 @@ 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 { CHART_PLOT, ChartPointerController, customElement, extent, formatNumbers, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, ChartPointerController, customElement, extent, extremesOf, formatNumbers, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import { extremesOf, readingWords } from '../readings.js';
+import { areaPath, overviewWords, readingWords, slotsOf } from '../readings.js';
 const STRIP_HEIGHT = 32;
 let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     constructor() {
@@ -16,11 +16,31 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         this.label = '';
         this.locale = '';
         this.marks = '';
+        this.overviewLabel = 'From {first} to {last}, highest {high}, lowest {low}';
         this.positionLabel = '{position} of {count}';
+        this.range = '';
         this.values = '';
         this.source = new SourceController(this);
         this.pointer = new ChartPointerController(this);
     }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label') {
+            this.requestUpdate();
+        }
+    }
+    get named() {
+        return this.getAttribute?.('aria-label') || this.label;
+    }
+    get band() {
+        const [one, two] = writtenNumbers(this.range);
+        return one === undefined || two === undefined
+            ? undefined
+            : [Math.min(one, two), Math.max(one, two)];
+    }
     willUpdate(changed) {
         if (changed.has('for')) {
             this.source.watch();
@@ -54,15 +74,11 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     }
     render() {
         const { count, series } = this.drawn();
-        const slots = Array.from({ length: count }, () => undefined);
-        for (const point of series.points) {
-            if (point.at >= 0 && point.at < count) {
-                slots[point.at] = point.value;
-            }
-        }
+        const slots = slotsOf(series.points, count);
         const points = slots.filter((value) => value !== undefined);
+        const band = this.band;
         const x = linear([0, Math.max(count - 1, 1)], [0, PLOT_WIDTH]);
-        const [low, high] = extent(points.length > 0 ? points : [0]);
+        const [low, high] = extent(points.length > 0 ? [...points, ...(band ?? [])] : [0]);
         const y = this.plot === 'bar'
             ? linear([Math.min(0, low), Math.max(0, high)], [STRIP_HEIGHT, 0])
             : linear([low, high], [STRIP_HEIGHT, 0]);
@@ -73,15 +89,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
                 .map((run) => ({ path: linePath(run, this.curve ?? 'smooth'), run }))
                 .filter((one) => one.path !== '');
         const path = runs.map((one) => one.path).join('');
-        const area = this.plot !== 'bar' && this.plot !== 'line' && path !== ''
-            ? runs
-                .map((one) => {
-                const first = one.run[0];
-                const last = one.run.at(-1);
-                return `${one.path}L${last[0]},${STRIP_HEIGHT}L${first[0]},${STRIP_HEIGHT}Z`;
-            })
-                .join('')
-            : '';
+        const area = this.plot !== 'bar' && this.plot !== 'line' && path !== '' ? areaPath(runs, STRIP_HEIGHT) : '';
         const slot = PLOT_WIDTH / Math.max(count, 1);
         const floor = y(0);
         const bars = this.plot === 'bar'
@@ -104,10 +112,15 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
             const across = this.plot === 'bar' ? index * slot + slot / 2 : x(index);
             return `inset-inline-start: ${(across / PLOT_WIDTH) * 100}%; inset-block-start: ${(y(value) / STRIP_HEIGHT) * 100}%`;
         };
-        const named = this.label !== '';
+        const name = this.named;
+        const named = name !== '';
+        const overview = named
+            ? overviewWords(this.overviewLabel, slots, (index) => this.reading(index, slots[index]).text)
+            : '';
         return html `<svg
+        aria-describedby=${overview === '' ? nothing : 'sparkline-overview'}
         aria-hidden=${named ? nothing : 'true'}
-        aria-label=${named ? this.label : nothing}
+        aria-label=${named ? name : nothing}
         data-mirror
         id=${CHART_PLOT}
         part="svg"
@@ -123,6 +136,15 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
               <stop offset="1" part="wash-end" />
             </linearGradient>
           </defs>`}
+        ${band === undefined
+            ? nothing
+            : svg `<rect
+                height=${Math.abs(y(band[0]) - y(band[1]))}
+                part="range"
+                width=${PLOT_WIDTH}
+                x="0"
+                y=${Math.min(y(band[0]), y(band[1]))}
+              />`}
         ${path === '' ? nothing : svg `<path d=${path} part="line" />`}
         ${area === '' ? nothing : svg `<path d=${area} part="area" />`}
         ${bars.map((bar) => svg `<rect
@@ -135,7 +157,18 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
       </svg>
       ${points.length < 2 || this.plot === 'bar'
             ? nothing
-            : html `<span aria-hidden="true" part="terminus" style=${end ?? nothing}></span>`}${this.renderMarks(slots, at)}${this.renderReading(slots, at)}${named && count > 0 ? this.renderLive(slots) : nothing}`;
+            : html `<span aria-hidden="true" part="terminus" style=${end ?? nothing}></span>`}${this.renderLone(points.length < 2 ? undefined : series, at)}${this.renderMarks(slots, at)}${this.renderReading(slots, at)}${named && count > 0 ? this.renderLive(slots) : nothing}${overview === ''
+            ? nothing
+            : html `<span hidden id="sparkline-overview" part="overview">${overview}</span>`}`;
+    }
+    renderLone(series, at) {
+        if (!series || this.plot === 'bar') {
+            return nothing;
+        }
+        const alone = unbroken(series).filter((run) => run.length === 1);
+        return alone.length === 0
+            ? nothing
+            : html `${alone.map(([point]) => html `<span aria-hidden="true" part="lone" style=${at(point?.at ?? 0, point?.value ?? 0)}></span>`)}`;
     }
     renderMarks(slots, at) {
         const asked = writtenList(this.marks);
@@ -184,12 +217,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "marks", void 0);
+__decorate([
+    property({ attribute: 'overview-label' })
+], HelixHeadlessSparkline.prototype, "overviewLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSparkline.prototype, "plot", void 0);
 __decorate([
     property({ attribute: 'position-label' })
 ], HelixHeadlessSparkline.prototype, "positionLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessSparkline.prototype, "range", void 0);
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "values", void 0);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -43,7 +43,7 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
      */
     readonly isSpeedDialItem = true;
     /** Puts focus on the control inside the item. */
-    focus(): void;
+    focus(options?: FocusOptions): void;
     /**
      * Moves focus to the action. Part of `NavigableItem`, which the shared
      * keyboard controller uses for the arrow keys.

package/dist/speed-dial/item/speed-dial-item.js

@@ -17,8 +17,8 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
             this.choose();
         };
     }
-    focus() {
-        this.partNamed('item')?.focus();
+    focus(options) {
+        this.partNamed('item')?.focus(options);
     }
     focusItem() {
         this.focus();

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -76,6 +76,12 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
     private get trigger();
     /** The actions, which are this element's own rows and nothing else slotted. */
     private get items();
+    /**
+     * Puts focus on the trigger, the slotted one or the button drawn in its
+     * place, as a `focus()` on a native control would. The host itself takes no
+     * focus, so a page focusing it after a dialog closes landed nowhere.
+     */
+    focus(options?: FocusOptions): void;
     /** Shuts it and puts the reader back on the trigger. */
     private close;
     private readonly handleTriggerClick;

package/dist/speed-dial/root/speed-dial-root.js

@@ -66,11 +66,19 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         const slot = this.renderRoot?.querySelector('slot:not([name])');
         return (slot?.assignedElements?.() ?? []).filter((one) => one.isSpeedDialItem === true);
     }
+    focus(options) {
+        const trigger = this.trigger;
+        if (trigger === this) {
+            super.focus(options);
+            return;
+        }
+        trigger.focus(options);
+    }
     close() {
         if (!this.requestOpen(false)) {
             return;
         }
-        this.trigger.focus();
+        this.focus();
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -42,6 +42,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {HelixBeforeResizeEvent} helix-before-resize - Fired before the divider settles, and only when the gesture moved it. A press that moved nothing, a drag that came back, an arrow key with no room left, and a corner that moved only the other divider do not fire it. Cancelable: canceling it leaves the position to you and keeps the rest of the gesture, so a collapse the gesture reached still fires `helix-before-collapse`, which you can also cancel. A dragged divider stays where it was dropped until you set your own `position`.
  * @event {HelixCollapseEvent} helix-collapse - Fired after a pane shuts or reopens, with the side that is shut, or empty where both are open.
  * @event {HelixResizedEvent} helix-resized - Fired after the divider settles somewhere new, with the new position.
+ * @event {Event} input - Fired each time a drag moves the divider, before it settles, as a range input does while it is dragged. Read `position` for where it is now.
  *
  * @csspart corner - The handle where two dividers cross, added on the client.
  * @csspart end - The box that holds the second pane.
@@ -50,6 +51,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssproperty --splitter-corner-at - Where a nested splitter crosses this one, as a percentage.
  * @cssproperty --splitter-position - Where the divider sits, as a percentage of the box.
+ *
+ * @cssstate dragging - While the pointer or a corner holds the divider.
  */
 export declare class HelixHeadlessSplitter extends HelixElement {
     /**

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

@@ -127,6 +127,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         this.positionState = wanted;
         this.collapsedState = 'none';
         this.requestUpdate('position', previous);
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
     }
     settle(next) {
         const wanted = this.clamp(next);
@@ -471,6 +472,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('dragging', this.dragging);
     }
     render() {
         const position = this.showing;

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

@@ -31,7 +31,9 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * its stages that are `complete`. The `progress` part carries it as a
  * `progressbar` and as `--steps-progress`, and is hidden until a stylesheet
  * gives it a `display`, so a bar of your own costs nothing until you draw it.
- * The sequence is `:state(complete)` once every stage is.
+ * A screen reader hears it as `progress-label` says, "33% complete" unless
+ * set, as Ark UI's steps write it. The sequence is `:state(complete)` once
+ * every stage is.
  *
  * The sequence is a list named by `label`, and each step a list item. The
  * current stage's button says `aria-current="step"`, and a finished stage's
@@ -82,6 +84,11 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * catches people out.
      */
     orientation?: 'vertical';
+    /**
+     * What the `progress` part says to a screen reader, with `{percent}` filled
+     * in with `progress`.
+     */
+    progressLabel: string;
     /**
      * A function that answers whether a stage is valid, asked about the stage a
      * reader is on before they move forward from it. Return `false` to keep them

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

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

@@ -45,6 +45,7 @@ import '../../button/index.js';
  * @csspart label - The step's name, which is a control.
  * @csspart label-button - The button inside the label.
  * @csspart label-live - The live region inside that button, rendered only from the first time the button is pending.
+ * @csspart label-spinner - The ring that button turns while it is pending.
  * @csspart label-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart live - The live region that says a stage was completed, rendered from the first time one is.
  * @csspart mark - The glyph inside the marker: a tick, a dot, or an empty ring.

package/dist/steps/step/step.js

@@ -53,7 +53,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     renderLabel() {
         return html `<${this.tag('button')}
       part="label"
-      exportparts="button: label-button, live: label-live, text: label-text"
+      exportparts="button: label-button, live: label-live, spinner: label-spinner, text: label-text"
       emphasis="ghost"
       aria-current=${this.current ? 'step' : nothing}
       aria-describedby=${this.complete ? 'state' : nothing}

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

@@ -271,6 +271,12 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * table that sets `gridCell`. Not a consumer's to set.
      */
     tabStop: boolean;
+    /**
+     * @internal The sort said in words on the sort button, written by the table
+     * on Android, where TalkBack reads no `aria-sort`. Empty elsewhere. Not a
+     * consumer's to set: the table's `sorted-label` holds the words.
+     */
+    sortWords: string;
     /** How wide the heading drew, for the separator to report. */
     private drawn;
     /** Where a drag of the separator started, while one is running. */

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

@@ -30,6 +30,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         this.movable = false;
         this.gridCell = false;
         this.tabStop = false;
+        this.sortWords = '';
         this.drawn = 0;
         this.handleResizeStart = (event) => {
             if (event.button !== 0) {
@@ -184,7 +185,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             </svg>
           </button>`
             : nothing}${this.canSort
-            ? html `<button part="sort" type="button" tabindex=${control}><slot></slot></button>`
+            ? html `<button part="sort" type="button" tabindex=${control} aria-description=${this.sortWords || nothing}><slot></slot></button>`
             : html `<slot></slot>`}${this.resizable
             ? html `<span
             part="resizer"
@@ -250,6 +251,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "tabStop", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableColumn.prototype, "sortWords", void 0);
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "drawn", void 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, 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, commaList, customElement, cycle, everyState, fillTemplate, 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';
@@ -204,7 +204,7 @@ 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(','),
         });
     }
     markSelected() {
@@ -230,6 +230,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 +238,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() {
@@ -366,8 +374,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             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');
         return html `<span part="select-all" role="columnheader"
       ><${checkbox}
@@ -377,8 +384,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
           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>`;
     }

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

@@ -13,6 +13,13 @@ 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.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Row, TableRow
@@ -34,6 +41,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 +50,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.
@@ -69,6 +86,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,20 +4,38 @@ 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 } 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';
+const PRESSABLE = 'a[href], button, input, label, select, summary, textarea, [tabindex]';
 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.columnRules = undefined;
+        this.handleClick = (event) => {
+            if (this.href === '' || event.button !== 0 || event.defaultPrevented) {
+                return;
+            }
+            const path = event.composedPath();
+            const inner = path.slice(0, Math.max(0, path.indexOf(this)));
+            if (inner.some((node) => node instanceof Element && node.matches(PRESSABLE))) {
+                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) {
@@ -42,6 +60,15 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });
         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) {
@@ -64,6 +91,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);

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. */