@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-version-selector/ai-version-selector.js

@@ -1,155 +1,101 @@
-import { css as g, LitElement as p, nothing as s, html as a } from "lit";
-import { property as u, customElement as v } from "lit/decorators.js";
-import { h, r as b, f } from "../../chunks/premium.css-9I4kHrsl.js";
-import "../cg-slider/cg-slider.js";
-import "../cg-button/cg-button.js";
-import "../cg-radio/cg-radio.js";
-var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, i, o) => {
-  for (var r = o > 1 ? void 0 : o ? w(t, i) : t, c = e.length - 1, d; c >= 0; c--)
-    (d = e[c]) && (r = (o ? d(t, i, r) : d(r)) || r);
-  return o && r && m(t, i, r), r;
+import { css as u, LitElement as p, nothing as d, html as s } from "lit";
+import { property as g, customElement as v } from "lit/decorators.js";
+import { h as b, r as f, f as h } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (r, a, e, i) => {
+  for (var o = i > 1 ? void 0 : i ? x(a, e) : a, c = r.length - 1, l; c >= 0; c--)
+    (l = r[c]) && (o = (i ? l(a, e, o) : l(o)) || o);
+  return i && o && m(a, e, o), o;
 };
-let l = class extends p {
+let t = class extends p {
   constructor() {
     super(...arguments), this.rounded = "lg", this.versions = [], this.selected = "";
   }
-  // ─── Handlers ───────────────────────────────────────────────────────────
-  _onSelect(e) {
+  _onSelect(r) {
     this.dispatchEvent(new CustomEvent("ai-version-select", {
       bubbles: !0,
       composed: !0,
-      detail: { id: e.id, label: e.label }
+      detail: { id: r.id, label: r.label }
     }));
   }
-  _onRolloutChange(e, t) {
-    const o = t.detail?.value ?? 0;
+  _onRolloutChange(r, a) {
+    const e = Number(a.target.value);
     this.dispatchEvent(new CustomEvent("ai-version-rollout-change", {
       bubbles: !0,
       composed: !0,
-      detail: { id: e.id, rolloutPercent: o }
+      detail: { id: r.id, rolloutPercent: e }
     }));
   }
-  _onPromote(e, t) {
-    t.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-version-rollout-change", {
+  _onPromote(r, a) {
+    a.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-version-rollout-change", {
       bubbles: !0,
       composed: !0,
-      detail: { id: e.id, rolloutPercent: 100 }
+      detail: { id: r.id, rolloutPercent: 100 }
     }));
   }
   render() {
-    return a`
-      <h3 class="title">Model versions</h3>
+    return s`
+      <h3 class="title">Model Versions</h3>
       <div class="version-list" role="radiogroup" aria-label="Select model version">
-        ${this.versions.map((e) => {
-      const t = e.id === this.selected, i = e.rolloutPercent != null && e.status !== "deprecated", o = e.latency != null || e.cost != null || e.quality != null;
-      return a`
-            <button
-              class="version-item"
-              type="button"
-              role="radio"
-              aria-checked=${t ? "true" : "false"}
-              aria-label="${e.label}, ${e.status}"
-              @click=${() => this._onSelect(e)}
-            >
+        ${this.versions.map((r) => {
+      const a = r.id === this.selected;
+      return s`
+            <div class="version-item" role="radio"
+                 aria-selected=${a ? "true" : "false"}
+                 aria-label="${r.label} ${r.status}"
+                 tabindex="0"
+                 @click=${() => this._onSelect(r)}
+                 @keydown=${(e) => {
+        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._onSelect(r));
+      }}>
               <div class="version-top">
-                <cg-radio
-                  variant="tick"
-                  .checked=${t}
-                  aria-hidden="true"
-                  tabindex="-1"
-                ></cg-radio>
-                <span class="version-label">${e.label}</span>
-                <span class="status-pill ${e.status}">
-                  <span class="pill-dot" aria-hidden="true"></span>
-                  ${e.status}
-                </span>
-                <span class="version-date">${e.date}</span>
+                <span class="radio-dot"><span class="radio-inner"></span></span>
+                <span class="version-label">${r.label}</span>
+                <span class="status-badge status-${r.status}">${r.status}</span>
+                <span class="version-date">${r.date}</span>
               </div>
-
-              ${o ? a`
-                <div class="meta-row">
-                  ${e.latency != null ? a`
-                    <span class="meta-item">
-                      <span class="meta-label">Latency</span>
-                      <span class="meta-value">${e.latency} ms</span>
-                    </span>
-                  ` : s}
-                  ${e.cost ? a`
-                    <span class="meta-item">
-                      <span class="meta-label">Cost</span>
-                      <span class="meta-value">${e.cost}</span>
-                    </span>
-                  ` : s}
-                  ${e.quality != null ? a`
-                    <span class="meta-item">
-                      <span class="meta-label">Quality</span>
-                      <span class="meta-value">${e.quality}%</span>
-                    </span>
-                  ` : s}
-                </div>
-              ` : s}
-
-              ${e.status === "deprecated" ? a`
+              ${r.status === "deprecated" ? s`
                 <div class="deprecation-warning" role="alert">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
-                    <line x1="12" y1="9"  x2="12" y2="13"/>
-                    <line x1="12" y1="17" x2="12.01" y2="17"/>
-                  </svg>
-                  <span>This version is deprecated. Migrate before the sunset date.</span>
+                  &#x26A0; This version is deprecated. Consider migrating.
                 </div>
-              ` : s}
-
-              ${i ? a`
-                <div class="rollout-section" @click=${(r) => r.stopPropagation()}>
-                  <cg-slider
-                    label="Rollout"
-                    .value=${e.rolloutPercent ?? 0}
-                    min="0"
-                    max="100"
-                    unit="%"
-                    showValue
-                    showTooltip
-                    aria-label="Rollout percentage for ${e.label}"
-                    @cg-change=${(r) => this._onRolloutChange(e, r)}
-                  ></cg-slider>
-                  ${(e.rolloutPercent ?? 0) < 100 ? a`
-                    <div class="rollout-actions">
-                      <cg-button
-                        variant="secondary"
-                        size="sm"
-                        @click=${(r) => this._onPromote(e, r)}
-                        aria-label="Promote ${e.label} to 100%"
-                      >Promote to 100%</cg-button>
-                    </div>
-                  ` : s}
+              ` : d}
+              ${r.rolloutPercent != null && r.status !== "deprecated" ? s`
+                <div class="rollout-row">
+                  <span class="rollout-label">Rollout</span>
+                  <input type="range" min="0" max="100" .value=${String(r.rolloutPercent)}
+                         @input=${(e) => this._onRolloutChange(r, e)}
+                         @click=${(e) => e.stopPropagation()}
+                         aria-label="Rollout percentage for ${r.label}" />
+                  <span class="rollout-value">${r.rolloutPercent}%</span>
+                  ${r.rolloutPercent < 100 ? s`
+                    <button class="promote-btn" @click=${(e) => this._onPromote(r, e)}
+                            tabindex="0" aria-label="Promote ${r.label} to 100%">
+                      Promote to 100%
+                    </button>
+                  ` : d}
                 </div>
-              ` : s}
-            </button>
+              ` : d}
+            </div>
           `;
     })}
       </div>
     `;
   }
 };
-l.styles = [h, b, f, g`
+t.styles = [b, f, h, u`
     :host {
-      display: block;
-      background: var(--cg-color-surface-cards-background);
+      background: var(--cg-color-surface-base-background);
       color: var(--cg-color-surface-base-text);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
       border-radius: var(--cg-border-radius-150);
-      box-shadow: var(--cg-elevation-1);
-      padding: var(--cg-spacing-20);
-      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+      padding: var(--cg-spacing-16);
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     :host([hidden]) { display: none; }
 
     .title {
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-semibold);
-      margin: 0 0 var(--cg-spacing-16) 0;
-      color: var(--cg-color-surface-base-text);
+      margin: 0 0 var(--cg-spacing-12) 0;
     }
 
     .version-list {
@@ -158,169 +104,202 @@ l.styles = [h, b, f, g`
       gap: var(--cg-spacing-8);
     }
 
-    /* ── Version row card ──
-       Border: subtle resting, slightly stronger on hover, one more
-       tonal step on selected. NO brand-accent border on selected (was
-       too loud) — selection is signaled by the cg-radio dot. NO press-
-       scale on the row — selecting a version isn't a "tap" interaction. */
     .version-item {
       display: flex;
       flex-direction: column;
-      gap: var(--cg-spacing-12);
-      padding: var(--cg-spacing-12) var(--cg-spacing-16);
-      background: var(--cg-color-surface-cards-emphasis);
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12);
+      background: var(--cg-color-surface-cards-background);
       border-radius: var(--cg-border-radius-100);
-      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border: var(--cg-border-width-100) solid transparent;
       cursor: pointer;
-      width: 100%;
-      text-align: left;
-      font: inherit;
-      color: inherit;
       transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    .version-item:hover { border-color: var(--cg-color-surface-cards-border-strong); }
-    .version-item:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+
+    .version-item:hover {
+      border-color: var(--cg-color-surface-cards-border);
+    }
+
+    .version-item[aria-selected="true"] {
+      border-color: var(--cg-color-surface-base-text);
     }
-    .version-item[aria-checked="true"] {
-      border-color: var(--cg-color-surface-cards-border-strong);
+
+    .version-item:focus-visible {
+      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
     }
 
     .version-top {
       display: flex;
       align-items: center;
-      gap: var(--cg-spacing-12);
-      flex-wrap: wrap;
+      gap: var(--cg-spacing-8);
     }
 
-    /* The cg-radio inside the row is a display-only indicator; the
-       wrapping button captures all interaction. pointer-events: none
-       lets clicks fall through to the button. */
-    .version-item cg-radio {
-      pointer-events: none;
+    .radio-dot {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border-radius: 50%;
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);
       flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .version-item[aria-selected="true"] .radio-dot {
+      border-color: var(--cg-color-surface-base-text);
+    }
+
+    .radio-inner {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: 50%;
+      background: var(--cg-color-action-primary-background-default);
+      display: none;
+    }
+
+    .version-item[aria-selected="true"] .radio-inner {
+      display: block;
     }
 
     .version-label {
       flex: 1;
-      min-width: 0;
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-medium);
-      color: var(--cg-color-surface-base-text);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
 
     .version-date {
       font-size: var(--cg-font-size-xs);
       color: var(--cg-color-input-text-placeholder);
-      flex-shrink: 0;
-      font-variant-numeric: tabular-nums;
     }
 
-    /* ── Status pill — outlined with leading colored dot ── */
-    .status-pill {
+    .status-badge {
       display: inline-flex;
-      align-items: center;
-      gap: var(--cg-spacing-6);
       padding: var(--cg-spacing-2) var(--cg-spacing-8);
       border-radius: var(--cg-border-radius-full);
-      font-size: 10px;
-      font-weight: var(--cg-font-weight-bold);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
       text-transform: uppercase;
-      letter-spacing: var(--cg-letter-spacing-wide);
+      letter-spacing: 0.05em;
       flex-shrink: 0;
-      border: var(--cg-border-width-50) solid currentColor;
-      background: transparent;
     }
-    .status-pill .pill-dot {
-      width: var(--cg-spacing-6);
-      height: var(--cg-spacing-6);
-      border-radius: var(--cg-border-radius-full);
-      background: currentColor;
-      flex-shrink: 0;
+
+    .status-active {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
     }
-    .status-pill.active     { color: var(--cg-color-status-success-text-default); }
-    .status-pill.canary     { color: var(--cg-color-status-warning-text-default); }
-    .status-pill.deprecated { color: var(--cg-color-status-error-text-default); }
-    /* Pulse the active dot — alive signal. */
-    .status-pill.active .pill-dot {
-      animation: cg-version-pulse 2s var(--cg-transition-easing-ease-in-out) infinite;
+
+    .status-canary {
+      background: var(--cg-color-status-warning-background-default);
+      color: var(--cg-color-status-warning-text-default);
     }
-    @keyframes cg-version-pulse {
-      0%, 100% { opacity: 1; }
-      50%      { opacity: 0.5; }
+
+    .status-deprecated {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
     }
 
-    /* ── Deprecation warning ── */
     .deprecation-warning {
       display: flex;
       align-items: center;
-      gap: var(--cg-spacing-8);
+      gap: var(--cg-spacing-6);
       font-size: var(--cg-font-size-xs);
       color: var(--cg-color-status-error-text-default);
-      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
       background: var(--cg-color-status-error-background-default);
-      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
       border-radius: var(--cg-border-radius-50);
     }
-    .deprecation-warning svg {
-      width: var(--cg-icon-size-100);
-      height: var(--cg-icon-size-100);
-      flex-shrink: 0;
-    }
 
-    /* ── Per-version meta row (latency / cost / quality) ── */
-    .meta-row {
+    .rollout-row {
       display: flex;
-      flex-wrap: wrap;
-      gap: var(--cg-spacing-12);
+      align-items: center;
+      gap: var(--cg-spacing-8);
+    }
+
+    .rollout-label {
       font-size: var(--cg-font-size-xs);
       color: var(--cg-color-input-text-placeholder);
-      font-variant-numeric: tabular-nums;
+      min-width: var(--cg-spacing-56);
     }
-    .meta-item { display: inline-flex; gap: var(--cg-spacing-4); }
-    .meta-label { color: var(--cg-color-input-text-placeholder); }
-    .meta-value { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-medium); }
 
-    /* ── Rollout section ──
-       Slider gets a full-width row of its own; the Promote action sits on
-       a dedicated row below, right-aligned, as a tertiary (text-style)
-       button so it reads as a quick-shortcut, not a primary CTA competing
-       with the slider's value display. */
-    .rollout-section {
-      display: flex;
-      flex-direction: column;
-      gap: var(--cg-spacing-4);
+    input[type="range"] {
+      flex: 1;
+      -webkit-appearance: none;
+      appearance: none;
+      height: var(--cg-spacing-4);
+      background: var(--cg-color-surface-base-background);
+      border-radius: var(--cg-spacing-2);
+      outline: none;
     }
-    .rollout-section cg-slider { width: 100%; }
-    .rollout-actions {
-      display: flex;
-      justify-content: flex-end;
+
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      border-radius: 50%;
+      background: var(--cg-color-action-primary-background-default);
+      cursor: pointer;
+    }
+
+    input[type="range"]:focus-visible {
+      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-spacing-4);
+      border-radius: var(--cg-spacing-2);
+    }
+
+    .rollout-value {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      min-width: var(--cg-spacing-32);
+      text-align: right;
+    }
+
+    .promote-btn {
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-overlay-accent-strong);
+      color: var(--cg-color-surface-base-text);
+      border-radius: var(--cg-border-radius-50);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      font-family: inherit;
+      flex-shrink: 0;
+    }
+
+    .promote-btn:focus-visible {
+      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    .promote-btn:hover {
+      background: var(--cg-overlay-accent-subtle);
+    }
+    .promote-btn:active {
+      transform: scale(var(--cg-interaction-press-scale));
     }
 
     /* ── Rounded variants ── */
     :host([rounded="none"]) { border-radius: 0; }
-    :host([rounded="sm"])   { border-radius: var(--cg-border-radius-50); }
-    :host([rounded="md"])   { border-radius: var(--cg-border-radius-100); }
-    :host([rounded="lg"])   { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="sm"]) { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) { border-radius: var(--cg-border-radius-150); }
     :host([rounded="full"]) { border-radius: var(--cg-border-radius-full); }
   `];
 n([
-  u({ reflect: !0 })
-], l.prototype, "rounded", 2);
+  g({ reflect: !0 })
+], t.prototype, "rounded", 2);
 n([
-  u({ type: Array })
-], l.prototype, "versions", 2);
+  g({ type: Array })
+], t.prototype, "versions", 2);
 n([
-  u({ type: String })
-], l.prototype, "selected", 2);
-l = n([
+  g({ type: String })
+], t.prototype, "selected", 2);
+t = n([
   v("ai-version-selector")
-], l);
+], t);
 export {
-  l as AiVersionSelector
+  t as AiVersionSelector
 };
 //# sourceMappingURL=ai-version-selector.js.map

