@cognivo/components 0.8.0

package/dist/components/cg-meter/cg-meter.js

@@ -0,0 +1,204 @@
+import { css as d, LitElement as m, nothing as l, html as u, svg as g } from "lit";
+import { property as c, customElement as v } from "lit/decorators.js";
+import { h as p, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (a, o, n, t) => {
+  for (var i = t > 1 ? void 0 : t ? w(o, n) : o, e = a.length - 1, h; e >= 0; e--)
+    (h = a[e]) && (i = (t ? h(o, n, i) : h(i)) || i);
+  return t && i && b(o, n, i), i;
+};
+let r = class extends m {
+  constructor() {
+    super(...arguments), this.value = 0, this.min = 0, this.max = 100, this.low = null, this.high = null, this.optimum = null, this.label = "", this.variant = "linear", this.size = "md", this.showValue = !1, this.disabled = !1;
+  }
+  /** Compute color class from thresholds, mirroring <meter> semantics. */
+  _level() {
+    const { value: a, min: o, max: n } = this, t = this.low ?? o, i = this.high ?? n, e = this.optimum;
+    return a >= t && a <= i ? e == null || e >= t && e <= i ? "ok" : "warn" : e == null || a < t && e > i || a > i && e < t ? "bad" : "warn";
+  }
+  _pct() {
+    const a = this.max - this.min;
+    return a <= 0 ? 0 : (Math.max(this.min, Math.min(this.max, this.value)) - this.min) / a * 100;
+  }
+  render() {
+    const a = this._level(), o = this._pct(), n = this.showValue ? `${Math.round(o)}%` : "", t = this.label ? "cg-meter-label" : void 0;
+    if (this.variant === "circular") {
+      const e = 2 * Math.PI * 42, h = e - o / 100 * e;
+      return u`
+        ${this.label ? u`
+          <div class="header">
+            <span class="label" id=${t}>${this.label}</span>
+          </div>
+        ` : l}
+        <div class="circular"
+          role="meter"
+          aria-valuenow=${this.value}
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-labelledby=${t ?? l}
+          aria-label=${t ? l : this.label || "Meter"}
+          aria-disabled=${this.disabled ? "true" : l}
+        >
+          ${g`
+            <svg viewBox="0 0 100 100">
+              <circle class="bg" cx="50" cy="50" r="${42}" fill="none" stroke-width="10"></circle>
+              <circle
+                class="fg ${a}"
+                cx="50" cy="50" r="${42}"
+                fill="none" stroke-width="10"
+                stroke-dasharray="${e}"
+                stroke-dashoffset="${h}"
+              ></circle>
+            </svg>
+          `}
+          ${this.showValue ? u`<div class="center">${n}</div>` : l}
+        </div>
+      `;
+    }
+    return u`
+      ${this.label || this.showValue ? u`
+        <div class="header">
+          ${this.label ? u`<span class="label" id=${t}>${this.label}</span>` : l}
+          ${this.showValue ? u`<span class="value-text">${n}</span>` : l}
+        </div>
+      ` : l}
+      <div class="track"
+        role="meter"
+        aria-valuenow=${this.value}
+        aria-valuemin=${this.min}
+        aria-valuemax=${this.max}
+        aria-labelledby=${t ?? l}
+        aria-label=${t ? l : this.label || "Meter"}
+        aria-disabled=${this.disabled ? "true" : l}
+      >
+        <div class="fill ${a}" style="width: ${o}%"></div>
+      </div>
+    `;
+  }
+};
+r.styles = [p, f, d`
+    :host { width: 100%; font-family: var(--cg-font-family-primary); }
+    :host([disabled]) { opacity: 0.5; cursor: not-allowed; }
+    :host([disabled]) .track,
+    :host([disabled]) .circular { pointer-events: none; }
+
+    .header {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-6);
+    }
+    .label {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-text);
+      line-height: var(--cg-line-height-snug);
+    }
+    .value-text {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-text);
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* ── Linear ── */
+    .track {
+      width: 100%;
+      background: var(--cg-color-surface-container-background);
+      border-radius: var(--cg-component-meter-radius);
+      overflow: hidden;
+      position: relative;
+    }
+    :host([size="sm"]) .track { height: var(--cg-component-meter-height-sm); }
+    :host([size="md"]) .track { height: var(--cg-component-meter-height-md); }
+    :host([size="lg"]) .track { height: var(--cg-component-meter-height-lg); }
+
+    .fill {
+      height: 100%;
+      border-radius: var(--cg-component-meter-radius);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    .fill.ok { background: var(--cg-color-status-success-text-default); }
+    .fill.warn { background: var(--cg-color-status-warning-text-default); }
+    .fill.bad { background: var(--cg-color-status-error-text-default); }
+
+    /* ── Circular ── */
+    .circular {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    :host([size="sm"]) .circular { width: var(--cg-component-meter-circular-size-sm); height: var(--cg-component-meter-circular-size-sm); }
+    :host([size="md"]) .circular { width: var(--cg-component-meter-circular-size-md); height: var(--cg-component-meter-circular-size-md); }
+    :host([size="lg"]) .circular { width: var(--cg-component-meter-circular-size-lg); height: var(--cg-component-meter-circular-size-lg); }
+
+    .circular svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
+    }
+    .circular .bg {
+      stroke: var(--cg-color-surface-container-background);
+    }
+    .circular .fg {
+      transition: stroke-dashoffset var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+      stroke-linecap: round;
+    }
+    .circular .fg.ok { stroke: var(--cg-color-status-success-text-default); }
+    .circular .fg.warn { stroke: var(--cg-color-status-warning-text-default); }
+    .circular .fg.bad { stroke: var(--cg-color-status-error-text-default); }
+
+    .circular .center {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-text);
+      font-variant-numeric: tabular-nums;
+    }
+  `];
+s([
+  c({ type: Number })
+], r.prototype, "value", 2);
+s([
+  c({ type: Number })
+], r.prototype, "min", 2);
+s([
+  c({ type: Number })
+], r.prototype, "max", 2);
+s([
+  c({ type: Number })
+], r.prototype, "low", 2);
+s([
+  c({ type: Number })
+], r.prototype, "high", 2);
+s([
+  c({ type: Number })
+], r.prototype, "optimum", 2);
+s([
+  c()
+], r.prototype, "label", 2);
+s([
+  c({ reflect: !0 })
+], r.prototype, "variant", 2);
+s([
+  c({ reflect: !0 })
+], r.prototype, "size", 2);
+s([
+  c({ type: Boolean, attribute: "show-value" })
+], r.prototype, "showValue", 2);
+s([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+r = s([
+  v("cg-meter")
+], r);
+export {
+  r as CgMeter
+};
+//# sourceMappingURL=cg-meter.js.map

package/dist/components/cg-meter/cg-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-meter.js","sources":["../../../src/components/cg-meter/cg-meter.ts"],"sourcesContent":["import { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-meter\n * Measurement gauge (battery, disk, score) with threshold coloring.\n * Different from cg-progress-bar: meter = measurement within a range, progress = task completion.\n *\n * @example\n * ```html\n * <cg-meter value=\"72\" low=\"20\" high=\"80\" optimum=\"50\" label=\"CPU usage\" show-value></cg-meter>\n * <cg-meter variant=\"circular\" value=\"85\" label=\"Battery\"></cg-meter>\n * ```\n */\n@customElement('cg-meter')\nexport class CgMeter extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { width: 100%; font-family: var(--cg-font-family-primary); }\n    :host([disabled]) { opacity: 0.5; cursor: not-allowed; }\n    :host([disabled]) .track,\n    :host([disabled]) .circular { pointer-events: none; }\n\n    .header {\n      display: flex;\n      align-items: baseline;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-6);\n    }\n    .label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .value-text {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-text);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Linear ── */\n    .track {\n      width: 100%;\n      background: var(--cg-color-surface-container-background);\n      border-radius: var(--cg-component-meter-radius);\n      overflow: hidden;\n      position: relative;\n    }\n    :host([size=\"sm\"]) .track { height: var(--cg-component-meter-height-sm); }\n    :host([size=\"md\"]) .track { height: var(--cg-component-meter-height-md); }\n    :host([size=\"lg\"]) .track { height: var(--cg-component-meter-height-lg); }\n\n    .fill {\n      height: 100%;\n      border-radius: var(--cg-component-meter-radius);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    .fill.ok { background: var(--cg-color-status-success-text-default); }\n    .fill.warn { background: var(--cg-color-status-warning-text-default); }\n    .fill.bad { background: var(--cg-color-status-error-text-default); }\n\n    /* ── Circular ── */\n    .circular {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n    }\n    :host([size=\"sm\"]) .circular { width: var(--cg-component-meter-circular-size-sm); height: var(--cg-component-meter-circular-size-sm); }\n    :host([size=\"md\"]) .circular { width: var(--cg-component-meter-circular-size-md); height: var(--cg-component-meter-circular-size-md); }\n    :host([size=\"lg\"]) .circular { width: var(--cg-component-meter-circular-size-lg); height: var(--cg-component-meter-circular-size-lg); }\n\n    .circular svg {\n      width: 100%;\n      height: 100%;\n      transform: rotate(-90deg);\n    }\n    .circular .bg {\n      stroke: var(--cg-color-surface-container-background);\n    }\n    .circular .fg {\n      transition: stroke-dashoffset var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      stroke-linecap: round;\n    }\n    .circular .fg.ok { stroke: var(--cg-color-status-success-text-default); }\n    .circular .fg.warn { stroke: var(--cg-color-status-warning-text-default); }\n    .circular .fg.bad { stroke: var(--cg-color-status-error-text-default); }\n\n    .circular .center {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-text);\n      font-variant-numeric: tabular-nums;\n    }\n  `];\n\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 100;\n  @property({ type: Number }) low: number | null = null;\n  @property({ type: Number }) high: number | null = null;\n  @property({ type: Number }) optimum: number | null = null;\n  @property() label = '';\n  @property({ reflect: true }) variant: 'linear' | 'circular' = 'linear';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean, attribute: 'show-value' }) showValue = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Compute color class from thresholds, mirroring <meter> semantics. */\n  private _level(): 'ok' | 'warn' | 'bad' {\n    const { value, min, max } = this;\n    const low = this.low ?? min;\n    const high = this.high ?? max;\n    const optimum = this.optimum;\n\n    // Inside safe zone\n    if (value >= low && value <= high) {\n      if (optimum == null) return 'ok';\n      // Optimum also in safe zone -> ok\n      if (optimum >= low && optimum <= high) return 'ok';\n      return 'warn';\n    }\n    // Outside safe zone\n    if (optimum == null) return 'bad';\n    // If optimum is in the opposite suboptimal region, current is \"bad\"\n    if ((value < low && optimum > high) || (value > high && optimum < low)) return 'bad';\n    return 'warn';\n  }\n\n  private _pct(): number {\n    const range = this.max - this.min;\n    if (range <= 0) return 0;\n    const clamped = Math.max(this.min, Math.min(this.max, this.value));\n    return ((clamped - this.min) / range) * 100;\n  }\n\n  override render() {\n    const level = this._level();\n    const pct = this._pct();\n    const valueText = this.showValue ? `${Math.round(pct)}%` : '';\n    const labelId = this.label ? 'cg-meter-label' : undefined;\n\n    if (this.variant === 'circular') {\n      const radius = 42;\n      const circ = 2 * Math.PI * radius;\n      const offset = circ - (pct / 100) * circ;\n      return html`\n        ${this.label ? html`\n          <div class=\"header\">\n            <span class=\"label\" id=${labelId!}>${this.label}</span>\n          </div>\n        ` : nothing}\n        <div class=\"circular\"\n          role=\"meter\"\n          aria-valuenow=${this.value}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-labelledby=${labelId ?? nothing}\n          aria-label=${labelId ? nothing : (this.label || 'Meter')}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n        >\n          ${svg`\n            <svg viewBox=\"0 0 100 100\">\n              <circle class=\"bg\" cx=\"50\" cy=\"50\" r=\"${radius}\" fill=\"none\" stroke-width=\"10\"></circle>\n              <circle\n                class=\"fg ${level}\"\n                cx=\"50\" cy=\"50\" r=\"${radius}\"\n                fill=\"none\" stroke-width=\"10\"\n                stroke-dasharray=\"${circ}\"\n                stroke-dashoffset=\"${offset}\"\n              ></circle>\n            </svg>\n          `}\n          ${this.showValue ? html`<div class=\"center\">${valueText}</div>` : nothing}\n        </div>\n      `;\n    }\n\n    return html`\n      ${this.label || this.showValue ? html`\n        <div class=\"header\">\n          ${this.label ? html`<span class=\"label\" id=${labelId!}>${this.label}</span>` : nothing}\n          ${this.showValue ? html`<span class=\"value-text\">${valueText}</span>` : nothing}\n        </div>\n      ` : nothing}\n      <div class=\"track\"\n        role=\"meter\"\n        aria-valuenow=${this.value}\n        aria-valuemin=${this.min}\n        aria-valuemax=${this.max}\n        aria-labelledby=${labelId ?? nothing}\n        aria-label=${labelId ? nothing : (this.label || 'Meter')}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n      >\n        <div class=\"fill ${level}\" style=\"width: ${pct}%\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-meter': CgMeter;\n  }\n}\n"],"names":["CgMeter","LitElement","value","min","max","low","high","optimum","range","level","pct","valueText","labelId","circ","offset","html","nothing","svg","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-metric-card/cg-metric-card.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-metric-card> — KPI metric display with trend indicator and sparkline.
+ *
+ * @example
+ * ```html
+ * <cg-metric-card title="Revenue" value="$2.4M" delta="+18%" trend="up" icon="chart" comparison="vs last quarter"></cg-metric-card>
+ * ```
+ *
+ * @fires {CustomEvent} cg-metric-click - When a clickable card is clicked
+ */
+export declare class CgMetricCard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Metric label (e.g. "Revenue", "Active Users") */
+    title: string;
+    /** Metric value (e.g. "$2.4M", "14.2K") */
+    value: string;
+    /** Change text (e.g. "+18%", "-0.3%") */
+    delta: string;
+    /** Trend direction — which way the number moved */
+    trend: 'up' | 'down' | 'neutral';
+    /** Whether down=good (e.g. churn, latency, error rate) */
+    invertTrend: boolean;
+    /** Icon name (cg-icon name) or emoji string */
+    icon: string;
+    /** Comparison period text (e.g. "vs last quarter") */
+    comparison: string;
+    /** Sparkline data points */
+    sparkline: number[];
+    /** Card size */
+    size: 'sm' | 'md' | 'lg';
+    /** Border radius variant */
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    /** Show loading skeleton */
+    loading: boolean;
+    /** Make card clickable */
+    clickable: boolean;
+    /** Get the sentiment class based on trend + invertTrend */
+    private _getSentiment;
+    private _handleClick;
+    private _handleKeyDown;
+    private _getSparkColor;
+    private _isIconName;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-metric-card': CgMetricCard;
+    }
+}
+//# sourceMappingURL=cg-metric-card.d.ts.map

package/dist/components/cg-metric-card/cg-metric-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-metric-card.d.ts","sourceRoot":"","sources":["../../../src/components/cg-metric-card/cg-metric-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;GASG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAmLnB;IAEH,oDAAoD;IAC/B,KAAK,SAAM;IAEhC,2CAA2C;IAC/B,KAAK,SAAM;IAEvB,yCAAyC;IAC7B,KAAK,SAAM;IAEvB,mDAAmD;IACvC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAa;IAEzD,0DAA0D;IAC7B,WAAW,UAAS;IAEjD,+CAA+C;IACnC,IAAI,SAAM;IAEtB,sDAAsD;IAC1C,UAAU,SAAM;IAE5B,4BAA4B;IACD,SAAS,EAAE,MAAM,EAAE,CAAM;IAEpD,gBAAgB;IAC2B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE3E,4BAA4B;IACC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEzE,4BAA4B;IACgB,OAAO,UAAS;IAE5D,0BAA0B;IACG,SAAS,UAAS;IAE/C,2DAA2D;IAC3D,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,WAAW;IAIV,MAAM;CAkEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}

package/dist/components/cg-metric-card/cg-metric-card.js

@@ -0,0 +1,312 @@
+import { css as u, LitElement as v, html as s, nothing as d } from "lit";
+import { property as i, customElement as p } from "lit/decorators.js";
+import { h, r as f, b as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, k = Object.getOwnPropertyDescriptor, e = (a, o, n, c) => {
+  for (var r = c > 1 ? void 0 : c ? k(o, n) : o, l = a.length - 1, g; l >= 0; l--)
+    (g = a[l]) && (r = (c ? g(o, n, r) : g(r)) || r);
+  return c && r && b(o, n, r), r;
+};
+let t = class extends v {
+  constructor() {
+    super(...arguments), this.title = "", this.value = "", this.delta = "", this.trend = "neutral", this.invertTrend = !1, this.icon = "", this.comparison = "", this.sparkline = [], this.size = "md", this.rounded = "lg", this.loading = !1, this.clickable = !1;
+  }
+  /** Get the sentiment class based on trend + invertTrend */
+  _getSentiment() {
+    return this.trend === "neutral" ? "neutral" : this.invertTrend ? this.trend === "up" ? "negative" : "positive" : this.trend === "up" ? "positive" : "negative";
+  }
+  _handleClick() {
+    this.clickable && this.dispatchEvent(new CustomEvent("cg-metric-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { title: this.title, value: this.value, delta: this.delta, trend: this.trend }
+    }));
+  }
+  _handleKeyDown(a) {
+    this.clickable && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this._handleClick());
+  }
+  _getSparkColor(a, o) {
+    const n = this._getSentiment(), r = a / o > 0.6;
+    return n === "positive" ? r ? "var(--cg-color-status-success-text-default)" : "var(--cg-color-status-success-background-default)" : n === "negative" ? r ? "var(--cg-color-status-error-text-default)" : "var(--cg-color-status-error-background-default)" : r ? "var(--cg-color-surface-container-outlined)" : "var(--cg-color-action-secondary-background-default)";
+  }
+  _isIconName(a) {
+    return /^[a-z]/.test(a) && !a.includes(" ");
+  }
+  render() {
+    if (this.loading)
+      return s`
+        <div class="card skeleton" role="status" aria-label="Loading metric">
+          <div class="skel skel-title"></div>
+          <div class="skel skel-value"></div>
+          <div class="skel skel-delta"></div>
+        </div>
+      `;
+    const a = this._getSentiment(), o = this.trend === "up" ? s`<span class="delta-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5m-7 7l7-7 7 7"/></svg></span>` : this.trend === "down" ? s`<span class="delta-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14m7-7l-7 7-7-7"/></svg></span>` : d, n = this.trend === "neutral" ? "" : this.trend, c = `${this.title}: ${this.value}${this.delta ? `, ${this.delta} ${n}` : ""}${this.comparison ? ` ${this.comparison}` : ""}`;
+    return s`
+      <div
+        class="card ${this.clickable ? "clickable" : ""}"
+        role="figure"
+        aria-roledescription="metric"
+        aria-label="${c}"
+        tabindex="${this.clickable ? "0" : d}"
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}
+      >
+        <div class="header">
+          <div class="title-row">
+            ${this.icon ? s`<span class="title-icon" aria-hidden="true">${this._isIconName(this.icon) ? s`<cg-icon name="${this.icon}" size="sm" color="muted"></cg-icon>` : this.icon}</span>` : d}
+            <span class="title">${this.title}</span>
+          </div>
+        </div>
+
+        <div class="value">${this.value}</div>
+
+        ${this.delta || this.comparison ? s`
+          <div class="delta-row">
+            ${this.delta ? s`
+              <span class="delta ${a}">
+                ${o}
+                ${this.delta}
+              </span>
+            ` : d}
+            ${this.comparison ? s`<span class="comparison">${this.comparison}</span>` : d}
+          </div>
+        ` : d}
+
+        ${this.sparkline.length > 1 ? s`
+          <div class="sparkline" aria-hidden="true">
+            ${(() => {
+      const r = Math.max(...this.sparkline, 1);
+      return this.sparkline.map((l) => {
+        const g = Math.max(l / r * 32, 2);
+        return s`<div class="spark-bar ${l / r > 0.6 ? "highlight" : "dim"}" style="height: ${g}px; background: ${this._getSparkColor(l, r)};"></div>`;
+      });
+    })()}
+          </div>
+        ` : d}
+      </div>
+    `;
+  }
+};
+t.styles = [h, f, m, u`
+    .card {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      padding: var(--cg-spacing-20);
+      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), transform var(--cg-transition-duration-default) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default), background var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    :host([size="sm"]) .card { padding: var(--cg-spacing-12) var(--cg-spacing-16); }
+    :host([size="lg"]) .card { padding: var(--cg-spacing-24) var(--cg-spacing-32); }
+
+    /* Hover — subtle border glow on all cards */
+    .card:hover {
+      border-color: var(--cg-color-surface-cards-hover-border);
+    }
+
+    .card.clickable { cursor: pointer; }
+    .card.clickable:hover {
+      background: var(--cg-color-surface-cards-hover-background);
+      transform: translateY(var(--cg-interaction-hover-lift));
+    }
+    .card.clickable:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .card:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* Value entrance animation */
+    .value {
+      animation: valueSlideIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
+    }
+    @keyframes valueSlideIn {
+      from { opacity: 0; transform: translateY(var(--cg-spacing-4)); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .delta-row {
+      animation: valueSlideIn var(--cg-transition-duration-slow) 80ms var(--cg-transition-easing-ease-out) both;
+    }
+
+    /* ── Header row ── */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--cg-spacing-6);
+    }
+    .title-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+    }
+    .title-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .title-icon cg-icon {
+      --cg-icon-size: var(--cg-icon-size-100);
+    }
+    .title {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    :host([size="lg"]) .title { font-size: var(--cg-font-size-sm); }
+
+    /* ── Value ── */
+    .value {
+      font-size: var(--cg-font-size-2xl);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-tight);
+      letter-spacing: var(--cg-letter-spacing-tight);
+    }
+    :host([size="sm"]) .value { font-size: var(--cg-font-size-lg); }
+    :host([size="lg"]) .value { font-size: var(--cg-font-size-4xl); }
+
+    /* ── Delta badge ── */
+    .delta-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-8);
+    }
+    .delta {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+    }
+    .delta.positive {
+      color: var(--cg-color-status-success-text-default);
+      background: var(--cg-color-status-success-background-default);
+    }
+    .delta.negative {
+      color: var(--cg-color-status-error-text-default);
+      background: var(--cg-color-status-error-background-default);
+    }
+    .delta.neutral {
+      color: var(--cg-color-surface-container-outlined);
+      background: var(--cg-color-action-secondary-background-default);
+    }
+    .delta-arrow {
+      display: inline-flex;
+    }
+    .delta-arrow svg {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+    }
+
+    .comparison {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    /* ── Sparkline ── */
+    .sparkline {
+      display: flex;
+      align-items: flex-end;
+      gap: var(--cg-spacing-2);
+      height: var(--cg-spacing-32);
+      margin-top: var(--cg-spacing-12);
+      padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .spark-bar {
+      flex: 1;
+      border-radius: var(--cg-border-radius-50);
+      min-width: var(--cg-spacing-4);
+      transition: height var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .spark-bar {
+      opacity: 0.4;
+      transition: height var(--cg-transition-duration-slow) var(--cg-transition-easing-default), opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);
+    }
+    .spark-bar.highlight {
+      opacity: 1;
+    }
+    .sparkline:hover .spark-bar {
+      opacity: 0.25;
+    }
+    .sparkline:hover .spark-bar:hover {
+      opacity: 1;
+      transform: scaleY(1.15);
+      transform-origin: bottom;
+    }
+
+    /* ── Loading skeleton ── */
+    .skeleton .skel {
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-surface-cards-border);
+      position: relative;
+      overflow: hidden;
+    }
+    .skeleton .skel::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(90deg, transparent 25%, var(--cg-overlay-accent-subtle) 50%, transparent 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s linear infinite;
+    }
+    .skel-title { width: 60%; height: var(--cg-spacing-12); margin-bottom: var(--cg-spacing-8); }
+    .skel-value { width: 45%; height: var(--cg-spacing-24); margin-bottom: var(--cg-spacing-8); }
+    .skel-delta { width: 30%; height: var(--cg-spacing-16); }
+
+    /* Rounded variants */
+    :host([rounded="none"]) .card { border-radius: 0; }
+    :host([rounded="sm"]) .card { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .card { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .card { border-radius: var(--cg-component-card-radius); }
+  `];
+e([
+  i()
+], t.prototype, "title", 2);
+e([
+  i()
+], t.prototype, "value", 2);
+e([
+  i()
+], t.prototype, "delta", 2);
+e([
+  i()
+], t.prototype, "trend", 2);
+e([
+  i({ type: Boolean })
+], t.prototype, "invertTrend", 2);
+e([
+  i()
+], t.prototype, "icon", 2);
+e([
+  i()
+], t.prototype, "comparison", 2);
+e([
+  i({ type: Array })
+], t.prototype, "sparkline", 2);
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  i({ reflect: !0 })
+], t.prototype, "rounded", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+e([
+  i({ type: Boolean })
+], t.prototype, "clickable", 2);
+t = e([
+  p("cg-metric-card")
+], t);
+export {
+  t as CgMetricCard
+};
+//# sourceMappingURL=cg-metric-card.js.map

