@fusion.dev/helix-headless 0.144.0 → 0.145.0

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

@@ -4,9 +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, customElement, fillTemplate, HelixElement, HelixSortEvent, MixinCollection, requestChange, splitValues, } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { AriaForwardController, commaList, customElement, fillTemplate, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, MixinCollection, reflectElements, requestChange, splitValues, 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) => {
@@ -47,17 +49,61 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         super(...arguments);
         this.ascendingLabel = 'ascending';
         this.columns = '';
+        this.defaultSelected = '';
         this.defaultSort = '';
         this.descendingLabel = 'descending';
         this.label = '';
+        this.selectable = false;
+        this.selectAllLabel = 'Select every row';
+        this.selectedLabel = '{count} selected';
+        this.selectRowLabel = 'Select {row}';
         this.sortedLabel = 'Sorted by {column}, {order}';
         this.unsortedLabel = 'Not sorted';
         this.sortState = undefined;
+        this.selectedState = undefined;
+        this.headed = false;
         this.aria = new AriaForwardController(this, {
             label: true,
             target: () => this.partNamed('table'),
         });
         this.heardSort = undefined;
+        this.heardSortBefore = undefined;
+        this.heardSelected = undefined;
+        this.handleToggle = (event) => {
+            const origin = event.composedPath()[0];
+            if (!(origin instanceof Element) || origin.getAttribute('part') !== 'checkbox') {
+                return;
+            }
+            const root = origin.getRootNode();
+            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);
+                return;
+            }
+            const found = this.keyed.find(({ row }) => row.shadowRoot === root);
+            if (!found) {
+                return;
+            }
+            event.preventDefault();
+            if (event.detail.checked) {
+                keys.add(found.key);
+            }
+            else {
+                keys.delete(found.key);
+            }
+            this.requestSelected(keys);
+        };
         this.handleHeadClick = (event) => {
             const path = event.composedPath();
             if (!path.some((node) => node instanceof Element && node.getAttribute('part') === 'sort')) {
@@ -76,6 +122,14 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.alignment = undefined;
         this.aligned = '';
     }
+    get selected() {
+        return this.selectedState ?? this.defaultSelected;
+    }
+    set selected(next) {
+        const previous = this.selected;
+        this.selectedState = next;
+        this.requestUpdate('selected', previous);
+    }
     get sort() {
         return this.sortState ?? this.defaultSort;
     }
@@ -90,6 +144,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 const previous = this.sort;
                 this.sortState = value;
                 this.requestUpdate('sort', previous);
+                this.dispatchEvent(new HelixSortedEvent({ value }));
             },
             event: (value) => new HelixSortEvent({ value }),
             host: this,
@@ -133,8 +188,57 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 : 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 });
+        }
+        this.heardSortBefore = current;
+        this.heardSelected = selected;
         return said;
     }
+    get keyed() {
+        return this.slotted.map((row, index) => ({
+            key: row.value || String(index),
+            row: row,
+        }));
+    }
+    get chosen() {
+        return new Set(commaList(this.selected));
+    }
+    requestSelected(keys) {
+        return requestChange({
+            apply: (value) => {
+                const previous = this.selected;
+                this.selectedState = value;
+                this.requestUpdate('selected', previous);
+                this.dispatchEvent(new HelixSelectedEvent({ value }));
+            },
+            event: (value) => new HelixSelectEvent({ value }),
+            host: this,
+            next: [...keys].join(','),
+        });
+    }
+    markSelected() {
+        const keys = this.chosen;
+        for (const { key, row } of this.keyed) {
+            if (!row.isTableRow) {
+                continue;
+            }
+            const label = fillTemplate(this.selectRowLabel, { row: textOf(row.children[0]) || key });
+            whenHydrated(row, () => {
+                row.selectable = this.selectable;
+                row.selected = keys.has(key);
+                row.selectLabel = label;
+            });
+        }
+    }
+    nameByHeading() {
+        const named = this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby');
+        this.headed = reflectElements(this.partNamed('table'), 'ariaLabelledByElements', named ? [] : this.headings, this.headed);
+    }
+    get headings() {
+        return [...(this.children ?? [])].filter((child) => child.getAttribute('slot') === 'heading');
+    }
     markSorted() {
         const current = parse(this.sort);
         for (const column of this.tableColumns) {
@@ -150,6 +254,10 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         return this.knownChildren.filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
     }
     get template() {
+        const tracks = this.tracks;
+        return this.selectable && tracks ? `max-content ${tracks}` : tracks;
+    }
+    get tracks() {
         const declared = this.tableColumns;
         if (declared.length === 0) {
             return this.columns;
@@ -187,17 +295,23 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 : 'max-content';
         });
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     connectedCallback() {
         super.connectedCallback();
         this.watcher = new MutationObserver(() => this.requestUpdate());
         this.watcher.observe(this, { characterData: true, childList: true, subtree: true });
         this.addEventListener('click', this.handleHeadClick);
+        this.addEventListener('helix-before-toggle', this.handleToggle);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.watcher?.disconnect();
         this.watcher = undefined;
         this.removeEventListener('click', this.handleHeadClick);
+        this.removeEventListener('helix-before-toggle', this.handleToggle);
     }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
@@ -205,7 +319,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }; }
     get slotted() {
         const columns = new Set(this.tableColumns);
-        return [...(this.children ?? [])].filter((child) => !columns.has(child));
+        return [...(this.children ?? [])].filter((child) => !columns.has(child) && child.getAttribute('slot') !== 'heading');
     }
     assign() {
         if (this.assignsByName) {
@@ -221,6 +335,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         }
         head.assign(...this.tableColumns);
         body.assign(...this.arrangedRows);
+        this.renderRoot
+            ?.querySelector('slot[name="heading"]')
+            ?.assign(...this.headings);
     }
     alignCells() {
         if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
@@ -252,17 +369,40 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.assign();
         this.alignCells();
         this.markSorted();
+        this.markSelected();
+        this.nameByHeading();
+    }
+    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 checkbox = this.tag('checkbox');
+        return html `<span part="select-all" role="columnheader"
+      ><${checkbox}
+        part="checkbox"
+        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}
+      ></${checkbox}
+    ></span>`;
     }
     render() {
         const template = this.template;
-        return html `<div
+        return html `<slot name="heading"></slot><div
       part="table"
       role="table"
       aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label || 'Table'}
       style=${template ? `--table-template: ${template}` : ''}
     >
-      <div part="head" role="row"><slot name="columns"></slot></div>
+      <div part="head" role="row">${this.renderSelectAll()}<slot name="columns"></slot></div>
       <slot
         @slotchange=${(event) => {
             this.countRows(event);
@@ -279,6 +419,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: 'default-selected' })
+], HelixHeadlessTable.prototype, "defaultSelected", void 0);
 __decorate([
     property({ attribute: 'default-sort' })
 ], HelixHeadlessTable.prototype, "defaultSort", void 0);
@@ -288,6 +431,21 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTable.prototype, "selectable", void 0);
+__decorate([
+    property({ attribute: 'select-all-label' })
+], HelixHeadlessTable.prototype, "selectAllLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessTable.prototype, "selected", null);
+__decorate([
+    property({ attribute: 'selected-label' })
+], HelixHeadlessTable.prototype, "selectedLabel", void 0);
+__decorate([
+    property({ attribute: 'select-row-label' })
+], HelixHeadlessTable.prototype, "selectRowLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "sort", null);
@@ -300,6 +458,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTable.prototype, "sortState", void 0);
+__decorate([
+    state()
+], HelixHeadlessTable.prototype, "selectedState", void 0);
 HelixHeadlessTable = __decorate([
     customElement('helix-headless-table')
 ], HelixHeadlessTable);

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import '../../checkbox/index.js';
 /**
  * @summary One row of a table.
  *
@@ -9,12 +10,31 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * across rows. The row still exists as an element, so you can style it, hide
  * it, or make it interactive.
  *
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Row, TableRow
  * @documentation https://fusion.dev/helix/components/table
  *
  * @slot - The row's cells.
+ *
+ * @csspart checkbox - The row's checkbox, in a `selectable` table.
+ * @csspart checkbox-box - The box drawn for the checkbox's input.
+ * @csspart checkbox-control - The checkbox's input.
+ * @csspart checkbox-feedback - Forwarded from the checkbox. Not shown in the table.
+ * @csspart checkbox-field - The row that holds the checkbox's box.
+ * @csspart checkbox-hint - Forwarded from the checkbox. Not shown in the table.
+ * @csspart checkbox-label - Forwarded from the checkbox. The label is read by screen readers only.
+ * @csspart checkbox-mark - The check mark.
+ * @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 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 selected - While the row is selected, in a `selectable` table.
  */
 export declare class HelixHeadlessTableRow extends HelixElement {
     /**
@@ -22,6 +42,23 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * finds its columns. Not a consumer's to read or set.
      */
     readonly isTableRow = true;
+    /**
+     * The key the table's `selected` lists this row by. Left empty, the row is
+     * known by its place among the rows as written.
+     */
+    value: string;
+    /**
+     * @internal Whether the table this row sits in is `selectable`, written by
+     * that table. Not a consumer's to set: the selection is the table's.
+     */
+    selectable: boolean;
+    /**
+     * @internal Whether the row is selected, written by the table that owns the
+     * selection. Not a consumer's to set: write the table's `selected`.
+     */
+    selected: boolean;
+    /** @internal The name of the row's checkbox, written by the table. Not a consumer's to set. */
+    selectLabel: string;
     /** The table's rules this row holds, so the next ones replace them rather than pile up. */
     private columnRules;
     /**
@@ -39,6 +76,15 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * upgrades while its row is still being parsed has no value beside it yet.
      */
     private readonly handleSlotChange;
+    /**
+     * The checkbox cell, in a `selectable` table.
+     *
+     * A cell of the row's own, before the consumer's cells, so the table's grid
+     * gives it the first track. The table hears its `helix-before-toggle`,
+     * refuses it and asks for the new selection, so the box shows only what the
+     * table's `selected` says.
+     */
+    protected renderSelect(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -5,11 +5,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+import '../../checkbox/index.js';
 let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     constructor() {
         super(...arguments);
         this.isTableRow = true;
+        this.value = '';
+        this.selectable = false;
+        this.selected = false;
+        this.selectLabel = '';
         this.columnRules = undefined;
         this.handleSlotChange = () => {
             for (const cell of this.children) {
@@ -34,11 +41,41 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });
+        this.toggleState('selected', this.selectable && this.selected);
+    }
+    renderSelect() {
+        if (!this.selectable) {
+            return nothing;
+        }
+        const checkbox = this.tag('checkbox');
+        return html `<span part="select${this.selected ? ' select-selected' : ''}" role="cell"
+      ><${checkbox}
+        part="checkbox"
+        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.selectLabel}
+        .checked=${this.selected}
+      ></${checkbox}
+    ></span>`;
     }
     render() {
-        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
+        return html `${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessTableRow.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "selectable", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "selected", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableRow.prototype, "selectLabel", void 0);
 HelixHeadlessTableRow = __decorate([
     customElement('helix-headless-table-row')
 ], HelixHeadlessTableRow);

package/dist/tabs/panel/tab-panel.d.ts

@@ -8,6 +8,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * still there when the person comes back, and the content of every panel is in
  * the server-rendered markup for crawlers, whichever tab is open.
  *
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases TabPanel
@@ -15,7 +20,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The panel's content.
  *
- * @csspart panel - The panel container.
+ * @csspart panel - The panel container, which takes the focus.
  *
  * @cssstate selected - While its tab is the one selected.
  */
@@ -28,10 +33,9 @@ export declare class HelixHeadlessTabPanel extends HelixElement {
      * writes: the tab already says it.
      *
      * A string and not a reference: an IDREF resolves only in the tree it is
-     * written in, and an element reference cannot reach a sibling shadow tree
-     * either, so `aria-labelledby` to the tab's own id leaves the panel with no
-     * accessible name. `aria-label` on a `tabpanel` is how the pattern names one
-     * anyway.
+     * written in, and the tab's control is inside the tab's shadow root, which no
+     * reference from the light DOM can reach. `aria-label` on a `tabpanel` is how
+     * the pattern names one anyway.
      */
     label: string;
     /**

package/dist/tabs/panel/tab-panel.js

@@ -4,8 +4,8 @@ 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 } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     constructor() {
@@ -17,12 +17,11 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
+        hostAria(this.internals, { label: this.label, role: this.selected ? 'tabpanel' : '' });
     }
     render() {
         return html `<div
       part="panel"
-      role="tabpanel"
-      aria-label=${this.label || nothing}
       ?hidden=${!this.selected}
       tabindex="0"
     >

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

@@ -16,6 +16,18 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * panel is cheap. Set `manual` when showing a panel is expensive, so focus can
  * move without selecting.
  *
+ * `orientation="vertical"` sets the tabs in a column beside the panels, and the
+ * tab list says `aria-orientation="vertical"`. The arrow keys of both axes move
+ * 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.
+ *
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -29,7 +41,10 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the active tab changes, and cancelable. Canceling it is the only way to block a change.
  * @event {HelixSelectEvent} helix-select - Fired when a tab is chosen. The tab sends it and the root handles it, so you can listen on the root. Cancelable: canceling it stops the change and leaves the decision to you.
  *
- * @csspart indicator - The marker that moves to the selected tab.
+ * @csspart indicator - The marker that moves to the selected tab. It carries the selected tab's
+ *   place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and
+ *   `--indicator-block-size`, and `data-placed` once it has been placed, for a mark you draw
+ *   and animate yourself.
  * @csspart panels - The panel container.
  * @csspart tabs - The tab list.
  */
@@ -54,6 +69,13 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      * panels on the way.
      */
     manual: boolean;
+    /**
+     * The direction the tabs run. `vertical` sets them in a column beside the
+     * panels and tells a screen reader the list is vertical.
+     *
+     * Optional, so the resting row writes no attribute onto the host.
+     */
+    orientation?: 'horizontal' | 'vertical';
     /**
      * How the row of tabs is drawn.
      *
@@ -80,6 +102,8 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      */
     variant?: 'segmented' | 'underlined';
     private get tabs();
+    /** Whether any tab is a link, so arriving on one chooses nothing. */
+    private get linked();
     private get panels();
     private readonly handleSelection;
     /** Pushes the current value down to whichever tab and panel own it. */

package/dist/tabs/root/tabs-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { AriaForwardController, customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
 import { HelixHeadlessTab } from '../tab/tab.js';
@@ -15,7 +15,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.tabs,
             origin: 'focus',
-            selects: () => !this.manual,
+            selects: () => !this.manual && !this.linked,
         });
         this.indicator = new IndicatorController(this, {
             active: () => this.tabs.find((tab) => tab.selected),
@@ -43,6 +43,9 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     get tabs() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessTab);
     }
+    get linked() {
+        return this.tabs.some((tab) => (tab.href ?? '') !== '');
+    }
     get panels() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessTabPanel);
     }
@@ -57,6 +60,13 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             });
         }
         const names = new Map(tabs.map((tab) => [tab.value, (tab.textContent ?? '').trim()]));
