@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/table/table.js

@@ -16,7 +16,31 @@ 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, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"]), [role="button"], [role="checkbox"], [role="combobox"], [role="listbox"], [role="menu"], [role="menuitem"], [role="option"], [role="radio"], [role="slider"], [role="spinbutton"], [role="switch"], [role="tab"], [role="textbox"]';
+/** 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.matches('[data-row-key], th[data-col-key]')) ||
+            el.tagName.includes('-'))
+            return el;
+        el = el.parentElement;
+    }
+    return null;
+}
 /**
  * `<lyra-table>` — a presentational, sort/select-aware data table.
  *
@@ -37,17 +61,37 @@ const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [role="b
  * Enter/Space still only sort/activate (see `activateColumn()` /
  * `activateRow()`).
  *
+ * Set `aria-label` on the host to give the `role="grid"` element an
+ * accessible name; it's forwarded into the shadow DOM's `<table>`.
+ *
  * `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.
- * @csspart base, table, head, header-cell, row, cell, more-button, sort-icon, reveal-columns-button
+ * @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 - The root wrapper around the `<table>` and its footer controls.
+ * @csspart table - The `<table role="grid">` element.
+ * @csspart head - The `<thead>` element.
+ * @csspart header-cell - Each `<th>` header cell.
+ * @csspart row - Each body `<tr>`.
+ * @csspart cell - Each body `<td>`.
+ * @csspart more-button - The "load more" control, shown when `hasMore` is true.
+ * @csspart sort-icon - The chevron shown in the active sortable column's header cell.
+ * @csspart reveal-columns-button - The button that toggles `priority`-hidden columns back into view.
  */
 export class LyraTable extends LyraElement {
     constructor() {
@@ -65,6 +109,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']`. */
@@ -79,17 +133,24 @@ export class LyraTable extends LyraElement {
         this.activeRowKey = null;
         this.rowsByKey = new Map();
         this.columnsByKey = new Map();
+        this.observedHeaders = new Set();
         this.toggleColumns = () => {
             this.showAllColumns = !this.showAllColumns;
         };
         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 +159,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,15 +175,92 @@ export class LyraTable extends LyraElement {
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.recomputeColumnsHidden();
+            this.applyStickyOffsets();
+        });
+        // 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;
+        this.observedHeaders.clear();
+    }
+    observeBase(base) {
+        if (this.observedBase === base)
+            return;
+        if (this.observedBase)
+            this.resizeObserver?.unobserve(this.observedBase);
+        this.resizeObserver?.observe(base);
+        this.observedBase = base;
+    }
+    observeHeaders() {
+        const headers = new Set(this.columns.some((column) => column.sticky)
+            ? this.renderRoot.querySelectorAll('th[data-col-key]')
+            : []);
+        for (const header of this.observedHeaders) {
+            if (!headers.has(header)) {
+                this.resizeObserver?.unobserve(header);
+                this.observedHeaders.delete(header);
+            }
+        }
+        for (const header of headers) {
+            if (!this.observedHeaders.has(header)) {
+                this.observedHeaders.add(header);
+                this.resizeObserver?.observe(header);
+            }
+        }
+    }
+    /** 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);
+        this.rehomeFocusedColumn();
+        if (this.columnsHidden === next)
+            return;
+        this.columnsHidden = next;
+        this.emit('lyra-columns-hidden-change', { hidden: next });
+    }
+    rehomeFocusedColumn() {
+        const visible = this.visibleHeaders();
+        if (visible.length === 0 || this.activeColKey === null)
+            return;
+        if (!visible.some((header) => header.dataset.colKey === this.activeColKey)) {
+            this.activeColKey = visible[0].dataset.colKey ?? null;
+        }
+    }
     keyOf(row, index) {
         return this.rowKey ? this.rowKey(row) : index;
     }
     /** The header cell that currently owns `tabindex="0"`. */
     focusedColKey() {
+        const visible = this.visibleHeaders();
+        const visibleKeys = new Set(visible.map((el) => el.dataset.colKey).filter((key) => key !== undefined && this.columnsByKey.has(key)));
         if (this.activeColKey !== null && this.columnsByKey.has(this.activeColKey)) {
-            return this.activeColKey;
+            if (visibleKeys.size === 0 || visibleKeys.has(this.activeColKey))
+                return this.activeColKey;
         }
-        return this.columns[0]?.key ?? null;
+        return visible.find((el) => el.dataset.colKey !== undefined && this.columnsByKey.has(el.dataset.colKey))?.dataset.colKey ?? this.columns[0]?.key ?? null;
     }
     /** The body row that currently owns `tabindex="0"`. */
     focusedRowKey() {
@@ -128,20 +268,85 @@ 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 inline-start 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;
+            const headerEl = [...this.renderRoot.querySelectorAll('th[data-col-key]')].find((el) => el.dataset.colKey === col.key);
+            offsets.set(col.key, running);
+            running += headerEl?.offsetWidth ?? 0;
+        }
+        return offsets;
+    }
+    applyStickyOffsets() {
+        if (!this.columns.some((c) => c.sticky))
+            return;
+        const offsets = this.stickyOffsets();
+        this.renderRoot.querySelectorAll('[data-col-key]').forEach((el) => {
+            const key = el.dataset.colKey;
+            if (key !== undefined && offsets.has(key)) {
+                el.style.setProperty('--lyra-table-sticky-offset', `${offsets.get(key)}px`);
+            }
+        });
+    }
+    /** 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(changed) {
+        if (changed.has('columns') || changed.has('rows') || changed.has('rowKey'))
+            this.applyStickyOffsets();
+        // 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.observeHeaders();
+        // Deferred to a microtask rather than called synchronously here: a real
+        // priority-hidden transition mutates the reactive `columnsHidden`
+        // property, and doing that from inside this same updated() call stack
+        // schedules a second update from within the first update's own lifecycle
+        // callback -- Lit's dev-mode "scheduled an update ... after an update
+        // completed" warning. Pushing the write out to a microtask lets this
+        // update finish first, so the follow-up update is a normal externally
+        // triggered one instead.
+        queueMicrotask(() => this.recomputeColumnsHidden());
+    }
     activateColumn(key) {
         this.activeColKey = key;
         const col = this.columnsByKey.get(key);
@@ -157,9 +362,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)
@@ -183,14 +390,15 @@ export class LyraTable extends LyraElement {
         const index = headers.indexOf(th);
         if (index < 0)
             return;
+        const rtl = getComputedStyle(this).direction === 'rtl';
         switch (e.key) {
             case 'ArrowLeft':
                 e.preventDefault();
-                this.focusHeader(headers[Math.max(0, index - 1)]);
+                this.focusHeader(headers[rtl ? Math.min(headers.length - 1, index + 1) : Math.max(0, index - 1)]);
                 return;
             case 'ArrowRight':
                 e.preventDefault();
-                this.focusHeader(headers[Math.min(headers.length - 1, index + 1)]);
+                this.focusHeader(headers[rtl ? Math.max(0, index - 1) : Math.min(headers.length - 1, index + 1)]);
                 return;
             case 'Home':
                 e.preventDefault();
@@ -262,12 +470,17 @@ 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 `
       <div part="base" ?data-force-visible=${this.showAllColumns}>
-        <table part="table" role="grid" @click=${this.onTableClick} @keydown=${this.onTableKeyDown}>
+        <table
+          part="table"
+          role="grid"
+          aria-label=${this.getAttribute('aria-label') || nothing}
+          @click=${this.onTableClick}
+          @keydown=${this.onTableKeyDown}
+        >
           <thead part="head">
             <tr role="row">
               ${this.columns.map((col) => {
@@ -302,13 +515,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 +533,7 @@ export class LyraTable extends LyraElement {
         })}
           </tbody>
         </table>
-        ${hasPriorityColumns
+        ${this.columnsHidden
             ? html `<button
               part="reveal-columns-button"
               type="button"
@@ -384,6 +598,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,74 @@
+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.
+ *
+ * A tab button's *visible* content can carry a leading icon without ever
+ * changing its *accessible name* (which always stays exactly `label`'s
+ * text, nothing else): give a tab an extra direct-child sibling of
+ * `<lyra-tabs>` carrying `slot="<id>-icon"` (that sibling's own content --
+ * an inline SVG, an emoji span, a custom icon element, anything -- is
+ * entirely up to the consumer). It's rendered ahead of the label inside
+ * that tab's button, wrapped in an `aria-hidden="true"` part so it's
+ * excluded from accessible-name computation no matter what it contains. A
+ * tab with no matching `<id>-icon` sibling renders no icon wrapper at all,
+ * so existing text-only tabs are completely unaffected. (A named slot,
+ * rather than a second attribute holding an icon-name lookup, was chosen
+ * because this library's `internal/icons.ts` is a small closed set of
+ * chrome glyphs for this library's *own* components, not a public
+ * name-keyed registry -- a slot lets a consumer supply an arbitrary,
+ * domain-specific icon instead of being limited to that internal set.)
+ *
+ * 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.
+ * @slot <id>-icon - Optional sibling direct child supplying a tab's leading icon content; excluded from the tab button's accessible name.
+ * @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 tab-icon - The optional leading-icon wrapper inside a tab button; only rendered when that tab has a matching `<id>-icon` sibling.
+ * @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 nextOpaqueId;
+    private readonly idsBySlot;
+    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 idsFor;
+    /** Derives a tab's optional icon-sibling `slot` name from its own `slotName` -- see the class doc. */
+    private iconSlotName;
+    private renderTab;
+    private renderPanel;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tabs': LyraTabs;
+    }
+}