@cognivo/components 0.8.0

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

@@ -0,0 +1,136 @@
+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;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "rectangular", this.width = "100%", this.height = "", this.lines = 3, this.animated = !0, this.rounded = "md";
+  }
+  _getDefaultHeight() {
+    if (this.height) return this.height;
+    switch (this.variant) {
+      case "circular":
+        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));
+      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>
+          `)}
+        </div>
+      `;
+    }
+    const n = this.variant === "circular" ? "circular" : "rectangular";
+    return u`
+      <div
+        class="skeleton ${n}"
+        role="status"
+        aria-label="Loading content"
+        aria-busy="true"
+        style="width: ${this.width}; height: ${this._getDefaultHeight()}"
+      ></div>
+    `;
+  }
+};
+e.styles = [g, m, 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; }
+    }
+
+    :host([animated="false"]) .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); }
+
+    /* ── Variants ── */
+    .rectangular {
+      border-radius: var(--cg-border-radius-100);
+    }
+
+    .circular {
+      border-radius: 50%;
+    }
+
+    .text-line {
+      border-radius: var(--cg-border-radius-50);
+      height: var(--cg-spacing-12);
+    }
+
+    .text-line + .text-line {
+      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;
+    }
+
+    /* Reduced motion: no animation, static placeholder */
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton {
+        animation: none !important;
+      }
+    }
+  `];
+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);
+export {
+  e as CgSkeleton
+};
+//# sourceMappingURL=cg-skeleton.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,51 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * <cg-slider> — Range slider with floating tooltip, filled track, and spring interactions.
+ *
+ * @fires {CustomEvent<{value: number}>} cg-change - On value change
+ */
+export declare class CgSlider extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
+    static styles: import('lit').CSSResult[];
+    variant: 'default' | 'simple' | 'toggle';
+    size: 'sm' | 'md' | 'lg';
+    label: string;
+    name: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    loading: boolean;
+    showValue: boolean;
+    showRange: boolean;
+    showTooltip: boolean;
+    unit: string;
+    private _dragging;
+    private _hovering;
+    private _tilt;
+    private _prevValue;
+    private _tiltTimer;
+    updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private _getPercent;
+    private _handleInput;
+    private _onPointerDown;
+    private _onPointerUp;
+    private _onMouseEnter;
+    private _onMouseLeave;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-slider': CgSlider;
+    }
+}
+//# sourceMappingURL=cg-slider.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,375 @@
+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;
+};
+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());
+  }
+  updated(i) {
+    super.updated(i), i.has("value") && this._internals?.setFormValue(String(this.value));
+  }
+  formResetCallback() {
+    const i = this.getAttribute("value");
+    this.value = i !== null ? Number(i) : 50;
+  }
+  formStateRestoreCallback(i) {
+    this.value = Number(i);
+  }
+  _getPercent() {
+    return (this.value - this.min) / (this.max - this.min) * 100;
+  }
+  _handleInput(i) {
+    const r = Number(i.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(() => {
+      this._tilt = 0;
+    }, 150), this.value = r, this.dispatchEvent(new CustomEvent("cg-change", { detail: { value: this.value }, bubbles: !0, composed: !0 }));
+  }
+  _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;
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("pointerup", this._onPointerUp);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("pointerup", this._onPointerUp);
+  }
+  render() {
+    const i = 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}
+          </div>
+        ` : s}
+
+        <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>
+
+          <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}
+            >
+              ${this.showTooltip ? n`
+                <div class="tooltip ${r ? "visible" : ""}">${this.value}${this.unit}</div>
+              ` : s}
+            </div>
+          </div>
+
+          <input
+            type="range"
+            .value=${String(this.value)}
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            ?disabled=${this.disabled || this.loading}
+            aria-hidden="true"
+            tabindex="-1"
+            name=${this.name || s}
+            @input=${this._handleInput}
+            @pointerdown=${this._onPointerDown}
+          />
+
+          ${this.loading ? n`<div class="loading-bar" aria-hidden="true"></div>` : s}
+        </div>
+
+        ${this.showRange ? n`
+          <div class="range-labels">
+            <span class="range-label">${this.min}${this.unit}</span>
+            <span class="range-label">${this.max}${this.unit}</span>
+          </div>
+        ` : s}
+      </div>
+    `;
+  }
+};
+t.formAssociated = !0;
+t.styles = [b, m, p`
+    .slider-wrapper { padding: var(--cg-spacing-8) 0; }
+
+    .header {
+      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.active { transform: scale(1.1); }
+
+    /* ── Track container ── */
+    .track-container {
+      position: relative;
+      height: 44px;
+      display: flex;
+      align-items: center;
+    }
+
+    /* ── Track ── */
+    .track {
+      position: relative;
+      width: 100%;
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-slider-track-background);
+      cursor: pointer;
+    }
+
+    /* Filled portion */
+    .track-fill {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-slider-track-filled);
+      transition: width var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      pointer-events: none;
+    }
+    .track-fill.dragging {
+      transition: none;
+    }
+
+    /* ── Thumb ── */
+    .thumb-wrapper {
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 2;
+      pointer-events: none;
+      transition: left var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .thumb-wrapper.dragging {
+      transition: none;
+    }
+    .thumb {
+      width: var(--cg-spacing-20);
+      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);
+      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 {
+      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;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* ── Floating tooltip ── */
+    .tooltip {
+      position: absolute;
+      bottom: calc(100% + var(--cg-spacing-12));
+      left: 50%;
+      transform: translateX(-50%) scale(0.7) rotate(0deg);
+      transform-origin: center bottom;
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      background: var(--cg-color-tooltip-background);
+      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);
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-slow) var(--cg-transition-easing-spring);
+    }
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: var(--cg-spacing-4) solid transparent;
+      border-top-color: var(--cg-color-tooltip-arrow);
+    }
+    .tooltip.visible {
+      opacity: 1;
+      transform: translateX(-50%) scale(1) rotate(var(--_tilt, 0deg));
+    }
+
+    /* ── Hidden native input — drives keyboard ── */
+    input[type="range"] {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      cursor: pointer;
+      margin: 0;
+      z-index: 3;
+    }
+    input[type="range"]:disabled { cursor: not-allowed; }
+
+    /* ── Disabled ── */
+    :host([disabled]) .track-container { opacity: 0.5; pointer-events: none; }
+
+    /* ── Error ── */
+    :host([error]) .track-fill { background: var(--cg-color-status-error-text-default); }
+    :host([error]) .label { color: var(--cg-color-status-error-text-default); }
+    :host([error]) .value-display { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Success ── */
+    :host([success]) .track-fill { background: var(--cg-color-status-success-text-default); }
+    :host([success]) .label { color: var(--cg-color-status-success-text-default); }
+    :host([success]) .value-display { color: var(--cg-color-status-success-text-default); }
+
+    /* ── Loading ── */
+    :host([loading]) .track-container { pointer-events: none; opacity: 0.5; }
+    .loading-bar {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 0;
+      height: var(--cg-spacing-6);
+      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;
+    }
+    @keyframes cg-slider-loading {
+      0% { left: 0; width: 40%; }
+      50% { left: 60%; width: 40%; }
+      100% { left: 0; width: 40%; }
+    }
+
+    .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); }
+
+    /* ── Simple variant — no fill, no tooltip ── */
+    :host([variant="simple"]) .track-fill { display: none; }
+    :host([variant="simple"]) .tooltip { display: none; }
+
+    /* ── Toggle variant — thick pill track, thumb inside ── */
+    :host([variant="toggle"]) .track {
+      height: var(--cg-spacing-24);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    :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);
+      box-shadow: var(--cg-elevation-1);
+    }
+    :host([variant="toggle"]) .thumb:hover {
+      transform: scale(1.05);
+    }
+    :host([variant="toggle"]) .thumb.dragging {
+      transform: scaleX(1.2);
+    }
+
+    :host([variant="toggle"][size="sm"]) .track { height: var(--cg-spacing-16); }
+    :host([variant="toggle"][size="sm"]) .thumb { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+
+    :host([variant="toggle"][size="lg"]) .track { height: var(--cg-spacing-32); }
+    :host([variant="toggle"][size="lg"]) .thumb { width: var(--cg-spacing-24); height: var(--cg-spacing-24); }
+
+    /* Size variants (default + simple) */
+    :host([size="sm"]:not([variant="toggle"])) .track { height: var(--cg-spacing-4); }
+    :host([size="sm"]:not([variant="toggle"])) .thumb { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }
+
+    :host([size="lg"]:not([variant="toggle"])) .track { height: var(--cg-spacing-8); }
+    :host([size="lg"]:not([variant="toggle"])) .thumb { width: var(--cg-spacing-24); height: var(--cg-spacing-24); }
+  `];
+a([
+  e({ reflect: !0 })
+], t.prototype, "variant", 2);
+a([
+  e({ reflect: !0 })
+], t.prototype, "size", 2);
+a([
+  e()
+], t.prototype, "label", 2);
+a([
+  e()
+], t.prototype, "name", 2);
+a([
+  e({ type: Number })
+], t.prototype, "value", 2);
+a([
+  e({ type: Number })
+], t.prototype, "min", 2);
+a([
+  e({ type: Number })
+], t.prototype, "max", 2);
+a([
+  e({ type: Number })
+], t.prototype, "step", 2);
+a([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+a([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "error", 2);
+a([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "success", 2);
+a([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+a([
+  e({ type: Boolean })
+], t.prototype, "showValue", 2);
+a([
+  e({ type: Boolean })
+], t.prototype, "showRange", 2);
+a([
+  e({ type: Boolean })
+], t.prototype, "showTooltip", 2);
+a([
+  e()
+], t.prototype, "unit", 2);
+a([
+  d()
+], t.prototype, "_dragging", 2);
+a([
+  d()
+], t.prototype, "_hovering", 2);
+a([
+  d()
+], t.prototype, "_tilt", 2);
+t = a([
+  v("cg-slider")
+], t);
+export {
+  t as CgSlider
+};
+//# sourceMappingURL=cg-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-slider.js","sources":["../../../src/components/cg-slider/cg-slider.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-slider> — Range slider with floating tooltip, filled track, and spring interactions.\n *\n * @fires {CustomEvent<{value: number}>} cg-change - On value change\n */\n@customElement('cg-slider')\nexport class CgSlider extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBlock, reducedMotion, css`\n    .slider-wrapper { padding: var(--cg-spacing-8) 0; }\n\n    .header {\n      display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--cg-spacing-8);\n    }\n    .label { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-base-text); }\n    .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); }\n    .value-display.active { transform: scale(1.1); }\n\n    /* ── Track container ── */\n    .track-container {\n      position: relative;\n      height: 44px;\n      display: flex;\n      align-items: center;\n    }\n\n    /* ── Track ── */\n    .track {\n      position: relative;\n      width: 100%;\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-track-background);\n      cursor: pointer;\n    }\n\n    /* Filled portion */\n    .track-fill {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-track-filled);\n      transition: width var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      pointer-events: none;\n    }\n    .track-fill.dragging {\n      transition: none;\n    }\n\n    /* ── Thumb ── */\n    .thumb-wrapper {\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 2;\n      pointer-events: none;\n      transition: left var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .thumb-wrapper.dragging {\n      transition: none;\n    }\n    .thumb {\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-slider-thumb-background);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      box-shadow: var(--cg-elevation-1);\n      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);\n      pointer-events: auto;\n      cursor: grab;\n    }\n    .thumb:hover {\n      transform: scale(1.15);\n      box-shadow: var(--cg-elevation-2);\n    }\n    .thumb.dragging {\n      cursor: grabbing;\n      transform: scale(1.2);\n      box-shadow: var(--cg-elevation-3);\n    }\n\n    /* Focus ring */\n    .thumb:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* ── Floating tooltip ── */\n    .tooltip {\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-12));\n      left: 50%;\n      transform: translateX(-50%) scale(0.7) rotate(0deg);\n      transform-origin: center bottom;\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      background: var(--cg-color-tooltip-background);\n      color: var(--cg-color-tooltip-text);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      border-radius: var(--cg-border-radius-100);\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-slow) var(--cg-transition-easing-spring);\n    }\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border: var(--cg-spacing-4) solid transparent;\n      border-top-color: var(--cg-color-tooltip-arrow);\n    }\n    .tooltip.visible {\n      opacity: 1;\n      transform: translateX(-50%) scale(1) rotate(var(--_tilt, 0deg));\n    }\n\n    /* ── Hidden native input — drives keyboard ── */\n    input[type=\"range\"] {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      opacity: 0;\n      cursor: pointer;\n      margin: 0;\n      z-index: 3;\n    }\n    input[type=\"range\"]:disabled { cursor: not-allowed; }\n\n    /* ── Disabled ── */\n    :host([disabled]) .track-container { opacity: 0.5; pointer-events: none; }\n\n    /* ── Error ── */\n    :host([error]) .track-fill { background: var(--cg-color-status-error-text-default); }\n    :host([error]) .label { color: var(--cg-color-status-error-text-default); }\n    :host([error]) .value-display { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Success ── */\n    :host([success]) .track-fill { background: var(--cg-color-status-success-text-default); }\n    :host([success]) .label { color: var(--cg-color-status-success-text-default); }\n    :host([success]) .value-display { color: var(--cg-color-status-success-text-default); }\n\n    /* ── Loading ── */\n    :host([loading]) .track-container { pointer-events: none; opacity: 0.5; }\n    .loading-bar {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: 0;\n      height: var(--cg-spacing-6);\n      width: 40%;\n      background: var(--cg-color-slider-track-filled);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-slider-loading 1.2s ease-in-out infinite;\n    }\n    @keyframes cg-slider-loading {\n      0% { left: 0; width: 40%; }\n      50% { left: 60%; width: 40%; }\n      100% { left: 0; width: 40%; }\n    }\n\n    .range-labels { display: flex; justify-content: space-between; margin-top: var(--cg-spacing-4); }\n    .range-label { font-size: var(--cg-font-size-xs); color: var(--cg-color-slider-mark-background); }\n\n    /* ── Simple variant — no fill, no tooltip ── */\n    :host([variant=\"simple\"]) .track-fill { display: none; }\n    :host([variant=\"simple\"]) .tooltip { display: none; }\n\n    /* ── Toggle variant — thick pill track, thumb inside ── */\n    :host([variant=\"toggle\"]) .track {\n      height: var(--cg-spacing-24);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    :host([variant=\"toggle\"]) .thumb {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border: var(--cg-border-width-50) solid var(--cg-overlay-accent-subtle);\n      box-shadow: var(--cg-elevation-1);\n    }\n    :host([variant=\"toggle\"]) .thumb:hover {\n      transform: scale(1.05);\n    }\n    :host([variant=\"toggle\"]) .thumb.dragging {\n      transform: scaleX(1.2);\n    }\n\n    :host([variant=\"toggle\"][size=\"sm\"]) .track { height: var(--cg-spacing-16); }\n    :host([variant=\"toggle\"][size=\"sm\"]) .thumb { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n    :host([variant=\"toggle\"][size=\"lg\"]) .track { height: var(--cg-spacing-32); }\n    :host([variant=\"toggle\"][size=\"lg\"]) .thumb { width: var(--cg-spacing-24); height: var(--cg-spacing-24); }\n\n    /* Size variants (default + simple) */\n    :host([size=\"sm\"]:not([variant=\"toggle\"])) .track { height: var(--cg-spacing-4); }\n    :host([size=\"sm\"]:not([variant=\"toggle\"])) .thumb { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n\n    :host([size=\"lg\"]:not([variant=\"toggle\"])) .track { height: var(--cg-spacing-8); }\n    :host([size=\"lg\"]:not([variant=\"toggle\"])) .thumb { width: var(--cg-spacing-24); height: var(--cg-spacing-24); }\n  `];\n\n  @property({ reflect: true }) variant: 'default' | 'simple' | 'toggle' = 'default';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property() label = '';\n  @property() name = '';\n  @property({ type: Number }) value = 50;\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 100;\n  @property({ type: Number }) step = 1;\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({ type: Boolean }) showValue = true;\n  @property({ type: Boolean }) showRange = false;\n  @property({ type: Boolean }) showTooltip = true;\n  @property() unit = '';\n\n  @state() private _dragging = false;\n  @state() private _hovering = false;\n  @state() private _tilt = 0;\n  private _prevValue = 0;\n  private _tiltTimer: ReturnType<typeof setTimeout> | null = null;\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('value')) {\n      this._internals?.setFormValue(String(this.value));\n    }\n  }\n\n  formResetCallback() {\n    const attr = this.getAttribute('value');\n    this.value = attr !== null ? Number(attr) : 50;\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.value = Number(state);\n  }\n\n  private _getPercent(): number {\n    return ((this.value - this.min) / (this.max - this.min)) * 100;\n  }\n\n  private _handleInput(e: Event) {\n    const newVal = Number((e.target as HTMLInputElement).value);\n    const delta = newVal - this._prevValue;\n    this._prevValue = newVal;\n\n    // Tilt tooltip based on drag direction — clamp to ±20deg\n    const tiltAmount = Math.max(-20, Math.min(20, delta * 4));\n    this._tilt = tiltAmount;\n\n    // Settle back to 0 after a pause\n    if (this._tiltTimer) clearTimeout(this._tiltTimer);\n    this._tiltTimer = setTimeout(() => { this._tilt = 0; }, 150);\n\n    this.value = newVal;\n    this.dispatchEvent(new CustomEvent('cg-change', { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  private _onPointerDown() { this._dragging = true; this._prevValue = this.value; }\n  private _onPointerUp() { this._dragging = false; this._tilt = 0; }\n  private _onMouseEnter() { this._hovering = true; }\n  private _onMouseLeave() { this._hovering = false; this._dragging = false; }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('pointerup', this._onPointerUp);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('pointerup', this._onPointerUp);\n  }\n\n  override render() {\n    const pct = this._getPercent();\n    const tooltipVisible = this.showTooltip && (this._hovering || this._dragging);\n\n    return html`\n      <div class=\"slider-wrapper\">\n        ${this.label || this.showValue ? html`\n          <div class=\"header\">\n            ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n            ${this.showValue ? html`<span class=\"value-display ${this._dragging ? 'active' : ''}\">${this.value}${this.unit}</span>` : nothing}\n          </div>\n        ` : nothing}\n\n        <div class=\"track-container\"\n          @mouseenter=${this._onMouseEnter}\n          @mouseleave=${this._onMouseLeave}\n        >\n          <div class=\"track\">\n            <div class=\"track-fill ${this._dragging ? 'dragging' : ''}\" style=\"width: ${pct}%\"></div>\n          </div>\n\n          <div class=\"thumb-wrapper ${this._dragging ? 'dragging' : ''}\" style=\"left: ${pct}%; --_tilt: ${this._tilt}deg\">\n            <div class=\"thumb ${this._dragging ? 'dragging' : ''}\"\n              tabindex=${this.disabled ? '-1' : '0'}\n              role=\"slider\"\n              aria-valuenow=${this.value}\n              aria-valuemin=${this.min}\n              aria-valuemax=${this.max}\n              aria-label=${this.label || nothing}\n            >\n              ${this.showTooltip ? html`\n                <div class=\"tooltip ${tooltipVisible ? 'visible' : ''}\">${this.value}${this.unit}</div>\n              ` : nothing}\n            </div>\n          </div>\n\n          <input\n            type=\"range\"\n            .value=${String(this.value)}\n            min=${this.min}\n            max=${this.max}\n            step=${this.step}\n            ?disabled=${this.disabled || this.loading}\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n            name=${this.name || nothing}\n            @input=${this._handleInput}\n            @pointerdown=${this._onPointerDown}\n          />\n\n          ${this.loading ? html`<div class=\"loading-bar\" aria-hidden=\"true\"></div>` : nothing}\n        </div>\n\n        ${this.showRange ? html`\n          <div class=\"range-labels\">\n            <span class=\"range-label\">${this.min}${this.unit}</span>\n            <span class=\"range-label\">${this.max}${this.unit}</span>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-slider': CgSlider; }\n}\n"],"names":["CgSlider","LitElement","changed","attr","state","e","newVal","delta","tiltAmount","pct","tooltipVisible","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}