@aceshooting/lyra-ui 1.2.0 → 2.0.0

package/dist/components/table/table.js

@@ -16,7 +16,30 @@ import '../empty/empty.js';
  *  actions-column button). Clicks/keydowns landing on one of these — or
  *  bubbling up through one — must not be re-interpreted as row/column
  *  activation by the table's own delegated listeners. */
-const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [role="button"]';
+const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [role="button"], [role="combobox"], [role="listbox"], [role="slider"]';
+/** Encodes a row/column identity key for use as a Map key or a DOM
+ *  `data-row-key` attribute value, preserving the distinction between a
+ *  numeric key and a string key that happen to stringify the same way
+ *  (`1` vs `"1"`) -- a bare `String(key)` would silently collide the two. */
+function encodeKey(key) {
+    return `${typeof key}:${key}`;
+}
+/** Whether `target` (or an ancestor up to the delegated listener's own
+ *  `<table>`, exclusive) is a custom element — i.e. any tag containing a
+ *  hyphen, the one universal rule every custom element name must follow —
+ *  which is never itself matched by INTERACTIVE_SELECTOR's plain-HTML
+ *  selector list but should still own its own clicks/keydowns (e.g. a
+ *  `<lyra-select>`/`<lyra-combobox>` rendered by a `cell()` template)
+ *  instead of being re-interpreted as row/column activation. */
+function closestInteractive(target, boundary) {
+    let el = target;
+    while (el && el !== boundary) {
+        if (el.matches(INTERACTIVE_SELECTOR) || el.tagName.includes('-'))
+            return el;
+        el = el.parentElement;
+    }
+    return null;
+}
 /**
  * `<lyra-table>` — a presentational, sort/select-aware data table.
  *
@@ -39,14 +62,23 @@ const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [role="b
  *
  * `columns[].priority` ('medium' | 'low') hides that column under
  * `[part='base']`'s `@container` breakpoints; `[part='reveal-columns-button']`
- * (rendered whenever any column has a priority) forces them all back into
- * view. `columns[].sticky` pins a column's header/cells to the inline-start
- * edge while the table scrolls horizontally.
+ * forces them all back into view. Rather than a *static* check of whether any
+ * column merely declares a `priority`, the button (and the public
+ * `columnsHidden` property, see below) reflects whether a `priority` column
+ * is *actually* hidden right now — measured via `ResizeObserver` on
+ * `[part='base']` plus a post-render DOM check — or `showAllColumns`
+ * force-visible mode is currently active (so there's still a way to toggle
+ * it back off). `columns[].sticky` pins a column's header/cells to the
+ * inline-start edge while the table scrolls horizontally.
  *
  * @customElement lyra-table
  * @event lyra-sort - A sortable header was activated. `detail: { key }`.
  * @event lyra-row-click - A row was activated. `detail: { row }`.
  * @event lyra-load-more - The "load more" control was activated.
+ * @event lyra-columns-hidden-change - `columnsHidden` actually changed value
+ *   (a `priority` column just became hidden/un-hidden by the `@container`
+ *   rules, or `showAllColumns` force-visible mode was toggled while a
+ *   `priority` column was hidden). `detail: { hidden: boolean }`.
  * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon, reveal-columns-button
  */
 export class LyraTable extends LyraElement {
@@ -65,6 +97,16 @@ export class LyraTable extends LyraElement {
         this.noColumnsDescription = '';
         this.revealColumnsLabel = 'Show all columns';
         this.hideColumnsLabel = 'Show fewer columns';
+        /** Whether a `priority` column is *actually* hidden right now by
+         *  table.styles.ts's `@container` rules, or `showAllColumns` force-visible
+         *  mode is currently active — the same computed value that gates whether
+         *  `[part='reveal-columns-button']` renders at all (see `render()`), kept
+         *  in sync by `recomputeColumnsHidden()`. Computed/read-only by
+         *  convention: consumers may read it (and listen for
+         *  `lyra-columns-hidden-change`), but setting it directly has no lasting
+         *  effect, since it's recomputed on the very next render or
+         *  `[part='base']` resize. */
+        this.columnsHidden = false;
         /** Forces `priority`-hidden columns back into view, overriding the
          *  `@container` hide rules in table.styles.ts. Toggled by
          *  `[part='reveal-columns-button']`. */
@@ -84,12 +126,18 @@ export class LyraTable extends LyraElement {
         };
         this.onTableClick = (e) => {
             const target = e.target;
-            // A cell()-rendered button/link/input etc. owns its own click — don't let
-            // the delegated row/column resolution below re-interpret it as row or
-            // header activation.
-            if (target.closest(INTERACTIVE_SELECTOR))
+            const table = e.currentTarget;
+            // A cell()-rendered button/link/input/custom-element etc. owns its own
+            // click — don't let the delegated row/column resolution below
+            // re-interpret it as row or header activation.
+            if (closestInteractive(target, table))
                 return;
-            const th = target.closest('[data-col-key]');
+            // Scoped to `th` — body `<td>`s also carry `data-col-key` now (for the
+            // sticky-offset measurement pass), so an unscoped `[data-col-key]` would
+            // match the clicked cell itself and misroute a plain cell click to
+            // column-sort activation instead of falling through to the row check
+            // below.
+            const th = target.closest('th[data-col-key]');
             if (th)
                 return this.activateColumn(th.dataset.colKey);
             const tr = target.closest('[data-row-key]');
@@ -98,12 +146,14 @@ export class LyraTable extends LyraElement {
         };
         this.onTableKeyDown = (e) => {
             const target = e.target;
+            const table = e.currentTarget;
             // Same guard as onTableClick — also skips the table's own
             // preventDefault(), so a focused nested control keeps its native/own
             // Enter or Space activation instead of having it swallowed.
-            if (target.closest(INTERACTIVE_SELECTOR))
+            if (closestInteractive(target, table))
                 return;
-            const th = target.closest('[data-col-key]');
+            // Same th-scoping rationale as onTableClick above.
+            const th = target.closest('th[data-col-key]');
             if (th)
                 return this.onHeaderKeyDown(e, th);
             const tr = target.closest('[data-row-key]');
@@ -112,6 +162,50 @@ export class LyraTable extends LyraElement {
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(() => this.recomputeColumnsHidden());
+        // A reconnect re-creates the observer above but the shadow root content
+        // survives across disconnect/reconnect (Lit doesn't tear down the shadow
+        // root) — re-observe [part='base'] here if it already exists from before
+        // the disconnect. On the very first mount connectedCallback() fires
+        // *before* Lit's first render, so [part='base'] doesn't exist yet and
+        // this is a no-op; updated() below (which always runs after render, first
+        // paint included) covers that case instead.
+        const base = this.renderRoot?.querySelector('[part="base"]');
+        if (base)
+            this.observeBase(base);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+        this.observedBase = undefined;
+    }
+    observeBase(base) {
+        if (this.observedBase === base)
+            return;
+        if (this.observedBase)
+            this.resizeObserver?.unobserve(this.observedBase);
+        this.resizeObserver?.observe(base);
+        this.observedBase = base;
+    }
+    /** Recomputes `columnsHidden` from the live DOM (mirrors `visibleHeaders()`'s
+     *  own `offsetParent !== null` technique for detecting `@container`-hidden
+     *  cells) and dispatches `lyra-columns-hidden-change` only on a real
+     *  transition. Called from `updated()` (covers a change driven by
+     *  `columns`/`rows`/`showAllColumns` rather than a container resize) and
+     *  from the `ResizeObserver` callback (covers a container resize with no
+     *  Lit-tracked property change at all). */
+    recomputeColumnsHidden() {
+        const hasPriorityColumns = this.columns.some((col) => col.priority);
+        const anyPriorityHidden = hasPriorityColumns &&
+            [...this.renderRoot.querySelectorAll('th[data-priority]')].some((el) => el.offsetParent === null);
+        const next = anyPriorityHidden || (hasPriorityColumns && this.showAllColumns);
+        if (this.columnsHidden === next)
+            return;
+        this.columnsHidden = next;
+        this.emit('lyra-columns-hidden-change', { hidden: next });
+    }
     keyOf(row, index) {
         return this.rowKey ? this.rowKey(row) : index;
     }
@@ -128,20 +222,70 @@ export class LyraTable extends LyraElement {
             return this.activeRowKey;
         }
         if (this.selectedKey !== null) {
-            const selected = String(this.selectedKey);
+            const selected = encodeKey(this.selectedKey);
             if (this.rowsByKey.has(selected))
                 return selected;
         }
-        return this.rows.length > 0 ? String(this.keyOf(this.rows[0], 0)) : null;
+        return this.rows.length > 0 ? encodeKey(this.keyOf(this.rows[0], 0)) : null;
     }
     willUpdate(changed) {
         if (changed.has('rows') || changed.has('rowKey')) {
-            this.rowsByKey = new Map(this.rows.map((row, i) => [String(this.keyOf(row, i)), row]));
+            this.rowsByKey = new Map(this.rows.map((row, i) => [encodeKey(this.keyOf(row, i)), row]));
         }
         if (changed.has('columns')) {
             this.columnsByKey = new Map(this.columns.map((c) => [c.key, c]));
         }
     }
+    /** Each sticky column's cumulative left offset — the sum of the *rendered
+     *  width* of every earlier sticky column — so multiple sticky columns
+     *  stack left-to-right instead of all pinning to inset-inline-start: 0 and
+     *  overlapping. Table columns are intrinsically sized (not fixed-width), so
+     *  this can't be computed in CSS alone; it requires measuring the actual
+     *  laid-out `offsetWidth` of each earlier sticky column's header cell. */
+    stickyOffsets() {
+        const offsets = new Map();
+        let running = 0;
+        for (const col of this.columns) {
+            if (!col.sticky)
+                continue;
+            offsets.set(col.key, running);
+            const headerEl = this.renderRoot.querySelector(`th[data-col-key="${col.key}"]`);
+            running += headerEl?.offsetWidth ?? 0;
+        }
+        return offsets;
+    }
+    /** Applies stickyOffsets()'s measured per-column offsets as an inline
+     *  `--lyra-table-sticky-offset` custom property on every header cell and
+     *  body cell in that column (addressed by the shared `data-col-key`
+     *  attribute). This is a post-render DOM measurement — column widths
+     *  aren't known until after the browser has laid out this update's
+     *  render() output — so it runs from `updated()`, not `willUpdate()`,
+     *  intentionally kept as a separate pass from the rowsByKey/columnsByKey
+     *  rebuild above: those two must stay in `willUpdate()` so `render()`'s
+     *  own `focusedRowKey()` call sees the current update's identity maps
+     *  (e.g. a freshly-assigned `selectedKey` resolving to the correct
+     *  roving-tabindex row on the very first paint), whereas the sticky-offset
+     *  measurement can only run after that same paint has happened. Only runs
+     *  when `hasSticky` is true (opt-in) and simply recomputes on every
+     *  update; a future optimization pass could cache column widths instead of
+     *  re-querying every time — out of scope for this correctness fix. */
+    updated() {
+        if (this.columns.some((c) => c.sticky)) {
+            for (const [key, offset] of this.stickyOffsets()) {
+                this.renderRoot
+                    .querySelectorAll(`[data-col-key="${key}"]`)
+                    .forEach((el) => el.style.setProperty('--lyra-table-sticky-offset', `${offset}px`));
+            }
+        }
+        // Re-observe [part='base'] whenever this update's render() produced a
+        // fresh one (first mount, or a swap to/from the <lyra-empty> template
+        // shape) — observeBase() itself no-ops when it's the same element as
+        // already observed.
+        const base = this.renderRoot.querySelector('[part="base"]');
+        if (base)
+            this.observeBase(base);
+        this.recomputeColumnsHidden();
+    }
     activateColumn(key) {
         this.activeColKey = key;
         const col = this.columnsByKey.get(key);
@@ -157,9 +301,11 @@ export class LyraTable extends LyraElement {
     /** Header cells currently in the tab sequence — excludes columns hidden by
      *  a `priority`-driven `@container` rule (table.styles.ts), so Left/Right/
      *  Home/End never strand the roving tab stop on a `display: none` cell
-     *  that `.focus()` would silently no-op on. */
+     *  that `.focus()` would silently no-op on. Scoped to `th` — body `<td>`s
+     *  now carry the same `data-col-key` attribute (for the sticky-offset
+     *  measurement pass) but must never be treated as header cells here. */
     visibleHeaders() {
-        return [...this.renderRoot.querySelectorAll('[data-col-key]')].filter((el) => el.offsetParent !== null);
+        return [...this.renderRoot.querySelectorAll('th[data-col-key]')].filter((el) => el.offsetParent !== null);
     }
     focusHeader(el) {
         if (!el?.dataset.colKey)
@@ -262,7 +408,6 @@ export class LyraTable extends LyraElement {
         description=${this.emptyDescription}
       ></lyra-empty>`;
         }
-        const hasPriorityColumns = this.columns.some((col) => col.priority);
         const focusedCol = this.focusedColKey();
         const focusedRow = this.focusedRowKey();
         return html `
@@ -302,13 +447,14 @@ export class LyraTable extends LyraElement {
             return html `<tr
                   part="row"
                   role="row"
-                  data-row-key=${String(key)}
+                  data-row-key=${encodeKey(key)}
                   aria-selected=${selected ? 'true' : 'false'}
-                  tabindex=${String(key) === focusedRow ? '0' : '-1'}
+                  tabindex=${encodeKey(key) === focusedRow ? '0' : '-1'}
                 >
                   ${this.columns.map((col) => html `<td
                         part="cell"
                         role="gridcell"
+                        data-col-key=${col.key}
                         data-align=${col.align ?? 'start'}
                         data-priority=${col.priority ?? nothing}
                         ?data-sticky=${col.sticky}
@@ -319,7 +465,7 @@ export class LyraTable extends LyraElement {
         })}
           </tbody>
         </table>
-        ${hasPriorityColumns
+        ${this.columnsHidden
             ? html `<button
               part="reveal-columns-button"
               type="button"
@@ -384,6 +530,9 @@ __decorate([
 __decorate([
     property({ attribute: 'hide-columns-label' })
 ], LyraTable.prototype, "hideColumnsLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'columns-hidden', reflect: true })
+], LyraTable.prototype, "columnsHidden", void 0);
 __decorate([
     state()
 ], LyraTable.prototype, "showAllColumns", void 0);

package/dist/components/table/table.styles.js

@@ -115,7 +115,12 @@ export const styles = css `
   [part='header-cell'][data-sticky],
   [part='cell'][data-sticky] {
     position: sticky;
-    inset-inline-start: 0;
+    /* Set per-column by table.ts's stickyOffsets()/updated(), which measures
+       each earlier sticky column's rendered width so multiple sticky columns
+       stack left-to-right instead of all pinning to the same edge and
+       overlapping. Falls back to 0 for the first sticky column (or before
+       the first measurement pass has run). */
+    inset-inline-start: var(--lyra-table-sticky-offset, 0);
     z-index: 1;
     background: var(--lyra-color-surface);
     box-shadow: 1px 0 0 0 var(--lyra-color-border);

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,51 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-tabs>` — a tab strip whose panels are direct light-DOM children,
+ * each carrying `slot="<id>"` (the panel's stable id) and `label="<text>"`
+ * (the tab button's text). One named `<slot>` is rendered per distinct
+ * `slot` name found among the current children — a child with no `label`,
+ * or a name with no matching child, simply never produces a tab.
+ *
+ * Implements the WAI-ARIA APG tabs pattern with automatic activation:
+ * Left/Right (swapped under RTL) move focus *and* selection together,
+ * Home/End jump to the first/last enabled tab, and a roving `tabindex`
+ * follows whichever tab is currently selected.
+ *
+ * @customElement lyra-tabs
+ * @slot - Direct children with `slot="<id>" label="<text>"` (and optionally `disabled`); one becomes each tab's panel.
+ * @event lyra-tabs-change - `detail: { tabId }`, fired when the active tab changes via click or keyboard.
+ * @csspart base - The root wrapper around the tablist and panels.
+ * @csspart tablist - The `role="tablist"` row of tab buttons.
+ * @csspart tab - A single tab button.
+ * @csspart panel - A single `role="tabpanel"` wrapper (one per tab, hidden unless active).
+ */
+export declare class LyraTabs extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The active tab's `slot`/id. Falls back to the first enabled tab whenever the current value doesn't resolve to one. */
+    active: string;
+    private tabs;
+    private baseId;
+    private mutationObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Rebuilds `tabs` from the current direct children. First child wins when two share a `slot` name (matches native slot assignment: both would render into the one panel, but only one label can back the button). */
+    private syncTabs;
+    /** Keeps `active` resolved to a real, enabled tab -- covers the initial default, a tab disappearing/becoming disabled underneath the current selection, and a consumer assigning `.active` directly. Silent (no `lyra-tabs-change`): this corrects *invalid* state rather than responding to a user picking a different tab. */
+    protected willUpdate(changed: PropertyValues): void;
+    /** Activates `tab` (no-op for a disabled tab or one that's already active) and emits `lyra-tabs-change`. */
+    private selectTab;
+    /** Moves real DOM focus to tab `slotName`'s button. Safe to call immediately (no `updateComplete` wait): every tab button already exists in the DOM regardless of its current `tabindex`, and `tabindex="-1"` elements are still focusable via script. */
+    private focusTab;
+    private onTabListKeyDown;
+    private tabId;
+    private panelId;
+    private renderTab;
+    private renderPanel;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tabs': LyraTabs;
+    }
+}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,190 @@
+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 { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { isRtl } from '../../internal/rtl.js';
+import { nextId } from '../../internal/a11y.js';
+import { styles } from './tabs.styles.js';
+/**
+ * `<lyra-tabs>` — a tab strip whose panels are direct light-DOM children,
+ * each carrying `slot="<id>"` (the panel's stable id) and `label="<text>"`
+ * (the tab button's text). One named `<slot>` is rendered per distinct
+ * `slot` name found among the current children — a child with no `label`,
+ * or a name with no matching child, simply never produces a tab.
+ *
+ * Implements the WAI-ARIA APG tabs pattern with automatic activation:
+ * Left/Right (swapped under RTL) move focus *and* selection together,
+ * Home/End jump to the first/last enabled tab, and a roving `tabindex`
+ * follows whichever tab is currently selected.
+ *
+ * @customElement lyra-tabs
+ * @slot - Direct children with `slot="<id>" label="<text>"` (and optionally `disabled`); one becomes each tab's panel.
+ * @event lyra-tabs-change - `detail: { tabId }`, fired when the active tab changes via click or keyboard.
+ * @csspart base - The root wrapper around the tablist and panels.
+ * @csspart tablist - The `role="tablist"` row of tab buttons.
+ * @csspart tab - A single tab button.
+ * @csspart panel - A single `role="tabpanel"` wrapper (one per tab, hidden unless active).
+ */
+export class LyraTabs extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The active tab's `slot`/id. Falls back to the first enabled tab whenever the current value doesn't resolve to one. */
+        this.active = '';
+        this.tabs = [];
+        this.baseId = nextId('tabs');
+        /** Rebuilds `tabs` from the current direct children. First child wins when two share a `slot` name (matches native slot assignment: both would render into the one panel, but only one label can back the button). */
+        this.syncTabs = () => {
+            const seen = new Set();
+            const next = [];
+            for (const child of Array.from(this.children)) {
+                const slotName = child.getAttribute('slot');
+                const label = child.getAttribute('label');
+                if (!slotName || !label || seen.has(slotName))
+                    continue;
+                seen.add(slotName);
+                next.push({ slotName, label, disabled: child.hasAttribute('disabled') });
+            }
+            this.tabs = next;
+        };
+        this.onTabListKeyDown = (e) => {
+            const navigable = this.tabs.filter((t) => !t.disabled);
+            if (navigable.length === 0)
+                return;
+            const currentIndex = navigable.findIndex((t) => t.slotName === this.active);
+            // Horizontal strip -- Up/Down aren't used. Left/Right swap under RTL,
+            // matching lyra-split/lyra-tree's physical-direction handling.
+            const rtl = isRtl(this);
+            const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+            let targetIndex;
+            switch (e.key) {
+                case forwardKey:
+                    targetIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % navigable.length;
+                    break;
+                case backwardKey:
+                    targetIndex = currentIndex < 0 ? navigable.length - 1 : (currentIndex - 1 + navigable.length) % navigable.length;
+                    break;
+                case 'Home':
+                    targetIndex = 0;
+                    break;
+                case 'End':
+                    targetIndex = navigable.length - 1;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            const target = navigable[targetIndex];
+            this.selectTab(target);
+            this.focusTab(target.slotName);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncTabs();
+        // Each child carries its own individual `slot` attribute (one named slot
+        // per tab, unlike lyra-split's single default-slot-of-many-panels) -- a
+        // brand-new tab's name has no matching `<slot>` to fire `slotchange` on
+        // until *this* component has already rendered one for it, and neither
+        // `slotchange` nor any Lit lifecycle hook observes a plain attribute
+        // edit (label/disabled) on a light-DOM child at all. A mutation observer
+        // on the host is the only thing that sees either case.
+        this.mutationObserver = new MutationObserver(this.syncTabs);
+        this.mutationObserver.observe(this, {
+            childList: true,
+            attributes: true,
+            attributeFilter: ['slot', 'label', 'disabled'],
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mutationObserver?.disconnect();
+        this.mutationObserver = undefined;
+    }
+    /** Keeps `active` resolved to a real, enabled tab -- covers the initial default, a tab disappearing/becoming disabled underneath the current selection, and a consumer assigning `.active` directly. Silent (no `lyra-tabs-change`): this corrects *invalid* state rather than responding to a user picking a different tab. */
+    willUpdate(changed) {
+        if (!changed.has('tabs') && !changed.has('active'))
+            return;
+        const current = this.tabs.find((t) => t.slotName === this.active);
+        if (current && !current.disabled)
+            return;
+        this.active = this.tabs.find((t) => !t.disabled)?.slotName ?? '';
+    }
+    /** Activates `tab` (no-op for a disabled tab or one that's already active) and emits `lyra-tabs-change`. */
+    selectTab(tab) {
+        if (tab.disabled || tab.slotName === this.active)
+            return;
+        this.active = tab.slotName;
+        this.emit('lyra-tabs-change', { tabId: tab.slotName });
+    }
+    /** Moves real DOM focus to tab `slotName`'s button. Safe to call immediately (no `updateComplete` wait): every tab button already exists in the DOM regardless of its current `tabindex`, and `tabindex="-1"` elements are still focusable via script. */
+    focusTab(slotName) {
+        const buttons = this.renderRoot.querySelectorAll('[part="tab"]');
+        for (const button of Array.from(buttons)) {
+            if (button.dataset.slot === slotName) {
+                button.focus();
+                return;
+            }
+        }
+    }
+    tabId(slotName) {
+        return `${this.baseId}-tab-${slotName}`;
+    }
+    panelId(slotName) {
+        return `${this.baseId}-panel-${slotName}`;
+    }
+    renderTab(tab) {
+        const selected = tab.slotName === this.active;
+        return html `<button
+      type="button"
+      part="tab"
+      id=${this.tabId(tab.slotName)}
+      data-slot=${tab.slotName}
+      role="tab"
+      aria-selected=${selected ? 'true' : 'false'}
+      aria-disabled=${tab.disabled ? 'true' : 'false'}
+      aria-controls=${this.panelId(tab.slotName)}
+      tabindex=${selected ? '0' : '-1'}
+      @click=${() => this.selectTab(tab)}
+    >
+      ${tab.label}
+    </button>`;
+    }
+    renderPanel(tab) {
+        const selected = tab.slotName === this.active;
+        return html `<div
+      part="panel"
+      id=${this.panelId(tab.slotName)}
+      role="tabpanel"
+      aria-labelledby=${this.tabId(tab.slotName)}
+      tabindex="0"
+      ?hidden=${!selected}
+    >
+      <slot name=${tab.slotName}></slot>
+    </div>`;
+    }
+    render() {
+        return html `
+      <div part="base">
+        <div part="tablist" role="tablist" aria-orientation="horizontal" @keydown=${this.onTabListKeyDown}>
+          ${this.tabs.map((tab) => this.renderTab(tab))}
+        </div>
+        ${this.tabs.map((tab) => this.renderPanel(tab))}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraTabs.prototype, "active", void 0);
+__decorate([
+    state()
+], LyraTabs.prototype, "tabs", void 0);
+defineElement('tabs', LyraTabs);

package/dist/components/tabs/tabs.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/tabs/tabs.styles.js

@@ -0,0 +1,63 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-s);
+  }
+  [part='tablist'] {
+    display: flex;
+    align-items: stretch;
+    gap: var(--lyra-space-m);
+    border-block-end: 1px solid var(--lyra-color-border);
+    overflow-x: auto;
+  }
+  [part='tab'] {
+    appearance: none;
+    background: none;
+    border: none;
+    /* Sits directly over the tablist's own border-block-end so the accent
+       underline below replaces it, pixel for pixel, when selected. */
+    border-block-end: 2px solid transparent;
+    margin-block-end: -1px;
+    padding: var(--lyra-space-s) var(--lyra-space-xs);
+    font: inherit;
+    font-weight: 500;
+    color: var(--lyra-color-text-quiet);
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      color var(--lyra-transition-fast),
+      border-color var(--lyra-transition-fast);
+  }
+  [part='tab']:hover:not([aria-disabled='true']) {
+    color: var(--lyra-color-text);
+  }
+  [part='tab'][aria-selected='true'] {
+    color: var(--lyra-color-brand);
+    border-block-end-color: var(--lyra-color-brand);
+  }
+  [part='tab'][aria-disabled='true'] {
+    cursor: not-allowed;
+    /* No :hover color change and no pointer feedback -- the click handler
+       already no-ops on a disabled tab, this just matches it visually. */
+    pointer-events: none;
+    opacity: var(--lyra-opacity-disabled);
+  }
+  [part='tab']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: calc(var(--lyra-focus-ring-offset) * -1);
+    border-radius: var(--lyra-radius);
+  }
+  [part='panel'] {
+    padding-block-start: var(--lyra-space-xs);
+  }
+  [part='panel']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+    border-radius: var(--lyra-radius);
+  }
+`;