@cognivo/components 0.8.1 → 0.8.3

package/dist/components/cg-overflow-list/cg-overflow-list.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-overflow-list
+ * Lays out slotted items in a single row and collapses those that don't fit
+ * into a trailing "more" menu.
+ *
+ * @example
+ * ```html
+ * <cg-overflow-list more-label="More actions">
+ *   <cg-button>Cut</cg-button>
+ *   <cg-button>Copy</cg-button>
+ *   <cg-button>Paste</cg-button>
+ *   <cg-button>Delete</cg-button>
+ * </cg-overflow-list>
+ * ```
+ *
+ * @slot - Items to lay out.
+ * @slot more - Optional custom overflow trigger.
+ *
+ * @fires {CustomEvent<{hiddenCount: number, hiddenIndices: number[]}>} cg-overflow-change
+ * @fires {CustomEvent<{index: number}>} cg-overflow-select
+ */
+export declare class CgOverflowList extends LitElement {
+    static styles: import('lit').CSSResult[];
+    gap: 'none' | 'xs' | 'sm' | 'md' | 'lg';
+    moreLabel: string;
+    minVisible: number;
+    private _hiddenIndices;
+    private _menuOpen;
+    private _rowEl;
+    private _moreEl?;
+    private _items;
+    private _resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private _onDocClick;
+    /** Measure children and hide the trailing ones that overflow. */
+    private _measure;
+    private _onSlotChange;
+    private _toggleMenu;
+    private _selectHidden;
+    private _hiddenLabel;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-overflow-list': CgOverflowList;
+    }
+}
+//# sourceMappingURL=cg-overflow-list.d.ts.map

package/dist/components/cg-overflow-list/cg-overflow-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-overflow-list.d.ts","sourceRoot":"","sources":["../../../src/components/cg-overflow-list/cg-overflow-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BA0EnB;IAE0B,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACrC,SAAS,SAAU;IACW,UAAU,SAAK;IAE3E,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,SAAS,CAAS;IAEpB,OAAO,CAAC,MAAM,CAAe;IAC5B,OAAO,CAAC,OAAO,CAAC,CAAc;IACJ,OAAO,CAAC,MAAM,CAAiB;IAEzE,OAAO,CAAC,eAAe,CAA6B;IAE3C,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,IAAI;IAI7B,OAAO,CAAC,WAAW,CAGjB;IAEF,iEAAiE;IACjE,OAAO,CAAC,QAAQ;IAkDhB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,YAAY;IAKX,MAAM;CAgChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/cg-overflow-list/cg-overflow-list.js

