@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/table/table.d.ts

@@ -39,14 +39,23 @@ export interface TableColumn<T> {
  *
  * `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 declare class LyraTable<T = unknown> extends LyraElement {
@@ -72,6 +81,16 @@ export declare class LyraTable<T = unknown> extends LyraElement {
     noColumnsDescription: string;
     revealColumnsLabel: string;
     hideColumnsLabel: string;
+    /** 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. */
+    columnsHidden: boolean;
     /** Forces `priority`-hidden columns back into view, overriding the
      *  `@container` hide rules in table.styles.ts. Toggled by
      *  `[part='reveal-columns-button']`. */
@@ -86,18 +105,68 @@ export declare class LyraTable<T = unknown> extends LyraElement {
     private activeRowKey;
     private rowsByKey;
     private columnsByKey;
+    /** Watches `[part='base']`'s own inline-size — the `@container` query
+     *  container table.styles.ts's priority-hide rules react to — so a
+     *  `priority` column flipping hidden/visible from an *external* width
+     *  change (a window resize, an ancestor flex-layout reflow, ...) is caught
+     *  even though no Lit-tracked property changed. Mirrors
+     *  lite-chart.ts's connectedCallback()/disconnectedCallback() ResizeObserver
+     *  lifecycle. */
+    private resizeObserver?;
+    /** The `[part='base']` element `resizeObserver` is currently observing —
+     *  `render()`'s columns/rows-empty branches swap in `<lyra-empty>` instead,
+     *  a different template shape that gives `[part='base']` a fresh DOM
+     *  identity on the next non-empty render, so `updated()` re-observes
+     *  whenever this no longer matches the live element. */
+    private observedBase?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private observeBase;
+    /** 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). */
+    private recomputeColumnsHidden;
     private keyOf;
     /** The header cell that currently owns `tabindex="0"`. */
     private focusedColKey;
     /** The body row that currently owns `tabindex="0"`. */
     private focusedRowKey;
     protected willUpdate(changed: PropertyValues): void;
+    /** 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. */
+    private stickyOffsets;
+    /** 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. */
+    protected updated(): void;
     private activateColumn;
     private activateRow;
     /** 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. */
     private visibleHeaders;
     private focusHeader;
     private focusRow;

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;
+    }
+}