@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-feature-flag/ai-feature-flag.js

@@ -1,29 +1,20 @@
-import { css as b, LitElement as m, nothing as d, html as o } from "lit";
-import { property as u, state as w, customElement as y } from "lit/decorators.js";
-import { h as x, r as $, f as k } from "../../chunks/premium.css-9I4kHrsl.js";
-import "../cg-switch/cg-switch.js";
-import "../ai-search/ai-search.js";
-var _ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, p = (e, r, a, t) => {
-  for (var i = t > 1 ? void 0 : t ? z(r, a) : r, s = e.length - 1, l; s >= 0; s--)
-    (l = e[s]) && (i = (t ? l(r, a, i) : l(i)) || i);
-  return t && i && _(r, a, i), i;
+import { css as u, LitElement as v, nothing as g, html as t } from "lit";
+import { property as d, state as p, customElement as f } from "lit/decorators.js";
+import { h as b, r as h, f as m } from "../../chunks/premium.css-DHekUEUt.js";
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (e, r, c, s) => {
+  for (var a = s > 1 ? void 0 : s ? w(r, c) : r, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (a = (s ? l(r, c, a) : l(a)) || a);
+  return s && a && x(r, c, a), a;
 };
-const T = {
-  release: "Release",
-  experiment: "Experiment",
-  "kill-switch": "Kill switch",
-  operational: "Operational"
-};
-let g = class extends m {
+let o = class extends v {
   constructor() {
     super(...arguments), this.rounded = "lg", this.flags = [], this.environment = "production", this._search = "";
   }
-  // ─── Derivations ────────────────────────────────────────────────────────
   get _filtered() {
-    const e = this._search.toLowerCase().trim();
-    return e ? this.flags.filter(
-      (r) => r.name.toLowerCase().includes(e) || (r.description || "").toLowerCase().includes(e) || (r.id || "").toLowerCase().includes(e)
-    ) : this.flags;
+    const e = this._search.toLowerCase();
+    return this.flags.filter(
+      (r) => r.name.toLowerCase().includes(e) || r.description.toLowerCase().includes(e)
+    );
   }
   get _enabled() {
     return this._filtered.filter((e) => e.enabled);
@@ -31,427 +22,295 @@ let g = class extends m {
   get _disabled() {
     return this._filtered.filter((e) => !e.enabled);
   }
-  _rolloutClass(e) {
-    return e == null ? "" : e === 0 ? "zero" : e < 100 ? "partial" : "";
-  }
-  _relativeTime(e) {
-    if (!e) return "";
-    const r = new Date(e);
-    if (isNaN(r.getTime())) return "";
-    const a = r.getTime() - Date.now(), t = Math.abs(a), i = 6e4, s = 60 * i, l = 24 * s, h = 7 * l, f = 30 * l, v = 365 * l;
-    let n, c;
-    t < s ? (n = Math.round(a / i), c = "minute") : t < l ? (n = Math.round(a / s), c = "hour") : t < h ? (n = Math.round(a / l), c = "day") : t < f ? (n = Math.round(a / h), c = "week") : t < v ? (n = Math.round(a / f), c = "month") : (n = Math.round(a / v), c = "year");
-    try {
-      return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(n, c);
-    } catch {
-      return "";
-    }
-  }
-  // ─── Handlers ───────────────────────────────────────────────────────────
   _onSearch(e) {
-    const r = e.detail;
-    this._search = r?.query ?? "";
+    this._search = e.target.value;
   }
   _onToggle(e, r) {
-    r.stopPropagation();
-    const a = r.detail;
-    this.dispatchEvent(new CustomEvent("ai-flag-toggle", {
+    r.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-flag-toggle", {
       bubbles: !0,
       composed: !0,
-      detail: { id: e.id, name: e.name, enabled: a?.checked ?? !e.enabled }
+      detail: { id: e.id, name: e.name, enabled: !e.enabled }
     }));
   }
   _onClick(e) {
-    e.disabled || this.dispatchEvent(new CustomEvent("ai-flag-click", {
+    this.dispatchEvent(new CustomEvent("ai-flag-click", {
       bubbles: !0,
       composed: !0,
       detail: { id: e.id, name: e.name }
     }));
   }
-  // ─── Renderers ──────────────────────────────────────────────────────────
   _renderFlag(e) {
-    const r = this._rolloutClass(e.rollout), a = this._relativeTime(e.lastModified), t = e.rollout != null ? Math.min(100, Math.max(0, e.rollout)) : null;
-    return o`
-      <button
-        class="flag-item ${e.disabled ? "disabled" : ""}"
-        type="button"
-        ?disabled=${e.disabled}
-        @click=${() => this._onClick(e)}
-      >
-        <!-- Row 1: name + type badge (left) | quiet meta (right) -->
-        <div class="flag-title-row">
-          <div class="flag-title-left">
-            <span class="flag-name">${e.name}</span>
-            ${e.type ? o`
-              <span class="type-badge type-${e.type}">${T[e.type]}</span>
-            ` : d}
-          </div>
-          <div class="flag-title-right">
-            ${a ? o`<span class="flag-updated">${a}</span>` : d}
-            ${e.environment ? o`<span class="flag-env">${e.environment}</span>` : d}
-          </div>
-        </div>
-
-        <!-- Row 2: description -->
-        ${e.description ? o`
+    return t`
+      <div class="flag-item" role="listitem" tabindex="0"
+           @click=${() => this._onClick(e)}
+           @keydown=${(r) => {
+      r.key === "Enter" && this._onClick(e);
+    }}>
+        <div class="flag-info">
+          <div class="flag-name">${e.name}</div>
           <div class="flag-desc">${e.description}</div>
-        ` : d}
-
-        <!-- Row 3: full-width rollout bar with label above -->
-        ${t != null ? o`
-          <div class="flag-bar-row">
-            <div class="flag-bar-label">
-              <span>Rollout</span>
-              <span>${t}%</span>
-            </div>
-            <span class="rollout-track" role="progressbar" aria-valuenow=${t} aria-valuemin="0" aria-valuemax="100" aria-label="Rollout for ${e.name}">
-              <span class="rollout-fill ${r}" style="width: ${t}%"></span>
-            </span>
-          </div>
-        ` : d}
-
-        <!-- Toggle: pinned right, vertically centered across rows 1+2 -->
-        <span class="flag-toggle-slot">
-          <cg-switch
-            .checked=${e.enabled}
-            ?disabled=${e.disabled}
-            ?loading=${e.loading ?? !1}
-            aria-label="Toggle ${e.name}"
-            @click=${(i) => i.stopPropagation()}
-            @cg-change=${(i) => this._onToggle(e, i)}
-          ></cg-switch>
-        </span>
-      </button>
+        </div>
+        ${e.environment ? t`<span class="flag-env">${e.environment}</span>` : g}
+        <label class="toggle-switch" @click=${(r) => r.stopPropagation()}>
+          <input type="checkbox" .checked=${e.enabled}
+                 @change=${(r) => this._onToggle(e, r)}
+                 aria-label="Toggle ${e.name}" />
+          <span class="toggle-track"></span>
+        </label>
+      </div>
     `;
   }
   render() {
-    const e = this._filtered, r = this._enabled, a = this._disabled;
-    return o`
+    return t`
       <div class="header">
         <h3>Feature Flags</h3>
         <span class="env-badge">${this.environment}</span>
       </div>
-
       <div class="search-bar">
-        <ai-search
-          placeholder="Search flags by name, ID, or description…"
-          .value=${this._search}
-          @ai-search-query=${this._onSearch}
-        ></ai-search>
+        <input class="search-input" type="text"
+               placeholder="Search flags..."
+               .value=${this._search}
+               @input=${this._onSearch}
+               aria-label="Search feature flags"
+               tabindex="0" />
       </div>
-
-      ${e.length === 0 ? o`
-        <div class="empty" role="status">
-          ${this._search ? `No flags match "${this._search}"` : "No feature flags configured."}
-        </div>
-      ` : o`
-        ${r.length ? o`
-          <div class="group-label">Enabled · ${r.length}</div>
+      ${this._filtered.length === 0 ? t`
+        <div class="empty" role="status">No flags found.</div>
+      ` : t`
+        ${this._enabled.length ? t`
+          <div class="group-label">Enabled (${this._enabled.length})</div>
           <div class="flag-list" role="list" aria-label="Enabled flags">
-            ${r.map((t) => this._renderFlag(t))}
+            ${this._enabled.map((e) => this._renderFlag(e))}
           </div>
-        ` : d}
-
-        ${a.length ? o`
-          <div class="group-label">Disabled · ${a.length}</div>
+        ` : g}
+        ${this._disabled.length ? t`
+          <div class="group-label">Disabled (${this._disabled.length})</div>
           <div class="flag-list" role="list" aria-label="Disabled flags">
-            ${a.map((t) => this._renderFlag(t))}
+            ${this._disabled.map((e) => this._renderFlag(e))}
           </div>
-        ` : d}
-
-        <div class="count">${e.length} of ${this.flags.length} flag${this.flags.length === 1 ? "" : "s"}</div>
+        ` : g}
+        <div class="count">${this._filtered.length} of ${this.flags.length} flags</div>
       `}
     `;
   }
 };
-g.styles = [x, $, k, b`
+o.styles = [b, h, m, 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-24);
-      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+      padding: var(--cg-spacing-16);
+      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;
     }
     :host([hidden]) { display: none; }
 
-    /* ── Header ── */
     .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      gap: var(--cg-spacing-12);
-      padding-bottom: var(--cg-spacing-16);
-      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
-      margin-bottom: var(--cg-spacing-16);
+      padding-bottom: var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      margin-bottom: var(--cg-spacing-12);
     }
 
     h3 {
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-semibold);
       margin: 0;
-      color: var(--cg-color-surface-base-text);
     }
 
     .env-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);
-      background: var(--cg-color-surface-cards-emphasis);
+      letter-spacing: 0.05em;
+      background: var(--cg-overlay-accent-subtle);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .search-bar {
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    .search-input {
+      width: 100%;
+      background: var(--cg-color-input-background-default);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
       color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-sm);
+      font-family: inherit;
+      box-sizing: border-box;
     }
-    .env-badge::before {
-      content: '';
-      width: var(--cg-spacing-6);
-      height: var(--cg-spacing-6);
-      border-radius: var(--cg-border-radius-full);
-      background: var(--cg-color-status-info-text-default);
+
+    .search-input::placeholder {
+      color: var(--cg-color-input-text-placeholder);
     }
 
-    /* ── Search ── */
-    .search-bar { margin-bottom: var(--cg-spacing-12); }
-    .search-bar ai-search { width: 100%; display: block; }
+    .search-input:focus-visible {
+      outline: 2px solid var(--cg-color-focus-ring);
+      outline-offset: -2px;
+    }
 
-    /* ── Group label ── */
     .group-label {
-      font-size: 10px;
-      font-weight: var(--cg-font-weight-bold);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
       color: var(--cg-color-input-text-placeholder);
       text-transform: uppercase;
-      letter-spacing: var(--cg-letter-spacing-wide);
-      margin: var(--cg-spacing-16) 0 var(--cg-spacing-8);
+      letter-spacing: 0.05em;
+      margin: var(--cg-spacing-12) 0 var(--cg-spacing-6) 0;
     }
-    .group-label:first-of-type { margin-top: 0; }
 
     .flag-list {
       display: flex;
       flex-direction: column;
-      gap: var(--cg-spacing-6);
+      gap: var(--cg-spacing-4);
     }
 
-    /* ── Flag card — 4-row grid:
-         row 1: title cluster (left) | meta-right (Updated · env) | toggle
-         row 2: description (full width left of the toggle)         | toggle
-         row 3: full-width rollout bar (spans both columns)
-       Toggle stays vertically centered across rows 1+2; the rollout bar
-       gets the full card width so it reads at a glance instead of being
-       a tiny inline strip. */
     .flag-item {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      grid-template-areas:
-        'title  toggle'
-        'desc   toggle'
-        'bar    bar';
-      column-gap: var(--cg-spacing-16);
-      row-gap: var(--cg-spacing-8);
-      padding: var(--cg-spacing-12) var(--cg-spacing-16);
-      background: var(--cg-color-surface-cards-emphasis);
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      background: var(--cg-color-surface-inset-background);
       border-radius: var(--cg-border-radius-100);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      font-family: inherit;
-      font: inherit;
-      width: 100%;
-      text-align: left;
-      color: inherit;
-      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      cursor: pointer;
     }
-    /* Cards are clickable for inspection but do NOT press-scale — a row
-       isn't a button. Hover bumps the border for affordance instead. */
-    .flag-item:hover { border-color: var(--cg-color-surface-cards-border-strong); }
-    .flag-item:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+
+    .flag-item:hover {
+      border-color: var(--cg-color-surface-cards-hover-border);
     }
-    .flag-item.disabled {
-      opacity: 0.6;
-      cursor: default;
+    .flag-item:active {
+      transform: scale(var(--cg-interaction-press-scale));
     }
-    .flag-item:not(.disabled) { cursor: pointer; }
 
-    /* Right-aligned toggle slot — spans all three rows, vertically centered. */
-    .flag-toggle-slot {
-      grid-area: toggle;
-      align-self: center;
-      display: flex;
-      align-items: center;
+    .flag-item:focus-visible {
+      outline: 2px solid var(--cg-color-focus-ring);
+      outline-offset: var(--cg-outline-offset-default);
     }
 
-    /* Title row split: name + type on the left, quiet meta on the right.
-       The right-side meta (Updated, env) keeps the title row tidy and
-       gives the bottom row over to the full-width progress bar. */
-    .flag-title-row {
-      grid-area: title;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--cg-spacing-12);
+    .flag-info {
+      flex: 1;
       min-width: 0;
     }
-    .flag-title-left {
-      display: flex;
-      align-items: center;
-      gap: var(--cg-spacing-8);
-      flex-wrap: wrap;
-      min-width: 0;
+
+    .flag-name {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      margin-bottom: var(--cg-spacing-2);
     }
-    .flag-title-right {
-      display: flex;
-      align-items: center;
-      gap: var(--cg-spacing-8);
+
+    .flag-desc {
       font-size: var(--cg-font-size-xs);
       color: var(--cg-color-input-text-placeholder);
-      flex-shrink: 0;
-      font-variant-numeric: tabular-nums;
-    }
-    .flag-name {
-      font-size: var(--cg-font-size-sm);
-      font-weight: var(--cg-font-weight-semibold);
-      color: var(--cg-color-surface-base-text);
-      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    /* ── Type badge per flag (release / experiment / kill-switch / operational) ── */
-    .type-badge {
-      display: inline-flex;
-      align-items: center;
-      padding: 0 var(--cg-spacing-6);
-      height: var(--cg-spacing-16);
+    .flag-env {
+      padding: var(--cg-spacing-2) var(--cg-spacing-6);
       border-radius: var(--cg-border-radius-50);
-      font-size: 10px;
-      font-weight: var(--cg-font-weight-bold);
-      text-transform: uppercase;
-      letter-spacing: var(--cg-letter-spacing-wide);
-      border: var(--cg-border-width-50) solid currentColor;
-      background: transparent;
-      flex-shrink: 0;
-    }
-    .type-release      { color: var(--cg-color-status-info-text-default); }
-    .type-experiment   { color: var(--cg-color-accent-text); }
-    .type-kill-switch  { color: var(--cg-color-status-error-text-default); }
-    .type-operational  { color: var(--cg-color-status-warning-text-default); }
-
-    /* Description — second row, full width on the left side. */
-    .flag-desc {
-      grid-area: desc;
       font-size: var(--cg-font-size-xs);
+      background: var(--cg-overlay-dark-subtle);
       color: var(--cg-color-input-text-placeholder);
-      line-height: var(--cg-line-height-normal);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
+      flex-shrink: 0;
     }
 
-    /* Bottom row — full-width rollout bar with the % label inline above. */
-    .flag-bar-row {
-      grid-area: bar;
-      display: flex;
-      flex-direction: column;
-      gap: var(--cg-spacing-4);
-      width: 100%;
+    .toggle-switch {
+      position: relative;
+      display: inline-block;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-20);
+      flex-shrink: 0;
     }
-    .flag-bar-label {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 10px;
-      font-weight: var(--cg-font-weight-semibold);
-      color: var(--cg-color-input-text-placeholder);
-      letter-spacing: var(--cg-letter-spacing-wide);
-      text-transform: uppercase;
-      font-variant-numeric: tabular-nums;
+
+    .toggle-switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      position: absolute;
     }
 
-    /* ── Rollout bar — full-width strip across the bottom of the card.
-       Display: block on both track and fill so the percentage width
-       actually renders (inline elements silently ignore width/height). */
-    .rollout-track {
-      display: block;
-      width: 100%;
-      height: var(--cg-spacing-6);
-      background: var(--cg-color-surface-cards-border);
+    .toggle-track {
+      position: absolute;
+      inset: 0;
+      background: var(--cg-color-toggle-background-off);
       border-radius: var(--cg-border-radius-full);
-      overflow: hidden;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      cursor: pointer;
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    .rollout-fill {
-      display: block;
-      height: 100%;
-      background: var(--cg-color-status-success-text-default);
-      border-radius: var(--cg-border-radius-full);
-      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+
+    .toggle-track::after {
+      content: '';
+      position: absolute;
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      border-radius: 50%;
+      background: var(--cg-color-toggle-thumb-off);
+      top: var(--cg-spacing-2);
+      left: var(--cg-spacing-2);
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    .rollout-fill.partial { background: var(--cg-color-status-warning-text-default); }
-    .rollout-fill.zero    { background: var(--cg-color-status-error-text-default); }
 
-    .flag-env {
-      padding: var(--cg-spacing-2) var(--cg-spacing-6);
-      border-radius: var(--cg-border-radius-50);
-      font-size: 10px;
-      font-weight: var(--cg-font-weight-bold);
-      background: var(--cg-overlay-dark-subtle);
-      color: var(--cg-color-input-text-placeholder);
-      flex-shrink: 0;
-      letter-spacing: var(--cg-letter-spacing-wide);
-      text-transform: uppercase;
+    .toggle-switch input:checked + .toggle-track {
+      background: var(--cg-color-toggle-background-on);
+      border-color: var(--cg-color-surface-base-text);
     }
-    .flag-updated {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+    .toggle-switch input:checked + .toggle-track::after {
+      transform: translateX(var(--cg-spacing-16));
+      background: var(--cg-color-toggle-thumb-on);
+    }
+
+    .toggle-switch input:focus-visible + .toggle-track {
+      outline: 2px solid var(--cg-color-focus-ring);
+      outline-offset: var(--cg-outline-offset-default);
     }
 
-    /* ── Footer count ── */
     .count {
       font-size: var(--cg-font-size-xs);
       color: var(--cg-color-input-text-placeholder);
-      margin-top: var(--cg-spacing-16);
+      margin-top: var(--cg-spacing-12);
       text-align: center;
-      font-variant-numeric: tabular-nums;
     }
 
     .empty {
       text-align: center;
-      padding: var(--cg-spacing-32);
+      padding: var(--cg-spacing-24);
       color: var(--cg-color-input-text-placeholder);
       font-size: var(--cg-font-size-sm);
     }
 
     /* ── 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); }
   `];
-p([
-  u({ reflect: !0 })
-], g.prototype, "rounded", 2);
-p([
-  u({ type: Array })
-], g.prototype, "flags", 2);
-p([
-  u({ type: String })
-], g.prototype, "environment", 2);
-p([
-  w()
-], g.prototype, "_search", 2);
-g = p([
-  y("ai-feature-flag")
-], g);
+i([
+  d({ reflect: !0 })
+], o.prototype, "rounded", 2);
+i([
+  d({ type: Array })
+], o.prototype, "flags", 2);
+i([
+  d({ type: String })
+], o.prototype, "environment", 2);
+i([
+  p()
+], o.prototype, "_search", 2);
+o = i([
+  f("ai-feature-flag")
+], o);
 export {
-  g as AiFeatureFlag
+  o as AiFeatureFlag
 };
 //# sourceMappingURL=ai-feature-flag.js.map