@cognivo/components 0.8.0

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

@@ -0,0 +1,80 @@
+import { css as d, LitElement as h, html as u } from "lit";
+import { property as l, customElement as p } from "lit/decorators.js";
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (e, t, n, r) => {
+  for (var o = r > 1 ? void 0 : r ? _(t, n) : t, i = e.length - 1, a; i >= 0; i--)
+    (a = e[i]) && (o = (r ? a(t, n, o) : a(o)) || o);
+  return r && o && m(t, n, o), o;
+};
+let s = class extends h {
+  constructor() {
+    super(...arguments), this.target = "", this.disabled = !1, this._container = null, this._moved = [], this._observer = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), queueMicrotask(() => this._mount());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._unmount();
+  }
+  updated(e) {
+    !e.has("target") && !e.has("disabled") || this._resolveTarget() === this._container || (this._unmount(), this._mount());
+  }
+  _resolveTarget() {
+    if (this.disabled) return this;
+    const e = this.target;
+    if (e instanceof HTMLElement) return e;
+    if (typeof e == "string" && e) {
+      const t = document.querySelector(e);
+      if (t instanceof HTMLElement) return t;
+      (typeof process > "u" || process.env.NODE_ENV !== "production") && console.warn(
+        `[cg-portal] target selector "${e}" did not match any element. Falling back to document.body. (querySelector can't pierce shadow roots — pass an HTMLElement reference via the property if needed.)`
+      );
+    }
+    return document.body;
+  }
+  _mount() {
+    if (this.isConnected && (this._container = this._resolveTarget(), this._container !== this)) {
+      this._moved = Array.from(this.childNodes);
+      for (const e of this._moved)
+        this._container.appendChild(e);
+      this._observer = new MutationObserver((e) => {
+        for (const t of e)
+          t.addedNodes.forEach((n) => {
+            this._container && n.parentNode === this && (this._container.appendChild(n), this._moved.push(n));
+          });
+      }), this._observer.observe(this, { childList: !0 }), this.dispatchEvent(new CustomEvent("cg-portal-mount", {
+        bubbles: !0,
+        composed: !0,
+        detail: { container: this._container }
+      }));
+    }
+  }
+  _unmount() {
+    const e = this._container && this._container !== this;
+    this._observer?.disconnect(), this._observer = null;
+    for (const t of this._moved)
+      t.parentNode && t.parentNode.removeChild(t), this.isConnected && this.appendChild(t);
+    this._moved = [], this._container = null, e && this.dispatchEvent(new CustomEvent("cg-portal-unmount", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return u`<slot></slot>`;
+  }
+};
+s.styles = d`
+    :host { display: contents; }
+  `;
+c([
+  l()
+], s.prototype, "target", 2);
+c([
+  l({ type: Boolean })
+], s.prototype, "disabled", 2);
+s = c([
+  p("cg-portal")
+], s);
+export {
+  s as CgPortal
+};
+//# sourceMappingURL=cg-portal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-portal.js","sources":["../../../src/components/cg-portal/cg-portal.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @element cg-portal\n * Teleports its slotted children into a different DOM location (default:\n * `document.body`). Useful for popovers, modals, tooltips, or anything that\n * needs to escape a clipping ancestor / stacking context.\n *\n * **Style scope caveat:** teleported children leave the consumer's scoped-CSS\n * context. They inherit only global styles + any styles applied at the new\n * location. Wrap them in your own design-token surface (`cg-card`, etc.) if\n * you need consistent chrome.\n *\n * **Shadow-root target limitation:** when `target` is a CSS selector string,\n * resolution uses `document.querySelector` — which cannot pierce shadow\n * roots. To target an element inside a shadow root, pass it directly via the\n * property: `el.target = shadowRootEl.querySelector('#mount')`.\n *\n * **Missing-target behavior:** if a string `target` doesn't match any element\n * at mount time, the component falls back to `document.body` and emits a\n * `console.warn` in development (Vite/Astro `import.meta.env.DEV`). It does\n * NOT retry. If you need late-resolving targets, render a `<cg-portal>`\n * conditionally once the target element is mounted.\n *\n * **SSR-safe:** all DOM access happens inside `connectedCallback` and\n * `updated()`. No browser globals are touched at module load or in field\n * initializers, so server rendering won't crash on it.\n *\n * @example\n * ```html\n * <!-- Default: teleports to document.body -->\n * <cg-portal>\n *   <my-modal></my-modal>\n * </cg-portal>\n *\n * <!-- Custom target by selector -->\n * <cg-portal target=\"#modal-root\">\n *   <div>Teleported content</div>\n * </cg-portal>\n *\n * <!-- Conditionally render in place (SSR / no-portal mode) -->\n * <cg-portal disabled>\n *   <my-modal></my-modal>\n * </cg-portal>\n * ```\n *\n * @slot - Children to be moved into the target element.\n *\n * @fires {CustomEvent<{ container: HTMLElement }>} cg-portal-mount - Children\n *   have been teleported. `detail.container` is the destination element.\n * @fires {CustomEvent} cg-portal-unmount - Children have been returned to the\n *   host (target change, disabled toggle, or component disconnect).\n */\n@customElement('cg-portal')\nexport class CgPortal extends LitElement {\n  static override styles = css`\n    :host { display: contents; }\n  `;\n\n  @property() target: string | HTMLElement = '';\n  @property({ type: Boolean }) disabled = false;\n\n  private _container: HTMLElement | null = null;\n  private _moved: Node[] = [];\n  private _observer: MutationObserver | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Wait a microtask so that slotted light-DOM children are parsed.\n    queueMicrotask(() => this._mount());\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unmount();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (!changed.has('target') && !changed.has('disabled')) return;\n    // Avoid the unmount/remount cycle when the resolved target hasn't\n    // actually changed — same selector string, same disabled flag, etc.\n    const next = this._resolveTarget();\n    if (next === this._container) return;\n    this._unmount();\n    this._mount();\n  }\n\n  private _resolveTarget(): HTMLElement {\n    if (this.disabled) return this;\n    const t = this.target;\n    if (t instanceof HTMLElement) return t;\n    if (typeof t === 'string' && t) {\n      const el = document.querySelector(t);\n      if (el instanceof HTMLElement) return el;\n      // Selector didn't match — fall back to document.body and warn in dev.\n      // Note: querySelector can't pierce shadow roots; pass an element via the\n      // property if your target lives inside one.\n      if (typeof process === 'undefined' || process.env.NODE_ENV !== 'production') {\n        console.warn(\n          `[cg-portal] target selector \"${t}\" did not match any element. ` +\n          `Falling back to document.body. (querySelector can't pierce shadow ` +\n          `roots — pass an HTMLElement reference via the property if needed.)`\n        );\n      }\n    }\n    return document.body;\n  }\n\n  private _mount(): void {\n    if (!this.isConnected) return;\n    this._container = this._resolveTarget();\n    if (this._container === this) return;\n\n    this._moved = Array.from(this.childNodes);\n    for (const node of this._moved) {\n      this._container.appendChild(node);\n    }\n\n    // Watch for new children added to this host and forward them.\n    this._observer = new MutationObserver((mutations) => {\n      for (const m of mutations) {\n        m.addedNodes.forEach((node) => {\n          if (this._container && node.parentNode === this) {\n            this._container.appendChild(node);\n            this._moved.push(node);\n          }\n        });\n      }\n    });\n    this._observer.observe(this, { childList: true });\n\n    this.dispatchEvent(new CustomEvent('cg-portal-mount', {\n      bubbles: true,\n      composed: true,\n      detail: { container: this._container },\n    }));\n  }\n\n  private _unmount(): void {\n    const hadContainer = this._container && this._container !== this;\n    this._observer?.disconnect();\n    this._observer = null;\n    // Return moved children back to host so they are not lost on re-mount,\n    // target change, or disable toggle.\n    for (const node of this._moved) {\n      if (node.parentNode) node.parentNode.removeChild(node);\n      if (this.isConnected) this.appendChild(node);\n    }\n    this._moved = [];\n    this._container = null;\n    if (hadContainer) {\n      this.dispatchEvent(new CustomEvent('cg-portal-unmount', {\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-portal': CgPortal;\n  }\n}\n"],"names":["CgPortal","LitElement","changed","t","el","node","mutations","m","hadContainer","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAuDO,IAAMA,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAKO,KAAA,SAA+B,IACd,KAAA,WAAW,IAExC,KAAQ,aAAiC,MACzC,KAAQ,SAAiB,CAAA,GACzB,KAAQ,YAAqC;AAAA,EAAA;AAAA,EAEpC,oBAA0B;AACjC,UAAM,kBAAA,GAEN,eAAe,MAAM,KAAK,QAAQ;AAAA,EACpC;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,SAAA;AAAA,EACP;AAAA,EAES,QAAQC,GAAqC;AAKpD,IAJI,CAACA,EAAQ,IAAI,QAAQ,KAAK,CAACA,EAAQ,IAAI,UAAU,KAGxC,KAAK,eAAA,MACL,KAAK,eAClB,KAAK,SAAA,GACL,KAAK,OAAA;AAAA,EACP;AAAA,EAEQ,iBAA8B;AACpC,QAAI,KAAK,SAAU,QAAO;AAC1B,UAAMC,IAAI,KAAK;AACf,QAAIA,aAAa,YAAa,QAAOA;AACrC,QAAI,OAAOA,KAAM,YAAYA,GAAG;AAC9B,YAAMC,IAAK,SAAS,cAAcD,CAAC;AACnC,UAAIC,aAAc,YAAa,QAAOA;AAItC,OAAI,OAAO,UAAY,OAAe,QAAQ,IAAI,aAAa,iBAC7D,QAAQ;AAAA,QACN,gCAAgCD,CAAC;AAAA,MAAA;AAAA,IAKvC;AACA,WAAO,SAAS;AAAA,EAClB;AAAA,EAEQ,SAAe;AACrB,QAAK,KAAK,gBACV,KAAK,aAAa,KAAK,eAAA,GACnB,KAAK,eAAe,OAExB;AAAA,WAAK,SAAS,MAAM,KAAK,KAAK,UAAU;AACxC,iBAAWE,KAAQ,KAAK;AACtB,aAAK,WAAW,YAAYA,CAAI;AAIlC,WAAK,YAAY,IAAI,iBAAiB,CAACC,MAAc;AACnD,mBAAWC,KAAKD;AACd,UAAAC,EAAE,WAAW,QAAQ,CAACF,MAAS;AAC7B,YAAI,KAAK,cAAcA,EAAK,eAAe,SACzC,KAAK,WAAW,YAAYA,CAAI,GAChC,KAAK,OAAO,KAAKA,CAAI;AAAA,UAEzB,CAAC;AAAA,MAEL,CAAC,GACD,KAAK,UAAU,QAAQ,MAAM,EAAE,WAAW,IAAM,GAEhD,KAAK,cAAc,IAAI,YAAY,mBAAmB;AAAA,QACpD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,WAAW,KAAK,WAAA;AAAA,MAAW,CACtC,CAAC;AAAA;AAAA,EACJ;AAAA,EAEQ,WAAiB;AACvB,UAAMG,IAAe,KAAK,cAAc,KAAK,eAAe;AAC5D,SAAK,WAAW,WAAA,GAChB,KAAK,YAAY;AAGjB,eAAWH,KAAQ,KAAK;AACtB,MAAIA,EAAK,cAAYA,EAAK,WAAW,YAAYA,CAAI,GACjD,KAAK,eAAa,KAAK,YAAYA,CAAI;AAE7C,SAAK,SAAS,CAAA,GACd,KAAK,aAAa,MACdG,KACF,KAAK,cAAc,IAAI,YAAY,qBAAqB;AAAA,MACtD,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EAEN;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AA3GaT,EACK,SAASU;AAAA;AAAA;AAIbC,EAAA;AAAA,EAAXC,EAAA;AAAS,GALCZ,EAKC,WAAA,UAAA,CAAA;AACiBW,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GANhBZ,EAMkB,WAAA,YAAA,CAAA;AANlBA,IAANW,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACbb,CAAA;"}

package/dist/components/cg-progress-bar/cg-progress-bar.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-progress-bar> — Linear progress bar with label, buffer, and custom formatting.
+ *
+ * @example
+ * ```html
+ * <cg-progress-bar value="68" label="Upload" showValue></cg-progress-bar>
+ * <cg-progress-bar value="45" label="Storage" formatValue="45 MB / 100 MB"></cg-progress-bar>
+ * <cg-progress-bar value="80" buffer="95" label="Video" showValue></cg-progress-bar>
+ * <cg-progress-bar indeterminate label="Processing..."></cg-progress-bar>
+ * ```
+ *
+ * @cssprop --cg-component-progress-radius - Track border radius
+ * @cssprop --cg-component-progress-height-sm - Track height sm (4px)
+ * @cssprop --cg-component-progress-height-md - Track height md (8px)
+ * @cssprop --cg-component-progress-height-lg - Track height lg (12px)
+ */
+export declare class CgProgressBar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Progress value 0–100 */
+    value: number;
+    /** Label text above the bar */
+    label: string;
+    /** Description text below the label */
+    description: string;
+    /** Show percentage value */
+    showValue: boolean;
+    /** Custom formatted value text (e.g. "45 MB / 100 MB") — overrides percentage */
+    formatValue: string;
+    /** Buffer value 0–100 (secondary fill, e.g. video buffering) */
+    buffer: number;
+    /** Min label shown under the track */
+    minLabel: string;
+    /** Max label shown under the track */
+    maxLabel: string;
+    variant: 'default' | 'success' | 'warning' | 'danger';
+    indeterminate: boolean;
+    size: 'sm' | 'md' | 'lg';
+    striped: boolean;
+    animated: boolean;
+    private get _clampedValue();
+    private get _clampedBuffer();
+    private get _displayValue();
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-progress-bar': CgProgressBar;
+    }
+}
+//# sourceMappingURL=cg-progress-bar.d.ts.map

