@cognivo/components 0.8.0

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

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-text> — Semantic typography component.
+ *
+ * Features beyond OpenUI's TextContent:
+ * - Renders proper semantic HTML (h1-h6, p, span) based on `as` prop
+ * - Truncation with ellipsis
+ * - Line clamping
+ * - All weights and colors via tokens
+ */
+export declare class CgText extends LitElement {
+    static styles: import('lit').CSSResult[];
+    text: string;
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    weight: 'normal' | 'medium' | 'semibold' | 'bold';
+    color: 'default' | 'secondary' | 'muted' | 'accent' | 'success' | 'warning' | 'danger' | 'inherit';
+    align: 'left' | 'center' | 'right';
+    as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+    truncate: boolean;
+    inline: boolean;
+    clamp: number;
+    updated(changed: Map<string, unknown>): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-text': CgText;
+    }
+}
+//# sourceMappingURL=cg-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-text.d.ts","sourceRoot":"","sources":["../../../src/components/cg-text/cg-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;GAQG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAsDnB;IAES,IAAI,SAAM;IACO,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAQ;IACtE,MAAM,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAY;IAC7D,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAa;IAC/G,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAU;IAC5C,EAAE,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,CAAO;IAClD,QAAQ,UAAS;IACjB,MAAM,UAAS;IAC/B,KAAK,SAAK;IAE7B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAgBrC,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

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

