@cognivo/components 0.8.0

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

@@ -0,0 +1,374 @@
+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";
+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);
+  return o && s && y(t, n, s), s;
+};
+let r = class extends g {
+  constructor() {
+    if (super(), this.options = [], this.value = "", this.multiple = !1, this.placeholder = "", this.searchable = !0, this.clearable = !1, this.disabled = !1, this.loading = !1, this.name = "", this.open = !1, this.error = !1, this.success = !1, this.size = "md", this.rounded = "lg", this._query = "", this._activeIndex = -1, this._internals = null, this._outsideHandler = (e) => {
+      this.open && (e.composedPath().includes(this) || (this.open = !1));
+    }, "attachInternals" in this)
+      try {
+        this._internals = this.attachInternals();
+      } catch {
+      }
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._outsideHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._outsideHandler);
+  }
+  updated(e) {
+    e.has("value") && this._updateFormValue();
+  }
+  _updateFormValue() {
+    if (!this._internals) return;
+    const e = Array.isArray(this.value) ? this.value.join(",") : this.value;
+    this._internals.setFormValue(e);
+  }
+  get _values() {
+    return this.multiple ? Array.isArray(this.value) ? this.value : [] : typeof this.value == "string" && this.value ? [this.value] : [];
+  }
+  _filteredOptions() {
+    if (!this._query || !this.searchable) return this.options;
+    const e = this._query.toLowerCase();
+    return this.options.filter((t) => t.label.toLowerCase().includes(e));
+  }
+  _selectOption(e) {
+    if (!e.disabled) {
+      if (this.multiple) {
+        const t = this._values, n = t.includes(e.value) ? t.filter((o) => o !== e.value) : [...t, e.value];
+        this.value = n;
+      } else
+        this.value = e.value, this.open = !1;
+      this._query = "", this.dispatchEvent(new CustomEvent("cg-combobox-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      }));
+    }
+  }
+  _removeChip(e) {
+    this.multiple && (this.value = this._values.filter((t) => t !== e), this.dispatchEvent(new CustomEvent("cg-combobox-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.value }
+    })));
+  }
+  _clear() {
+    this.value = this.multiple ? [] : "", this._query = "", this.dispatchEvent(new CustomEvent("cg-combobox-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.value }
+    }));
+  }
+  _onInput(e) {
+    this._query = e.target.value, this.open = !0, this._activeIndex = 0;
+  }
+  _onKeydown(e) {
+    const t = this._filteredOptions();
+    if (e.key === "Backspace" && !this._query && this.multiple && this._values.length) {
+      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);
+  }
+  _onWrapperClick() {
+    this.disabled || (this._input?.focus(), this.open = !0);
+  }
+  _labelFor(e) {
+    return this.options.find((t) => t.value === e)?.label ?? e;
+  }
+  render() {
+    const e = this._filteredOptions(), t = this._values, n = t.length > 0;
+    return c`
+      <div class="wrapper" @click=${this._onWrapperClick}>
+        ${this.multiple ? t.map((o) => c`
+              <span class="chip">
+                ${this._labelFor(o)}
+                <button class="chip-remove" aria-label="Remove" @click=${(s) => {
+      s.stopPropagation(), this._removeChip(o);
+    }}>×</button>
+              </span>
+            `) : p}
+        <input
+          type="text"
+          role="combobox"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-autocomplete="list"
+          aria-controls="combobox-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}
+          placeholder=${this.placeholder}
+          @input=${this._onInput}
+          @keydown=${this._onKeydown}
+          @focus=${() => {
+      this.open = !0;
+    }}
+        />
+        ${this.clearable && n ? c`
+          <button class="clear-btn" aria-label="Clear" @click=${(o) => {
+      o.stopPropagation(), this._clear();
+    }}>×</button>
+        ` : p}
+      </div>
+      <div
+        class="listbox"
+        id="combobox-listbox"
+        role="listbox"
+        aria-multiselectable=${this.multiple ? "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
+              class="option ${o.disabled ? "disabled" : ""} ${t.includes(o.value) ? "selected" : ""} ${s === this._activeIndex ? "active" : ""}"
+              id=${`combobox-opt-${s}`}
+              role="option"
+              aria-selected=${t.includes(o.value) ? "true" : "false"}
+              aria-disabled=${o.disabled ? "true" : "false"}
+              @click=${(l) => {
+      l.stopPropagation(), this._selectOption(o);
+    }}
+            >${o.label}</div>
+          `)}
+      </div>
+    `;
+  }
+};
+r.formAssociated = !0;
+r.styles = [f, m, h`
+    :host {
+      display: inline-block;
+      width: 100%;
+      max-width: 100%;
+      font-family: var(--cg-font-family-primary);
+    }
+
+    .wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-6);
+      min-height: var(--cg-component-input-height-md);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      background: var(--cg-color-input-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      color: var(--cg-color-input-text-default);
+      cursor: text;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    /* Size variants — match cg-input */
+    :host([size="lg"]) .wrapper { min-height: var(--cg-component-input-height-lg); }
+
+    /* Rounded variants — match cg-input */
+    :host([rounded="none"]) .wrapper { border-radius: 0; }
+    :host([rounded="sm"]) .wrapper { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .wrapper { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .wrapper { border-radius: var(--cg-component-input-radius); }
+
+    .wrapper:hover { border-color: var(--cg-color-input-border-hover); }
+    .wrapper:focus-within {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* Error state — match cg-input */
+    :host([error]) .wrapper {
+      border-color: var(--cg-color-input-border-error);
+    }
+    :host([error]) .wrapper:focus-within {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+
+    /* Success state — match cg-input */
+    :host([success]) .wrapper {
+      border-color: var(--cg-color-input-icon-success);
+    }
+    :host([success]) .wrapper:focus-within {
+      border-color: var(--cg-color-status-success-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
+
+    :host([disabled]) .wrapper {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+      background: var(--cg-color-input-background-disabled);
+      border-color: var(--cg-color-input-border-disabled);
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-4) var(--cg-spacing-4) var(--cg-spacing-4) var(--cg-spacing-8);
+      background: var(--cg-color-action-tertiary-background-hover);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      border-radius: var(--cg-border-radius-full);
+      animation: comboChipIn var(--cg-transition-duration-default) var(--cg-transition-easing-spring);
+    }
+    @keyframes comboChipIn {
+      from { opacity: 0; transform: scale(0.8); }
+      to { opacity: 1; transform: scale(1); }
+    }
+    .chip-remove {
+      background: none;
+      border: none;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+      padding: 0;
+      font-size: var(--cg-font-size-sm);
+      line-height: 1;
+    }
+
+    input {
+      flex: 1;
+      min-width: var(--cg-spacing-80);
+      background: transparent;
+      border: none;
+      outline: none;
+      color: inherit;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+    }
+    input::placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    .clear-btn {
+      background: none;
+      border: none;
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      padding: var(--cg-spacing-2);
+      font-size: var(--cg-font-size-sm);
+      line-height: 1;
+    }
+
+    .listbox {
+      position: absolute;
+      top: calc(100% + var(--cg-spacing-6));
+      left: 0;
+      right: 0;
+      z-index: var(--cg-z-index-500);
+      max-height: var(--cg-component-combobox-listbox-max-height);
+      overflow-y: auto;
+      padding: var(--cg-spacing-6);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border-radius: var(--cg-component-card-radius);
+      box-shadow: var(--cg-shadow-elevation-xl);
+      display: none;
+      opacity: 0;
+      transform: translateY(calc(var(--cg-spacing-4) * -1));
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    :host([open]) .listbox {
+      display: block;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .option {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-50);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-text);
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .option:hover,
+    .option.active {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .option.disabled { opacity: 0.5; cursor: not-allowed; }
+    .option.selected { font-weight: var(--cg-font-weight-medium); }
+    .option.selected::after {
+      content: '✓';
+      color: var(--cg-color-accent-text);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    .empty {
+      padding: var(--cg-spacing-16);
+      text-align: center;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+  `];
+a([
+  i({ type: Array })
+], r.prototype, "options", 2);
+a([
+  i()
+], r.prototype, "value", 2);
+a([
+  i({ type: Boolean })
+], r.prototype, "multiple", 2);
+a([
+  i()
+], r.prototype, "placeholder", 2);
+a([
+  i({ type: Boolean })
+], r.prototype, "searchable", 2);
+a([
+  i({ type: Boolean })
+], r.prototype, "clearable", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+a([
+  i({ type: Boolean })
+], r.prototype, "loading", 2);
+a([
+  i()
+], r.prototype, "name", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "success", 2);
+a([
+  i({ reflect: !0 })
+], r.prototype, "size", 2);
+a([
+  i({ reflect: !0 })
+], r.prototype, "rounded", 2);
+a([
+  u()
+], r.prototype, "_query", 2);
+a([
+  u()
+], r.prototype, "_activeIndex", 2);
+a([
+  v("input")
+], r.prototype, "_input", 2);
+r = a([
+  b("cg-combobox")
+], r);
+export {
+  r as CgCombobox
+};
+//# sourceMappingURL=cg-combobox.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,65 @@
+import { LitElement } from 'lit';
+export interface CommandItem {
+    id: string;
+    label: string;
+    group?: string;
+    icon?: string;
+    shortcut?: string;
+    keywords?: string[];
+    disabled?: boolean;
+}
+/**
+ * @element cg-command
+ * Searchable command palette foundation. Combobox pattern with grouped items,
+ * keyboard navigation, and type-ahead filtering.
+ *
+ * @example
+ * ```html
+ * <cg-command
+ *   open
+ *   placeholder="Type a command..."
+ *   .commands=${[
+ *     { id: 'new', label: 'New file', group: 'File', shortcut: '⌘N' },
+ *     { id: 'open', label: 'Open file', group: 'File', shortcut: '⌘O' },
+ *   ]}
+ * ></cg-command>
+ * ```
+ *
+ * @slot header - Content above the input
+ * @slot footer - Content below the list
+ * @slot empty - Custom empty state
+ *
+ * @fires {CustomEvent<{id: string, command: CommandItem}>} cg-command-select
+ * @fires {CustomEvent<{value: string}>} cg-command-input
+ * @fires {CustomEvent} cg-command-open
+ * @fires {CustomEvent} cg-command-close
+ */
+export declare class CgCommand extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    placeholder: string;
+    commands: CommandItem[];
+    value: string;
+    emptyText: string;
+    loading: boolean;
+    private _activeIndex;
+    private _inputEl;
+    private _paletteEl;
+    private _focusTrap;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _onOpen;
+    private _onClose;
+    private get _filteredCommands();
+    private get _groupedCommands();
+    private _handleInput;
+    private _handleKeydown;
+    private _select;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-command': CgCommand;
+    }
+}
+//# sourceMappingURL=cg-command.d.ts.map

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

@@ -0,0 +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"}