@fusion.dev/helix-headless 0.145.0 → 0.147.0

package/dist/steps/root/steps-root.js

@@ -4,20 +4,22 @@ 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 } from '../reach.js';
+import { canReach, progressOf } from '../reach.js';
 let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(HelixElement) {
     constructor() {
         super(...arguments);
         this.label = 'Steps';
         this.linear = false;
+        this.progressLabel = '{percent}% complete';
         this.handleSelection = (event) => {
             if (event.defaultPrevented || !this.steps.includes(event.target)) {
                 return;
             }
-            if (!this.reachable(this.steps.indexOf(event.target))) {
+            const index = this.steps.indexOf(event.target);
+            if (!this.reachable(index) || !this.valid(index)) {
                 return;
             }
             this.requestActive(event.detail.value);
@@ -27,6 +29,9 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             this.lock();
         };
     }
+    get progress() {
+        return progressOf(this.steps);
+    }
     get steps() {
         return [...this.querySelectorAll(':scope > *')].filter((one) => 'current' in one);
     }
@@ -46,11 +51,20 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
             index += delta;
         }
         const target = steps[index];
-        if (!target || !this.reachable(index)) {
+        if (!target || !this.reachable(index) || !this.valid(index)) {
             return false;
         }
         return this.requestActive(target.value);
     }
+    valid(index) {
+        const from = this.steps[this.at];
+        if (!from || index <= this.at || !this.validate || from.optional) {
+            return true;
+        }
+        const valid = this.validate(from);
+        from.invalid = !valid;
+        return valid;
+    }
     reachable(index) {
         return !this.linear || canReach(this.steps, this.at, index);
     }
@@ -79,7 +93,10 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
-        this.watcher = new MutationObserver(() => this.lock());
+        this.watcher = new MutationObserver(() => {
+            this.lock();
+            this.requestUpdate();
+        });
         this.watcher.observe(this, {
             attributeFilter: ['complete', 'current', 'optional'],
             attributes: true,
@@ -92,9 +109,18 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         this.watcher?.disconnect();
         this.watcher = undefined;
     }
+    get known() {
+        return this.knownChildren.filter((one) => 'current' in one);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'list' });
+        const known = this.known;
+        this.toggleState('complete', known.length > 0 && known.every((step) => step.complete));
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     updated(changed) {
         super.updated(changed);
@@ -106,7 +132,19 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         }
     }
     render() {
-        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
+        const progress = progressOf(this.known);
+        return html `<slot @slotchange=${this.handleSlotChange}></slot>
+      <div
+        part="progress"
+        role="progressbar"
+        aria-label=${this.label}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow=${progress}
+        aria-valuetext=${fillTemplate(this.progressLabel, { percent: String(progress) })}
+        style="--steps-progress: ${progress}%"
+        hidden
+      ></div>`;
     }
 };
 __decorate([
@@ -118,6 +156,12 @@ __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);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSteps.prototype, "variant", void 0);

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

@@ -45,11 +45,14 @@ 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.
  * @csspart marker - The shape carrying the number or the check.
  * @csspart state - The words that describe a finished stage's button. Hidden.
