@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,23 +1,23 @@
-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;
+import { css as g, LitElement as u, nothing as d, html as c } from "lit";
+import { property as r, customElement as b } from "lit/decorators.js";
+import { a as p, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+var v = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, o, l, i) => {
+  for (var s = i > 1 ? void 0 : i ? k(o, l) : o, n = e.length - 1, h; n >= 0; n--)
+    (h = e[n]) && (s = (i ? h(o, l, s) : h(s)) || s);
+  return i && s && v(o, l, s), s;
 };
-let e = class extends g {
+let t = class extends u {
   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());
+    super(), this.label = "", this.ariaLabel = null, 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);
+  updated(e) {
+    super.updated(e), e.has("checked") && this._internals?.setFormValue(this.checked ? "on" : null);
   }
   formResetCallback() {
     this.checked = this.hasAttribute("checked");
   }
-  formStateRestoreCallback(t) {
-    this.checked = t === "on";
+  formStateRestoreCallback(e) {
+    this.checked = e === "on";
   }
   _toggle() {
     this.disabled || this.loading || (this.checked = !this.checked, this.dispatchEvent(new CustomEvent("cg-change", {
@@ -31,31 +31,28 @@ let e = class extends g {
       <label
         tabindex=${this.disabled ? "-1" : "0"}
         role="switch"
+        aria-label=${!this.label && this.ariaLabel ? this.ariaLabel : d}
         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());
+        @keydown=${(e) => {
+      (e.key === " " || e.key === "Enter") && (e.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}
+        ${this.label ? c`<span class="label-text">${this.label}</span>` : d}
       </label>
     `;
   }
 };
-e.formAssociated = !0;
-e.styles = [p, f, h`
+t.formAssociated = !0;
+t.styles = [p, f, g`
     label {
       display: inline-flex;
       align-items: center;
@@ -163,14 +160,6 @@ e.styles = [p, f, h`
       to { transform: rotate(360deg); }
     }
 
-    /* Hidden native input */
-    input {
-      position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
-      pointer-events: none;
-    }
 
     /* Label text */
     .label-text {
@@ -181,30 +170,33 @@ e.styles = [p, f, h`
     }
   `];
 a([
-  s()
-], e.prototype, "label", 2);
+  r()
+], t.prototype, "label", 2);
+a([
+  r({ attribute: "aria-label" })
+], t.prototype, "ariaLabel", 2);
 a([
-  s({ type: Boolean })
-], e.prototype, "checked", 2);
+  r({ type: Boolean })
+], t.prototype, "checked", 2);
 a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
 a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "error", 2);
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "error", 2);
 a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "success", 2);
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "success", 2);
 a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "loading", 2);
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
 a([
-  s()
-], e.prototype, "name", 2);
-e = a([
+  r()
+], t.prototype, "name", 2);
+t = a([
   b("cg-switch")
-], e);
+], t);
 export {
-  e as CgSwitch
+  t as CgSwitch
 };
 //# sourceMappingURL=cg-switch.js.map

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

