@cognivo/components 0.8.0 → 0.8.2

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

@@ -1 +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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"}
+{"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-loading-spinner-secondary);\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-loading-spinner-secondary);\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    // Native <meter> defaults the optimum point to the midpoint of the range.\n    const optimum = this.optimum ?? (min + max) / 2;\n\n    // Classify a point into a region: 0 = below low, 1 = safe zone, 2 = above high.\n    const region = (v: number): number => (v < low ? 0 : v > high ? 2 : 1);\n    const diff = Math.abs(region(value) - region(optimum));\n\n    if (diff === 0) return 'ok';\n    if (diff === 1) return 'warn';\n    return 'bad';\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 clamped = Math.max(this.min, Math.min(this.max, this.value));\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=${clamped}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-valuetext=${this.showValue ? valueText : nothing}\n          aria-labelledby=${labelId ?? nothing}\n          aria-label=${labelId ? nothing : (this.label || 'Meter')}\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=${clamped}\n        aria-valuemin=${this.min}\n        aria-valuemax=${this.max}\n        aria-valuetext=${this.showValue ? valueText : nothing}\n        aria-labelledby=${labelId ?? nothing}\n        aria-label=${labelId ? nothing : (this.label || 'Meter')}\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","region","v","diff","range","level","pct","clamped","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.map

@@ -1 +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"}
+{"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,4BAgLnB;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;IAOtB,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

@@ -1,12 +1,12 @@
-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;
+import { css as v, LitElement as u, html as i, nothing as o } from "lit";
+import { property as a, customElement as p } from "lit/decorators.js";
+import { h, r as f, b as m } from "../../chunks/premium.css-DHekUEUt.js";
+var b = Object.defineProperty, k = Object.getOwnPropertyDescriptor, e = (t, n, d, c) => {
+  for (var s = c > 1 ? void 0 : c ? k(n, d) : n, l = t.length - 1, g; l >= 0; l--)
+    (g = t[l]) && (s = (c ? g(n, d, s) : g(s)) || s);
+  return c && s && b(n, d, s), s;
 };
-let t = class extends v {
+let r = class extends u {
   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;
   }
@@ -21,73 +21,73 @@ let t = class extends v {
       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());
+  _handleKeyDown(t) {
+    this.clickable && (t.key === "Enter" || t.key === " ") && (t.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)";
+  _getSparkColor() {
+    const t = this._getSentiment();
+    return t === "positive" ? "var(--cg-color-status-success-text-default)" : t === "negative" ? "var(--cg-color-status-error-text-default)" : "var(--cg-color-surface-container-outlined)";
   }
-  _isIconName(a) {
-    return /^[a-z]/.test(a) && !a.includes(" ");
+  _isIconName(t) {
+    return /^[a-z]/.test(t) && !t.includes(" ");
   }
   render() {
     if (this.loading)
-      return s`
+      return i`
         <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`
+    const t = this._getSentiment(), n = this.trend === "up" ? i`<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" ? i`<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>` : o, d = this.trend === "neutral" ? "" : this.trend, c = `${this.title}: ${this.value}${this.delta ? `, ${this.delta} ${d}` : ""}${this.comparison ? ` ${this.comparison}` : ""}`;
+    return i`
       <div
         class="card ${this.clickable ? "clickable" : ""}"
-        role="figure"
-        aria-roledescription="metric"
+        role=${this.clickable ? "button" : "figure"}
+        aria-roledescription=${this.clickable ? o : "metric"}
         aria-label="${c}"
-        tabindex="${this.clickable ? "0" : d}"
+        tabindex="${this.clickable ? "0" : o}"
         @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}
+            ${this.icon ? i`<span class="title-icon" aria-hidden="true">${this._isIconName(this.icon) ? i`<cg-icon name="${this.icon}" size="sm" color="muted"></cg-icon>` : this.icon}</span>` : o}
             <span class="title">${this.title}</span>
           </div>
         </div>
 
         <div class="value">${this.value}</div>
 
-        ${this.delta || this.comparison ? s`
+        ${this.delta || this.comparison ? i`
           <div class="delta-row">
-            ${this.delta ? s`
-              <span class="delta ${a}">
-                ${o}
+            ${this.delta ? i`
+              <span class="delta ${t}">
+                ${n}
                 ${this.delta}
               </span>
-            ` : d}
-            ${this.comparison ? s`<span class="comparison">${this.comparison}</span>` : d}
+            ` : o}
+            ${this.comparison ? i`<span class="comparison">${this.comparison}</span>` : o}
           </div>
-        ` : d}
+        ` : o}
 
-        ${this.sparkline.length > 1 ? s`
+        ${this.sparkline.length > 1 ? i`
           <div class="sparkline" aria-hidden="true">
             ${(() => {
-      const r = Math.max(...this.sparkline, 1);
+      const s = 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>`;
+        const g = Math.max(l / s * 32, 2);
+        return i`<div class="spark-bar ${l / s > 0.6 ? "highlight" : "dim"}" style="height: ${g}px; background: ${this._getSparkColor()};"></div>`;
       });
     })()}
           </div>
-        ` : d}
+        ` : o}
       </div>
     `;
   }
 };
-t.styles = [h, f, m, u`
+r.styles = [h, f, m, v`
     .card {
       background: var(--cg-color-surface-cards-background);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
@@ -111,9 +111,9 @@ t.styles = [h, f, m, u`
     .card.clickable:active {
       transform: scale(var(--cg-interaction-press-scale));
     }
-    .card:focus-visible {
+    .card.clickable:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset), 0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);
     }
 
     /* Value entrance animation */
