@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/split/split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split.js","sourceRoot":"","sources":["../../../src/components/split/split.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC"}

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

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=split.styles.d.ts.map

package/dist/components/split/split.styles.d.ts.map

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

package/dist/components/split/split.styles.js

@@ -7,7 +7,7 @@ export const styles = css `
     /* Component-specific -- not a shared design token, so a consumer can
        retheme it without a raw literal leaking into the public API (same
        rationale as lyra-app-rail's --lyra-app-rail-overlay-color). */
-    --lyra-split-overlay-color: rgb(0 0 0 / 0.5);
+    --lyra-split-overlay-color: var(--lyra-color-overlay);
   }
   [part='base'] {
     display: flex;
@@ -23,7 +23,7 @@ export const styles = css `
   [part='divider'] {
     position: relative;
     flex: 0 0 auto;
-    inline-size: 3px;
+    inline-size: var(--lyra-size-3px);
     block-size: auto;
     background: var(--lyra-color-border);
     cursor: col-resize;
@@ -37,15 +37,15 @@ export const styles = css `
     content: '';
     position: absolute;
     inset-block: 0;
-    inset-inline: -6px;
+    inset-inline: var(--lyra-size-neg-6px);
   }
   :host([orientation='vertical']) [part='divider'] {
     inline-size: auto;
-    block-size: 3px;
+    block-size: var(--lyra-size-3px);
     cursor: row-resize;
   }
   :host([orientation='vertical']) [part='divider']::before {
-    inset-block: -6px;
+    inset-block: var(--lyra-size-neg-6px);
     inset-inline: 0;
   }
   [part='divider']:hover {
@@ -71,7 +71,7 @@ export const styles = css `
      visual/stacking treatment lives here. z-index is above [part="backdrop"]
      (below), so the drawer renders on top of its own scrim. */
   ::slotted([data-collapse-state='floating']) {
-    z-index: 1;
+    z-index: var(--lyra-layer-content);
     background: var(--lyra-color-surface);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
@@ -85,7 +85,7 @@ export const styles = css `
   [part='backdrop'] {
     position: absolute;
     inset: 0;
-    z-index: 0;
+    z-index: var(--lyra-layer-base);
     background: var(--lyra-split-overlay-color);
   }
   /* Rail-clamped content can easily overflow the fixed rail-width — clip it
@@ -96,3 +96,4 @@ export const styles = css `
     overflow: hidden;
   }
 `;
+//# sourceMappingURL=split.styles.js.map

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

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

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

@@ -0,0 +1,90 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type StatVariant = 'neutral' | 'success' | 'warning' | 'danger';
+export type StatGoodDirection = 'up' | 'down';
+export interface StatRow {
+    label: string;
+    value: string;
+    /** Exact value shown as a hover/focus tooltip on this row's `row-value` (mirrors the headline
+     *  `exactValue`/`exact-value` behavior). Also makes this row's `[part='row-value']`
+     *  keyboard-focusable so the tooltip is reachable without a pointer. */
+    exactValue?: string;
+}
+/**
+ * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
+ * "metric row" / "KPI card" pattern common to dashboard UIs.
+ *
+ * @customElement lyra-stat
+ * @slot - Leading icon.
+ * @slot caption - Rich caption content (overrides the `caption` attribute).
+ * @slot spark - A sparkline (e.g. `<lyra-sparkline>`) or other compact trend
+ *   visual. `lyra-stat` only reserves the slot; it doesn't render one itself.
+ * @slot sub - Rich sub-line content (overrides the `sub` attribute).
+ * @csspart base - The component's root wrapper.
+ * @csspart icon - Container for the leading icon slot.
+ * @csspart label - The label text.
+ * @csspart value-row - Wrapper around the value and unit.
+ * @csspart value - The value text. Accessibly labelled by the `label` part (via
+ *   `aria-labelledby`) whenever `label` is set, so tabbing directly to this
+ *   (focusable when `exactValue` is set) control still announces which metric it is.
+ * @csspart unit - The unit text.
+ * @csspart trend - The trend pill.
+ * @csspart sub - Container for the `sub` attribute/slot.
+ * @csspart spark - Container for the `spark` slot.
+ * @csspart caption - Container for the caption attribute/slot.
+ * @csspart rows - Container for the `rows` breakdown list.
+ * @csspart row - A single breakdown row (one per `rows` entry).
+ * @csspart row-label - The label text of a breakdown row.
+ * @csspart row-value - The value text of a breakdown row. Shows the row's `exactValue` (if any) as
+ *   a hover/focus tooltip, same as the headline `value`, and is accessibly labelled by its
+ *   `row-label` (via `aria-labelledby`) the same way the headline `value` is.
+ */
+export declare class LyraStat extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    label: string;
+    value: string;
+    unit: string;
+    variant: StatVariant;
+    trend: number;
+    caption: string;
+    /** Which trend direction counts as "good" — inverts arrow/color polarity for
+     *  cost/latency/error-rate-style metrics where a decrease is the win. */
+    goodDirection: StatGoodDirection;
+    /** Breakdown rows rendered as a simple label/value list beneath the caption. */
+    rows: StatRow[];
+    /** Visual emphasis (e.g. for a "headline" stat in a group) — orthogonal to
+     *  the status `variant`; see the `[part='value']` selector below for how
+     *  the two combine. */
+    emphasis: boolean;
+    /** Exact value shown as a hover/focus tooltip on the headline `value` (e.g. `value="$1.2K"
+     *  exact-value="$1,204.37"`). Also makes `[part='value']` keyboard-focusable so the tooltip is
+     *  reachable without a pointer. */
+    exactValue: string;
+    /** A secondary line distinct from `caption` (e.g. a comparison-period label), rendered between the
+     *  trend pill and the caption. */
+    sub: string;
+    /** Renders `value` as smaller/lighter prose (e.g. a loading/status message) instead of the bold
+     *  numeric headline style, and hides `unit`. */
+    prose: boolean;
+    /** Tighter padding for constrained spaces — same convention as `lyra-empty`'s `compact`. */
+    compact: boolean;
+    private hasIcon;
+    private hasCaptionSlot;
+    private hasSparkSlot;
+    private hasSubSlot;
+    private readonly labelId;
+    private readonly valueId;
+    private rowLabelIds;
+    protected willUpdate(changed: PropertyValues): void;
+    private onIconSlotChange;
+    private onCaptionSlotChange;
+    private onSparkSlotChange;
+    private onSubSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-stat': LyraStat;
+    }
+}
+//# sourceMappingURL=stat.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stat.class.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;4EAEwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,QAAS,SAAQ,WAAW;IACvC,MAAM,CAAC,MAAM,iCAAwC;IAEzC,KAAK,SAAM;IACX,KAAK,SAAM;IACX,IAAI,SAAM;IACO,OAAO,EAAE,WAAW,CAAa;IAClC,KAAK,SAAO;IAC5B,OAAO,SAAM;IACzB;6EACyE;IAC9B,aAAa,EAAE,iBAAiB,CAAQ;IACnF,gFAAgF;IAChD,IAAI,EAAE,OAAO,EAAE,CAAM;IACrD;;2BAEuB;IACqB,QAAQ,UAAS;IAC7D;;uCAEmC;IACK,UAAU,SAAM;IACxD;sCACkC;IACtB,GAAG,SAAM;IACrB;oDACgD;IACJ,KAAK,UAAS;IAC1D,4FAA4F;IAChD,OAAO,UAAS;IAKnD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAS;IAMpC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAwB;IAChD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IAI1C,OAAO,CAAC,WAAW,CAAgB;IAE5C,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAUlD;IAED,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,MAAM,IAAI,cAAc,CAmFvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/stat/stat.class.js

@@ -0,0 +1,249 @@
+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 { LyraElement } from '../../internal/lyra-element.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { nextId, srOnly } from '../../internal/a11y.js';
+import { styles } from './stat.styles.js';
+/**
+ * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
+ * "metric row" / "KPI card" pattern common to dashboard UIs.
+ *
+ * @customElement lyra-stat
+ * @slot - Leading icon.
+ * @slot caption - Rich caption content (overrides the `caption` attribute).
+ * @slot spark - A sparkline (e.g. `<lyra-sparkline>`) or other compact trend
+ *   visual. `lyra-stat` only reserves the slot; it doesn't render one itself.
+ * @slot sub - Rich sub-line content (overrides the `sub` attribute).
+ * @csspart base - The component's root wrapper.
+ * @csspart icon - Container for the leading icon slot.
+ * @csspart label - The label text.
+ * @csspart value-row - Wrapper around the value and unit.
+ * @csspart value - The value text. Accessibly labelled by the `label` part (via
+ *   `aria-labelledby`) whenever `label` is set, so tabbing directly to this
+ *   (focusable when `exactValue` is set) control still announces which metric it is.
+ * @csspart unit - The unit text.
+ * @csspart trend - The trend pill.
+ * @csspart sub - Container for the `sub` attribute/slot.
+ * @csspart spark - Container for the `spark` slot.
+ * @csspart caption - Container for the caption attribute/slot.
+ * @csspart rows - Container for the `rows` breakdown list.
+ * @csspart row - A single breakdown row (one per `rows` entry).
+ * @csspart row-label - The label text of a breakdown row.
+ * @csspart row-value - The value text of a breakdown row. Shows the row's `exactValue` (if any) as
+ *   a hover/focus tooltip, same as the headline `value`, and is accessibly labelled by its
+ *   `row-label` (via `aria-labelledby`) the same way the headline `value` is.
+ */
+export class LyraStat extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.value = '';
+        this.unit = '';
+        this.variant = 'neutral';
+        this.trend = NaN;
+        this.caption = '';
+        /** Which trend direction counts as "good" — inverts arrow/color polarity for
+         *  cost/latency/error-rate-style metrics where a decrease is the win. */
+        this.goodDirection = 'up';
+        /** Breakdown rows rendered as a simple label/value list beneath the caption. */
+        this.rows = [];
+        /** Visual emphasis (e.g. for a "headline" stat in a group) — orthogonal to
+         *  the status `variant`; see the `[part='value']` selector below for how
+         *  the two combine. */
+        this.emphasis = false;
+        /** Exact value shown as a hover/focus tooltip on the headline `value` (e.g. `value="$1.2K"
+         *  exact-value="$1,204.37"`). Also makes `[part='value']` keyboard-focusable so the tooltip is
+         *  reachable without a pointer. */
+        this.exactValue = '';
+        /** A secondary line distinct from `caption` (e.g. a comparison-period label), rendered between the
+         *  trend pill and the caption. */
+        this.sub = '';
+        /** Renders `value` as smaller/lighter prose (e.g. a loading/status message) instead of the bold
+         *  numeric headline style, and hides `unit`. */
+        this.prose = false;
+        /** Tighter padding for constrained spaces — same convention as `lyra-empty`'s `compact`. */
+        this.compact = false;
+        // Same fix `lyra-empty` already established: `[part]:empty` never matches
+        // because the part always contains a literal `<slot>` child. Track real
+        // slot assignment in JS instead.
+        this.hasIcon = false;
+        this.hasCaptionSlot = false;
+        this.hasSparkSlot = false;
+        this.hasSubSlot = false;
+        // Stable id pairing `[part='label']` with `[part='value']` via
+        // aria-labelledby, so a keyboard user tabbing straight to the (focusable,
+        // tooltip-bearing) value still gets an accessible name like "Revenue
+        // $1.2K" instead of the bare value.
+        this.labelId = nextId('stat-label');
+        this.valueId = `${this.labelId}-value`;
+        // One id per `rows` entry, regenerated only when the `rows` array itself is
+        // reassigned (not on every render) so `aria-labelledby` references stay
+        // stable across unrelated re-renders.
+        this.rowLabelIds = [];
+        this.onIconSlotChange = (e) => {
+            this.hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onCaptionSlotChange = (e) => {
+            this.hasCaptionSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onSparkSlotChange = (e) => {
+            this.hasSparkSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onSubSlotChange = (e) => {
+            this.hasSubSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasIcon = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
+            this.hasCaptionSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'caption');
+            this.hasSparkSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'spark');
+            this.hasSubSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'sub');
+        }
+        if (changed.has('rows')) {
+            this.rowLabelIds = this.rows.map(() => nextId('stat-row-label'));
+        }
+    }
+    render() {
+        // Lit's built-in Number converter maps a removed/absent attribute to
+        // `null`, not NaN, even though the property is typed `number` — so
+        // `isNaN(this.trend)` alone is false for a cleared attribute and the pill
+        // would reappear showing a fabricated "unchanged, 0%". Treat null/undefined
+        // the same as NaN here instead of trusting the static type.
+        const hasTrend = this.trend != null && !isNaN(this.trend);
+        const rawDirection = this.trend > 0 ? 'up' : this.trend < 0 ? 'down' : 'flat';
+        const isGood = rawDirection === 'flat' ? null : rawDirection === this.goodDirection;
+        // The trend pill previously rendered literal ▲/▼ glyphs — font-dependent
+        // and inconsistent with the rest of the icon set — swapped for the
+        // shared chevronIcon(), rotated per direction via CSS on the wrapping
+        // [part='trend'].
+        const arrow = rawDirection === 'flat' ? '–' : chevronIcon();
+        const hasCaption = this.hasCaptionSlot || this.caption.length > 0;
+        const hasSub = this.hasSubSlot || this.sub.length > 0;
+        // The visible pill only ever shows the icon rotation + color to convey
+        // direction and good/bad polarity; both are invisible to screen readers,
+        // so mirror them into a plain-language sr-only announcement.
+        const trendAnnouncement = rawDirection === 'flat'
+            ? 'unchanged'
+            : `${rawDirection === 'up' ? 'increased' : 'decreased'} ${Math.abs(this.trend)}%${isGood == null ? '' : isGood ? ', good' : ', bad'}`;
+        return html `
+      <div part="base">
+        <span part="icon" ?hidden=${!this.hasIcon}
+          ><slot @slotchange=${this.onIconSlotChange}></slot
+        ></span>
+        <span part="label" id=${this.labelId}>${this.label}</span>
+        <div part="value-row">
+          <span
+            part="value"
+            id=${this.valueId}
+            title=${this.exactValue || nothing}
+            tabindex=${this.exactValue ? '0' : nothing}
+            aria-labelledby=${this.label ? `${this.labelId} ${this.valueId}` : nothing}
+            >${this.value}</span
+          >
+          <span part="unit">${this.unit}</span>
+        </div>
+        ${hasTrend
+            ? html `<span
+              part="trend"
+              data-direction=${rawDirection}
+              data-polarity=${isGood == null ? nothing : isGood ? 'good' : 'bad'}
+            >
+              <span aria-hidden="true">${arrow} ${Math.abs(this.trend)}%</span>
+              <span class="sr-only">${trendAnnouncement}</span>
+            </span>`
+            : nothing}
+        <div part="sub" ?hidden=${!hasSub}>
+          <slot name="sub" @slotchange=${this.onSubSlotChange}>${this.sub}</slot>
+        </div>
+        <div part="spark" ?hidden=${!this.hasSparkSlot}>
+          <slot name="spark" @slotchange=${this.onSparkSlotChange}></slot>
+        </div>
+        <div part="caption" ?hidden=${!hasCaption}>
+          <slot name="caption" @slotchange=${this.onCaptionSlotChange}>${this.caption}</slot>
+        </div>
+        <div part="rows" ?hidden=${this.rows.length === 0}>
+          ${this.rows.map((row, i) => {
+            const rowLabelId = this.rowLabelIds[i];
+            const rowValueId = `${rowLabelId}-value`;
+            return html `
+              <div part="row">
+                <span part="row-label" id=${rowLabelId}>${row.label}</span>
+                <span
+                  part="row-value"
+                  id=${rowValueId}
+                  title=${row.exactValue || nothing}
+                  tabindex=${row.exactValue ? '0' : nothing}
+                  aria-labelledby=${row.label ? `${rowLabelId} ${rowValueId}` : nothing}
+                  >${row.value}</span
+                >
+              </div>
+            `;
+        })}
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraStat.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraStat.prototype, "value", void 0);
+__decorate([
+    property()
+], LyraStat.prototype, "unit", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraStat.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number })
+], LyraStat.prototype, "trend", void 0);
+__decorate([
+    property()
+], LyraStat.prototype, "caption", void 0);
+__decorate([
+    property({ attribute: 'good-direction' })
+], LyraStat.prototype, "goodDirection", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraStat.prototype, "rows", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraStat.prototype, "emphasis", void 0);
+__decorate([
+    property({ attribute: 'exact-value' })
+], LyraStat.prototype, "exactValue", void 0);
+__decorate([
+    property()
+], LyraStat.prototype, "sub", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraStat.prototype, "prose", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraStat.prototype, "compact", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "hasIcon", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "hasCaptionSlot", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "hasSparkSlot", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "hasSubSlot", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "rowLabelIds", void 0);
+//# sourceMappingURL=stat.class.js.map

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

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