+ *
+ * @cssstate invalid - The sequence's `validate` last answered that this stage is not valid.
  */
 export declare class HelixHeadlessStep extends HelixElement {
     /**
@@ -69,6 +72,11 @@ export declare class HelixHeadlessStep extends HelixElement {
      * Whether the stage is disabled, so the user cannot go to it.
      */
     disabled: boolean;
+    /**
+     * @internal Set by the sequence: whether its `validate` last answered that
+     * this stage is not valid. Recorded as `:state(invalid)`.
+     */
+    invalid: boolean;
     /**
      * @internal Set by a linear sequence: whether the stage is out of reach
      * until the ones before it are finished. A property, because the sequence

package/dist/steps/step/step.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, drawStatus, HelixElement, HelixSelectEvent, hostAria, StatusController, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixElement, HelixSelectEvent, hostAria, StatusController, slottedWords, } from '@fusion.dev/helix-core';
 import { check, circle, record } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -18,6 +18,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         this.completeLabel = 'Complete';
         this.current = false;
         this.disabled = false;
+        this.invalid = false;
         this.locked = false;
         this.optional = false;
         this.value = '';
@@ -40,18 +41,19 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
+        this.toggleState('invalid', this.invalid);
     }
     updated(changed) {
         super.updated(changed);
         if (changed.get('complete') === false && this.complete) {
-            const name = (this.textContent ?? '').replace(/\s+/g, ' ').trim();
+            const name = slottedWords(this, ['']);
             this.status.say(name === '' ? this.completeLabel : `${name}, ${this.completeLabel}`);
         }
     }
     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}
@@ -84,6 +86,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessStep.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessStep.prototype, "invalid", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessStep.prototype, "locked", void 0);

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

@@ -18,6 +18,16 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  * press, the same as a checkbox. The hint and the message go below the row,
  * because the switch and its label share one line.
  *
+ * **Keyboard.** The switch is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Space | Turns the switch on or off, as a native checkbox does. |
+ *
+ * The input carries `role="switch"`, so a screen reader says "on" or "off".
+ * `aria-readonly` is set under `readonly`, and `aria-invalid` and
+ * `aria-describedby` point at the message while one shows.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms

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

@@ -10,16 +10,6 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `undefined` falls back to the field.
  */
 export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
-/**
- * A dot path resolved against a row.
- *
- * Written here rather than taken from a library, because the whole of what is
- * needed is "walk the keys and stop at the first thing that is not an object".
- * Returns `undefined` for a path that does not resolve, which the table renders
- * as an empty cell: a missing key is a hole in the data and drawing `undefined`
- * into a table tells a reader the software is broken rather than the row is.
- */
-export declare const at: (row: Readonly<Record<string, unknown>>, path: string) => unknown;
 /**
  * The edge a column names, where it names one of the three.
  *
@@ -281,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

@@ -5,27 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessTableColumn_1;
-import { customElement, fillTemplate, HelixBeforeResizeEvent, HelixElement, HelixResizedEvent, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixBeforeResizeEvent, HelixElement, HelixResizedEvent, hostAria, inlineStep, isRtl, requestChange, valueAt, } from '@fusion.dev/helix-core';
 import { dotsThreeVertical } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-export const at = (row, path) => {
-    if (path === '') {
-        return undefined;
-    }
-    if (!path.includes('.')) {
-        return row[path];
-    }
-    let cursor = row;
-    for (const key of path.split('.')) {
-        if (cursor === null || typeof cursor !== 'object') {
-            return undefined;
-        }
-        cursor = cursor[key];
-    }
-    return cursor;
-};
 const EDGES = new Set(['center', 'end', 'start']);
 export const edgeOf = (align) => align && EDGES.has(align) ? align : undefined;
 let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixElement {
@@ -46,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) {
@@ -96,11 +81,11 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     }
     read(row) {
         const rendered = this.cell?.(row);
-        return rendered === undefined ? at(row, this.field) : rendered;
+        return rendered === undefined ? valueAt(row, this.field) : rendered;
     }
     order(row) {
         const compared = this.compare?.(row);
-        return compared === undefined ? at(row, this.field) : compared;
+        return compared === undefined ? valueAt(row, this.field) : compared;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -200,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"
@@ -266,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.d.ts

@@ -17,21 +17,42 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * `rowheader` for a `header` cell in a row of values. Rows are
  * `display: contents`, so their cells become items of the one grid.
  *
- * A column with `sortable` and a `field` sorts the rows by the text of its
- * cells, numbers by their value. Your markup is not reordered: the table draws
- * the rows in the sorted order. `helix-sort` asks first, so you can refuse it
- * and reorder the rows yourself.
+ * **Sorting.** A column with `sortable` and a `field` draws its heading as a
+ * button that sorts the rows by the text of its cells, numbers by their value.
+ * Your markup is not reordered: the table draws the rows in the sorted order.
+ *
+ * 1. Each press cycles the column through ascending, descending, and the
+ *    order the rows were written in, which keeps a server's own ranking
+ *    reachable.
+ * 2. `helix-sort` asks first, with `field:direction`, or empty for the written
+ *    order. Refuse it to keep the order, or to sort the rows yourself and set
+ *    `sort`.
+ * 3. `helix-sorted` follows once the order stands, and `sort` holds it.
+ * 4. The heading carries `aria-sort`, and a screen reader hears `sorted-label`
+ *    ("Sorted by Name, ascending") or `unsorted-label` from a polite region.
+ *
+ * Tab reaches each sort button, and Enter or Space presses it.
  *
  * The `heading` slot names the table: slot a heading or a line of text into
  * it, and the table is named by its words. An `aria-label` or `aria-labelledby` on the
  * host wins over it.
  *
- * `selectable` adds a column of checkboxes. Each row is known by its `value`,
- * and `selected` holds the chosen keys, comma separated, the same shape
- * `DataTable` uses. The checkbox in the heading selects every row. For a grid
- * a reader moves through with the arrow keys, with typeahead and range
- * selection, use `DataTable`. To act on one row, put a link or a button in a
- * cell.
+ * **Selecting.** `selectable` adds a column of checkboxes.
+ *
+ * 1. Each row is known by its `value`, or by its place among the rows where it
+ *    has none, and `selected` holds the chosen keys, comma separated, the same
+ *    shape `DataTable` uses. `default-selected` is where it starts.
+ * 2. A row's checkbox is named by `select-row-label` ("Select {row}") with the
+ *    words of the row's first cell. The checkbox in the heading selects every
+ *    row, and shows a dash while only some are chosen.
+ * 3. `helix-select` asks first, with every key the change would leave.
+ *    Refuse it to keep the selection. `helix-selected` follows once it stands.
+ * 4. A chosen row takes `:state(selected)`, and a screen reader hears
+ *    `selected-label` ("2 selected") from a polite region.
+ *
+ * Tab reaches each checkbox, and Space ticks it. For a grid a reader moves
+ * through with the arrow keys, with typeahead and range selection, use
+ * `DataTable`. To act on one row, put a link or a button in a cell.
  *
  * The CSS custom properties listed for this component are written by it and
  * read by the stylesheet that draws it. Do not set them. Each holds a number

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

@@ -4,12 +4,11 @@ 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, fillTemplate, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, MixinCollection, reflectElements, requestChange, splitValues, 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';
 import '../../checkbox/index.js';
-import { cycle, format, parse, sort } from '../../data-table/root/order.js';
 import { edgeOf } from '../column/table-column.js';
 const tracksOf = (list, wanted) => {
     const words = splitValues(list, ' ');
@@ -78,17 +77,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             const keys = this.chosen;
             if (root === this.renderRoot) {
                 event.preventDefault();
-                const every = this.keyed.map(({ key }) => key);
-                const all = every.length > 0 && every.every((key) => keys.has(key));
-                for (const key of every) {
-                    if (all) {
-                        keys.delete(key);
-                    }
-                    else {
-                        keys.add(key);
-                    }
-                }
-                this.requestSelected(keys);
+                this.requestSelected(new Set(toggleEvery(keys, this.keyed.map(({ key }) => key))));
                 return;
             }
             const found = this.keyed.find(({ row }) => row.shadowRoot === root);
@@ -215,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() {
@@ -241,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
@@ -248,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() {
@@ -377,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}
@@ -388,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/panel/tab-panel.d.ts

@@ -10,8 +10,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * The host is the `tabpanel` while its tab is selected, through
  * `ElementInternals`, so the tab's `aria-controls` can reach it from the tab's
- * shadow root. The box inside takes the focus, for a panel with nothing
- * focusable in it.
+ * shadow root. The box inside is a tab stop only while the panel holds nothing
+ * focusable, as the ARIA tabs pattern and React Aria's tab panel do: Tab from
+ * the tab list lands on the panel's first link or control where there is one,
+ * and on the panel itself where there is none.
  *
  * @since 0.1.0
  * @status stable
@@ -20,7 +22,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The panel's content.
  *
- * @csspart panel - The panel container, which takes the focus.
+ * @csspart panel - The panel container, which takes the focus while it holds nothing focusable.
  *
  * @cssstate selected - While its tab is the one selected.
  */
@@ -46,6 +48,17 @@ export declare class HelixHeadlessTabPanel extends HelixElement {
      * Pairs the panel with the tab of the same value.
      */
     value: string;
+    /**
+     * Whether the content holds a tab stop of its own, so the panel needs none.
+     * False on a server, which serves the panel as a stop: it cannot look.
+     */
+    private holdsStop;
+    /** Re-reads the content when it changes in a way that adds or removes a stop. */
+    private readonly watcher;
+    private readonly readStops;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *