@fusion.dev/helix-headless 0.0.0-dev

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

@@ -0,0 +1,27 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary One row of a table.
+ *
+ * @description
+ * `display: contents` in the styled tier, so the row's cells become items of
+ * the table's own grid and every column lines up across every row. The row
+ * still exists as an element, which is what a `<table>` gives away when its
+ * cells are laid out by the table algorithm.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Row, TableRow
+ * @documentation https://helix.fusion.dev/components/table
+ *
+ * @slot - The row's cells.
+ */
+export declare class HelixHeadlessTableRow extends HelixElement {
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-table-row': HelixHeadlessTableRow;
+    }
+}

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

@@ -0,0 +1,42 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { html } from 'lit';
+/**
+ * @summary One row of a table.
+ *
+ * @description
+ * `display: contents` in the styled tier, so the row's cells become items of
+ * the table's own grid and every column lines up across every row. The row
+ * still exists as an element, which is what a `<table>` gives away when its
+ * cells are laid out by the table algorithm.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Row, TableRow
+ * @documentation https://helix.fusion.dev/components/table
+ *
+ * @slot - The row's cells.
+ */
+let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        // On the host, and required: `display: contents` removes the row's box but
+        // not the row from the table's structure. Without this the table has cells
+        // and no rows, which is a broken table rather than a plain one.
+        //
+        // Set in `willUpdate`, which the server does call, unlike `connectedCallback`.
+        hostAria(this.internals, { role: 'row' });
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+HelixHeadlessTableRow = __decorate([
+    customElement('helix-headless-table-row')
+], HelixHeadlessTableRow);
+export { HelixHeadlessTableRow };

package/dist/tabs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './panel/tab-panel.js';
+export * from './root/tabs-root.js';
+export * from './tab/tab.js';

package/dist/tabs/index.js

@@ -0,0 +1,3 @@
+export * from './panel/tab-panel.js';
+export * from './root/tabs-root.js';
+export * from './tab/tab.js';

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

@@ -0,0 +1,67 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary The content shown for one tab.
+ *
+ * @description
+ * Hidden rather than unmounted when inactive, so anything typed into a panel is
+ * still there when the reader comes back to it, and so the content is in the
+ * server's markup for a crawler regardless of which tab is open.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases TabPanel
+ * @documentation https://helix.fusion.dev/components/tabs
+ *
+ * @slot - The panel's content.
+ *
+ * @csspart panel - The panel container.
+ */
+export declare class HelixHeadlessTabPanel extends HelixElement {
+    /**
+     * Pairs the panel with the tab of the same value.
+     */
+    value: string;
+    /**
+     * Whether this panel is the visible one.
+     */
+    selected: boolean;
+    /**
+     * The name of the panel, which is the text of the tab that opens it.
+     *
+     * Set by the root, which is the only thing that sees both. No attribute,
+     * because it is coordination between elements rather than anything a consumer
+     * writes: the tab already says it.
+     *
+     * A string where the markup wanted a reference. `aria-labelledby` named
+     * `tab-${value}`, an id inside the *tab's* own shadow root, and an IDREF
+     * resolves only in the tree it is written in, so the panel had no accessible
+     * name at all. An element reference cannot reach there either, a sibling
+     * shadow tree being neither the same tree nor an ancestor of it. A name is
+     * the one form that crosses, and `aria-label` on a `tabpanel` is how the
+     * pattern names one anyway.
+     */
+    label: string;
+    /**
+     * Mirrors the chosen state where a stylesheet can select on it.
+     *
+     * **A custom state and not the `selected` attribute it used to reflect.** The
+     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
+     * radio group answering for its set. Reflected, that put the element's own
+     * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
+     * which React reconciles and reports as a mismatch, and which a serialized
+     * element pasted back declares as a choice nobody made. `ElementInternals`
+     * holds it instead, where it is not in the DOM at all.
+     *
+     * Reading `selected` is unaffected and so is writing it: the attribute still
+     * seeds the property, which is what `<helix-tab-panel selected>` in a consumer's
+     * markup means. What stops is the write back. See 302 and 304.
+     */
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-tab-panel': HelixHeadlessTabPanel;
+    }
+}

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

@@ -0,0 +1,98 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { property } from 'lit/decorators.js';
+/**
+ * @summary The content shown for one tab.
+ *
+ * @description
+ * Hidden rather than unmounted when inactive, so anything typed into a panel is
+ * still there when the reader comes back to it, and so the content is in the
+ * server's markup for a crawler regardless of which tab is open.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases TabPanel
+ * @documentation https://helix.fusion.dev/components/tabs
+ *
+ * @slot - The panel's content.
+ *
+ * @csspart panel - The panel container.
+ */
+let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Pairs the panel with the tab of the same value.
+         */
+        this.value = '';
+        /**
+         * Whether this panel is the visible one.
+         */
+        this.selected = false;
+        /**
+         * The name of the panel, which is the text of the tab that opens it.
+         *
+         * Set by the root, which is the only thing that sees both. No attribute,
+         * because it is coordination between elements rather than anything a consumer
+         * writes: the tab already says it.
+         *
+         * A string where the markup wanted a reference. `aria-labelledby` named
+         * `tab-${value}`, an id inside the *tab's* own shadow root, and an IDREF
+         * resolves only in the tree it is written in, so the panel had no accessible
+         * name at all. An element reference cannot reach there either, a sibling
+         * shadow tree being neither the same tree nor an ancestor of it. A name is
+         * the one form that crosses, and `aria-label` on a `tabpanel` is how the
+         * pattern names one anyway.
+         */
+        this.label = '';
+    }
+    /**
+     * Mirrors the chosen state where a stylesheet can select on it.
+     *
+     * **A custom state and not the `selected` attribute it used to reflect.** The
+     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
+     * radio group answering for its set. Reflected, that put the element's own
+     * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
+     * which React reconciles and reports as a mismatch, and which a serialized
+     * element pasted back declares as a choice nobody made. `ElementInternals`
+     * holds it instead, where it is not in the DOM at all.
+     *
+     * Reading `selected` is unaffected and so is writing it: the attribute still
+     * seeds the property, which is what `<helix-tab-panel selected>` in a consumer's
+     * markup means. What stops is the write back. See 302 and 304.
+     */
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('selected', this.selected);
+    }
+    render() {
+        return html `<div
+      part="panel"
+      role="tabpanel"
+      aria-label=${this.label || nothing}
+      ?hidden=${!this.selected}
+      tabindex="0"
+    >
+      <slot></slot>
+    </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessTabPanel.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTabPanel.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTabPanel.prototype, "label", void 0);
+HelixHeadlessTabPanel = __decorate([
+    customElement('helix-headless-tab-panel')
+], HelixHeadlessTabPanel);
+export { HelixHeadlessTabPanel };

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

@@ -0,0 +1,123 @@
+import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
+/**
+ * @summary A row of tabs and the panel each one shows.
+ *
+ * @description
+ * Selection is coordinated by event, the same shape the accordion and the tree
+ * use: a tab dispatches `SelectionChange` and the root pairs it with the panel
+ * of the same value. Nothing registers with anything, so tabs added later work
+ * without the root being told.
+ *
+ * The tab list is a single tab stop, moved with the arrow keys through
+ * `KeyboardNavigationController`, the same one the radio and toggle groups use.
+ * Selection follows focus, which is the right default for a small set where
+ * showing a panel is cheap; a set where it is not should use `manual`.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases TabList, Segmented control
+ * @documentation https://helix.fusion.dev/components/tabs
+ *
+ * @slot - The tabs.
+ * @slot panels - The panels.
+ *
+ * @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
+ * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current tab moves, and cancelable. The only way to refuse one.
+ * @event {HelixSelectEvent} helix-select - Fired when a tab is chosen. Dispatched by the tab and listened for here, because the root is what a consumer holds. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart indicator - The mark that travels to the selected tab.
+ * @csspart panels - The panel container.
+ * @csspart tabs - The tab list.
+ */
+export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
+    protected readonly keys: KeyboardNavigationController;
+    private readonly indicator;
+    /**
+     * How the row reads.
+     *
+     * Unset is a raised pill on the selected tab with nothing behind the row,
+     * which is what a set sitting inside other chrome wants. `underlined` is a
+     * rule under the row and a thicker one under the selected tab, for a set that
+     * heads a page. `segmented` puts the pill in a framed, sunken track, which
+     * reads as one control rather than as a row.
+     *
+     * `segmented` and not `toggle`, which is what this was called. An appearance
+     * value that is another component's name says "it looks like that one", which
+     * a reader can only act on if they already know what that one looks like, and
+     * every other appearance in the library describes itself: `outlined`,
+     * `spaced`, `plain`. This component's own comments called it segmented in
+     * both places it explained itself, which is the name that was doing the work.
+     *
+     * `underlined` and not `underline` for the shape of the word rather than the
+     * sense: the two values sit in one list and read as a pair, and `segmented`
+     * is a participle. `outlined` on Accordion is the same word doing the same
+     * job. The example file was already `underlined.html`, which is what a reader
+     * meets first.
+     *
+     * Reflected and left unset by default, so the host carries nothing a
+     * consumer's server markup does not already have.
+     */
+    variant?: 'segmented' | 'underlined';
+    /**
+     * Accessible name for the tab list.
+     */
+    label: string;
+    /**
+     * Whether arrowing to a tab also selects it.
+     *
+     * Automatic is the default because showing a panel is usually cheap. Set this
+     * where it is not, so a reader arrowing past four tabs does not load four
+     * panels on the way.
+     */
+    manual: boolean;
+    /** Watches for anything that moves a tab, since none of it is a property. */
+    private observer;
+    private get tabs();
+    private get panels();
+    private readonly handleSelection;
+    /** Pushes the current value down to whichever tab and panel own it. */
+    private sync;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    /** The host's own size, which moves every tab and therefore the mark. */
+    private measure;
+    /**
+     * Watches every tab for a change of size.
+     *
+     * Called again whenever the set changes, because `tabs` reads `this.children`
+     * and filters on `instanceof`, so it is empty until the tab elements upgrade.
+     * At `firstUpdated` it frequently is empty, and observing nothing is silent.
+     *
+     * `observe` is idempotent per element, so re-running this costs nothing and
+     * needs no bookkeeping about which tabs are already watched.
+     */
+    private watch;
+    /**
+     * The set changed: pair it up, watch it, and measure it.
+     *
+     * All three, where this used to be `sync()` alone, and the missing `place()`
+     * is why an indicator could stay unplaced for the life of the page. The order
+     * of events is what does it: the host renders and measures before its tabs
+     * have upgraded, so there is no selected tab to measure and `place` refuses;
+     * the ResizeObserver's one initial callback lands in that same gap; and then
+     * the tabs upgrade, `slotchange` pairs them, nothing measures, and nothing
+     * ever will again, because the host's size never changes.
+     *
+     * Invisible in every example, because a tab strip that is only tabs is
+     * exactly as tall as its tabs, so a mark at the top of the strip is a mark on
+     * the tab. It showed up where something gives the strip a height of its own.
+     */
+    private readonly handleSlotChange;
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-tabs': HelixHeadlessTabs;
+    }
+}
+export {};

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

@@ -0,0 +1,217 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, IndicatorController, KeyboardNavigationController, MixinControllerActive, } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
+import { HelixHeadlessTab } from '../tab/tab.js';
+/**
+ * @summary A row of tabs and the panel each one shows.
+ *
+ * @description
+ * Selection is coordinated by event, the same shape the accordion and the tree
+ * use: a tab dispatches `SelectionChange` and the root pairs it with the panel
+ * of the same value. Nothing registers with anything, so tabs added later work
+ * without the root being told.
+ *
+ * The tab list is a single tab stop, moved with the arrow keys through
+ * `KeyboardNavigationController`, the same one the radio and toggle groups use.
+ * Selection follows focus, which is the right default for a small set where
+ * showing a panel is cheap; a set where it is not should use `manual`.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases TabList, Segmented control
+ * @documentation https://helix.fusion.dev/components/tabs
+ *
+ * @slot - The tabs.
+ * @slot panels - The panels.
+ *
+ * @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
+ * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the current tab moves, and cancelable. The only way to refuse one.
+ * @event {HelixSelectEvent} helix-select - Fired when a tab is chosen. Dispatched by the tab and listened for here, because the root is what a consumer holds. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart indicator - The mark that travels to the selected tab.
+ * @csspart panels - The panel container.
+ * @csspart tabs - The tab list.
+ */
+let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(HelixElement) {
+    constructor() {
+        super(...arguments);
+        /* Arrow keys, Home and End. Same controller as the radio group and the toggle
+           group, which is what the audit asked for once the indicator controller had
+           landed, and this is the traversal that had to grow it: `origin: 'focus'`
+           because `manual` lets focus and selection diverge, and `selects` because
+           `manual` is what decides whether arriving chooses.
+      
+           Roughly thirty lines of index arithmetic went, and with them the last copy
+           of a wrap that had to be right in four places. */
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.tabs,
+            origin: 'focus',
+            selects: () => !this.manual,
+        });
+        /* The mark. Same controller as the nav bar, the toggle group and the page nav. */
+        this.indicator = new IndicatorController(this, {
+            active: () => this.tabs.find((tab) => tab.selected),
+            indicator: () => this.renderRoot?.querySelector('[part="indicator"]'),
+            surface: () => this.renderRoot?.querySelector('[part="tabs"]'),
+        });
+        /**
+         * Accessible name for the tab list.
+         */
+        this.label = 'Tabs';
+        /**
+         * Whether arrowing to a tab also selects it.
+         *
+         * Automatic is the default because showing a panel is usually cheap. Set this
+         * where it is not, so a reader arrowing past four tabs does not load four
+         * panels on the way.
+         */
+        this.manual = false;
+        /* Through the mixin, so a consumer can refuse the change. It was written
+           straight from the event, which meant `helix-before-activate` was an announcement
+           nobody could answer, while `Radio.Group` two folders away could be. */
+        this.handleSelection = (event) => {
+            this.requestActive(event.detail.value);
+        };
+        /**
+         * The set changed: pair it up, watch it, and measure it.
+         *
+         * All three, where this used to be `sync()` alone, and the missing `place()`
+         * is why an indicator could stay unplaced for the life of the page. The order
+         * of events is what does it: the host renders and measures before its tabs
+         * have upgraded, so there is no selected tab to measure and `place` refuses;
+         * the ResizeObserver's one initial callback lands in that same gap; and then
+         * the tabs upgrade, `slotchange` pairs them, nothing measures, and nothing
+         * ever will again, because the host's size never changes.
+         *
+         * Invisible in every example, because a tab strip that is only tabs is
+         * exactly as tall as its tabs, so a mark at the top of the strip is a mark on
+         * the tab. It showed up where something gives the strip a height of its own.
+         */
+        this.handleSlotChange = () => {
+            this.sync();
+            this.watch();
+            this.indicator.place();
+        };
+    }
+    get tabs() {
+        return [...this.children].filter((child) => child instanceof HelixHeadlessTab);
+    }
+    get panels() {
+        return [...this.children].filter((child) => child instanceof HelixHeadlessTabPanel);
+    }
+    /** Pushes the current value down to whichever tab and panel own it. */
+    sync() {
+        const tabs = this.tabs;
+        /* Through the mixin, which also skips a disabled first tab. The
+           hand-written fallback did not, so a set opening on a disabled tab showed
+           it as current and its panel with it. */
+        const value = this.resolveActive(tabs)?.value ?? '';
+        for (const tab of tabs) {
+            tab.selected = tab.value === value;
+        }
+        /* The panel's name comes from its tab, and only this element sees both.
+           Read from the tab's light DOM, which is where the consumer wrote the
+           words, so it is whatever the reader sees on the tab. */
+        const names = new Map(tabs.map((tab) => [tab.value, (tab.textContent ?? '').trim()]));
+        for (const panel of this.panels) {
+            panel.selected = panel.value === value;
+            panel.label = names.get(panel.value) ?? '';
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('helix-select', this.handleSelection);
+        /* The observer is rebuilt here, because nothing else does it.
+         *
+         * `firstUpdated` runs once for the life of the element and
+         * `disconnectedCallback` runs every time it moves, so a framework
+         * reordering a list left this permanently dead: the observer gone, nothing
+         * to rebuild it, and the component still rendering as though it were
+         * watching. Guarded on `hasUpdated`, because the first connection happens
+         * before the first render and there is nothing to watch yet.
+         * `check:observers` holds it. */
+        if (this.hasUpdated) {
+            this.measure();
+            this.watch();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('helix-select', this.handleSelection);
+        this.observer?.disconnect();
+        this.observer = undefined;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.sync();
+        /* Straight away, and again after a frame. The first call is what places it
+           in a document that is already laid out; the second covers a first paint
+           that has not happened yet, where every tab measures zero and `place`
+           refuses rather than writing a wrong position.
+    
+           Not the frame alone: `requestAnimationFrame` does not run in a document
+           the browser is not painting, so a tab set rendered in a hidden tab or an
+           inactive pane would never place its mark at all and would slide in from
+           the origin the moment the page was looked at. */
+        this.indicator.place();
+        requestAnimationFrame(() => this.indicator.place());
+        this.measure();
+        this.watch();
+    }
+    /** The host's own size, which moves every tab and therefore the mark. */
+    measure() {
+        this.observer?.disconnect();
+        this.observer = new ResizeObserver(() => this.indicator.place());
+        this.observer.observe(this);
+    }
+    /**
+     * Watches every tab for a change of size.
+     *
+     * Called again whenever the set changes, because `tabs` reads `this.children`
+     * and filters on `instanceof`, so it is empty until the tab elements upgrade.
+     * At `firstUpdated` it frequently is empty, and observing nothing is silent.
+     *
+     * `observe` is idempotent per element, so re-running this costs nothing and
+     * needs no bookkeeping about which tabs are already watched.
+     */
+    watch() {
+        for (const tab of this.tabs) {
+            this.observer?.observe(tab);
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('active')) {
+            this.sync();
+        }
+        this.indicator.place();
+    }
+    render() {
+        return html `<div part="tabs" role="tablist" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        <span part="indicator" aria-hidden="true"></span>
+      </div>
+      <div part="panels"><slot name="panels" @slotchange=${this.handleSlotChange}></slot></div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTabs.prototype, "variant", void 0);
+__decorate([
+    property()
+], HelixHeadlessTabs.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTabs.prototype, "manual", void 0);
+HelixHeadlessTabs = __decorate([
+    customElement('helix-headless-tabs')
+], HelixHeadlessTabs);
+export { HelixHeadlessTabs };

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

