@cognivo/components 0.8.0

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

@@ -0,0 +1,302 @@
+import { css as p, LitElement as u, nothing as g, html as n } from "lit";
+import { property as a, state as h, customElement as v } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (e, i, o, c) => {
+  for (var s = c > 1 ? void 0 : c ? y(i, o) : i, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (s = (c ? l(i, o, s) : l(s)) || s);
+  return c && s && m(i, o, s), s;
+};
+let r = class extends u {
+  constructor() {
+    super(), this.size = "md", this.rounded = "lg", this.options = [], this.value = "", this.label = "", this.placeholder = "Select...", this.name = "", this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.searchable = !1, this.required = !1, this._open = !1, this._search = "", this._highlighted = -1, this._handleClickOutside = (e) => {
+      e.composedPath().includes(this) || this._close();
+    }, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  updated(e) {
+    super.updated(e), e.has("value") && this._internals?.setFormValue(this.value), (e.has("required") || e.has("value")) && (this.required && !this.value ? this._internals?.setValidity({ valueMissing: !0 }, "This field is required") : this._internals?.setValidity({}));
+  }
+  formResetCallback() {
+    this.value = this.getAttribute("value") ?? "";
+  }
+  formStateRestoreCallback(e) {
+    this.value = e;
+  }
+  _toggle() {
+    this.disabled || this.loading || (this._open = !this._open, this._search = "", this._highlighted = -1);
+  }
+  _close() {
+    this._open = !1, this._search = "";
+  }
+  _select(e) {
+    e.disabled || (this.value = e.value, this._close(), this.dispatchEvent(new CustomEvent("cg-change", { detail: { value: e.value, label: e.label }, bubbles: !0, composed: !0 })));
+  }
+  _filteredOptions() {
+    if (!this._search) return this.options;
+    const e = this._search.toLowerCase();
+    return this.options.filter((i) => i.label.toLowerCase().includes(e));
+  }
+  _handleKeydown(e) {
+    const i = this._filteredOptions();
+    if (e.key === "Escape") {
+      this._close();
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      if (!this._open) {
+        this._toggle(), e.preventDefault();
+        return;
+      }
+      this._highlighted >= 0 && this._highlighted < i.length && (this._select(i[this._highlighted]), e.preventDefault());
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      if (e.preventDefault(), !this._open) {
+        this._open = !0;
+        return;
+      }
+      this._highlighted = Math.min(this._highlighted + 1, i.length - 1);
+    }
+    e.key === "ArrowUp" && (e.preventDefault(), this._highlighted = Math.max(this._highlighted - 1, 0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.removeEventListener("click", this._handleClickOutside), document.addEventListener("click", this._handleClickOutside);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleClickOutside);
+  }
+  render() {
+    const e = this.options.find((o) => o.value === this.value), i = this._filteredOptions();
+    return n`
+      ${this.label ? n`<span class="label">${this.label}</span>` : g}
+      <div
+        class="trigger ${this._open ? "open" : ""} ${this.disabled ? "disabled" : ""}"
+        tabindex=${this.disabled ? "-1" : "0"}
+        role="combobox"
+        aria-expanded=${this._open}
+        aria-haspopup="listbox"
+        aria-required=${this.required ? "true" : "false"}
+        aria-busy=${this.loading ? "true" : "false"}
+        @click=${this._toggle}
+        @keydown=${this._handleKeydown}
+      >
+        <span class="trigger-text ${e ? "" : "placeholder"}">
+          ${e ? e.label : this.placeholder}
+        </span>
+        ${this.loading ? n`<span class="loading-spinner" aria-hidden="true"></span>` : n`
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M6 9l6 6 6-6"></path>
+        </svg>`}
+      </div>
+
+      <div class="dropdown ${this._open ? "open" : ""}" ?hidden=${!this._open} role="listbox">
+        ${this.searchable ? n`
+          <div class="search">
+            <input
+              placeholder="Search..."
+              .value=${this._search}
+              @input=${(o) => {
+      this._search = o.target.value, this._highlighted = 0;
+    }}
+              @click=${(o) => o.stopPropagation()}
+            />
+          </div>
+        ` : g}
+        ${i.length === 0 ? n`<div class="empty-msg">No options</div>` : g}
+        ${i.map((o, c) => n`
+          <div
+            class="option ${o.value === this.value ? "selected" : ""} ${c === this._highlighted ? "highlighted" : ""} ${o.disabled ? "disabled" : ""}"
+            role="option"
+            aria-selected=${o.value === this.value}
+            @click=${(s) => {
+      s.stopPropagation(), this._select(o);
+    }}
+          >
+            <span>${o.label}</span>
+            <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+};
+r.formAssociated = !0;
+r.styles = [f, b, p`
+    :host { position: relative; display: block; }
+
+    .trigger {
+      display: flex; align-items: center; justify-content: space-between;
+      width: 100%; box-sizing: border-box;
+      padding: 0 var(--cg-spacing-12); gap: var(--cg-spacing-8);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-select-radius);
+      background: var(--cg-color-input-background-default);
+      font: inherit; font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-default);
+      cursor: pointer; height: var(--cg-component-select-height-md);
+      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), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      outline: none;
+    }
+    .trigger:hover:not(.disabled) { border-color: var(--cg-color-input-border-hover); }
+    .trigger:active:not(.disabled) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .trigger:focus-visible { outline: none; border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+
+    /* Loading */
+    :host([loading]) .trigger { pointer-events: none; opacity: 0.7; }
+    .loading-spinner {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);
+      border-top-color: var(--cg-color-loading-spinner-primary);
+      border-radius: var(--cg-border-radius-full);
+      animation: cg-select-spin var(--cg-transition-duration-slow) linear infinite;
+      flex-shrink: 0;
+    }
+    @keyframes cg-select-spin {
+      to { transform: rotate(360deg); }
+    }
+    .trigger.open { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .trigger.disabled { opacity: 0.5; pointer-events: none; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }
+    :host([error]) .trigger { border-color: var(--cg-color-input-border-error); }
+    :host([error]) .trigger:focus-visible,
+    :host([error]) .trigger.open {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+    :host([success]) .trigger { border-color: var(--cg-color-status-success-border-default); }
+    :host([success]) .trigger:focus-visible,
+    :host([success]) .trigger.open {
+      border-color: var(--cg-color-status-success-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
+
+    .trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .placeholder { color: var(--cg-color-input-text-placeholder); }
+    .chevron { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default); color: var(--cg-color-surface-container-outlined); }
+    .trigger.open .chevron { transform: rotate(180deg); }
+
+    .dropdown {
+      position: absolute; top: 100%; left: 0; right: 0; z-index: var(--cg-z-index-200);
+      margin-top: var(--cg-spacing-4); padding: var(--cg-spacing-6);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      max-height: 240px; overflow-y: auto;
+      opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98); pointer-events: none;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .dropdown.open {
+      opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
+    }
+    .dropdown[hidden] { display: none; }
+
+    .option {
+      padding: var(--cg-spacing-8) var(--cg-spacing-12); border-radius: var(--cg-border-radius-150); cursor: pointer;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: flex; align-items: center; gap: var(--cg-spacing-8);
+    }
+    .option:hover { background: var(--cg-overlay-dark-subtle); }
+    .option.highlighted { background: var(--cg-overlay-dark-subtle); }
+    .option.selected { color: var(--cg-color-action-primary-background-default); font-weight: var(--cg-font-weight-medium); }
+    .option.disabled { opacity: 0.5; pointer-events: none; }
+    .option .check {
+      width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0;
+      margin-left: auto; opacity: 0;
+      color: var(--cg-color-action-primary-background-default);
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .option.selected .check { opacity: 1; }
+
+    .search { padding: 0; margin-bottom: var(--cg-spacing-4); }
+    .search input {
+      width: 100%; box-sizing: border-box;
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      border-radius: var(--cg-border-radius-100);
+      font: inherit; font-size: var(--cg-font-size-sm); outline: none;
+      background: transparent; color: var(--cg-color-input-text-default);
+    }
+    .search input::placeholder { color: var(--cg-color-input-text-placeholder); }
+    .search input:focus { border-color: var(--cg-color-input-border-focus); }
+
+    .empty-msg { padding: var(--cg-spacing-12); text-align: center; color: var(--cg-color-input-text-placeholder); font-size: var(--cg-font-size-sm); }
+
+    .label { display: block; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-container-outlined); margin-bottom: var(--cg-spacing-4); }
+
+    /* Size variants */
+    :host([size="sm"]) .trigger { height: var(--cg-component-input-height-sm); font-size: var(--cg-font-size-xs); padding: 0 var(--cg-spacing-8); border-radius: var(--cg-border-radius-100); }
+    :host([size="sm"]) .option { font-size: var(--cg-font-size-xs); }
+
+    :host([size="lg"]) .trigger { height: var(--cg-component-input-height-lg); font-size: var(--cg-font-size-base); padding: 0 var(--cg-spacing-16); border-radius: var(--cg-border-radius-150); }
+    :host([size="lg"]) .option { font-size: var(--cg-font-size-base); }
+
+    /* ── Rounded overrides ── */
+    :host([rounded="none"]) .trigger { border-radius: 0; }
+    :host([rounded="none"]) .dropdown { border-radius: 0; }
+    :host([rounded="sm"]) .trigger { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="sm"]) .dropdown { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .trigger { border-radius: var(--cg-component-select-radius); }
+    :host([rounded="md"]) .dropdown { border-radius: var(--cg-component-select-radius); }
+    :host([rounded="lg"]) .trigger { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="lg"]) .dropdown { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .trigger { border-radius: var(--cg-border-radius-full); }
+    :host([rounded="full"]) .dropdown { border-radius: var(--cg-border-radius-full); }
+  `];
+t([
+  a({ reflect: !0 })
+], r.prototype, "size", 2);
+t([
+  a({ reflect: !0 })
+], r.prototype, "rounded", 2);
+t([
+  a({ type: Array })
+], r.prototype, "options", 2);
+t([
+  a()
+], r.prototype, "value", 2);
+t([
+  a()
+], r.prototype, "label", 2);
+t([
+  a()
+], r.prototype, "placeholder", 2);
+t([
+  a()
+], r.prototype, "name", 2);
+t([
+  a({ type: Boolean })
+], r.prototype, "disabled", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "success", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
+t([
+  a({ type: Boolean })
+], r.prototype, "searchable", 2);
+t([
+  a({ type: Boolean })
+], r.prototype, "required", 2);
+t([
+  h()
+], r.prototype, "_open", 2);
+t([
+  h()
+], r.prototype, "_search", 2);
+t([
+  h()
+], r.prototype, "_highlighted", 2);
+r = t([
+  v("cg-select")
+], r);
+export {
+  r as CgSelect
+};
+//# sourceMappingURL=cg-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-select.js","sources":["../../../src/components/cg-select/cg-select.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-select\n * Dropdown select with optional search filtering and keyboard navigation.\n *\n * @example\n * ```html\n * <cg-select\n *   placeholder=\"Choose a fruit\"\n *   .options=${[{value:'apple',label:'Apple'},{value:'banana',label:'Banana'}]}\n * ></cg-select>\n * <cg-select searchable error .options=${items}></cg-select>\n * ```\n *\n * @fires {CustomEvent<{value: string, label: string}>} cg-change - When a selection is made\n *\n * @cssprop [--cg-color-input-background-default=#18181b] - Trigger background\n * @cssprop [--cg-color-surface-container-background=#18181b] - Dropdown panel background\n * @cssprop [--cg-color-focus-ring] - Focus/hover border accent\n * @cssprop [--cg-border-radius-150=12px] - Border radius for trigger and dropdown\n */\n\n/** Option entry for cg-select, with value, display label, and optional disabled state. */\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\n@customElement('cg-select')\nexport class CgSelect extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { position: relative; display: block; }\n\n    .trigger {\n      display: flex; align-items: center; justify-content: space-between;\n      width: 100%; box-sizing: border-box;\n      padding: 0 var(--cg-spacing-12); gap: var(--cg-spacing-8);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-select-radius);\n      background: var(--cg-color-input-background-default);\n      font: inherit; font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-default);\n      cursor: pointer; height: var(--cg-component-select-height-md);\n      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), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      outline: none;\n    }\n    .trigger:hover:not(.disabled) { border-color: var(--cg-color-input-border-hover); }\n    .trigger:active:not(.disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .trigger:focus-visible { outline: none; border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n\n    /* Loading */\n    :host([loading]) .trigger { pointer-events: none; opacity: 0.7; }\n    .loading-spinner {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-select-spin var(--cg-transition-duration-slow) linear infinite;\n      flex-shrink: 0;\n    }\n    @keyframes cg-select-spin {\n      to { transform: rotate(360deg); }\n    }\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    :host([error]) .trigger { border-color: var(--cg-color-input-border-error); }\n    :host([error]) .trigger:focus-visible,\n    :host([error]) .trigger.open {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n    :host([success]) .trigger { border-color: var(--cg-color-status-success-border-default); }\n    :host([success]) .trigger:focus-visible,\n    :host([success]) .trigger.open {\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    .trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .placeholder { color: var(--cg-color-input-text-placeholder); }\n    .chevron { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0; transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-default); color: var(--cg-color-surface-container-outlined); }\n    .trigger.open .chevron { transform: rotate(180deg); }\n\n    .dropdown {\n      position: absolute; top: 100%; left: 0; right: 0; z-index: var(--cg-z-index-200);\n      margin-top: var(--cg-spacing-4); padding: var(--cg-spacing-6);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      max-height: 240px; overflow-y: auto;\n      opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-4))) scale(0.98); pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dropdown.open {\n      opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;\n    }\n    .dropdown[hidden] { display: none; }\n\n    .option {\n      padding: var(--cg-spacing-8) var(--cg-spacing-12); border-radius: var(--cg-border-radius-150); cursor: pointer;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n    }\n    .option:hover { background: var(--cg-overlay-dark-subtle); }\n    .option.highlighted { background: var(--cg-overlay-dark-subtle); }\n    .option.selected { color: var(--cg-color-action-primary-background-default); font-weight: var(--cg-font-weight-medium); }\n    .option.disabled { opacity: 0.5; pointer-events: none; }\n    .option .check {\n      width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); flex-shrink: 0;\n      margin-left: auto; opacity: 0;\n      color: var(--cg-color-action-primary-background-default);\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .option.selected .check { opacity: 1; }\n\n    .search { padding: 0; margin-bottom: var(--cg-spacing-4); }\n    .search input {\n      width: 100%; box-sizing: border-box;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      border-radius: var(--cg-border-radius-100);\n      font: inherit; font-size: var(--cg-font-size-sm); outline: none;\n      background: transparent; color: var(--cg-color-input-text-default);\n    }\n    .search input::placeholder { color: var(--cg-color-input-text-placeholder); }\n    .search input:focus { border-color: var(--cg-color-input-border-focus); }\n\n    .empty-msg { padding: var(--cg-spacing-12); text-align: center; color: var(--cg-color-input-text-placeholder); font-size: var(--cg-font-size-sm); }\n\n    .label { display: block; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-container-outlined); margin-bottom: var(--cg-spacing-4); }\n\n    /* Size variants */\n    :host([size=\"sm\"]) .trigger { height: var(--cg-component-input-height-sm); font-size: var(--cg-font-size-xs); padding: 0 var(--cg-spacing-8); border-radius: var(--cg-border-radius-100); }\n    :host([size=\"sm\"]) .option { font-size: var(--cg-font-size-xs); }\n\n    :host([size=\"lg\"]) .trigger { height: var(--cg-component-input-height-lg); font-size: var(--cg-font-size-base); padding: 0 var(--cg-spacing-16); border-radius: var(--cg-border-radius-150); }\n    :host([size=\"lg\"]) .option { font-size: var(--cg-font-size-base); }\n\n    /* ── Rounded overrides ── */\n    :host([rounded=\"none\"]) .trigger { border-radius: 0; }\n    :host([rounded=\"none\"]) .dropdown { border-radius: 0; }\n    :host([rounded=\"sm\"]) .trigger { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"sm\"]) .dropdown { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .trigger { border-radius: var(--cg-component-select-radius); }\n    :host([rounded=\"md\"]) .dropdown { border-radius: var(--cg-component-select-radius); }\n    :host([rounded=\"lg\"]) .trigger { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"lg\"]) .dropdown { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .trigger { border-radius: var(--cg-border-radius-full); }\n    :host([rounded=\"full\"]) .dropdown { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) options: SelectOption[] = [];\n  @property() value = '';\n  @property() label = '';\n  @property() placeholder = 'Select...';\n  @property() name = '';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean }) searchable = false;\n  @property({ type: Boolean }) required = false;\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value);\n    }\n    if (changed.has('required') || changed.has('value')) {\n      if (this.required && !this.value) {\n        this._internals?.setValidity({ valueMissing: true }, 'This field is required');\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  formResetCallback() {\n    this.value = this.getAttribute('value') ?? '';\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.value = state;\n  }\n\n  @state() private _open = false;\n  @state() private _search = '';\n  @state() private _highlighted = -1;\n\n  private _toggle() {\n    if (this.disabled || this.loading) return;\n    this._open = !this._open;\n    this._search = '';\n    this._highlighted = -1;\n  }\n\n  private _close() { this._open = false; this._search = ''; }\n\n  private _select(opt: SelectOption) {\n    if (opt.disabled) return;\n    this.value = opt.value;\n    this._close();\n    this.dispatchEvent(new CustomEvent('cg-change', { detail: { value: opt.value, label: opt.label }, bubbles: true, composed: true }));\n  }\n\n  private _filteredOptions() {\n    if (!this._search) return this.options;\n    const q = this._search.toLowerCase();\n    return this.options.filter(o => o.label.toLowerCase().includes(q));\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    const filtered = this._filteredOptions();\n    if (e.key === 'Escape') { this._close(); return; }\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (!this._open) { this._toggle(); e.preventDefault(); return; }\n      if (this._highlighted >= 0 && this._highlighted < filtered.length) {\n        this._select(filtered[this._highlighted]!);\n        e.preventDefault();\n      }\n      return;\n    }\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      if (!this._open) { this._open = true; return; }\n      this._highlighted = Math.min(this._highlighted + 1, filtered.length - 1);\n    }\n    if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._highlighted = Math.max(this._highlighted - 1, 0);\n    }\n  }\n\n  private _handleClickOutside = (e: Event) => {\n    if (!e.composedPath().includes(this)) this._close();\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 selected = this.options.find(o => o.value === this.value);\n    const filtered = this._filteredOptions();\n\n    return html`\n      ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n      <div\n        class=\"trigger ${this._open ? 'open' : ''} ${this.disabled ? 'disabled' : ''}\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"combobox\"\n        aria-expanded=${this._open}\n        aria-haspopup=\"listbox\"\n        aria-required=${this.required ? 'true' : 'false'}\n        aria-busy=${this.loading ? 'true' : 'false'}\n        @click=${this._toggle}\n        @keydown=${this._handleKeydown}\n      >\n        <span class=\"trigger-text ${!selected ? 'placeholder' : ''}\">\n          ${selected ? selected.label : this.placeholder}\n        </span>\n        ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : html`\n        <svg class=\"chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M6 9l6 6 6-6\"></path>\n        </svg>`}\n      </div>\n\n      <div class=\"dropdown ${this._open ? 'open' : ''}\" ?hidden=${!this._open} role=\"listbox\">\n        ${this.searchable ? html`\n          <div class=\"search\">\n            <input\n              placeholder=\"Search...\"\n              .value=${this._search}\n              @input=${(e: Event) => { this._search = (e.target as HTMLInputElement).value; this._highlighted = 0; }}\n              @click=${(e: Event) => e.stopPropagation()}\n            />\n          </div>\n        ` : nothing}\n        ${filtered.length === 0 ? html`<div class=\"empty-msg\">No options</div>` : nothing}\n        ${filtered.map((opt, i) => html`\n          <div\n            class=\"option ${opt.value === this.value ? 'selected' : ''} ${i === this._highlighted ? 'highlighted' : ''} ${opt.disabled ? 'disabled' : ''}\"\n            role=\"option\"\n            aria-selected=${opt.value === this.value}\n            @click=${(e: Event) => { e.stopPropagation(); this._select(opt); }}\n          >\n            <span>${opt.label}</span>\n            <svg class=\"check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"></path></svg>\n          </div>\n        `)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-select': CgSelect; }\n}\n"],"names":["CgSelect","LitElement","changed","state","opt","q","o","filtered","selected","html","nothing","e","i","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-separator> — Visual divider, horizontal or vertical.
+ *
+ * Features beyond OpenUI's Separator:
+ * - Label slot (text in the middle of the line)
+ * - Vertical orientation
+ * - Semantic spacing variants
+ */
+export declare class CgSeparator extends LitElement {
+    static styles: import('lit').CSSResult[];
+    variant: 'solid' | 'gradient';
+    orientation: 'horizontal' | 'vertical';
+    spacing: 'none' | 'sm' | 'md' | 'lg';
+    label: string;
+    render(): import('lit').TemplateResult<1>;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-separator': CgSeparator;
+    }
+}
+//# sourceMappingURL=cg-separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-separator.d.ts","sourceRoot":"","sources":["../../../src/components/cg-separator/cg-separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;GAOG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BA2DnB;IAE0B,OAAO,EAAE,OAAO,GAAG,UAAU,CAAW;IACxC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACtD,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAU;IAC/D,KAAK,SAAM;IAEd,MAAM;IAWN,iBAAiB;IAQjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;CAW/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

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

@@ -0,0 +1,105 @@
+import { css as p, LitElement as h, html as g } from "lit";
+import { property as o, customElement as d } from "lit/decorators.js";
+import { h as v, r as u } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (e, a, s, n) => {
+  for (var t = n > 1 ? void 0 : n ? f(a, s) : a, c = e.length - 1, l; c >= 0; c--)
+    (l = e[c]) && (t = (n ? l(a, s, t) : l(t)) || t);
+  return n && t && m(a, s, t), t;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "solid", this.orientation = "horizontal", this.spacing = "none", this.label = "";
+  }
+  render() {
+    return this.label ? g`
+        <div class="line" role="presentation" aria-hidden="true"></div>
+        <span class="label">${this.label}</span>
+        <div class="line" role="presentation" aria-hidden="true"></div>
+      ` : g`<div class="line" role="separator" aria-orientation="${this.orientation}"></div>`;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.label && (this.setAttribute("role", "separator"), this.setAttribute("aria-orientation", this.orientation));
+  }
+  updated(e) {
+    (e.has("label") || e.has("orientation")) && (this.label ? (this.setAttribute("role", "separator"), this.setAttribute("aria-orientation", this.orientation)) : (this.removeAttribute("role"), this.removeAttribute("aria-orientation")));
+  }
+};
+r.styles = [v, u, p`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+    }
+
+    :host([orientation="horizontal"]) {
+      flex-direction: row;
+      width: 100%;
+    }
+
+    :host([orientation="vertical"]) {
+      flex-direction: column;
+      height: 100%;
+      width: auto;
+    }
+
+    .line {
+      flex: 1;
+      background: var(--cg-color-surface-base-divider);
+    }
+
+    /* Gradient variant — fades at edges */
+    :host([variant="gradient"]) .line {
+      background: linear-gradient(to right, transparent, var(--cg-color-surface-base-divider) 20%, var(--cg-color-surface-base-divider) 80%, transparent);
+    }
+
+    :host([orientation="horizontal"]) .line {
+      height: var(--cg-border-width-50);
+      min-width: var(--cg-spacing-16);
+    }
+
+    :host([orientation="vertical"]) .line {
+      width: var(--cg-border-width-50);
+      min-height: var(--cg-spacing-16);
+    }
+    :host([variant="gradient"][orientation="vertical"]) .line {
+      background: linear-gradient(to bottom, transparent, var(--cg-color-surface-base-divider) 20%, var(--cg-color-surface-base-divider) 80%, transparent);
+    }
+
+    /* Spacing variants */
+    :host([spacing="none"]) { margin: 0; }
+    :host([spacing="sm"]) { margin: var(--cg-spacing-8) 0; }
+    :host([spacing="md"]) { margin: var(--cg-spacing-16) 0; }
+    :host([spacing="lg"]) { margin: var(--cg-spacing-24) 0; }
+
+    :host([orientation="vertical"][spacing="sm"]) { margin: 0 var(--cg-spacing-8); }
+    :host([orientation="vertical"][spacing="md"]) { margin: 0 var(--cg-spacing-16); }
+    :host([orientation="vertical"][spacing="lg"]) { margin: 0 var(--cg-spacing-24); }
+
+    .label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-outlined);
+      white-space: nowrap;
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+  `];
+i([
+  o({ reflect: !0 })
+], r.prototype, "variant", 2);
+i([
+  o({ reflect: !0 })
+], r.prototype, "orientation", 2);
+i([
+  o({ reflect: !0 })
+], r.prototype, "spacing", 2);
+i([
+  o()
+], r.prototype, "label", 2);
+r = i([
+  d("cg-separator")
+], r);
+export {
+  r as CgSeparator
+};
+//# sourceMappingURL=cg-separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-separator.js","sources":["../../../src/components/cg-separator/cg-separator.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-separator> — Visual divider, horizontal or vertical.\n *\n * Features beyond OpenUI's Separator:\n * - Label slot (text in the middle of the line)\n * - Vertical orientation\n * - Semantic spacing variants\n */\n@customElement('cg-separator')\nexport class CgSeparator extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n    }\n\n    :host([orientation=\"horizontal\"]) {\n      flex-direction: row;\n      width: 100%;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      flex-direction: column;\n      height: 100%;\n      width: auto;\n    }\n\n    .line {\n      flex: 1;\n      background: var(--cg-color-surface-base-divider);\n    }\n\n    /* Gradient variant — fades at edges */\n    :host([variant=\"gradient\"]) .line {\n      background: linear-gradient(to right, transparent, var(--cg-color-surface-base-divider) 20%, var(--cg-color-surface-base-divider) 80%, transparent);\n    }\n\n    :host([orientation=\"horizontal\"]) .line {\n      height: var(--cg-border-width-50);\n      min-width: var(--cg-spacing-16);\n    }\n\n    :host([orientation=\"vertical\"]) .line {\n      width: var(--cg-border-width-50);\n      min-height: var(--cg-spacing-16);\n    }\n    :host([variant=\"gradient\"][orientation=\"vertical\"]) .line {\n      background: linear-gradient(to bottom, transparent, var(--cg-color-surface-base-divider) 20%, var(--cg-color-surface-base-divider) 80%, transparent);\n    }\n\n    /* Spacing variants */\n    :host([spacing=\"none\"]) { margin: 0; }\n    :host([spacing=\"sm\"]) { margin: var(--cg-spacing-8) 0; }\n    :host([spacing=\"md\"]) { margin: var(--cg-spacing-16) 0; }\n    :host([spacing=\"lg\"]) { margin: var(--cg-spacing-24) 0; }\n\n    :host([orientation=\"vertical\"][spacing=\"sm\"]) { margin: 0 var(--cg-spacing-8); }\n    :host([orientation=\"vertical\"][spacing=\"md\"]) { margin: 0 var(--cg-spacing-16); }\n    :host([orientation=\"vertical\"][spacing=\"lg\"]) { margin: 0 var(--cg-spacing-24); }\n\n    .label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      white-space: nowrap;\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n  `];\n\n  @property({ reflect: true }) variant: 'solid' | 'gradient' = 'solid';\n  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n  @property({ reflect: true }) spacing: 'none' | 'sm' | 'md' | 'lg' = 'none';\n  @property() label = '';\n\n  override render() {\n    if (this.label) {\n      return html`\n        <div class=\"line\" role=\"presentation\" aria-hidden=\"true\"></div>\n        <span class=\"label\">${this.label}</span>\n        <div class=\"line\" role=\"presentation\" aria-hidden=\"true\"></div>\n      `;\n    }\n    return html`<div class=\"line\" role=\"separator\" aria-orientation=\"${this.orientation}\"></div>`;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.label) {\n      this.setAttribute('role', 'separator');\n      this.setAttribute('aria-orientation', this.orientation);\n    }\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('label') || changed.has('orientation')) {\n      if (this.label) {\n        this.setAttribute('role', 'separator');\n        this.setAttribute('aria-orientation', this.orientation);\n      } else {\n        this.removeAttribute('role');\n        this.removeAttribute('aria-orientation');\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-separator': CgSeparator;\n  }\n}\n"],"names":["CgSeparator","LitElement","html","changed","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAaO,IAAMA,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8DwB,KAAA,UAAgC,SAChC,KAAA,cAAyC,cACzC,KAAA,UAAuC,QACxD,KAAA,QAAQ;AAAA,EAAA;AAAA,EAEX,SAAS;AAChB,WAAI,KAAK,QACAC;AAAA;AAAA,8BAEiB,KAAK,KAAK;AAAA;AAAA,UAI7BA,yDAA4D,KAAK,WAAW;AAAA,EACrF;AAAA,EAES,oBAAoB;AAC3B,UAAM,kBAAA,GACF,KAAK,UACP,KAAK,aAAa,QAAQ,WAAW,GACrC,KAAK,aAAa,oBAAoB,KAAK,WAAW;AAAA,EAE1D;AAAA,EAES,QAAQC,GAA+B;AAC9C,KAAIA,EAAQ,IAAI,OAAO,KAAKA,EAAQ,IAAI,aAAa,OAC/C,KAAK,SACP,KAAK,aAAa,QAAQ,WAAW,GACrC,KAAK,aAAa,oBAAoB,KAAK,WAAW,MAEtD,KAAK,gBAAgB,MAAM,GAC3B,KAAK,gBAAgB,kBAAkB;AAAA,EAG7C;AACF;AAjGaH,EACK,SAAS,CAACI,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,GA2DnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA9DhBR,EA8DkB,WAAA,WAAA,CAAA;AACAO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA/DhBR,EA+DkB,WAAA,eAAA,CAAA;AACAO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhEhBR,EAgEkB,WAAA,WAAA,CAAA;AACjBO,EAAA;AAAA,EAAXC,EAAA;AAAS,GAjECR,EAiEC,WAAA,SAAA,CAAA;AAjEDA,IAANO,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBT,CAAA;"}

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-sheet
+ * Mobile-first drawer variant with optional snap points and drag-to-dismiss.
+ *
+ * @slot - Default slot for sheet body content.
+ *
+ * @fires {CustomEvent} cg-sheet-open
+ * @fires {CustomEvent} cg-sheet-close
+ * @fires {CustomEvent<{index:number,value:number}>} cg-sheet-snap
+ */
+export declare class CgSheet extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    label: string;
+    side: 'bottom' | 'right' | 'left' | 'top';
+    snapPoints: number[];
+    activeSnap: number;
+    dismissible: boolean;
+    private _dragOffset;
+    private _focusTrap;
+    private _dragStart;
+    private _dragging;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _onOpen;
+    private _onClose;
+    private _handleBackdrop;
+    private _onDragStart;
+    private _onDragMove;
+    private _onDragEnd;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-sheet': CgSheet;
+    }
+}
+//# sourceMappingURL=cg-sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-sheet.d.ts","sourceRoot":"","sources":["../../../src/components/cg-sheet/cg-sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;GASG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BA+FnB;IAEyC,IAAI,UAAS;IAC7C,KAAK,SAAW;IACC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAY;IACvD,UAAU,EAAE,MAAM,EAAE,CAAM;IACzB,UAAU,SAAK;IACd,WAAW,UAAQ;IAEvC,OAAO,CAAC,WAAW,CAAK;IAEjC,OAAO,CAAC,UAAU,CAAmB;IACrC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,SAAS,CAAS;IAEjB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOrD,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,UAAU;IAcT,MAAM;CA0ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}