package/dist/components/cg-progress-bar/cg-progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-progress-bar/cg-progress-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA+JnB;IAEH,2BAA2B;IACC,KAAK,SAAK;IAEtC,+BAA+B;IACH,KAAK,SAAM;IAEvC,uCAAuC;IACX,WAAW,SAAM;IAE7C,4BAA4B;IACC,SAAS,UAAS;IAE/C,iFAAiF;IACrD,WAAW,SAAM;IAE7C,gEAAgE;IACpC,MAAM,SAAK;IAEvC,sCAAsC;IACV,QAAQ,SAAM;IAE1C,sCAAsC;IACV,QAAQ,SAAM;IAEC,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IACjE,aAAa,UAAS;IACvB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC/B,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE7D,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,aAAa,GAGxB;IAEQ,MAAM;CA0ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cg-progress-bar/cg-progress-bar.js

@@ -0,0 +1,267 @@
+import { css as h, LitElement as g, nothing as r, html as n } from "lit";
+import { property as a, customElement as m } from "lit/decorators.js";
+import { h as u, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (l, s, o, c) => {
+  for (var i = c > 1 ? void 0 : c ? b(s, o) : s, p = l.length - 1, d; p >= 0; p--)
+    (d = l[p]) && (i = (c ? d(s, o, i) : d(i)) || i);
+  return c && i && v(s, o, i), i;
+};
+let t = class extends g {
+  constructor() {
+    super(...arguments), this.value = 0, this.label = "", this.description = "", this.showValue = !1, this.formatValue = "", this.buffer = 0, this.minLabel = "", this.maxLabel = "", this.variant = "default", this.indeterminate = !1, this.size = "md", this.striped = !1, this.animated = !1;
+  }
+  get _clampedValue() {
+    return Math.max(0, Math.min(100, this.value));
+  }
+  get _clampedBuffer() {
+    return Math.max(0, Math.min(100, this.buffer));
+  }
+  get _displayValue() {
+    return this.formatValue ? this.formatValue : `${this._clampedValue}%`;
+  }
+  render() {
+    const l = this.label || this.description || (this.showValue || this.formatValue) && !this.indeterminate, s = this.minLabel || this.maxLabel, o = this.buffer > 0 && !this.indeterminate;
+    return n`
+      ${l ? n`
+        <div class="header">
+          <div class="header-left">
+            ${this.label ? n`<span class="label">${this.label}</span>` : r}
+            ${this.description ? n`<span class="description">${this.description}</span>` : r}
+          </div>
+          ${(this.showValue || this.formatValue) && !this.indeterminate ? n`
+            <span class="value-text">${this._displayValue}</span>
+          ` : r}
+        </div>
+      ` : r}
+      <div
+        class="track"
+        role="progressbar"
+        aria-valuenow="${this.indeterminate ? r : this._clampedValue}"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label="${this.label || "Progress"}"
+        aria-busy="${this.indeterminate}"
+      >
+        ${o ? n`
+          <div class="buffer" style="width: ${this._clampedBuffer}%"></div>
+        ` : r}
+        <div
+          class="fill"
+          style="${this.indeterminate ? "" : `width: ${this._clampedValue}%`}"
+        ></div>
+      </div>
+      ${s ? n`
+        <div class="range-labels">
+          <span>${this.minLabel}</span>
+          <span>${this.maxLabel}</span>
+        </div>
+      ` : r}
+    `;
+  }
+};
+t.styles = [u, f, h`
+    :host {
+      width: 100%;
+    }
+
+    .header {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      margin-bottom: var(--cg-spacing-6);
+    }
+
+    .header-left {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+    }
+
+    .label {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-text);
+      line-height: var(--cg-line-height-snug);
+    }
+
+    .description {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+    }
+
+    .value-text {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-text);
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+
+    /* ── Track ── */
+    .track {
+      width: 100%;
+      background: var(--cg-color-loading-spinner-secondary);
+      border-radius: var(--cg-component-progress-radius);
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* Sizes */
+    :host([size="sm"]) .track { height: var(--cg-component-progress-height-sm); }
+    :host([size="md"]) .track { height: var(--cg-component-progress-height-md); }
+    :host([size="lg"]) .track { height: var(--cg-component-progress-height-lg); }
+
+    /* ── Buffer bar (behind fill) ── */
+    .buffer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      border-radius: var(--cg-component-progress-radius);
+      background: var(--cg-color-loading-spinner-primary);
+      opacity: 0.25;
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    /* ── Fill bar ── */
+    .fill {
+      height: 100%;
+      border-radius: var(--cg-component-progress-radius);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+      position: relative;
+      overflow: hidden;
+    }
+
+    /* ── Variant colors ── */
+    :host([variant="default"]) .fill {
+      background: var(--cg-color-loading-spinner-primary);
+    }
+    :host([variant="success"]) .fill {
+      background: var(--cg-color-status-success-text-default);
+    }
+    :host([variant="warning"]) .fill {
+      background: var(--cg-color-status-warning-text-default);
+    }
+    :host([variant="danger"]) .fill {
+      background: var(--cg-color-status-error-text-default);
+    }
+
+    /* ── Striped pattern ── */
+    :host([striped]) .fill::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image: linear-gradient(
+        45deg,
+        var(--cg-overlay-white-strong) 25%,
+        transparent 25%,
+        transparent 50%,
+        var(--cg-overlay-white-strong) 50%,
+        var(--cg-overlay-white-strong) 75%,
+        transparent 75%,
+        transparent
+      );
+      background-size: 20px 20px;
+    }
+
+    /* ── Animated stripes ── */
+    :host([animated]) .fill::after {
+      animation: stripe-move 1s linear infinite;
+    }
+
+    @keyframes stripe-move {
+      from { background-position: 0 0; }
+      to { background-position: 20px 0; }
+    }
+
+    /* ── Indeterminate ── */
+    :host([indeterminate]) .fill {
+      width: 40% !important;
+      animation: indeterminate-slide 1.5s var(--cg-transition-easing-ease-in-out) infinite;
+    }
+
+    @keyframes indeterminate-slide {
+      0% { transform: translateX(-100%); }
+      50% { transform: translateX(150%); }
+      100% { transform: translateX(-100%); }
+    }
+
+    @keyframes indeterminate-pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 1; }
+    }
+
+    /* ── Min/Max labels ── */
+    .range-labels {
+      display: flex;
+      justify-content: space-between;
+      margin-top: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .fill::before {
+        animation: none !important;
+        background: none !important;
+      }
+      :host([animated]) .fill::after {
+        animation: none !important;
+      }
+      :host([indeterminate]) .fill {
+        animation: indeterminate-pulse 2s ease-in-out infinite !important;
+        animation-duration: 2s !important;
+        transform: none !important;
+        width: 100% !important;
+      }
+    }
+  `];
+e([
+  a({ type: Number })
+], t.prototype, "value", 2);
+e([
+  a({ type: String })
+], t.prototype, "label", 2);
+e([
+  a({ type: String })
+], t.prototype, "description", 2);
+e([
+  a({ type: Boolean })
+], t.prototype, "showValue", 2);
+e([
+  a({ type: String })
+], t.prototype, "formatValue", 2);
+e([
+  a({ type: Number })
+], t.prototype, "buffer", 2);
+e([
+  a({ type: String })
+], t.prototype, "minLabel", 2);
+e([
+  a({ type: String })
+], t.prototype, "maxLabel", 2);
+e([
+  a({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+e([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "indeterminate", 2);
+e([
+  a({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "striped", 2);
+e([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "animated", 2);
+t = e([
+  m("cg-progress-bar")
+], t);
+export {
+  t as CgProgressBar
+};
+//# sourceMappingURL=cg-progress-bar.js.map

package/dist/components/cg-progress-bar/cg-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-progress-bar.js","sources":["../../../src/components/cg-progress-bar/cg-progress-bar.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-progress-bar> — Linear progress bar with label, buffer, and custom formatting.\n *\n * @example\n * ```html\n * <cg-progress-bar value=\"68\" label=\"Upload\" showValue></cg-progress-bar>\n * <cg-progress-bar value=\"45\" label=\"Storage\" formatValue=\"45 MB / 100 MB\"></cg-progress-bar>\n * <cg-progress-bar value=\"80\" buffer=\"95\" label=\"Video\" showValue></cg-progress-bar>\n * <cg-progress-bar indeterminate label=\"Processing...\"></cg-progress-bar>\n * ```\n *\n * @cssprop --cg-component-progress-radius - Track border radius\n * @cssprop --cg-component-progress-height-sm - Track height sm (4px)\n * @cssprop --cg-component-progress-height-md - Track height md (8px)\n * @cssprop --cg-component-progress-height-lg - Track height lg (12px)\n */\n@customElement('cg-progress-bar')\nexport class CgProgressBar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      width: 100%;\n    }\n\n    .header {\n      display: flex;\n      align-items: baseline;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .header-left {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n\n    .label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-text);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    .description {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    .value-text {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-text);\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    }\n\n    /* ── Track ── */\n    .track {\n      width: 100%;\n      background: var(--cg-color-loading-spinner-secondary);\n      border-radius: var(--cg-component-progress-radius);\n      overflow: hidden;\n      position: relative;\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .track { height: var(--cg-component-progress-height-sm); }\n    :host([size=\"md\"]) .track { height: var(--cg-component-progress-height-md); }\n    :host([size=\"lg\"]) .track { height: var(--cg-component-progress-height-lg); }\n\n    /* ── Buffer bar (behind fill) ── */\n    .buffer {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      border-radius: var(--cg-component-progress-radius);\n      background: var(--cg-color-loading-spinner-primary);\n      opacity: 0.25;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    /* ── Fill bar ── */\n    .fill {\n      height: 100%;\n      border-radius: var(--cg-component-progress-radius);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      position: relative;\n      overflow: hidden;\n    }\n\n    /* ── Variant colors ── */\n    :host([variant=\"default\"]) .fill {\n      background: var(--cg-color-loading-spinner-primary);\n    }\n    :host([variant=\"success\"]) .fill {\n      background: var(--cg-color-status-success-text-default);\n    }\n    :host([variant=\"warning\"]) .fill {\n      background: var(--cg-color-status-warning-text-default);\n    }\n    :host([variant=\"danger\"]) .fill {\n      background: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Striped pattern ── */\n    :host([striped]) .fill::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background-image: linear-gradient(\n        45deg,\n        var(--cg-overlay-white-strong) 25%,\n        transparent 25%,\n        transparent 50%,\n        var(--cg-overlay-white-strong) 50%,\n        var(--cg-overlay-white-strong) 75%,\n        transparent 75%,\n        transparent\n      );\n      background-size: 20px 20px;\n    }\n\n    /* ── Animated stripes ── */\n    :host([animated]) .fill::after {\n      animation: stripe-move 1s linear infinite;\n    }\n\n    @keyframes stripe-move {\n      from { background-position: 0 0; }\n      to { background-position: 20px 0; }\n    }\n\n    /* ── Indeterminate ── */\n    :host([indeterminate]) .fill {\n      width: 40% !important;\n      animation: indeterminate-slide 1.5s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n\n    @keyframes indeterminate-slide {\n      0% { transform: translateX(-100%); }\n      50% { transform: translateX(150%); }\n      100% { transform: translateX(-100%); }\n    }\n\n    @keyframes indeterminate-pulse {\n      0%, 100% { opacity: 0.4; }\n      50% { opacity: 1; }\n    }\n\n    /* ── Min/Max labels ── */\n    .range-labels {\n      display: flex;\n      justify-content: space-between;\n      margin-top: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .fill::before {\n        animation: none !important;\n        background: none !important;\n      }\n      :host([animated]) .fill::after {\n        animation: none !important;\n      }\n      :host([indeterminate]) .fill {\n        animation: indeterminate-pulse 2s ease-in-out infinite !important;\n        animation-duration: 2s !important;\n        transform: none !important;\n        width: 100% !important;\n      }\n    }\n  `];\n\n  /** Progress value 0–100 */\n  @property({ type: Number }) value = 0;\n\n  /** Label text above the bar */\n  @property({ type: String }) label = '';\n\n  /** Description text below the label */\n  @property({ type: String }) description = '';\n\n  /** Show percentage value */\n  @property({ type: Boolean }) showValue = false;\n\n  /** Custom formatted value text (e.g. \"45 MB / 100 MB\") — overrides percentage */\n  @property({ type: String }) formatValue = '';\n\n  /** Buffer value 0–100 (secondary fill, e.g. video buffering) */\n  @property({ type: Number }) buffer = 0;\n\n  /** Min label shown under the track */\n  @property({ type: String }) minLabel = '';\n\n  /** Max label shown under the track */\n  @property({ type: String }) maxLabel = '';\n\n  @property({ type: String, reflect: true }) variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean, reflect: true }) striped = false;\n  @property({ type: Boolean, reflect: true }) animated = false;\n\n  private get _clampedValue(): number {\n    return Math.max(0, Math.min(100, this.value));\n  }\n\n  private get _clampedBuffer(): number {\n    return Math.max(0, Math.min(100, this.buffer));\n  }\n\n  private get _displayValue(): string {\n    if (this.formatValue) return this.formatValue;\n    return `${this._clampedValue}%`;\n  }\n\n  override render() {\n    const showHeader = this.label || this.description || ((this.showValue || this.formatValue) && !this.indeterminate);\n    const showRangeLabels = this.minLabel || this.maxLabel;\n    const hasBuffer = this.buffer > 0 && !this.indeterminate;\n\n    return html`\n      ${showHeader ? html`\n        <div class=\"header\">\n          <div class=\"header-left\">\n            ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n            ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n          </div>\n          ${(this.showValue || this.formatValue) && !this.indeterminate ? html`\n            <span class=\"value-text\">${this._displayValue}</span>\n          ` : nothing}\n        </div>\n      ` : nothing}\n      <div\n        class=\"track\"\n        role=\"progressbar\"\n        aria-valuenow=\"${this.indeterminate ? nothing : this._clampedValue}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=\"${this.label || 'Progress'}\"\n        aria-busy=\"${this.indeterminate}\"\n      >\n        ${hasBuffer ? html`\n          <div class=\"buffer\" style=\"width: ${this._clampedBuffer}%\"></div>\n        ` : nothing}\n        <div\n          class=\"fill\"\n          style=\"${this.indeterminate ? '' : `width: ${this._clampedValue}%`}\"\n        ></div>\n      </div>\n      ${showRangeLabels ? html`\n        <div class=\"range-labels\">\n          <span>${this.minLabel}</span>\n          <span>${this.maxLabel}</span>\n        </div>\n      ` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-progress-bar': CgProgressBar;\n  }\n}\n"],"names":["CgProgressBar","LitElement","showHeader","showRangeLabels","hasBuffer","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @element cg-radio
+ * Radio button with dot or tick indicator and spring animation.
+ *
+ * @example
+ * ```html
+ * <cg-radio label="Option A" value="a"></cg-radio>
+ * <cg-radio label="Option B" value="b" checked></cg-radio>
+ * <cg-radio label="With tick" value="c" variant="tick" checked></cg-radio>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string, checked: true}>} cg-change - When selected
+ */
+export declare class CgRadio extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
+    static styles: import('lit').CSSResult[];
+    label: string;
+    description: string;
+    name: string;
+    value: string;
+    checked: boolean;
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    loading: boolean;
+    required: boolean;
+    variant: 'dot' | 'tick';
+    updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private _select;
+    private _renderIndicator;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-radio': CgRadio;
+    }
+}
+//# sourceMappingURL=cg-radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-radio.d.ts","sourceRoot":"","sources":["../../../src/components/cg-radio/cg-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;GAYG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA8JnB;IAES,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,IAAI,SAAM;IACV,KAAK,SAAM;IACM,OAAO,UAAS;IACD,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,QAAQ,UAAS;IACjB,OAAO,EAAE,KAAK,GAAG,MAAM,CAAS;IAEpD,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,gBAAgB;IAYf,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,UAAU,EAAE,OAAO,CAAC;KAAE;CACzD"}