@@ -0,0 +1,212 @@
+import { css as _, LitElement as w, svg as y, html as m } from "lit";
+import { property as u, state as f, query as b, queryAssignedElements as E, customElement as O } from "lit/decorators.js";
+import { h as C, r as x, j as v } from "../../chunks/premium.css-B0hBr_uS.js";
+var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (e, t, a, l) => {
+  for (var s = l > 1 ? void 0 : l ? $(t, a) : t, o = e.length - 1, d; o >= 0; o--)
+    (d = e[o]) && (s = (l ? d(t, a, s) : d(s)) || s);
+  return l && s && k(t, a, s), s;
+};
+let i = class extends w {
+  constructor() {
+    super(...arguments), this.gap = "sm", this.moreLabel = "More", this.minVisible = 0, this._hiddenIndices = [], this._menuOpen = !1, this._onDocClick = (e) => {
+      this._menuOpen && (e.composedPath().includes(this) || (this._menuOpen = !1));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._resizeObserver = new ResizeObserver(() => this._measure()), this._resizeObserver.observe(this), document.addEventListener("click", this._onDocClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver?.disconnect(), this._resizeObserver = void 0, document.removeEventListener("click", this._onDocClick);
+  }
+  firstUpdated() {
+    this._measure();
+  }
+  /** Measure children and hide the trailing ones that overflow. */
+  _measure() {
+    const e = this._items ?? [];
+    if (e.length === 0 || !this._rowEl) return;
+    e.forEach((r) => {
+      r.hidden = !1, r.removeAttribute("aria-hidden");
+    });
+    const t = this._rowEl.clientWidth, a = parseFloat(getComputedStyle(this._rowEl).columnGap || "0") || 0, l = this._moreEl ? this._moreEl.offsetWidth + a : 0;
+    let s = 0;
+    e.forEach((r, c) => {
+      s += r.offsetWidth + (c > 0 ? a : 0);
+    });
+    const o = [];
+    if (s > t) {
+      let r = 0;
+      const c = t - l;
+      e.forEach((g, h) => {
+        const p = g.offsetWidth + (h > 0 ? a : 0);
+        if (h < this.minVisible) {
+          r += p;
+          return;
+        }
+        r + p <= c ? r += p : o.push(h);
+      });
+    }
+    e.forEach((r, c) => {
+      const g = o.includes(c);
+      r.hidden = g, g ? r.setAttribute("aria-hidden", "true") : r.removeAttribute("aria-hidden");
+    }), (o.length !== this._hiddenIndices.length || o.some((r, c) => r !== this._hiddenIndices[c])) && (this._hiddenIndices = o, this.dispatchEvent(new CustomEvent("cg-overflow-change", {
+      detail: { hiddenCount: o.length, hiddenIndices: o },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _onSlotChange() {
+    requestAnimationFrame(() => this._measure());
+  }
+  _toggleMenu() {
+    this._menuOpen = !this._menuOpen;
+  }
+  _selectHidden(e) {
+    this._menuOpen = !1, this.dispatchEvent(new CustomEvent("cg-overflow-select", {
+      detail: { index: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _hiddenLabel(e) {
+    return (this._items?.[e]?.textContent || "").trim() || `Item ${e + 1}`;
+  }
+  render() {
+    const e = this._hiddenIndices.length > 0;
+    return m`
+      <div class="row">
+        <slot @slotchange=${this._onSlotChange}></slot>
+        <span class="more-wrap">
+          <button
+            class="more"
+            type="button"
+            ?hidden=${!e}
+            aria-haspopup="menu"
+            aria-expanded=${this._menuOpen ? "true" : "false"}
+            aria-label=${this.moreLabel}
+            @click=${this._toggleMenu}
+          >
+            <slot name="more">
+              ${y`<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="5" cy="12" r="1.6" fill="currentColor"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/><circle cx="19" cy="12" r="1.6" fill="currentColor"/></svg>`}
+            </slot>
+          </button>
+          <ul class="menu" role="menu" ?hidden=${!this._menuOpen}>
+            ${this._hiddenIndices.map((t) => m`
+              <li role="none">
+                <button class="menu-item" role="menuitem" type="button" @click=${() => this._selectHidden(t)}>
+                  ${this._hiddenLabel(t)}
+                </button>
+              </li>
+            `)}
+          </ul>
+        </span>
+      </div>
+    `;
+  }
+};
+i.styles = [C, x, _`
+    :host { display: block; }
+
+    .row {
+      display: flex;
+      align-items: center;
+      gap: var(--_cg-of-gap, var(--cg-spacing-8));
+      flex-wrap: nowrap;
+      overflow: hidden;
+    }
+
+    :host([gap="none"]) .row { --_cg-of-gap: 0; }
+    :host([gap="xs"]) .row { --_cg-of-gap: var(--cg-spacing-4); }
+    :host([gap="sm"]) .row { --_cg-of-gap: var(--cg-spacing-8); }
+    :host([gap="md"]) .row { --_cg-of-gap: var(--cg-spacing-16); }
+    :host([gap="lg"]) .row { --_cg-of-gap: var(--cg-spacing-24); }
+
+    ::slotted([hidden]) { display: none !important; }
+
+    .more-wrap { position: relative; flex: 0 0 auto; }
+
+    .more {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--cg-spacing-32);
+      min-width: var(--cg-spacing-32);
+      padding: 0 var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-150);
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-cards-text);
+      cursor: pointer;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .more:hover { border-color: var(--cg-color-action-primary-border-default); }
+    .more:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .more:focus-visible { ${v} }
+    .more svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }
+    .more[hidden] { display: none; }
+
+    .menu {
+      position: absolute;
+      top: calc(100% + var(--cg-spacing-4));
+      right: 0;
+      min-width: var(--cg-spacing-160);
+      padding: var(--cg-spacing-4);
+      background: var(--cg-color-surface-popover-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      box-shadow: var(--cg-shadow-elevation-lg);
+      z-index: var(--cg-z-index-300);
+      list-style: none;
+      margin: 0;
+    }
+    .menu[hidden] { display: none; }
+
+    .menu-item {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border: none;
+      background: transparent;
+      color: var(--cg-color-surface-popover-text);
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      font-family: var(--cg-font-family-primary);
+      font-size: var(--cg-font-size-sm);
+    }
+    .menu-item:hover { background: var(--cg-color-action-tertiary-background-hover); }
+    .menu-item:focus-visible { ${v} }
+  `];
+n([
+  u({ reflect: !0 })
+], i.prototype, "gap", 2);
+n([
+  u({ attribute: "more-label" })
+], i.prototype, "moreLabel", 2);
+n([
+  u({ type: Number, reflect: !0, attribute: "min-visible" })
+], i.prototype, "minVisible", 2);
+n([
+  f()
+], i.prototype, "_hiddenIndices", 2);
+n([
+  f()
+], i.prototype, "_menuOpen", 2);
+n([
+  b(".row")
+], i.prototype, "_rowEl", 2);
+n([
+  b(".more")
+], i.prototype, "_moreEl", 2);
+n([
+  E({ flatten: !0 })
+], i.prototype, "_items", 2);
+i = n([
+  O("cg-overflow-list")
+], i);
+export {
+  i as CgOverflowList
+};
+//# sourceMappingURL=cg-overflow-list.js.map

package/dist/components/cg-overflow-list/cg-overflow-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-overflow-list.js","sources":["../../../src/components/cg-overflow-list/cg-overflow-list.ts"],"sourcesContent":["import { LitElement, html, css, svg } from 'lit';\nimport { customElement, property, state, query, queryAssignedElements } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, focusRingDual } from '../../styles/index.js';\n\n/**\n * @element cg-overflow-list\n * Lays out slotted items in a single row and collapses those that don't fit\n * into a trailing \"more\" menu.\n *\n * @example\n * ```html\n * <cg-overflow-list more-label=\"More actions\">\n *   <cg-button>Cut</cg-button>\n *   <cg-button>Copy</cg-button>\n *   <cg-button>Paste</cg-button>\n *   <cg-button>Delete</cg-button>\n * </cg-overflow-list>\n * ```\n *\n * @slot - Items to lay out.\n * @slot more - Optional custom overflow trigger.\n *\n * @fires {CustomEvent<{hiddenCount: number, hiddenIndices: number[]}>} cg-overflow-change\n * @fires {CustomEvent<{index: number}>} cg-overflow-select\n */\n@customElement('cg-overflow-list')\nexport class CgOverflowList extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .row {\n      display: flex;\n      align-items: center;\n      gap: var(--_cg-of-gap, var(--cg-spacing-8));\n      flex-wrap: nowrap;\n      overflow: hidden;\n    }\n\n    :host([gap=\"none\"]) .row { --_cg-of-gap: 0; }\n    :host([gap=\"xs\"]) .row { --_cg-of-gap: var(--cg-spacing-4); }\n    :host([gap=\"sm\"]) .row { --_cg-of-gap: var(--cg-spacing-8); }\n    :host([gap=\"md\"]) .row { --_cg-of-gap: var(--cg-spacing-16); }\n    :host([gap=\"lg\"]) .row { --_cg-of-gap: var(--cg-spacing-24); }\n\n    ::slotted([hidden]) { display: none !important; }\n\n    .more-wrap { position: relative; flex: 0 0 auto; }\n\n    .more {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      height: var(--cg-spacing-32);\n      min-width: var(--cg-spacing-32);\n      padding: 0 var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-150);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-cards-text);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .more:hover { border-color: var(--cg-color-action-primary-border-default); }\n    .more:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .more:focus-visible { ${focusRingDual} }\n    .more svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n    .more[hidden] { display: none; }\n\n    .menu {\n      position: absolute;\n      top: calc(100% + var(--cg-spacing-4));\n      right: 0;\n      min-width: var(--cg-spacing-160);\n      padding: var(--cg-spacing-4);\n      background: var(--cg-color-surface-popover-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      box-shadow: var(--cg-shadow-elevation-lg);\n      z-index: var(--cg-z-index-300);\n      list-style: none;\n      margin: 0;\n    }\n    .menu[hidden] { display: none; }\n\n    .menu-item {\n      display: block;\n      width: 100%;\n      text-align: left;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-popover-text);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      font-family: var(--cg-font-family-primary);\n      font-size: var(--cg-font-size-sm);\n    }\n    .menu-item:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    .menu-item:focus-visible { ${focusRingDual} }\n  `];\n\n  @property({ reflect: true }) gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' = 'sm';\n  @property({ attribute: 'more-label' }) moreLabel = 'More';\n  @property({ type: Number, reflect: true, attribute: 'min-visible' }) minVisible = 0;\n\n  @state() private _hiddenIndices: number[] = [];\n  @state() private _menuOpen = false;\n\n  @query('.row') private _rowEl!: HTMLElement;\n  @query('.more') private _moreEl?: HTMLElement;\n  @queryAssignedElements({ flatten: true }) private _items!: HTMLElement[];\n\n  private _resizeObserver: ResizeObserver | undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this._measure());\n    this._resizeObserver.observe(this);\n    document.addEventListener('click', this._onDocClick);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = undefined;\n    document.removeEventListener('click', this._onDocClick);\n  }\n\n  override firstUpdated(): void {\n    this._measure();\n  }\n\n  private _onDocClick = (e: MouseEvent): void => {\n    if (!this._menuOpen) return;\n    if (!e.composedPath().includes(this)) this._menuOpen = false;\n  };\n\n  /** Measure children and hide the trailing ones that overflow. */\n  private _measure(): void {\n    const items = this._items ?? [];\n    if (items.length === 0 || !this._rowEl) return;\n\n    // Reset: show everything, then measure.\n    items.forEach((el) => { el.hidden = false; el.removeAttribute('aria-hidden'); });\n\n    const available = this._rowEl.clientWidth;\n    const gap = parseFloat(getComputedStyle(this._rowEl).columnGap || '0') || 0;\n    const moreWidth = this._moreEl ? this._moreEl.offsetWidth + gap : 0;\n\n    // First pass: does everything fit without a more button?\n    let total = 0;\n    items.forEach((el, i) => { total += el.offsetWidth + (i > 0 ? gap : 0); });\n\n    const hidden: number[] = [];\n    if (total > available) {\n      // Reserve space for the more button and fit as many leading items as possible.\n      let used = 0;\n      const budget = available - moreWidth;\n      items.forEach((el, i) => {\n        const w = el.offsetWidth + (i > 0 ? gap : 0);\n        if (i < this.minVisible) { used += w; return; }\n        if (used + w <= budget) { used += w; }\n        else { hidden.push(i); }\n      });\n    }\n\n    // Apply visibility.\n    items.forEach((el, i) => {\n      const isHidden = hidden.includes(i);\n      el.hidden = isHidden;\n      if (isHidden) el.setAttribute('aria-hidden', 'true');\n      else el.removeAttribute('aria-hidden');\n    });\n\n    const changed =\n      hidden.length !== this._hiddenIndices.length ||\n      hidden.some((v, i) => v !== this._hiddenIndices[i]);\n\n    if (changed) {\n      this._hiddenIndices = hidden;\n      this.dispatchEvent(new CustomEvent('cg-overflow-change', {\n        detail: { hiddenCount: hidden.length, hiddenIndices: hidden },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  private _onSlotChange(): void {\n    // Re-measure after DOM settles.\n    requestAnimationFrame(() => this._measure());\n  }\n\n  private _toggleMenu(): void {\n    this._menuOpen = !this._menuOpen;\n  }\n\n  private _selectHidden(index: number): void {\n    this._menuOpen = false;\n    this.dispatchEvent(new CustomEvent('cg-overflow-select', {\n      detail: { index },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _hiddenLabel(index: number): string {\n    const el = this._items?.[index];\n    return (el?.textContent || '').trim() || `Item ${index + 1}`;\n  }\n\n  override render() {\n    const hasOverflow = this._hiddenIndices.length > 0;\n    return html`\n      <div class=\"row\">\n        <slot @slotchange=${this._onSlotChange}></slot>\n        <span class=\"more-wrap\">\n          <button\n            class=\"more\"\n            type=\"button\"\n            ?hidden=${!hasOverflow}\n            aria-haspopup=\"menu\"\n            aria-expanded=${this._menuOpen ? 'true' : 'false'}\n            aria-label=${this.moreLabel}\n            @click=${this._toggleMenu}\n          >\n            <slot name=\"more\">\n              ${svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"5\" cy=\"12\" r=\"1.6\" fill=\"currentColor\"/><circle cx=\"12\" cy=\"12\" r=\"1.6\" fill=\"currentColor\"/><circle cx=\"19\" cy=\"12\" r=\"1.6\" fill=\"currentColor\"/></svg>`}\n            </slot>\n          </button>\n          <ul class=\"menu\" role=\"menu\" ?hidden=${!this._menuOpen}>\n            ${this._hiddenIndices.map((i) => html`\n              <li role=\"none\">\n                <button class=\"menu-item\" role=\"menuitem\" type=\"button\" @click=${() => this._selectHidden(i)}>\n                  ${this._hiddenLabel(i)}\n                </button>\n              </li>\n            `)}\n          </ul>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-overflow-list': CgOverflowList;\n  }\n}\n"],"names":["CgOverflowList","LitElement","items","el","available","gap","moreWidth","total","i","hidden","used","budget","w","isHidden","v","index","hasOverflow","html","svg","hostBlock","reducedMotion","css","focusRingDual","__decorateClass","property","state","query","queryAssignedElements","customElement"],"mappings":"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"}

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { css as w, LitElement as x, html as p, nothing as g } from "lit";
 import { property as d, state as f, query as y, customElement as S } from "lit/decorators.js";
-import { h as I, r as M } from "../../chunks/premium.css-DHekUEUt.js";
+import { h as I, r as M } from "../../chunks/premium.css-B0hBr_uS.js";
 import { b as k } from "../../chunks/outside-click-CP1P1fK3.js";
 const e = (t, a, s, n, c, l) => {
   const i = t.toUpperCase().split("").map((_) => 127462 + _.charCodeAt(0) - 65), u = String.fromCodePoint(...i), h = { iso2: t, name: a, dialCode: s, flag: u };

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

@@ -1,6 +1,6 @@
 import { css as g, LitElement as v, nothing as c, html as d } from "lit";
 import { property as i, state as h, query as u, customElement as m } from "lit/decorators.js";
-import { h as f, r as _ } from "../../chunks/premium.css-DHekUEUt.js";
+import { h as f, r as _ } from "../../chunks/premium.css-B0hBr_uS.js";
 import { b, a as w } from "../../chunks/floating-DfsaYJnh.js";
 import { b as y } from "../../chunks/outside-click-CP1P1fK3.js";
 import { F as E } from "../../chunks/focus-trap-vlQwKK-3.js";

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

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

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

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

package/dist/components/cg-radio-group/cg-radio-group.js

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

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

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

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

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

package/dist/components/cg-scroll-area/cg-scroll-area.js

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

package/dist/components/cg-segmented-control/cg-segmented-control.js

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { css as c, LitElement as h, html as u } from "lit";
 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";
+import { h as p, r as m, p as v } from "../../chunks/premium.css-B0hBr_uS.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);

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

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

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

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

package/dist/components/cg-split-button/cg-split-button.js

@@ -1,6 +1,6 @@
 import { css as g, LitElement as h, nothing as d, html as c } from "lit";
 import { property as a, state as b, query as p, customElement as v } from "lit/decorators.js";
-import { a as m, r as f, e as y, m as k } from "../../chunks/premium.css-DHekUEUt.js";
+import { a as m, r as f, e as y, m as k } from "../../chunks/premium.css-B0hBr_uS.js";
 import { a as _ } from "../../chunks/floating-DfsaYJnh.js";
 import { b as x } from "../../chunks/outside-click-CP1P1fK3.js";
 import { h as w } from "../../chunks/roving-index-BuO0tTba.js";

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

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

package/dist/components/cg-status-dot/cg-status-dot.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export type CgStatusDotStatus = 'online' | 'away' | 'busy' | 'offline' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+/**
+ * @element cg-status-dot
+ * A small colored dot indicating status/presence, with an optional pulse
+ * animation and accessible label.
+ *
+ * @example
+ * ```html
+ * <cg-status-dot status="online" label="Online"></cg-status-dot>
+ * ```
+ *
+ * @example Decorative dot next to text
+ * ```html
+ * <cg-status-dot status="busy" pulse></cg-status-dot> <span>Busy</span>
+ * ```
+ */
+export declare class CgStatusDot extends LitElement {
+    static styles: import('lit').CSSResult[];
+    status: CgStatusDotStatus;
+    size: 'sm' | 'md' | 'lg';
+    pulse: boolean;
+    label: string;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-status-dot': CgStatusDot;
+    }
+}
+//# sourceMappingURL=cg-status-dot.d.ts.map

package/dist/components/cg-status-dot/cg-status-dot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-status-dot.d.ts","sourceRoot":"","sources":["../../../src/components/cg-status-dot/cg-status-dot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GACtC,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEzD;;;;;;;;;;;;;;GAcG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BA8CnB;IAE0B,MAAM,EAAE,iBAAiB,CAAa;IACtC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjB,KAAK,UAAS;IAC9C,KAAK,SAAM;IAEd,MAAM;CAUhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/cg-status-dot/cg-status-dot.js

@@ -0,0 +1,89 @@
+import { css as d, LitElement as g, nothing as u, html as p } from "lit";
+import { property as a, customElement as h } from "lit/decorators.js";
+import { a as f, r as v } from "../../chunks/premium.css-B0hBr_uS.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (n, e, i, r) => {
+  for (var t = r > 1 ? void 0 : r ? b(e, i) : e, c = n.length - 1, l; c >= 0; c--)
+    (l = n[c]) && (t = (r ? l(e, i, t) : l(t)) || t);
+  return r && t && m(e, i, t), t;
+};
+let s = class extends g {
+  constructor() {
+    super(...arguments), this.status = "neutral", this.size = "md", this.pulse = !1, this.label = "";
+  }
+  render() {
+    return p`
+      <span
+        class="dot"
+        role=${this.label ? "status" : u}
+        aria-label=${this.label || u}
+        aria-hidden=${this.label ? u : "true"}
+      ></span>
+    `;
+  }
+};
+s.styles = [f, v, d`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      line-height: 0;
+    }
+
+    .dot {
+      display: inline-block;
+      width: var(--_cg-dot-size, 8px);
+      height: var(--_cg-dot-size, 8px);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--_cg-dot-color, var(--cg-color-surface-base-icon));
+      position: relative;
+    }
+
+    /* Sizes */
+    :host([size="sm"]) .dot { --_cg-dot-size: var(--cg-spacing-6); }
+    :host([size="md"]) .dot { --_cg-dot-size: var(--cg-spacing-8); }
+    :host([size="lg"]) .dot { --_cg-dot-size: var(--cg-spacing-12); }
+
+    /* Status → semantic color */
+    :host([status="online"]) .dot,
+    :host([status="success"]) .dot { --_cg-dot-color: var(--cg-color-status-success-text-default); }
+    :host([status="away"]) .dot,
+    :host([status="warning"]) .dot { --_cg-dot-color: var(--cg-color-status-warning-text-default); }
+    :host([status="busy"]) .dot,
+    :host([status="error"]) .dot { --_cg-dot-color: var(--cg-color-status-error-text-default); }
+    :host([status="info"]) .dot { --_cg-dot-color: var(--cg-color-status-info-text-default); }
+    :host([status="offline"]) .dot,
+    :host([status="neutral"]) .dot { --_cg-dot-color: var(--cg-color-surface-base-icon); }
+
+    /* Pulse ring */
+    :host([pulse]) .dot::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: var(--cg-border-radius-full);
+      background: inherit;
+      animation: cg-dot-pulse var(--cg-ai-effect-shimmer-duration) var(--cg-transition-easing-default) infinite;
+    }
+
+    @keyframes cg-dot-pulse {
+      0% { transform: scale(1); opacity: 0.6; }
+      100% { transform: scale(2.4); opacity: 0; }
+    }
+  `];
+o([
+  a({ reflect: !0 })
+], s.prototype, "status", 2);
+o([
+  a({ reflect: !0 })
+], s.prototype, "size", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "pulse", 2);
+o([
+  a()
+], s.prototype, "label", 2);
+s = o([
+  h("cg-status-dot")
+], s);
+export {
+  s as CgStatusDot
+};
+//# sourceMappingURL=cg-status-dot.js.map

package/dist/components/cg-status-dot/cg-status-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-status-dot.js","sources":["../../../src/components/cg-status-dot/cg-status-dot.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\nexport type CgStatusDotStatus =\n  | 'online' | 'away' | 'busy' | 'offline'\n  | 'success' | 'warning' | 'error' | 'info' | 'neutral';\n\n/**\n * @element cg-status-dot\n * A small colored dot indicating status/presence, with an optional pulse\n * animation and accessible label.\n *\n * @example\n * ```html\n * <cg-status-dot status=\"online\" label=\"Online\"></cg-status-dot>\n * ```\n *\n * @example Decorative dot next to text\n * ```html\n * <cg-status-dot status=\"busy\" pulse></cg-status-dot> <span>Busy</span>\n * ```\n */\n@customElement('cg-status-dot')\nexport class CgStatusDot extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      line-height: 0;\n    }\n\n    .dot {\n      display: inline-block;\n      width: var(--_cg-dot-size, 8px);\n      height: var(--_cg-dot-size, 8px);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--_cg-dot-color, var(--cg-color-surface-base-icon));\n      position: relative;\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .dot { --_cg-dot-size: var(--cg-spacing-6); }\n    :host([size=\"md\"]) .dot { --_cg-dot-size: var(--cg-spacing-8); }\n    :host([size=\"lg\"]) .dot { --_cg-dot-size: var(--cg-spacing-12); }\n\n    /* Status → semantic color */\n    :host([status=\"online\"]) .dot,\n    :host([status=\"success\"]) .dot { --_cg-dot-color: var(--cg-color-status-success-text-default); }\n    :host([status=\"away\"]) .dot,\n    :host([status=\"warning\"]) .dot { --_cg-dot-color: var(--cg-color-status-warning-text-default); }\n    :host([status=\"busy\"]) .dot,\n    :host([status=\"error\"]) .dot { --_cg-dot-color: var(--cg-color-status-error-text-default); }\n    :host([status=\"info\"]) .dot { --_cg-dot-color: var(--cg-color-status-info-text-default); }\n    :host([status=\"offline\"]) .dot,\n    :host([status=\"neutral\"]) .dot { --_cg-dot-color: var(--cg-color-surface-base-icon); }\n\n    /* Pulse ring */\n    :host([pulse]) .dot::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: var(--cg-border-radius-full);\n      background: inherit;\n      animation: cg-dot-pulse var(--cg-ai-effect-shimmer-duration) var(--cg-transition-easing-default) infinite;\n    }\n\n    @keyframes cg-dot-pulse {\n      0% { transform: scale(1); opacity: 0.6; }\n      100% { transform: scale(2.4); opacity: 0; }\n    }\n  `];\n\n  @property({ reflect: true }) status: CgStatusDotStatus = 'neutral';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean, reflect: true }) pulse = false;\n  @property() label = '';\n\n  override render() {\n    return html`\n      <span\n        class=\"dot\"\n        role=${this.label ? 'status' : nothing}\n        aria-label=${this.label || nothing}\n        aria-hidden=${this.label ? nothing : 'true'}\n      ></span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-status-dot': CgStatusDot;\n  }\n}\n"],"names":["CgStatusDot","LitElement","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAwBO,IAAMA,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiDwB,KAAA,SAA4B,WAC5B,KAAA,OAA2B,MACZ,KAAA,QAAQ,IACxC,KAAA,QAAQ;AAAA,EAAA;AAAA,EAEX,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,eAGI,KAAK,QAAQ,WAAWC,CAAO;AAAA,qBACzB,KAAK,SAASA,CAAO;AAAA,sBACpB,KAAK,QAAQA,IAAU,MAAM;AAAA;AAAA;AAAA,EAGjD;AACF;AAhEaH,EACK,SAAS,CAACI,GAAUC,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,GA8ClD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjDhBR,EAiDkB,WAAA,UAAA,CAAA;AACAO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAlDhBR,EAkDkB,WAAA,QAAA,CAAA;AACeO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnD/BR,EAmDiC,WAAA,SAAA,CAAA;AAChCO,EAAA;AAAA,EAAXC,EAAA;AAAS,GApDCR,EAoDC,WAAA,SAAA,CAAA;AApDDA,IAANO,EAAA;AAAA,EADNE,EAAc,eAAe;AAAA,GACjBT,CAAA;"}

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

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