@cognivo/components 0.8.0 → 0.8.2

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

@@ -1 +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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"}
+{"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  // ── Keyboard (mirrors the pointer handlers so the spectrum + sliders are\n  //    fully operable without a mouse — they were pointer-only before). ──\n  private _onAreaKeydown(e: KeyboardEvent) {\n    const step = e.shiftKey ? 0.1 : 0.01;\n    let { s, v } = this._hsv;\n    switch (e.key) {\n      case 'ArrowLeft': s -= step; break;\n      case 'ArrowRight': s += step; break;\n      case 'ArrowUp': v += step; break;\n      case 'ArrowDown': v -= step; break;\n      default: return;\n    }\n    e.preventDefault();\n    this._hsv = { ...this._hsv, s: Math.max(0, Math.min(1, s)), v: Math.max(0, Math.min(1, v)) };\n    this._emit();\n  }\n\n  private _onHueKeydown(e: KeyboardEvent) {\n    let h = this._hsv.h;\n    switch (e.key) {\n      case 'ArrowRight': case 'ArrowUp': h += 1; break;\n      case 'ArrowLeft': case 'ArrowDown': h -= 1; break;\n      case 'PageUp': h += 10; break;\n      case 'PageDown': h -= 10; break;\n      case 'Home': h = 0; break;\n      case 'End': h = 360; break;\n      default: return;\n    }\n    e.preventDefault();\n    this._hsv = { ...this._hsv, h: Math.max(0, Math.min(360, h)) };\n    this._emit();\n  }\n\n  private _onAlphaKeydown(e: KeyboardEvent) {\n    let a = this._hsv.a;\n    switch (e.key) {\n      case 'ArrowRight': case 'ArrowUp': a += 0.01; break;\n      case 'ArrowLeft': case 'ArrowDown': a -= 0.01; break;\n      case 'PageUp': a += 0.1; break;\n      case 'PageDown': a -= 0.1; break;\n      case 'Home': a = 0; break;\n      case 'End': a = 1; break;\n      default: return;\n    }\n    e.preventDefault();\n    this._hsv = { ...this._hsv, a: Math.max(0, Math.min(1, a)) };\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          tabindex=\"0\"\n          role=\"slider\"\n          aria-label=\"Saturation and brightness\"\n          aria-valuetext=${`Saturation ${Math.round(this._hsv.s * 100)}%, brightness ${Math.round(this._hsv.v * 100)}%, ${currentHex}`}\n          @pointerdown=${this._onAreaPointerDown}\n          @pointermove=${this._onAreaPointerMove}\n          @pointerup=${this._onPointerUp}\n          @keydown=${this._onAreaKeydown}\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            tabindex=\"0\"\n            role=\"slider\"\n            aria-label=\"Hue\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"360\"\n            aria-valuenow=${Math.round(this._hsv.h)}\n            @pointerdown=${this._onHuePointerDown}\n            @pointermove=${this._onHuePointerMove}\n            @pointerup=${this._onPointerUp}\n            @keydown=${this._onHueKeydown}\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              tabindex=\"0\"\n              role=\"slider\"\n              aria-label=\"Opacity\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n              aria-valuenow=${Math.round(this._hsv.a * 100)}\n              @pointerdown=${this._onAlphaPointerDown}\n              @pointermove=${this._onAlphaPointerMove}\n              @pointerup=${this._onPointerUp}\n              @keydown=${this._onAlphaKeydown}\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","step","a","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.map

@@ -1 +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"}
+{"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,4BAkLnB;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;IAwBlB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,SAAS;IAIR,MAAM;CAwDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/cg-combobox/cg-combobox.js

@@ -1,6 +1,6 @@
 import { css as h, LitElement as g, nothing as p, html as c } from "lit";
 import { property as i, state as u, query as v, customElement as b } from "lit/decorators.js";
-import { h as f, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as m } from "../../chunks/premium.css-DHekUEUt.js";
 var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, t, n, o) => {
   for (var s = o > 1 ? void 0 : o ? _(t, n) : t, l = e.length - 1, d; l >= 0; l--)
     (d = e[l]) && (s = (o ? d(t, n, s) : d(s)) || s);
@@ -75,7 +75,7 @@ let r = class extends g {
       this._removeChip(this._values[this._values.length - 1]);
       return;
     }
-    e.key === "ArrowDown" ? (e.preventDefault(), this.open = !0, this._activeIndex = Math.min(t.length - 1, this._activeIndex + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), this._activeIndex = Math.max(0, this._activeIndex - 1)) : e.key === "Enter" ? this.open && t[this._activeIndex] && (e.preventDefault(), this._selectOption(t[this._activeIndex])) : e.key === "Escape" && (this.open = !1);
+    e.key === "ArrowDown" ? (e.preventDefault(), this.open = !0, this._activeIndex = Math.min(t.length - 1, this._activeIndex + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), this.open = !0, this._activeIndex = Math.max(0, this._activeIndex - 1)) : e.key === "Enter" ? this.open && t[this._activeIndex] && (e.preventDefault(), this._selectOption(t[this._activeIndex])) : e.key === "Escape" && (this.open = !1);
   }
   _onWrapperClick() {
     this.disabled || (this._input?.focus(), this.open = !0);
@@ -90,7 +90,7 @@ let r = class extends g {
         ${this.multiple ? t.map((o) => c`
               <span class="chip">
                 ${this._labelFor(o)}
-                <button class="chip-remove" aria-label="Remove" @click=${(s) => {
+                <button class="chip-remove" aria-label=${`Remove ${this._labelFor(o)}`} @click=${(s) => {
       s.stopPropagation(), this._removeChip(o);
     }}>×</button>
               </span>
@@ -101,6 +101,7 @@ let r = class extends g {
           aria-expanded=${this.open ? "true" : "false"}
           aria-autocomplete="list"
           aria-controls="combobox-listbox"
+          aria-haspopup="listbox"
           aria-activedescendant=${this.open && this._activeIndex >= 0 ? `combobox-opt-${this._activeIndex}` : p}
           ?disabled=${this.disabled}
           .value=${this.multiple ? this._query : typeof this.value == "string" ? this._query || this._labelFor(this.value) : this._query}
@@ -112,7 +113,7 @@ let r = class extends g {
     }}
         />
         ${this.clearable && n ? c`
-          <button class="clear-btn" aria-label="Clear" @click=${(o) => {
+          <button class="clear-btn" aria-label="Clear selection" @click=${(o) => {
       o.stopPropagation(), this._clear();
     }}>×</button>
         ` : p}
@@ -122,6 +123,7 @@ let r = class extends g {
         id="combobox-listbox"
         role="listbox"
         aria-multiselectable=${this.multiple ? "true" : "false"}
+        aria-busy=${this.loading ? "true" : "false"}
       >
         ${this.loading ? c`<div class="empty">Loading…</div>` : e.length === 0 ? c`<div class="empty">No options</div>` : e.map((o, s) => c`
             <div
@@ -295,10 +297,15 @@ r.styles = [f, m, h`
       cursor: pointer;
       transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    .option:hover,
-    .option.active {
+    .option:hover {
       background: var(--cg-color-action-tertiary-background-hover);
     }
+    /* Keyboard-active descendant gets a distinct accent so it's not confused
+       with a hovered row. */
+    .option.active {
+      background: var(--cg-overlay-accent-strong);
+      box-shadow: inset var(--cg-spacing-2) 0 0 0 var(--cg-color-action-primary-background-default);
+    }
     .option.disabled { opacity: 0.5; cursor: not-allowed; }
     .option.selected { font-weight: var(--cg-font-weight-medium); }
     .option.selected::after {

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

@@ -1 +1 @@
-{"version":3,"file":"cg-combobox.js","sources":["../../../src/components/cg-combobox/cg-combobox.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface ComboOption {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\n/**\n * @element cg-combobox\n * Typeahead input with optional chips for multi-select.\n *\n * @fires {CustomEvent<{value:string|string[]}>} cg-combobox-change\n */\n@customElement('cg-combobox')\nexport class CgCombobox extends LitElement {\n  static formAssociated = true;\n\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: inline-block;\n      width: 100%;\n      max-width: 100%;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\n      min-height: var(--cg-component-input-height-md);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-input-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      color: var(--cg-color-input-text-default);\n      cursor: text;\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\n    /* Size variants — match cg-input */\n    :host([size=\"lg\"]) .wrapper { min-height: var(--cg-component-input-height-lg); }\n\n    /* Rounded variants — match cg-input */\n    :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n    :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-component-input-radius); }\n\n    .wrapper:hover { border-color: var(--cg-color-input-border-hover); }\n    .wrapper:focus-within {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* Error state — match cg-input */\n    :host([error]) .wrapper {\n      border-color: var(--cg-color-input-border-error);\n    }\n    :host([error]) .wrapper:focus-within {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    /* Success state — match cg-input */\n    :host([success]) .wrapper {\n      border-color: var(--cg-color-input-icon-success);\n    }\n    :host([success]) .wrapper:focus-within {\n      border-color: var(--cg-color-status-success-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n    }\n\n    :host([disabled]) .wrapper {\n      opacity: 0.5;\n      cursor: not-allowed;\n      pointer-events: none;\n      background: var(--cg-color-input-background-disabled);\n      border-color: var(--cg-color-input-border-disabled);\n    }\n\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-4) var(--cg-spacing-4) var(--cg-spacing-4) var(--cg-spacing-8);\n      background: var(--cg-color-action-tertiary-background-hover);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-full);\n      animation: comboChipIn var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n    }\n    @keyframes comboChipIn {\n      from { opacity: 0; transform: scale(0.8); }\n      to { opacity: 1; transform: scale(1); }\n    }\n    .chip-remove {\n      background: none;\n      border: none;\n      color: inherit;\n      font: inherit;\n      cursor: pointer;\n      padding: 0;\n      font-size: var(--cg-font-size-sm);\n      line-height: 1;\n    }\n\n    input {\n      flex: 1;\n      min-width: var(--cg-spacing-80);\n      background: transparent;\n      border: none;\n      outline: none;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    .clear-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: var(--cg-spacing-2);\n      font-size: var(--cg-font-size-sm);\n      line-height: 1;\n    }\n\n    .listbox {\n      position: absolute;\n      top: calc(100% + var(--cg-spacing-6));\n      left: 0;\n      right: 0;\n      z-index: var(--cg-z-index-500);\n      max-height: var(--cg-component-combobox-listbox-max-height);\n      overflow-y: auto;\n      padding: var(--cg-spacing-6);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-component-card-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      display: none;\n      opacity: 0;\n      transform: translateY(calc(var(--cg-spacing-4) * -1));\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .listbox {\n      display: block;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-text);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .option:hover,\n    .option.active {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .option.disabled { opacity: 0.5; cursor: not-allowed; }\n    .option.selected { font-weight: var(--cg-font-weight-medium); }\n    .option.selected::after {\n      content: '✓';\n      color: var(--cg-color-accent-text);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-16);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Array }) options: ComboOption[] = [];\n  @property() value: string | string[] = '';\n  @property({ type: Boolean }) multiple = false;\n  @property() placeholder = '';\n  @property({ type: Boolean }) searchable = true;\n  @property({ type: Boolean }) clearable = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean }) loading = false;\n  @property() name = '';\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ reflect: true }) size: 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n\n  @state() private _query = '';\n  @state() private _activeIndex = -1;\n\n  @query('input') private _input!: HTMLInputElement;\n\n  private _internals: ElementInternals | null = null;\n\n  private _outsideHandler = (e: MouseEvent) => {\n    if (!this.open) return;\n    if (!e.composedPath().includes(this)) this.open = false;\n  };\n\n  constructor() {\n    super();\n    if ('attachInternals' in this) {\n      try { this._internals = (this as HTMLElement).attachInternals(); } catch { /* ignore */ }\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._outsideHandler);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._outsideHandler);\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) this._updateFormValue();\n  }\n\n  private _updateFormValue(): void {\n    if (!this._internals) return;\n    const v = Array.isArray(this.value) ? this.value.join(',') : this.value;\n    this._internals.setFormValue(v);\n  }\n\n  private get _values(): string[] {\n    if (this.multiple) return Array.isArray(this.value) ? this.value : [];\n    return typeof this.value === 'string' && this.value ? [this.value] : [];\n  }\n\n  private _filteredOptions(): ComboOption[] {\n    if (!this._query || !this.searchable) return this.options;\n    const q = this._query.toLowerCase();\n    return this.options.filter(o => o.label.toLowerCase().includes(q));\n  }\n\n  private _selectOption(opt: ComboOption): void {\n    if (opt.disabled) return;\n    if (this.multiple) {\n      const cur = this._values;\n      const next = cur.includes(opt.value) ? cur.filter(v => v !== opt.value) : [...cur, opt.value];\n      this.value = next;\n    } else {\n      this.value = opt.value;\n      this.open = false;\n    }\n    this._query = '';\n    this.dispatchEvent(new CustomEvent('cg-combobox-change', {\n      bubbles: true, composed: true, detail: { value: this.value },\n    }));\n  }\n\n  private _removeChip(v: string): void {\n    if (!this.multiple) return;\n    this.value = this._values.filter(x => x !== v);\n    this.dispatchEvent(new CustomEvent('cg-combobox-change', {\n      bubbles: true, composed: true, detail: { value: this.value },\n    }));\n  }\n\n  private _clear(): void {\n    this.value = this.multiple ? [] : '';\n    this._query = '';\n    this.dispatchEvent(new CustomEvent('cg-combobox-change', {\n      bubbles: true, composed: true, detail: { value: this.value },\n    }));\n  }\n\n  private _onInput(e: Event): void {\n    this._query = (e.target as HTMLInputElement).value;\n    this.open = true;\n    this._activeIndex = 0;\n  }\n\n  private _onKeydown(e: KeyboardEvent): void {\n    const filtered = this._filteredOptions();\n    if (e.key === 'Backspace' && !this._query && this.multiple && this._values.length) {\n      this._removeChip(this._values[this._values.length - 1]!);\n      return;\n    }\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.open = true;\n      this._activeIndex = Math.min(filtered.length - 1, this._activeIndex + 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._activeIndex = Math.max(0, this._activeIndex - 1);\n    } else if (e.key === 'Enter') {\n      if (this.open && filtered[this._activeIndex]) {\n        e.preventDefault();\n        this._selectOption(filtered[this._activeIndex]!);\n      }\n    } else if (e.key === 'Escape') {\n      this.open = false;\n    }\n  }\n\n  private _onWrapperClick(): void {\n    if (this.disabled) return;\n    this._input?.focus();\n    this.open = true;\n  }\n\n  private _labelFor(value: string): string {\n    return this.options.find(o => o.value === value)?.label ?? value;\n  }\n\n  override render() {\n    const filtered = this._filteredOptions();\n    const values = this._values;\n    const hasValue = values.length > 0;\n\n    return html`\n      <div class=\"wrapper\" @click=${this._onWrapperClick}>\n        ${this.multiple\n          ? values.map(v => html`\n              <span class=\"chip\">\n                ${this._labelFor(v)}\n                <button class=\"chip-remove\" aria-label=\"Remove\" @click=${(e: MouseEvent) => { e.stopPropagation(); this._removeChip(v); }}>×</button>\n              </span>\n            `)\n          : nothing}\n        <input\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-autocomplete=\"list\"\n          aria-controls=\"combobox-listbox\"\n          aria-activedescendant=${this.open && this._activeIndex >= 0 ? `combobox-opt-${this._activeIndex}` : nothing}\n          ?disabled=${this.disabled}\n          .value=${this.multiple ? this._query : (typeof this.value === 'string' ? (this._query || this._labelFor(this.value)) : this._query)}\n          placeholder=${this.placeholder}\n          @input=${this._onInput}\n          @keydown=${this._onKeydown}\n          @focus=${() => { this.open = true; }}\n        />\n        ${this.clearable && hasValue ? html`\n          <button class=\"clear-btn\" aria-label=\"Clear\" @click=${(e: MouseEvent) => { e.stopPropagation(); this._clear(); }}>×</button>\n        ` : nothing}\n      </div>\n      <div\n        class=\"listbox\"\n        id=\"combobox-listbox\"\n        role=\"listbox\"\n        aria-multiselectable=${this.multiple ? 'true' : 'false'}\n      >\n        ${this.loading ? html`<div class=\"empty\">Loading…</div>` :\n          filtered.length === 0 ? html`<div class=\"empty\">No options</div>` :\n          filtered.map((opt, i) => html`\n            <div\n              class=\"option ${opt.disabled ? 'disabled' : ''} ${values.includes(opt.value) ? 'selected' : ''} ${i === this._activeIndex ? 'active' : ''}\"\n              id=${`combobox-opt-${i}`}\n              role=\"option\"\n              aria-selected=${values.includes(opt.value) ? 'true' : 'false'}\n              aria-disabled=${opt.disabled ? 'true' : 'false'}\n              @click=${(e: MouseEvent) => { e.stopPropagation(); this._selectOption(opt); }}\n            >${opt.label}</div>\n          `)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-combobox': CgCombobox;\n  }\n}\n"],"names":["CgCombobox","LitElement","changed","v","q","o","opt","cur","next","x","filtered","value","values","hasValue","html","e","nothing","i","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-combobox.js","sources":["../../../src/components/cg-combobox/cg-combobox.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface ComboOption {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\n/**\n * @element cg-combobox\n * Typeahead input with optional chips for multi-select.\n *\n * @fires {CustomEvent<{value:string|string[]}>} cg-combobox-change\n */\n@customElement('cg-combobox')\nexport class CgCombobox extends LitElement {\n  static formAssociated = true;\n\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: inline-block;\n      width: 100%;\n      max-width: 100%;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\n      min-height: var(--cg-component-input-height-md);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-input-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      color: var(--cg-color-input-text-default);\n      cursor: text;\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\n    /* Size variants — match cg-input */\n    :host([size=\"lg\"]) .wrapper { min-height: var(--cg-component-input-height-lg); }\n\n    /* Rounded variants — match cg-input */\n    :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n    :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-component-input-radius); }\n\n    .wrapper:hover { border-color: var(--cg-color-input-border-hover); }\n    .wrapper:focus-within {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* Error state — match cg-input */\n    :host([error]) .wrapper {\n      border-color: var(--cg-color-input-border-error);\n    }\n    :host([error]) .wrapper:focus-within {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    /* Success state — match cg-input */\n    :host([success]) .wrapper {\n      border-color: var(--cg-color-input-icon-success);\n    }\n    :host([success]) .wrapper:focus-within {\n      border-color: var(--cg-color-status-success-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n    }\n\n    :host([disabled]) .wrapper {\n      opacity: 0.5;\n      cursor: not-allowed;\n      pointer-events: none;\n      background: var(--cg-color-input-background-disabled);\n      border-color: var(--cg-color-input-border-disabled);\n    }\n\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-4) var(--cg-spacing-4) var(--cg-spacing-4) var(--cg-spacing-8);\n      background: var(--cg-color-action-tertiary-background-hover);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-full);\n      animation: comboChipIn var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n    }\n    @keyframes comboChipIn {\n      from { opacity: 0; transform: scale(0.8); }\n      to { opacity: 1; transform: scale(1); }\n    }\n    .chip-remove {\n      background: none;\n      border: none;\n      color: inherit;\n      font: inherit;\n      cursor: pointer;\n      padding: 0;\n      font-size: var(--cg-font-size-sm);\n      line-height: 1;\n    }\n\n    input {\n      flex: 1;\n      min-width: var(--cg-spacing-80);\n      background: transparent;\n      border: none;\n      outline: none;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    .clear-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: var(--cg-spacing-2);\n      font-size: var(--cg-font-size-sm);\n      line-height: 1;\n    }\n\n    .listbox {\n      position: absolute;\n      top: calc(100% + var(--cg-spacing-6));\n      left: 0;\n      right: 0;\n      z-index: var(--cg-z-index-500);\n      max-height: var(--cg-component-combobox-listbox-max-height);\n      overflow-y: auto;\n      padding: var(--cg-spacing-6);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-component-card-radius);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      display: none;\n      opacity: 0;\n      transform: translateY(calc(var(--cg-spacing-4) * -1));\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .listbox {\n      display: block;\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-text);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .option:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    /* Keyboard-active descendant gets a distinct accent so it's not confused\n       with a hovered row. */\n    .option.active {\n      background: var(--cg-overlay-accent-strong);\n      box-shadow: inset var(--cg-spacing-2) 0 0 0 var(--cg-color-action-primary-background-default);\n    }\n    .option.disabled { opacity: 0.5; cursor: not-allowed; }\n    .option.selected { font-weight: var(--cg-font-weight-medium); }\n    .option.selected::after {\n      content: '✓';\n      color: var(--cg-color-accent-text);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-16);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Array }) options: ComboOption[] = [];\n  @property() value: string | string[] = '';\n  @property({ type: Boolean }) multiple = false;\n  @property() placeholder = '';\n  @property({ type: Boolean }) searchable = true;\n  @property({ type: Boolean }) clearable = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean }) loading = false;\n  @property() name = '';\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ reflect: true }) size: 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n\n  @state() private _query = '';\n  @state() private _activeIndex = -1;\n\n  @query('input') private _input!: HTMLInputElement;\n\n  private _internals: ElementInternals | null = null;\n\n  private _outsideHandler = (e: MouseEvent) => {\n    if (!this.open) return;\n    if (!e.composedPath().includes(this)) this.open = false;\n  };\n\n  constructor() {\n    super();\n    if ('attachInternals' in this) {\n      try { this._internals = (this as HTMLElement).attachInternals(); } catch { /* ignore */ }\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._outsideHandler);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._outsideHandler);\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) this._updateFormValue();\n  }\n\n  private _updateFormValue(): void {\n    if (!this._internals) return;\n    const v = Array.isArray(this.value) ? this.value.join(',') : this.value;\n    this._internals.setFormValue(v);\n  }\n\n  private get _values(): string[] {\n    if (this.multiple) return Array.isArray(this.value) ? this.value : [];\n    return typeof this.value === 'string' && this.value ? [this.value] : [];\n  }\n\n  private _filteredOptions(): ComboOption[] {\n    if (!this._query || !this.searchable) return this.options;\n    const q = this._query.toLowerCase();\n    return this.options.filter(o => o.label.toLowerCase().includes(q));\n  }\n\n  private _selectOption(opt: ComboOption): void {\n    if (opt.disabled) return;\n    if (this.multiple) {\n      const cur = this._values;\n      const next = cur.includes(opt.value) ? cur.filter(v => v !== opt.value) : [...cur, opt.value];\n      this.value = next;\n    } else {\n      this.value = opt.value;\n      this.open = false;\n    }\n    this._query = '';\n    this.dispatchEvent(new CustomEvent('cg-combobox-change', {\n      bubbles: true, composed: true, detail: { value: this.value },\n    }));\n  }\n\n  private _removeChip(v: string): void {\n    if (!this.multiple) return;\n    this.value = this._values.filter(x => x !== v);\n    this.dispatchEvent(new CustomEvent('cg-combobox-change', {\n      bubbles: true, composed: true, detail: { value: this.value },\n    }));\n  }\n\n  private _clear(): void {\n    this.value = this.multiple ? [] : '';\n    this._query = '';\n    this.dispatchEvent(new CustomEvent('cg-combobox-change', {\n      bubbles: true, composed: true, detail: { value: this.value },\n    }));\n  }\n\n  private _onInput(e: Event): void {\n    this._query = (e.target as HTMLInputElement).value;\n    this.open = true;\n    this._activeIndex = 0;\n  }\n\n  private _onKeydown(e: KeyboardEvent): void {\n    const filtered = this._filteredOptions();\n    if (e.key === 'Backspace' && !this._query && this.multiple && this._values.length) {\n      this._removeChip(this._values[this._values.length - 1]!);\n      return;\n    }\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.open = true;\n      this._activeIndex = Math.min(filtered.length - 1, this._activeIndex + 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.open = true;\n      this._activeIndex = Math.max(0, this._activeIndex - 1);\n    } else if (e.key === 'Enter') {\n      if (this.open && filtered[this._activeIndex]) {\n        e.preventDefault();\n        this._selectOption(filtered[this._activeIndex]!);\n      }\n    } else if (e.key === 'Escape') {\n      this.open = false;\n    }\n  }\n\n  private _onWrapperClick(): void {\n    if (this.disabled) return;\n    this._input?.focus();\n    this.open = true;\n  }\n\n  private _labelFor(value: string): string {\n    return this.options.find(o => o.value === value)?.label ?? value;\n  }\n\n  override render() {\n    const filtered = this._filteredOptions();\n    const values = this._values;\n    const hasValue = values.length > 0;\n\n    return html`\n      <div class=\"wrapper\" @click=${this._onWrapperClick}>\n        ${this.multiple\n          ? values.map(v => html`\n              <span class=\"chip\">\n                ${this._labelFor(v)}\n                <button class=\"chip-remove\" aria-label=${`Remove ${this._labelFor(v)}`} @click=${(e: MouseEvent) => { e.stopPropagation(); this._removeChip(v); }}>×</button>\n              </span>\n            `)\n          : nothing}\n        <input\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-autocomplete=\"list\"\n          aria-controls=\"combobox-listbox\"\n          aria-haspopup=\"listbox\"\n          aria-activedescendant=${this.open && this._activeIndex >= 0 ? `combobox-opt-${this._activeIndex}` : nothing}\n          ?disabled=${this.disabled}\n          .value=${this.multiple ? this._query : (typeof this.value === 'string' ? (this._query || this._labelFor(this.value)) : this._query)}\n          placeholder=${this.placeholder}\n          @input=${this._onInput}\n          @keydown=${this._onKeydown}\n          @focus=${() => { this.open = true; }}\n        />\n        ${this.clearable && hasValue ? html`\n          <button class=\"clear-btn\" aria-label=\"Clear selection\" @click=${(e: MouseEvent) => { e.stopPropagation(); this._clear(); }}>×</button>\n        ` : nothing}\n      </div>\n      <div\n        class=\"listbox\"\n        id=\"combobox-listbox\"\n        role=\"listbox\"\n        aria-multiselectable=${this.multiple ? 'true' : 'false'}\n        aria-busy=${this.loading ? 'true' : 'false'}\n      >\n        ${this.loading ? html`<div class=\"empty\">Loading…</div>` :\n          filtered.length === 0 ? html`<div class=\"empty\">No options</div>` :\n          filtered.map((opt, i) => html`\n            <div\n              class=\"option ${opt.disabled ? 'disabled' : ''} ${values.includes(opt.value) ? 'selected' : ''} ${i === this._activeIndex ? 'active' : ''}\"\n              id=${`combobox-opt-${i}`}\n              role=\"option\"\n              aria-selected=${values.includes(opt.value) ? 'true' : 'false'}\n              aria-disabled=${opt.disabled ? 'true' : 'false'}\n              @click=${(e: MouseEvent) => { e.stopPropagation(); this._selectOption(opt); }}\n            >${opt.label}</div>\n          `)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-combobox': CgCombobox;\n  }\n}\n"],"names":["CgCombobox","LitElement","changed","v","q","o","opt","cur","next","x","filtered","value","values","hasValue","html","e","nothing","i","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;;;AAiBO,IAAMA,IAAN,cAAyBC,EAAW;AAAA,EAkNzC,cAAc;AAEZ,QADA,MAAA,GA5ByB,KAAA,UAAyB,CAAA,GACxC,KAAA,QAA2B,IACV,KAAA,WAAW,IAC5B,KAAA,cAAc,IACG,KAAA,aAAa,IACb,KAAA,YAAY,IACG,KAAA,WAAW,IAC1B,KAAA,UAAU,IAC3B,KAAA,OAAO,IACyB,KAAA,OAAO,IACP,KAAA,QAAQ,IACR,KAAA,UAAU,IACzB,KAAA,OAAoB,MACpB,KAAA,UAAuC,MAE3D,KAAQ,SAAS,IACjB,KAAQ,eAAe,IAIhC,KAAQ,aAAsC,MAE9C,KAAQ,kBAAkB,CAAC,MAAkB;AAC3C,MAAK,KAAK,SACL,EAAE,eAAe,SAAS,IAAI,WAAQ,OAAO;AAAA,IACpD,GAIM,qBAAqB;AACvB,UAAI;AAAE,aAAK,aAAc,KAAqB,gBAAA;AAAA,MAAmB,QAAQ;AAAA,MAAe;AAAA,EAE5F;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,SAAS,iBAAiB,SAAS,KAAK,eAAe;AAAA,EACzD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,eAAe;AAAA,EAC5D;AAAA,EAES,QAAQC,GAAqC;AACpD,IAAIA,EAAQ,IAAI,OAAO,UAAQ,iBAAA;AAAA,EACjC;AAAA,EAEQ,mBAAyB;AAC/B,QAAI,CAAC,KAAK,WAAY;AACtB,UAAMC,IAAI,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,MAAM,KAAK,GAAG,IAAI,KAAK;AAClE,SAAK,WAAW,aAAaA,CAAC;AAAA,EAChC;AAAA,EAEA,IAAY,UAAoB;AAC9B,WAAI,KAAK,WAAiB,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAA,IAC5D,OAAO,KAAK,SAAU,YAAY,KAAK,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAA;AAAA,EACvE;AAAA,EAEQ,mBAAkC;AACxC,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,mBAAmB,KAAK;AAClD,UAAMC,IAAI,KAAK,OAAO,YAAA;AACtB,WAAO,KAAK,QAAQ,OAAO,CAAAC,MAAKA,EAAE,MAAM,YAAA,EAAc,SAASD,CAAC,CAAC;AAAA,EACnE;AAAA,EAEQ,cAAcE,GAAwB;AAC5C,QAAI,CAAAA,EAAI,UACR;AAAA,UAAI,KAAK,UAAU;AACjB,cAAMC,IAAM,KAAK,SACXC,IAAOD,EAAI,SAASD,EAAI,KAAK,IAAIC,EAAI,OAAO,CAAAJ,MAAKA,MAAMG,EAAI,KAAK,IAAI,CAAC,GAAGC,GAAKD,EAAI,KAAK;AAC5F,aAAK,QAAQE;AAAA,MACf;AACE,aAAK,QAAQF,EAAI,OACjB,KAAK,OAAO;AAEd,WAAK,SAAS,IACd,KAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,QACvD,SAAS;AAAA,QAAM,UAAU;AAAA,QAAM,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC5D,CAAC;AAAA;AAAA,EACJ;AAAA,EAEQ,YAAYH,GAAiB;AACnC,IAAK,KAAK,aACV,KAAK,QAAQ,KAAK,QAAQ,OAAO,CAAAM,MAAKA,MAAMN,CAAC,GAC7C,KAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,MACvD,SAAS;AAAA,MAAM,UAAU;AAAA,MAAM,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,IAAM,CAC5D,CAAC;AAAA,EACJ;AAAA,EAEQ,SAAe;AACrB,SAAK,QAAQ,KAAK,WAAW,CAAA,IAAK,IAClC,KAAK,SAAS,IACd,KAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,MACvD,SAAS;AAAA,MAAM,UAAU;AAAA,MAAM,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,IAAM,CAC5D,CAAC;AAAA,EACJ;AAAA,EAEQ,SAAS,GAAgB;AAC/B,SAAK,SAAU,EAAE,OAA4B,OAC7C,KAAK,OAAO,IACZ,KAAK,eAAe;AAAA,EACtB;AAAA,EAEQ,WAAW,GAAwB;AACzC,UAAMO,IAAW,KAAK,iBAAA;AACtB,QAAI,EAAE,QAAQ,eAAe,CAAC,KAAK,UAAU,KAAK,YAAY,KAAK,QAAQ,QAAQ;AACjF,WAAK,YAAY,KAAK,QAAQ,KAAK,QAAQ,SAAS,CAAC,CAAE;AACvD;AAAA,IACF;AACA,IAAI,EAAE,QAAQ,eACZ,EAAE,eAAA,GACF,KAAK,OAAO,IACZ,KAAK,eAAe,KAAK,IAAIA,EAAS,SAAS,GAAG,KAAK,eAAe,CAAC,KAC9D,EAAE,QAAQ,aACnB,EAAE,eAAA,GACF,KAAK,OAAO,IACZ,KAAK,eAAe,KAAK,IAAI,GAAG,KAAK,eAAe,CAAC,KAC5C,EAAE,QAAQ,UACf,KAAK,QAAQA,EAAS,KAAK,YAAY,MACzC,EAAE,eAAA,GACF,KAAK,cAAcA,EAAS,KAAK,YAAY,CAAE,KAExC,EAAE,QAAQ,aACnB,KAAK,OAAO;AAAA,EAEhB;AAAA,EAEQ,kBAAwB;AAC9B,IAAI,KAAK,aACT,KAAK,QAAQ,MAAA,GACb,KAAK,OAAO;AAAA,EACd;AAAA,EAEQ,UAAUC,GAAuB;AACvC,WAAO,KAAK,QAAQ,KAAK,CAAAN,MAAKA,EAAE,UAAUM,CAAK,GAAG,SAASA;AAAA,EAC7D;AAAA,EAES,SAAS;AAChB,UAAMD,IAAW,KAAK,iBAAA,GAChBE,IAAS,KAAK,SACdC,IAAWD,EAAO,SAAS;AAEjC,WAAOE;AAAA,oCACyB,KAAK,eAAe;AAAA,UAC9C,KAAK,WACHF,EAAO,IAAI,CAAAT,MAAKW;AAAA;AAAA,kBAEV,KAAK,UAAUX,CAAC,CAAC;AAAA,yDACsB,UAAU,KAAK,UAAUA,CAAC,CAAC,EAAE,WAAW,CAACY,MAAkB;AAAE,MAAAA,EAAE,gBAAA,GAAmB,KAAK,YAAYZ,CAAC;AAAA,IAAG,CAAC;AAAA;AAAA,aAEpJ,IACDa,CAAO;AAAA;AAAA;AAAA;AAAA,0BAIO,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA,kCAIpB,KAAK,QAAQ,KAAK,gBAAgB,IAAI,gBAAgB,KAAK,YAAY,KAAKA,CAAO;AAAA,sBAC/F,KAAK,QAAQ;AAAA,mBAChB,KAAK,WAAW,KAAK,SAAU,OAAO,KAAK,SAAU,WAAY,KAAK,UAAU,KAAK,UAAU,KAAK,KAAK,IAAK,KAAK,MAAO;AAAA,wBACrH,KAAK,WAAW;AAAA,mBACrB,KAAK,QAAQ;AAAA,qBACX,KAAK,UAAU;AAAA,mBACjB,MAAM;AAAE,WAAK,OAAO;AAAA,IAAM,CAAC;AAAA;AAAA,UAEpC,KAAK,aAAaH,IAAWC;AAAA,0EACmC,CAACC,MAAkB;AAAE,MAAAA,EAAE,gBAAA,GAAmB,KAAK,OAAA;AAAA,IAAU,CAAC;AAAA,YACxHC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAMY,KAAK,WAAW,SAAS,OAAO;AAAA,oBAC3C,KAAK,UAAU,SAAS,OAAO;AAAA;AAAA,UAEzC,KAAK,UAAUF,uCACfJ,EAAS,WAAW,IAAII,yCACxBJ,EAAS,IAAI,CAACJ,GAAKW,MAAMH;AAAA;AAAA,8BAELR,EAAI,WAAW,aAAa,EAAE,IAAIM,EAAO,SAASN,EAAI,KAAK,IAAI,aAAa,EAAE,IAAIW,MAAM,KAAK,eAAe,WAAW,EAAE;AAAA,mBACpI,gBAAgBA,CAAC,EAAE;AAAA;AAAA,8BAERL,EAAO,SAASN,EAAI,KAAK,IAAI,SAAS,OAAO;AAAA,8BAC7CA,EAAI,WAAW,SAAS,OAAO;AAAA,uBACtC,CAACS,MAAkB;AAAE,MAAAA,EAAE,gBAAA,GAAmB,KAAK,cAAcT,CAAG;AAAA,IAAG,CAAC;AAAA,eAC5EA,EAAI,KAAK;AAAA,WACb,CAAC;AAAA;AAAA;AAAA,EAGV;AACF;AAxXaN,EACJ,iBAAiB;AADbA,EAGK,SAAS,CAACkB,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkLnD;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAvLdtB,EAuLgB,WAAA,WAAA,CAAA;AACfqB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAxLCtB,EAwLC,WAAA,SAAA,CAAA;AACiBqB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzLhBtB,EAyLkB,WAAA,YAAA,CAAA;AACjBqB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA1LCtB,EA0LC,WAAA,eAAA,CAAA;AACiBqB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3LhBtB,EA2LkB,WAAA,cAAA,CAAA;AACAqB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA5LhBtB,EA4LkB,WAAA,aAAA,CAAA;AACeqB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7L/BtB,EA6LiC,WAAA,YAAA,CAAA;AACfqB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA9LhBtB,EA8LkB,WAAA,WAAA,CAAA;AACjBqB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA/LCtB,EA+LC,WAAA,QAAA,CAAA;AACgCqB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhM/BtB,EAgMiC,WAAA,QAAA,CAAA;AACAqB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjM/BtB,EAiMiC,WAAA,SAAA,CAAA;AACAqB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlM/BtB,EAkMiC,WAAA,WAAA,CAAA;AACfqB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnMhBtB,EAmMkB,WAAA,QAAA,CAAA;AACAqB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GApMhBtB,EAoMkB,WAAA,WAAA,CAAA;AAEZqB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtMIvB,EAsMM,WAAA,UAAA,CAAA;AACAqB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvMIvB,EAuMM,WAAA,gBAAA,CAAA;AAEOqB,EAAA;AAAA,EAAvBG,EAAM,OAAO;AAAA,GAzMHxB,EAyMa,WAAA,UAAA,CAAA;AAzMbA,IAANqB,EAAA;AAAA,EADNI,EAAc,aAAa;AAAA,GACfzB,CAAA;"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-command.d.ts","sourceRoot":"","sources":["../../../src/components/cg-command/cg-command.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAqKnB;IAEyC,IAAI,UAAS;IAC7C,WAAW,SAAiC;IAC7B,QAAQ,EAAE,WAAW,EAAE,CAAM;IAC5C,KAAK,SAAM;IACgB,SAAS,SAAuB;IAC1C,OAAO,UAAS;IAEpC,OAAO,CAAC,YAAY,CAAK;IAElB,OAAO,CAAC,QAAQ,CAAoB;IACjC,OAAO,CAAC,UAAU,CAAe;IAEpD,OAAO,CAAC,UAAU,CAAmB;IAE5B,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOrD,OAAO,CAAC,OAAO;IAaf,OAAO,CAAC,QAAQ;IAKhB,OAAO,KAAK,iBAAiB,GAS5B;IAED,OAAO,KAAK,gBAAgB,GAS3B;IAED,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,OAAO;IAWN,MAAM;CAkEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"cg-command.d.ts","sourceRoot":"","sources":["../../../src/components/cg-command/cg-command.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA0KnB;IAEyC,IAAI,UAAS;IAC7C,WAAW,SAAiC;IAC7B,QAAQ,EAAE,WAAW,EAAE,CAAM;IAC5C,KAAK,SAAM;IACgB,SAAS,SAAuB;IAC1C,OAAO,UAAS;IAEpC,OAAO,CAAC,YAAY,CAAK;IAElB,OAAO,CAAC,QAAQ,CAAoB;IACjC,OAAO,CAAC,UAAU,CAAe;IAEpD,OAAO,CAAC,UAAU,CAAmB;IAE5B,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOrD,OAAO,CAAC,OAAO;IAaf,OAAO,CAAC,QAAQ;IAKhB,OAAO,KAAK,iBAAiB,GAS5B;IAED,OAAO,KAAK,gBAAgB,GAS3B;IAED,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,OAAO;IAWN,MAAM;CAoEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/cg-command/cg-command.js

@@ -1,14 +1,14 @@
-import { css as u, LitElement as m, html as c, nothing as p } from "lit";
+import { css as u, LitElement as m, nothing as p, html as c } from "lit";
 import { property as d, state as v, query as g, customElement as h } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-import { F as y } from "../../chunks/focus-trap-BdRNhSPD.js";
+import { h as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
+import { F as y } from "../../chunks/focus-trap-vlQwKK-3.js";
 import { h as x } from "../../chunks/roving-index-BuO0tTba.js";
-var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, o, a) => {
-  for (var s = a > 1 ? void 0 : a ? w(t, o) : t, i = e.length - 1, l; i >= 0; i--)
-    (l = e[i]) && (s = (a ? l(t, o, s) : l(s)) || s);
-  return a && s && _(t, o, s), s;
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, a, o) => {
+  for (var s = o > 1 ? void 0 : o ? w(t, a) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (s = (o ? l(t, a, s) : l(s)) || s);
+  return o && s && _(t, a, s), s;
 };
-let r = class extends m {
+let i = class extends m {
   constructor() {
     super(...arguments), this.open = !1, this.placeholder = "Type a command or search...", this.commands = [], this.value = "", this.emptyText = "No results found.", this.loading = !1, this._activeIndex = 0, this._focusTrap = new y();
   }
@@ -35,17 +35,17 @@ let r = class extends m {
     const e = this.value.toLowerCase().trim();
     return e ? this.commands.filter((t) => {
       if (t.disabled) return !1;
-      const o = t.label.toLowerCase(), a = (t.keywords || []).join(" ").toLowerCase();
-      return o.includes(e) || a.includes(e);
+      const a = t.label.toLowerCase(), o = (t.keywords || []).join(" ").toLowerCase();
+      return a.includes(e) || o.includes(e);
     }) : this.commands;
   }
   get _groupedCommands() {
     const e = this._filteredCommands, t = /* @__PURE__ */ new Map();
-    for (const o of e) {
-      const a = o.group || "";
-      t.has(a) || t.set(a, []), t.get(a).push(o);
+    for (const a of e) {
+      const o = a.group || "";
+      t.has(o) || t.set(o, []), t.get(o).push(a);
     }
-    return Array.from(t.entries()).map(([o, a]) => ({ group: o, items: a }));
+    return Array.from(t.entries()).map(([a, o]) => ({ group: a, items: o }));
   }
   _handleInput(e) {
     this.value = e.target.value, this._activeIndex = 0, this.dispatchEvent(new CustomEvent("cg-command-input", {
@@ -56,12 +56,12 @@ let r = class extends m {
   }
   _handleKeydown(e) {
     if (e.key === " ") return;
-    const { index: t, handled: o } = x(e, {
+    const { index: t, handled: a } = x(e, {
       items: this._filteredCommands,
       activeIndex: this._activeIndex,
-      onSelect: (a) => this._select(a)
+      onSelect: (o) => this._select(o)
     });
-    o && (e.preventDefault(), this._activeIndex = t);
+    a && (e.preventDefault(), this._activeIndex = t);
   }
   _select(e) {
     e.disabled || (this.dispatchEvent(new CustomEvent("cg-command-select", {
@@ -72,7 +72,7 @@ let r = class extends m {
   }
   render() {
     const e = this._groupedCommands, t = this._filteredCommands;
-    let o = -1;
+    let a = -1;
     return c`
       <div class="backdrop" @click=${() => this.open = !1}></div>
       <div
@@ -90,6 +90,7 @@ let r = class extends m {
             role="combobox"
             aria-expanded=${this.open ? "true" : "false"}
             aria-controls="command-list"
+            aria-activedescendant=${this.open && t.length ? `command-opt-${this._activeIndex}` : p}
             aria-autocomplete="list"
             placeholder=${this.placeholder}
             .value=${this.value}
@@ -97,7 +98,7 @@ let r = class extends m {
             @keydown=${this._handleKeydown}
           />
         </div>
-        <div class="list" id="command-list" role="listbox">
+        <div class="list" id="command-list" role="listbox" aria-label="Commands">
           ${this.loading ? c`
             <div class="loading" aria-busy="true">
               <cg-spinner size="sm"></cg-spinner>
@@ -107,26 +108,27 @@ let r = class extends m {
             <slot name="empty">
               <div class="empty">${this.emptyText}</div>
             </slot>
-          ` : e.map(({ group: a, items: s }) => c`
-            ${a ? c`<div class="group-label">${a}</div>` : p}
-            ${s.map((i) => {
-      o++;
-      const l = o === this._activeIndex;
+          ` : e.map(({ group: o, items: s }) => c`
+            ${o ? c`<div class="group-label">${o}</div>` : p}
+            ${s.map((r) => {
+      a++;
+      const l = a === this._activeIndex;
       return c`
                 <button
                   class="item"
+                  id=${`command-opt-${a}`}
                   role="option"
-                  ?disabled=${i.disabled}
+                  ?disabled=${r.disabled}
                   aria-selected=${l ? "true" : "false"}
                   data-active=${l ? "true" : p}
-                  @click=${() => this._select(i)}
+                  @click=${() => this._select(r)}
                   @mouseenter=${() => {
-        this._activeIndex = o;
+        this._activeIndex = a;
       }}
                 >
-                  ${i.icon ? c`<cg-icon class="item-icon" name=${i.icon} size="sm" aria-hidden="true"></cg-icon>` : p}
-                  <span class="item-label">${i.label}</span>
-                  ${i.shortcut ? c`<span class="shortcut">${i.shortcut}</span>` : p}
+                  ${r.icon ? c`<cg-icon class="item-icon" name=${r.icon} size="sm" aria-hidden="true"></cg-icon>` : p}
+                  <span class="item-label">${r.label}</span>
+                  ${r.shortcut ? c`<span class="shortcut">${r.shortcut}</span>` : p}
                 </button>
               `;
     })}
@@ -137,7 +139,7 @@ let r = class extends m {
     `;
   }
 };
-r.styles = [f, b, u`
+i.styles = [f, b, u`
     :host {
       display: contents;
     }
@@ -250,13 +252,18 @@ r.styles = [f, b, u`
         background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
         color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    /* Hover (mouse) AND data-active (keyboard) get the same treatment so both
-       input methods feel instant — no waiting for a state-driven re-render. */
+    /* Hover (mouse) AND data-active (keyboard) share the background so both
+       input methods feel instant. The keyboard-active row additionally gets
+       an accent left bar so the item Enter will trigger is unmistakable in a
+       palette (a faint gray fill alone was too easy to lose track of). */
     .item:hover:not([disabled]),
     .item[data-active]:not([disabled]) {
       background: var(--cg-color-action-tertiary-background-hover);
       color: var(--cg-color-surface-base-text);
     }
+    .item[data-active]:not([disabled]) {
+      box-shadow: inset var(--cg-spacing-2) 0 0 0 var(--cg-color-action-primary-background-default);
+    }
     .item:active:not([disabled]) {
       transform: scale(var(--cg-interaction-press-scale));
     }
@@ -305,35 +312,35 @@ r.styles = [f, b, u`
   `];
 n([
   d({ type: Boolean, reflect: !0 })
-], r.prototype, "open", 2);
+], i.prototype, "open", 2);
 n([
   d()
-], r.prototype, "placeholder", 2);
+], i.prototype, "placeholder", 2);
 n([
   d({ type: Array })
-], r.prototype, "commands", 2);
+], i.prototype, "commands", 2);
 n([
   d()
-], r.prototype, "value", 2);
+], i.prototype, "value", 2);
 n([
   d({ attribute: "empty-text" })
-], r.prototype, "emptyText", 2);
+], i.prototype, "emptyText", 2);
 n([
   d({ type: Boolean })
-], r.prototype, "loading", 2);
+], i.prototype, "loading", 2);
 n([
   v()
-], r.prototype, "_activeIndex", 2);
+], i.prototype, "_activeIndex", 2);
 n([
   g("input")
-], r.prototype, "_inputEl", 2);
+], i.prototype, "_inputEl", 2);
 n([
   g(".palette")
-], r.prototype, "_paletteEl", 2);
-r = n([
+], i.prototype, "_paletteEl", 2);
+i = n([
   h("cg-command")
-], r);
+], i);
 export {
-  r as CgCommand
+  i as CgCommand
 };
 //# sourceMappingURL=cg-command.js.map