@@ -224,9 +224,6 @@ t.styles = [h, f, m, u`
       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);
     }
@@ -245,7 +242,7 @@ t.styles = [h, f, m, u`
     /* ── Loading skeleton ── */
     .skeleton .skel {
       border-radius: var(--cg-border-radius-50);
-      background: var(--cg-color-surface-cards-border);
+      background: var(--cg-color-action-secondary-background-hover);
       position: relative;
       overflow: hidden;
     }
@@ -268,45 +265,45 @@ t.styles = [h, f, m, u`
     :host([rounded="lg"]) .card { border-radius: var(--cg-component-card-radius); }
   `];
 e([
-  i()
-], t.prototype, "title", 2);
+  a()
+], r.prototype, "title", 2);
 e([
-  i()
-], t.prototype, "value", 2);
+  a()
+], r.prototype, "value", 2);
 e([
-  i()
-], t.prototype, "delta", 2);
+  a()
+], r.prototype, "delta", 2);
 e([
-  i()
-], t.prototype, "trend", 2);
+  a()
+], r.prototype, "trend", 2);
 e([
-  i({ type: Boolean })
-], t.prototype, "invertTrend", 2);
+  a({ type: Boolean })
+], r.prototype, "invertTrend", 2);
 e([
-  i()
-], t.prototype, "icon", 2);
+  a()
+], r.prototype, "icon", 2);
 e([
-  i()
-], t.prototype, "comparison", 2);
+  a()
+], r.prototype, "comparison", 2);
 e([
-  i({ type: Array })
-], t.prototype, "sparkline", 2);
+  a({ type: Array })
+], r.prototype, "sparkline", 2);
 e([
-  i({ type: String, reflect: !0 })
-], t.prototype, "size", 2);
+  a({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
 e([
-  i({ reflect: !0 })
-], t.prototype, "rounded", 2);
+  a({ reflect: !0 })
+], r.prototype, "rounded", 2);
 e([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "loading", 2);
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
 e([
-  i({ type: Boolean })
-], t.prototype, "clickable", 2);
-t = e([
+  a({ type: Boolean })
+], r.prototype, "clickable", 2);
+r = e([
   p("cg-metric-card")
-], t);
+], r);
 export {
-  t as CgMetricCard
+  r as CgMetricCard
 };
 //# sourceMappingURL=cg-metric-card.js.map

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

@@ -1 +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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"}
+{"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.clickable:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset), 0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);\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      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-action-secondary-background-hover);\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(): string {\n    const sentiment = this._getSentiment();\n    if (sentiment === 'positive') return 'var(--cg-color-status-success-text-default)';\n    if (sentiment === 'negative') return 'var(--cg-color-status-error-text-default)';\n    return 'var(--cg-color-surface-container-outlined)';\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=${this.clickable ? 'button' : 'figure'}\n        aria-roledescription=${this.clickable ? nothing : '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()};\"></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","sentiment","icon","html","arrow","nothing","trendText","ariaLabel","max","v","h","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-modal/cg-modal.d.ts

@@ -43,6 +43,9 @@ export declare class CgModal extends LitElement {
     private _onOpen;
     private _onClose;
     private _handleBackdropClick;
+    /** The container covers the backdrop (higher z-index), so outside-clicks
+     *  land here — only dismiss when the click is on the container itself. */
+    private _handleContainerClick;
     private _requestClose;
     private _handleFooterSlotChange;
     render(): import('lit').TemplateResult<1>;

package/dist/components/cg-modal/cg-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-modal.d.ts","sourceRoot":"","sources":["../../../src/components/cg-modal/cg-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAsQnB;IAEyC,IAAI,UAAS;IACpB,KAAK,SAAM;IACpB,IAAI,SAAM;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACrD,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACrD,QAAQ,UAAQ;IAChB,UAAU,UAAS;IACJ,OAAO,UAAS;IAChC,KAAK,SAAM;IAE9B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,iBAAiB,CAAM;IAC/B,OAAO,CAAC,UAAU,CAAmB;IAE5B,oBAAoB;IASpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAc9C,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,uBAAuB;IAKtB,MAAM;CA8DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"cg-modal.d.ts","sourceRoot":"","sources":["../../../src/components/cg-modal/cg-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BA4PnB;IAEyC,IAAI,UAAS;IACpB,KAAK,SAAM;IACpB,IAAI,SAAM;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACrD,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACrD,QAAQ,UAAQ;IAChB,UAAU,UAAS;IACJ,OAAO,UAAS;IAChC,KAAK,SAAM;IAE9B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,iBAAiB,CAAM;IAC/B,OAAO,CAAC,UAAU,CAAmB;IAE5B,oBAAoB;IASpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAqB9C,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,oBAAoB;IAM5B;8EAC0E;IAC1E,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,uBAAuB;IAKtB,MAAM;CA6DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}