package/dist/components/cg-metric-card/cg-metric-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-metric-card.js","sources":["../../../src/components/cg-metric-card/cg-metric-card.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\n/**\n * <cg-metric-card> — KPI metric display with trend indicator and sparkline.\n *\n * @example\n * ```html\n * <cg-metric-card title=\"Revenue\" value=\"$2.4M\" delta=\"+18%\" trend=\"up\" icon=\"chart\" comparison=\"vs last quarter\"></cg-metric-card>\n * ```\n *\n * @fires {CustomEvent} cg-metric-click - When a clickable card is clicked\n */\n@customElement('cg-metric-card')\nexport class CgMetricCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    .card {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      padding: var(--cg-spacing-20);\n      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), transform var(--cg-transition-duration-default) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default), background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([size=\"sm\"]) .card { padding: var(--cg-spacing-12) var(--cg-spacing-16); }\n    :host([size=\"lg\"]) .card { padding: var(--cg-spacing-24) var(--cg-spacing-32); }\n\n    /* Hover — subtle border glow on all cards */\n    .card:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n    }\n\n    .card.clickable { cursor: pointer; }\n    .card.clickable:hover {\n      background: var(--cg-color-surface-cards-hover-background);\n      transform: translateY(var(--cg-interaction-hover-lift));\n    }\n    .card.clickable:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .card:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* Value entrance animation */\n    .value {\n      animation: valueSlideIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n    }\n    @keyframes valueSlideIn {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-4)); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    .delta-row {\n      animation: valueSlideIn var(--cg-transition-duration-slow) 80ms var(--cg-transition-easing-ease-out) both;\n    }\n\n    /* ── Header row ── */\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-6);\n    }\n    .title-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n    }\n    .title-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .title-icon cg-icon {\n      --cg-icon-size: var(--cg-icon-size-100);\n    }\n    .title {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    :host([size=\"lg\"]) .title { font-size: var(--cg-font-size-sm); }\n\n    /* ── Value ── */\n    .value {\n      font-size: var(--cg-font-size-2xl);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-tight);\n      letter-spacing: var(--cg-letter-spacing-tight);\n    }\n    :host([size=\"sm\"]) .value { font-size: var(--cg-font-size-lg); }\n    :host([size=\"lg\"]) .value { font-size: var(--cg-font-size-4xl); }\n\n    /* ── Delta badge ── */\n    .delta-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-8);\n    }\n    .delta {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .delta.positive {\n      color: var(--cg-color-status-success-text-default);\n      background: var(--cg-color-status-success-background-default);\n    }\n    .delta.negative {\n      color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-status-error-background-default);\n    }\n    .delta.neutral {\n      color: var(--cg-color-surface-container-outlined);\n      background: var(--cg-color-action-secondary-background-default);\n    }\n    .delta-arrow {\n      display: inline-flex;\n    }\n    .delta-arrow svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    .comparison {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* ── Sparkline ── */\n    .sparkline {\n      display: flex;\n      align-items: flex-end;\n      gap: var(--cg-spacing-2);\n      height: var(--cg-spacing-32);\n      margin-top: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .spark-bar {\n      flex: 1;\n      border-radius: var(--cg-border-radius-50);\n      min-width: var(--cg-spacing-4);\n      transition: height var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .spark-bar {\n      opacity: 0.4;\n      transition: height var(--cg-transition-duration-slow) var(--cg-transition-easing-default), opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n    }\n    .spark-bar.highlight {\n      opacity: 1;\n    }\n    .sparkline:hover .spark-bar {\n      opacity: 0.25;\n    }\n    .sparkline:hover .spark-bar:hover {\n      opacity: 1;\n      transform: scaleY(1.15);\n      transform-origin: bottom;\n    }\n\n    /* ── Loading skeleton ── */\n    .skeleton .skel {\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-cards-border);\n      position: relative;\n      overflow: hidden;\n    }\n    .skeleton .skel::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(90deg, transparent 25%, var(--cg-overlay-accent-subtle) 50%, transparent 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-title { width: 60%; height: var(--cg-spacing-12); margin-bottom: var(--cg-spacing-8); }\n    .skel-value { width: 45%; height: var(--cg-spacing-24); margin-bottom: var(--cg-spacing-8); }\n    .skel-delta { width: 30%; height: var(--cg-spacing-16); }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .card { border-radius: 0; }\n    :host([rounded=\"sm\"]) .card { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .card { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .card { border-radius: var(--cg-component-card-radius); }\n  `];\n\n  /** Metric label (e.g. \"Revenue\", \"Active Users\") */\n  @property() override title = '';\n\n  /** Metric value (e.g. \"$2.4M\", \"14.2K\") */\n  @property() value = '';\n\n  /** Change text (e.g. \"+18%\", \"-0.3%\") */\n  @property() delta = '';\n\n  /** Trend direction — which way the number moved */\n  @property() trend: 'up' | 'down' | 'neutral' = 'neutral';\n\n  /** Whether down=good (e.g. churn, latency, error rate) */\n  @property({ type: Boolean }) invertTrend = false;\n\n  /** Icon name (cg-icon name) or emoji string */\n  @property() icon = '';\n\n  /** Comparison period text (e.g. \"vs last quarter\") */\n  @property() comparison = '';\n\n  /** Sparkline data points */\n  @property({ type: Array }) sparkline: number[] = [];\n\n  /** Card size */\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Border radius variant */\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Show loading skeleton */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Make card clickable */\n  @property({ type: Boolean }) clickable = false;\n\n  /** Get the sentiment class based on trend + invertTrend */\n  private _getSentiment(): 'positive' | 'negative' | 'neutral' {\n    if (this.trend === 'neutral') return 'neutral';\n    if (this.invertTrend) {\n      return this.trend === 'up' ? 'negative' : 'positive';\n    }\n    return this.trend === 'up' ? 'positive' : 'negative';\n  }\n\n  private _handleClick() {\n    if (!this.clickable) return;\n    this.dispatchEvent(new CustomEvent('cg-metric-click', {\n      bubbles: true, composed: true,\n      detail: { title: this.title, value: this.value, delta: this.delta, trend: this.trend },\n    }));\n  }\n\n  private _handleKeyDown(e: KeyboardEvent) {\n    if (this.clickable && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      this._handleClick();\n    }\n  }\n\n  private _getSparkColor(value: number, max: number): string {\n    const sentiment = this._getSentiment();\n    const ratio = value / max;\n    const isHigh = ratio > 0.6;\n    if (sentiment === 'positive') return isHigh ? 'var(--cg-color-status-success-text-default)' : 'var(--cg-color-status-success-background-default)';\n    if (sentiment === 'negative') return isHigh ? 'var(--cg-color-status-error-text-default)' : 'var(--cg-color-status-error-background-default)';\n    return isHigh ? 'var(--cg-color-surface-container-outlined)' : 'var(--cg-color-action-secondary-background-default)';\n  }\n\n  private _isIconName(icon: string): boolean {\n    return /^[a-z]/.test(icon) && !icon.includes(' ');\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`\n        <div class=\"card skeleton\" role=\"status\" aria-label=\"Loading metric\">\n          <div class=\"skel skel-title\"></div>\n          <div class=\"skel skel-value\"></div>\n          <div class=\"skel skel-delta\"></div>\n        </div>\n      `;\n    }\n\n    const sentiment = this._getSentiment();\n    const arrow = this.trend === 'up'\n      ? html`<span class=\"delta-arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5m-7 7l7-7 7 7\"/></svg></span>`\n      : this.trend === 'down'\n      ? html`<span class=\"delta-arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14m7-7l-7 7-7-7\"/></svg></span>`\n      : nothing;\n\n    const trendText = this.trend === 'neutral' ? '' : this.trend;\n    const ariaLabel = `${this.title}: ${this.value}${this.delta ? `, ${this.delta} ${trendText}` : ''}${this.comparison ? ` ${this.comparison}` : ''}`;\n\n    return html`\n      <div\n        class=\"card ${this.clickable ? 'clickable' : ''}\"\n        role=\"figure\"\n        aria-roledescription=\"metric\"\n        aria-label=\"${ariaLabel}\"\n        tabindex=\"${this.clickable ? '0' : nothing}\"\n        @click=${this._handleClick}\n        @keydown=${this._handleKeyDown}\n      >\n        <div class=\"header\">\n          <div class=\"title-row\">\n            ${this.icon ? html`<span class=\"title-icon\" aria-hidden=\"true\">${this._isIconName(this.icon) ? html`<cg-icon name=\"${this.icon}\" size=\"sm\" color=\"muted\"></cg-icon>` : this.icon}</span>` : nothing}\n            <span class=\"title\">${this.title}</span>\n          </div>\n        </div>\n\n        <div class=\"value\">${this.value}</div>\n\n        ${this.delta || this.comparison ? html`\n          <div class=\"delta-row\">\n            ${this.delta ? html`\n              <span class=\"delta ${sentiment}\">\n                ${arrow}\n                ${this.delta}\n              </span>\n            ` : nothing}\n            ${this.comparison ? html`<span class=\"comparison\">${this.comparison}</span>` : nothing}\n          </div>\n        ` : nothing}\n\n        ${this.sparkline.length > 1 ? html`\n          <div class=\"sparkline\" aria-hidden=\"true\">\n            ${(() => {\n              const max = Math.max(...this.sparkline, 1);\n              return this.sparkline.map(v => {\n                const h = Math.max((v / max) * 32, 2);\n                return html`<div class=\"spark-bar ${v / max > 0.6 ? 'highlight' : 'dim'}\" style=\"height: ${h}px; background: ${this._getSparkColor(v, max)};\"></div>`;\n              });\n            })()}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-metric-card': CgMetricCard; }\n}\n"],"names":["CgMetricCard","LitElement","e","value","max","sentiment","isHigh","icon","html","arrow","nothing","trendText","ariaLabel","v","h","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}