@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-confidence-badge/ai-confidence-badge.d.ts

@@ -1,26 +1,28 @@
 import { LitElement } from 'lit';
 export declare class AiConfidenceBadge extends LitElement {
     static styles: import('lit').CSSResult[];
-    /** Confidence score 0-1. */
+    /** Confidence score 0-1 */
     score: number;
-    /** Show percentage or level name in the inline label. */
+    /** Show percentage or level name */
     showPercentage: boolean;
-    /** Size variant. */
+    /** Size variant */
     size: 'sm' | 'md' | 'lg';
-    /** Tooltip explanation text. */
+    /** Explanation text for tooltip */
     explanation: string;
-    /** History array of scores (0-1) for sparkline. */
+    /** History array of scores for sparkline */
     history: number[];
-    /** High-confidence threshold (default 0.8). */
+    /** High confidence threshold */
     highThreshold: number;
-    /** Low-confidence threshold (default 0.5). Below this = "low". */
+    /** Low confidence threshold */
     lowThreshold: number;
+    private _showTooltip;
     private _getLevel;
     private _getIconName;
-    private _getProgressVariant;
+    private _handleClick;
+    private _handleKeyDown;
     private _getSparkColor;
     private _renderSparkline;
-    private _renderInner;
+    private _renderTooltip;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/dist/components/ai-confidence-badge/ai-confidence-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-confidence-badge.d.ts","sourceRoot":"","sources":["../../../src/components/ai-confidence-badge/ai-confidence-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,uCAAuC,CAAC;AAE/C,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BA+FnB;IAEH,4BAA4B;IACA,KAAK,EAAE,MAAM,CAAQ;IAEjD,yDAAyD;IACE,cAAc,EAAE,OAAO,CAAQ;IAE1F,oBAAoB;IACuB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE3E,gCAAgC;IACJ,WAAW,EAAE,MAAM,CAAM;IAErD,mDAAmD;IACxB,OAAO,EAAE,MAAM,EAAE,CAAM;IAElD,+CAA+C;IACU,aAAa,EAAE,MAAM,CAAO;IAErF,kEAAkE;IACV,YAAY,EAAE,MAAM,CAAO;IAInF,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,YAAY;IA+BX,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"ai-confidence-badge.d.ts","sourceRoot":"","sources":["../../../src/components/ai-confidence-badge/ai-confidence-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BA4JnB;IAEH,2BAA2B;IACC,KAAK,EAAE,MAAM,CAAQ;IACjD,oCAAoC;IACP,cAAc,EAAE,OAAO,CAAQ;IAC5D,mBAAmB;IACwB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC3E,mCAAmC;IACP,WAAW,EAAE,MAAM,CAAM;IACrD,4CAA4C;IACjB,OAAO,EAAE,MAAM,EAAE,CAAM;IAClD,gCAAgC;IACJ,aAAa,EAAE,MAAM,CAAO;IACxD,+BAA+B;IACH,YAAY,EAAE,MAAM,CAAO;IAE9C,OAAO,CAAC,YAAY,CAAkB;IAE/C,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,cAAc;IAYb,MAAM;CA+ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/ai-confidence-badge/ai-confidence-badge.js

@@ -1,19 +1,15 @@
-import { css as d, LitElement as h, nothing as p, html as c } from "lit";
-import { property as s, customElement as m } from "lit/decorators.js";
-import { a as u, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
-import "../cg-icon/cg-icon.js";
-import "../cg-tooltip/cg-tooltip.js";
-import "../cg-progress-bar/cg-progress-bar.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, r, a, n) => {
-  for (var o = n > 1 ? void 0 : n ? b(r, a) : r, g = e.length - 1, l; g >= 0; g--)
-    (l = e[g]) && (o = (n ? l(r, a, o) : l(o)) || o);
-  return n && o && f(r, a, o), o;
+import { css as p, LitElement as h, nothing as d, html as s } from "lit";
+import { property as i, state as u, customElement as v } from "lit/decorators.js";
+import { a as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (e, t, n, c) => {
+  for (var o = c > 1 ? void 0 : c ? w(t, n) : t, l = e.length - 1, g; l >= 0; l--)
+    (g = e[l]) && (o = (c ? g(t, n, o) : g(o)) || o);
+  return c && o && m(t, n, o), o;
 };
-let t = class extends h {
+let r = class extends h {
   constructor() {
-    super(...arguments), this.score = 0.85, this.showPercentage = !0, this.size = "md", this.explanation = "", this.history = [], this.highThreshold = 0.8, this.lowThreshold = 0.5;
+    super(...arguments), this.score = 0.85, this.showPercentage = !0, this.size = "md", this.explanation = "", this.history = [], this.highThreshold = 0.8, this.lowThreshold = 0.5, this._showTooltip = !1;
   }
-  // ─── Derivations ────────────────────────────────────────────────────────
   _getLevel() {
     return this.score >= this.highThreshold ? "high" : this.score >= this.lowThreshold ? "medium" : "low";
   }
@@ -21,70 +17,105 @@ let t = class extends h {
     const e = this._getLevel();
     return e === "high" ? "check" : e === "medium" ? "info" : "warning";
   }
-  _getProgressVariant() {
-    const e = this._getLevel();
-    return e === "high" ? "success" : e === "medium" ? "warning" : "danger";
+  _handleClick() {
+    this.dispatchEvent(new CustomEvent("ai-confidence-badge-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { score: this.score, level: this._getLevel() }
+    }));
+  }
+  _handleKeyDown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleClick());
   }
   _getSparkColor(e) {
-    return e >= this.highThreshold ? "var(--cg-ai-confidence-high-color)" : e >= this.lowThreshold ? "var(--cg-ai-confidence-medium-color)" : "var(--cg-ai-confidence-low-color)";
+    return e >= this.highThreshold ? "var(--cg-color-status-success-text-default)" : e >= this.lowThreshold ? "var(--cg-color-status-warning-text-default)" : "var(--cg-color-status-error-text-default)";
   }
-  // ─── Renderers ──────────────────────────────────────────────────────────
   _renderSparkline() {
-    if (this.history.length < 2) return p;
+    if (this.history.length < 2) return d;
     const e = Math.max(...this.history, 1);
-    return c`
+    return s`
       <div class="sparkline" aria-hidden="true">
-        ${this.history.slice(-12).map((r) => c`
-          <div class="spark-bar" style="height: ${r / e * 16}px; background: ${this._getSparkColor(r)};"></div>
+        ${this.history.slice(-12).map((t) => s`
+          <div class="spark-bar" style="height: ${t / e * 16}px; background: ${this._getSparkColor(t)};"></div>
         `)}
       </div>
     `;
   }
-  _renderInner() {
-    const e = this._getLevel(), r = Math.round(this.score * 100), a = this.showPercentage ? `${r}%` : e;
-    return this.size === "lg" ? c`
-        <div class="top-row">
-          <span class="top-row-left">
-            <cg-icon name=${this._getIconName()} size="xs"></cg-icon>
-            <span class="score">${r}%</span>
-          </span>
-          <span class="level-label">${e}</span>
-        </div>
-        <cg-progress-bar
-          .value=${r}
-          variant=${this._getProgressVariant()}
-          size="sm"
-          aria-hidden="true"
-        ></cg-progress-bar>
-        ${this._renderSparkline()}
-      ` : c`
-      <cg-icon name=${this._getIconName()} size="xs"></cg-icon>
-      <span class="score">${a}</span>
-      ${this._renderSparkline()}
+  _renderTooltip() {
+    const e = this._getLevel(), t = Math.round(this.score * 100);
+    return s`
+      <div class="tooltip" role="tooltip">
+        <span class="tooltip-level">${e.charAt(0).toUpperCase() + e.slice(1)} confidence</span>
+        <span class="tooltip-score">(${t}%)</span>
+        ${this.explanation ? s`<span class="tooltip-explanation">${this.explanation}</span>` : d}
+      </div>
     `;
   }
   render() {
-    const e = this._getLevel(), r = Math.round(this.score * 100), a = `AI confidence: ${r} percent, ${e}`, n = this.explanation ? `${e.charAt(0).toUpperCase() + e.slice(1)} confidence — ${r}%. ${this.explanation}` : `${e.charAt(0).toUpperCase() + e.slice(1)} confidence — ${r}%`;
-    return c`
-      <cg-tooltip content=${n} position="top">
-        <span class="badge ${e}" aria-label=${a}>
-          ${this._renderInner()}
-        </span>
-      </cg-tooltip>
+    const e = this._getLevel(), t = Math.round(this.score * 100), n = this.showPercentage ? `${t}%` : e;
+    return this.size === "lg" ? s`
+        <div
+          class="badge ${e}"
+          role="status"
+          tabindex="0"
+          aria-label="AI confidence: ${t}%, ${e}"
+          @click=${this._handleClick}
+          @keydown=${this._handleKeyDown}
+        >
+          ${this._renderTooltip()}
+          <div class="top-row">
+            <span style="display:flex;align-items:center;gap:var(--cg-spacing-4);">
+              <cg-icon name="${this._getIconName()}" size="xs"></cg-icon>
+              <span class="score">${t}%</span>
+            </span>
+            <span class="level-label">${e}</span>
+          </div>
+          <div class="bar-track">
+            <div class="bar-fill" style="width: ${t}%"></div>
+          </div>
+          ${this._renderSparkline()}
+        </div>
+      ` : s`
+      <div
+        class="badge ${e}"
+        role="status"
+        tabindex="0"
+        aria-label="AI confidence: ${t}%, ${e}"
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}
+      >
+        ${this._renderTooltip()}
+        <cg-icon name="${this._getIconName()}" size="xs"></cg-icon>
+        <span class="score">${n}</span>
+        ${this._renderSparkline()}
+      </div>
     `;
   }
 };
-t.styles = [u, v, d`
-    :host { align-items: center; }
+r.styles = [f, b, p`
+    :host {
+      align-items: center;
+      position: relative;
+    }
 
     .badge {
       display: inline-flex;
       align-items: center;
       gap: var(--cg-spacing-4);
+      cursor: pointer;
       border: var(--cg-border-width-50) solid transparent;
+      position: relative;
+      transition:
+        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .badge:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
     }
+    .badge:hover { filter: brightness(1.1); }
+    .badge:active { transform: scale(var(--cg-interaction-press-scale)); }
 
-    /* ── Sizes ── */
     :host([size="sm"]) .badge {
       padding: var(--cg-spacing-2) var(--cg-spacing-8);
       border-radius: var(--cg-component-ai-badge-radius-sm);
@@ -92,12 +123,14 @@ t.styles = [u, v, d`
       font-weight: var(--cg-font-weight-bold);
       gap: var(--cg-spacing-2);
     }
+
     .badge {
       padding: var(--cg-spacing-4) var(--cg-spacing-12);
       border-radius: var(--cg-component-ai-badge-radius-md);
       font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-bold);
     }
+
     :host([size="lg"]) .badge {
       padding: var(--cg-spacing-12) var(--cg-spacing-16);
       border-radius: var(--cg-component-ai-badge-radius-lg);
@@ -105,37 +138,47 @@ t.styles = [u, v, d`
       flex-direction: column;
       align-items: stretch;
       gap: var(--cg-spacing-8);
-      min-width: var(--cg-spacing-128);
+      min-width: 140px;
     }
     :host([size="lg"]) .top-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
-    :host([size="lg"]) cg-progress-bar { display: block; }
+    :host([size="lg"]) .bar-track {
+      height: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-overlay-dark-subtle);
+      overflow: hidden;
+    }
+    :host([size="lg"]) .bar-fill {
+      height: 100%;
+      border-radius: var(--cg-border-radius-full);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
 
-    /* ── Variant tints ──
-       Theme-aware tier-3 tokens: light theme = solid pastel pill,
-       dark theme = stronger rgba tint than the generic --cg-color-status-*
-       chain (which dims to 12% and looks transparent on dark canvases).
-       Token values defined in packages/tokens/tier2-semantic/ai-states*.json. */
     .badge.high {
-      background: var(--cg-ai-confidence-high-background);
-      color: var(--cg-ai-confidence-high-color);
-      border-color: var(--cg-ai-confidence-high-border);
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+      border-color: var(--cg-color-status-success-border-default);
     }
+    .badge.high .bar-fill { background: var(--cg-color-status-success-text-default); }
+
     .badge.medium {
-      background: var(--cg-ai-confidence-medium-background);
-      color: var(--cg-ai-confidence-medium-color);
-      border-color: var(--cg-ai-confidence-medium-border);
+      background: var(--cg-color-status-warning-background-default);
+      color: var(--cg-color-status-warning-text-default);
+      border-color: var(--cg-color-status-warning-border-default);
     }
+    .badge.medium .bar-fill { background: var(--cg-color-status-warning-text-default); }
+
     .badge.low {
-      background: var(--cg-ai-confidence-low-background);
-      color: var(--cg-ai-confidence-low-color);
-      border-color: var(--cg-ai-confidence-low-border);
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-border-default);
     }
+    .badge.low .bar-fill { background: var(--cg-color-status-error-text-default); }
 
-    .score { letter-spacing: var(--cg-letter-spacing-wide); }
+    .score { letter-spacing: 0.02em; }
     .level-label {
       font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-semibold);
@@ -143,7 +186,6 @@ t.styles = [u, v, d`
       text-transform: capitalize;
     }
 
-    /* ── Sparkline (consumer-driven history of scores) ── */
     .sparkline {
       display: flex;
       align-items: flex-end;
@@ -159,42 +201,82 @@ t.styles = [u, v, d`
     }
     .spark-bar:last-child { opacity: 1; }
 
-    /* Top row inner shorthand. */
-    .top-row-left {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--cg-spacing-4);
+    .tooltip {
+      position: absolute;
+      bottom: calc(100% + var(--cg-spacing-8));
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      line-height: var(--cg-line-height-snug);
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      z-index: var(--cg-z-index-300);
+      box-shadow: var(--cg-elevation-1);
+    }
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: var(--cg-spacing-4) solid transparent;
+      border-top-color: var(--cg-color-surface-container-background);
+    }
+    .badge:hover .tooltip,
+    .badge:focus .tooltip {
+      opacity: 1;
+    }
+    .tooltip-level { font-weight: var(--cg-font-weight-bold); }
+    .tooltip-score { opacity: 0.7; margin-left: var(--cg-spacing-4); }
+    .tooltip-explanation {
+      display: block;
+      margin-top: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      opacity: 0.7;
+      white-space: normal;
+      max-width: 220px;
     }
 
     @media (prefers-reduced-motion: reduce) {
+      .bar-fill { transition: none; }
       .spark-bar { transition: none; }
     }
   `];
-i([
-  s({ type: Number })
-], t.prototype, "score", 2);
-i([
-  s({ type: Boolean, attribute: "show-percentage" })
-], t.prototype, "showPercentage", 2);
-i([
-  s({ type: String, reflect: !0 })
-], t.prototype, "size", 2);
-i([
-  s({ type: String })
-], t.prototype, "explanation", 2);
-i([
-  s({ type: Array })
-], t.prototype, "history", 2);
-i([
-  s({ type: Number, attribute: "high-threshold" })
-], t.prototype, "highThreshold", 2);
-i([
-  s({ type: Number, attribute: "low-threshold" })
-], t.prototype, "lowThreshold", 2);
-t = i([
-  m("ai-confidence-badge")
-], t);
+a([
+  i({ type: Number })
+], r.prototype, "score", 2);
+a([
+  i({ type: Boolean })
+], r.prototype, "showPercentage", 2);
+a([
+  i({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+a([
+  i({ type: String })
+], r.prototype, "explanation", 2);
+a([
+  i({ type: Array })
+], r.prototype, "history", 2);
+a([
+  i({ type: Number })
+], r.prototype, "highThreshold", 2);
+a([
+  i({ type: Number })
+], r.prototype, "lowThreshold", 2);
+a([
+  u()
+], r.prototype, "_showTooltip", 2);
+r = a([
+  v("ai-confidence-badge")
+], r);
 export {
-  t as AiConfidenceBadge
+  r as AiConfidenceBadge
 };
 //# sourceMappingURL=ai-confidence-badge.js.map

package/dist/components/ai-confidence-badge/ai-confidence-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-confidence-badge.js","sources":["../../../src/components/ai-confidence-badge/ai-confidence-badge.ts"],"sourcesContent":["/**\n * @element ai-confidence-badge\n * Display-only AI confidence indicator. Three sizes (sm / md / lg),\n * color-coded levels (high / medium / low), <cg-tooltip> with explanation,\n * optional sparkline of historical scores, and a real <cg-progress-bar>\n * for the lg variant.\n *\n * This is a pure display component — like <cg-badge>, <cg-icon>, and\n * <cg-spinner>. If you need clickability, wrap it:\n *\n * ```html\n * <button type=\"button\" @click=${openCalibrationDrilldown}>\n *   <ai-confidence-badge score=\"0.45\" size=\"lg\"></ai-confidence-badge>\n * </button>\n * ```\n *\n * @example\n * ```html\n * <ai-confidence-badge score=\"0.92\" size=\"sm\"></ai-confidence-badge>\n * <ai-confidence-badge\n *   score=\"0.45\"\n *   size=\"lg\"\n *   explanation=\"Low data coverage in retrieval — consider re-running\"\n *   .history=${[0.3, 0.4, 0.42, 0.45]}\n * ></ai-confidence-badge>\n * ```\n *\n * @cssprop --cg-ai-confidence-high-{background,color,border} - High-confidence tint\n * @cssprop --cg-ai-confidence-medium-{background,color,border} - Medium-confidence tint\n * @cssprop --cg-ai-confidence-low-{background,color,border} - Low-confidence tint\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\nimport '../cg-icon/cg-icon.js';\nimport '../cg-tooltip/cg-tooltip.js';\nimport '../cg-progress-bar/cg-progress-bar.js';\n\n@customElement('ai-confidence-badge')\nexport class AiConfidenceBadge extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host { align-items: center; }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      border: var(--cg-border-width-50) solid transparent;\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .badge {\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-component-ai-badge-radius-sm);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      gap: var(--cg-spacing-2);\n    }\n    .badge {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-component-ai-badge-radius-md);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n    }\n    :host([size=\"lg\"]) .badge {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-component-ai-badge-radius-lg);\n      font-size: var(--cg-font-size-sm);\n      flex-direction: column;\n      align-items: stretch;\n      gap: var(--cg-spacing-8);\n      min-width: var(--cg-spacing-128);\n    }\n    :host([size=\"lg\"]) .top-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n    :host([size=\"lg\"]) cg-progress-bar { display: block; }\n\n    /* ── Variant tints ──\n       Theme-aware tier-3 tokens: light theme = solid pastel pill,\n       dark theme = stronger rgba tint than the generic --cg-color-status-*\n       chain (which dims to 12% and looks transparent on dark canvases).\n       Token values defined in packages/tokens/tier2-semantic/ai-states*.json. */\n    .badge.high {\n      background: var(--cg-ai-confidence-high-background);\n      color: var(--cg-ai-confidence-high-color);\n      border-color: var(--cg-ai-confidence-high-border);\n    }\n    .badge.medium {\n      background: var(--cg-ai-confidence-medium-background);\n      color: var(--cg-ai-confidence-medium-color);\n      border-color: var(--cg-ai-confidence-medium-border);\n    }\n    .badge.low {\n      background: var(--cg-ai-confidence-low-background);\n      color: var(--cg-ai-confidence-low-color);\n      border-color: var(--cg-ai-confidence-low-border);\n    }\n\n    .score { letter-spacing: var(--cg-letter-spacing-wide); }\n    .level-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      opacity: 0.8;\n      text-transform: capitalize;\n    }\n\n    /* ── Sparkline (consumer-driven history of scores) ── */\n    .sparkline {\n      display: flex;\n      align-items: flex-end;\n      gap: var(--cg-spacing-1);\n      height: var(--cg-spacing-16);\n      margin-left: var(--cg-spacing-6);\n    }\n    .spark-bar {\n      width: var(--cg-spacing-2);\n      border-radius: var(--cg-border-radius-full);\n      transition: height var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      opacity: 0.5;\n    }\n    .spark-bar:last-child { opacity: 1; }\n\n    /* Top row inner shorthand. */\n    .top-row-left {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .spark-bar { transition: none; }\n    }\n  `];\n\n  /** Confidence score 0-1. */\n  @property({ type: Number }) score: number = 0.85;\n\n  /** Show percentage or level name in the inline label. */\n  @property({ type: Boolean, attribute: 'show-percentage' }) showPercentage: boolean = true;\n\n  /** Size variant. */\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Tooltip explanation text. */\n  @property({ type: String }) explanation: string = '';\n\n  /** History array of scores (0-1) for sparkline. */\n  @property({ type: Array }) history: number[] = [];\n\n  /** High-confidence threshold (default 0.8). */\n  @property({ type: Number, attribute: 'high-threshold' }) highThreshold: number = 0.8;\n\n  /** Low-confidence threshold (default 0.5). Below this = \"low\". */\n  @property({ type: Number, attribute: 'low-threshold' }) lowThreshold: number = 0.5;\n\n  // ─── Derivations ────────────────────────────────────────────────────────\n\n  private _getLevel(): 'high' | 'medium' | 'low' {\n    if (this.score >= this.highThreshold) return 'high';\n    if (this.score >= this.lowThreshold) return 'medium';\n    return 'low';\n  }\n\n  private _getIconName(): string {\n    const level = this._getLevel();\n    if (level === 'high') return 'check';\n    if (level === 'medium') return 'info';\n    return 'warning';\n  }\n\n  private _getProgressVariant(): 'success' | 'warning' | 'danger' {\n    const level = this._getLevel();\n    return level === 'high' ? 'success' : level === 'medium' ? 'warning' : 'danger';\n  }\n\n  private _getSparkColor(value: number): string {\n    if (value >= this.highThreshold) return 'var(--cg-ai-confidence-high-color)';\n    if (value >= this.lowThreshold) return 'var(--cg-ai-confidence-medium-color)';\n    return 'var(--cg-ai-confidence-low-color)';\n  }\n\n  // ─── Renderers ──────────────────────────────────────────────────────────\n\n  private _renderSparkline() {\n    if (this.history.length < 2) return nothing;\n    const max = Math.max(...this.history, 1);\n    return html`\n      <div class=\"sparkline\" aria-hidden=\"true\">\n        ${this.history.slice(-12).map(v => html`\n          <div class=\"spark-bar\" style=\"height: ${(v / max) * 16}px; background: ${this._getSparkColor(v)};\"></div>\n        `)}\n      </div>\n    `;\n  }\n\n  private _renderInner() {\n    const level = this._getLevel();\n    const pct = Math.round(this.score * 100);\n    const label = this.showPercentage ? `${pct}%` : level;\n\n    if (this.size === 'lg') {\n      return html`\n        <div class=\"top-row\">\n          <span class=\"top-row-left\">\n            <cg-icon name=${this._getIconName()} size=\"xs\"></cg-icon>\n            <span class=\"score\">${pct}%</span>\n          </span>\n          <span class=\"level-label\">${level}</span>\n        </div>\n        <cg-progress-bar\n          .value=${pct}\n          variant=${this._getProgressVariant()}\n          size=\"sm\"\n          aria-hidden=\"true\"\n        ></cg-progress-bar>\n        ${this._renderSparkline()}\n      `;\n    }\n\n    return html`\n      <cg-icon name=${this._getIconName()} size=\"xs\"></cg-icon>\n      <span class=\"score\">${label}</span>\n      ${this._renderSparkline()}\n    `;\n  }\n\n  override render() {\n    const level = this._getLevel();\n    const pct = Math.round(this.score * 100);\n    const ariaLabel = `AI confidence: ${pct} percent, ${level}`;\n\n    const tooltipContent = this.explanation\n      ? `${level.charAt(0).toUpperCase() + level.slice(1)} confidence — ${pct}%. ${this.explanation}`\n      : `${level.charAt(0).toUpperCase() + level.slice(1)} confidence — ${pct}%`;\n\n    return html`\n      <cg-tooltip content=${tooltipContent} position=\"top\">\n        <span class=\"badge ${level}\" aria-label=${ariaLabel}>\n          ${this._renderInner()}\n        </span>\n      </cg-tooltip>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-confidence-badge': AiConfidenceBadge;\n  }\n}\n"],"names":["AiConfidenceBadge","LitElement","level","value","nothing","max","html","v","pct","label","ariaLabel","tooltipContent","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-confidence-badge.js","sources":["../../../src/components/ai-confidence-badge/ai-confidence-badge.ts"],"sourcesContent":["/**\n * @element ai-confidence-badge\n * AI confidence badge with three sizes (sm/md/lg), color-coded levels (high/medium/low),\n * tooltip with explanation, and optional sparkline of historical scores.\n *\n * @example\n * ```html\n * <ai-confidence-badge score=\"0.92\" size=\"sm\"></ai-confidence-badge>\n * <ai-confidence-badge score=\"0.45\" size=\"lg\" explanation=\"Low data coverage\"\n *   .history=${[0.3, 0.4, 0.42, 0.45]}></ai-confidence-badge>\n * ```\n *\n * @fires {CustomEvent<{score: number, level: string}>} ai-confidence-badge-click - Badge clicked\n *\n * @cssprop --cg-color-status-success-text-default - High confidence color\n * @cssprop --cg-color-status-warning-text-default - Medium confidence color\n * @cssprop --cg-color-status-error-text-default - Low confidence color\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n@customElement('ai-confidence-badge')\nexport class AiConfidenceBadge extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      align-items: center;\n      position: relative;\n    }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      cursor: pointer;\n      border: var(--cg-border-width-50) solid transparent;\n      position: relative;\n      transition:\n        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .badge:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n    .badge:hover { filter: brightness(1.1); }\n    .badge:active { transform: scale(var(--cg-interaction-press-scale)); }\n\n    :host([size=\"sm\"]) .badge {\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-component-ai-badge-radius-sm);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      gap: var(--cg-spacing-2);\n    }\n\n    .badge {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-component-ai-badge-radius-md);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n    }\n\n    :host([size=\"lg\"]) .badge {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-component-ai-badge-radius-lg);\n      font-size: var(--cg-font-size-sm);\n      flex-direction: column;\n      align-items: stretch;\n      gap: var(--cg-spacing-8);\n      min-width: 140px;\n    }\n    :host([size=\"lg\"]) .top-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n    :host([size=\"lg\"]) .bar-track {\n      height: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-overlay-dark-subtle);\n      overflow: hidden;\n    }\n    :host([size=\"lg\"]) .bar-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    .badge.high {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      border-color: var(--cg-color-status-success-border-default);\n    }\n    .badge.high .bar-fill { background: var(--cg-color-status-success-text-default); }\n\n    .badge.medium {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n      border-color: var(--cg-color-status-warning-border-default);\n    }\n    .badge.medium .bar-fill { background: var(--cg-color-status-warning-text-default); }\n\n    .badge.low {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    .badge.low .bar-fill { background: var(--cg-color-status-error-text-default); }\n\n    .score { letter-spacing: 0.02em; }\n    .level-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      opacity: 0.8;\n      text-transform: capitalize;\n    }\n\n    .sparkline {\n      display: flex;\n      align-items: flex-end;\n      gap: var(--cg-spacing-1);\n      height: var(--cg-spacing-16);\n      margin-left: var(--cg-spacing-6);\n    }\n    .spark-bar {\n      width: var(--cg-spacing-2);\n      border-radius: var(--cg-border-radius-full);\n      transition: height var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      opacity: 0.5;\n    }\n    .spark-bar:last-child { opacity: 1; }\n\n    .tooltip {\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-8));\n      left: 50%;\n      transform: translateX(-50%);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      line-height: var(--cg-line-height-snug);\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      z-index: var(--cg-z-index-300);\n      box-shadow: var(--cg-elevation-1);\n    }\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border: var(--cg-spacing-4) solid transparent;\n      border-top-color: var(--cg-color-surface-container-background);\n    }\n    .badge:hover .tooltip,\n    .badge:focus .tooltip {\n      opacity: 1;\n    }\n    .tooltip-level { font-weight: var(--cg-font-weight-bold); }\n    .tooltip-score { opacity: 0.7; margin-left: var(--cg-spacing-4); }\n    .tooltip-explanation {\n      display: block;\n      margin-top: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      opacity: 0.7;\n      white-space: normal;\n      max-width: 220px;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .bar-fill { transition: none; }\n      .spark-bar { transition: none; }\n    }\n  `];\n\n  /** Confidence score 0-1 */\n  @property({ type: Number }) score: number = 0.85;\n  /** Show percentage or level name */\n  @property({ type: Boolean }) showPercentage: boolean = true;\n  /** Size variant */\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  /** Explanation text for tooltip */\n  @property({ type: String }) explanation: string = '';\n  /** History array of scores for sparkline */\n  @property({ type: Array }) history: number[] = [];\n  /** High confidence threshold */\n  @property({ type: Number }) highThreshold: number = 0.8;\n  /** Low confidence threshold */\n  @property({ type: Number }) lowThreshold: number = 0.5;\n\n  @state() private _showTooltip: boolean = false;\n\n  private _getLevel(): 'high' | 'medium' | 'low' {\n    if (this.score >= this.highThreshold) return 'high';\n    if (this.score >= this.lowThreshold) return 'medium';\n    return 'low';\n  }\n\n  private _getIconName(): string {\n    const level = this._getLevel();\n    if (level === 'high') return 'check';\n    if (level === 'medium') return 'info';\n    return 'warning';\n  }\n\n  private _handleClick() {\n    this.dispatchEvent(new CustomEvent('ai-confidence-badge-click', {\n      bubbles: true, composed: true,\n      detail: { score: this.score, level: this._getLevel() },\n    }));\n  }\n\n  private _handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._handleClick();\n    }\n  }\n\n  private _getSparkColor(value: number): string {\n    if (value >= this.highThreshold) return 'var(--cg-color-status-success-text-default)';\n    if (value >= this.lowThreshold) return 'var(--cg-color-status-warning-text-default)';\n    return 'var(--cg-color-status-error-text-default)';\n  }\n\n  private _renderSparkline() {\n    if (this.history.length < 2) return nothing;\n    const max = Math.max(...this.history, 1);\n    return html`\n      <div class=\"sparkline\" aria-hidden=\"true\">\n        ${this.history.slice(-12).map(v => html`\n          <div class=\"spark-bar\" style=\"height: ${(v / max) * 16}px; background: ${this._getSparkColor(v)};\"></div>\n        `)}\n      </div>\n    `;\n  }\n\n  private _renderTooltip() {\n    const level = this._getLevel();\n    const pct = Math.round(this.score * 100);\n    return html`\n      <div class=\"tooltip\" role=\"tooltip\">\n        <span class=\"tooltip-level\">${level.charAt(0).toUpperCase() + level.slice(1)} confidence</span>\n        <span class=\"tooltip-score\">(${pct}%)</span>\n        ${this.explanation ? html`<span class=\"tooltip-explanation\">${this.explanation}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    const level = this._getLevel();\n    const pct = Math.round(this.score * 100);\n    const label = this.showPercentage ? `${pct}%` : level;\n\n    if (this.size === 'lg') {\n      return html`\n        <div\n          class=\"badge ${level}\"\n          role=\"status\"\n          tabindex=\"0\"\n          aria-label=\"AI confidence: ${pct}%, ${level}\"\n          @click=${this._handleClick}\n          @keydown=${this._handleKeyDown}\n        >\n          ${this._renderTooltip()}\n          <div class=\"top-row\">\n            <span style=\"display:flex;align-items:center;gap:var(--cg-spacing-4);\">\n              <cg-icon name=\"${this._getIconName()}\" size=\"xs\"></cg-icon>\n              <span class=\"score\">${pct}%</span>\n            </span>\n            <span class=\"level-label\">${level}</span>\n          </div>\n          <div class=\"bar-track\">\n            <div class=\"bar-fill\" style=\"width: ${pct}%\"></div>\n          </div>\n          ${this._renderSparkline()}\n        </div>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"badge ${level}\"\n        role=\"status\"\n        tabindex=\"0\"\n        aria-label=\"AI confidence: ${pct}%, ${level}\"\n        @click=${this._handleClick}\n        @keydown=${this._handleKeyDown}\n      >\n        ${this._renderTooltip()}\n        <cg-icon name=\"${this._getIconName()}\" size=\"xs\"></cg-icon>\n        <span class=\"score\">${label}</span>\n        ${this._renderSparkline()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-confidence-badge': AiConfidenceBadge;\n  }\n}\n"],"names":["AiConfidenceBadge","LitElement","level","value","nothing","max","html","v","pct","label","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAuBO,IAAMA,IAAN,cAAgCC,EAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA,GAgKuB,KAAA,QAAgB,MAEf,KAAA,iBAA0B,IAEZ,KAAA,OAA2B,MAE1C,KAAA,cAAsB,IAEvB,KAAA,UAAoB,CAAA,GAEnB,KAAA,gBAAwB,KAExB,KAAA,eAAuB,KAE1C,KAAQ,eAAwB;AAAA,EAAA;AAAA,EAEjC,YAAuC;AAC7C,WAAI,KAAK,SAAS,KAAK,gBAAsB,SACzC,KAAK,SAAS,KAAK,eAAqB,WACrC;AAAA,EACT;AAAA,EAEQ,eAAuB;AAC7B,UAAMC,IAAQ,KAAK,UAAA;AACnB,WAAIA,MAAU,SAAe,UACzBA,MAAU,WAAiB,SACxB;AAAA,EACT;AAAA,EAEQ,eAAe;AACrB,SAAK,cAAc,IAAI,YAAY,6BAA6B;AAAA,MAC9D,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,OAAO,KAAK,OAAO,OAAO,KAAK,YAAU;AAAA,IAAE,CACtD,CAAC;AAAA,EACJ;AAAA,EAEQ,eAAe,GAAkB;AACvC,KAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACF,KAAK,aAAA;AAAA,EAET;AAAA,EAEQ,eAAeC,GAAuB;AAC5C,WAAIA,KAAS,KAAK,gBAAsB,gDACpCA,KAAS,KAAK,eAAqB,gDAChC;AAAA,EACT;AAAA,EAEQ,mBAAmB;AACzB,QAAI,KAAK,QAAQ,SAAS,EAAG,QAAOC;AACpC,UAAMC,IAAM,KAAK,IAAI,GAAG,KAAK,SAAS,CAAC;AACvC,WAAOC;AAAA;AAAA,UAED,KAAK,QAAQ,MAAM,GAAG,EAAE,IAAI,CAAAC,MAAKD;AAAA,kDACQC,IAAIF,IAAO,EAAE,mBAAmB,KAAK,eAAeE,CAAC,CAAC;AAAA,SAChG,CAAC;AAAA;AAAA;AAAA,EAGR;AAAA,EAEQ,iBAAiB;AACvB,UAAML,IAAQ,KAAK,UAAA,GACbM,IAAM,KAAK,MAAM,KAAK,QAAQ,GAAG;AACvC,WAAOF;AAAA;AAAA,sCAE2BJ,EAAM,OAAO,CAAC,EAAE,gBAAgBA,EAAM,MAAM,CAAC,CAAC;AAAA,uCAC7CM,CAAG;AAAA,UAChC,KAAK,cAAcF,sCAAyC,KAAK,WAAW,YAAYF,CAAO;AAAA;AAAA;AAAA,EAGvG;AAAA,EAES,SAAS;AAChB,UAAMF,IAAQ,KAAK,UAAA,GACbM,IAAM,KAAK,MAAM,KAAK,QAAQ,GAAG,GACjCC,IAAQ,KAAK,iBAAiB,GAAGD,CAAG,MAAMN;AAEhD,WAAI,KAAK,SAAS,OACTI;AAAA;AAAA,yBAEYJ,CAAK;AAAA;AAAA;AAAA,uCAGSM,CAAG,MAAMN,CAAK;AAAA,mBAClC,KAAK,YAAY;AAAA,qBACf,KAAK,cAAc;AAAA;AAAA,YAE5B,KAAK,gBAAgB;AAAA;AAAA;AAAA,+BAGF,KAAK,cAAc;AAAA,oCACdM,CAAG;AAAA;AAAA,wCAECN,CAAK;AAAA;AAAA;AAAA,kDAGKM,CAAG;AAAA;AAAA,YAEzC,KAAK,kBAAkB;AAAA;AAAA,UAKxBF;AAAA;AAAA,uBAEYJ,CAAK;AAAA;AAAA;AAAA,qCAGSM,CAAG,MAAMN,CAAK;AAAA,iBAClC,KAAK,YAAY;AAAA,mBACf,KAAK,cAAc;AAAA;AAAA,UAE5B,KAAK,gBAAgB;AAAA,yBACN,KAAK,cAAc;AAAA,8BACdO,CAAK;AAAA,UACzB,KAAK,kBAAkB;AAAA;AAAA;AAAA,EAG/B;AACF;AAxRaT,EACK,SAAS,CAACU,GAAUC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4JlD;AAG2BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhKfd,EAgKiB,WAAA,SAAA,CAAA;AAECa,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlKhBd,EAkKkB,WAAA,kBAAA,CAAA;AAEca,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApK9Bd,EAoKgC,WAAA,QAAA,CAAA;AAEfa,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtKfd,EAsKiB,WAAA,eAAA,CAAA;AAEDa,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAxKdd,EAwKgB,WAAA,WAAA,CAAA;AAECa,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Kfd,EA0KiB,WAAA,iBAAA,CAAA;AAEAa,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Kfd,EA4KiB,WAAA,gBAAA,CAAA;AAEXa,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9KIf,EA8KM,WAAA,gBAAA,CAAA;AA9KNA,IAANa,EAAA;AAAA,EADNG,EAAc,qBAAqB;AAAA,GACvBhB,CAAA;"}

package/dist/components/ai-confidence-slider/ai-confidence-slider.js

@@ -1,10 +1,10 @@
 import { css as d, LitElement as v, nothing as g, html as l } from "lit";
 import { property as n, customElement as p } from "lit/decorators.js";
-import { h as b, r as h, f } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (r, e, o, i) => {
-  for (var t = i > 1 ? void 0 : i ? x(e, o) : e, u = r.length - 1, c; u >= 0; u--)
-    (c = r[u]) && (t = (i ? c(e, o, t) : c(t)) || t);
-  return i && t && m(e, o, t), t;
+import { h as b, r as h, f } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (e, r, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? x(r, o) : r, u = e.length - 1, c; u >= 0; u--)
+    (c = e[u]) && (t = (i ? c(r, o, t) : c(t)) || t);
+  return i && t && m(r, o, t), t;
 };
 let a = class extends v {
   constructor() {
@@ -14,26 +14,26 @@ let a = class extends v {
       { label: "High (80%)", value: 80 }
     ];
   }
-  _handleChange(r) {
-    this.value = Number(r.target.value), this.dispatchEvent(new CustomEvent("ai-confidence-change", {
+  _handleChange(e) {
+    this.value = Number(e.target.value), this.dispatchEvent(new CustomEvent("ai-confidence-change", {
       bubbles: !0,
       composed: !0,
       detail: { value: this.value }
     }));
   }
-  _setPreset(r) {
-    this.value = r, this.dispatchEvent(new CustomEvent("ai-confidence-change", {
+  _setPreset(e) {
+    this.value = e, this.dispatchEvent(new CustomEvent("ai-confidence-change", {
       bubbles: !0,
       composed: !0,
       detail: { value: this.value }
     }));
   }
-  _getBarColor(r, e) {
-    const o = r / e * 100;
+  _getBarColor(e, r) {
+    const o = e / r * 100;
     return o < 30 ? "var(--cg-color-status-error-text-default)" : o < 60 ? "var(--cg-color-status-warning-text-default)" : "var(--cg-color-status-success-text-default)";
   }
   render() {
-    const r = (this.value - this.min) / (this.max - this.min) * 100;
+    const e = (this.value - this.min) / (this.max - this.min) * 100;
     return l`
       <div class="container" role="group" aria-label="Confidence threshold">
         <div class="header">
@@ -45,7 +45,7 @@ let a = class extends v {
           ` : g}
         </div>
 
-        <div class="slider-row" style="--thumb-pos: ${r}%;">
+        <div class="slider-row" style="--thumb-pos: ${e}%;">
           <div class="value-badge">${this.value}%</div>
           <input type="range" .value=${String(this.value)}
             min="${this.min}" max="${this.max}"
@@ -55,20 +55,20 @@ let a = class extends v {
         </div>
 
         <div class="presets">
-          ${this._presets.map((e) => l`
-            <button class="preset-btn ${this.value === e.value ? "active" : ""}"
-              aria-label=${`Set confidence to ${e.value}%`}
-              aria-pressed=${this.value === e.value ? "true" : "false"}
-              @click=${() => this._setPreset(e.value)}>${e.label}</button>
+          ${this._presets.map((r) => l`
+            <button class="preset-btn ${this.value === r.value ? "active" : ""}"
+              aria-label=${`Set confidence to ${r.value}%`}
+              aria-pressed=${this.value === r.value ? "true" : "false"}
+              @click=${() => this._setPreset(r.value)}>${r.label}</button>
           `)}
         </div>
 
         ${this.distribution.length > 0 ? (() => {
-      const e = Math.max(...this.distribution, 1);
+      const r = Math.max(...this.distribution, 1);
       return l`
           <div class="distribution" aria-hidden="true">
             ${this.distribution.map((o, i) => {
-        const t = o / e * 32, c = i / this.distribution.length * 100 < this.value;
+        const t = o / r * 32, c = i / this.distribution.length * 100 < this.value;
         return l`<div class="dist-bar ${c ? "below" : ""}"
                 style="height: ${Math.max(t, 2)}px; background: ${this._getBarColor(i, this.distribution.length)};"></div>`;
       })}
@@ -122,22 +122,22 @@ a.styles = [b, h, f, d`
       width: var(--cg-spacing-16);
       height: var(--cg-spacing-16);
       border-radius: var(--cg-border-radius-full);
-      background: var(--cg-color-surface-base-text);
-      border: var(--cg-spacing-2) solid var(--cg-color-surface-cards-background);
+      background: var(--cg-color-slider-thumb-background);
+      border: var(--cg-spacing-2) solid var(--cg-color-slider-thumb-border);
       cursor: pointer;
     }
     input[type="range"]:focus-visible::-webkit-slider-thumb {
-      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     /* Firefox */
     input[type="range"]::-moz-range-thumb {
       width: var(--cg-spacing-16); height: var(--cg-spacing-16); border-radius: var(--cg-border-radius-full);
-      background: var(--cg-color-surface-base-text);
-      border: var(--cg-spacing-2) solid var(--cg-color-surface-cards-background);
+      background: var(--cg-color-slider-thumb-background);
+      border: var(--cg-spacing-2) solid var(--cg-color-slider-thumb-border);
       cursor: pointer;
     }
     input[type="range"]:focus-visible::-moz-range-thumb {
-      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     input[type="range"]::-moz-range-track {
       height: var(--cg-spacing-6); border-radius: var(--cg-border-radius-50);
@@ -170,7 +170,7 @@ a.styles = [b, h, f, d`
     }
     .preset-btn:hover { border-color: var(--cg-color-input-border-hover); color: var(--cg-color-surface-base-text); }
     .preset-btn:focus-visible {
-      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     .preset-btn.active { border-color: var(--cg-color-surface-base-text); color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }