@aceshooting/lyra-ui 1.0.0 → 1.1.0

package/dist/components/split/split.js

@@ -8,8 +8,14 @@ import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
+import { isRtl } from '../../internal/rtl.js';
 import { styles } from './split.styles.js';
 const KEYBOARD_STEP = 2;
+// Sentinel fallbacks so a one-sided constraint (only `minPx` or only
+// `maxPx`) can still be expressed as a 3-argument CSS `clamp()` in the
+// static layout, instead of needing two different flex-basis shapes.
+const NO_MIN_PX = 0;
+const NO_MAX_PX = 1_000_000;
 /**
  * `<lyra-split>` — resizable panels for dashboard layouts. Direct light-DOM
  * children are the panels; a divider is auto-inserted between each pair.
@@ -17,6 +23,7 @@ const KEYBOARD_STEP = 2;
  * @customElement lyra-split
  * @event lyra-resize - `detail: { sizes }`, fired on every drag step/release
  *   and every keyboard step.
+ * @slot - Panels to arrange side by side (or stacked, when `orientation="vertical"`); each direct child becomes one resizable panel.
  * @csspart base, divider
  */
 export class LyraSplit extends LyraElement {
@@ -25,41 +32,77 @@ export class LyraSplit extends LyraElement {
         this.sizes = [];
         this.min = 10;
         this.orientation = 'horizontal';
+        /** Optional fixed-pixel min/max per panel, index-aligned with `sizes`. A
+         *  `null`/missing entry leaves that panel purely percent-based (the
+         *  existing `min`-only behavior). `sizes`, the `lyra-resize` payload, and
+         *  localStorage persistence stay percent-based regardless — only the
+         *  effective clamp bounds change for a constrained panel. */
+        this.panelConstraints = [];
         this.panelCount = 0;
-        this.dragIndex = -1;
-        this.dragStartPos = 0;
-        this.dragStartSizes = [];
+        // Keyed by pointerId so an interrupted or concurrent (multi-touch) drag on
+        // one divider never reads or clobbers another pointer's drag state.
+        this.drags = new Map();
         this.onSlotChange = () => {
             this.panelCount = this.children.length;
             this.ensureSizes();
         };
         this.onPointerDown = (e, index) => {
-            this.dragIndex = index;
-            this.dragStartPos = this.orientation === 'vertical' ? e.clientY : e.clientX;
-            this.dragStartSizes = [...this.sizes];
+            const base = this.renderRoot.querySelector('[part="base"]');
+            this.drags.set(e.pointerId, {
+                index,
+                startPos: this.orientation === 'vertical' ? e.clientY : e.clientX,
+                startSizes: [...this.sizes],
+                base,
+            });
             e.target.setPointerCapture(e.pointerId);
             window.addEventListener('pointermove', this.onPointerMove);
             window.addEventListener('pointerup', this.onPointerUp);
+            // A drag can end without a pointerup: a system gesture / palm rejection
+            // can fire `pointercancel`, and losing capture (e.g. element removed)
+            // fires `lostpointercapture` — both need the same teardown as pointerup
+            // or the divider keeps "resizing" in response to unrelated movement.
+            window.addEventListener('pointercancel', this.onPointerUp);
+            window.addEventListener('lostpointercapture', this.onPointerUp);
         };
         this.onPointerMove = (e) => {
-            if (this.dragIndex < 0)
+            const drag = this.drags.get(e.pointerId);
+            if (!drag)
                 return;
-            const base = this.renderRoot.querySelector('[part="base"]');
-            const total = this.orientation === 'vertical' ? base.clientHeight : base.clientWidth;
+            const total = this.orientation === 'vertical' ? drag.base.clientHeight : drag.base.clientWidth;
             const pos = this.orientation === 'vertical' ? e.clientY : e.clientX;
-            const deltaPercent = ((pos - this.dragStartPos) / total) * 100;
-            this.sizes = this.clampPair(this.dragStartSizes, this.dragIndex, deltaPercent);
+            let deltaPercent = ((pos - drag.startPos) / total) * 100;
+            // Panels are ordered along the inline axis via CSS `order`, so under RTL
+            // `flex-direction: row` already renders panel[i] to the *right* of
+            // panel[i+1] — a physically-rightward drag has to shrink index instead
+            // of growing it to keep matching the visible panel under the pointer.
+            if (this.orientation === 'horizontal' && isRtl(this))
+                deltaPercent = -deltaPercent;
+            const paired = this.clampPair(drag.startSizes, drag.index, deltaPercent, total);
+            // Merge only this drag's pair into the live sizes so a concurrent drag
+            // on another divider (different pointerId) isn't clobbered.
+            const next = [...this.sizes];
+            next[drag.index] = paired[drag.index];
+            next[drag.index + 1] = paired[drag.index + 1];
+            this.sizes = next;
             this.emit('lyra-resize', { sizes: [...this.sizes] });
         };
-        this.onPointerUp = () => {
-            this.dragIndex = -1;
+        this.onPointerUp = (e) => {
+            if (!this.drags.has(e.pointerId))
+                return;
+            this.drags.delete(e.pointerId);
             this.persist();
-            window.removeEventListener('pointermove', this.onPointerMove);
-            window.removeEventListener('pointerup', this.onPointerUp);
+            if (this.drags.size === 0) {
+                window.removeEventListener('pointermove', this.onPointerMove);
+                window.removeEventListener('pointerup', this.onPointerUp);
+                window.removeEventListener('pointercancel', this.onPointerUp);
+                window.removeEventListener('lostpointercapture', this.onPointerUp);
+            }
         };
         this.onDividerKeyDown = (e, index) => {
-            const forwardKey = this.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
-            const backwardKey = this.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+            // Mirror the same swap as onPointerMove for horizontal+RTL.
+            const rtl = this.orientation === 'horizontal' && isRtl(this);
+            const forwardKey = this.orientation === 'vertical' ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = this.orientation === 'vertical' ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
             if (e.key === forwardKey) {
                 e.preventDefault();
                 this.applyDelta(index, KEYBOARD_STEP, true);
@@ -79,9 +122,12 @@ export class LyraSplit extends LyraElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        // Clean up any remaining event listeners
+        // Clean up any remaining event listeners from an in-flight drag.
+        this.drags.clear();
         window.removeEventListener('pointermove', this.onPointerMove);
         window.removeEventListener('pointerup', this.onPointerUp);
+        window.removeEventListener('pointercancel', this.onPointerUp);
+        window.removeEventListener('lostpointercapture', this.onPointerUp);
     }
     get storageFullKey() {
         return this.storageKey ? `lyra-split:${this.storageKey}:${this.panelCount}` : undefined;
@@ -102,7 +148,12 @@ export class LyraSplit extends LyraElement {
             return;
         try {
             const parsed = JSON.parse(raw);
-            if (Array.isArray(parsed) && parsed.length === this.panelCount)
+            // A persisted layout can predate a since-raised `min`; reject it rather
+            // than restoring sizes that are already stuck below the current floor.
+            const isValid = Array.isArray(parsed) &&
+                parsed.length === this.panelCount &&
+                parsed.every((n) => typeof n === 'number' && Number.isFinite(n) && n >= this.min);
+            if (isValid)
                 this.sizes = parsed;
         }
         catch {
@@ -121,23 +172,84 @@ export class LyraSplit extends LyraElement {
         }
     }
     ensureSizes() {
-        if (this.sizes.length === this.panelCount && this.panelCount > 0)
+        if (this.panelCount === this.sizes.length)
             return;
-        const equal = 100 / Math.max(1, this.panelCount);
-        this.sizes = Array.from({ length: this.panelCount }, () => equal);
+        if (this.panelCount <= 0) {
+            this.sizes = [];
+            return;
+        }
+        if (this.sizes.length === 0) {
+            const equal = 100 / this.panelCount;
+            this.sizes = Array.from({ length: this.panelCount }, () => equal);
+            return;
+        }
+        // A panel was added or removed: rebalance the existing sizes
+        // proportionally instead of discarding every panel's customized size,
+        // so an unrelated panel-count change doesn't wipe the whole layout.
+        const diff = this.panelCount - this.sizes.length;
+        if (diff > 0) {
+            const newShare = 100 / this.panelCount;
+            const scale = (100 - newShare * diff) / 100;
+            this.sizes = [
+                ...this.sizes.map((s) => s * scale),
+                ...Array.from({ length: diff }, () => newShare),
+            ];
+        }
+        else {
+            const kept = this.sizes.slice(0, this.panelCount);
+            const removedTotal = this.sizes.slice(this.panelCount).reduce((sum, s) => sum + s, 0);
+            const keptTotal = kept.reduce((sum, s) => sum + s, 0) || 1;
+            this.sizes = kept.map((s) => s + (s / keptTotal) * removedTotal);
+        }
     }
-    clampPair(sizes, i, delta) {
+    /** The container extent (px) along the resize axis, read live so a
+     *  container resize between calls is always picked up — same live read
+     *  `onPointerMove` already does via `drag.base.clientWidth/clientHeight`. */
+    getContainerSize() {
+        const base = this.renderRoot.querySelector('[part="base"]');
+        if (!base)
+            return 0;
+        return this.orientation === 'vertical' ? base.clientHeight : base.clientWidth;
+    }
+    /** Resolves panel `index`'s effective percent min/max for this clamp pass:
+     *  a `panelConstraints` entry's px bound converted against the live
+     *  `containerSize`, or the component's plain percent `min` (no upper
+     *  bound) when the panel carries no constraint for that side. */
+    percentBounds(index, containerSize) {
+        const constraint = this.panelConstraints[index];
+        let min = this.min;
+        let max = Infinity;
+        if (constraint && containerSize > 0) {
+            if (constraint.minPx != null)
+                min = (constraint.minPx / containerSize) * 100;
+            if (constraint.maxPx != null)
+                max = (constraint.maxPx / containerSize) * 100;
+        }
+        return { min, max };
+    }
+    clampPair(sizes, i, delta, containerSize = 0) {
         const next = [...sizes];
-        const a = next[i] + delta;
-        const b = next[i + 1] - delta;
-        if (a < this.min || b < this.min)
-            return sizes;
-        next[i] = a;
-        next[i + 1] = b;
+        const pairTotal = next[i] + next[i + 1];
+        const a = this.percentBounds(i, containerSize);
+        const b = this.percentBounds(i + 1, containerSize);
+        // Panel i's own bounds, further narrowed by panel i+1's bounds (its
+        // partner's min/max caps how much i can grow/shrink within the pair).
+        const loRaw = Math.max(a.min, pairTotal - b.max);
+        const hiRaw = Math.min(a.max, pairTotal - b.min);
+        // Clamp *toward* the bound instead of rejecting the whole move when the
+        // result is still outside it — otherwise a pair that starts under its
+        // combined min (e.g. an equal split across many panels) can never be
+        // moved at all, since every step recomputes the same rejected delta from
+        // the same untouched starting sizes.
+        const lo = Math.min(loRaw, pairTotal);
+        const hi = Math.max(hiRaw, lo);
+        const clampedA = Math.min(Math.max(next[i] + delta, lo), hi);
+        next[i] = clampedA;
+        next[i + 1] = pairTotal - clampedA;
         return next;
     }
     applyDelta(index, delta, commit) {
-        this.sizes = this.clampPair(this.sizes, index, delta);
+        this.sizes = this.clampPair(this.sizes, index, delta, this.getContainerSize());
         this.emit('lyra-resize', { sizes: [...this.sizes] });
         if (commit)
             this.persist();
@@ -147,7 +259,15 @@ export class LyraSplit extends LyraElement {
             this.ensureSizes();
         const panels = [...this.children];
         panels.forEach((panel, i) => {
-            panel.style.flex = `0 0 ${this.sizes[i] ?? 0}%`;
+            const percent = this.sizes[i] ?? 0;
+            const constraint = this.panelConstraints[i];
+            // clamp() mixes units natively, so a constrained panel stays pinned
+            // between its px bounds across container resizes with no extra
+            // ResizeObserver — the browser re-evaluates it on every layout pass.
+            panel.style.flex =
+                constraint && (constraint.minPx != null || constraint.maxPx != null)
+                    ? `0 0 clamp(${constraint.minPx ?? NO_MIN_PX}px, ${percent}%, ${constraint.maxPx ?? NO_MAX_PX}px)`
+                    : `0 0 ${percent}%`;
             panel.style.order = String(i * 2);
         });
     }
@@ -161,6 +281,7 @@ export class LyraSplit extends LyraElement {
             dividers.push(html `<div
         part="divider"
         role="separator"
+        aria-label="Resize divider between panel ${i + 1} and panel ${i + 2}"
         aria-orientation=${this.orientation === 'vertical' ? 'horizontal' : 'vertical'}
         aria-valuenow=${Math.round(this.sizes[i] ?? 0)}
         aria-valuemin=${this.min}
@@ -186,6 +307,9 @@ __decorate([
 __decorate([
     property({ attribute: 'storage-key' })
 ], LyraSplit.prototype, "storageKey", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraSplit.prototype, "panelConstraints", void 0);
 __decorate([
     state()
 ], LyraSplit.prototype, "panelCount", void 0);

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

@@ -3,3 +3,5 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
+export declare const Vertical: Story;
+export declare const FixedPixelRangePanel: Story;

package/dist/components/split/split.stories.js

@@ -14,3 +14,23 @@ export const Default = {
     </lyra-split>
   `,
 };
+export const Vertical = {
+    render: () => html `
+    <lyra-split orientation="vertical" style="height: 16rem; border: 1px solid #ddd">
+      <div style="padding: 0.5rem">Panel A</div>
+      <div style="padding: 0.5rem">Panel B</div>
+      <div style="padding: 0.5rem">Panel C</div>
+    </lyra-split>
+  `,
+};
+export const FixedPixelRangePanel = {
+    render: () => html `
+    <lyra-split
+      style="height: 8rem; border: 1px solid #ddd"
+      .panelConstraints=${[{ minPx: 160, maxPx: 320 }, null]}
+    >
+      <div style="padding: 0.5rem">Sidebar — pinned between 160px and 320px regardless of the split's own percent-based sizing or a container resize</div>
+      <div style="padding: 0.5rem">Main content — fills the rest, percent-based as usual</div>
+    </lyra-split>
+  `,
+};

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

@@ -2,6 +2,10 @@ import { type TemplateResult } 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;
+}
 /**
  * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
  * "metric row" / "KPI card" pattern common to dashboard UIs.
@@ -9,7 +13,21 @@ export type StatGoodDirection = 'up' | 'down';
  * @customElement lyra-stat
  * @slot - Leading icon.
  * @slot caption - Rich caption content (overrides the `caption` attribute).
- * @csspart base, icon, label, value, unit, trend, caption
+ * @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.
+ * @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.
+ * @csspart unit - The unit text.
+ * @csspart trend - The trend pill.
+ * @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.
  */
 export declare class LyraStat extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -22,11 +40,19 @@ export declare class LyraStat extends LyraElement {
     /** 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;
     private hasIcon;
     private hasCaptionSlot;
+    private hasSparkSlot;
     protected willUpdate(): void;
     private onIconSlotChange;
     private onCaptionSlotChange;
+    private onSparkSlotChange;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/stat/stat.js

@@ -9,6 +9,7 @@ import { property, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { chevronIcon } from '../../internal/icons.js';
+import { srOnly } from '../../internal/a11y.js';
 import { styles } from './stat.styles.js';
 /**
  * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
@@ -17,7 +18,21 @@ import { styles } from './stat.styles.js';
  * @customElement lyra-stat
  * @slot - Leading icon.
  * @slot caption - Rich caption content (overrides the `caption` attribute).
- * @csspart base, icon, label, value, unit, trend, caption
+ * @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.
+ * @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.
+ * @csspart unit - The unit text.
+ * @csspart trend - The trend pill.
+ * @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.
  */
 export class LyraStat extends LyraElement {
     constructor() {
@@ -31,23 +46,34 @@ export class LyraStat extends LyraElement {
         /** 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;
         // 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.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;
+        };
     }
-    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
     willUpdate() {
         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');
         }
     }
     render() {
@@ -60,6 +86,12 @@ export class LyraStat extends LyraElement {
         // [part='trend'].
         const arrow = rawDirection === 'flat' ? '–' : chevronIcon();
         const hasCaption = this.hasCaptionSlot || this.caption.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}
@@ -76,12 +108,24 @@ export class LyraStat extends LyraElement {
               data-direction=${rawDirection}
               data-polarity=${isGood == null ? nothing : isGood ? 'good' : 'bad'}
             >
-              <span aria-hidden="true">${arrow}</span> ${Math.abs(this.trend)}%
+              <span aria-hidden="true">${arrow} ${Math.abs(this.trend)}%</span>
+              <span class="sr-only">${trendAnnouncement}</span>
             </span>`
             : nothing}
+        <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) => html `
+              <div part="row">
+                <span part="row-label">${row.label}</span>
+                <span part="row-value">${row.value}</span>
+              </div>
+            `)}
+        </div>
       </div>
     `;
     }
@@ -107,10 +151,19 @@ __decorate([
 __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([
     state()
 ], LyraStat.prototype, "hasIcon", void 0);
 __decorate([
     state()
 ], LyraStat.prototype, "hasCaptionSlot", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "hasSparkSlot", void 0);
 defineElement('stat', LyraStat);

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

@@ -3,3 +3,6 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Gallery: Story;
+export declare const SparkAndBreakdown: Story;
+export declare const BreakdownRows: Story;
+export declare const Emphasis: Story;

package/dist/components/stat/stat.stories.js

@@ -7,10 +7,58 @@ const meta = {
 export default meta;
 export const Gallery = {
     render: () => html `
-    <div style="display:flex; gap:1rem; flex-wrap:wrap;">
+    <div class="flex flex-wrap gap-4">
       <lyra-stat label="Revenue" value="12.4" unit="k€" trend="3.2" variant="success"></lyra-stat>
       <lyra-stat label="Errors" value="128" trend="-5.1" variant="danger"></lyra-stat>
+      <lyra-stat label="Pending Reviews" value="42" trend="8.6" variant="warning"></lyra-stat>
       <lyra-stat label="Sessions" value="9,204"></lyra-stat>
+      <lyra-stat label="Uptime" value="99.98" unit="%" caption="Last 30 days">
+        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="9"></circle>
+        </svg>
+      </lyra-stat>
+      <lyra-stat label="Latency" value="182" unit="ms" trend="14" good-direction="down">
+        <span slot="caption">Median over <strong>1,000</strong> requests</span>
+      </lyra-stat>
+    </div>
+  `,
+};
+export const SparkAndBreakdown = {
+    render: () => html `
+    <div class="flex flex-wrap gap-4">
+      <lyra-stat label="Revenue" value="12.4" unit="k€" trend="3.2" variant="success" caption="Last 30 days">
+        <lyra-sparkline
+          slot="spark"
+          type="line"
+          .values=${[4, 6, 5, 8, 7, 9, 12, 10, 13, 12.4]}
+        ></lyra-sparkline>
+      </lyra-stat>
+      <lyra-stat label="Sessions" value="9,204" caption="By channel">
+        <lyra-sparkline slot="spark" type="bar" .values=${[3, 5, 4, 6, 8, 7, 9]}></lyra-sparkline>
+      </lyra-stat>
+    </div>
+  `,
+};
+export const BreakdownRows = {
+    render: () => html `
+    <div class="flex flex-wrap gap-4">
+      <lyra-stat label="Sessions" value="9,204" caption="By channel"></lyra-stat>
+    </div>
+  `,
+    play: async ({ canvasElement }) => {
+        const el = canvasElement.querySelector('lyra-stat');
+        el.rows = [
+            { label: 'Direct', value: '64%' },
+            { label: 'Referral', value: '21%' },
+            { label: 'Other', value: '15%' },
+        ];
+    },
+};
+export const Emphasis = {
+    render: () => html `
+    <div class="flex flex-wrap gap-4">
+      <lyra-stat label="Revenue" value="12.4" unit="k€" trend="3.2" emphasis></lyra-stat>
+      <lyra-stat label="Errors" value="128" trend="-5.1" variant="danger" emphasis></lyra-stat>
     </div>
   `,
 };

package/dist/components/stat/stat.styles.js

@@ -76,6 +76,14 @@ export const styles = css `
   :host([variant='danger']) [part='value'] {
     color: var(--lyra-color-danger);
   }
+  [part='spark'] {
+    /* Consumers compose their own <lyra-sparkline slot="spark">; this part
+       only needs to reserve width for it. */
+    display: block;
+  }
+  [part='spark'][hidden] {
+    display: none;
+  }
   [part='caption'] {
     font-size: 0.8125rem;
     color: var(--lyra-color-text-quiet);
@@ -83,4 +91,40 @@ export const styles = css `
   [part='caption'][hidden] {
     display: none;
   }
+  [part='rows'] {
+    display: flex;
+    flex-direction: column;
+    /* Slightly tighter than the card's own --lyra-space-xs gap so the
+       breakdown list reads as one nested group rather than siblings of
+       equal weight with label/value/caption. */
+    gap: 0.125rem;
+  }
+  [part='rows'][hidden] {
+    display: none;
+  }
+  [part='row'] {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+  }
+  [part='row-label'] {
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='row-value'] {
+    font-family: ui-monospace, SFMono-Regular, monospace;
+    font-weight: 600;
+  }
+  /* Orthogonal to the status variant: an accent edge that marks a stat as
+     visually emphasized (e.g. the "headline" stat in a group) regardless of
+     status color. */
+  :host([emphasis]) [part='base'] {
+    border-inline-start: 3px solid var(--lyra-color-brand);
+  }
+  /* Status semantics win over visual emphasis: only tint the value with the
+     brand color when there's no status variant already claiming it. */
+  :host([emphasis][variant='neutral']) [part='value'] {
+    color: var(--lyra-color-brand);
+  }
 `;