package/dist/components/ai-version-selector/ai-version-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-version-selector.js","sources":["../../../src/components/ai-version-selector/ai-version-selector.ts"],"sourcesContent":["/**\n * @element ai-version-selector\n * Model-version picker — radio-group selection, outlined status pills with\n * leading dot (active / canary / deprecated), dogfooded <cg-slider> rollout\n * percentage, dogfooded <cg-button> Promote action, optional per-version\n * latency / cost / quality meta. Modeled on LaunchDarkly AI configs +\n * Vercel Rolling Releases.\n *\n * @example\n * ```html\n * <ai-version-selector selected=\"v3\" .versions=${[\n *   { id: 'v3', label: 'v3.0-canary', status: 'canary', rolloutPercent: 10, date: 'Mar 28', latency: 280 },\n *   { id: 'v2', label: 'v2.1-stable', status: 'active', rolloutPercent: 90, date: 'Mar 15', latency: 240 },\n * ]}></ai-version-selector>\n * ```\n *\n * @prop {VersionEntry[]} versions - Array of versions\n * @prop {string} selected - Currently selected version ID\n *\n * @fires {CustomEvent<{id, label}>} ai-version-select - Selection changed\n * @fires {CustomEvent<{id, rolloutPercent}>} ai-version-rollout-change - Slider or Promote\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-slider/cg-slider.js';\nimport '../cg-button/cg-button.js';\nimport '../cg-radio/cg-radio.js';\n\nexport interface VersionEntry {\n  id: string;\n  label: string;\n  status: 'active' | 'canary' | 'deprecated';\n  rolloutPercent?: number;\n  date: string;\n  /** Optional per-version metrics (LaunchDarkly AI configs pattern). */\n  latency?: number;        // ms\n  cost?: string;           // formatted dollar value, e.g. \"$0.04 / 1k tokens\"\n  quality?: number;        // 0-100 score\n}\n\n@customElement('ai-version-selector')\nexport class AiVersionSelector extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      display: block;\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      box-shadow: var(--cg-elevation-1);\n      padding: var(--cg-spacing-20);\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin: 0 0 var(--cg-spacing-16) 0;\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .version-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* ── Version row card ──\n       Border: subtle resting, slightly stronger on hover, one more\n       tonal step on selected. NO brand-accent border on selected (was\n       too loud) — selection is signaled by the cg-radio dot. NO press-\n       scale on the row — selecting a version isn't a \"tap\" interaction. */\n    .version-item {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-cards-emphasis);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      cursor: pointer;\n      width: 100%;\n      text-align: left;\n      font: inherit;\n      color: inherit;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .version-item:hover { border-color: var(--cg-color-surface-cards-border-strong); }\n    .version-item:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .version-item[aria-checked=\"true\"] {\n      border-color: var(--cg-color-surface-cards-border-strong);\n    }\n\n    .version-top {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      flex-wrap: wrap;\n    }\n\n    /* The cg-radio inside the row is a display-only indicator; the\n       wrapping button captures all interaction. pointer-events: none\n       lets clicks fall through to the button. */\n    .version-item cg-radio {\n      pointer-events: none;\n      flex-shrink: 0;\n    }\n\n    .version-label {\n      flex: 1;\n      min-width: 0;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .version-date {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Status pill — outlined with leading colored dot ── */\n    .status-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      flex-shrink: 0;\n      border: var(--cg-border-width-50) solid currentColor;\n      background: transparent;\n    }\n    .status-pill .pill-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: currentColor;\n      flex-shrink: 0;\n    }\n    .status-pill.active     { color: var(--cg-color-status-success-text-default); }\n    .status-pill.canary     { color: var(--cg-color-status-warning-text-default); }\n    .status-pill.deprecated { color: var(--cg-color-status-error-text-default); }\n    /* Pulse the active dot — alive signal. */\n    .status-pill.active .pill-dot {\n      animation: cg-version-pulse 2s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n    @keyframes cg-version-pulse {\n      0%, 100% { opacity: 1; }\n      50%      { opacity: 0.5; }\n    }\n\n    /* ── Deprecation warning ── */\n    .deprecation-warning {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-error-text-default);\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .deprecation-warning svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      flex-shrink: 0;\n    }\n\n    /* ── Per-version meta row (latency / cost / quality) ── */\n    .meta-row {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-variant-numeric: tabular-nums;\n    }\n    .meta-item { display: inline-flex; gap: var(--cg-spacing-4); }\n    .meta-label { color: var(--cg-color-input-text-placeholder); }\n    .meta-value { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-medium); }\n\n    /* ── Rollout section ──\n       Slider gets a full-width row of its own; the Promote action sits on\n       a dedicated row below, right-aligned, as a tertiary (text-style)\n       button so it reads as a quick-shortcut, not a primary CTA competing\n       with the slider's value display. */\n    .rollout-section {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n    }\n    .rollout-section cg-slider { width: 100%; }\n    .rollout-actions {\n      display: flex;\n      justify-content: flex-end;\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) { border-radius: 0; }\n    :host([rounded=\"sm\"])   { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"])   { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"])   { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) versions: VersionEntry[] = [];\n  @property({ type: String }) selected = '';\n\n  // ─── Handlers ───────────────────────────────────────────────────────────\n\n  private _onSelect(v: VersionEntry): void {\n    this.dispatchEvent(new CustomEvent('ai-version-select', {\n      bubbles: true, composed: true,\n      detail: { id: v.id, label: v.label },\n    }));\n  }\n\n  private _onRolloutChange(v: VersionEntry, e: Event): void {\n    // cg-slider fires CustomEvent<{value: number}>.\n    const detail = (e as CustomEvent<{ value: number }>).detail;\n    const value = detail?.value ?? 0;\n    this.dispatchEvent(new CustomEvent('ai-version-rollout-change', {\n      bubbles: true, composed: true,\n      detail: { id: v.id, rolloutPercent: value },\n    }));\n  }\n\n  private _onPromote(v: VersionEntry, e: Event): void {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-version-rollout-change', {\n      bubbles: true, composed: true,\n      detail: { id: v.id, rolloutPercent: 100 },\n    }));\n  }\n\n  override render() {\n    return html`\n      <h3 class=\"title\">Model versions</h3>\n      <div class=\"version-list\" role=\"radiogroup\" aria-label=\"Select model version\">\n        ${this.versions.map(v => {\n          const isSelected = v.id === this.selected;\n          const showRollout = v.rolloutPercent != null && v.status !== 'deprecated';\n          const hasMeta = v.latency != null || v.cost != null || v.quality != null;\n\n          return html`\n            <button\n              class=\"version-item\"\n              type=\"button\"\n              role=\"radio\"\n              aria-checked=${isSelected ? 'true' : 'false'}\n              aria-label=\"${v.label}, ${v.status}\"\n              @click=${() => this._onSelect(v)}\n            >\n              <div class=\"version-top\">\n                <cg-radio\n                  variant=\"tick\"\n                  .checked=${isSelected}\n                  aria-hidden=\"true\"\n                  tabindex=\"-1\"\n                ></cg-radio>\n                <span class=\"version-label\">${v.label}</span>\n                <span class=\"status-pill ${v.status}\">\n                  <span class=\"pill-dot\" aria-hidden=\"true\"></span>\n                  ${v.status}\n                </span>\n                <span class=\"version-date\">${v.date}</span>\n              </div>\n\n              ${hasMeta ? html`\n                <div class=\"meta-row\">\n                  ${v.latency != null ? html`\n                    <span class=\"meta-item\">\n                      <span class=\"meta-label\">Latency</span>\n                      <span class=\"meta-value\">${v.latency} ms</span>\n                    </span>\n                  ` : nothing}\n                  ${v.cost ? html`\n                    <span class=\"meta-item\">\n                      <span class=\"meta-label\">Cost</span>\n                      <span class=\"meta-value\">${v.cost}</span>\n                    </span>\n                  ` : nothing}\n                  ${v.quality != null ? html`\n                    <span class=\"meta-item\">\n                      <span class=\"meta-label\">Quality</span>\n                      <span class=\"meta-value\">${v.quality}%</span>\n                    </span>\n                  ` : nothing}\n                </div>\n              ` : nothing}\n\n              ${v.status === 'deprecated' ? html`\n                <div class=\"deprecation-warning\" role=\"alert\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n                    <line x1=\"12\" y1=\"9\"  x2=\"12\" y2=\"13\"/>\n                    <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n                  </svg>\n                  <span>This version is deprecated. Migrate before the sunset date.</span>\n                </div>\n              ` : nothing}\n\n              ${showRollout ? html`\n                <div class=\"rollout-section\" @click=${(e: Event) => e.stopPropagation()}>\n                  <cg-slider\n                    label=\"Rollout\"\n                    .value=${v.rolloutPercent ?? 0}\n                    min=\"0\"\n                    max=\"100\"\n                    unit=\"%\"\n                    showValue\n                    showTooltip\n                    aria-label=\"Rollout percentage for ${v.label}\"\n                    @cg-change=${(e: Event) => this._onRolloutChange(v, e)}\n                  ></cg-slider>\n                  ${(v.rolloutPercent ?? 0) < 100 ? html`\n                    <div class=\"rollout-actions\">\n                      <cg-button\n                        variant=\"secondary\"\n                        size=\"sm\"\n                        @click=${(e: Event) => this._onPromote(v, e)}\n                        aria-label=\"Promote ${v.label} to 100%\"\n                      >Promote to 100%</cg-button>\n                    </div>\n                  ` : nothing}\n                </div>\n              ` : nothing}\n            </button>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-version-selector': AiVersionSelector;\n  }\n}\n"],"names":["AiVersionSelector","LitElement","v","e","value","html","isSelected","showRollout","hasMeta","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-version-selector.js","sources":["../../../src/components/ai-version-selector/ai-version-selector.ts"],"sourcesContent":["/**\n * @element ai-version-selector\n * Radio-group version picker for AI models with status badges\n * (active/canary/deprecated), rollout percentage sliders,\n * \"Promote to 100%\" buttons, and deprecation warnings.\n *\n * @example\n * ```html\n * <ai-version-selector selected=\"v2\" .versions=${[\n *   { id: 'v2', label: 'v2.1-stable', status: 'active', rolloutPercent: 100, date: 'Mar 15' },\n *   { id: 'v3', label: 'v3.0-canary', status: 'canary', rolloutPercent: 10, date: 'Mar 28' }\n * ]}></ai-version-selector>\n * ```\n *\n * @prop {VersionEntry[]} versions - Array of version entries\n * @prop {string} selected - Currently selected version ID\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-version-select - When a version is selected\n * @fires {CustomEvent<{id: string, rolloutPercent: number}>} ai-version-rollout-change - When rollout slider or promote button changes\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface VersionEntry {\n  id: string;\n  label: string;\n  status: 'active' | 'canary' | 'deprecated';\n  rolloutPercent?: number;\n  date: string;\n}\n\n@customElement('ai-version-selector')\nexport class AiVersionSelector extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      background: var(--cg-color-surface-base-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-16);\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([hidden]) { display: none; }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin: 0 0 var(--cg-spacing-12) 0;\n    }\n\n    .version-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    .version-item {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12);\n      background: var(--cg-color-surface-cards-background);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-100) solid transparent;\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .version-item:hover {\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    .version-item[aria-selected=\"true\"] {\n      border-color: var(--cg-color-surface-base-text);\n    }\n\n    .version-item:focus-visible {\n      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .version-top {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n\n    .radio-dot {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border-radius: 50%;\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .version-item[aria-selected=\"true\"] .radio-dot {\n      border-color: var(--cg-color-surface-base-text);\n    }\n\n    .radio-inner {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: 50%;\n      background: var(--cg-color-action-primary-background-default);\n      display: none;\n    }\n\n    .version-item[aria-selected=\"true\"] .radio-inner {\n      display: block;\n    }\n\n    .version-label {\n      flex: 1;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    .version-date {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .status-badge {\n      display: inline-flex;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      flex-shrink: 0;\n    }\n\n    .status-active {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    .status-canary {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n    }\n\n    .status-deprecated {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .deprecation-warning {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-error-text-default);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      background: var(--cg-color-status-error-background-default);\n      border-radius: var(--cg-border-radius-50);\n    }\n\n    .rollout-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n\n    .rollout-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      min-width: var(--cg-spacing-56);\n    }\n\n    input[type=\"range\"] {\n      flex: 1;\n      -webkit-appearance: none;\n      appearance: none;\n      height: var(--cg-spacing-4);\n      background: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-spacing-2);\n      outline: none;\n    }\n\n    input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      border-radius: 50%;\n      background: var(--cg-color-action-primary-background-default);\n      cursor: pointer;\n    }\n\n    input[type=\"range\"]:focus-visible {\n      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-spacing-4);\n      border-radius: var(--cg-spacing-2);\n    }\n\n    .rollout-value {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      min-width: var(--cg-spacing-32);\n      text-align: right;\n    }\n\n    .promote-btn {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-overlay-accent-strong);\n      color: var(--cg-color-surface-base-text);\n      border-radius: var(--cg-border-radius-50);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      font-family: inherit;\n      flex-shrink: 0;\n    }\n\n    .promote-btn:focus-visible {\n      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .promote-btn:hover {\n      background: var(--cg-overlay-accent-subtle);\n    }\n    .promote-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) { border-radius: 0; }\n    :host([rounded=\"sm\"]) { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) versions: VersionEntry[] = [];\n  @property({ type: String }) selected = '';\n\n  private _onSelect(v: VersionEntry): void {\n    this.dispatchEvent(new CustomEvent('ai-version-select', {\n      bubbles: true, composed: true,\n      detail: { id: v.id, label: v.label },\n    }));\n  }\n\n  private _onRolloutChange(v: VersionEntry, e: Event): void {\n    const value = Number((e.target as HTMLInputElement).value);\n    this.dispatchEvent(new CustomEvent('ai-version-rollout-change', {\n      bubbles: true, composed: true,\n      detail: { id: v.id, rolloutPercent: value },\n    }));\n  }\n\n  private _onPromote(v: VersionEntry, e: Event): void {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-version-rollout-change', {\n      bubbles: true, composed: true,\n      detail: { id: v.id, rolloutPercent: 100 },\n    }));\n  }\n\n  override render() {\n    return html`\n      <h3 class=\"title\">Model Versions</h3>\n      <div class=\"version-list\" role=\"radiogroup\" aria-label=\"Select model version\">\n        ${this.versions.map(v => {\n          const isSelected = v.id === this.selected;\n          return html`\n            <div class=\"version-item\" role=\"radio\"\n                 aria-selected=${isSelected ? 'true' : 'false'}\n                 aria-label=\"${v.label} ${v.status}\"\n                 tabindex=\"0\"\n                 @click=${() => this._onSelect(v)}\n                 @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._onSelect(v); } }}>\n              <div class=\"version-top\">\n                <span class=\"radio-dot\"><span class=\"radio-inner\"></span></span>\n                <span class=\"version-label\">${v.label}</span>\n                <span class=\"status-badge status-${v.status}\">${v.status}</span>\n                <span class=\"version-date\">${v.date}</span>\n              </div>\n              ${v.status === 'deprecated' ? html`\n                <div class=\"deprecation-warning\" role=\"alert\">\n                  &#x26A0; This version is deprecated. Consider migrating.\n                </div>\n              ` : nothing}\n              ${v.rolloutPercent != null && v.status !== 'deprecated' ? html`\n                <div class=\"rollout-row\">\n                  <span class=\"rollout-label\">Rollout</span>\n                  <input type=\"range\" min=\"0\" max=\"100\" .value=${String(v.rolloutPercent)}\n                         @input=${(e: Event) => this._onRolloutChange(v, e)}\n                         @click=${(e: Event) => e.stopPropagation()}\n                         aria-label=\"Rollout percentage for ${v.label}\" />\n                  <span class=\"rollout-value\">${v.rolloutPercent}%</span>\n                  ${v.rolloutPercent < 100 ? html`\n                    <button class=\"promote-btn\" @click=${(e: Event) => this._onPromote(v, e)}\n                            tabindex=\"0\" aria-label=\"Promote ${v.label} to 100%\">\n                      Promote to 100%\n                    </button>\n                  ` : nothing}\n                </div>\n              ` : nothing}\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-version-selector': AiVersionSelector;\n  }\n}\n"],"names":["AiVersionSelector","LitElement","v","e","value","html","isSelected","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}