@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,14 +1,23 @@
 import { css as c, LitElement as h, html as u } from "lit";
-import { property as a, customElement as p } from "lit/decorators.js";
-import { h as g, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (n, i, s, o) => {
-  for (var t = o > 1 ? void 0 : o ? f(i, s) : i, l = n.length - 1, d; l >= 0; l--)
-    (d = n[l]) && (t = (o ? d(i, s, t) : d(t)) || t);
-  return o && t && v(i, s, t), t;
+import { property as o, customElement as g } from "lit/decorators.js";
+import { h as p, r as m, p as v } from "../../chunks/premium.css-DHekUEUt.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (n, e, s, i) => {
+  for (var t = i > 1 ? void 0 : i ? b(e, s) : e, d = n.length - 1, l; d >= 0; d--)
+    (l = n[d]) && (t = (i ? l(e, s, t) : l(t)) || t);
+  return i && t && f(e, s, t), t;
 };
-let e = class extends h {
+let r = class extends h {
   constructor() {
-    super(...arguments), this.variant = "rectangular", this.width = "100%", this.height = "", this.lines = 3, this.animated = !0, this.rounded = "md";
+    super(...arguments), this.variant = "rectangular", this.width = "100%", this.height = "", this.lines = 3, this.noAnimation = !1, this.rounded = "md";
+  }
+  /** @deprecated Use `noAnimation` / `no-animation`. Kept as a JS-property
+   *  alias so adapter wrappers and existing consumers don't break — the old
+   *  `animated="false"` attribute path never worked (Lit Boolean semantics). */
+  get animated() {
+    return !this.noAnimation;
+  }
+  set animated(n) {
+    this.noAnimation = !n;
   }
   _getDefaultHeight() {
     if (this.height) return this.height;
@@ -17,23 +26,24 @@ let e = class extends h {
         return "40px";
       case "rectangular":
         return "80px";
-      case "text":
-        return "12px";
       default:
         return "80px";
     }
   }
   render() {
     if (this.variant === "text") {
-      const i = Math.max(1, Math.min(20, this.lines));
+      const e = Math.max(1, Math.min(20, this.lines));
       return u`
         <div class="lines-container" role="status" aria-label="Loading content" aria-busy="true">
-          ${Array.from({ length: i }, () => u`
-            <div
-              class="skeleton text-line"
-              style="width: ${this.width}; height: ${this._getDefaultHeight()}"
-            ></div>
-          `)}
+          ${Array.from({ length: e }, (s, i) => {
+        const t = this.width !== "100%" ? this.width : i === e - 1 && e > 1 ? "60%" : i % 2 === 1 ? "90%" : "100%";
+        return u`
+              <div
+                class="skeleton text-line"
+                style="width: ${t}${this.height ? `; height: ${this.height}` : ""}"
+              ></div>
+            `;
+      })}
         </div>
       `;
     }
@@ -49,27 +59,23 @@ let e = class extends h {
     `;
   }
 };
-e.styles = [g, m, c`
+r.styles = [p, m, v, c`
     .skeleton {
-      background: var(--cg-color-action-secondary-background-hover);
-      animation: skeletonPulse 2s ease-in-out infinite;
-    }
-
-    @keyframes skeletonPulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.4; }
+      background: var(--cg-color-loading-spinner-secondary);
+      animation: pulse 2s ease-in-out infinite;
     }
 
-    :host([animated="false"]) .skeleton {
+    :host([no-animation]) .skeleton {
       animation: none;
     }
 
-    /* ── Rounded variants ── */
-    :host([rounded="none"]) .skeleton { border-radius: 0; }
-    :host([rounded="sm"]) .skeleton { border-radius: var(--cg-border-radius-50); }
-    :host([rounded="md"]) .skeleton { border-radius: var(--cg-border-radius-100); }
-    :host([rounded="lg"]) .skeleton { border-radius: var(--cg-border-radius-150); }
-    :host([rounded="full"]) .skeleton { border-radius: var(--cg-border-radius-full); }
+    /* ── Rounded variants (rectangular shape only — circular and text
+       lines own their radii) ── */
+    :host([rounded="none"]) .rectangular { border-radius: 0; }
+    :host([rounded="sm"]) .rectangular { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .rectangular { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .rectangular { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .rectangular { border-radius: var(--cg-border-radius-full); }
 
     /* ── Variants ── */
     .rectangular {
@@ -77,7 +83,7 @@ e.styles = [g, m, c`
     }
 
     .circular {
-      border-radius: 50%;
+      border-radius: var(--cg-border-radius-full);
     }
 
     .text-line {
@@ -89,14 +95,6 @@ e.styles = [g, m, c`
       margin-top: var(--cg-spacing-8);
     }
 
-    /* Text lines get varying widths for realism */
-    .text-line:last-child:not(:first-child) {
-      width: 60% !important;
-    }
-    .text-line:nth-child(even) {
-      width: 90% !important;
-    }
-
     .lines-container {
       display: flex;
       flex-direction: column;
@@ -109,28 +107,28 @@ e.styles = [g, m, c`
       }
     }
   `];
-r([
-  a({ type: String, reflect: !0 })
-], e.prototype, "variant", 2);
-r([
-  a({ type: String })
-], e.prototype, "width", 2);
-r([
-  a({ type: String })
-], e.prototype, "height", 2);
-r([
-  a({ type: Number })
-], e.prototype, "lines", 2);
-r([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "animated", 2);
-r([
-  a({ reflect: !0 })
-], e.prototype, "rounded", 2);
-e = r([
-  p("cg-skeleton")
-], e);
+a([
+  o({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+a([
+  o({ type: String })
+], r.prototype, "width", 2);
+a([
+  o({ type: String })
+], r.prototype, "height", 2);
+a([
+  o({ type: Number })
+], r.prototype, "lines", 2);
+a([
+  o({ type: Boolean, reflect: !0, attribute: "no-animation" })
+], r.prototype, "noAnimation", 2);
+a([
+  o({ reflect: !0 })
+], r.prototype, "rounded", 2);
+r = a([
+  g("cg-skeleton")
+], r);
 export {
-  e as CgSkeleton
+  r as CgSkeleton
 };
 //# sourceMappingURL=cg-skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cg-skeleton.js","sources":["../../../src/components/cg-skeleton/cg-skeleton.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-skeleton> — Loading placeholder with pulse animation.\n *\n * @example\n * ```html\n * <cg-skeleton variant=\"rectangular\" width=\"100%\" height=\"80px\"></cg-skeleton>\n * <cg-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></cg-skeleton>\n * <cg-skeleton variant=\"text\" lines=\"3\"></cg-skeleton>\n * ```\n *\n * @cssprop --cg-color-loading-spinner-secondary - Skeleton background color\n * @cssprop --cg-border-radius-100 - Default border radius (12px)\n */\n@customElement('cg-skeleton')\nexport class CgSkeleton extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .skeleton {\n      background: var(--cg-color-action-secondary-background-hover);\n      animation: skeletonPulse 2s ease-in-out infinite;\n    }\n\n    @keyframes skeletonPulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.4; }\n    }\n\n    :host([animated=\"false\"]) .skeleton {\n      animation: none;\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .skeleton { border-radius: 0; }\n    :host([rounded=\"sm\"]) .skeleton { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .skeleton { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .skeleton { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .skeleton { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Variants ── */\n    .rectangular {\n      border-radius: var(--cg-border-radius-100);\n    }\n\n    .circular {\n      border-radius: 50%;\n    }\n\n    .text-line {\n      border-radius: var(--cg-border-radius-50);\n      height: var(--cg-spacing-12);\n    }\n\n    .text-line + .text-line {\n      margin-top: var(--cg-spacing-8);\n    }\n\n    /* Text lines get varying widths for realism */\n    .text-line:last-child:not(:first-child) {\n      width: 60% !important;\n    }\n    .text-line:nth-child(even) {\n      width: 90% !important;\n    }\n\n    .lines-container {\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* Reduced motion: no animation, static placeholder */\n    @media (prefers-reduced-motion: reduce) {\n      .skeleton {\n        animation: none !important;\n      }\n    }\n  `];\n\n  @property({ type: String, reflect: true }) variant: 'text' | 'circular' | 'rectangular' = 'rectangular';\n  @property({ type: String }) width = '100%';\n  @property({ type: String }) height = '';\n  @property({ type: Number }) lines = 3;\n  @property({ type: Boolean, reflect: true }) animated = true;\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n\n  private _getDefaultHeight(): string {\n    if (this.height) return this.height;\n    switch (this.variant) {\n      case 'circular': return '40px';\n      case 'rectangular': return '80px';\n      case 'text': return '12px';\n      default: return '80px';\n    }\n  }\n\n  override render() {\n    if (this.variant === 'text') {\n      const lineCount = Math.max(1, Math.min(20, this.lines));\n      return html`\n        <div class=\"lines-container\" role=\"status\" aria-label=\"Loading content\" aria-busy=\"true\">\n          ${Array.from({ length: lineCount }, () => html`\n            <div\n              class=\"skeleton text-line\"\n              style=\"width: ${this.width}; height: ${this._getDefaultHeight()}\"\n            ></div>\n          `)}\n        </div>\n      `;\n    }\n\n    const shapeClass = this.variant === 'circular' ? 'circular' : 'rectangular';\n\n    return html`\n      <div\n        class=\"skeleton ${shapeClass}\"\n        role=\"status\"\n        aria-label=\"Loading content\"\n        aria-busy=\"true\"\n        style=\"width: ${this.width}; height: ${this._getDefaultHeight()}\"\n      ></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-skeleton': CgSkeleton;\n  }\n}\n"],"names":["CgSkeleton","LitElement","lineCount","html","shapeClass","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAkBO,IAAMA,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8DsC,KAAA,UAA+C,eAC9D,KAAA,QAAQ,QACR,KAAA,SAAS,IACT,KAAA,QAAQ,GACQ,KAAA,WAAW,IAC1B,KAAA,UAAgD;AAAA,EAAA;AAAA,EAErE,oBAA4B;AAClC,QAAI,KAAK,OAAQ,QAAO,KAAK;AAC7B,YAAQ,KAAK,SAAA;AAAA,MACX,KAAK;AAAY,eAAO;AAAA,MACxB,KAAK;AAAe,eAAO;AAAA,MAC3B,KAAK;AAAQ,eAAO;AAAA,MACpB;AAAS,eAAO;AAAA,IAAA;AAAA,EAEpB;AAAA,EAES,SAAS;AAChB,QAAI,KAAK,YAAY,QAAQ;AAC3B,YAAMC,IAAY,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,KAAK,CAAC;AACtD,aAAOC;AAAA;AAAA,YAED,MAAM,KAAK,EAAE,QAAQD,EAAA,GAAa,MAAMC;AAAA;AAAA;AAAA,8BAGtB,KAAK,KAAK,aAAa,KAAK,mBAAmB;AAAA;AAAA,WAElE,CAAC;AAAA;AAAA;AAAA,IAGR;AAEA,UAAMC,IAAa,KAAK,YAAY,aAAa,aAAa;AAE9D,WAAOD;AAAA;AAAA,0BAEeC,CAAU;AAAA;AAAA;AAAA;AAAA,wBAIZ,KAAK,KAAK,aAAa,KAAK,mBAAmB;AAAA;AAAA;AAAA,EAGrE;AACF;AA1GaJ,EACK,SAAS,CAACK,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2DnD;AAE0CC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9D9BT,EA8DgC,WAAA,WAAA,CAAA;AACfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/DfT,EA+DiB,WAAA,SAAA,CAAA;AACAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhEfT,EAgEiB,WAAA,UAAA,CAAA;AACAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjEfT,EAiEiB,WAAA,SAAA,CAAA;AACgBQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlE/BT,EAkEiC,WAAA,YAAA,CAAA;AACfQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnEhBT,EAmEkB,WAAA,WAAA,CAAA;AAnElBA,IAANQ,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfV,CAAA;"}
+{"version":3,"file":"cg-skeleton.js","sources":["../../../src/components/cg-skeleton/cg-skeleton.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, pulseKeyframes, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-skeleton> — Loading placeholder with pulse animation.\n *\n * @example\n * ```html\n * <cg-skeleton variant=\"rectangular\" width=\"100%\" height=\"80px\"></cg-skeleton>\n * <cg-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></cg-skeleton>\n * <cg-skeleton variant=\"text\" lines=\"3\"></cg-skeleton>\n * <cg-skeleton no-animation></cg-skeleton>\n * ```\n *\n * @cssprop --cg-color-loading-spinner-secondary - Skeleton background color\n * @cssprop --cg-border-radius-100 - Default border radius (12px)\n */\n@customElement('cg-skeleton')\nexport class CgSkeleton extends LitElement {\n  static override styles = [hostBlock, reducedMotion, pulseKeyframes, css`\n    .skeleton {\n      background: var(--cg-color-loading-spinner-secondary);\n      animation: pulse 2s ease-in-out infinite;\n    }\n\n    :host([no-animation]) .skeleton {\n      animation: none;\n    }\n\n    /* ── Rounded variants (rectangular shape only — circular and text\n       lines own their radii) ── */\n    :host([rounded=\"none\"]) .rectangular { border-radius: 0; }\n    :host([rounded=\"sm\"]) .rectangular { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .rectangular { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .rectangular { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .rectangular { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Variants ── */\n    .rectangular {\n      border-radius: var(--cg-border-radius-100);\n    }\n\n    .circular {\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    .text-line {\n      border-radius: var(--cg-border-radius-50);\n      height: var(--cg-spacing-12);\n    }\n\n    .text-line + .text-line {\n      margin-top: var(--cg-spacing-8);\n    }\n\n    .lines-container {\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* Reduced motion: no animation, static placeholder */\n    @media (prefers-reduced-motion: reduce) {\n      .skeleton {\n        animation: none !important;\n      }\n    }\n  `];\n\n  @property({ type: String, reflect: true }) variant: 'text' | 'circular' | 'rectangular' = 'rectangular';\n  @property({ type: String }) width = '100%';\n  @property({ type: String }) height = '';\n  @property({ type: Number }) lines = 3;\n  @property({ type: Boolean, reflect: true, attribute: 'no-animation' }) noAnimation = false;\n\n  /** @deprecated Use `noAnimation` / `no-animation`. Kept as a JS-property\n   *  alias so adapter wrappers and existing consumers don't break — the old\n   *  `animated=\"false\"` attribute path never worked (Lit Boolean semantics). */\n  get animated(): boolean { return !this.noAnimation; }\n  set animated(v: boolean) { this.noAnimation = !v; }\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n\n  private _getDefaultHeight(): string {\n    if (this.height) return this.height;\n    switch (this.variant) {\n      case 'circular': return '40px';\n      case 'rectangular': return '80px';\n      default: return '80px';\n    }\n  }\n\n  override render() {\n    if (this.variant === 'text') {\n      const lineCount = Math.max(1, Math.min(20, this.lines));\n      return html`\n        <div class=\"lines-container\" role=\"status\" aria-label=\"Loading content\" aria-busy=\"true\">\n          ${Array.from({ length: lineCount }, (_, i) => {\n            // Varying widths for realism, unless the user set an explicit width.\n            const w = this.width !== '100%'\n              ? this.width\n              : i === lineCount - 1 && lineCount > 1\n                ? '60%'\n                : i % 2 === 1\n                  ? '90%'\n                  : '100%';\n            return html`\n              <div\n                class=\"skeleton text-line\"\n                style=\"width: ${w}${this.height ? `; height: ${this.height}` : ''}\"\n              ></div>\n            `;\n          })}\n        </div>\n      `;\n    }\n\n    const shapeClass = this.variant === 'circular' ? 'circular' : 'rectangular';\n\n    return html`\n      <div\n        class=\"skeleton ${shapeClass}\"\n        role=\"status\"\n        aria-label=\"Loading content\"\n        aria-busy=\"true\"\n        style=\"width: ${this.width}; height: ${this._getDefaultHeight()}\"\n      ></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-skeleton': CgSkeleton;\n  }\n}\n"],"names":["CgSkeleton","LitElement","v","lineCount","html","_","w","shapeClass","hostBlock","reducedMotion","pulseKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAkDsC,KAAA,UAA+C,eAC9D,KAAA,QAAQ,QACR,KAAA,SAAS,IACT,KAAA,QAAQ,GACmC,KAAA,cAAc,IAOxD,KAAA,UAAgD;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAF7E,IAAI,WAAoB;AAAE,WAAO,CAAC,KAAK;AAAA,EAAa;AAAA,EACpD,IAAI,SAASC,GAAY;AAAE,SAAK,cAAc,CAACA;AAAA,EAAG;AAAA,EAG1C,oBAA4B;AAClC,QAAI,KAAK,OAAQ,QAAO,KAAK;AAC7B,YAAQ,KAAK,SAAA;AAAA,MACX,KAAK;AAAY,eAAO;AAAA,MACxB,KAAK;AAAe,eAAO;AAAA,MAC3B;AAAS,eAAO;AAAA,IAAA;AAAA,EAEpB;AAAA,EAES,SAAS;AAChB,QAAI,KAAK,YAAY,QAAQ;AAC3B,YAAMC,IAAY,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,KAAK,CAAC;AACtD,aAAOC;AAAA;AAAA,YAED,MAAM,KAAK,EAAE,QAAQD,KAAa,CAACE,GAAG,MAAM;AAE5C,cAAMC,IAAI,KAAK,UAAU,SACrB,KAAK,QACL,MAAMH,IAAY,KAAKA,IAAY,IACjC,QACA,IAAI,MAAM,IACR,QACA;AACR,eAAOC;AAAA;AAAA;AAAA,gCAGaE,CAAC,GAAG,KAAK,SAAS,aAAa,KAAK,MAAM,KAAK,EAAE;AAAA;AAAA;AAAA,MAGvE,CAAC,CAAC;AAAA;AAAA;AAAA,IAGR;AAEA,UAAMC,IAAa,KAAK,YAAY,aAAa,aAAa;AAE9D,WAAOH;AAAA;AAAA,0BAEeG,CAAU;AAAA;AAAA;AAAA;AAAA,wBAIZ,KAAK,KAAK,aAAa,KAAK,mBAAmB;AAAA;AAAA;AAAA,EAGrE;AACF;AA7GaP,EACK,SAAS,CAACQ,GAAWC,GAAeC,GAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA+CnE;AAE0CC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlD9Bb,EAkDgC,WAAA,WAAA,CAAA;AACfY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnDfb,EAmDiB,WAAA,SAAA,CAAA;AACAY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApDfb,EAoDiB,WAAA,UAAA,CAAA;AACAY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArDfb,EAqDiB,WAAA,SAAA,CAAA;AAC2CY,EAAA;AAAA,EAAtEC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM,WAAW,gBAAgB;AAAA,GAtD1Db,EAsD4D,WAAA,eAAA,CAAA;AAO1CY,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7DhBb,EA6DkB,WAAA,WAAA,CAAA;AA7DlBA,IAANY,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfd,CAAA;"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-slider.d.ts","sourceRoot":"","sources":["../../../src/components/cg-slider/cg-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BAqMnB;IAE0B,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAa;IACrD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjD,KAAK,SAAM;IACX,IAAI,SAAM;IACM,KAAK,SAAM;IACX,GAAG,SAAK;IACR,GAAG,SAAO;IACV,IAAI,SAAK;IACO,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,SAAS,UAAQ;IACjB,SAAS,UAAS;IAClB,WAAW,UAAQ;IACpC,IAAI,SAAM;IAEb,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,KAAK,CAAK;IAC3B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAA8C;IAEvD,OAAO,CAAC,OAAO,EAAE,cAAc;IAOxC,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,cAAc;IACtB,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,aAAa;IAEZ,iBAAiB;IAKjB,oBAAoB;IAKpB,MAAM;CA8DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,WAAW,EAAE,QAAQ,CAAC;KAAE;CAC3D"}
+{"version":3,"file":"cg-slider.d.ts","sourceRoot":"","sources":["../../../src/components/cg-slider/cg-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BAoNnB;IAE0B,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAa;IACrD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjD,KAAK,SAAM;IACX,IAAI,SAAM;IACM,KAAK,SAAM;IACX,GAAG,SAAK;IACR,GAAG,SAAO;IACV,IAAI,SAAK;IACO,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,SAAS,UAAQ;IACjB,SAAS,UAAS;IAClB,WAAW,UAAQ;IACpC,IAAI,SAAM;IAEb,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,KAAK,CAAK;IAC3B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAA8C;IAEvD,OAAO,CAAC,OAAO,EAAE,cAAc;IAOxC,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,cAAc;IAEtB,OAAO,CAAC,YAAY,CAAqD;IACzE,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,aAAa;IAEZ,iBAAiB;IAKjB,oBAAoB;IAKpB,MAAM;CAuDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,WAAW,EAAE,QAAQ,CAAC;KAAE;CAC3D"}

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

@@ -1,30 +1,32 @@
-import { css as p, LitElement as u, nothing as s, html as n } from "lit";
-import { property as e, state as d, customElement as v } from "lit/decorators.js";
-import { h as b, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var f = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (i, r, c, l) => {
-  for (var o = l > 1 ? void 0 : l ? w(r, c) : r, g = i.length - 1, h; g >= 0; g--)
-    (h = i[g]) && (o = (l ? h(r, c, o) : h(o)) || o);
-  return l && o && f(r, c, o), o;
+import { css as p, LitElement as u, nothing as o, html as n } from "lit";
+import { property as i, state as d, customElement as v } from "lit/decorators.js";
+import { h as b, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+var f = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (e, r, c, l) => {
+  for (var s = l > 1 ? void 0 : l ? w(r, c) : r, g = e.length - 1, h; g >= 0; g--)
+    (h = e[g]) && (s = (l ? h(r, c, s) : h(s)) || s);
+  return l && s && f(r, c, s), s;
 };
 let t = class extends u {
   constructor() {
-    super(), this.variant = "default", this.size = "md", this.label = "", this.name = "", this.value = 50, this.min = 0, this.max = 100, this.step = 1, this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.showValue = !0, this.showRange = !1, this.showTooltip = !0, this.unit = "", this._dragging = !1, this._hovering = !1, this._tilt = 0, this._prevValue = 0, this._tiltTimer = null, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+    super(), this.variant = "default", this.size = "md", this.label = "", this.name = "", this.value = 50, this.min = 0, this.max = 100, this.step = 1, this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.showValue = !0, this.showRange = !1, this.showTooltip = !0, this.unit = "", this._dragging = !1, this._hovering = !1, this._tilt = 0, this._prevValue = 0, this._tiltTimer = null, this._onPointerUp = () => {
+      this._dragging = !1, this._tilt = 0;
+    }, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
   }
-  updated(i) {
-    super.updated(i), i.has("value") && this._internals?.setFormValue(String(this.value));
+  updated(e) {
+    super.updated(e), e.has("value") && this._internals?.setFormValue(String(this.value));
   }
   formResetCallback() {
-    const i = this.getAttribute("value");
-    this.value = i !== null ? Number(i) : 50;
+    const e = this.getAttribute("value");
+    this.value = e !== null ? Number(e) : 50;
   }
-  formStateRestoreCallback(i) {
-    this.value = Number(i);
+  formStateRestoreCallback(e) {
+    this.value = Number(e);
   }
   _getPercent() {
     return (this.value - this.min) / (this.max - this.min) * 100;
   }
-  _handleInput(i) {
-    const r = Number(i.target.value), c = r - this._prevValue;
+  _handleInput(e) {
+    const r = Number(e.target.value), c = r - this._prevValue;
     this._prevValue = r;
     const l = Math.max(-20, Math.min(20, c * 4));
     this._tilt = l, this._tiltTimer && clearTimeout(this._tiltTimer), this._tiltTimer = setTimeout(() => {
@@ -34,14 +36,11 @@ let t = class extends u {
   _onPointerDown() {
     this._dragging = !0, this._prevValue = this.value;
   }
-  _onPointerUp() {
-    this._dragging = !1, this._tilt = 0;
-  }
   _onMouseEnter() {
     this._hovering = !0;
   }
   _onMouseLeave() {
-    this._hovering = !1, this._dragging = !1;
+    this._hovering = !1;
   }
   connectedCallback() {
     super.connectedCallback(), window.addEventListener("pointerup", this._onPointerUp);
@@ -50,36 +49,29 @@ let t = class extends u {
     super.disconnectedCallback(), window.removeEventListener("pointerup", this._onPointerUp);
   }
   render() {
-    const i = this._getPercent(), r = this.showTooltip && (this._hovering || this._dragging);
+    const e = this._getPercent(), r = this.showTooltip && (this._hovering || this._dragging);
     return n`
       <div class="slider-wrapper">
         ${this.label || this.showValue ? n`
           <div class="header">
-            ${this.label ? n`<span class="label">${this.label}</span>` : s}
-            ${this.showValue ? n`<span class="value-display ${this._dragging ? "active" : ""}">${this.value}${this.unit}</span>` : s}
+            ${this.label ? n`<span class="label">${this.label}</span>` : o}
+            ${this.showValue ? n`<span class="value-display ${this._dragging ? "active" : ""}">${this.value}${this.unit}</span>` : o}
           </div>
-        ` : s}
+        ` : o}
 
         <div class="track-container"
           @mouseenter=${this._onMouseEnter}
           @mouseleave=${this._onMouseLeave}
         >
           <div class="track">
-            <div class="track-fill ${this._dragging ? "dragging" : ""}" style="width: ${i}%"></div>
+            <div class="track-fill ${this._dragging ? "dragging" : ""}" style="width: ${e}%"></div>
           </div>
 
-          <div class="thumb-wrapper ${this._dragging ? "dragging" : ""}" style="left: ${i}%; --_tilt: ${this._tilt}deg">
-            <div class="thumb ${this._dragging ? "dragging" : ""}"
-              tabindex=${this.disabled ? "-1" : "0"}
-              role="slider"
-              aria-valuenow=${this.value}
-              aria-valuemin=${this.min}
-              aria-valuemax=${this.max}
-              aria-label=${this.label || s}
-            >
+          <div class="thumb-wrapper ${this._dragging ? "dragging" : ""}" style="left: calc(${e}% + (0.5 - ${e / 100}) * var(--_thumb-size)); --_tilt: ${this._tilt}deg">
+            <div class="thumb ${this._dragging ? "dragging" : ""}" aria-hidden="true">
               ${this.showTooltip ? n`
                 <div class="tooltip ${r ? "visible" : ""}">${this.value}${this.unit}</div>
-              ` : s}
+              ` : o}
             </div>
           </div>
 
@@ -90,14 +82,14 @@ let t = class extends u {
             max=${this.max}
             step=${this.step}
             ?disabled=${this.disabled || this.loading}
-            aria-hidden="true"
-            tabindex="-1"
-            name=${this.name || s}
+            aria-label=${this.label || "Slider"}
+            aria-valuetext="${this.value}${this.unit}"
+            name=${this.name || o}
             @input=${this._handleInput}
             @pointerdown=${this._onPointerDown}
           />
 
-          ${this.loading ? n`<div class="loading-bar" aria-hidden="true"></div>` : s}
+          ${this.loading ? n`<div class="loading-bar" aria-hidden="true"></div>` : o}
         </div>
 
         ${this.showRange ? n`
@@ -105,7 +97,7 @@ let t = class extends u {
             <span class="range-label">${this.min}${this.unit}</span>
             <span class="range-label">${this.max}${this.unit}</span>
           </div>
-        ` : s}
+        ` : o}
       </div>
     `;
   }
@@ -118,13 +110,13 @@ t.styles = [b, m, p`
       display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--cg-spacing-8);
     }
     .label { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-base-text); }
-    .value-display { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-action-primary-background-default); transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out); }
+    .value-display { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-accent-text); transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out); }
     .value-display.active { transform: scale(1.1); }
 
     /* ── Track container ── */
     .track-container {
       position: relative;
-      height: 44px;
+      height: var(--cg-spacing-48);
       display: flex;
       align-items: center;
     }
@@ -155,6 +147,14 @@ t.styles = [b, m, p`
     }
 
     /* ── Thumb ── */
+    /* Private travel-inset var — keeps the thumb center inside the track at min/max
+       and aligned with the native input's inset thumb hotspot. */
+    :host { --_thumb-size: var(--cg-spacing-20); }
+    :host([size="sm"]:not([variant="toggle"])) { --_thumb-size: var(--cg-spacing-16); }
+    :host([size="lg"]:not([variant="toggle"])) { --_thumb-size: var(--cg-spacing-24); }
+    :host([variant="toggle"][size="sm"]) { --_thumb-size: var(--cg-spacing-12); }
+    :host([variant="toggle"][size="lg"]) { --_thumb-size: var(--cg-spacing-24); }
+
     .thumb-wrapper {
       position: absolute;
       top: 50%;
@@ -171,27 +171,31 @@ t.styles = [b, m, p`
       height: var(--cg-spacing-20);
       border-radius: var(--cg-border-radius-full);
       background: var(--cg-color-slider-thumb-background);
-      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);
+      border: var(--cg-border-width-100) solid var(--cg-color-slider-thumb-border);
       box-shadow: var(--cg-elevation-1);
       transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       pointer-events: auto;
-      cursor: grab;
     }
-    .thumb:hover {
+    .track-container:hover .thumb:not(.dragging) {
       transform: scale(1.15);
       box-shadow: var(--cg-elevation-2);
     }
     .thumb.dragging {
-      cursor: grabbing;
       transform: scale(1.2);
       box-shadow: var(--cg-elevation-3);
     }
 
-    /* Focus ring */
-    .thumb:focus-visible {
-      outline: none;
+    /* Focus ring — native input is the accessible control; ring paints on the visual thumb.
+       :not(.dragging) keeps the ring above the container-hover rule in specificity. */
+    .track-container:has(input:focus-visible) .thumb:not(.dragging) {
       box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
     }
+    :host([error]) .track-container:has(input:focus-visible) .thumb:not(.dragging) {
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+    :host([success]) .track-container:has(input:focus-visible) .thumb:not(.dragging) {
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
 
     /* ── Floating tooltip ── */
     .tooltip {
@@ -205,7 +209,7 @@ t.styles = [b, m, p`
       color: var(--cg-color-tooltip-text);
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-semibold);
-      border-radius: var(--cg-border-radius-100);
+      border-radius: var(--cg-component-tooltip-radius);
       white-space: nowrap;
       pointer-events: none;
       opacity: 0;
@@ -233,14 +237,15 @@ t.styles = [b, m, p`
       top: 0;
       left: 0;
       opacity: 0;
-      cursor: pointer;
+      cursor: grab;
       margin: 0;
       z-index: 3;
     }
+    .track-container:active input[type="range"] { cursor: grabbing; }
     input[type="range"]:disabled { cursor: not-allowed; }
 
     /* ── Disabled ── */
-    :host([disabled]) .track-container { opacity: 0.5; pointer-events: none; }
+    :host([disabled]) .track-container { opacity: var(--cg-opacity-50); pointer-events: none; }
 
     /* ── Error ── */
     :host([error]) .track-fill { background: var(--cg-color-status-error-text-default); }
@@ -253,7 +258,9 @@ t.styles = [b, m, p`
     :host([success]) .value-display { color: var(--cg-color-status-success-text-default); }
 
     /* ── Loading ── */
-    :host([loading]) .track-container { pointer-events: none; opacity: 0.5; }
+    :host([loading]) .track-container { pointer-events: none; opacity: var(--cg-opacity-50); }
+    :host([loading]) .track-fill,
+    :host([loading]) .thumb-wrapper { display: none; }
     .loading-bar {
       position: absolute;
       top: 50%;
@@ -263,7 +270,7 @@ t.styles = [b, m, p`
       width: 40%;
       background: var(--cg-color-slider-track-filled);
       border-radius: var(--cg-border-radius-full);
-      animation: cg-slider-loading 1.2s ease-in-out infinite;
+      animation: cg-slider-loading 1.2s var(--cg-transition-easing-ease-in-out) infinite;
     }
     @keyframes cg-slider-loading {
       0% { left: 0; width: 40%; }
@@ -272,7 +279,7 @@ t.styles = [b, m, p`
     }
 
     .range-labels { display: flex; justify-content: space-between; margin-top: var(--cg-spacing-4); }
-    .range-label { font-size: var(--cg-font-size-xs); color: var(--cg-color-slider-mark-background); }
+    .range-label { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); }
 
     /* ── Simple variant — no fill, no tooltip ── */
     :host([variant="simple"]) .track-fill { display: none; }
@@ -286,10 +293,10 @@ t.styles = [b, m, p`
     :host([variant="toggle"]) .thumb {
       width: var(--cg-spacing-20);
       height: var(--cg-spacing-20);
-      border: var(--cg-border-width-50) solid var(--cg-overlay-accent-subtle);
+      border: var(--cg-border-width-50) solid var(--cg-color-slider-thumb-border);
       box-shadow: var(--cg-elevation-1);
     }
-    :host([variant="toggle"]) .thumb:hover {
+    :host([variant="toggle"]) .track-container:hover .thumb:not(.dragging) {
       transform: scale(1.05);
     }
     :host([variant="toggle"]) .thumb.dragging {
@@ -310,52 +317,52 @@ t.styles = [b, m, p`
     :host([size="lg"]:not([variant="toggle"])) .thumb { width: var(--cg-spacing-24); height: var(--cg-spacing-24); }
   `];
 a([
-  e({ reflect: !0 })
+  i({ reflect: !0 })
 ], t.prototype, "variant", 2);
 a([
-  e({ reflect: !0 })
+  i({ reflect: !0 })
 ], t.prototype, "size", 2);
 a([
-  e()
+  i()
 ], t.prototype, "label", 2);
 a([
-  e()
+  i()
 ], t.prototype, "name", 2);
 a([
-  e({ type: Number })
+  i({ type: Number })
 ], t.prototype, "value", 2);
 a([
-  e({ type: Number })
+  i({ type: Number })
 ], t.prototype, "min", 2);
 a([
-  e({ type: Number })
+  i({ type: Number })
 ], t.prototype, "max", 2);
 a([
-  e({ type: Number })
+  i({ type: Number })
 ], t.prototype, "step", 2);
 a([
-  e({ type: Boolean, reflect: !0 })
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
 a([
-  e({ type: Boolean, reflect: !0 })
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "error", 2);
 a([
-  e({ type: Boolean, reflect: !0 })
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "success", 2);
 a([
-  e({ type: Boolean, reflect: !0 })
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "loading", 2);
 a([
-  e({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "showValue", 2);
 a([
-  e({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "showRange", 2);
 a([
-  e({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "showTooltip", 2);
 a([
-  e()
+  i()
 ], t.prototype, "unit", 2);
 a([
   d()