@cognivo/components 0.8.0

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

@@ -0,0 +1,425 @@
+import { css as g, LitElement as h, nothing as o, html as l } from "lit";
+import { property as r, state as u, query as f, customElement as v } from "lit/decorators.js";
+import { h as b, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, t = (a, s, i, c) => {
+  for (var n = c > 1 ? void 0 : c ? x(s, i) : s, d = a.length - 1, p; d >= 0; d--)
+    (p = a[d]) && (n = (c ? p(s, i, n) : p(n)) || n);
+  return c && n && y(s, i, n), n;
+};
+let e = class extends h {
+  constructor() {
+    super(), this.label = "", this.value = "", this.placeholder = "", this.name = "", this.helper = "", this.type = "text", this.size = "md", this.rounded = "lg", this.disabled = !1, this.readonly = !1, this.error = !1, this.success = !1, this.loading = !1, this.required = !1, this.clearable = !1, this.maxlength = 0, this.autocomplete = "off", this._focused = !1, this._hasPrefix = !1, this._hasSuffix = !1, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  updated(a) {
+    super.updated(a), a.has("value") && this._internals?.setFormValue(this.value), (a.has("required") || a.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(a) {
+    this.value = a;
+  }
+  get _isFloated() {
+    return this._focused || !!this.value;
+  }
+  _handleInput(a) {
+    const s = a.target;
+    this.value = s.value, this.dispatchEvent(new CustomEvent("cg-input", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+  }
+  _handleFocus() {
+    this._focused = !0;
+  }
+  _handleBlur() {
+    this._focused = !1;
+  }
+  _handleClear() {
+    this.value = "", this._input.value = "", this._input.focus(), this.dispatchEvent(new CustomEvent("cg-input", { detail: { value: "" }, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("cg-clear", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    const a = [
+      "wrapper",
+      this._focused ? "focused" : "",
+      this.disabled ? "disabled" : "",
+      this.readonly ? "readonly" : ""
+    ].filter(Boolean).join(" "), s = ["field", this._isFloated ? "floated" : ""].filter(Boolean).join(" ");
+    return l`
+      <div class=${a}>
+        <span class="prefix ${this._hasPrefix ? "has-content" : ""}">
+          <slot name="prefix" @slotchange=${(i) => {
+      this._hasPrefix = i.target.assignedNodes().length > 0;
+    }}></slot>
+        </span>
+
+        <div class=${s}>
+          ${this.label ? l`<span class="floating-label">${this.label}</span>` : o}
+          <input
+            .value=${this.value}
+            type=${this.type}
+            name=${this.name || o}
+            placeholder=${this.placeholder || (this.label ? " " : o)}
+            ?disabled=${this.disabled || this.loading}
+            ?readonly=${this.readonly}
+            maxlength=${this.maxlength || o}
+            autocomplete=${this.autocomplete}
+            aria-invalid=${this.error ? "true" : "false"}
+            aria-busy=${this.loading ? "true" : "false"}
+            aria-required=${this.required ? "true" : "false"}
+            aria-label=${this.label || o}
+            aria-describedby=${this.helper ? "helper" : o}
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+          />
+        </div>
+
+        ${this.loading ? l`<span class="loading-spinner" aria-hidden="true"></span>` : o}
+        ${this.clearable && this.value && !this.loading ? l`
+          <button class="clear" @click=${this._handleClear} aria-label="Clear input" tabindex="-1">
+            <cg-icon name="x" size="xs"></cg-icon>
+          </button>
+        ` : o}
+        ${this.maxlength ? l`<span class="count">${this.value.length}/${this.maxlength}</span>` : o}
+        <span class="suffix ${this._hasSuffix ? "has-content" : ""}">
+          <slot name="suffix" @slotchange=${(i) => {
+      this._hasSuffix = i.target.assignedNodes().length > 0;
+    }}></slot>
+        </span>
+      </div>
+      ${this.helper ? l`<div class="helper" id="helper">${this.helper}</div>` : o}
+    `;
+  }
+};
+e.formAssociated = !0;
+e.styles = [b, m, g`
+    :host { display: block; }
+
+    .wrapper {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      padding: 0 var(--cg-spacing-4);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      background: var(--cg-color-input-background-default);
+      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);
+      height: var(--cg-component-input-height-md);
+      position: relative;
+    }
+
+    /* Size variants */
+    :host([size="lg"]) .wrapper { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-4); border-radius: var(--cg-border-radius-150); }
+
+    /* Rounded variants */
+    :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); }
+
+    /* Hover */
+    .wrapper:hover:not(.disabled):not(.readonly) {
+      border-color: var(--cg-color-input-border-hover);
+    }
+
+    /* Active / Press — no scale transform on text inputs */
+
+    /* Loading */
+    :host([loading]) .wrapper {
+      position: relative;
+      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-input-spin 600ms linear infinite;
+      flex-shrink: 0;
+    }
+    @keyframes cg-input-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Focus — border change + subtle glow */
+    .wrapper.focused {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* Error */
+    :host([error]) .wrapper {
+      border-color: var(--cg-color-input-border-error);
+    }
+    :host([error]) .wrapper.focused {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+
+    /* Success */
+    :host([success]) .wrapper {
+      border-color: var(--cg-color-input-icon-success);
+    }
+    :host([success]) .wrapper.focused {
+      border-color: var(--cg-color-status-success-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
+
+    /* Disabled */
+    .wrapper.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+      background: var(--cg-color-input-background-disabled);
+      border-color: var(--cg-color-input-border-disabled);
+    }
+
+    /* Readonly */
+    .wrapper.readonly {
+      background: var(--cg-color-surface-field-readonly-background);
+      border-style: dashed;
+    }
+
+    /* ── Input field area ── */
+    .field {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      min-height: 100%;
+      padding: 0 var(--cg-spacing-8);
+    }
+
+    input {
+      width: 100%;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-default);
+      min-width: 0;
+      padding: var(--cg-spacing-8) 0;
+      z-index: 1;
+    }
+    :host([size="lg"]) input { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-12) 0; }
+
+    /* When floating label is active, shift input down to make room */
+    :host([label]) input {
+      padding-top: var(--cg-spacing-20);
+      padding-bottom: var(--cg-spacing-2);
+    }
+    :host([label][size="lg"]) input {
+      padding-top: var(--cg-spacing-24);
+      padding-bottom: var(--cg-spacing-4);
+    }
+
+    input::placeholder {
+      color: transparent;
+    }
+    /* Show placeholder only when label is floated (focused or has value) */
+    .field.floated input::placeholder {
+      color: var(--cg-color-input-text-placeholder);
+      transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+
+    input:disabled { cursor: not-allowed; }
+
+    /* ── Floating label ── */
+    .floating-label {
+      position: absolute;
+      left: var(--cg-spacing-8);
+      right: var(--cg-spacing-8);
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+      pointer-events: none;
+      transform-origin: left top;
+      transition:
+        top var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        font-size var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      z-index: 2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    :host([size="lg"]) .floating-label { font-size: var(--cg-font-size-base); }
+
+    /* Floated state — label shrinks and moves to top */
+    .field.floated .floating-label {
+      top: var(--cg-spacing-6);
+      transform: translateY(0);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-text);
+    }
+    :host([size="lg"]) .field.floated .floating-label {
+      top: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    /* Error state label color */
+    :host([error]) .field.floated .floating-label {
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    /* Success state label color */
+    :host([success]) .field.floated .floating-label {
+      color: var(--cg-color-status-success-text-default);
+    }
+
+    /* Disabled label */
+    .wrapper.disabled .floating-label {
+      color: var(--cg-color-input-text-disabled);
+    }
+
+    /* ── Slots — hidden by default, shown when content is slotted ── */
+    .prefix, .suffix {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      color: var(--cg-color-input-icon-default);
+      flex-shrink: 0;
+      width: var(--cg-spacing-40);
+      align-self: stretch;
+      background: var(--cg-overlay-dark-subtle);
+    }
+    .prefix.has-content, .suffix.has-content {
+      display: flex;
+    }
+    .prefix {
+      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);
+      margin-left: calc(-1 * var(--cg-spacing-4));
+    }
+    .suffix {
+      border-left: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: 0 var(--cg-component-input-radius) var(--cg-component-input-radius) 0;
+      margin-right: calc(-1 * var(--cg-spacing-4));
+    }
+
+    /* ── Clear button ── */
+    .clear {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      border: none;
+      background: var(--cg-overlay-dark-subtle);
+      color: var(--cg-color-input-text-placeholder);
+      border-radius: var(--cg-border-radius-full);
+      cursor: pointer;
+      padding: 0;
+      flex-shrink: 0;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      opacity: 0;
+      transform: scale(0.8);
+      animation: clearIn 150ms var(--cg-transition-easing-ease-out) forwards;
+    }
+    .clear:hover { background: var(--cg-overlay-accent-subtle); color: var(--cg-color-surface-base-text); }
+    .clear:active { transform: scale(0.9); }
+    .clear svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+
+    @keyframes clearIn {
+      from { opacity: 0; transform: scale(0.8); }
+      to { opacity: 1; transform: scale(1); }
+    }
+
+    /* ── Character count ── */
+    .count {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+      font-variant-numeric: tabular-nums;
+      transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    :host([error]) .count { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Helper text ── */
+    .helper {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12) 0;
+    }
+    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }
+    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }
+  `];
+t([
+  r({ reflect: !0 })
+], e.prototype, "label", 2);
+t([
+  r()
+], e.prototype, "value", 2);
+t([
+  r()
+], e.prototype, "placeholder", 2);
+t([
+  r()
+], e.prototype, "name", 2);
+t([
+  r()
+], e.prototype, "helper", 2);
+t([
+  r({ reflect: !0 })
+], e.prototype, "type", 2);
+t([
+  r({ reflect: !0 })
+], e.prototype, "size", 2);
+t([
+  r({ reflect: !0 })
+], e.prototype, "rounded", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  r({ type: Boolean })
+], e.prototype, "readonly", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "error", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "success", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+t([
+  r({ type: Boolean })
+], e.prototype, "required", 2);
+t([
+  r({ type: Boolean })
+], e.prototype, "clearable", 2);
+t([
+  r({ type: Number })
+], e.prototype, "maxlength", 2);
+t([
+  r()
+], e.prototype, "autocomplete", 2);
+t([
+  u()
+], e.prototype, "_focused", 2);
+t([
+  u()
+], e.prototype, "_hasPrefix", 2);
+t([
+  u()
+], e.prototype, "_hasSuffix", 2);
+t([
+  f("input")
+], e.prototype, "_input", 2);
+e = t([
+  v("cg-input")
+], e);
+export {
+  e as CgInput
+};
+//# sourceMappingURL=cg-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-input.js","sources":["../../../src/components/cg-input/cg-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-input\n * Text input with floating label, prefix/suffix slots, clear button, and validation states.\n *\n * @example\n * ```html\n * <cg-input label=\"Email\" type=\"email\" placeholder=\"you@example.com\"></cg-input>\n * <cg-input label=\"Search\" clearable><span slot=\"prefix\">[search icon]</span></cg-input>\n * <cg-input label=\"Bio\" maxlength=\"200\" error helper=\"Too long\"></cg-input>\n * ```\n *\n * @slot prefix - Icon or content before the input field\n * @slot suffix - Icon or content after the input field\n *\n * @fires {CustomEvent<{value: string}>} cg-input - On every input change\n * @fires {CustomEvent} cg-clear - When the clear button is clicked\n *\n * @cssprop [--cg-color-input-border-default=#3f3f46] - Default border color\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Focus ring and floating label color\n * @cssprop [--cg-component-input-height-md=44px] - Input height (md size)\n * @cssprop [--cg-color-input-background-default=#18181b] - Input background\n */\n@customElement('cg-input')\nexport class CgInput 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 { display: block; }\n\n    .wrapper {\n      display: flex;\n      align-items: center;\n      gap: 0;\n      padding: 0 var(--cg-spacing-4);\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      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      height: var(--cg-component-input-height-md);\n      position: relative;\n    }\n\n    /* Size variants */\n    :host([size=\"lg\"]) .wrapper { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-4); border-radius: var(--cg-border-radius-150); }\n\n    /* Rounded variants */\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    /* Hover */\n    .wrapper:hover:not(.disabled):not(.readonly) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n\n    /* Active / Press — no scale transform on text inputs */\n\n    /* Loading */\n    :host([loading]) .wrapper {\n      position: relative;\n      pointer-events: none;\n      opacity: 0.7;\n    }\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-input-spin 600ms linear infinite;\n      flex-shrink: 0;\n    }\n    @keyframes cg-input-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* Focus — border change + subtle glow */\n    .wrapper.focused {\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 */\n    :host([error]) .wrapper {\n      border-color: var(--cg-color-input-border-error);\n    }\n    :host([error]) .wrapper.focused {\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 */\n    :host([success]) .wrapper {\n      border-color: var(--cg-color-input-icon-success);\n    }\n    :host([success]) .wrapper.focused {\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    /* Disabled */\n    .wrapper.disabled {\n      opacity: 0.5;\n      pointer-events: none;\n      background: var(--cg-color-input-background-disabled);\n      border-color: var(--cg-color-input-border-disabled);\n    }\n\n    /* Readonly */\n    .wrapper.readonly {\n      background: var(--cg-color-surface-field-readonly-background);\n      border-style: dashed;\n    }\n\n    /* ── Input field area ── */\n    .field {\n      flex: 1;\n      position: relative;\n      display: flex;\n      align-items: center;\n      min-width: 0;\n      min-height: 100%;\n      padding: 0 var(--cg-spacing-8);\n    }\n\n    input {\n      width: 100%;\n      border: none;\n      outline: none;\n      background: transparent;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-default);\n      min-width: 0;\n      padding: var(--cg-spacing-8) 0;\n      z-index: 1;\n    }\n    :host([size=\"lg\"]) input { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-12) 0; }\n\n    /* When floating label is active, shift input down to make room */\n    :host([label]) input {\n      padding-top: var(--cg-spacing-20);\n      padding-bottom: var(--cg-spacing-2);\n    }\n    :host([label][size=\"lg\"]) input {\n      padding-top: var(--cg-spacing-24);\n      padding-bottom: var(--cg-spacing-4);\n    }\n\n    input::placeholder {\n      color: transparent;\n    }\n    /* Show placeholder only when label is floated (focused or has value) */\n    .field.floated input::placeholder {\n      color: var(--cg-color-input-text-placeholder);\n      transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    input:disabled { cursor: not-allowed; }\n\n    /* ── Floating label ── */\n    .floating-label {\n      position: absolute;\n      left: var(--cg-spacing-8);\n      right: var(--cg-spacing-8);\n      top: 50%;\n      transform: translateY(-50%);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      pointer-events: none;\n      transform-origin: left top;\n      transition:\n        top var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        font-size var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      z-index: 2;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    :host([size=\"lg\"]) .floating-label { font-size: var(--cg-font-size-base); }\n\n    /* Floated state — label shrinks and moves to top */\n    .field.floated .floating-label {\n      top: var(--cg-spacing-6);\n      transform: translateY(0);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-text);\n    }\n    :host([size=\"lg\"]) .field.floated .floating-label {\n      top: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    /* Error state label color */\n    :host([error]) .field.floated .floating-label {\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    /* Success state label color */\n    :host([success]) .field.floated .floating-label {\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    /* Disabled label */\n    .wrapper.disabled .floating-label {\n      color: var(--cg-color-input-text-disabled);\n    }\n\n    /* ── Slots — hidden by default, shown when content is slotted ── */\n    .prefix, .suffix {\n      display: none;\n      align-items: center;\n      justify-content: center;\n      color: var(--cg-color-input-icon-default);\n      flex-shrink: 0;\n      width: var(--cg-spacing-40);\n      align-self: stretch;\n      background: var(--cg-overlay-dark-subtle);\n    }\n    .prefix.has-content, .suffix.has-content {\n      display: flex;\n    }\n    .prefix {\n      border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);\n      margin-left: calc(-1 * var(--cg-spacing-4));\n    }\n    .suffix {\n      border-left: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: 0 var(--cg-component-input-radius) var(--cg-component-input-radius) 0;\n      margin-right: calc(-1 * var(--cg-spacing-4));\n    }\n\n    /* ── Clear button ── */\n    .clear {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border: none;\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-input-text-placeholder);\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      padding: 0;\n      flex-shrink: 0;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      opacity: 0;\n      transform: scale(0.8);\n      animation: clearIn 150ms var(--cg-transition-easing-ease-out) forwards;\n    }\n    .clear:hover { background: var(--cg-overlay-accent-subtle); color: var(--cg-color-surface-base-text); }\n    .clear:active { transform: scale(0.9); }\n    .clear svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n    @keyframes clearIn {\n      from { opacity: 0; transform: scale(0.8); }\n      to { opacity: 1; transform: scale(1); }\n    }\n\n    /* ── Character count ── */\n    .count {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n      font-variant-numeric: tabular-nums;\n      transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([error]) .count { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Helper text ── */\n    .helper {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12) 0;\n    }\n    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }\n  `];\n\n  @property({ reflect: true }) label = '';\n  @property() value = '';\n  @property() placeholder = '';\n  @property() name = '';\n  @property() helper = '';\n  @property({ reflect: true }) type: 'text' | 'email' | 'password' | 'number' | 'url' | 'search' | 'tel' = 'text';\n  @property({ reflect: true }) size: 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean }) readonly = 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 }) required = false;\n  @property({ type: Boolean }) clearable = false;\n  @property({ type: Number }) maxlength = 0;\n  @property() autocomplete = 'off';\n\n  @state() private _focused = false;\n  @state() private _hasPrefix = false;\n  @state() private _hasSuffix = false;\n\n  @query('input') private _input!: HTMLInputElement;\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  private get _isFloated() {\n    return this._focused || !!this.value;\n  }\n\n  private _handleInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.value = input.value;\n    this.dispatchEvent(new CustomEvent('cg-input', { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  private _handleFocus() { this._focused = true; }\n  private _handleBlur() { this._focused = false; }\n\n  private _handleClear() {\n    this.value = '';\n    this._input.value = '';\n    this._input.focus();\n    this.dispatchEvent(new CustomEvent('cg-input', { detail: { value: '' }, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent('cg-clear', { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    const wrapperClasses = [\n      'wrapper',\n      this._focused ? 'focused' : '',\n      this.disabled ? 'disabled' : '',\n      this.readonly ? 'readonly' : '',\n    ].filter(Boolean).join(' ');\n\n    const fieldClasses = ['field', this._isFloated ? 'floated' : ''].filter(Boolean).join(' ');\n\n    return html`\n      <div class=${wrapperClasses}>\n        <span class=\"prefix ${this._hasPrefix ? 'has-content' : ''}\">\n          <slot name=\"prefix\" @slotchange=${(e: Event) => { this._hasPrefix = (e.target as HTMLSlotElement).assignedNodes().length > 0; }}></slot>\n        </span>\n\n        <div class=${fieldClasses}>\n          ${this.label ? html`<span class=\"floating-label\">${this.label}</span>` : nothing}\n          <input\n            .value=${this.value}\n            type=${this.type}\n            name=${this.name || nothing}\n            placeholder=${this.placeholder || (this.label ? ' ' : nothing)}\n            ?disabled=${this.disabled || this.loading}\n            ?readonly=${this.readonly}\n            maxlength=${this.maxlength || nothing}\n            autocomplete=${this.autocomplete}\n            aria-invalid=${this.error ? 'true' : 'false'}\n            aria-busy=${this.loading ? 'true' : 'false'}\n            aria-required=${this.required ? 'true' : 'false'}\n            aria-label=${this.label || nothing}\n            aria-describedby=${this.helper ? 'helper' : nothing}\n            @input=${this._handleInput}\n            @focus=${this._handleFocus}\n            @blur=${this._handleBlur}\n          />\n        </div>\n\n        ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : nothing}\n        ${this.clearable && this.value && !this.loading ? html`\n          <button class=\"clear\" @click=${this._handleClear} aria-label=\"Clear input\" tabindex=\"-1\">\n            <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n          </button>\n        ` : nothing}\n        ${this.maxlength ? html`<span class=\"count\">${this.value.length}/${this.maxlength}</span>` : nothing}\n        <span class=\"suffix ${this._hasSuffix ? 'has-content' : ''}\">\n          <slot name=\"suffix\" @slotchange=${(e: Event) => { this._hasSuffix = (e.target as HTMLSlotElement).assignedNodes().length > 0; }}></slot>\n        </span>\n      </div>\n      ${this.helper ? html`<div class=\"helper\" id=\"helper\">${this.helper}</div>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-input': CgInput;\n  }\n}\n"],"names":["CgInput","LitElement","changed","state","e","input","wrapperClasses","fieldClasses","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-kanban
+ * Horizontal scrollable board hosting `<cg-kanban-column>` children.
+ * Listens for cross-column card drops bubbling up from columns and
+ * re-emits them as `cg-kanban-card-move` with both source and target
+ * column IDs — the parent only needs to listen on the kanban itself.
+ *
+ * The board is layout-only; consumers own the card model. Drag/drop
+ * machinery lives inside cg-kanban-column (cg-droppable + cg-sortable).
+ *
+ * @example
+ * ```html
+ * <cg-kanban @cg-kanban-card-move=${onMove}>
+ *   <cg-kanban-column column-id="todo" label="Todo">
+ *     <cg-draggable type="card" .payload=${cardA}><cg-card>...</cg-card></cg-draggable>
+ *   </cg-kanban-column>
+ *   <cg-kanban-column column-id="doing" label="Doing">…</cg-kanban-column>
+ *   <cg-kanban-column column-id="done" label="Done">…</cg-kanban-column>
+ * </cg-kanban>
+ * ```
+ *
+ * @slot - cg-kanban-column children.
+ *
+ * @fires {CustomEvent<{from: string, to: string, payload: unknown}>} cg-kanban-card-move - A card was dragged from one column to another. `from` is the source column-id; `to` is the target column-id.
+ *
+ * @cssprop --cg-component-kanban-gap - Gap between columns (default 16px)
+ * @cssprop --cg-component-kanban-padding - Padding around the column row (default 16px)
+ */
+export declare class CgKanban extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Disable card drops across all columns. (Each column's own `disabled` still works.) */
+    disabled: boolean;
+    private _onDrop;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-kanban': CgKanban;
+    }
+}
+//# sourceMappingURL=cg-kanban.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-kanban.d.ts","sourceRoot":"","sources":["../../../src/components/cg-kanban/cg-kanban.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,yCAAyC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAmBnB;IAEH,yFAAyF;IAC7C,QAAQ,UAAS;IAE7D,OAAO,CAAC,OAAO,CAoDb;IAEO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,86 @@
+import { css as m, LitElement as u, html as f } from "lit";
+import { property as b, customElement as g } from "lit/decorators.js";
+import { h, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-kanban-column/cg-kanban-column.js";
+var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, p = (s, r, t, o) => {
+  for (var e = o > 1 ? void 0 : o ? C(r, t) : r, n = s.length - 1, a; n >= 0; n--)
+    (a = s[n]) && (e = (o ? a(r, t, e) : a(e)) || e);
+  return o && e && y(r, t, e), e;
+};
+let l = class extends u {
+  constructor() {
+    super(...arguments), this.disabled = !1, this._onDrop = (s) => {
+      const r = s, t = r.detail;
+      if (!t || !t.source) return;
+      let o = t.source, e = null;
+      for (; o; ) {
+        if (o instanceof HTMLElement && o.tagName.toLowerCase() === "cg-kanban-column") {
+          e = o;
+          break;
+        }
+        o = o.parentNode;
+      }
+      let n = null;
+      const a = typeof r.composedPath == "function" ? r.composedPath() : [];
+      for (const c of a)
+        if (c instanceof HTMLElement && c.tagName.toLowerCase() === "cg-kanban-column") {
+          n = c;
+          break;
+        }
+      if (!e || !n) return;
+      const i = e.getAttribute("column-id") ?? "", d = n.getAttribute("column-id") ?? "";
+      i !== d && (t.source && n !== e && n.appendChild(t.source), this.dispatchEvent(new CustomEvent("cg-kanban-card-move", {
+        detail: {
+          from: i,
+          to: d,
+          payload: t.payload
+        },
+        bubbles: !0,
+        composed: !0
+      })));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("cg-drop", this._onDrop);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("cg-drop", this._onDrop);
+  }
+  render() {
+    return f`
+      <div class="board" role="list" aria-label="Kanban board">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+l.styles = [h, v, m`
+    :host {
+      display: block;
+      width: 100%;
+      overflow: hidden;
+    }
+    .board {
+      display: flex;
+      flex-direction: row;
+      gap: var(--cg-component-kanban-gap, var(--cg-spacing-16));
+      padding: var(--cg-component-kanban-padding, var(--cg-spacing-16));
+      overflow-x: auto;
+      overflow-y: hidden;
+      align-items: flex-start;
+      scroll-snap-type: x proximity;
+    }
+    .board ::slotted(cg-kanban-column) {
+      scroll-snap-align: start;
+    }
+  `];
+p([
+  b({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+l = p([
+  g("cg-kanban")
+], l);
+export {
+  l as CgKanban
+};
+//# sourceMappingURL=cg-kanban.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-kanban.js","sources":["../../../src/components/cg-kanban/cg-kanban.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-kanban-column/cg-kanban-column.js';\n\n/**\n * @element cg-kanban\n * Horizontal scrollable board hosting `<cg-kanban-column>` children.\n * Listens for cross-column card drops bubbling up from columns and\n * re-emits them as `cg-kanban-card-move` with both source and target\n * column IDs — the parent only needs to listen on the kanban itself.\n *\n * The board is layout-only; consumers own the card model. Drag/drop\n * machinery lives inside cg-kanban-column (cg-droppable + cg-sortable).\n *\n * @example\n * ```html\n * <cg-kanban @cg-kanban-card-move=${onMove}>\n *   <cg-kanban-column column-id=\"todo\" label=\"Todo\">\n *     <cg-draggable type=\"card\" .payload=${cardA}><cg-card>...</cg-card></cg-draggable>\n *   </cg-kanban-column>\n *   <cg-kanban-column column-id=\"doing\" label=\"Doing\">…</cg-kanban-column>\n *   <cg-kanban-column column-id=\"done\" label=\"Done\">…</cg-kanban-column>\n * </cg-kanban>\n * ```\n *\n * @slot - cg-kanban-column children.\n *\n * @fires {CustomEvent<{from: string, to: string, payload: unknown}>} cg-kanban-card-move - A card was dragged from one column to another. `from` is the source column-id; `to` is the target column-id.\n *\n * @cssprop --cg-component-kanban-gap - Gap between columns (default 16px)\n * @cssprop --cg-component-kanban-padding - Padding around the column row (default 16px)\n */\n@customElement('cg-kanban')\nexport class CgKanban extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      width: 100%;\n      overflow: hidden;\n    }\n    .board {\n      display: flex;\n      flex-direction: row;\n      gap: var(--cg-component-kanban-gap, var(--cg-spacing-16));\n      padding: var(--cg-component-kanban-padding, var(--cg-spacing-16));\n      overflow-x: auto;\n      overflow-y: hidden;\n      align-items: flex-start;\n      scroll-snap-type: x proximity;\n    }\n    .board ::slotted(cg-kanban-column) {\n      scroll-snap-align: start;\n    }\n  `];\n\n  /** Disable card drops across all columns. (Each column's own `disabled` still works.) */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private _onDrop = (e: Event): void => {\n    const ce = e as CustomEvent<{ payload: unknown; source?: HTMLElement }>;\n    const detail = ce.detail;\n    if (!detail || !detail.source) return;\n\n    // Walk up from the source draggable to find the originating column.\n    // Source is in light DOM so parentNode traversal works.\n    let cursor: Node | null = detail.source;\n    let fromColumn: HTMLElement | null = null;\n    while (cursor) {\n      if (cursor instanceof HTMLElement && cursor.tagName.toLowerCase() === 'cg-kanban-column') {\n        fromColumn = cursor;\n        break;\n      }\n      cursor = (cursor as Node).parentNode;\n    }\n\n    // Find the target column by walking composedPath — the cg-droppable\n    // that fired lives inside the column's shadow DOM, so parentNode walks\n    // can't cross to the host. composedPath gives us the full propagation\n    // path including shadow hosts.\n    let toColumn: HTMLElement | null = null;\n    const path = typeof ce.composedPath === 'function' ? ce.composedPath() : [];\n    for (const node of path) {\n      if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'cg-kanban-column') {\n        toColumn = node;\n        break;\n      }\n    }\n\n    if (!fromColumn || !toColumn) return;\n\n    const fromId = fromColumn.getAttribute('column-id') ?? '';\n    const toId = toColumn.getAttribute('column-id') ?? '';\n    if (fromId === toId) return; // intra-column reorder is handled by cg-sortable\n\n    // Reparent the dragged element into the target column. Without this,\n    // the card snaps back when the source's transform clears in the\n    // cg-draggable cleanup path.\n    if (detail.source && toColumn !== fromColumn) {\n      toColumn.appendChild(detail.source);\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-kanban-card-move', {\n      detail: {\n        from: fromId,\n        to: toId,\n        payload: detail.payload,\n      },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('cg-drop', this._onDrop);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('cg-drop', this._onDrop);\n  }\n\n  override render() {\n    return html`\n      <div class=\"board\" role=\"list\" aria-label=\"Kanban board\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-kanban': CgKanban;\n  }\n}\n"],"names":["CgKanban","LitElement","e","ce","detail","cursor","fromColumn","toColumn","path","node","fromId","toId","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AAkCO,IAAMA,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAuBuC,KAAA,WAAW,IAEvD,KAAQ,UAAU,CAACC,MAAmB;AACpC,YAAMC,IAAKD,GACLE,IAASD,EAAG;AAClB,UAAI,CAACC,KAAU,CAACA,EAAO,OAAQ;AAI/B,UAAIC,IAAsBD,EAAO,QAC7BE,IAAiC;AACrC,aAAOD,KAAQ;AACb,YAAIA,aAAkB,eAAeA,EAAO,QAAQ,YAAA,MAAkB,oBAAoB;AACxF,UAAAC,IAAaD;AACb;AAAA,QACF;AACA,QAAAA,IAAUA,EAAgB;AAAA,MAC5B;AAMA,UAAIE,IAA+B;AACnC,YAAMC,IAAO,OAAOL,EAAG,gBAAiB,aAAaA,EAAG,aAAA,IAAiB,CAAA;AACzE,iBAAWM,KAAQD;AACjB,YAAIC,aAAgB,eAAeA,EAAK,QAAQ,YAAA,MAAkB,oBAAoB;AACpF,UAAAF,IAAWE;AACX;AAAA,QACF;AAGF,UAAI,CAACH,KAAc,CAACC,EAAU;AAE9B,YAAMG,IAASJ,EAAW,aAAa,WAAW,KAAK,IACjDK,IAAOJ,EAAS,aAAa,WAAW,KAAK;AACnD,MAAIG,MAAWC,MAKXP,EAAO,UAAUG,MAAaD,KAChCC,EAAS,YAAYH,EAAO,MAAM,GAGpC,KAAK,cAAc,IAAI,YAAY,uBAAuB;AAAA,QACxD,QAAQ;AAAA,UACN,MAAMM;AAAA,UACN,IAAIC;AAAA,UACJ,SAASP,EAAO;AAAA,QAAA;AAAA,QAElB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX,CAAC;AAAA,IACJ;AAAA,EAAA;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,WAAW,KAAK,OAAO;AAAA,EAC/C;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,WAAW,KAAK,OAAO;AAAA,EAClD;AAAA,EAES,SAAS;AAChB,WAAOQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAhGaZ,EACK,SAAS,CAACa,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBnD;AAG2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvB/BjB,EAuBiC,WAAA,YAAA,CAAA;AAvBjCA,IAANgB,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACblB,CAAA;"}