package/dist/components/stat/stat.d.ts

@@ -1,89 +1,2 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-export type StatVariant = 'neutral' | 'success' | 'warning' | 'danger';
-export type StatGoodDirection = 'up' | 'down';
-export interface StatRow {
-    label: string;
-    value: string;
-    /** Exact value shown as a hover/focus tooltip on this row's `row-value` (mirrors the headline
-     *  `exactValue`/`exact-value` behavior). Also makes this row's `[part='row-value']`
-     *  keyboard-focusable so the tooltip is reachable without a pointer. */
-    exactValue?: string;
-}
-/**
- * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
- * "metric row" / "KPI card" pattern common to dashboard UIs.
- *
- * @customElement lyra-stat
- * @slot - Leading icon.
- * @slot caption - Rich caption content (overrides the `caption` attribute).
- * @slot spark - A sparkline (e.g. `<lyra-sparkline>`) or other compact trend
- *   visual. `lyra-stat` only reserves the slot; it doesn't render one itself.
- * @slot sub - Rich sub-line content (overrides the `sub` attribute).
- * @csspart base - The component's root wrapper.
- * @csspart icon - Container for the leading icon slot.
- * @csspart label - The label text.
- * @csspart value-row - Wrapper around the value and unit.
- * @csspart value - The value text. Accessibly labelled by the `label` part (via
- *   `aria-labelledby`) whenever `label` is set, so tabbing directly to this
- *   (focusable when `exactValue` is set) control still announces which metric it is.
- * @csspart unit - The unit text.
- * @csspart trend - The trend pill.
- * @csspart sub - Container for the `sub` attribute/slot.
- * @csspart spark - Container for the `spark` slot.
- * @csspart caption - Container for the caption attribute/slot.
- * @csspart rows - Container for the `rows` breakdown list.
- * @csspart row - A single breakdown row (one per `rows` entry).
- * @csspart row-label - The label text of a breakdown row.
- * @csspart row-value - The value text of a breakdown row. Shows the row's `exactValue` (if any) as
- *   a hover/focus tooltip, same as the headline `value`, and is accessibly labelled by its
- *   `row-label` (via `aria-labelledby`) the same way the headline `value` is.
- */
-export declare class LyraStat extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    label: string;
-    value: string;
-    unit: string;
-    variant: StatVariant;
-    trend: number;
-    caption: string;
-    /** Which trend direction counts as "good" — inverts arrow/color polarity for
-     *  cost/latency/error-rate-style metrics where a decrease is the win. */
-    goodDirection: StatGoodDirection;
-    /** Breakdown rows rendered as a simple label/value list beneath the caption. */
-    rows: StatRow[];
-    /** Visual emphasis (e.g. for a "headline" stat in a group) — orthogonal to
-     *  the status `variant`; see the `[part='value']` selector below for how
-     *  the two combine. */
-    emphasis: boolean;
-    /** Exact value shown as a hover/focus tooltip on the headline `value` (e.g. `value="$1.2K"
-     *  exact-value="$1,204.37"`). Also makes `[part='value']` keyboard-focusable so the tooltip is
-     *  reachable without a pointer. */
-    exactValue: string;
-    /** A secondary line distinct from `caption` (e.g. a comparison-period label), rendered between the
-     *  trend pill and the caption. */
-    sub: string;
-    /** Renders `value` as smaller/lighter prose (e.g. a loading/status message) instead of the bold
-     *  numeric headline style, and hides `unit`. */
-    prose: boolean;
-    /** Tighter padding for constrained spaces — same convention as `lyra-empty`'s `compact`. */
-    compact: boolean;
-    private hasIcon;
-    private hasCaptionSlot;
-    private hasSparkSlot;
-    private hasSubSlot;
-    private readonly labelId;
-    private readonly valueId;
-    private rowLabelIds;
-    protected willUpdate(changed: PropertyValues): void;
-    private onIconSlotChange;
-    private onCaptionSlotChange;
-    private onSparkSlotChange;
-    private onSubSlotChange;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-stat': LyraStat;
-    }
-}
+export * from './stat.class.js';
+//# sourceMappingURL=stat.d.ts.map

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

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