@cognivo/components 0.8.0

package/dist/components/cg-color-picker/cg-color-picker.js

@@ -0,0 +1,492 @@
+import { css as w, LitElement as k, nothing as u, html as p } from "lit";
+import { property as h, state as b, customElement as y } from "lit/decorators.js";
+import { h as $, r as P } from "../../chunks/premium.css-9I4kHrsl.js";
+var C = Object.defineProperty, M = Object.getOwnPropertyDescriptor, l = (r, t, a, o) => {
+  for (var e = o > 1 ? void 0 : o ? M(t, a) : t, i = r.length - 1, d; i >= 0; i--)
+    (d = r[i]) && (e = (o ? d(t, a, e) : d(e)) || e);
+  return o && e && C(t, a, e), e;
+};
+const A = [
+  "#ef4444",
+  "#f97316",
+  "#f59e0b",
+  "#84cc16",
+  "#22c55e",
+  "#06b6d4",
+  "#3b82f6",
+  "#8b5cf6",
+  "#d946ef",
+  "#ec4899",
+  "#ffffff",
+  "#18181b"
+];
+function m(r) {
+  const { h: t, s: a, v: o } = r, e = o * a, i = e * (1 - Math.abs(t / 60 % 2 - 1)), d = o - e;
+  let s = 0, n = 0, g = 0;
+  t < 60 ? (s = e, n = i) : t < 120 ? (s = i, n = e) : t < 180 ? (n = e, g = i) : t < 240 ? (n = i, g = e) : t < 300 ? (s = i, g = e) : (s = e, g = i);
+  const f = (x) => Math.round((x + d) * 255).toString(16).padStart(2, "0");
+  return `#${f(s)}${f(n)}${f(g)}`;
+}
+function v(r) {
+  const t = r.replace("#", ""), a = parseInt(t.substring(0, 2), 16) / 255, o = parseInt(t.substring(2, 4), 16) / 255, e = parseInt(t.substring(4, 6), 16) / 255, i = Math.max(a, o, e), d = Math.min(a, o, e), s = i - d;
+  let n = 0;
+  return s !== 0 && (i === a ? n = ((o - e) / s + 6) % 6 * 60 : i === o ? n = ((e - a) / s + 2) * 60 : n = ((a - o) / s + 4) * 60), { h: n, s: i === 0 ? 0 : s / i, v: i, a: 1 };
+}
+function _(r) {
+  const { h: t, s: a, v: o } = r, e = o * a, i = e * (1 - Math.abs(t / 60 % 2 - 1)), d = o - e;
+  let s = 0, n = 0, g = 0;
+  return t < 60 ? (s = e, n = i) : t < 120 ? (s = i, n = e) : t < 180 ? (n = e, g = i) : t < 240 ? (n = i, g = e) : t < 300 ? (s = i, g = e) : (s = e, g = i), { r: Math.round((s + d) * 255), g: Math.round((n + d) * 255), b: Math.round((g + d) * 255) };
+}
+let c = class extends k {
+  constructor() {
+    super(...arguments), this.value = "#3b82f6", this.label = "", this.colors = A, this.showAlpha = !1, this.showRgb = !0, this.showPresets = !0, this.disabled = !1, this._open = !1, this._hsv = { h: 217, s: 0.77, v: 0.96, a: 1 }, this._hexInput = "#3b82f6", this._copied = !1, this._dragging = !1, this._handleClickOutside = (r) => {
+      r.composedPath().includes(this) || this._close();
+    };
+  }
+  willUpdate(r) {
+    if (r.has("value") && !this._dragging && /^#([0-9a-fA-F]{3}){1,2}$/.test(this.value)) {
+      const t = this.value.length === 4 ? "#" + this.value[1] + this.value[1] + this.value[2] + this.value[2] + this.value[3] + this.value[3] : this.value;
+      this._hsv = v(t), this._hexInput = t;
+    }
+  }
+  _toggle() {
+    this.disabled || (this._open = !this._open);
+  }
+  _close() {
+    this._open = !1;
+  }
+  _emit() {
+    const r = m(this._hsv);
+    this.value = r, this._hexInput = r, this.dispatchEvent(new CustomEvent("cg-color-change", { detail: { color: r, hex: r }, bubbles: !0, composed: !0 }));
+  }
+  // ── Color area ──
+  _onAreaPointerDown(r) {
+    this._dragging = !0, r.currentTarget.setPointerCapture(r.pointerId), this._updateArea(r, r.currentTarget);
+  }
+  _onAreaPointerMove(r) {
+    this._dragging && this._updateArea(r, r.currentTarget);
+  }
+  _onPointerUp() {
+    this._dragging = !1;
+  }
+  _updateArea(r, t) {
+    const a = t.getBoundingClientRect();
+    this._hsv = { ...this._hsv, s: Math.max(0, Math.min(1, (r.clientX - a.left) / a.width)), v: Math.max(0, Math.min(1, 1 - (r.clientY - a.top) / a.height)) }, this._emit();
+  }
+  // ── Hue ──
+  _onHuePointerDown(r) {
+    this._dragging = !0, r.currentTarget.setPointerCapture(r.pointerId), this._updateHue(r, r.currentTarget);
+  }
+  _onHuePointerMove(r) {
+    this._dragging && this._updateHue(r, r.currentTarget);
+  }
+  _updateHue(r, t) {
+    const a = t.getBoundingClientRect();
+    this._hsv = { ...this._hsv, h: Math.max(0, Math.min(360, (r.clientX - a.left) / a.width * 360)) }, this._emit();
+  }
+  // ── Alpha ──
+  _onAlphaPointerDown(r) {
+    this._dragging = !0, r.currentTarget.setPointerCapture(r.pointerId), this._updateAlpha(r, r.currentTarget);
+  }
+  _onAlphaPointerMove(r) {
+    this._dragging && this._updateAlpha(r, r.currentTarget);
+  }
+  _updateAlpha(r, t) {
+    const a = t.getBoundingClientRect();
+    this._hsv = { ...this._hsv, a: Math.max(0, Math.min(1, (r.clientX - a.left) / a.width)) }, this._emit();
+  }
+  // ── Inputs ──
+  _onHexInput(r) {
+    let t = r.target.value.trim();
+    if (this._hexInput = t, t.startsWith("#") || (t = "#" + t), /^#([0-9a-fA-F]{3}){1,2}$/.test(t)) {
+      const a = t.length === 4 ? "#" + t[1] + t[1] + t[2] + t[2] + t[3] + t[3] : t;
+      this._hsv = v(a), this._emit();
+    }
+  }
+  _onRgbInput(r, t) {
+    const a = Math.max(0, Math.min(255, parseInt(t.target.value) || 0)), o = _(this._hsv);
+    o[r] = a;
+    const e = `#${o.r.toString(16).padStart(2, "0")}${o.g.toString(16).padStart(2, "0")}${o.b.toString(16).padStart(2, "0")}`;
+    this._hsv = v(e), this._emit();
+  }
+  async _copy() {
+    await navigator.clipboard.writeText(this.value), this._copied = !0, setTimeout(() => {
+      this._copied = !1, this.requestUpdate();
+    }, 1500);
+  }
+  _handleKeydown(r) {
+    if (r.key === "Escape") {
+      this._close();
+      return;
+    }
+    (r.key === "Enter" || r.key === " ") && !this._open && (r.preventDefault(), this._toggle());
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.removeEventListener("click", this._handleClickOutside), document.addEventListener("click", this._handleClickOutside);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleClickOutside);
+  }
+  render() {
+    const r = m({ h: this._hsv.h, s: 1, v: 1 }), t = m(this._hsv), a = _(this._hsv);
+    return p`
+      ${this.label ? p`<span class="label">${this.label}</span>` : u}
+
+      <div class="trigger ${this._open ? "open" : ""} ${this.disabled ? "disabled" : ""}"
+        tabindex=${this.disabled ? "-1" : "0"}
+        role="combobox" aria-expanded=${this._open} aria-haspopup="dialog"
+        aria-label=${this.label || "Color picker"}
+        @click=${this._toggle} @keydown=${this._handleKeydown}
+      >
+        <div class="trigger-swatch" style="background:${t}"></div>
+        <span class="trigger-text">${t}</span>
+        <svg class="trigger-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M6 9l6 6 6-6"></path></svg>
+      </div>
+
+      <div class="dropdown ${this._open ? "open" : ""}" role="dialog" aria-label="Color picker">
+        <!-- Spectrum -->
+        <div class="color-area"
+          @pointerdown=${this._onAreaPointerDown}
+          @pointermove=${this._onAreaPointerMove}
+          @pointerup=${this._onPointerUp}
+        >
+          <div class="color-area-bg" style="background:${r}"></div>
+          <div class="color-area-white"></div>
+          <div class="color-area-black"></div>
+          <div class="color-area-thumb" style="left:${this._hsv.s * 100}%;top:${(1 - this._hsv.v) * 100}%;background:${t}"></div>
+        </div>
+
+        <!-- Hue -->
+        <div class="slider-row">
+          <div class="slider-track hue-track"
+            @pointerdown=${this._onHuePointerDown}
+            @pointermove=${this._onHuePointerMove}
+            @pointerup=${this._onPointerUp}
+          ><div class="slider-thumb" style="left:${this._hsv.h / 360 * 100}%;background:${r}"></div></div>
+        </div>
+
+        <!-- Alpha -->
+        ${this.showAlpha ? p`
+          <div class="slider-row">
+            <div class="slider-track alpha-track"
+              @pointerdown=${this._onAlphaPointerDown}
+              @pointermove=${this._onAlphaPointerMove}
+              @pointerup=${this._onPointerUp}
+            ><div class="alpha-gradient" style="background:linear-gradient(to right,transparent,${t})"></div>
+            <div class="slider-thumb" style="left:${this._hsv.a * 100}%;background:${t}"></div></div>
+          </div>
+        ` : u}
+
+        <!-- Hex + copy -->
+        <div class="inputs-row">
+          <div class="preview-dot" style="background:${t}"></div>
+          <input class="hex-input" type="text" .value=${this._hexInput} aria-label="Hex color" @input=${this._onHexInput} />
+          <button class="copy-btn" @click=${this._copy} aria-label="Copy color">
+            ${this._copied ? p`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 6L9 17l-5-5"></path></svg>
+            ` : p`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
+              </svg>
+            `}
+          </button>
+        </div>
+
+        <!-- RGB -->
+        ${this.showRgb ? p`
+          <div class="rgb-row">
+            ${["r", "g", "b"].map((o) => p`
+              <div class="rgb-field">
+                <input class="rgb-input" type="number" min="0" max="255" .value=${String(a[o])} @input=${(e) => this._onRgbInput(o, e)} aria-label=${o.toUpperCase()} />
+                <span class="rgb-label">${o.toUpperCase()}</span>
+              </div>
+            `)}
+          </div>
+        ` : u}
+
+        <!-- Presets -->
+        ${this.showPresets && this.colors.length > 0 ? p`
+          <div class="presets" role="radiogroup" aria-label="Preset colors">
+            ${this.colors.map((o) => p`
+              <button class="preset ${this.value === o ? "active" : ""}" style="background:${o}"
+                role="radio" aria-checked=${this.value === o} aria-label=${o}
+                @click=${() => {
+      this._hsv = v(o), this._emit();
+    }}
+              ></button>
+            `)}
+          </div>
+        ` : u}
+      </div>
+    `;
+  }
+};
+c.styles = [$, P, w`
+    :host { position: relative; display: inline-block; }
+
+    /* ── Label ── */
+    .label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-text);
+      margin-bottom: var(--cg-spacing-4);
+      font-weight: var(--cg-font-weight-medium);
+      display: block;
+    }
+
+    /* ── Trigger ── */
+    .trigger {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: 0 var(--cg-spacing-12);
+      height: var(--cg-component-input-height-md);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      background: var(--cg-color-input-background-default);
+      color: var(--cg-color-input-text-default);
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      cursor: pointer;
+      outline: none;
+      min-width: 180px;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .trigger:hover:not(.disabled) { border-color: var(--cg-color-input-border-hover); }
+    .trigger:focus-visible { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .trigger.open { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .trigger.disabled { opacity: 0.5; pointer-events: none; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }
+
+    .trigger-swatch {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      flex-shrink: 0;
+    }
+    .trigger-text {
+      flex: 1;
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-sm);
+    }
+    .trigger-chevron {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      color: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .trigger.open .trigger-chevron { transform: rotate(180deg); }
+
+    /* ── Dropdown ── */
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: var(--cg-z-index-200);
+      width: 272px;
+      margin-top: var(--cg-spacing-4);
+      padding: var(--cg-spacing-16);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);
+      pointer-events: none;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
+
+    /* ── Color area ── */
+    .color-area {
+      position: relative;
+      width: 100%;
+      height: 150px;
+      border-radius: var(--cg-border-radius-50);
+      cursor: crosshair;
+      overflow: hidden;
+      touch-action: none;
+    }
+    .color-area-bg, .color-area-white, .color-area-black {
+      position: absolute;
+      inset: 0;
+      border-radius: var(--cg-border-radius-50);
+    }
+    .color-area-white { background: linear-gradient(to right, var(--cg-component-color-picker-spectrum-white), transparent); }
+    .color-area-black { background: linear-gradient(to top, var(--cg-component-color-picker-spectrum-black), transparent); }
+    .color-area-thumb {
+      position: absolute;
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border: var(--cg-border-width-100) solid var(--cg-component-color-picker-thumb-border);
+      border-radius: var(--cg-border-radius-full);
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      box-shadow: 0 0 0 1px var(--cg-overlay-dark-medium), inset 0 0 0 1px var(--cg-overlay-dark-light);
+    }
+
+    /* ── Sliders ── */
+    .slider-row { display: flex; align-items: center; margin-top: var(--cg-spacing-12); }
+    .slider-track {
+      flex: 1;
+      height: var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-full);
+      position: relative;
+      cursor: pointer;
+      touch-action: none;
+    }
+    .hue-track {
+      background: linear-gradient(
+        to right,
+        var(--cg-component-color-picker-hue-stop-0),
+        var(--cg-component-color-picker-hue-stop-60),
+        var(--cg-component-color-picker-hue-stop-120),
+        var(--cg-component-color-picker-hue-stop-180),
+        var(--cg-component-color-picker-hue-stop-240),
+        var(--cg-component-color-picker-hue-stop-300),
+        var(--cg-component-color-picker-hue-stop-0)
+      );
+    }
+    .alpha-track {
+      background: repeating-conic-gradient(var(--cg-component-color-picker-checker-color) 0% 25%, transparent 0% 50%) 50% / 8px 8px;
+      overflow: hidden;
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+    }
+    .alpha-gradient { position: absolute; inset: 0; border-radius: var(--cg-border-radius-full); }
+    .slider-thumb {
+      position: absolute;
+      top: 50%;
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border: var(--cg-border-width-100) solid var(--cg-component-color-picker-thumb-border);
+      border-radius: var(--cg-border-radius-full);
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      box-shadow: 0 0 0 1px var(--cg-overlay-dark-medium);
+    }
+
+    /* ── Hex + copy row ── */
+    .inputs-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-12);
+    }
+    .preview-dot {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      flex-shrink: 0;
+    }
+    .hex-input {
+      flex: 1; min-width: 0;
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-input-background-default);
+      color: var(--cg-color-input-text-default);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      outline: none;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .hex-input:focus { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .copy-btn {
+      display: flex; align-items: center; justify-content: center;
+      width: var(--cg-spacing-32); height: var(--cg-spacing-32);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-border-radius-50);
+      background: transparent; color: var(--cg-color-surface-container-text);
+      cursor: pointer; flex-shrink: 0;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .copy-btn:hover { background: var(--cg-color-action-secondary-background-hover); }
+    .copy-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .copy-btn svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }
+
+    /* ── RGB inputs ── */
+    .rgb-row { display: flex; gap: var(--cg-spacing-4); margin-top: var(--cg-spacing-8); }
+    .rgb-field { flex: 1; display: flex; flex-direction: column; gap: var(--cg-spacing-2); }
+    .rgb-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      text-align: center; text-transform: uppercase;
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .rgb-input {
+      width: 100%; text-align: center;
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-input-background-default);
+      color: var(--cg-color-input-text-default);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      padding: var(--cg-spacing-4) var(--cg-spacing-2);
+      outline: none;
+    }
+    .rgb-input:focus { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+
+    /* ── Presets ── */
+    .presets {
+      display: flex; flex-wrap: wrap; gap: var(--cg-spacing-4);
+      margin-top: var(--cg-spacing-12); padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+    }
+    .preset {
+      width: var(--cg-spacing-20); height: var(--cg-spacing-20);
+      border-radius: var(--cg-border-radius-50);
+      border: var(--cg-border-width-50) solid var(--cg-overlay-dark-subtle);
+      cursor: pointer; padding: 0;
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .preset:hover { transform: scale(1.2); }
+    .preset:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .preset.active { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }
+    .preset:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }
+  `];
+l([
+  h()
+], c.prototype, "value", 2);
+l([
+  h()
+], c.prototype, "label", 2);
+l([
+  h({ type: Array })
+], c.prototype, "colors", 2);
+l([
+  h({ type: Boolean })
+], c.prototype, "showAlpha", 2);
+l([
+  h({ type: Boolean })
+], c.prototype, "showRgb", 2);
+l([
+  h({ type: Boolean })
+], c.prototype, "showPresets", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], c.prototype, "disabled", 2);
+l([
+  b()
+], c.prototype, "_open", 2);
+l([
+  b()
+], c.prototype, "_hsv", 2);
+l([
+  b()
+], c.prototype, "_hexInput", 2);
+l([
+  b()
+], c.prototype, "_copied", 2);
+c = l([
+  y("cg-color-picker")
+], c);
+export {
+  c as CgColorPicker
+};
+//# sourceMappingURL=cg-color-picker.js.map