@@ -1 +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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"}
+{"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\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  /** Accessible name when no visible label is rendered (host aria-label is\n   *  forwarded to the internal switch, which carries the role). */\n  @property({ attribute: 'aria-label' }) override ariaLabel: string | null = null;\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-label=${!this.label && this.ariaLabel ? this.ariaLabel : nothing}\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        ${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","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -6,12 +6,6 @@ export interface TableColumn {
     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.
@@ -55,7 +49,6 @@ export declare class CgTable extends LitElement {
     private _toggleAll;
     private _handleRowClick;
     private _handleFooterSlotChange;
-    private _renderCell;
     private _getSortedRows;
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1 +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"}
+{"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;CAChB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAyNnB;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,cAAc;IAab,MAAM;CA4EhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -1,71 +1,67 @@
-import { css as b, LitElement as p, nothing as h, html as c } from "lit";
+import { css as b, LitElement as p, nothing as h, html as d } from "lit";
 import { property as l, state as g, customElement as u } from "lit/decorators.js";
-import { h as v, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (r, o, d, t) => {
-  for (var e = t > 1 ? void 0 : t ? m(o, d) : o, i = r.length - 1, n; i >= 0; i--)
-    (n = r[i]) && (e = (t ? n(o, d, e) : n(e)) || e);
-  return t && e && y(o, d, e), e;
+import { h as v, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (e, o, c, t) => {
+  for (var r = t > 1 ? void 0 : t ? m(o, c) : o, i = e.length - 1, n; i >= 0; i--)
+    (n = e[i]) && (r = (t ? n(o, c, r) : n(r)) || r);
+  return t && r && y(o, c, r), r;
 };
 let s = class extends p {
   constructor() {
     super(...arguments), this.columns = [], this.rows = [], this.striped = !1, this.compact = !1, this.clickable = !1, this.selectable = !1, this.loading = !1, this.loadingRows = 5, this.emptyText = "No data", this.rounded = "lg", this._sortKey = "", this._sortDir = "asc", this._selected = /* @__PURE__ */ new Set(), this._hasFooter = !1;
   }
-  _handleSort(r) {
-    r.sortable && (this._sortKey === r.key ? this._sortDir = this._sortDir === "asc" ? "desc" : "asc" : (this._sortKey = r.key, this._sortDir = "asc"), this.dispatchEvent(new CustomEvent("cg-sort", {
+  _handleSort(e) {
+    e.sortable && (this._sortKey === e.key ? this._sortDir = this._sortDir === "asc" ? "desc" : "asc" : (this._sortKey = e.key, this._sortDir = "asc"), this.dispatchEvent(new CustomEvent("cg-sort", {
       detail: { key: this._sortKey, direction: this._sortDir },
       bubbles: !0,
       composed: !0
     })));
   }
-  _toggleRow(r) {
+  _toggleRow(e) {
     const o = new Set(this._selected);
-    o.has(r) ? o.delete(r) : o.add(r), this._selected = o, this.dispatchEvent(new CustomEvent("cg-select", {
+    o.has(e) ? o.delete(e) : o.add(e), this._selected = o, this.dispatchEvent(new CustomEvent("cg-select", {
       detail: { indices: [...o] },
       bubbles: !0,
       composed: !0
     }));
   }
   _toggleAll() {
-    this._selected.size === this.rows.length ? this._selected = /* @__PURE__ */ new Set() : this._selected = new Set(this.rows.map((r, o) => o)), this.dispatchEvent(new CustomEvent("cg-select", {
+    this._selected.size === this.rows.length ? this._selected = /* @__PURE__ */ new Set() : this._selected = new Set(this.rows.map((e, o) => o)), this.dispatchEvent(new CustomEvent("cg-select", {
       detail: { indices: [...this._selected] },
       bubbles: !0,
       composed: !0
     }));
   }
-  _handleRowClick(r, o) {
+  _handleRowClick(e, o) {
     this.clickable && this.dispatchEvent(new CustomEvent("cg-row-click", {
-      detail: { index: r, row: o },
+      detail: { index: e, row: o },
       bubbles: !0,
       composed: !0
     }));
   }
-  _handleFooterSlotChange(r) {
-    const o = r.target;
+  _handleFooterSlotChange(e) {
+    const o = e.target;
     this._hasFooter = o.assignedNodes({ flatten: !0 }).length > 0;
   }
-  _renderCell(r, o, d, t) {
-    const e = o[t];
-    return r.render ? r.render(e, o, d) : e ?? "";
-  }
   _getSortedRows() {
     if (!this._sortKey) return this.rows;
-    const r = this.columns.findIndex((d) => d.key === this._sortKey);
-    if (r === -1) return this.rows;
-    const o = [...this.rows].sort((d, t) => {
-      const e = d[r], i = t[r];
-      return typeof e == "number" && typeof i == "number" ? e - i : String(e ?? "").localeCompare(String(i ?? ""));
+    const e = this.columns.findIndex((c) => c.key === this._sortKey);
+    if (e === -1) return this.rows;
+    const o = [...this.rows].sort((c, t) => {
+      const r = c[e], i = t[e];
+      return typeof r == "number" && typeof i == "number" ? r - i : String(r ?? "").localeCompare(String(i ?? ""));
     });
     return this._sortDir === "desc" ? o.reverse() : o;
   }
   render() {
-    const r = this._getSortedRows(), o = this.rows.length > 0 && this._selected.size === this.rows.length, d = ["short", "long", "med", "short"];
-    return c`
+    const e = this._getSortedRows(), o = this.rows.length > 0 && this._selected.size === this.rows.length, c = ["short", "long", "med", "short"];
+    return d`
       <div class="table-wrapper">
         <div class="table-scroll">
         <table role="table">
           <thead>
             <tr>
-              ${this.selectable ? c`
+              ${this.selectable ? d`
                 <th class="select-col">
                   <cg-checkbox size="sm"
                     ?checked=${o}
@@ -74,52 +70,52 @@ let s = class extends p {
                     aria-label="Select all rows"></cg-checkbox>
                 </th>
               ` : h}
-              ${this.columns.map((t) => c`
+              ${this.columns.map((t) => d`
                 <th
                   class="${t.sortable ? "sortable" : ""} ${this._sortKey === t.key ? "sorted" : ""}"
                   data-align=${t.align ?? "left"}
                   style=${t.width ? `width: ${t.width}` : ""}
                   tabindex=${t.sortable ? "0" : h}
                   @click=${() => this._handleSort(t)}
-                  @keydown=${(e) => {
-      t.sortable && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleSort(t));
+                  @keydown=${(r) => {
+      t.sortable && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._handleSort(t));
     }}
                   aria-sort=${this._sortKey === t.key ? this._sortDir === "asc" ? "ascending" : "descending" : h}
                 >
                   ${t.label}
-                  ${t.sortable ? c`<span class="sort-icon"><cg-icon name="${this._sortKey === t.key ? this._sortDir === "asc" ? "arrow-up" : "arrow-down" : "sort"}" size="xs"></cg-icon></span>` : h}
+                  ${t.sortable ? d`<span class="sort-icon"><cg-icon name="${this._sortKey === t.key ? this._sortDir === "asc" ? "arrow-up" : "arrow-down" : "sort"}" size="xs"></cg-icon></span>` : h}
                 </th>
               `)}
             </tr>
           </thead>
           <tbody>
-            ${this.loading ? Array.from({ length: this.loadingRows }, (t, e) => c`
+            ${this.loading ? Array.from({ length: this.loadingRows }, (t, r) => d`
               <tr class="loading-row">
-                ${this.selectable ? c`<td class="select-col"><div class="loading-bar short" style="width:16px;height:16px;border-radius:4px;margin:0 auto;"></div></td>` : h}
-                ${this.columns.map((i, n) => c`
-                  <td><div class="loading-bar ${d[n % d.length]}"></div></td>
+                ${this.selectable ? d`<td class="select-col"><div class="loading-bar short" style="width:16px;height:16px;border-radius:4px;margin:0 auto;"></div></td>` : h}
+                ${this.columns.map((i, n) => d`
+                  <td><div class="loading-bar ${c[n % c.length]}"></div></td>
                 `)}
               </tr>
-            `) : r.length === 0 ? c`
+            `) : e.length === 0 ? d`
               <tr>
-                <td colspan=${this.columns.length + (this.selectable ? 1 : 0)}>
+                <td class="empty-cell" colspan=${this.columns.length + (this.selectable ? 1 : 0)}>
                   <div class="empty-state">${this.emptyText}</div>
                 </td>
               </tr>
-            ` : r.map((t, e) => c`
-              <tr class="${this._selected.has(e) ? "selected" : ""}"
-                @click=${() => this._handleRowClick(e, t)}>
-                ${this.selectable ? c`
+            ` : e.map((t, r) => d`
+              <tr class="${this._selected.has(r) ? "selected" : ""}"
+                @click=${() => this._handleRowClick(r, t)}>
+                ${this.selectable ? d`
                   <td class="select-col" @click=${(i) => i.stopPropagation()}>
                     <cg-checkbox size="sm"
-                      ?checked=${this._selected.has(e)}
-                      @cg-change=${() => this._toggleRow(e)}
+                      ?checked=${this._selected.has(r)}
+                      @cg-change=${() => this._toggleRow(r)}
                       label=""
-                      aria-label=${`Select row ${e + 1}`}></cg-checkbox>
+                      aria-label=${`Select row ${r + 1}`}></cg-checkbox>
                   </td>
                 ` : h}
-                ${this.columns.map((i, n) => c`
-                  <td data-align=${i.align ?? "left"}>${this._renderCell(i, t, e, n)}</td>
+                ${this.columns.map((i, n) => d`
+                  <td data-align=${i.align ?? "left"}>${t[n] ?? ""}</td>
                 `)}
               </tr>
             `)}
@@ -298,8 +294,15 @@ s.styles = [v, f, b`
     }
 
     /* ── Empty state ── */
+    /* The empty-state cell controls its own spacing — strip the row's td
+       padding so it doesn't stack on top, which made the vertical gap read
+       larger than the left/right. Even padding keeps it centered in the
+       inner container on all four sides. */
+    td.empty-cell {
+      padding: 0;
+    }
     .empty-state {
-      padding: var(--cg-spacing-32) var(--cg-spacing-24);
+      padding: var(--cg-spacing-32);
       text-align: center;
       font-size: var(--cg-font-size-sm);
       color: var(--cg-color-surface-container-outlined);

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

@@ -1 +1 @@
-{"version":3,"file":"cg-table.js","sources":["../../../src/components/cg-table/cg-table.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Column definition for cg-table. */\nexport interface TableColumn {\n  key: string;\n  label: string;\n  align?: 'left' | 'center' | 'right';\n  sortable?: boolean;\n  width?: string;\n  /**\n   * Optional cell renderer. Receives the raw value at row[index], the full\n   * row, and the row index. Return anything Lit can render — string, number,\n   * Node, TemplateResult. When omitted, the value is string-interpolated.\n   */\n  render?: (value: unknown, row: unknown[], rowIdx: number) => unknown;\n}\n\n/**\n * <cg-table> — Data table with sorting, selection, loading, and pagination.\n *\n * @example\n * ```html\n * <cg-table\n *   .columns=${[{key:'name',label:'Name',sortable:true},{key:'role',label:'Role'}]}\n *   .rows=${[['Alice','Designer'],['Bob','Developer']]}\n *   selectable striped\n * ></cg-table>\n * ```\n *\n * @slot footer - Footer area for pagination or summary\n *\n * @fires {CustomEvent<{key, direction}>} cg-sort - Column sorted\n * @fires {CustomEvent<{indices: number[]}>} cg-select - Row selection changed\n * @fires {CustomEvent<{index, row}>} cg-row-click - Row clicked\n *\n * @cssprop --cg-component-table-radius - Table border radius\n * @cssprop --cg-color-surface-table-header-background - Header background\n */\n@customElement('cg-table')\nexport class CgTable extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .table-wrapper {\n      overflow: hidden;\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n      border-radius: var(--cg-component-table-radius);\n      padding: var(--cg-spacing-4) 0;\n    }\n\n    .table-scroll {\n      overflow-x: auto;\n    }\n\n    /* Body area — slightly darker inset with inner rounding + border */\n    tbody {\n      background: var(--cg-overlay-dark-subtle);\n    }\n    tbody tr:first-child td {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n    }\n    tbody tr:last-child td {\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n    }\n    tbody td:first-child {\n      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n    }\n    tbody td:last-child {\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n    }\n    tbody tr:first-child td:first-child {\n      border-top-left-radius: var(--cg-border-radius-150);\n    }\n    tbody tr:first-child td:last-child {\n      border-top-right-radius: var(--cg-border-radius-150);\n    }\n    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--cg-border-radius-150);\n    }\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--cg-border-radius-150);\n    }\n\n    /* Rounded variants — outer wrapper + inner tbody corners */\n    :host([rounded=\"none\"]) .table-wrapper { border-radius: 0; }\n    :host([rounded=\"none\"]) tbody tr:first-child td:first-child,\n    :host([rounded=\"none\"]) tbody tr:first-child td:last-child,\n    :host([rounded=\"none\"]) tbody tr:last-child td:first-child,\n    :host([rounded=\"none\"]) tbody tr:last-child td:last-child { border-radius: 0; }\n\n    :host([rounded=\"sm\"]) .table-wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"sm\"]) tbody tr:first-child td:first-child { border-top-left-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"sm\"]) tbody tr:first-child td:last-child { border-top-right-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"sm\"]) tbody tr:last-child td:first-child { border-bottom-left-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"sm\"]) tbody tr:last-child td:last-child { border-bottom-right-radius: var(--cg-border-radius-50); }\n\n    :host([rounded=\"md\"]) .table-wrapper { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"md\"]) tbody tr:first-child td:first-child { border-top-left-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) tbody tr:first-child td:last-child { border-top-right-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) tbody tr:last-child td:first-child { border-bottom-left-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) tbody tr:last-child td:last-child { border-bottom-right-radius: var(--cg-border-radius-100); }\n\n    :host([rounded=\"lg\"]) .table-wrapper { border-radius: var(--cg-component-table-radius); }\n\n    table {\n      width: calc(100% - var(--cg-spacing-8) * 2);\n      margin: 0 var(--cg-spacing-8);\n      border-collapse: separate;\n      border-spacing: 0;\n      font-size: var(--cg-font-size-sm);\n    }\n    :host([compact]) table { font-size: var(--cg-font-size-xs); }\n\n    /* ── Header ── */\n    thead { position: sticky; top: 0; z-index: 1; }\n\n    th {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      text-align: left;\n      font-weight: var(--cg-font-weight-medium);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      background: transparent;\n      border-bottom: none;\n      white-space: nowrap;\n      user-select: none;\n    }\n    :host([compact]) th {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n    }\n\n    th.sortable { cursor: pointer; }\n    th.sortable:hover { color: var(--cg-color-action-primary-background-default); }\n    th.sortable:active {\n      transform: scale(0.98);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    th.sortable:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-color-action-primary-background-default);\n    }\n\n    th .sort-icon {\n      display: inline-flex;\n      margin-left: var(--cg-spacing-4);\n      opacity: 0.4;\n      vertical-align: middle;\n    }\n    th.sorted .sort-icon {\n      opacity: 1;\n      color: var(--cg-color-action-primary-background-default);\n    }\n\n    th[data-align=\"center\"] { text-align: center; }\n    th[data-align=\"right\"] { text-align: right; }\n\n    /* ── Selection checkbox column ── */\n    th.select-col, td.select-col {\n      width: var(--cg-spacing-48);\n      padding: 0 var(--cg-spacing-12);\n    }\n    th.select-col cg-checkbox,\n    td.select-col cg-checkbox {\n      min-height: 0;\n      transform: scale(0.85);\n    }\n\n    /* ── Cells ── */\n    td {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      color: var(--cg-color-surface-table-text);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n      vertical-align: middle;\n    }\n    :host([compact]) td {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n    }\n\n    td[data-align=\"center\"] { text-align: center; }\n    td[data-align=\"right\"] { text-align: right; }\n\n    /* Row dividers — last row keeps its content border from the tbody border rules */\n\n    /* ── Row states ── */\n    tbody tr {\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    tbody tr:hover td {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    tbody tr.selected td {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    :host([clickable]) tbody tr {\n      cursor: pointer;\n    }\n\n    /* ── Striped ── */\n    :host([striped]) tbody tr:nth-child(even) td {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    :host([striped]) tbody tr:nth-child(even):hover td {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n\n    /* ── Empty state ── */\n    .empty-state {\n      padding: var(--cg-spacing-32) var(--cg-spacing-24);\n      text-align: center;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* ── Loading ── */\n    .loading-row td {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n    }\n    .loading-bar {\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-action-secondary-background-hover);\n      animation: tablePulse 2s ease-in-out infinite;\n    }\n    .loading-bar.short { width: 60%; }\n    .loading-bar.med { width: 80%; }\n    .loading-bar.long { width: 95%; }\n\n    @keyframes tablePulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.4; }\n    }\n\n    /* ── Footer ── */\n    .table-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .table-footer ::slotted(*) {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .loading-bar { animation: none; opacity: 0.6; }\n    }\n  `];\n\n  @property({ type: Array }) columns: TableColumn[] = [];\n  @property({ type: Array }) rows: unknown[][] = [];\n  @property({ type: Boolean, reflect: true }) striped = false;\n  @property({ type: Boolean, reflect: true }) compact = false;\n  @property({ type: Boolean, reflect: true }) clickable = false;\n  @property({ type: Boolean, reflect: true }) selectable = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Number }) loadingRows = 5;\n  @property() emptyText = 'No data';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n\n  @state() private _sortKey = '';\n  @state() private _sortDir: 'asc' | 'desc' = 'asc';\n  @state() private _selected = new Set<number>();\n  @state() private _hasFooter = false;\n\n  private _handleSort(col: TableColumn) {\n    if (!col.sortable) return;\n    if (this._sortKey === col.key) {\n      this._sortDir = this._sortDir === 'asc' ? 'desc' : 'asc';\n    } else {\n      this._sortKey = col.key;\n      this._sortDir = 'asc';\n    }\n    this.dispatchEvent(new CustomEvent('cg-sort', {\n      detail: { key: this._sortKey, direction: this._sortDir },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _toggleRow(index: number) {\n    const next = new Set(this._selected);\n    if (next.has(index)) next.delete(index);\n    else next.add(index);\n    this._selected = next;\n    this.dispatchEvent(new CustomEvent('cg-select', {\n      detail: { indices: [...next] },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _toggleAll() {\n    if (this._selected.size === this.rows.length) {\n      this._selected = new Set();\n    } else {\n      this._selected = new Set(this.rows.map((_, i) => i));\n    }\n    this.dispatchEvent(new CustomEvent('cg-select', {\n      detail: { indices: [...this._selected] },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleRowClick(index: number, row: unknown[]) {\n    if (this.clickable) {\n      this.dispatchEvent(new CustomEvent('cg-row-click', {\n        detail: { index, row },\n        bubbles: true, composed: true,\n      }));\n    }\n  }\n\n  private _handleFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _renderCell(col: TableColumn, row: unknown[], rowIdx: number, i: number): unknown {\n    const value = row[i];\n    return col.render ? col.render(value, row, rowIdx) : (value ?? '');\n  }\n\n  private _getSortedRows(): unknown[][] {\n    if (!this._sortKey) return this.rows;\n    const idx = this.columns.findIndex(c => c.key === this._sortKey);\n    if (idx === -1) return this.rows;\n    const sorted = [...this.rows].sort((a, b) => {\n      const va = (a as unknown[])[idx];\n      const vb = (b as unknown[])[idx];\n      if (typeof va === 'number' && typeof vb === 'number') return va - vb;\n      return String(va ?? '').localeCompare(String(vb ?? ''));\n    });\n    return this._sortDir === 'desc' ? sorted.reverse() : sorted;\n  }\n\n  override render() {\n    const sortedRows = this._getSortedRows();\n    const allSelected = this.rows.length > 0 && this._selected.size === this.rows.length;\n    const widths = ['short', 'long', 'med', 'short'];\n\n    return html`\n      <div class=\"table-wrapper\">\n        <div class=\"table-scroll\">\n        <table role=\"table\">\n          <thead>\n            <tr>\n              ${this.selectable ? html`\n                <th class=\"select-col\">\n                  <cg-checkbox size=\"sm\"\n                    ?checked=${allSelected}\n                    @cg-change=${this._toggleAll}\n                    label=\"\"\n                    aria-label=\"Select all rows\"></cg-checkbox>\n                </th>\n              ` : nothing}\n              ${this.columns.map(col => html`\n                <th\n                  class=\"${col.sortable ? 'sortable' : ''} ${this._sortKey === col.key ? 'sorted' : ''}\"\n                  data-align=${col.align ?? 'left'}\n                  style=${col.width ? `width: ${col.width}` : ''}\n                  tabindex=${col.sortable ? '0' : nothing}\n                  @click=${() => this._handleSort(col)}\n                  @keydown=${(e: KeyboardEvent) => { if (col.sortable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); this._handleSort(col); } }}\n                  aria-sort=${this._sortKey === col.key ? (this._sortDir === 'asc' ? 'ascending' : 'descending') : nothing}\n                >\n                  ${col.label}\n                  ${col.sortable ? html`<span class=\"sort-icon\"><cg-icon name=\"${this._sortKey === col.key ? (this._sortDir === 'asc' ? 'arrow-up' : 'arrow-down') : 'sort'}\" size=\"xs\"></cg-icon></span>` : nothing}\n                </th>\n              `)}\n            </tr>\n          </thead>\n          <tbody>\n            ${this.loading ? Array.from({ length: this.loadingRows }, (_, ri) => html`\n              <tr class=\"loading-row\">\n                ${this.selectable ? html`<td class=\"select-col\"><div class=\"loading-bar short\" style=\"width:16px;height:16px;border-radius:4px;margin:0 auto;\"></div></td>` : nothing}\n                ${this.columns.map((_, ci) => html`\n                  <td><div class=\"loading-bar ${widths[ci % widths.length]}\"></div></td>\n                `)}\n              </tr>\n            `) : sortedRows.length === 0 ? html`\n              <tr>\n                <td colspan=${this.columns.length + (this.selectable ? 1 : 0)}>\n                  <div class=\"empty-state\">${this.emptyText}</div>\n                </td>\n              </tr>\n            ` : sortedRows.map((row, rowIdx) => html`\n              <tr class=\"${this._selected.has(rowIdx) ? 'selected' : ''}\"\n                @click=${() => this._handleRowClick(rowIdx, row as unknown[])}>\n                ${this.selectable ? html`\n                  <td class=\"select-col\" @click=${(e: Event) => e.stopPropagation()}>\n                    <cg-checkbox size=\"sm\"\n                      ?checked=${this._selected.has(rowIdx)}\n                      @cg-change=${() => this._toggleRow(rowIdx)}\n                      label=\"\"\n                      aria-label=${`Select row ${rowIdx + 1}`}></cg-checkbox>\n                  </td>\n                ` : nothing}\n                ${this.columns.map((col, i) => html`\n                  <td data-align=${col.align ?? 'left'}>${this._renderCell(col, row as unknown[], rowIdx, i)}</td>\n                `)}\n              </tr>\n            `)}\n          </tbody>\n        </table>\n        </div>\n        <div class=\"table-footer\" ?hidden=${!this._hasFooter}>\n          <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-table': CgTable;\n  }\n}\n"],"names":["CgTable","LitElement","col","index","next","_","i","row","e","slot","rowIdx","value","idx","c","sorted","a","b","va","vb","sortedRows","allSelected","widths","html","nothing","ri","ci","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-table.js","sources":["../../../src/components/cg-table/cg-table.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Column definition for cg-table. */\nexport interface TableColumn {\n  key: string;\n  label: string;\n  align?: 'left' | 'center' | 'right';\n  sortable?: boolean;\n  width?: string;\n}\n\n/**\n * <cg-table> — Data table with sorting, selection, loading, and pagination.\n *\n * @example\n * ```html\n * <cg-table\n *   .columns=${[{key:'name',label:'Name',sortable:true},{key:'role',label:'Role'}]}\n *   .rows=${[['Alice','Designer'],['Bob','Developer']]}\n *   selectable striped\n * ></cg-table>\n * ```\n *\n * @slot footer - Footer area for pagination or summary\n *\n * @fires {CustomEvent<{key, direction}>} cg-sort - Column sorted\n * @fires {CustomEvent<{indices: number[]}>} cg-select - Row selection changed\n * @fires {CustomEvent<{index, row}>} cg-row-click - Row clicked\n *\n * @cssprop --cg-component-table-radius - Table border radius\n * @cssprop --cg-color-surface-table-header-background - Header background\n */\n@customElement('cg-table')\nexport class CgTable extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .table-wrapper {\n      overflow: hidden;\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n      border-radius: var(--cg-component-table-radius);\n      padding: var(--cg-spacing-4) 0;\n    }\n\n    .table-scroll {\n      overflow-x: auto;\n    }\n\n    /* Body area — slightly darker inset with inner rounding + border */\n    tbody {\n      background: var(--cg-overlay-dark-subtle);\n    }\n    tbody tr:first-child td {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n    }\n    tbody tr:last-child td {\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n    }\n    tbody td:first-child {\n      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n    }\n    tbody td:last-child {\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n    }\n    tbody tr:first-child td:first-child {\n      border-top-left-radius: var(--cg-border-radius-150);\n    }\n    tbody tr:first-child td:last-child {\n      border-top-right-radius: var(--cg-border-radius-150);\n    }\n    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--cg-border-radius-150);\n    }\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--cg-border-radius-150);\n    }\n\n    /* Rounded variants — outer wrapper + inner tbody corners */\n    :host([rounded=\"none\"]) .table-wrapper { border-radius: 0; }\n    :host([rounded=\"none\"]) tbody tr:first-child td:first-child,\n    :host([rounded=\"none\"]) tbody tr:first-child td:last-child,\n    :host([rounded=\"none\"]) tbody tr:last-child td:first-child,\n    :host([rounded=\"none\"]) tbody tr:last-child td:last-child { border-radius: 0; }\n\n    :host([rounded=\"sm\"]) .table-wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"sm\"]) tbody tr:first-child td:first-child { border-top-left-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"sm\"]) tbody tr:first-child td:last-child { border-top-right-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"sm\"]) tbody tr:last-child td:first-child { border-bottom-left-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"sm\"]) tbody tr:last-child td:last-child { border-bottom-right-radius: var(--cg-border-radius-50); }\n\n    :host([rounded=\"md\"]) .table-wrapper { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"md\"]) tbody tr:first-child td:first-child { border-top-left-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) tbody tr:first-child td:last-child { border-top-right-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) tbody tr:last-child td:first-child { border-bottom-left-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) tbody tr:last-child td:last-child { border-bottom-right-radius: var(--cg-border-radius-100); }\n\n    :host([rounded=\"lg\"]) .table-wrapper { border-radius: var(--cg-component-table-radius); }\n\n    table {\n      width: calc(100% - var(--cg-spacing-8) * 2);\n      margin: 0 var(--cg-spacing-8);\n      border-collapse: separate;\n      border-spacing: 0;\n      font-size: var(--cg-font-size-sm);\n    }\n    :host([compact]) table { font-size: var(--cg-font-size-xs); }\n\n    /* ── Header ── */\n    thead { position: sticky; top: 0; z-index: 1; }\n\n    th {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      text-align: left;\n      font-weight: var(--cg-font-weight-medium);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      background: transparent;\n      border-bottom: none;\n      white-space: nowrap;\n      user-select: none;\n    }\n    :host([compact]) th {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n    }\n\n    th.sortable { cursor: pointer; }\n    th.sortable:hover { color: var(--cg-color-action-primary-background-default); }\n    th.sortable:active {\n      transform: scale(0.98);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    th.sortable:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-color-action-primary-background-default);\n    }\n\n    th .sort-icon {\n      display: inline-flex;\n      margin-left: var(--cg-spacing-4);\n      opacity: 0.4;\n      vertical-align: middle;\n    }\n    th.sorted .sort-icon {\n      opacity: 1;\n      color: var(--cg-color-action-primary-background-default);\n    }\n\n    th[data-align=\"center\"] { text-align: center; }\n    th[data-align=\"right\"] { text-align: right; }\n\n    /* ── Selection checkbox column ── */\n    th.select-col, td.select-col {\n      width: var(--cg-spacing-48);\n      padding: 0 var(--cg-spacing-12);\n    }\n    th.select-col cg-checkbox,\n    td.select-col cg-checkbox {\n      min-height: 0;\n      transform: scale(0.85);\n    }\n\n    /* ── Cells ── */\n    td {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      color: var(--cg-color-surface-table-text);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-table-divider);\n      vertical-align: middle;\n    }\n    :host([compact]) td {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n    }\n\n    td[data-align=\"center\"] { text-align: center; }\n    td[data-align=\"right\"] { text-align: right; }\n\n    /* Row dividers — last row keeps its content border from the tbody border rules */\n\n    /* ── Row states ── */\n    tbody tr {\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    tbody tr:hover td {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    tbody tr.selected td {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    :host([clickable]) tbody tr {\n      cursor: pointer;\n    }\n\n    /* ── Striped ── */\n    :host([striped]) tbody tr:nth-child(even) td {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    :host([striped]) tbody tr:nth-child(even):hover td {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n\n    /* ── Empty state ── */\n    /* The empty-state cell controls its own spacing — strip the row's td\n       padding so it doesn't stack on top, which made the vertical gap read\n       larger than the left/right. Even padding keeps it centered in the\n       inner container on all four sides. */\n    td.empty-cell {\n      padding: 0;\n    }\n    .empty-state {\n      padding: var(--cg-spacing-32);\n      text-align: center;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* ── Loading ── */\n    .loading-row td {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n    }\n    .loading-bar {\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-action-secondary-background-hover);\n      animation: tablePulse 2s ease-in-out infinite;\n    }\n    .loading-bar.short { width: 60%; }\n    .loading-bar.med { width: 80%; }\n    .loading-bar.long { width: 95%; }\n\n    @keyframes tablePulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.4; }\n    }\n\n    /* ── Footer ── */\n    .table-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .table-footer ::slotted(*) {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .loading-bar { animation: none; opacity: 0.6; }\n    }\n  `];\n\n  @property({ type: Array }) columns: TableColumn[] = [];\n  @property({ type: Array }) rows: unknown[][] = [];\n  @property({ type: Boolean, reflect: true }) striped = false;\n  @property({ type: Boolean, reflect: true }) compact = false;\n  @property({ type: Boolean, reflect: true }) clickable = false;\n  @property({ type: Boolean, reflect: true }) selectable = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Number }) loadingRows = 5;\n  @property() emptyText = 'No data';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n\n  @state() private _sortKey = '';\n  @state() private _sortDir: 'asc' | 'desc' = 'asc';\n  @state() private _selected = new Set<number>();\n  @state() private _hasFooter = false;\n\n  private _handleSort(col: TableColumn) {\n    if (!col.sortable) return;\n    if (this._sortKey === col.key) {\n      this._sortDir = this._sortDir === 'asc' ? 'desc' : 'asc';\n    } else {\n      this._sortKey = col.key;\n      this._sortDir = 'asc';\n    }\n    this.dispatchEvent(new CustomEvent('cg-sort', {\n      detail: { key: this._sortKey, direction: this._sortDir },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _toggleRow(index: number) {\n    const next = new Set(this._selected);\n    if (next.has(index)) next.delete(index);\n    else next.add(index);\n    this._selected = next;\n    this.dispatchEvent(new CustomEvent('cg-select', {\n      detail: { indices: [...next] },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _toggleAll() {\n    if (this._selected.size === this.rows.length) {\n      this._selected = new Set();\n    } else {\n      this._selected = new Set(this.rows.map((_, i) => i));\n    }\n    this.dispatchEvent(new CustomEvent('cg-select', {\n      detail: { indices: [...this._selected] },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleRowClick(index: number, row: unknown[]) {\n    if (this.clickable) {\n      this.dispatchEvent(new CustomEvent('cg-row-click', {\n        detail: { index, row },\n        bubbles: true, composed: true,\n      }));\n    }\n  }\n\n  private _handleFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _getSortedRows(): unknown[][] {\n    if (!this._sortKey) return this.rows;\n    const idx = this.columns.findIndex(c => c.key === this._sortKey);\n    if (idx === -1) return this.rows;\n    const sorted = [...this.rows].sort((a, b) => {\n      const va = (a as unknown[])[idx];\n      const vb = (b as unknown[])[idx];\n      if (typeof va === 'number' && typeof vb === 'number') return va - vb;\n      return String(va ?? '').localeCompare(String(vb ?? ''));\n    });\n    return this._sortDir === 'desc' ? sorted.reverse() : sorted;\n  }\n\n  override render() {\n    const sortedRows = this._getSortedRows();\n    const allSelected = this.rows.length > 0 && this._selected.size === this.rows.length;\n    const widths = ['short', 'long', 'med', 'short'];\n\n    return html`\n      <div class=\"table-wrapper\">\n        <div class=\"table-scroll\">\n        <table role=\"table\">\n          <thead>\n            <tr>\n              ${this.selectable ? html`\n                <th class=\"select-col\">\n                  <cg-checkbox size=\"sm\"\n                    ?checked=${allSelected}\n                    @cg-change=${this._toggleAll}\n                    label=\"\"\n                    aria-label=\"Select all rows\"></cg-checkbox>\n                </th>\n              ` : nothing}\n              ${this.columns.map(col => html`\n                <th\n                  class=\"${col.sortable ? 'sortable' : ''} ${this._sortKey === col.key ? 'sorted' : ''}\"\n                  data-align=${col.align ?? 'left'}\n                  style=${col.width ? `width: ${col.width}` : ''}\n                  tabindex=${col.sortable ? '0' : nothing}\n                  @click=${() => this._handleSort(col)}\n                  @keydown=${(e: KeyboardEvent) => { if (col.sortable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); this._handleSort(col); } }}\n                  aria-sort=${this._sortKey === col.key ? (this._sortDir === 'asc' ? 'ascending' : 'descending') : nothing}\n                >\n                  ${col.label}\n                  ${col.sortable ? html`<span class=\"sort-icon\"><cg-icon name=\"${this._sortKey === col.key ? (this._sortDir === 'asc' ? 'arrow-up' : 'arrow-down') : 'sort'}\" size=\"xs\"></cg-icon></span>` : nothing}\n                </th>\n              `)}\n            </tr>\n          </thead>\n          <tbody>\n            ${this.loading ? Array.from({ length: this.loadingRows }, (_, ri) => html`\n              <tr class=\"loading-row\">\n                ${this.selectable ? html`<td class=\"select-col\"><div class=\"loading-bar short\" style=\"width:16px;height:16px;border-radius:4px;margin:0 auto;\"></div></td>` : nothing}\n                ${this.columns.map((_, ci) => html`\n                  <td><div class=\"loading-bar ${widths[ci % widths.length]}\"></div></td>\n                `)}\n              </tr>\n            `) : sortedRows.length === 0 ? html`\n              <tr>\n                <td class=\"empty-cell\" colspan=${this.columns.length + (this.selectable ? 1 : 0)}>\n                  <div class=\"empty-state\">${this.emptyText}</div>\n                </td>\n              </tr>\n            ` : sortedRows.map((row, rowIdx) => html`\n              <tr class=\"${this._selected.has(rowIdx) ? 'selected' : ''}\"\n                @click=${() => this._handleRowClick(rowIdx, row as unknown[])}>\n                ${this.selectable ? html`\n                  <td class=\"select-col\" @click=${(e: Event) => e.stopPropagation()}>\n                    <cg-checkbox size=\"sm\"\n                      ?checked=${this._selected.has(rowIdx)}\n                      @cg-change=${() => this._toggleRow(rowIdx)}\n                      label=\"\"\n                      aria-label=${`Select row ${rowIdx + 1}`}></cg-checkbox>\n                  </td>\n                ` : nothing}\n                ${this.columns.map((col, i) => html`\n                  <td data-align=${col.align ?? 'left'}>${(row as unknown[])[i] ?? ''}</td>\n                `)}\n              </tr>\n            `)}\n          </tbody>\n        </table>\n        </div>\n        <div class=\"table-footer\" ?hidden=${!this._hasFooter}>\n          <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-table': CgTable;\n  }\n}\n"],"names":["CgTable","LitElement","col","index","next","_","i","row","slot","idx","sorted","a","b","va","vb","sortedRows","allSelected","widths","html","nothing","e","ri","ci","rowIdx","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { css as u, LitElement as v, nothing as b, html as d } from "lit";
 import { property as n, state as g, query as p, customElement as h } from "lit/decorators.js";
-import { h as f, r as w } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as w } from "../../chunks/premium.css-DHekUEUt.js";
 var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (a, i, s, e) => {
   for (var t = e > 1 ? void 0 : e ? m(i, s) : i, c = a.length - 1, l; c >= 0; c--)
     (l = a[c]) && (t = (e ? l(i, s, t) : l(t)) || t);

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

@@ -1,6 +1,6 @@
 import { css as d, LitElement as h, nothing as p, html as c } from "lit";
 import { property as r, state as g, query as v, customElement as f } from "lit/decorators.js";
-import { h as b, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as b, r as m } from "../../chunks/premium.css-DHekUEUt.js";
 var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, o, n, s) => {
   for (var i = s > 1 ? void 0 : s ? _(o, n) : o, l = e.length - 1, u; l >= 0; l--)
     (u = e[l]) && (i = (s ? u(o, n, i) : u(i)) || i);

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

@@ -1,6 +1,6 @@
 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";
+import { h as u, r as m } from "../../chunks/premium.css-DHekUEUt.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);

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

@@ -1,6 +1,6 @@
 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";
+import { h as b, r as x } from "../../chunks/premium.css-DHekUEUt.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);

package/dist/components/cg-time-picker/cg-time-picker.js

@@ -1,6 +1,6 @@
 import { css as u, LitElement as h, nothing as p, html as n } from "lit";
 import { property as a, state as l, customElement as v } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
 var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (e, i, c, t) => {
   for (var s = t > 1 ? void 0 : t ? _(i, c) : i, d = e.length - 1, g; d >= 0; d--)
     (g = e[d]) && (s = (t ? g(i, c, s) : g(s)) || s);

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

@@ -1,6 +1,6 @@
 import { css as m, LitElement as f, svg as c, nothing as g, html as l } from "lit";
 import { property as u, state as p, customElement as v } from "lit/decorators.js";
-import { r as h } from "../../chunks/premium.css-9I4kHrsl.js";
+import { r as h } from "../../chunks/premium.css-DHekUEUt.js";
 var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, d = (t, r, a, s) => {
   for (var o = s > 1 ? void 0 : s ? w(r, a) : r, n = t.length - 1, i; n >= 0; n--)
     (i = t[n]) && (o = (s ? i(r, a, o) : i(o)) || o);
@@ -156,7 +156,7 @@ e.styles = [h, m`
     .toast.error { border-color: var(--cg-color-status-error-border-default); }
     .toast.info { border-color: var(--cg-color-status-info-border-default); }
     .toast.ai {
-      border-left: var(--cg-border-width-200) solid var(--cg-color-action-primary-background-default);
+      border-left: var(--cg-border-width-300) solid var(--cg-color-action-primary-border-default);
     }
 
     /* Status icon — colored per variant to match the border + give the toast
@@ -196,7 +196,7 @@ e.styles = [h, m`
       font: inherit;
       font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-medium);
-      padding: var(--cg-spacing-6) var(--cg-spacing-10);
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
       border-radius: var(--cg-border-radius-50);
       cursor: pointer;
       transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);