@cognivo/components 0.8.0

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

@@ -0,0 +1,251 @@
+import { css as v, LitElement as u, html as c, nothing as s } from "lit";
+import { property as n, customElement as p } from "lit/decorators.js";
+import { h, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (e, t, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? m(t, r) : t, d = e.length - 1, g; d >= 0; d--)
+    (g = e[d]) && (a = (i ? g(t, r, a) : g(a)) || a);
+  return i && a && b(t, r, a), a;
+};
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.items = [], this.direction = "vertical", this.clickable = !1, this.compact = !1;
+  }
+  _handleClick(e) {
+    this.clickable && this.dispatchEvent(new CustomEvent("cg-step-click", {
+      detail: { index: e, item: this.items[e] },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _renderCircle(e, t) {
+    const r = e === "done" ? c`<cg-icon name="check" size="xs"></cg-icon>` : e === "error" ? c`<cg-icon name="x" size="xs"></cg-icon>` : `${t + 1}`;
+    return c`
+      <div
+        class="circle ${e}"
+        tabindex=${this.clickable ? "0" : s}
+        role=${this.clickable ? "button" : s}
+        aria-label="Step ${t + 1}: ${this.items[t]?.title}"
+        @click=${() => this._handleClick(t)}
+        @keydown=${(i) => {
+      this.clickable && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this._handleClick(t));
+    }}
+      >${r}</div>
+    `;
+  }
+  _getStatus(e, t) {
+    return e.status ?? (t === 0 ? "active" : "pending");
+  }
+  render() {
+    return this.direction === "horizontal" ? c`
+        <div class="steps-horizontal" role="list" aria-label="Steps">
+          ${this.items.map((e, t) => {
+      const r = this._getStatus(e, t);
+      return c`
+              <div class="step-h">
+                <div class="indicator-h">
+                  <div class="h-line ${t > 0 && this._getStatus(this.items[t - 1], t - 1) === "done" ? "done" : ""}"></div>
+                  ${this._renderCircle(r, t)}
+                  <div class="h-line ${r === "done" ? "done" : ""}"></div>
+                </div>
+                <div class="body">
+                  <div class="title ${r}">${e.title}</div>
+                  ${e.description ? c`<div class="desc">${e.description}</div>` : s}
+                </div>
+              </div>
+            `;
+    })}
+        </div>
+      ` : c`
+      <div class="steps-vertical" role="list" aria-label="Steps">
+        ${this.items.map((e, t) => {
+      const r = this._getStatus(e, t), i = t === this.items.length - 1;
+      return c`
+            <div class="step-v">
+              <div class="indicator-v">
+                ${this._renderCircle(r, t)}
+                ${i ? s : c`<div class="v-line ${r === "done" ? "done" : ""}"></div>`}
+              </div>
+              <div class="body">
+                <div class="title ${r}">${e.title}</div>
+                ${e.description ? c`<div class="desc">${e.description}</div>` : s}
+              </div>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+o.styles = [h, f, v`
+    /* Vertical layout (default) */
+    .steps-vertical { display: flex; flex-direction: column; }
+
+    .step-v {
+      display: flex;
+      gap: var(--cg-spacing-12);
+    }
+
+    /* Horizontal layout */
+    .steps-horizontal {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .step-h {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+
+    .indicator-v {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .indicator-h {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin-bottom: var(--cg-spacing-8);
+    }
+
+    /* ── Connecting lines ── */
+    .h-line {
+      flex: 1;
+      height: var(--cg-spacing-2);
+      background: var(--cg-color-surface-container-border);
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .h-line.done { background: var(--cg-color-status-success-text-default); }
+    .step-h:first-child .h-line:first-child { visibility: hidden; }
+    .step-h:last-child .h-line:last-child { visibility: hidden; }
+
+    .v-line {
+      width: var(--cg-spacing-2);
+      flex: 1;
+      min-height: var(--cg-spacing-24);
+      background: var(--cg-color-surface-container-border);
+      margin: var(--cg-spacing-4) 0;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .v-line.done { background: var(--cg-color-status-success-text-default); }
+
+    /* ── Circle ── */
+    .circle {
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border-radius: var(--cg-border-radius-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-border);
+      color: var(--cg-color-surface-container-outlined);
+      background: var(--cg-color-surface-container-background);
+      flex-shrink: 0;
+      position: relative;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    :host([compact]) .circle {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    .circle.done {
+      background: var(--cg-color-status-success-text-default);
+      border-color: var(--cg-color-status-success-text-default);
+      color: var(--cg-color-status-success-text-inverse);
+    }
+    .circle.active {
+      background: var(--cg-color-action-primary-background-default);
+      border-color: var(--cg-color-action-primary-border-default);
+      color: var(--cg-color-action-primary-text-default);
+    }
+    .circle.error {
+      background: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-text-default);
+      color: var(--cg-color-status-error-text-inverse);
+    }
+
+    /* Active pulse */
+    .circle.active { animation: stepPulse 2s ease-in-out infinite; }
+    @keyframes stepPulse {
+      0%, 100% { box-shadow: 0 0 0 0 transparent; }
+      50% { box-shadow: 0 0 0 var(--cg-spacing-4) var(--cg-overlay-accent-subtle); }
+    }
+
+    /* ── Clickable ── */
+    :host([clickable]) .circle { cursor: pointer; }
+    :host([clickable]) .circle:active { transform: scale(var(--cg-interaction-press-scale)); }
+    :host([clickable]) .circle:hover:not(.active) {
+      border-color: var(--cg-color-action-primary-border-default);
+      color: var(--cg-color-action-primary-background-default);
+    }
+    :host([clickable]) .circle:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* ── Body text ── */
+    .body {
+      padding-bottom: var(--cg-spacing-24);
+      min-width: 0;
+    }
+    .step-h .body {
+      text-align: center;
+      padding: 0 var(--cg-spacing-4);
+    }
+
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-snug);
+    }
+    :host([compact]) .title { font-size: var(--cg-font-size-xs); }
+
+    .title.active { color: var(--cg-color-action-primary-background-default); }
+    .title.done { color: var(--cg-color-status-success-text-default); }
+    .title.error { color: var(--cg-color-status-error-text-default); }
+
+    .desc {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      margin-top: var(--cg-spacing-2);
+      line-height: var(--cg-line-height-snug);
+    }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .circle.active { animation: none; }
+    }
+  `];
+l([
+  n({ type: Array })
+], o.prototype, "items", 2);
+l([
+  n({ reflect: !0 })
+], o.prototype, "direction", 2);
+l([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "clickable", 2);
+l([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "compact", 2);
+o = l([
+  p("cg-steps")
+], o);
+export {
+  o as CgSteps
+};
+//# sourceMappingURL=cg-steps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-steps.js","sources":["../../../src/components/cg-steps/cg-steps.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Step definition for cg-steps. */\nexport interface StepItem {\n  title: string;\n  description?: string;\n  status?: 'done' | 'active' | 'pending' | 'error';\n}\n\n/**\n * <cg-steps> — Step indicator with vertical/horizontal mode and clickable steps.\n *\n * @example\n * ```html\n * <cg-steps .items=${[{title:'Account',status:'done'},{title:'Profile',status:'active'},{title:'Review'}]}></cg-steps>\n * ```\n *\n * @fires {CustomEvent<{index, item}>} cg-step-click - When a clickable step is clicked\n *\n * @cssprop --cg-color-status-success-text-default - Done state color\n * @cssprop --cg-color-action-primary-background-default - Active state color\n */\n@customElement('cg-steps')\nexport class CgSteps extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    /* Vertical layout (default) */\n    .steps-vertical { display: flex; flex-direction: column; }\n\n    .step-v {\n      display: flex;\n      gap: var(--cg-spacing-12);\n    }\n\n    /* Horizontal layout */\n    .steps-horizontal {\n      display: flex;\n      align-items: flex-start;\n    }\n\n    .step-h {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      position: relative;\n    }\n\n    .indicator-v {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-shrink: 0;\n    }\n\n    .indicator-h {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      margin-bottom: var(--cg-spacing-8);\n    }\n\n    /* ── Connecting lines ── */\n    .h-line {\n      flex: 1;\n      height: var(--cg-spacing-2);\n      background: var(--cg-color-surface-container-border);\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .h-line.done { background: var(--cg-color-status-success-text-default); }\n    .step-h:first-child .h-line:first-child { visibility: hidden; }\n    .step-h:last-child .h-line:last-child { visibility: hidden; }\n\n    .v-line {\n      width: var(--cg-spacing-2);\n      flex: 1;\n      min-height: var(--cg-spacing-24);\n      background: var(--cg-color-surface-container-border);\n      margin: var(--cg-spacing-4) 0;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .v-line.done { background: var(--cg-color-status-success-text-default); }\n\n    /* ── Circle ── */\n    .circle {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-full);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-border);\n      color: var(--cg-color-surface-container-outlined);\n      background: var(--cg-color-surface-container-background);\n      flex-shrink: 0;\n      position: relative;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([compact]) .circle {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    .circle.done {\n      background: var(--cg-color-status-success-text-default);\n      border-color: var(--cg-color-status-success-text-default);\n      color: var(--cg-color-status-success-text-inverse);\n    }\n    .circle.active {\n      background: var(--cg-color-action-primary-background-default);\n      border-color: var(--cg-color-action-primary-border-default);\n      color: var(--cg-color-action-primary-text-default);\n    }\n    .circle.error {\n      background: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-text-default);\n      color: var(--cg-color-status-error-text-inverse);\n    }\n\n    /* Active pulse */\n    .circle.active { animation: stepPulse 2s ease-in-out infinite; }\n    @keyframes stepPulse {\n      0%, 100% { box-shadow: 0 0 0 0 transparent; }\n      50% { box-shadow: 0 0 0 var(--cg-spacing-4) var(--cg-overlay-accent-subtle); }\n    }\n\n    /* ── Clickable ── */\n    :host([clickable]) .circle { cursor: pointer; }\n    :host([clickable]) .circle:active { transform: scale(var(--cg-interaction-press-scale)); }\n    :host([clickable]) .circle:hover:not(.active) {\n      border-color: var(--cg-color-action-primary-border-default);\n      color: var(--cg-color-action-primary-background-default);\n    }\n    :host([clickable]) .circle:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* ── Body text ── */\n    .body {\n      padding-bottom: var(--cg-spacing-24);\n      min-width: 0;\n    }\n    .step-h .body {\n      text-align: center;\n      padding: 0 var(--cg-spacing-4);\n    }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    :host([compact]) .title { font-size: var(--cg-font-size-xs); }\n\n    .title.active { color: var(--cg-color-action-primary-background-default); }\n    .title.done { color: var(--cg-color-status-success-text-default); }\n    .title.error { color: var(--cg-color-status-error-text-default); }\n\n    .desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      margin-top: var(--cg-spacing-2);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .circle.active { animation: none; }\n    }\n  `];\n\n  @property({ type: Array }) items: StepItem[] = [];\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'vertical';\n  @property({ type: Boolean, reflect: true }) clickable = false;\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  private _handleClick(index: number) {\n    if (!this.clickable) return;\n    this.dispatchEvent(new CustomEvent('cg-step-click', {\n      detail: { index, item: this.items[index] },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _renderCircle(status: string, index: number) {\n    const inner = status === 'done'\n      ? html`<cg-icon name=\"check\" size=\"xs\"></cg-icon>`\n      : status === 'error'\n        ? html`<cg-icon name=\"x\" size=\"xs\"></cg-icon>`\n        : `${index + 1}`;\n\n    return html`\n      <div\n        class=\"circle ${status}\"\n        tabindex=${this.clickable ? '0' : nothing}\n        role=${this.clickable ? 'button' : nothing}\n        aria-label=\"Step ${index + 1}: ${this.items[index]?.title}\"\n        @click=${() => this._handleClick(index)}\n        @keydown=${(e: KeyboardEvent) => { if (this.clickable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); this._handleClick(index); } }}\n      >${inner}</div>\n    `;\n  }\n\n  private _getStatus(item: StepItem, index: number): string {\n    return item.status ?? (index === 0 ? 'active' : 'pending');\n  }\n\n  override render() {\n    if (this.direction === 'horizontal') {\n      return html`\n        <div class=\"steps-horizontal\" role=\"list\" aria-label=\"Steps\">\n          ${this.items.map((item, i) => {\n            const status = this._getStatus(item, i);\n            return html`\n              <div class=\"step-h\">\n                <div class=\"indicator-h\">\n                  <div class=\"h-line ${i > 0 && this._getStatus(this.items[i - 1]!, i - 1) === 'done' ? 'done' : ''}\"></div>\n                  ${this._renderCircle(status, i)}\n                  <div class=\"h-line ${status === 'done' ? 'done' : ''}\"></div>\n                </div>\n                <div class=\"body\">\n                  <div class=\"title ${status}\">${item.title}</div>\n                  ${item.description ? html`<div class=\"desc\">${item.description}</div>` : nothing}\n                </div>\n              </div>\n            `;\n          })}\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=\"steps-vertical\" role=\"list\" aria-label=\"Steps\">\n        ${this.items.map((item, i) => {\n          const status = this._getStatus(item, i);\n          const isLast = i === this.items.length - 1;\n          return html`\n            <div class=\"step-v\">\n              <div class=\"indicator-v\">\n                ${this._renderCircle(status, i)}\n                ${!isLast ? html`<div class=\"v-line ${status === 'done' ? 'done' : ''}\"></div>` : nothing}\n              </div>\n              <div class=\"body\">\n                <div class=\"title ${status}\">${item.title}</div>\n                ${item.description ? html`<div class=\"desc\">${item.description}</div>` : nothing}\n              </div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-steps': CgSteps; }\n}\n"],"names":["CgSteps","LitElement","index","status","inner","html","nothing","e","item","i","isLast","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,38 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @element cg-switch
+ * Toggle switch with spring-animated thumb.
+ *
+ * @example
+ * ```html
+ * <cg-switch label="Dark mode" checked></cg-switch>
+ * <cg-switch label="Notifications"></cg-switch>
+ * <cg-switch disabled label="Locked"></cg-switch>
+ * ```
+ *
+ * @fires {CustomEvent<{checked: boolean}>} cg-change - When toggled on/off
+ */
+export declare class CgSwitch extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
+    static styles: import('lit').CSSResult[];
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    loading: boolean;
+    name: string;
+    updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private _toggle;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-switch': CgSwitch;
+    }
+}
+//# sourceMappingURL=cg-switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-switch.d.ts","sourceRoot":"","sources":["../../../src/components/cg-switch/cg-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA4HnB;IAES,KAAK,SAAM;IACM,OAAO,UAAS;IACD,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAChD,IAAI,SAAM;IAEb,OAAO,CAAC,OAAO,EAAE,cAAc;IAOxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,OAAO;IASN,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,WAAW,EAAE,QAAQ,CAAC;KAAE;CAC3D"}

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

@@ -0,0 +1,210 @@
+import { css as h, LitElement as g, nothing as u, html as c } from "lit";
+import { property as s, customElement as b } from "lit/decorators.js";
+import { a as p, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var v = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (t, o, n, i) => {
+  for (var r = i > 1 ? void 0 : i ? k(o, n) : o, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (r = (i ? d(o, n, r) : d(r)) || r);
+  return i && r && v(o, n, r), r;
+};
+let e = class extends g {
+  constructor() {
+    super(), this.label = "", this.checked = !1, this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.name = "", typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  updated(t) {
+    super.updated(t), t.has("checked") && this._internals?.setFormValue(this.checked ? "on" : null);
+  }
+  formResetCallback() {
+    this.checked = this.hasAttribute("checked");
+  }
+  formStateRestoreCallback(t) {
+    this.checked = t === "on";
+  }
+  _toggle() {
+    this.disabled || this.loading || (this.checked = !this.checked, this.dispatchEvent(new CustomEvent("cg-change", {
+      detail: { checked: this.checked },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  render() {
+    return c`
+      <label
+        tabindex=${this.disabled ? "-1" : "0"}
+        role="switch"
+        aria-checked=${String(this.checked)}
+        aria-disabled=${String(this.disabled)}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-busy=${this.loading ? "true" : "false"}
+        @click=${this._toggle}
+        @keydown=${(t) => {
+      (t.key === " " || t.key === "Enter") && (t.preventDefault(), this._toggle());
+    }}
+      >
+        <input type="checkbox" .checked=${this.checked}
+          ?disabled=${this.disabled} tabindex="-1" aria-hidden="true"
+          @click=${(t) => t.stopPropagation()} />
+
+        ${this.loading ? c`<span class="loading-spinner" aria-hidden="true"></span>` : c`
+        <span class="track ${this.checked ? "checked" : ""}">
+          <span class="thumb"></span>
+        </span>`}
+
+        ${this.label ? c`<span class="label-text">${this.label}</span>` : u}
+      </label>
+    `;
+  }
+};
+e.formAssociated = !0;
+e.styles = [p, f, h`
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      cursor: pointer;
+      min-height: 44px;
+      -webkit-tap-highlight-color: transparent;
+      user-select: none;
+    }
+    :host([disabled]) label { pointer-events: none; }
+    :host([disabled]) .track {
+      background: var(--cg-color-toggle-background-disabled);
+    }
+    :host([disabled]) .thumb {
+      background: var(--cg-color-toggle-thumb-disabled);
+    }
+
+    /* ── Track ── */
+    .track {
+      position: relative;
+      width: var(--cg-component-switch-width);
+      height: var(--cg-component-switch-height);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-toggle-background-off);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      flex-shrink: 0;
+    }
+
+    /* Track checked */
+    .track.checked {
+      background: var(--cg-color-toggle-background-on);
+    }
+
+    /* ── Thumb ── */
+    .thumb {
+      position: absolute;
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-toggle-thumb-off);
+      top: var(--cg-spacing-2);
+      left: var(--cg-spacing-2);
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), width var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      box-shadow: var(--cg-elevation-1);
+    }
+
+    /* Thumb checked — slide right */
+    .track.checked .thumb {
+      background: var(--cg-color-toggle-thumb-on);
+      transform: translateX(var(--cg-spacing-20));
+    }
+
+    /* ── Hover — thumb grows slightly ── */
+    :host(:not([disabled])) label:hover .thumb {
+      box-shadow: var(--cg-elevation-2);
+      transform: scale(1.05);
+    }
+    :host(:not([disabled])) label:hover .track.checked .thumb {
+      transform: translateX(var(--cg-spacing-20)) scale(1.05);
+    }
+
+    /* ── Press — thumb stretches horizontally ── */
+    :host(:not([disabled])) label:active .thumb {
+      width: var(--cg-spacing-24);
+      transform: none;
+    }
+    :host(:not([disabled])) label:active .track.checked .thumb {
+      width: var(--cg-spacing-24);
+      transform: translateX(var(--cg-spacing-16));
+    }
+
+    /* ── Focus ring ── */
+    label:focus-visible .track {
+      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);
+    }
+
+    /* ── Error state ── */
+    :host([error]) .track.checked {
+      background: var(--cg-color-status-error-text-default);
+    }
+    :host([error]) .label-text {
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    /* ── Success state ── */
+    :host([success]) .track.checked {
+      background: var(--cg-color-status-success-text-default);
+    }
+    :host([success]) .label-text {
+      color: var(--cg-color-status-success-text-default);
+    }
+
+    /* ── Loading state ── */
+    :host([loading]) label { pointer-events: none; opacity: 0.5; }
+    .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-switch-spin var(--cg-transition-duration-slow) linear infinite;
+      flex-shrink: 0;
+    }
+    @keyframes cg-switch-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Hidden native input */
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+
+    /* Label text */
+    .label-text {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-snug);
+    }
+  `];
+a([
+  s()
+], e.prototype, "label", 2);
+a([
+  s({ type: Boolean })
+], e.prototype, "checked", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "error", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "success", 2);
+a([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+a([
+  s()
+], e.prototype, "name", 2);
+e = a([
+  b("cg-switch")
+], e);
+export {
+  e as CgSwitch
+};
+//# sourceMappingURL=cg-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-switch.js","sources":["../../../src/components/cg-switch/cg-switch.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-switch\n * Toggle switch with spring-animated thumb.\n *\n * @example\n * ```html\n * <cg-switch label=\"Dark mode\" checked></cg-switch>\n * <cg-switch label=\"Notifications\"></cg-switch>\n * <cg-switch disabled label=\"Locked\"></cg-switch>\n * ```\n *\n * @fires {CustomEvent<{checked: boolean}>} cg-change - When toggled on/off\n */\n@customElement('cg-switch')\nexport class CgSwitch 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 = [hostBase, reducedMotion, css`\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      cursor: pointer;\n      min-height: 44px;\n      -webkit-tap-highlight-color: transparent;\n      user-select: none;\n    }\n    :host([disabled]) label { pointer-events: none; }\n    :host([disabled]) .track {\n      background: var(--cg-color-toggle-background-disabled);\n    }\n    :host([disabled]) .thumb {\n      background: var(--cg-color-toggle-thumb-disabled);\n    }\n\n    /* ── Track ── */\n    .track {\n      position: relative;\n      width: var(--cg-component-switch-width);\n      height: var(--cg-component-switch-height);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-toggle-background-off);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      flex-shrink: 0;\n    }\n\n    /* Track checked */\n    .track.checked {\n      background: var(--cg-color-toggle-background-on);\n    }\n\n    /* ── Thumb ── */\n    .thumb {\n      position: absolute;\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-toggle-thumb-off);\n      top: var(--cg-spacing-2);\n      left: var(--cg-spacing-2);\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), width var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      box-shadow: var(--cg-elevation-1);\n    }\n\n    /* Thumb checked — slide right */\n    .track.checked .thumb {\n      background: var(--cg-color-toggle-thumb-on);\n      transform: translateX(var(--cg-spacing-20));\n    }\n\n    /* ── Hover — thumb grows slightly ── */\n    :host(:not([disabled])) label:hover .thumb {\n      box-shadow: var(--cg-elevation-2);\n      transform: scale(1.05);\n    }\n    :host(:not([disabled])) label:hover .track.checked .thumb {\n      transform: translateX(var(--cg-spacing-20)) scale(1.05);\n    }\n\n    /* ── Press — thumb stretches horizontally ── */\n    :host(:not([disabled])) label:active .thumb {\n      width: var(--cg-spacing-24);\n      transform: none;\n    }\n    :host(:not([disabled])) label:active .track.checked .thumb {\n      width: var(--cg-spacing-24);\n      transform: translateX(var(--cg-spacing-16));\n    }\n\n    /* ── Focus ring ── */\n    label:focus-visible .track {\n      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    /* ── Error state ── */\n    :host([error]) .track.checked {\n      background: var(--cg-color-status-error-text-default);\n    }\n    :host([error]) .label-text {\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Success state ── */\n    :host([success]) .track.checked {\n      background: var(--cg-color-status-success-text-default);\n    }\n    :host([success]) .label-text {\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    /* ── Loading state ── */\n    :host([loading]) label { pointer-events: none; opacity: 0.5; }\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-switch-spin var(--cg-transition-duration-slow) linear infinite;\n      flex-shrink: 0;\n    }\n    @keyframes cg-switch-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* Hidden native input */\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 0;\n      height: 0;\n      pointer-events: none;\n    }\n\n    /* Label text */\n    .label-text {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n  `];\n\n  @property() label = '';\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean, reflect: true }) 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() name = '';\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('checked')) {\n      this._internals?.setFormValue(this.checked ? 'on' : null);\n    }\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked');\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.checked = state === 'on';\n  }\n\n  private _toggle() {\n    if (this.disabled || this.loading) return;\n    this.checked = !this.checked;\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { checked: this.checked },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <label\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"switch\"\n        aria-checked=${String(this.checked)}\n        aria-disabled=${String(this.disabled)}\n        aria-invalid=${this.error ? 'true' : 'false'}\n        aria-busy=${this.loading ? 'true' : 'false'}\n        @click=${this._toggle}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this._toggle(); } }}\n      >\n        <input type=\"checkbox\" .checked=${this.checked}\n          ?disabled=${this.disabled} tabindex=\"-1\" aria-hidden=\"true\"\n          @click=${(e: Event) => e.stopPropagation()} />\n\n        ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : html`\n        <span class=\"track ${this.checked ? 'checked' : ''}\">\n          <span class=\"thumb\"></span>\n        </span>`}\n\n        ${this.label ? html`<span class=\"label-text\">${this.label}</span>` : nothing}\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-switch': CgSwitch; }\n}\n"],"names":["CgSwitch","LitElement","changed","state","html","e","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+/** Column definition for cg-table. */
+export interface TableColumn {
+    key: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    width?: string;
+    /**
+     * Optional cell renderer. Receives the raw value at row[index], the full
+     * row, and the row index. Return anything Lit can render — string, number,
+     * Node, TemplateResult. When omitted, the value is string-interpolated.
+     */
+    render?: (value: unknown, row: unknown[], rowIdx: number) => unknown;
+}
+/**
+ * <cg-table> — Data table with sorting, selection, loading, and pagination.
+ *
+ * @example
+ * ```html
+ * <cg-table
+ *   .columns=${[{key:'name',label:'Name',sortable:true},{key:'role',label:'Role'}]}
+ *   .rows=${[['Alice','Designer'],['Bob','Developer']]}
+ *   selectable striped
+ * ></cg-table>
+ * ```
+ *
+ * @slot footer - Footer area for pagination or summary
+ *
+ * @fires {CustomEvent<{key, direction}>} cg-sort - Column sorted
+ * @fires {CustomEvent<{indices: number[]}>} cg-select - Row selection changed
+ * @fires {CustomEvent<{index, row}>} cg-row-click - Row clicked
+ *
+ * @cssprop --cg-component-table-radius - Table border radius
+ * @cssprop --cg-color-surface-table-header-background - Header background
+ */
+export declare class CgTable extends LitElement {
+    static styles: import('lit').CSSResult[];
+    columns: TableColumn[];
+    rows: unknown[][];
+    striped: boolean;
+    compact: boolean;
+    clickable: boolean;
+    selectable: boolean;
+    loading: boolean;
+    loadingRows: number;
+    emptyText: string;
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    private _sortKey;
+    private _sortDir;
+    private _selected;
+    private _hasFooter;
+    private _handleSort;
+    private _toggleRow;
+    private _toggleAll;
+    private _handleRowClick;
+    private _handleFooterSlotChange;
+    private _renderCell;
+    private _getSortedRows;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-table': CgTable;
+    }
+}
+//# sourceMappingURL=cg-table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-table.d.ts","sourceRoot":"","sources":["../../../src/components/cg-table/cg-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,sCAAsC;AACtC,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;CACtE;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAkNnB;IAEwB,OAAO,EAAE,WAAW,EAAE,CAAM;IAC5B,IAAI,EAAE,OAAO,EAAE,EAAE,CAAM;IACN,OAAO,UAAS;IAChB,OAAO,UAAS;IAChB,SAAS,UAAS;IAClB,UAAU,UAAS;IACnB,OAAO,UAAS;IAChC,WAAW,SAAK;IAChC,SAAS,SAAa;IACL,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhE,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,QAAQ,CAAyB;IACzC,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,cAAc;IAab,MAAM;CA4EhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}