package/dist/components/cg-color-picker/cg-color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-color-picker.js","sources":["../../../src/components/cg-color-picker/cg-color-picker.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nconst PRESET_COLORS = [\n  '#ef4444', '#f97316', '#f59e0b', '#84cc16', '#22c55e', '#06b6d4',\n  '#3b82f6', '#8b5cf6', '#d946ef', '#ec4899', '#ffffff', '#18181b',\n];\n\ninterface HSV { h: number; s: number; v: number; a: number; }\n\nfunction hsvToHex(hsv: HSV): string {\n  const { h, s, v } = hsv;\n  const c = v * s;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = v - c;\n  let r = 0, g = 0, b = 0;\n  if (h < 60) { r = c; g = x; } else if (h < 120) { r = x; g = c; }\n  else if (h < 180) { g = c; b = x; } else if (h < 240) { g = x; b = c; }\n  else if (h < 300) { r = x; b = c; } else { r = c; b = x; }\n  const toHex = (n: number) => Math.round((n + m) * 255).toString(16).padStart(2, '0');\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nfunction hexToHsv(hex: string): HSV {\n  const h = hex.replace('#', '');\n  const r = parseInt(h.substring(0, 2), 16) / 255;\n  const g = parseInt(h.substring(2, 4), 16) / 255;\n  const b = parseInt(h.substring(4, 6), 16) / 255;\n  const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;\n  let hue = 0;\n  if (d !== 0) {\n    if (max === r) hue = ((g - b) / d + 6) % 6 * 60;\n    else if (max === g) hue = ((b - r) / d + 2) * 60;\n    else hue = ((r - g) / d + 4) * 60;\n  }\n  return { h: hue, s: max === 0 ? 0 : d / max, v: max, a: 1 };\n}\n\nfunction hsvToRgb(hsv: HSV): { r: number; g: number; b: number } {\n  const { h, s, v } = hsv;\n  const c = v * s;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = v - c;\n  let r = 0, g = 0, b = 0;\n  if (h < 60) { r = c; g = x; } else if (h < 120) { r = x; g = c; }\n  else if (h < 180) { g = c; b = x; } else if (h < 240) { g = x; b = c; }\n  else if (h < 300) { r = x; b = c; } else { r = c; b = x; }\n  return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255) };\n}\n\n/**\n * @element cg-color-picker\n * Color picker with trigger swatch + dropdown panel containing spectrum area,\n * hue slider, hex/RGB inputs, and preset swatches.\n *\n * @fires {CustomEvent<{color: string, hex: string}>} cg-color-change - When color changes\n */\n@customElement('cg-color-picker')\nexport class CgColorPicker extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; display: inline-block; }\n\n    /* ── Label ── */\n    .label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n      margin-bottom: var(--cg-spacing-4);\n      font-weight: var(--cg-font-weight-medium);\n      display: block;\n    }\n\n    /* ── Trigger ── */\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: 0 var(--cg-spacing-12);\n      height: var(--cg-component-input-height-md);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      outline: none;\n      min-width: 180px;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover:not(.disabled) { border-color: var(--cg-color-input-border-hover); }\n    .trigger:focus-visible { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .trigger.open { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .trigger.disabled { opacity: 0.5; pointer-events: none; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }\n\n    .trigger-swatch {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      flex-shrink: 0;\n    }\n    .trigger-text {\n      flex: 1;\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n    }\n    .trigger-chevron {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .trigger.open .trigger-chevron { transform: rotate(180deg); }\n\n    /* ── Dropdown ── */\n    .dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: var(--cg-z-index-200);\n      width: 272px;\n      margin-top: var(--cg-spacing-4);\n      padding: var(--cg-spacing-16);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98);\n      pointer-events: none;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }\n\n    /* ── Color area ── */\n    .color-area {\n      position: relative;\n      width: 100%;\n      height: 150px;\n      border-radius: var(--cg-border-radius-50);\n      cursor: crosshair;\n      overflow: hidden;\n      touch-action: none;\n    }\n    .color-area-bg, .color-area-white, .color-area-black {\n      position: absolute;\n      inset: 0;\n      border-radius: var(--cg-border-radius-50);\n    }\n    .color-area-white { background: linear-gradient(to right, var(--cg-component-color-picker-spectrum-white), transparent); }\n    .color-area-black { background: linear-gradient(to top, var(--cg-component-color-picker-spectrum-black), transparent); }\n    .color-area-thumb {\n      position: absolute;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid var(--cg-component-color-picker-thumb-border);\n      border-radius: var(--cg-border-radius-full);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n      box-shadow: 0 0 0 1px var(--cg-overlay-dark-medium), inset 0 0 0 1px var(--cg-overlay-dark-light);\n    }\n\n    /* ── Sliders ── */\n    .slider-row { display: flex; align-items: center; margin-top: var(--cg-spacing-12); }\n    .slider-track {\n      flex: 1;\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n      position: relative;\n      cursor: pointer;\n      touch-action: none;\n    }\n    .hue-track {\n      background: linear-gradient(\n        to right,\n        var(--cg-component-color-picker-hue-stop-0),\n        var(--cg-component-color-picker-hue-stop-60),\n        var(--cg-component-color-picker-hue-stop-120),\n        var(--cg-component-color-picker-hue-stop-180),\n        var(--cg-component-color-picker-hue-stop-240),\n        var(--cg-component-color-picker-hue-stop-300),\n        var(--cg-component-color-picker-hue-stop-0)\n      );\n    }\n    .alpha-track {\n      background: repeating-conic-gradient(var(--cg-component-color-picker-checker-color) 0% 25%, transparent 0% 50%) 50% / 8px 8px;\n      overflow: hidden;\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n    }\n    .alpha-gradient { position: absolute; inset: 0; border-radius: var(--cg-border-radius-full); }\n    .slider-thumb {\n      position: absolute;\n      top: 50%;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid var(--cg-component-color-picker-thumb-border);\n      border-radius: var(--cg-border-radius-full);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n      box-shadow: 0 0 0 1px var(--cg-overlay-dark-medium);\n    }\n\n    /* ── Hex + copy row ── */\n    .inputs-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-12);\n    }\n    .preview-dot {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      flex-shrink: 0;\n    }\n    .hex-input {\n      flex: 1; min-width: 0;\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .hex-input:focus { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .copy-btn {\n      display: flex; align-items: center; justify-content: center;\n      width: var(--cg-spacing-32); height: var(--cg-spacing-32);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent; color: var(--cg-color-surface-container-text);\n      cursor: pointer; flex-shrink: 0;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .copy-btn:hover { background: var(--cg-color-action-secondary-background-hover); }\n    .copy-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .copy-btn svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n\n    /* ── RGB inputs ── */\n    .rgb-row { display: flex; gap: var(--cg-spacing-4); margin-top: var(--cg-spacing-8); }\n    .rgb-field { flex: 1; display: flex; flex-direction: column; gap: var(--cg-spacing-2); }\n    .rgb-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      text-align: center; text-transform: uppercase;\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .rgb-input {\n      width: 100%; text-align: center;\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-4) var(--cg-spacing-2);\n      outline: none;\n    }\n    .rgb-input:focus { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n\n    /* ── Presets ── */\n    .presets {\n      display: flex; flex-wrap: wrap; gap: var(--cg-spacing-4);\n      margin-top: var(--cg-spacing-12); padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n    }\n    .preset {\n      width: var(--cg-spacing-20); height: var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-50);\n      border: var(--cg-border-width-50) solid var(--cg-overlay-dark-subtle);\n      cursor: pointer; padding: 0;\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .preset:hover { transform: scale(1.2); }\n    .preset:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .preset.active { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }\n    .preset:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }\n  `];\n\n  @property() value = '#3b82f6';\n  @property() label = '';\n  @property({ type: Array }) colors: string[] = PRESET_COLORS;\n  @property({ type: Boolean }) showAlpha = false;\n  @property({ type: Boolean }) showRgb = true;\n  @property({ type: Boolean }) showPresets = true;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _open = false;\n  @state() private _hsv: HSV = { h: 217, s: 0.77, v: 0.96, a: 1 };\n  @state() private _hexInput = '#3b82f6';\n  @state() private _copied = false;\n  private _dragging = false;\n\n  override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('value') && !this._dragging) {\n      if (/^#([0-9a-fA-F]{3}){1,2}$/.test(this.value)) {\n        const full = this.value.length === 4\n          ? '#' + this.value[1]! + this.value[1]! + this.value[2]! + this.value[2]! + this.value[3]! + this.value[3]!\n          : this.value;\n        this._hsv = hexToHsv(full);\n        this._hexInput = full;\n      }\n    }\n  }\n\n  private _toggle() { if (!this.disabled) this._open = !this._open; }\n  private _close() { this._open = false; }\n\n  private _emit() {\n    const hex = hsvToHex(this._hsv);\n    this.value = hex;\n    this._hexInput = hex;\n    this.dispatchEvent(new CustomEvent('cg-color-change', { detail: { color: hex, hex }, bubbles: true, composed: true }));\n  }\n\n  // ── Color area ──\n  private _onAreaPointerDown(e: PointerEvent) {\n    this._dragging = true;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    this._updateArea(e, e.currentTarget as HTMLElement);\n  }\n  private _onAreaPointerMove(e: PointerEvent) { if (this._dragging) this._updateArea(e, e.currentTarget as HTMLElement); }\n  private _onPointerUp() { this._dragging = false; }\n  private _updateArea(e: PointerEvent, el: HTMLElement) {\n    const r = el.getBoundingClientRect();\n    this._hsv = { ...this._hsv, s: Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)), v: Math.max(0, Math.min(1, 1 - (e.clientY - r.top) / r.height)) };\n    this._emit();\n  }\n\n  // ── Hue ──\n  private _onHuePointerDown(e: PointerEvent) {\n    this._dragging = true;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    this._updateHue(e, e.currentTarget as HTMLElement);\n  }\n  private _onHuePointerMove(e: PointerEvent) { if (this._dragging) this._updateHue(e, e.currentTarget as HTMLElement); }\n  private _updateHue(e: PointerEvent, el: HTMLElement) {\n    const r = el.getBoundingClientRect();\n    this._hsv = { ...this._hsv, h: Math.max(0, Math.min(360, ((e.clientX - r.left) / r.width) * 360)) };\n    this._emit();\n  }\n\n  // ── Alpha ──\n  private _onAlphaPointerDown(e: PointerEvent) {\n    this._dragging = true;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    this._updateAlpha(e, e.currentTarget as HTMLElement);\n  }\n  private _onAlphaPointerMove(e: PointerEvent) { if (this._dragging) this._updateAlpha(e, e.currentTarget as HTMLElement); }\n  private _updateAlpha(e: PointerEvent, el: HTMLElement) {\n    const r = el.getBoundingClientRect();\n    this._hsv = { ...this._hsv, a: Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) };\n    this._emit();\n  }\n\n  // ── Inputs ──\n  private _onHexInput(e: Event) {\n    let val = (e.target as HTMLInputElement).value.trim();\n    this._hexInput = val;\n    if (!val.startsWith('#')) val = '#' + val;\n    if (/^#([0-9a-fA-F]{3}){1,2}$/.test(val)) {\n      const full = val.length === 4 ? '#' + val[1]! + val[1]! + val[2]! + val[2]! + val[3]! + val[3]! : val;\n      this._hsv = hexToHsv(full);\n      this._emit();\n    }\n  }\n  private _onRgbInput(ch: 'r' | 'g' | 'b', e: Event) {\n    const v = Math.max(0, Math.min(255, parseInt((e.target as HTMLInputElement).value) || 0));\n    const rgb = hsvToRgb(this._hsv);\n    rgb[ch] = v;\n    const hex = `#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`;\n    this._hsv = hexToHsv(hex);\n    this._emit();\n  }\n\n  private async _copy() {\n    await navigator.clipboard.writeText(this.value);\n    this._copied = true;\n    setTimeout(() => { this._copied = false; this.requestUpdate(); }, 1500);\n  }\n\n  private _handleClickOutside = (e: Event) => { if (!e.composedPath().includes(this)) this._close(); };\n  private _handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') { this._close(); return; }\n    if ((e.key === 'Enter' || e.key === ' ') && !this._open) { e.preventDefault(); this._toggle(); }\n  }\n\n  override connectedCallback() { super.connectedCallback(); document.removeEventListener('click', this._handleClickOutside); document.addEventListener('click', this._handleClickOutside); }\n  override disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('click', this._handleClickOutside); }\n\n  override render() {\n    const hueColor = hsvToHex({ h: this._hsv.h, s: 1, v: 1, a: 1 });\n    const currentHex = hsvToHex(this._hsv);\n    const rgb = hsvToRgb(this._hsv);\n\n    return html`\n      ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n\n      <div class=\"trigger ${this._open ? 'open' : ''} ${this.disabled ? 'disabled' : ''}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"combobox\" aria-expanded=${this._open} aria-haspopup=\"dialog\"\n        aria-label=${this.label || 'Color picker'}\n        @click=${this._toggle} @keydown=${this._handleKeydown}\n      >\n        <div class=\"trigger-swatch\" style=\"background:${currentHex}\"></div>\n        <span class=\"trigger-text\">${currentHex}</span>\n        <svg class=\"trigger-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M6 9l6 6 6-6\"></path></svg>\n      </div>\n\n      <div class=\"dropdown ${this._open ? 'open' : ''}\" role=\"dialog\" aria-label=\"Color picker\">\n        <!-- Spectrum -->\n        <div class=\"color-area\"\n          @pointerdown=${this._onAreaPointerDown}\n          @pointermove=${this._onAreaPointerMove}\n          @pointerup=${this._onPointerUp}\n        >\n          <div class=\"color-area-bg\" style=\"background:${hueColor}\"></div>\n          <div class=\"color-area-white\"></div>\n          <div class=\"color-area-black\"></div>\n          <div class=\"color-area-thumb\" style=\"left:${this._hsv.s * 100}%;top:${(1 - this._hsv.v) * 100}%;background:${currentHex}\"></div>\n        </div>\n\n        <!-- Hue -->\n        <div class=\"slider-row\">\n          <div class=\"slider-track hue-track\"\n            @pointerdown=${this._onHuePointerDown}\n            @pointermove=${this._onHuePointerMove}\n            @pointerup=${this._onPointerUp}\n          ><div class=\"slider-thumb\" style=\"left:${(this._hsv.h / 360) * 100}%;background:${hueColor}\"></div></div>\n        </div>\n\n        <!-- Alpha -->\n        ${this.showAlpha ? html`\n          <div class=\"slider-row\">\n            <div class=\"slider-track alpha-track\"\n              @pointerdown=${this._onAlphaPointerDown}\n              @pointermove=${this._onAlphaPointerMove}\n              @pointerup=${this._onPointerUp}\n            ><div class=\"alpha-gradient\" style=\"background:linear-gradient(to right,transparent,${currentHex})\"></div>\n            <div class=\"slider-thumb\" style=\"left:${this._hsv.a * 100}%;background:${currentHex}\"></div></div>\n          </div>\n        ` : nothing}\n\n        <!-- Hex + copy -->\n        <div class=\"inputs-row\">\n          <div class=\"preview-dot\" style=\"background:${currentHex}\"></div>\n          <input class=\"hex-input\" type=\"text\" .value=${this._hexInput} aria-label=\"Hex color\" @input=${this._onHexInput} />\n          <button class=\"copy-btn\" @click=${this._copy} aria-label=\"Copy color\">\n            ${this._copied ? html`\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M20 6L9 17l-5-5\"></path></svg>\n            ` : html`\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"></rect><path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"></path>\n              </svg>\n            `}\n          </button>\n        </div>\n\n        <!-- RGB -->\n        ${this.showRgb ? html`\n          <div class=\"rgb-row\">\n            ${(['r', 'g', 'b'] as const).map(ch => html`\n              <div class=\"rgb-field\">\n                <input class=\"rgb-input\" type=\"number\" min=\"0\" max=\"255\" .value=${String(rgb[ch])} @input=${(e: Event) => this._onRgbInput(ch, e)} aria-label=${ch.toUpperCase()} />\n                <span class=\"rgb-label\">${ch.toUpperCase()}</span>\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n\n        <!-- Presets -->\n        ${this.showPresets && this.colors.length > 0 ? html`\n          <div class=\"presets\" role=\"radiogroup\" aria-label=\"Preset colors\">\n            ${this.colors.map(c => html`\n              <button class=\"preset ${this.value === c ? 'active' : ''}\" style=\"background:${c}\"\n                role=\"radio\" aria-checked=${this.value === c} aria-label=${c}\n                @click=${() => { this._hsv = hexToHsv(c); this._emit(); }}\n              ></button>\n            `)}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-color-picker': CgColorPicker; }\n}\n"],"names":["PRESET_COLORS","hsvToHex","hsv","h","s","v","c","x","m","r","g","b","toHex","n","hexToHsv","hex","max","min","d","hue","hsvToRgb","CgColorPicker","LitElement","e","changed","full","el","val","ch","rgb","hueColor","currentHex","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+export interface ComboOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+/**
+ * @element cg-combobox
+ * Typeahead input with optional chips for multi-select.
+ *
+ * @fires {CustomEvent<{value:string|string[]}>} cg-combobox-change
+ */
+export declare class CgCombobox extends LitElement {
+    static formAssociated: boolean;
+    static styles: import('lit').CSSResult[];
+    options: ComboOption[];
+    value: string | string[];
+    multiple: boolean;
+    placeholder: string;
+    searchable: boolean;
+    clearable: boolean;
+    disabled: boolean;
+    loading: boolean;
+    name: string;
+    open: boolean;
+    error: boolean;
+    success: boolean;
+    size: 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    private _query;
+    private _activeIndex;
+    private _input;
+    private _internals;
+    private _outsideHandler;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _updateFormValue;
+    private get _values();
+    private _filteredOptions;
+    private _selectOption;
+    private _removeChip;
+    private _clear;
+    private _onInput;
+    private _onKeydown;
+    private _onWrapperClick;
+    private _labelFor;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-combobox': CgCombobox;
+    }
+}
+//# sourceMappingURL=cg-combobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-combobox.d.ts","sourceRoot":"","sources":["../../../src/components/cg-combobox/cg-combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BA6KnB;IAEwB,OAAO,EAAE,WAAW,EAAE,CAAM;IAC3C,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAM;IACb,QAAQ,UAAS;IAClC,WAAW,SAAM;IACA,UAAU,UAAQ;IAClB,SAAS,UAAS;IACH,QAAQ,UAAS;IAChC,OAAO,UAAS;IACjC,IAAI,SAAM;IACsB,IAAI,UAAS;IACb,KAAK,UAAS;IACd,OAAO,UAAS;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhE,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,YAAY,CAAM;IAEnB,OAAO,CAAC,MAAM,CAAoB;IAElD,OAAO,CAAC,UAAU,CAAiC;IAEnD,OAAO,CAAC,eAAe,CAGrB;;IASO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,gBAAgB;IAMxB,OAAO,KAAK,OAAO,GAGlB;IAED,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAuBlB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,SAAS;IAIR,MAAM;CAsDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}