@aceshooting/lyra-ui 4.2.0 → 5.1.0

package/dist/components/layout/stepper/stepper.class.js

@@ -0,0 +1,297 @@
+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, query } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { LyraElement } from '../../../internal/lyra-element.js';
+import { OrientationBreakpointController } from '../../../internal/orientation-breakpoint.js';
+import { isRtl } from '../../../internal/rtl.js';
+import { styles } from './stepper.styles.js';
+const GLYPH_VIEW_BOX = '0 0 24 24';
+const GLYPH_STROKE_WIDTH = '1.75';
+function checkmarkGlyph() {
+    return html `<svg
+    part="step-check"
+    width="1em"
+    height="1em"
+    viewBox=${GLYPH_VIEW_BOX}
+    fill="none"
+    stroke="currentColor"
+    stroke-width=${GLYPH_STROKE_WIDTH}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  ><polyline points="5 12.5 10 17.5 19 6.5"></polyline></svg>`;
+}
+/**
+ * `<lr-stepper>` — ordered multi-step wizard/form navigation: label + index per step,
+ * current/completed/locked/error state, click-to-jump. First-party invention (no Web Awesome
+ * equivalent). Fully data-driven and controlled, like `lr-table`'s `columns`/`rows` -- it never
+ * mutates `steps` itself; a click or Enter/Space on a non-disabled step fires a cancelable
+ * `lr-step-select`, and the host decides whether/how `steps` changes in response (mirroring
+ * `lr-dialog-close`'s cancelable-event convention).
+ *
+ * An opt-in `orientationBreakpoint` (unset by default -- no behavior change) makes the effective
+ * layout/navigation axis respond to a measured inline size instead of only the authored
+ * `orientation`: below that width (a pixel number or a `px`/`rem`/`em` CSS length), `narrowOrientation`
+ * becomes effective; at/above it, `orientation` does. This mirrors `<lr-split>`'s identically-named
+ * `orientationBreakpoint`/`narrowOrientation`/`orientationBreakpointBasis` contract. Under the default
+ * `orientationBreakpointBasis="container"` the breakpoint is measured on this stepper's own
+ * `[part="base"]` inline size via `ResizeObserver`, so a stepper placed in a narrow split pane or
+ * dialog still responds correctly even in a wide window; `orientationBreakpointBasis="viewport"`
+ * instead evaluates `matchMedia('(max-width: <breakpoint>)')`, needed when the stepper has a fixed
+ * width in a row that stacks at a shared breakpoint. The effective axis is exposed via the
+ * `effectiveOrientation` getter, a `data-effective-orientation` host attribute (only present while
+ * the breakpoint feature is active), and `lr-stepper-orientation-change`.
+ *
+ * @customElement lr-stepper
+ * @event lr-step-select - Fired on click, or Enter/Space while focused, on a non-`disabled`
+ *   step. `detail: { index, id }`. Cancelable, though this component takes no default action of
+ *   its own to prevent (it never mutates `steps`) -- `preventDefault()` is available for a host
+ *   that wants a single place to short-circuit its own listener's follow-up work.
+ * @event lr-stepper-orientation-change - `detail: { orientation }`, fired when an enabled
+ *   `orientationBreakpoint` changes the effective layout/navigation axis.
+ * @csspart base - The root wrapper.
+ * @csspart step - A single step button.
+ * @csspart step-index - The numbered index chip, shown for `pending`/`current`/`error` steps.
+ * @csspart step-check - The completed-checkmark glyph, shown for `completed` steps instead of `step-index`.
+ * @csspart step-label - The step's label text.
+ */
+export class LyraStepper extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Ordered step data. Never mutated by this component -- see the class doc's controlled-
+         *  component contract. Empty (the default) renders nothing. Each step's optional `title`
+         *  renders as a native `title` tooltip on that step's button -- e.g. to explain why a
+         *  `disabled` step is locked. */
+        this.steps = [];
+        /** `'horizontal'` (the default) lays steps out in a row (Left/Right, RTL-aware, to navigate);
+         *  `'vertical'` stacks them (Up/Down navigate instead, no RTL swap needed). The *authored* axis
+         *  used at/above `orientationBreakpoint` (or always, when that's unset) -- see
+         *  `effectiveOrientation` for the live axis actually in effect. */
+        this.orientation = 'horizontal';
+        /** Which box `orientationBreakpoint` measures. `'container'` (the default) observes this
+         *  stepper's own `[part="base"]` inline size via `ResizeObserver`, comparing strictly `<`.
+         *  `'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive
+         *  (`<=`) -- native `max-width` semantics, deliberately, so the crossing point matches a CSS
+         *  `@media` rule authored with the same length exactly.
+         *
+         *  A stepper given a fixed width in a row layout cannot react to that row stacking by measuring
+         *  itself -- its own width never changes. That case requires `'viewport'`, which also lets the
+         *  browser resolve a `rem` breakpoint with real `@media` semantics. */
+        this.orientationBreakpointBasis = 'container';
+        /** Layout/navigation axis used below `orientationBreakpoint`. */
+        this.narrowOrientation = 'vertical';
+        /** Accessible name for the `role="tablist"` step strip. Attribute-reflects from a host-level
+         *  `aria-label` so a plain-markup consumer gets ARIA-name forwarding without setting a JS
+         *  property. Unset, the tablist renders without an `aria-label` (the role carries no localized
+         *  default name). */
+        this.accessibleLabel = null;
+        this._effectiveOrientation = 'horizontal';
+        /** Owns breakpoint resolution, basis selection, and the viewport `MediaQueryList` lifecycle
+         *  (including teardown on disconnect) -- see `OrientationBreakpointController`. */
+        this.orientationBreakpoints = new OrientationBreakpointController(this, () => this.updateEffectiveOrientation(this.baseEl?.clientWidth ?? Number.POSITIVE_INFINITY, true));
+        this.onKeyDown = (e) => {
+            const navigable = this.steps.filter((s) => s.state !== 'disabled');
+            if (navigable.length === 0)
+                return;
+            const focused = this.renderRoot.activeElement;
+            const currentId = focused?.dataset.id;
+            const currentIndex = navigable.findIndex((s) => s.id === currentId);
+            const vertical = this.effectiveOrientation === 'vertical';
+            const rtl = !vertical && isRtl(this);
+            const forwardKey = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+            let targetIndex;
+            switch (e.key) {
+                case forwardKey:
+                    targetIndex = Math.min(navigable.length - 1, (currentIndex < 0 ? -1 : currentIndex) + 1);
+                    break;
+                case backwardKey:
+                    targetIndex = Math.max(0, (currentIndex < 0 ? 1 : currentIndex) - 1);
+                    break;
+                case 'Home':
+                    targetIndex = 0;
+                    break;
+                case 'End':
+                    targetIndex = navigable.length - 1;
+                    break;
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    if (currentIndex >= 0) {
+                        const idx = this.steps.findIndex((s) => s.id === navigable[currentIndex].id);
+                        this.selectStep(navigable[currentIndex], idx);
+                    }
+                    return;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            const target = navigable[targetIndex];
+            this.focusStep(target.id);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    /** The live layout/navigation axis after applying `orientationBreakpoint` -- identical to
+     *  `orientation` whenever that's unset. See the class doc. */
+    get effectiveOrientation() {
+        return this._effectiveOrientation;
+    }
+    /** `orientationBreakpoint` in pixels, or `undefined` when unset *or* unparseable -- meaningful
+     *  only under `orientationBreakpointBasis="container"`, where this controller owns the crossing
+     *  comparison. Deliberately re-resolved per call (never cached): a `rem` breakpoint has to track
+     *  the live root font size. Never use this to decide whether the feature is on -- under
+     *  `"viewport"` basis it's not the number actually in effect; use `orientationBreakpoints.active`
+     *  for that (see `OrientationBreakpointController`'s class doc). */
+    get resolvedOrientationBreakpoint() {
+        return this.orientationBreakpoints.resolved;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.orientationBreakpoints.containerObservationEnabled)
+            this.armResizeObserver();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+    }
+    firstUpdated() {
+        if (this.orientationBreakpoints.containerObservationEnabled)
+            this.armResizeObserver();
+    }
+    willUpdate(changed) {
+        if (changed.has('orientationBreakpoint') || changed.has('orientationBreakpointBasis')) {
+            this.orientationBreakpoints.configure(this.orientationBreakpoint, this.orientationBreakpointBasis);
+        }
+        if (changed.has('orientation') ||
+            changed.has('narrowOrientation') ||
+            changed.has('orientationBreakpoint') ||
+            changed.has('orientationBreakpointBasis')) {
+            // Under 'viewport' basis, `configure()` just above (re-)armed `matchMedia` synchronously, so
+            // `isBelow()` below already reflects a live, authoritative read -- the same "fresh
+            // measurement" condition that earns an emit elsewhere (see this method's own doc comment).
+            // That's only a genuine transition to emit for on a *later* update, though: on this
+            // component's very first update `this.hasUpdated` is still false here (Lit only flips it
+            // after this update completes), and `_effectiveOrientation` has no committed prior value to
+            // transition away from yet, so the very first read must never emit -- matching this event's
+            // documented "changes the effective axis" contract. Under 'container' basis there's no fresh
+            // read here at all, only a stale `baseEl` snapshot, so that case keeps deferring the emit to
+            // the `ResizeObserver` callback's own fresh measurement, as before.
+            this.updateEffectiveOrientation(this.baseEl?.clientWidth ?? Number.POSITIVE_INFINITY, this.hasUpdated && this.orientationBreakpointBasis === 'viewport');
+        }
+    }
+    updated(changed) {
+        if (changed.has('orientationBreakpoint') || changed.has('orientationBreakpointBasis')) {
+            if (this.orientationBreakpoints.containerObservationEnabled)
+                this.armResizeObserver();
+            else
+                this.resizeObserver?.disconnect();
+        }
+    }
+    /** Classifies a measured inline size into the effective layout/navigation axis and, only on an
+     *  actual transition, applies it -- mirrors `<lr-split>`'s identically-shaped
+     *  `updateEffectiveOrientation()`. `emitOnChange` is false for the property-driven re-derivation
+     *  in `willUpdate()` (except a genuine viewport-basis transition after the first update -- see
+     *  `willUpdate()`'s own doc comment) and true for the `ResizeObserver`/`matchMedia` callbacks'
+     *  own fresh measurements. */
+    updateEffectiveOrientation(width, emitOnChange) {
+        const next = this.orientationBreakpoints.isBelow(width)
+            ? this.narrowOrientation
+            : this.orientation;
+        // Gated on `active` (not `resolvedOrientationBreakpoint`) so a viewport-basis breakpoint still
+        // publishes this marker even though `resolved` is meaningless there -- see
+        // OrientationBreakpointController's class doc.
+        if (this.orientationBreakpoints.active) {
+            this.setAttribute('data-effective-orientation', next);
+        }
+        else {
+            this.removeAttribute('data-effective-orientation');
+        }
+        if (next === this._effectiveOrientation)
+            return;
+        this._effectiveOrientation = next;
+        this.requestUpdate();
+        if (emitOnChange) {
+            this.emit('lr-stepper-orientation-change', { orientation: next });
+        }
+    }
+    /** Creates (idempotently) and (re-)observes `[part="base"]` -- a no-op until `baseEl` exists (see
+     *  `firstUpdated()`/`connectedCallback()`). */
+    armResizeObserver() {
+        if (!this.resizeObserver) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const box = entries[0]?.contentBoxSize?.[0];
+                const width = box ? box.inlineSize : (this.baseEl?.getBoundingClientRect().width ?? 0);
+                this.updateEffectiveOrientation(width, true);
+            });
+        }
+        if (this.baseEl)
+            this.resizeObserver.observe(this.baseEl);
+    }
+    selectStep(step, index) {
+        if (step.state === 'disabled')
+            return;
+        this.emit('lr-step-select', { index, id: step.id }, { cancelable: true });
+    }
+    focusStep(id) {
+        const button = this.renderRoot.querySelector(`[part="step"][data-id="${CSS.escape(id)}"]`);
+        button?.focus();
+    }
+    render() {
+        // Roving tabindex needs exactly one stop in the tab order at all times -- the `current` step
+        // when there is one, otherwise the first step a keyboard user could actually land on. Without
+        // this fallback, an all-`completed`/all-`pending`/no-`current` `steps` array would leave every
+        // button at tabindex="-1" and drop the whole stepper out of the tab order.
+        const rovingId = this.steps.find((s) => s.state === 'current')?.id ?? this.steps.find((s) => s.state !== 'disabled')?.id;
+        return html `
+      <div part="base" role="tablist" aria-label=${this.accessibleLabel || nothing} aria-orientation=${this.effectiveOrientation} @keydown=${this.onKeyDown}>
+        ${repeat(this.steps, (step) => step.id, (step, index) => html `<button
+            type="button"
+            part="step"
+            data-id=${step.id}
+            data-state=${step.state}
+            role="tab"
+            aria-selected=${step.state === 'current' ? 'true' : 'false'}
+            aria-current=${step.state === 'current' ? 'step' : nothing}
+            aria-disabled=${step.state === 'disabled' ? 'true' : 'false'}
+            tabindex=${step.id === rovingId ? '0' : '-1'}
+            title=${step.title ?? nothing}
+            @click=${() => this.selectStep(step, index)}
+          >
+            ${step.state === 'completed'
+            ? checkmarkGlyph()
+            : html `<span part="step-index">${index + 1}</span>`}
+            <span part="step-label">${step.label}</span>
+          </button>`)}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraStepper.prototype, "steps", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraStepper.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'orientation-breakpoint' })
+], LyraStepper.prototype, "orientationBreakpoint", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'orientation-breakpoint-basis' })
+], LyraStepper.prototype, "orientationBreakpointBasis", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'narrow-orientation' })
+], LyraStepper.prototype, "narrowOrientation", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], LyraStepper.prototype, "accessibleLabel", void 0);
+__decorate([
+    query('[part="base"]')
+], LyraStepper.prototype, "baseEl", void 0);
+//# sourceMappingURL=stepper.class.js.map

package/dist/components/layout/stepper/stepper.class.js.map

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

package/dist/components/layout/stepper/stepper.d.ts.map

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

package/dist/components/layout/stepper/stepper.js

@@ -0,0 +1,5 @@
+export * from './stepper.class.js';
+import { LyraStepper } from './stepper.class.js';
+import { defineElement } from '../../../internal/prefix.js';
+defineElement('stepper', LyraStepper);
+//# sourceMappingURL=stepper.js.map

package/dist/components/layout/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,aAAa,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC"}

package/dist/components/layout/stepper/stepper.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/stepper/stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+ElB,CAAC"}

package/dist/components/layout/stepper/stepper.styles.js

@@ -0,0 +1,82 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    gap: var(--lr-space-m);
+    overflow-x: auto;
+  }
+  :host([orientation='vertical']) [part='base'] {
+    flex-direction: column;
+    overflow-x: visible;
+  }
+  /* orientationBreakpoint's live axis -- only present while that feature is opted into (see
+     stepper.ts's updateEffectiveOrientation()), so it can override the authored orientation rules
+     above by source order alone (equal specificity) whenever the effective axis diverges from it. */
+  :host([data-effective-orientation='vertical']) [part='base'] {
+    flex-direction: column;
+    overflow-x: visible;
+  }
+  :host([data-effective-orientation='horizontal']) [part='base'] {
+    flex-direction: row;
+    overflow-x: auto;
+  }
+  [part='step'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lr-space-xs);
+    flex: 0 0 auto;
+    border: none;
+    background: transparent;
+    color: var(--lr-color-text-quiet);
+    font: inherit;
+    cursor: pointer;
+    padding: var(--lr-space-2xs);
+    border-radius: var(--lr-radius);
+  }
+  [part='step'][aria-disabled='true'] {
+    opacity: var(--lr-opacity-disabled);
+    cursor: not-allowed;
+  }
+  [part='step']:hover:not([aria-disabled='true']) {
+    background: var(--lr-color-brand-quiet);
+    color: var(--lr-color-text);
+  }
+  [part='step']:focus-visible {
+    outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
+    outline-offset: var(--lr-focus-ring-offset);
+  }
+  [part='step'][data-state='current'] {
+    color: var(--lr-color-text);
+    font-weight: var(--lr-font-weight-semibold);
+  }
+  [part='step'][data-state='error'] {
+    color: var(--lr-color-danger);
+  }
+  [part='step-index'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--lr-size-1-5rem);
+    block-size: var(--lr-size-1-5rem);
+    border-radius: var(--lr-radius-pill);
+    background: var(--lr-color-border);
+    color: var(--lr-color-text);
+    font-size: var(--lr-font-size-xs);
+    flex: 0 0 auto;
+  }
+  [part='step'][data-state='current'] [part='step-index'] {
+    background: var(--lr-color-brand);
+    color: var(--lr-color-surface);
+  }
+  [part='step-check'] {
+    color: var(--lr-color-success);
+    flex: 0 0 auto;
+  }
+  [part='step-label'] {
+    white-space: nowrap;
+  }
+`;
+//# sourceMappingURL=stepper.styles.js.map

package/dist/components/layout/stepper/stepper.styles.js.map

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

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

@@ -0,0 +1,86 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../../internal/lyra-element.js';
+export interface LyraTabsEventMap {
+    'lr-tabs-change': CustomEvent<{
+        tabId: string;
+    }>;
+}
+/**
+ * `<lr-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
+ * `<lr-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 lr-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 lr-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).
+ * @cssprop [--lr-scroll-fade-size=2rem] - Width of the static fade at each horizontal scroll edge.
+ */
+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;
+    /** Accessible name for the `role="tablist"` strip. Attribute-reflects from a host-level
+     *  `aria-label` so a plain-markup consumer gets ARIA-name forwarding without setting a JS
+     *  property. Unset, the tablist renders without an `aria-label` (the role carries no localized
+     *  default name). */
+    accessibleLabel: string | null;
+    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 `lr-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 `lr-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 {
+        'lr-tabs': LyraTabs;
+    }
+}
+//# sourceMappingURL=tabs.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.class.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/tabs/tabs.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAiBhE,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAClD;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBAAa,QAAS,SAAQ,WAAW,CAAC,gBAAgB,CAAC;IACzD,MAAM,CAAC,MAAM,iCAAgC;IAE7C,yHAAyH;IAC5F,MAAM,SAAM;IAEzC;;;yBAGqB;IACkB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpE,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,8TAA8T;IAC9T,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAKlD;IAED,0GAA0G;IAC1G,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,SAAS,EAAE,QAAQ,CAAC;KACrB;CACF"}