@@ -0,0 +1,64 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary One tab in a tab list.
+ *
+ * @description
+ * An element rather than a slot because it owns selection and its own tab stop.
+ *
+ * Its id and the id it controls are both derived from `value`, so the pairing
+ * between a tab and its panel survives server rendering. A generated id would
+ * differ between the server's render and the client's and break the link, and
+ * `aria-controls` pointing at nothing is worse than not being there.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Tab
+ * @documentation https://helix.fusion.dev/components/tabs
+ *
+ * @slot - The tab's label.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when the tab is chosen. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart tab - The tab itself.
+ */
+export declare class HelixHeadlessTab extends HelixElement {
+    /**
+     * Identifies the tab, and pairs it with the panel of the same value.
+     */
+    value: string;
+    /**
+     * Whether this tab is the current one.
+     */
+    selected: boolean;
+    /**
+     * Whether the tab can be chosen.
+     */
+    disabled: boolean;
+    /** Moves focus to this tab, for the list's arrow keys. */
+    focusItem(): void;
+    /** Selects this tab and announces it. */
+    select(): void;
+    /**
+     * Mirrors the chosen state where a stylesheet can select on it.
+     *
+     * **A custom state and not the `selected` attribute it used to reflect.** The
+     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
+     * radio group answering for its set. Reflected, that put the element's own
+     * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
+     * which React reconciles and reports as a mismatch, and which a serialized
+     * element pasted back declares as a choice nobody made. `ElementInternals`
+     * holds it instead, where it is not in the DOM at all.
+     *
+     * Reading `selected` is unaffected and so is writing it: the attribute still
+     * seeds the property, which is what `<helix-tab selected>` in a consumer's
+     * markup means. What stops is the write back. See 302 and 304.
+     */
+    protected willUpdate(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-tab': HelixHeadlessTab;
+    }
+}