+        const panels = new Map(this.panels.map((panel) => [panel.value, panel]));
+        for (const tab of tabs) {
+            const panel = panels.get(tab.value);
+            whenHydrated(tab, () => {
+                tab.controls = panel;
+            });
+        }
         for (const panel of this.panels) {
             const selected = panel.value === value;
             const label = names.get(panel.value) ?? '';
@@ -88,7 +98,12 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         this.indicator.place();
     }
     render() {
-        return html `<div part="tabs" role="tablist" aria-label=${this.label}>
+        return html `<div
+        part="tabs"
+        role="tablist"
+        aria-label=${this.label}
+        aria-orientation=${this.orientation === 'vertical' ? 'vertical' : nothing}
+      >
         <slot @slotchange=${this.handleSlotChange}></slot>
         <span part="indicator" aria-hidden="true"></span>
       </div>
@@ -101,6 +116,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTabs.prototype, "manual", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTabs.prototype, "orientation", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTabs.prototype, "variant", void 0);

package/dist/tabs/tab/tab.d.ts

@@ -7,10 +7,10 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  * @description
  * A tab is an element, because it manages selection and its own tab stop.
  *
- * Its id and the id it controls both come from `value`, so the link between a
- * tab and its panel works with server rendering. A generated id would differ
- * between the server render and the client render, and `aria-controls` would
- * point at nothing.
+ * With an `href`, the tab is a link: `role="tab"` on an `<a>`, which a press,
+ * Enter and the browser's own link gestures follow. `helix-select` is sent
+ * first, and canceling it keeps the browser from following, so a client-side
+ * router follows it instead.
  *
  * @since 0.1.0
  * @status stable
@@ -27,6 +27,38 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  */
 export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
     protected itemPart: string;
+    /**
+     * @internal The panel this tab shows, written by the tab set. A property,
+     * because it is an element, and it reaches the tab's `aria-controls` as an
+     * element reference: the panel is in the light DOM, which a reference from
+     * inside this shadow root can reach.
+     */
+    controls: Element | undefined;
+    /**
+     * The URL the tab links to. Setting it renders the tab as a link, for a set
+     * of tabs that are pages of a site.
+     */
+    href?: string;
+    /**
+     * The link's `rel`, for a tab with an `href`.
+     */
+    rel?: string;
+    /**
+     * Where the link opens, such as `_blank`, for a tab with an `href`.
+     */
+    target?: string;
+    /**
+     * Chooses the tab before the browser follows its link, and keeps the browser
+     * from following where the choice was refused. A press with a modifier, or
+     * with a button other than the main one, opens the link where the browser
+     * opens it and chooses nothing here.
+     */
+    private readonly handleLinkClick;
+    /**
+     * Points the control's `aria-controls` at the panel, where the engine can.
+     * The control is this tab's own, so the reference is always its to clear.
+     */
+    protected updated(changed: PropertyValues): void;
     /**
      * Asks for the render that follows a hydration, so the stop stops being every
      * tab's.