@deepfuture/dui-templates 1.0.0

package/metrics/risk-gauge.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-risk-gauge>` — A semicircular arc gauge with a central value,
+ * severity label, and optional trend indicator.
+ *
+ * The arc fills proportionally to `value` (0–100). The `severity` prop
+ * controls the arc color (critical, high, medium, low, info).
+ *
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart gauge - The SVG gauge area.
+ * @csspart value - The central value text.
+ * @csspart label - The metric label.
+ * @csspart trend - The trend row.
+ */
+export declare class DuiRiskGauge extends LitElement {
+    #private;
+    static tagName: "dui-risk-gauge";
+    static styles: import("lit").CSSResult[];
+    /** Metric label displayed below the gauge. */
+    accessor label: string;
+    /** Gauge value (0–100). */
+    accessor value: number;
+    /** Severity level — determines arc color (critical | high | medium | low | info). */
+    accessor severity: string;
+    /** Trend text (e.g. "+5 pts", "-12%"). */
+    accessor trend: string;
+    /** Trend direction (up | down | stable). */
+    accessor trendDirection: string;
+    render(): TemplateResult;
+}

package/metrics/risk-gauge.js

@@ -0,0 +1,289 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, html, LitElement, nothing, svg } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+/** Severity → color token mapping. */
+const SEVERITY_COLORS = {
+    critical: "var(--destructive)",
+    high: "var(--destructive-text)",
+    medium: "var(--accent)",
+    low: "var(--accent-text)",
+    info: "var(--text-3)",
+};
+/** Trend direction → arrow path. */
+const TREND_ARROWS = {
+    up: "M12 19V5M5 12l7-7 7 7",
+    down: "M12 5v14M19 12l-7 7-7-7",
+    stable: "M5 12h14",
+};
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  article {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-3);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+  }
+
+  /* ── Arc gauge ── */
+  .gauge {
+    position: relative;
+    width: 9rem;
+    height: 5.5rem;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  .gauge svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .center-value {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-0_5);
+    padding-bottom: var(--space-1);
+  }
+
+  .center-number {
+    /* font-family: var(--font-mono); */
+    font-size: var(--text-2xl);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-none);
+    color: var(--foreground);
+  }
+
+  .severity-label {
+    font-family: var(--font-sans);
+    font-size: var(--text-2xs);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-widest);
+    text-transform: uppercase;
+    line-height: var(--line-height-none);
+  }
+
+  /* ── Label + trend row ── */
+  .label {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-snug);
+    color: var(--foreground);
+    text-align: center;
+  }
+
+  .trend-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+  }
+
+  /* ── Actions ── */
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-top: var(--space-1);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-risk-gauge>` — A semicircular arc gauge with a central value,
+ * severity label, and optional trend indicator.
+ *
+ * The arc fills proportionally to `value` (0–100). The `severity` prop
+ * controls the arc color (critical, high, medium, low, info).
+ *
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart gauge - The SVG gauge area.
+ * @csspart value - The central value text.
+ * @csspart label - The metric label.
+ * @csspart trend - The trend row.
+ */
+let DuiRiskGauge = (() => {
+    let _classSuper = LitElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _severity_decorators;
+    let _severity_initializers = [];
+    let _severity_extraInitializers = [];
+    let _trend_decorators;
+    let _trend_initializers = [];
+    let _trend_extraInitializers = [];
+    let _trendDirection_decorators;
+    let _trendDirection_initializers = [];
+    let _trendDirection_extraInitializers = [];
+    return class DuiRiskGauge extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property()];
+            _value_decorators = [property({ type: Number })];
+            _severity_decorators = [property()];
+            _trend_decorators = [property()];
+            _trendDirection_decorators = [property({ attribute: "trend-direction" })];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _severity_decorators, { kind: "accessor", name: "severity", static: false, private: false, access: { has: obj => "severity" in obj, get: obj => obj.severity, set: (obj, value) => { obj.severity = value; } }, metadata: _metadata }, _severity_initializers, _severity_extraInitializers);
+            __esDecorate(this, null, _trend_decorators, { kind: "accessor", name: "trend", static: false, private: false, access: { has: obj => "trend" in obj, get: obj => obj.trend, set: (obj, value) => { obj.trend = value; } }, metadata: _metadata }, _trend_initializers, _trend_extraInitializers);
+            __esDecorate(this, null, _trendDirection_decorators, { kind: "accessor", name: "trendDirection", static: false, private: false, access: { has: obj => "trendDirection" in obj, get: obj => obj.trendDirection, set: (obj, value) => { obj.trendDirection = value; } }, metadata: _metadata }, _trendDirection_initializers, _trendDirection_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-risk-gauge";
+        static styles = [base, styles];
+        #label_accessor_storage = __runInitializers(this, _label_initializers, "");
+        /** Metric label displayed below the gauge. */
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _value_initializers, 0));
+        /** Gauge value (0–100). */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #severity_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _severity_initializers, ""));
+        /** Severity level — determines arc color (critical | high | medium | low | info). */
+        get severity() { return this.#severity_accessor_storage; }
+        set severity(value) { this.#severity_accessor_storage = value; }
+        #trend_accessor_storage = (__runInitializers(this, _severity_extraInitializers), __runInitializers(this, _trend_initializers, ""));
+        /** Trend text (e.g. "+5 pts", "-12%"). */
+        get trend() { return this.#trend_accessor_storage; }
+        set trend(value) { this.#trend_accessor_storage = value; }
+        #trendDirection_accessor_storage = (__runInitializers(this, _trend_extraInitializers), __runInitializers(this, _trendDirection_initializers, ""));
+        /** Trend direction (up | down | stable). */
+        get trendDirection() { return this.#trendDirection_accessor_storage; }
+        set trendDirection(value) { this.#trendDirection_accessor_storage = value; }
+        #renderArc() {
+            // Semi-circle arc: 180° from left to right
+            // viewBox centers a semicircle with radius 40, stroke-width 8
+            const R = 40;
+            const CX = 50;
+            const CY = 50;
+            const circumference = Math.PI * R; // half circle
+            const clamped = Math.max(0, Math.min(100, this.value));
+            const filled = (clamped / 100) * circumference;
+            const sevColor = SEVERITY_COLORS[this.severity.toLowerCase()] ?? "var(--accent)";
+            // Arc from (10,50) to (90,50) — a semicircle
+            const arcPath = `M ${CX - R} ${CY} A ${R} ${R} 0 0 1 ${CX + R} ${CY}`;
+            return html `
+      <svg viewBox="0 0 100 55" fill="none" part="gauge">
+        ${svg `
+          <!-- Track -->
+          <path d="${arcPath}" stroke="var(--border)" stroke-width="8"
+            stroke-linecap="round" fill="none" />
+          <!-- Fill -->
+          <path d="${arcPath}" stroke="${sevColor}" stroke-width="8"
+            stroke-linecap="round" fill="none"
+            stroke-dasharray="${circumference}"
+            stroke-dashoffset="${circumference - filled}" />
+        `}
+      </svg>
+    `;
+        }
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        render() {
+            const sevColor = SEVERITY_COLORS[this.severity.toLowerCase()] ?? "var(--accent)";
+            const trendArrow = TREND_ARROWS[this.trendDirection.toLowerCase()];
+            const trendColor = this.trendDirection === "up" ? "var(--destructive-text)"
+                : this.trendDirection === "down" ? "var(--accent-text)"
+                    : "var(--text-3)";
+            return html `
+      <article part="article">
+        <div class="gauge">
+          ${this.#renderArc()}
+          <div class="center-value">
+            <span class="center-number" part="value">${this.value}</span>
+            ${this.severity
+                ? html `<span class="severity-label" style="color: ${sevColor}">${this.severity}</span>`
+                : nothing}
+          </div>
+        </div>
+
+        ${this.label
+                ? html `<span class="label" part="label">${this.label}</span>`
+                : nothing}
+
+        ${this.trend && trendArrow
+                ? html `<span class="trend-row" part="trend" style="color: ${trendColor}">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                stroke-linejoin="round"><path d="${trendArrow}"/></svg>
+              ${this.trend}
+            </span>`
+                : nothing}
+
+        <div class="actions" hidden>
+          <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _trendDirection_extraInitializers);
+        }
+    };
+})();
+export { DuiRiskGauge };
+customElements.define(DuiRiskGauge.tagName, DuiRiskGauge);

package/metrics/score-item.d.ts

@@ -0,0 +1,33 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/badge";
+import "@deepfuture/dui-components/separator";
+/**
+ * `<dui-score-item>` — An entity with a prominent score and optional sub-metric breakdown.
+ *
+ * Displays an entity name with an optional subtitle on the left, and a large score
+ * with an optional label on the right. Below the main row, slotted sub-metrics
+ * provide additional breakdowns.
+ *
+ * @slot sub-metrics - Additional metric breakdowns below the main row.
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart entity - The entity name.
+ * @csspart score - The score value.
+ * @csspart sub-metrics - The sub-metrics row.
+ */
+export declare class DuiScoreItem extends LitElement {
+    #private;
+    static tagName: "dui-score-item";
+    static styles: import("lit").CSSResult[];
+    /** Entity name (e.g. country, department, agent). */
+    accessor entity: string;
+    /** Secondary context below the entity name. */
+    accessor subtitle: string;
+    /** Prominent score value (e.g. "87", "A+", "9.4"). */
+    accessor score: string;
+    /** Label beneath the score (e.g. "Risk Score", "Rating"). */
+    accessor scoreLabel: string;
+    /** Severity level — maps to badge for optional tagging (critical | high | medium | low). */
+    accessor severity: string;
+    render(): TemplateResult;
+}

package/metrics/score-item.js

@@ -0,0 +1,253 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, html, LitElement, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import "@deepfuture/dui-components/badge";
+import "@deepfuture/dui-components/separator";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  article {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0);
+    padding: var(--space-3);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-1);
+    transition: background var(--duration-fast) ease;
+  }
+
+  article:hover {
+    background: var(--surface-2);
+  }
+
+  /* ── Top row: entity + score ── */
+  .top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+
+  .entity-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0_5);
+    min-width: 0;
+  }
+
+  .entity {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-snug);
+    color: var(--foreground);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  .subtitle {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    color: var(--text-2);
+  }
+
+  .score-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--space-0_5);
+    flex-shrink: 0;
+  }
+
+  .score {
+    font-size: var(--text-2xl);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--letter-spacing-normal);
+    line-height: var(--line-height-tight);
+    color: var(--foreground);
+  }
+
+  .score-label {
+    font-family: var(--font-sans);
+    font-size: var(--text-2xs);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-widest);
+    text-transform: uppercase;
+    line-height: var(--line-height-normal);
+    color: var(--text-3);
+  }
+
+  /* ── Sub-metrics row ── */
+  .sub-metrics {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+  }
+
+  .sub-metrics[hidden] {
+    display: none;
+  }
+
+  /* ── Actions ── */
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .actions[hidden] {
+    display: none;
+  }
+`;
+/**
+ * `<dui-score-item>` — An entity with a prominent score and optional sub-metric breakdown.
+ *
+ * Displays an entity name with an optional subtitle on the left, and a large score
+ * with an optional label on the right. Below the main row, slotted sub-metrics
+ * provide additional breakdowns.
+ *
+ * @slot sub-metrics - Additional metric breakdowns below the main row.
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart entity - The entity name.
+ * @csspart score - The score value.
+ * @csspart sub-metrics - The sub-metrics row.
+ */
+let DuiScoreItem = (() => {
+    let _classSuper = LitElement;
+    let _entity_decorators;
+    let _entity_initializers = [];
+    let _entity_extraInitializers = [];
+    let _subtitle_decorators;
+    let _subtitle_initializers = [];
+    let _subtitle_extraInitializers = [];
+    let _score_decorators;
+    let _score_initializers = [];
+    let _score_extraInitializers = [];
+    let _scoreLabel_decorators;
+    let _scoreLabel_initializers = [];
+    let _scoreLabel_extraInitializers = [];
+    let _severity_decorators;
+    let _severity_initializers = [];
+    let _severity_extraInitializers = [];
+    return class DuiScoreItem extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _entity_decorators = [property()];
+            _subtitle_decorators = [property()];
+            _score_decorators = [property()];
+            _scoreLabel_decorators = [property({ attribute: "score-label" })];
+            _severity_decorators = [property()];
+            __esDecorate(this, null, _entity_decorators, { kind: "accessor", name: "entity", static: false, private: false, access: { has: obj => "entity" in obj, get: obj => obj.entity, set: (obj, value) => { obj.entity = value; } }, metadata: _metadata }, _entity_initializers, _entity_extraInitializers);
+            __esDecorate(this, null, _subtitle_decorators, { kind: "accessor", name: "subtitle", static: false, private: false, access: { has: obj => "subtitle" in obj, get: obj => obj.subtitle, set: (obj, value) => { obj.subtitle = value; } }, metadata: _metadata }, _subtitle_initializers, _subtitle_extraInitializers);
+            __esDecorate(this, null, _score_decorators, { kind: "accessor", name: "score", static: false, private: false, access: { has: obj => "score" in obj, get: obj => obj.score, set: (obj, value) => { obj.score = value; } }, metadata: _metadata }, _score_initializers, _score_extraInitializers);
+            __esDecorate(this, null, _scoreLabel_decorators, { kind: "accessor", name: "scoreLabel", static: false, private: false, access: { has: obj => "scoreLabel" in obj, get: obj => obj.scoreLabel, set: (obj, value) => { obj.scoreLabel = value; } }, metadata: _metadata }, _scoreLabel_initializers, _scoreLabel_extraInitializers);
+            __esDecorate(this, null, _severity_decorators, { kind: "accessor", name: "severity", static: false, private: false, access: { has: obj => "severity" in obj, get: obj => obj.severity, set: (obj, value) => { obj.severity = value; } }, metadata: _metadata }, _severity_initializers, _severity_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-score-item";
+        static styles = [base, styles];
+        #entity_accessor_storage = __runInitializers(this, _entity_initializers, "");
+        /** Entity name (e.g. country, department, agent). */
+        get entity() { return this.#entity_accessor_storage; }
+        set entity(value) { this.#entity_accessor_storage = value; }
+        #subtitle_accessor_storage = (__runInitializers(this, _entity_extraInitializers), __runInitializers(this, _subtitle_initializers, ""));
+        /** Secondary context below the entity name. */
+        get subtitle() { return this.#subtitle_accessor_storage; }
+        set subtitle(value) { this.#subtitle_accessor_storage = value; }
+        #score_accessor_storage = (__runInitializers(this, _subtitle_extraInitializers), __runInitializers(this, _score_initializers, ""));
+        /** Prominent score value (e.g. "87", "A+", "9.4"). */
+        get score() { return this.#score_accessor_storage; }
+        set score(value) { this.#score_accessor_storage = value; }
+        #scoreLabel_accessor_storage = (__runInitializers(this, _score_extraInitializers), __runInitializers(this, _scoreLabel_initializers, ""));
+        /** Label beneath the score (e.g. "Risk Score", "Rating"). */
+        get scoreLabel() { return this.#scoreLabel_accessor_storage; }
+        set scoreLabel(value) { this.#scoreLabel_accessor_storage = value; }
+        #severity_accessor_storage = (__runInitializers(this, _scoreLabel_extraInitializers), __runInitializers(this, _severity_initializers, ""));
+        /** Severity level — maps to badge for optional tagging (critical | high | medium | low). */
+        get severity() { return this.#severity_accessor_storage; }
+        set severity(value) { this.#severity_accessor_storage = value; }
+        #onSlotChange(e) {
+            const slot = e.target;
+            slot.parentElement.hidden = slot.assignedElements().length === 0;
+        }
+        render() {
+            return html `
+      <article part="article">
+        <div class="top">
+          <div class="entity-group">
+            <span class="entity" part="entity">${this.entity}</span>
+            ${this.subtitle
+                ? html `<span class="subtitle">${this.subtitle}</span>`
+                : nothing}
+          </div>
+
+          <div class="score-group">
+            <span class="score" part="score">${this.score}</span>
+            ${this.scoreLabel
+                ? html `<span class="score-label">${this.scoreLabel}</span>`
+                : nothing}
+          </div>
+        </div>
+
+        <div class="sub-metrics" part="sub-metrics" hidden>
+          <slot name="sub-metrics" @slotchange=${this.#onSlotChange}></slot>
+        </div>
+
+        <div class="actions" hidden>
+          <slot name="actions" @slotchange=${this.#onSlotChange}></slot>
+        </div>
+      </article>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _severity_extraInitializers);
+        }
+    };
+})();
+export { DuiScoreItem };
+customElements.define(DuiScoreItem.tagName, DuiScoreItem);

package/metrics/stat-card.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, type TemplateResult } from "lit";
+import "@deepfuture/dui-components/icon";
+/**
+ * `<dui-stat-card>` — A single metric card displaying a label, prominent value,
+ * optional trend indicator, and description text.
+ *
+ * @slot actions - Optional action buttons or links.
+ * @csspart article - The outer container.
+ * @csspart label - The metric label.
+ * @csspart value - The metric value.
+ * @csspart trend - The trend indicator.
+ * @csspart description - The description text.
+ */
+export declare class DuiStatCard extends LitElement {
+    #private;
+    static tagName: "dui-stat-card";
+    static styles: import("lit").CSSResult[];
+    /** Metric label (e.g. "Total Events", "Response Time"). */
+    accessor label: string;
+    /** Primary metric value (e.g. "1,284", "$42.5K", "99.9%"). */
+    accessor value: string;
+    /** Trend text (e.g. "+12%", "-3.2%", "0%"). */
+    accessor trend: string;
+    /** Trend direction — determines arrow and color (up | down | stable). */
+    accessor trendDirection: string;
+    /** Supporting context text. */
+    accessor description: string;
+    render(): TemplateResult;
+}