@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -7,7 +7,7 @@ export const styles = css `
   [part='base'] {
     overflow: auto;
     max-block-size: var(--lyra-table-max-height, none);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     /* Makes [part='base'] a query container so the @container rules below can
        react to the table's own available width instead of the viewport's. */
@@ -36,16 +36,16 @@ export const styles = css `
   [part='table'] {
     inline-size: 100%;
     border-collapse: collapse;
-    font-size: 0.875rem;
+    font-size: var(--lyra-font-size-md-sm);
   }
   [part='header-cell'] {
     position: sticky;
     inset-block-start: 0;
     background: var(--lyra-color-surface);
     text-align: start;
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
     padding: var(--lyra-space-s);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     cursor: default;
     white-space: nowrap;
   }
@@ -102,7 +102,7 @@ export const styles = css `
   }
   [part='cell'] {
     padding: var(--lyra-space-s);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='cell'][data-align='end'] {
     text-align: end;
@@ -121,9 +121,23 @@ export const styles = css `
        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;
+    z-index: var(--lyra-layer-content);
     background: var(--lyra-color-surface);
-    box-shadow: 1px 0 0 0 var(--lyra-color-border);
+    box-shadow: var(--lyra-size-1px) 0 0 0 var(--lyra-color-border);
+  }
+  [part='foot'] {
+    position: sticky;
+    inset-block-end: 0;
+    background: var(--lyra-color-surface);
+  }
+  [part='footer-cell'] {
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border-block-start: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    font-weight: var(--lyra-font-weight-semibold);
+    text-align: start;
+  }
+  [part='footer-cell'][data-align='end'] {
+    text-align: end;
   }
   [part='more-button'],
   [part='reveal-columns-button'] {
@@ -135,7 +149,7 @@ export const styles = css `
     color: var(--lyra-color-brand);
     font: inherit;
     cursor: pointer;
-    border-block-start: 1px solid var(--lyra-color-border);
+    border-block-start: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='more-button']:hover,
   [part='reveal-columns-button']:hover {
@@ -147,3 +161,4 @@ export const styles = css `
     outline-offset: var(--lyra-focus-ring-offset);
   }
 `;
+//# sourceMappingURL=table.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../src/components/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKxB,CAAC"}

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

@@ -0,0 +1,80 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface LyraTabsEventMap {
+    'lyra-tabs-change': CustomEvent<{
+        tabId: string;
+    }>;
+}
+/**
+ * `<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<LyraTabsEventMap> {
+    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;
+    }
+}
+//# sourceMappingURL=tabs.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.class.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAiB7D,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBAAa,QAAS,SAAQ,WAAW,CAAC,gBAAgB,CAAC;IACzD,MAAM,CAAC,MAAM,iCAAgC;IAE7C,yHAAyH;IAC5F,MAAM,SAAM;IAEhC,OAAO,CAAC,IAAI,CAAgB;IAErC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAqD;IAC/E,OAAO,CAAC,gBAAgB,CAAC,CAAmB;IAE5C,iBAAiB,IAAI,IAAI,CA6BxB;IAED,oBAAoB,IAAI,IAAI,CAI3B;IAED,sNAAsN;IACtN,OAAO,CAAC,QAAQ,CAkBd;IAEF,gUAAgU;IAChU,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAKlD;IAED,4GAA4G;IAC5G,OAAO,CAAC,SAAS;IAMjB,0PAA0P;IAC1P,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,gBAAgB,CA+BtB;IAEF,OAAO,CAAC,KAAK;IAGb,OAAO,CAAC,OAAO;IAGf,OAAO,CAAC,MAAM;IAQd,sGAAsG;IACtG,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAkBjB,OAAO,CAAC,WAAW;IAcnB,MAAM,IAAI,cAAc,CAiBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/tabs/tabs.class.js