@@ -0,0 +1,126 @@
+import { css as g, LitElement as f, html as r } from "lit";
+import { property as i, customElement as p } from "lit/decorators.js";
+import { h as u, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, o = (t, l, n, h) => {
+  for (var s = h > 1 ? void 0 : h ? d(l, n) : l, c = t.length - 1, a; c >= 0; c--)
+    (a = t[c]) && (s = (h ? a(l, n, s) : a(s)) || s);
+  return h && s && v(l, n, s), s;
+};
+let e = class extends f {
+  constructor() {
+    super(...arguments), this.text = "", this.size = "md", this.weight = "normal", this.color = "default", this.align = "left", this.as = "p", this.truncate = !1, this.inline = !1, this.clamp = 0;
+  }
+  updated(t) {
+    t.has("clamp") && (this.clamp > 0 ? (this.style.display = "-webkit-box", this.style.setProperty("-webkit-line-clamp", String(this.clamp)), this.style.setProperty("-webkit-box-orient", "vertical"), this.style.overflow = "hidden") : (this.style.display = this.inline ? "inline" : "block", this.style.removeProperty("-webkit-line-clamp"), this.style.removeProperty("-webkit-box-orient"), this.style.overflow = ""));
+  }
+  render() {
+    const t = this.text || r`<slot></slot>`;
+    switch (this.as) {
+      case "h1":
+        return r`<h1>${t}</h1>`;
+      case "h2":
+        return r`<h2>${t}</h2>`;
+      case "h3":
+        return r`<h3>${t}</h3>`;
+      case "h4":
+        return r`<h4>${t}</h4>`;
+      case "h5":
+        return r`<h5>${t}</h5>`;
+      case "h6":
+        return r`<h6>${t}</h6>`;
+      case "span":
+        return r`<span>${t}</span>`;
+      default:
+        return r`<p>${t}</p>`;
+    }
+  }
+};
+e.styles = [u, m, g`
+    :host {
+      line-height: var(--cg-line-height-normal);
+      color: var(--cg-color-surface-base-text);
+      margin: 0;
+    }
+
+    :host([inline]) { display: inline; }
+
+    /* Sizes */
+    :host([size="xs"]) { font-size: var(--cg-font-size-xs); line-height: var(--cg-line-height-snug); }
+    :host([size="sm"]) { font-size: var(--cg-font-size-sm); line-height: var(--cg-line-height-snug); }
+    :host([size="md"]) { font-size: var(--cg-font-size-md); }
+    :host([size="lg"]) { font-size: var(--cg-font-size-lg); }
+    :host([size="xl"]) { font-size: var(--cg-font-size-xl); line-height: var(--cg-line-height-snug); }
+    :host([size="2xl"]) { font-size: var(--cg-font-size-2xl); line-height: var(--cg-line-height-tight); }
+    :host([size="3xl"]) { font-size: var(--cg-font-size-3xl); line-height: var(--cg-line-height-tight); }
+    :host([size="4xl"]) { font-size: var(--cg-font-size-4xl); line-height: var(--cg-line-height-tight); letter-spacing: var(--cg-letter-spacing-tight); }
+
+    /* Weights */
+    :host([weight="normal"]) { font-weight: var(--cg-font-weight-normal); }
+    :host([weight="medium"]) { font-weight: var(--cg-font-weight-medium); }
+    :host([weight="semibold"]) { font-weight: var(--cg-font-weight-semibold); }
+    :host([weight="bold"]) { font-weight: var(--cg-font-weight-bold); }
+
+    /* Colors — 3-level text hierarchy: default → secondary → muted */
+    :host([color="default"]) { color: var(--cg-color-surface-base-text); }
+    :host([color="secondary"]) { color: var(--cg-color-surface-container-text); }
+    :host([color="muted"]) { color: var(--cg-color-surface-container-outlined); }
+    :host([color="accent"]) { color: var(--cg-color-accent-text); }
+    :host([color="success"]) { color: var(--cg-color-status-success-text-default); }
+    :host([color="warning"]) { color: var(--cg-color-status-warning-text-default); }
+    :host([color="danger"]) { color: var(--cg-color-status-error-text-default); }
+    :host([color="inherit"]) { color: inherit; }
+
+    /* Alignment */
+    :host([align="left"]) { text-align: left; }
+    :host([align="center"]) { text-align: center; }
+    :host([align="right"]) { text-align: right; }
+
+    /* Truncation */
+    :host([truncate]) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Inner element resets */
+    h1, h2, h3, h4, h5, h6, p, span {
+      margin: 0;
+      padding: 0;
+      font: inherit;
+      color: inherit;
+    }
+  `];
+o([
+  i()
+], e.prototype, "text", 2);
+o([
+  i({ reflect: !0 })
+], e.prototype, "size", 2);
+o([
+  i({ reflect: !0 })
+], e.prototype, "weight", 2);
+o([
+  i({ reflect: !0 })
+], e.prototype, "color", 2);
+o([
+  i({ reflect: !0 })
+], e.prototype, "align", 2);
+o([
+  i({ reflect: !0 })
+], e.prototype, "as", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "truncate", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "inline", 2);
+o([
+  i({ type: Number })
+], e.prototype, "clamp", 2);
+e = o([
+  p("cg-text")
+], e);
+export {
+  e as CgText
+};
+//# sourceMappingURL=cg-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-text.js","sources":["../../../src/components/cg-text/cg-text.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-text> — Semantic typography component.\n *\n * Features beyond OpenUI's TextContent:\n * - Renders proper semantic HTML (h1-h6, p, span) based on `as` prop\n * - Truncation with ellipsis\n * - Line clamping\n * - All weights and colors via tokens\n */\n@customElement('cg-text')\nexport class CgText extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      line-height: var(--cg-line-height-normal);\n      color: var(--cg-color-surface-base-text);\n      margin: 0;\n    }\n\n    :host([inline]) { display: inline; }\n\n    /* Sizes */\n    :host([size=\"xs\"]) { font-size: var(--cg-font-size-xs); line-height: var(--cg-line-height-snug); }\n    :host([size=\"sm\"]) { font-size: var(--cg-font-size-sm); line-height: var(--cg-line-height-snug); }\n    :host([size=\"md\"]) { font-size: var(--cg-font-size-md); }\n    :host([size=\"lg\"]) { font-size: var(--cg-font-size-lg); }\n    :host([size=\"xl\"]) { font-size: var(--cg-font-size-xl); line-height: var(--cg-line-height-snug); }\n    :host([size=\"2xl\"]) { font-size: var(--cg-font-size-2xl); line-height: var(--cg-line-height-tight); }\n    :host([size=\"3xl\"]) { font-size: var(--cg-font-size-3xl); line-height: var(--cg-line-height-tight); }\n    :host([size=\"4xl\"]) { font-size: var(--cg-font-size-4xl); line-height: var(--cg-line-height-tight); letter-spacing: var(--cg-letter-spacing-tight); }\n\n    /* Weights */\n    :host([weight=\"normal\"]) { font-weight: var(--cg-font-weight-normal); }\n    :host([weight=\"medium\"]) { font-weight: var(--cg-font-weight-medium); }\n    :host([weight=\"semibold\"]) { font-weight: var(--cg-font-weight-semibold); }\n    :host([weight=\"bold\"]) { font-weight: var(--cg-font-weight-bold); }\n\n    /* Colors — 3-level text hierarchy: default → secondary → muted */\n    :host([color=\"default\"]) { color: var(--cg-color-surface-base-text); }\n    :host([color=\"secondary\"]) { color: var(--cg-color-surface-container-text); }\n    :host([color=\"muted\"]) { color: var(--cg-color-surface-container-outlined); }\n    :host([color=\"accent\"]) { color: var(--cg-color-accent-text); }\n    :host([color=\"success\"]) { color: var(--cg-color-status-success-text-default); }\n    :host([color=\"warning\"]) { color: var(--cg-color-status-warning-text-default); }\n    :host([color=\"danger\"]) { color: var(--cg-color-status-error-text-default); }\n    :host([color=\"inherit\"]) { color: inherit; }\n\n    /* Alignment */\n    :host([align=\"left\"]) { text-align: left; }\n    :host([align=\"center\"]) { text-align: center; }\n    :host([align=\"right\"]) { text-align: right; }\n\n    /* Truncation */\n    :host([truncate]) {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /* Inner element resets */\n    h1, h2, h3, h4, h5, h6, p, span {\n      margin: 0;\n      padding: 0;\n      font: inherit;\n      color: inherit;\n    }\n  `];\n\n  @property() text = '';\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' = 'md';\n  @property({ reflect: true }) weight: 'normal' | 'medium' | 'semibold' | 'bold' = 'normal';\n  @property({ reflect: true }) color: 'default' | 'secondary' | 'muted' | 'accent' | 'success' | 'warning' | 'danger' | 'inherit' = 'default';\n  @property({ reflect: true }) align: 'left' | 'center' | 'right' = 'left';\n  @property({ reflect: true }) as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' = 'p';\n  @property({ type: Boolean, reflect: true }) truncate = false;\n  @property({ type: Boolean, reflect: true }) inline = false;\n  @property({ type: Number }) clamp = 0;\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('clamp')) {\n      if (this.clamp > 0) {\n        this.style.display = '-webkit-box';\n        this.style.setProperty('-webkit-line-clamp', String(this.clamp));\n        this.style.setProperty('-webkit-box-orient', 'vertical');\n        this.style.overflow = 'hidden';\n      } else {\n        this.style.display = this.inline ? 'inline' : 'block';\n        this.style.removeProperty('-webkit-line-clamp');\n        this.style.removeProperty('-webkit-box-orient');\n        this.style.overflow = '';\n      }\n    }\n  }\n\n  override render() {\n    const content = this.text || html`<slot></slot>`;\n    switch (this.as) {\n      case 'h1': return html`<h1>${content}</h1>`;\n      case 'h2': return html`<h2>${content}</h2>`;\n      case 'h3': return html`<h3>${content}</h3>`;\n      case 'h4': return html`<h4>${content}</h4>`;\n      case 'h5': return html`<h5>${content}</h5>`;\n      case 'h6': return html`<h6>${content}</h6>`;\n      case 'span': return html`<span>${content}</span>`;\n      default: return html`<p>${content}</p>`;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-text': CgText;\n  }\n}\n"],"names":["CgText","LitElement","changed","content","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,57 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @element cg-textarea
+ * Multi-line text input with floating label, optional auto-resize, and character count.
+ *
+ * @example
+ * ```html
+ * <cg-textarea label="Message" placeholder="Write something..." rows="4"></cg-textarea>
+ * <cg-textarea label="Bio" autoresize maxlength="500" helper="Keep it short"></cg-textarea>
+ * <cg-textarea label="Notes" error helper="Required field"></cg-textarea>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string}>} cg-input - On every input change
+ *
+ * @cssprop [--cg-color-input-background-default=#18181b] - Textarea background
+ * @cssprop [--cg-color-focus-ring] - Focus border color
+ * @cssprop [--cg-border-radius-150=12px] - Border radius
+ * @cssprop [--cg-text-danger=#ef4444] - Error state border color
+ */
+export declare class CgTextarea extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
+    static styles: import('lit').CSSResult[];
+    label: string;
+    helper: string;
+    size: 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    value: string;
+    placeholder: string;
+    name: string;
+    rows: number;
+    maxlength: number;
+    disabled: boolean;
+    readonly: boolean;
+    error: boolean;
+    success: boolean;
+    autoresize: boolean;
+    loading: boolean;
+    required: boolean;
+    private _focused;
+    private _textarea;
+    updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private get _isFloated();
+    private _handleFocus;
+    private _handleBlur;
+    private _handleInput;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-textarea': CgTextarea;
+    }
+}
+//# sourceMappingURL=cg-textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-textarea.d.ts","sourceRoot":"","sources":["../../../src/components/cg-textarea/cg-textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BAuKnB;IAE0B,KAAK,SAAM;IAC5B,MAAM,SAAM;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7D,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,IAAI,SAAM;IACM,IAAI,SAAK;IACT,SAAS,SAAK;IACE,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,UAAU,UAAS;IACnB,OAAO,UAAS;IAC/B,QAAQ,UAAS;IAErC,OAAO,CAAC,QAAQ,CAAS;IAEf,OAAO,CAAC,SAAS,CAAuB;IAElD,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,WAAW;IAEnB,OAAO,CAAC,YAAY;IAUX,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,aAAa,EAAE,UAAU,CAAC;KAAE;CAC/D"}

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

@@ -0,0 +1,295 @@
+import { css as p, LitElement as g, nothing as s, html as l } from "lit";
+import { property as r, state as h, query as f, customElement as v } from "lit/decorators.js";
+import { h as b, r as x } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, t = (a, o, c, n) => {
+  for (var i = n > 1 ? void 0 : n ? m(o, c) : o, d = a.length - 1, u; d >= 0; d--)
+    (u = a[d]) && (i = (n ? u(o, c, i) : u(i)) || i);
+  return n && i && y(o, c, i), i;
+};
+let e = class extends g {
+  constructor() {
+    super(), this.label = "", this.helper = "", this.size = "md", this.rounded = "lg", this.value = "", this.placeholder = "", this.name = "", this.rows = 3, this.maxlength = 0, this.disabled = !1, this.readonly = !1, this.error = !1, this.success = !1, this.autoresize = !1, this.loading = !1, this.required = !1, this._focused = !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;
+  }
+  _handleFocus() {
+    this._focused = !0;
+  }
+  _handleBlur() {
+    this._focused = !1;
+  }
+  _handleInput(a) {
+    const o = a.target;
+    this.value = o.value, this.autoresize && (o.style.height = "auto", o.style.height = o.scrollHeight + "px"), this.dispatchEvent(new CustomEvent("cg-input", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+  }
+  render() {
+    const a = ["field", this._isFloated ? "floated" : ""].filter(Boolean).join(" ");
+    return l`
+      <div class="wrapper ${this.disabled ? "disabled" : ""}">
+        <div class=${a}>
+          ${this.label ? l`<span class="floating-label">${this.label}</span>` : s}
+          <textarea
+            .value=${this.value}
+            rows=${this.rows}
+            name=${this.name || s}
+            placeholder=${this.placeholder || (this.label ? " " : s)}
+            maxlength=${this.maxlength || s}
+            ?disabled=${this.disabled || this.loading}
+            ?readonly=${this.readonly}
+            aria-invalid=${this.error ? "true" : "false"}
+            aria-busy=${this.loading ? "true" : "false"}
+            aria-required=${this.required ? "true" : "false"}
+            aria-label=${this.label || s}
+            aria-describedby=${this.helper ? "helper" : s}
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+          ></textarea>
+          ${this.loading ? l`<div class="loading-overlay"><span class="loading-spinner" aria-hidden="true"></span></div>` : s}
+        </div>
+        ${this.maxlength ? l`<div class="footer"><span class="count">${this.value.length}/${this.maxlength}</span></div>` : s}
+      </div>
+      ${this.helper ? l`<div class="helper" id="helper">${this.helper}</div>` : s}
+    `;
+  }
+};
+e.formAssociated = !0;
+e.styles = [b, x, p`
+    .wrapper {
+      position: relative;
+    }
+
+    /* ── Field container for floating label ── */
+    .field {
+      position: relative;
+    }
+
+    textarea {
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--cg-spacing-12);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      background: var(--cg-color-input-background-default);
+      color: var(--cg-color-input-text-default);
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-normal);
+      resize: vertical;
+      outline: none;
+      min-height: var(--cg-spacing-96);
+      transition:
+        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    textarea::placeholder { color: transparent; }
+    .field.floated textarea::placeholder {
+      color: var(--cg-color-input-text-placeholder);
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host(:not([label])) textarea::placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    textarea:hover:not(:disabled):not([readonly]) { border-color: var(--cg-color-input-border-hover); }
+    textarea:focus-visible { outline: none; border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    textarea:disabled { opacity: 0.5; cursor: not-allowed; background: var(--cg-color-input-background-disabled); }
+    textarea[readonly] { background: var(--cg-color-surface-field-readonly-background); }
+
+    /* Loading */
+    :host([loading]) .wrapper { position: relative; pointer-events: none; opacity: 0.7; }
+    .loading-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--cg-component-input-radius);
+      background: var(--cg-overlay-dark-subtle);
+      z-index: 3;
+    }
+    .loading-spinner {
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      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-textarea-spin var(--cg-transition-duration-slow) linear infinite;
+    }
+    @keyframes cg-textarea-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* When floating label is active, shift textarea padding to make room */
+    :host([label]) textarea {
+      padding-top: var(--cg-spacing-24);
+      padding-bottom: var(--cg-spacing-6);
+    }
+    :host([label][size="lg"]) textarea {
+      padding-top: var(--cg-spacing-32);
+      padding-bottom: var(--cg-spacing-8);
+    }
+
+    :host([error]) textarea { border-color: var(--cg-color-input-border-error); }
+    :host([error]) textarea:focus-visible {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+
+    :host([success]) textarea { border-color: var(--cg-color-input-icon-success); }
+    :host([success]) textarea:focus-visible {
+      border-color: var(--cg-color-status-success-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
+
+    :host([autoresize]) textarea { resize: none; overflow: hidden; }
+
+    /* ── Floating label ── */
+    .floating-label {
+      position: absolute;
+      left: var(--cg-spacing-12);
+      right: var(--cg-spacing-12);
+      top: var(--cg-spacing-20);
+      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); left: var(--cg-spacing-16); right: var(--cg-spacing-16); }
+
+    /* 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);
+    }
+
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: var(--cg-spacing-4);
+    }
+    .count {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+    :host([error]) .count { color: var(--cg-color-input-icon-error); }
+
+    /* ── 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); }
+
+    /* Size variants */
+    :host([size="lg"]) textarea { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-12) var(--cg-spacing-16); min-height: 140px; }
+
+    /* ── Rounded overrides ── */
+    :host([rounded="none"]) textarea { border-radius: 0; }
+    :host([rounded="sm"]) textarea { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) textarea { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) textarea { border-radius: var(--cg-component-input-radius); }
+  `];
+t([
+  r({ reflect: !0 })
+], e.prototype, "label", 2);
+t([
+  r()
+], e.prototype, "helper", 2);
+t([
+  r({ reflect: !0 })
+], e.prototype, "size", 2);
+t([
+  r({ reflect: !0 })
+], e.prototype, "rounded", 2);
+t([
+  r()
+], e.prototype, "value", 2);
+t([
+  r()
+], e.prototype, "placeholder", 2);
+t([
+  r()
+], e.prototype, "name", 2);
+t([
+  r({ type: Number })
+], e.prototype, "rows", 2);
+t([
+  r({ type: Number })
+], e.prototype, "maxlength", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], 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, "autoresize", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+t([
+  r({ type: Boolean })
+], e.prototype, "required", 2);
+t([
+  h()
+], e.prototype, "_focused", 2);
+t([
+  f("textarea")
+], e.prototype, "_textarea", 2);
+e = t([
+  v("cg-textarea")
+], e);
+export {
+  e as CgTextarea
+};
+//# sourceMappingURL=cg-textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-textarea.js","sources":["../../../src/components/cg-textarea/cg-textarea.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-textarea\n * Multi-line text input with floating label, optional auto-resize, and character count.\n *\n * @example\n * ```html\n * <cg-textarea label=\"Message\" placeholder=\"Write something...\" rows=\"4\"></cg-textarea>\n * <cg-textarea label=\"Bio\" autoresize maxlength=\"500\" helper=\"Keep it short\"></cg-textarea>\n * <cg-textarea label=\"Notes\" error helper=\"Required field\"></cg-textarea>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-input - On every input change\n *\n * @cssprop [--cg-color-input-background-default=#18181b] - Textarea background\n * @cssprop [--cg-color-focus-ring] - Focus border color\n * @cssprop [--cg-border-radius-150=12px] - Border radius\n * @cssprop [--cg-text-danger=#ef4444] - Error state border color\n */\n@customElement('cg-textarea')\nexport class CgTextarea 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    .wrapper {\n      position: relative;\n    }\n\n    /* ── Field container for floating label ── */\n    .field {\n      position: relative;\n    }\n\n    textarea {\n      width: 100%;\n      box-sizing: border-box;\n      padding: var(--cg-spacing-12);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-normal);\n      resize: vertical;\n      outline: none;\n      min-height: var(--cg-spacing-96);\n      transition:\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    textarea::placeholder { color: transparent; }\n    .field.floated textarea::placeholder {\n      color: var(--cg-color-input-text-placeholder);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host(:not([label])) textarea::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    textarea:hover:not(:disabled):not([readonly]) { border-color: var(--cg-color-input-border-hover); }\n    textarea:focus-visible { outline: none; border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    textarea:disabled { opacity: 0.5; cursor: not-allowed; background: var(--cg-color-input-background-disabled); }\n    textarea[readonly] { background: var(--cg-color-surface-field-readonly-background); }\n\n    /* Loading */\n    :host([loading]) .wrapper { position: relative; pointer-events: none; opacity: 0.7; }\n    .loading-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-overlay-dark-subtle);\n      z-index: 3;\n    }\n    .loading-spinner {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\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-textarea-spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes cg-textarea-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* When floating label is active, shift textarea padding to make room */\n    :host([label]) textarea {\n      padding-top: var(--cg-spacing-24);\n      padding-bottom: var(--cg-spacing-6);\n    }\n    :host([label][size=\"lg\"]) textarea {\n      padding-top: var(--cg-spacing-32);\n      padding-bottom: var(--cg-spacing-8);\n    }\n\n    :host([error]) textarea { border-color: var(--cg-color-input-border-error); }\n    :host([error]) textarea:focus-visible {\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    :host([success]) textarea { border-color: var(--cg-color-input-icon-success); }\n    :host([success]) textarea:focus-visible {\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([autoresize]) textarea { resize: none; overflow: hidden; }\n\n    /* ── Floating label ── */\n    .floating-label {\n      position: absolute;\n      left: var(--cg-spacing-12);\n      right: var(--cg-spacing-12);\n      top: var(--cg-spacing-20);\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); left: var(--cg-spacing-16); right: var(--cg-spacing-16); }\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    .footer {\n      display: flex;\n      justify-content: flex-end;\n      margin-top: var(--cg-spacing-4);\n    }\n    .count {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    :host([error]) .count { color: var(--cg-color-input-icon-error); }\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    /* Size variants */\n    :host([size=\"lg\"]) textarea { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-12) var(--cg-spacing-16); min-height: 140px; }\n\n    /* ── Rounded overrides ── */\n    :host([rounded=\"none\"]) textarea { border-radius: 0; }\n    :host([rounded=\"sm\"]) textarea { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) textarea { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) textarea { border-radius: var(--cg-component-input-radius); }\n  `];\n\n  @property({ reflect: true }) label = '';\n  @property() helper = '';\n  @property({ reflect: true }) size: 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() value = '';\n  @property() placeholder = '';\n  @property() name = '';\n  @property({ type: Number }) rows = 3;\n  @property({ type: Number }) maxlength = 0;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean, reflect: true }) autoresize = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean }) required = false;\n\n  @state() private _focused = false;\n\n  @query('textarea') private _textarea!: HTMLTextAreaElement;\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 _handleFocus() { this._focused = true; }\n  private _handleBlur() { this._focused = false; }\n\n  private _handleInput(e: Event) {\n    const ta = e.target as HTMLTextAreaElement;\n    this.value = ta.value;\n    if (this.autoresize) {\n      ta.style.height = 'auto';\n      ta.style.height = ta.scrollHeight + 'px';\n    }\n    this.dispatchEvent(new CustomEvent('cg-input', { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  override render() {\n    const fieldClasses = ['field', this._isFloated ? 'floated' : ''].filter(Boolean).join(' ');\n\n    return html`\n      <div class=\"wrapper ${this.disabled ? 'disabled' : ''}\">\n        <div class=${fieldClasses}>\n          ${this.label ? html`<span class=\"floating-label\">${this.label}</span>` : nothing}\n          <textarea\n            .value=${this.value}\n            rows=${this.rows}\n            name=${this.name || nothing}\n            placeholder=${this.placeholder || (this.label ? ' ' : nothing)}\n            maxlength=${this.maxlength || nothing}\n            ?disabled=${this.disabled || this.loading}\n            ?readonly=${this.readonly}\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          ></textarea>\n          ${this.loading ? html`<div class=\"loading-overlay\"><span class=\"loading-spinner\" aria-hidden=\"true\"></span></div>` : nothing}\n        </div>\n        ${this.maxlength ? html`<div class=\"footer\"><span class=\"count\">${this.value.length}/${this.maxlength}</span></div>` : nothing}\n      </div>\n      ${this.helper ? html`<div class=\"helper\" id=\"helper\">${this.helper}</div>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-textarea': CgTextarea; }\n}\n"],"names":["CgTextarea","LitElement","changed","state","e","ta","fieldClasses","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}

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

@@ -0,0 +1,82 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-theme
+ * Scoping element that applies design-token overrides to its descendants.
+ * Wraps any subtree to retheme just that part of the page — without
+ * touching the global `:root` declarations.
+ *
+ * Three runtime preference axes (density, motion, contrast) are exposed
+ * as first-class attributes that map to predefined token override sets,
+ * so consumers can flip them at runtime without writing CSS:
+ *
+ *   - density: compact | cozy | comfortable
+ *   - motion:  full | reduced | none
+ *   - contrast: normal | high
+ *
+ * Plus a `tokens` prop accepting an arbitrary `Record<string, string>` of
+ * `--cg-*` overrides for ad-hoc theming (org/workspace/user layers).
+ *
+ * Nest cg-theme to layer overrides — inner wins. The classic three-tier
+ * inheritance pattern (org -> workspace -> user) is just three nested
+ * cg-theme elements.
+ *
+ * @example Brand override
+ * ```html
+ * <cg-theme .tokens=${{
+ *   '--cg-color-action-primary-background-default': '#ff00aa',
+ *   '--cg-color-action-primary-text-default': '#ffffff',
+ * }}>
+ *   <cg-button variant="primary">On-brand button</cg-button>
+ * </cg-theme>
+ * ```
+ *
+ * @example Density + motion preference
+ * ```html
+ * <cg-theme density="compact" motion="reduced">
+ *   <cg-table .columns=${cols} .rows=${rows}></cg-table>
+ * </cg-theme>
+ * ```
+ *
+ * @example Layered inheritance
+ * ```html
+ * <cg-theme .tokens=${orgPalette}>            <!-- org defaults -->
+ *   <cg-theme .tokens=${workspacePalette}>    <!-- workspace overrides -->
+ *     <cg-theme density=${userDensity}>        <!-- user prefs -->
+ *       <App />
+ *     </cg-theme>
+ *   </cg-theme>
+ * </cg-theme>
+ * ```
+ *
+ * @slot - The content to retheme.
+ *
+ * @cssprop --cg-component-theme-density-compact-spacing-step
+ * @cssprop --cg-component-theme-density-cozy-spacing-step
+ */
+export declare class CgTheme extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Density preset. Maps to spacing + component height overrides. */
+    density: 'compact' | 'cozy' | 'comfortable';
+    /** Motion preset. Maps to transition-duration overrides. */
+    motion: 'full' | 'reduced' | 'none';
+    /** Contrast preset. Maps to surface/border tokens. */
+    contrast: 'normal' | 'high';
+    /**
+     * Arbitrary `--cg-*` overrides applied to the descendant tree.
+     * Provide as an object whose keys are CSS custom property names
+     * (e.g. `--cg-color-action-primary-background-default`) and whose
+     * values are valid CSS values (`#hex`, `rgb(...)`, `var(--ref)`).
+     *
+     * Set to a new object reference to update — mutating in place will
+     * not trigger a re-render. Pass null to clear.
+     */
+    tokens: Record<string, string> | null;
+    private _tokensInlineStyle;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-theme': CgTheme;
+    }
+}
+//# sourceMappingURL=cg-theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-theme.d.ts","sourceRoot":"","sources":["../../../src/components/cg-theme/cg-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BA+CnB;IAEH,oEAAoE;IACvC,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,aAAa,CAAU;IAElF,4DAA4D;IAC/B,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAU;IAE1E,sDAAsD;IACzB,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEpE;;;;;;;;OAQG;IAC6B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAQ;IAE7E,OAAO,CAAC,kBAAkB;IAMjB,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}