@@ -0,0 +1,253 @@
+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, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { LyraElement } from '../../internal/lyra-element.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.
+ *
+ * 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 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');
+        this.nextOpaqueId = 0;
+        this.idsBySlot = new Map();
+        /** 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 = [];
+            const children = Array.from(this.children);
+            for (const child of children) {
+                const slotName = child.getAttribute('slot');
+                const label = child.getAttribute('label');
+                if (!slotName || !label || seen.has(slotName))
+                    continue;
+                seen.add(slotName);
+                const iconSlot = this.iconSlotName(slotName);
+                const hasIcon = children.some((c) => c.getAttribute('slot') === iconSlot);
+                next.push({ slotName, label, disabled: child.hasAttribute('disabled'), hasIcon });
+            }
+            const liveSlots = new Set(next.map((tab) => tab.slotName));
+            for (const slotName of this.idsBySlot.keys()) {
+                if (!liveSlots.has(slotName))
+                    this.idsBySlot.delete(slotName);
+            }
+            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. `attributes: true`
+        // alone only reports mutations on the observed node itself (`this`), never
+        // on its children, so `subtree: true` is required too -- but that widens
+        // `childList`/`attributeFilter` to the *entire* descendant tree, including
+        // each panel's own projected content. A panel can legitimately churn its
+        // own children/attributes fast (a streaming log, a live JSON preview), so
+        // every record is filtered down to direct-child mutations only before
+        // triggering a resync, keeping panel-internal churn from forcing a tabs
+        // recompute and re-render on every unrelated mutation.
+        this.mutationObserver = new MutationObserver((records) => {
+            const isDirectChild = (node) => node.parentNode === this;
+            const relevant = records.some((r) => (r.type === 'childList' ? r.target === this : isDirectChild(r.target)));
+            if (relevant)
+                this.syncTabs();
+        });
+        this.mutationObserver.observe(this, {
+            childList: true,
+            subtree: 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.idsFor(slotName).tab;
+    }
+    panelId(slotName) {
+        return this.idsFor(slotName).panel;
+    }
+    idsFor(slotName) {
+        const existing = this.idsBySlot.get(slotName);
+        if (existing)
+            return existing;
+        const token = `${this.baseId}-${this.nextOpaqueId++}`;
+        const ids = { tab: `${token}-tab`, panel: `${token}-panel` };
+        this.idsBySlot.set(slotName, ids);
+        return ids;
+    }
+    /** Derives a tab's optional icon-sibling `slot` name from its own `slotName` -- see the class doc. */
+    iconSlotName(slotName) {
+        return `${slotName}-icon`;
+    }
+    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.hasIcon
+            ? html `<span part="tab-icon" aria-hidden="true"><slot name=${this.iconSlotName(tab.slotName)}></slot></span>`
+            : nothing}${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() {
+        // Keyed by `slotName`, not a plain `.map()`: a plain array binding reuses
+        // each rendered DOM node by *position*, so removing e.g. the first tab
+        // would silently relabel the still-focused second button's DOM node into
+        // the (unfocused) third tab's button, leaving real keyboard focus stuck
+        // on a tabindex="-1"/aria-selected="false" button instead of following
+        // the tab it used to represent. Keying by identity keeps each tab's own
+        // DOM node (and any focus on it) attached to that same tab across
+        // additions/removals anywhere in the list.
+        return html `
+      <div part="base">
+        <div part="tablist" role="tablist" aria-orientation="horizontal" @keydown=${this.onTabListKeyDown}>
+          ${repeat(this.tabs, (tab) => tab.slotName, (tab) => this.renderTab(tab))}
+        </div>
+        ${repeat(this.tabs, (tab) => tab.slotName, (tab) => this.renderPanel(tab))}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraTabs.prototype, "active", void 0);
+__decorate([
+    state()
+], LyraTabs.prototype, "tabs", void 0);
+//# sourceMappingURL=tabs.class.js.map

package/dist/components/tabs/tabs.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.class.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.class.ts"],"names":[],"mappings":"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"}

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

@@ -1,74 +1,2 @@
-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;
-    }
-}
+export * from './tabs.class.js';
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}