@cognivo/components 0.8.0

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

@@ -0,0 +1,218 @@
+import { css as d, LitElement as u, nothing as v, html as i } from "lit";
+import { property as c, state as f, customElement as h } from "lit/decorators.js";
+import { a as p, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? w(r, a) : r, l = e.length - 1, g; l >= 0; l--)
+    (g = e[l]) && (t = (s ? g(r, a, t) : g(t)) || t);
+  return s && t && b(r, a, t), t;
+};
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.avatars = [], this.maxVisible = 4, this.size = "md", this.expanded = !1, this._failedImages = /* @__PURE__ */ new Set();
+  }
+  _getInitials(e) {
+    return e.split(" ").map((r) => r[0] || "").join("").slice(0, 2);
+  }
+  _onImgError(e) {
+    this._failedImages = new Set(this._failedImages).add(e);
+  }
+  _onGroupEnter() {
+    this.expanded = !0;
+  }
+  _onGroupLeave() {
+    this.expanded = !1;
+  }
+  _onAvatarClick() {
+    this.dispatchEvent(new CustomEvent("cg-avatar-group-click", { bubbles: !0, composed: !0 }));
+  }
+  _onOverflowClick() {
+    this.dispatchEvent(new CustomEvent("cg-avatar-group-overflow-click", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    const e = this.avatars.slice(0, this.maxVisible), r = this.avatars.length - this.maxVisible;
+    return i`
+      <div class="group" role="group" aria-label="Avatar group"
+        @mouseenter=${this._onGroupEnter}
+        @mouseleave=${this._onGroupLeave}>
+        ${e.map((a, s) => i`
+          <div class="avatar"
+            role="button"
+            tabindex="0"
+            aria-label=${a.name}
+            style="z-index:${e.length - s}; --avatar-index: ${s}"
+            @click=${this._onAvatarClick}
+            @keydown=${(t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._onAvatarClick());
+    }}>
+            <div class="avatar-inner">
+              ${a.src && !this._failedImages.has(s) ? i`
+                <img src=${a.src} alt=${a.name} loading="lazy" @error=${() => this._onImgError(s)} />
+              ` : i`
+                <span class="initials">${this._getInitials(a.name)}</span>
+              `}
+            </div>
+            ${a.status ? i`<span class="status ${a.status}"></span>` : v}
+          </div>
+        `)}
+        ${r > 0 ? i`
+          <button class="overflow"
+            aria-label="${r} more avatars"
+            style="z-index:0"
+            @click=${this._onOverflowClick}>
+            +${r}
+          </button>
+        ` : v}
+      </div>
+    `;
+  }
+};
+o.styles = [p, m, d`
+    .group {
+      display: flex;
+      align-items: center;
+    }
+
+    .avatar {
+      position: relative;
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);
+      background: var(--cg-color-action-secondary-background-default);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      cursor: pointer;
+      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out), margin var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+      animation: avatarIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
+      animation-delay: calc(var(--avatar-index, 0) * 50ms);
+    }
+
+    .avatar-inner {
+      width: 100%;
+      height: 100%;
+      border-radius: var(--cg-border-radius-full);
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    @keyframes avatarIn {
+      from { opacity: 0; transform: scale(0.8); }
+      to { opacity: 1; transform: scale(1); }
+    }
+
+    :host([expanded]) .avatar,
+    :host([expanded]) .overflow { margin-left: var(--cg-spacing-4) !important; }
+    :host([expanded]) .avatar:first-child { margin-left: 0 !important; }
+
+    .avatar:hover {
+      z-index: 10;
+      transform: scale(1.15) translateY(calc(-1 * var(--cg-spacing-2)));
+    }
+
+    .avatar:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    .avatar:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--cg-color-focus-ring-offset),
+        0 0 0 4px var(--cg-color-focus-ring);
+      z-index: 11;
+    }
+
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .initials {
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      text-transform: uppercase;
+      line-height: 1;
+      pointer-events: none;
+    }
+
+    /* Status dot */
+    .status {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);
+    }
+    .status.online { background: var(--cg-color-status-success-text-default); }
+    .status.offline { background: var(--cg-color-surface-container-outlined); }
+    .status.busy { background: var(--cg-color-status-error-text-default); }
+    .status.away { background: var(--cg-color-status-warning-text-default); }
+
+    /* Overflow badge */
+    .overflow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);
+      background: var(--cg-color-action-secondary-background-default);
+      color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .overflow:hover {
+      background: var(--cg-color-action-secondary-background-hover);
+      transform: scale(1.1);
+    }
+    .overflow:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--cg-color-focus-ring-offset),
+        0 0 0 4px var(--cg-color-focus-ring);
+    }
+
+    /* Sizes */
+    :host([size="sm"]) .avatar, :host([size="sm"]) .overflow { width: var(--cg-spacing-32); height: var(--cg-spacing-32); }
+    :host([size="sm"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-8)); }
+    :host([size="sm"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-8)); font-size: var(--cg-font-size-xs); }
+    :host([size="sm"]) .initials { font-size: var(--cg-font-size-xs); }
+    :host([size="sm"]) .status { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }
+
+    :host([size="md"]) .avatar, :host([size="md"]) .overflow { width: var(--cg-spacing-40); height: var(--cg-spacing-40); }
+    :host([size="md"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }
+    :host([size="md"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-xs); }
+    :host([size="md"]) .initials { font-size: var(--cg-font-size-xs); }
+    :host([size="md"]) .status { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+
+    :host([size="lg"]) .avatar, :host([size="lg"]) .overflow { width: var(--cg-spacing-48); height: var(--cg-spacing-48); }
+    :host([size="lg"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }
+    :host([size="lg"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-sm); }
+    :host([size="lg"]) .initials { font-size: var(--cg-font-size-sm); }
+    :host([size="lg"]) .status { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+  `];
+n([
+  c({ type: Array })
+], o.prototype, "avatars", 2);
+n([
+  c({ type: Number })
+], o.prototype, "maxVisible", 2);
+n([
+  c({ reflect: !0 })
+], o.prototype, "size", 2);
+n([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "expanded", 2);
+n([
+  f()
+], o.prototype, "_failedImages", 2);
+o = n([
+  h("cg-avatar-group")
+], o);
+export {
+  o as CgAvatarGroup
+};
+//# sourceMappingURL=cg-avatar-group.js.map

package/dist/components/cg-avatar-group/cg-avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-avatar-group.js","sources":["../../../src/components/cg-avatar-group/cg-avatar-group.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\nexport interface AvatarItem {\n  src?: string;\n  name: string;\n  status?: 'online' | 'offline' | 'busy' | 'away';\n}\n\n/**\n * <cg-avatar-group> — Overlapping avatar stack with overflow badge.\n *\n * Features:\n * - Overlapping circles with negative margin\n * - \"+N more\" overflow badge\n * - Status dots (online/offline/busy/away)\n * - Initials fallback, image error fallback\n * - Hover to spread apart, size variants\n * - Click events on overflow\n */\n@customElement('cg-avatar-group')\nexport class CgAvatarGroup extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    .group {\n      display: flex;\n      align-items: center;\n    }\n\n    .avatar {\n      position: relative;\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n      background: var(--cg-color-action-secondary-background-default);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      cursor: pointer;\n      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out), margin var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      animation: avatarIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--avatar-index, 0) * 50ms);\n    }\n\n    .avatar-inner {\n      width: 100%;\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    @keyframes avatarIn {\n      from { opacity: 0; transform: scale(0.8); }\n      to { opacity: 1; transform: scale(1); }\n    }\n\n    :host([expanded]) .avatar,\n    :host([expanded]) .overflow { margin-left: var(--cg-spacing-4) !important; }\n    :host([expanded]) .avatar:first-child { margin-left: 0 !important; }\n\n    .avatar:hover {\n      z-index: 10;\n      transform: scale(1.15) translateY(calc(-1 * var(--cg-spacing-2)));\n    }\n\n    .avatar:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    .avatar:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-focus-ring-offset),\n        0 0 0 4px var(--cg-color-focus-ring);\n      z-index: 11;\n    }\n\n    .avatar img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .initials {\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      text-transform: uppercase;\n      line-height: 1;\n      pointer-events: none;\n    }\n\n    /* Status dot */\n    .status {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n    }\n    .status.online { background: var(--cg-color-status-success-text-default); }\n    .status.offline { background: var(--cg-color-surface-container-outlined); }\n    .status.busy { background: var(--cg-color-status-error-text-default); }\n    .status.away { background: var(--cg-color-status-warning-text-default); }\n\n    /* Overflow badge */\n    .overflow {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n      background: var(--cg-color-action-secondary-background-default);\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      flex-shrink: 0;\n      transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .overflow:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n      transform: scale(1.1);\n    }\n    .overflow:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-focus-ring-offset),\n        0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .avatar, :host([size=\"sm\"]) .overflow { width: var(--cg-spacing-32); height: var(--cg-spacing-32); }\n    :host([size=\"sm\"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-8)); }\n    :host([size=\"sm\"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-8)); font-size: var(--cg-font-size-xs); }\n    :host([size=\"sm\"]) .initials { font-size: var(--cg-font-size-xs); }\n    :host([size=\"sm\"]) .status { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }\n\n    :host([size=\"md\"]) .avatar, :host([size=\"md\"]) .overflow { width: var(--cg-spacing-40); height: var(--cg-spacing-40); }\n    :host([size=\"md\"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }\n    :host([size=\"md\"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-xs); }\n    :host([size=\"md\"]) .initials { font-size: var(--cg-font-size-xs); }\n    :host([size=\"md\"]) .status { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n    :host([size=\"lg\"]) .avatar, :host([size=\"lg\"]) .overflow { width: var(--cg-spacing-48); height: var(--cg-spacing-48); }\n    :host([size=\"lg\"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }\n    :host([size=\"lg\"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-sm); }\n    :host([size=\"lg\"]) .initials { font-size: var(--cg-font-size-sm); }\n    :host([size=\"lg\"]) .status { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n  `];\n\n  @property({ type: Array }) avatars: AvatarItem[] = [];\n  @property({ type: Number }) maxVisible = 4;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /** Tracks which avatar indices have failed images */\n  @state() private _failedImages = new Set<number>();\n\n  private _getInitials(name: string): string {\n    return name.split(' ').map(p => p[0] || '').join('').slice(0, 2);\n  }\n\n  private _onImgError(index: number) {\n    this._failedImages = new Set(this._failedImages).add(index);\n  }\n\n  private _onGroupEnter() { this.expanded = true; }\n  private _onGroupLeave() { this.expanded = false; }\n\n  private _onAvatarClick() {\n    this.dispatchEvent(new CustomEvent('cg-avatar-group-click', { bubbles: true, composed: true }));\n  }\n\n  private _onOverflowClick() {\n    this.dispatchEvent(new CustomEvent('cg-avatar-group-overflow-click', { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    const visible = this.avatars.slice(0, this.maxVisible);\n    const overflow = this.avatars.length - this.maxVisible;\n\n    return html`\n      <div class=\"group\" role=\"group\" aria-label=\"Avatar group\"\n        @mouseenter=${this._onGroupEnter}\n        @mouseleave=${this._onGroupLeave}>\n        ${visible.map((a, i) => html`\n          <div class=\"avatar\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=${a.name}\n            style=\"z-index:${visible.length - i}; --avatar-index: ${i}\"\n            @click=${this._onAvatarClick}\n            @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._onAvatarClick(); } }}>\n            <div class=\"avatar-inner\">\n              ${a.src && !this._failedImages.has(i) ? html`\n                <img src=${a.src} alt=${a.name} loading=\"lazy\" @error=${() => this._onImgError(i)} />\n              ` : html`\n                <span class=\"initials\">${this._getInitials(a.name)}</span>\n              `}\n            </div>\n            ${a.status ? html`<span class=\"status ${a.status}\"></span>` : nothing}\n          </div>\n        `)}\n        ${overflow > 0 ? html`\n          <button class=\"overflow\"\n            aria-label=\"${overflow} more avatars\"\n            style=\"z-index:0\"\n            @click=${this._onOverflowClick}>\n            +${overflow}\n          </button>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-avatar-group': CgAvatarGroup;\n  }\n}\n"],"names":["CgAvatarGroup","LitElement","name","p","index","visible","overflow","html","i","e","nothing","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-badge
+ * Static semantic status label — display only, no interaction.
+ *
+ * If you need a clickable / removable / selectable pill, use `cg-chip` instead.
+ * If you need a toolbar press-state button, use `cg-toggle`.
+ *
+ * @example
+ * ```html
+ * <cg-badge variant="success" label="Active" dot></cg-badge>
+ * <cg-badge variant="danger" label="Error"></cg-badge>
+ * <cg-badge variant="accent" size="lg">Custom</cg-badge>
+ * ```
+ *
+ * @slot - Additional content after the label text
+ *
+ * @cssprop --cg-color-badge-background-default - Neutral badge background
+ * @cssprop --cg-color-badge-text-default - Neutral badge text color
+ * @cssprop --cg-component-badge-radius-md - Badge border radius (md)
+ * @cssprop --cg-font-size-xs - Badge font size (12px)
+ */
+export declare class CgBadge extends LitElement {
+    static styles: import('lit').CSSResult[];
+    variant: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
+    size: 'sm' | 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    label: string;
+    dot: boolean;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-badge': CgBadge;
+    }
+}
+//# sourceMappingURL=cg-badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-badge.d.ts","sourceRoot":"","sources":["../../../src/components/cg-badge/cg-badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAiFnB;IAE0B,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAa;IACtF,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,KAAK,SAAM;IACM,GAAG,UAAS;IAEhC,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,125 @@
+import { css as l, LitElement as u, nothing as b, html as i } from "lit";
+import { property as e, customElement as v } from "lit/decorators.js";
+import { a as p, r as f, e as h, d as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (g, t, d, s) => {
+  for (var a = s > 1 ? void 0 : s ? w(t, d) : t, c = g.length - 1, n; c >= 0; c--)
+    (n = g[c]) && (a = (s ? n(t, d, a) : n(a)) || a);
+  return s && a && y(t, d, a), a;
+};
+let r = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "neutral", this.size = "md", this.rounded = "md", this.label = "", this.dot = !1;
+  }
+  render() {
+    return i`
+      <span class="badge" role=${this.dot ? "status" : "presentation"}>
+        ${this.dot ? i`<span class="dot"></span>` : b}
+        <span class="text">${this.label}<slot></slot></span>
+      </span>
+    `;
+  }
+};
+r.styles = [p, f, h, m, l`
+    :host {
+      animation: staggerFadeIn var(--cg-transition-duration-fast) ease-out both;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      font-weight: var(--cg-font-weight-medium);
+      white-space: nowrap;
+      border: var(--cg-border-width-50) solid transparent;
+      transition: background-color var(--cg-transition-duration-fast) ease, border-color var(--cg-transition-duration-fast) ease, opacity var(--cg-transition-duration-fast) ease;
+    }
+
+    /* Sizes */
+    :host([size="sm"]) .badge {
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      border-radius: var(--cg-component-badge-radius-sm);
+    }
+    :host([size="md"]) .badge {
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-sm);
+      border-radius: var(--cg-component-badge-radius-md);
+    }
+    :host([size="lg"]) .badge {
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      font-size: var(--cg-font-size-base);
+      border-radius: var(--cg-component-badge-radius-lg);
+    }
+
+    /* Variants */
+    :host([variant="neutral"]) .badge {
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-container-text);
+      border-color: var(--cg-color-surface-container-border);
+    }
+    :host([variant="info"]) .badge {
+      background: var(--cg-color-badge-background-default);
+      color: var(--cg-color-badge-text-default);
+      border-color: var(--cg-color-status-info-border-default);
+    }
+    :host([variant="success"]) .badge {
+      background: var(--cg-color-badge-background-success);
+      color: var(--cg-color-badge-text-success);
+      border-color: var(--cg-color-status-success-border-default);
+    }
+    :host([variant="warning"]) .badge {
+      background: var(--cg-color-badge-background-warning);
+      color: var(--cg-color-badge-text-warning);
+      border-color: var(--cg-color-status-warning-border-default);
+    }
+    :host([variant="danger"]) .badge {
+      background: var(--cg-color-badge-background-error);
+      color: var(--cg-color-badge-text-error);
+      border-color: var(--cg-color-status-error-border-default);
+    }
+    :host([variant="accent"]) .badge {
+      background: var(--cg-overlay-accent-light);
+      color: var(--cg-color-action-primary-background-default);
+      border-color: var(--cg-overlay-accent-strong);
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) .badge { border-radius: 0; }
+    :host([rounded="sm"]) .badge { border-radius: var(--cg-component-badge-radius-sm); }
+    :host([rounded="md"]) .badge { border-radius: var(--cg-component-badge-radius-md); }
+    :host([rounded="lg"]) .badge { border-radius: var(--cg-component-badge-radius-lg); }
+    :host([rounded="full"]) .badge { border-radius: var(--cg-border-radius-full); }
+
+    /* Dot indicator */
+    .dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: currentColor;
+      flex-shrink: 0;
+      animation: dotPulse 2s ease-in-out infinite;
+    }
+
+  `];
+o([
+  e({ reflect: !0 })
+], r.prototype, "variant", 2);
+o([
+  e({ reflect: !0 })
+], r.prototype, "size", 2);
+o([
+  e({ reflect: !0 })
+], r.prototype, "rounded", 2);
+o([
+  e()
+], r.prototype, "label", 2);
+o([
+  e({ type: Boolean })
+], r.prototype, "dot", 2);
+r = o([
+  v("cg-badge")
+], r);
+export {
+  r as CgBadge
+};
+//# sourceMappingURL=cg-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-badge.js","sources":["../../../src/components/cg-badge/cg-badge.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, entranceStagger, dotPulseKeyframes } from '../../styles/index.js';\n\n/**\n * @element cg-badge\n * Static semantic status label — display only, no interaction.\n *\n * If you need a clickable / removable / selectable pill, use `cg-chip` instead.\n * If you need a toolbar press-state button, use `cg-toggle`.\n *\n * @example\n * ```html\n * <cg-badge variant=\"success\" label=\"Active\" dot></cg-badge>\n * <cg-badge variant=\"danger\" label=\"Error\"></cg-badge>\n * <cg-badge variant=\"accent\" size=\"lg\">Custom</cg-badge>\n * ```\n *\n * @slot - Additional content after the label text\n *\n * @cssprop --cg-color-badge-background-default - Neutral badge background\n * @cssprop --cg-color-badge-text-default - Neutral badge text color\n * @cssprop --cg-component-badge-radius-md - Badge border radius (md)\n * @cssprop --cg-font-size-xs - Badge font size (12px)\n */\n@customElement('cg-badge')\nexport class CgBadge extends LitElement {\n  static override styles = [hostBase, reducedMotion, entranceStagger, dotPulseKeyframes, css`\n    :host {\n      animation: staggerFadeIn var(--cg-transition-duration-fast) ease-out both;\n    }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      font-weight: var(--cg-font-weight-medium);\n      white-space: nowrap;\n      border: var(--cg-border-width-50) solid transparent;\n      transition: background-color var(--cg-transition-duration-fast) ease, border-color var(--cg-transition-duration-fast) ease, opacity var(--cg-transition-duration-fast) ease;\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .badge {\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      border-radius: var(--cg-component-badge-radius-sm);\n    }\n    :host([size=\"md\"]) .badge {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-sm);\n      border-radius: var(--cg-component-badge-radius-md);\n    }\n    :host([size=\"lg\"]) .badge {\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-base);\n      border-radius: var(--cg-component-badge-radius-lg);\n    }\n\n    /* Variants */\n    :host([variant=\"neutral\"]) .badge {\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-container-text);\n      border-color: var(--cg-color-surface-container-border);\n    }\n    :host([variant=\"info\"]) .badge {\n      background: var(--cg-color-badge-background-default);\n      color: var(--cg-color-badge-text-default);\n      border-color: var(--cg-color-status-info-border-default);\n    }\n    :host([variant=\"success\"]) .badge {\n      background: var(--cg-color-badge-background-success);\n      color: var(--cg-color-badge-text-success);\n      border-color: var(--cg-color-status-success-border-default);\n    }\n    :host([variant=\"warning\"]) .badge {\n      background: var(--cg-color-badge-background-warning);\n      color: var(--cg-color-badge-text-warning);\n      border-color: var(--cg-color-status-warning-border-default);\n    }\n    :host([variant=\"danger\"]) .badge {\n      background: var(--cg-color-badge-background-error);\n      color: var(--cg-color-badge-text-error);\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    :host([variant=\"accent\"]) .badge {\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-action-primary-background-default);\n      border-color: var(--cg-overlay-accent-strong);\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .badge { border-radius: 0; }\n    :host([rounded=\"sm\"]) .badge { border-radius: var(--cg-component-badge-radius-sm); }\n    :host([rounded=\"md\"]) .badge { border-radius: var(--cg-component-badge-radius-md); }\n    :host([rounded=\"lg\"]) .badge { border-radius: var(--cg-component-badge-radius-lg); }\n    :host([rounded=\"full\"]) .badge { border-radius: var(--cg-border-radius-full); }\n\n    /* Dot indicator */\n    .dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: currentColor;\n      flex-shrink: 0;\n      animation: dotPulse 2s ease-in-out infinite;\n    }\n\n  `];\n\n  @property({ reflect: true }) variant: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent' = 'neutral';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property() label = '';\n  @property({ type: Boolean }) dot = false;\n\n  override render() {\n    return html`\n      <span class=\"badge\" role=${this.dot ? 'status' : 'presentation'}>\n        ${this.dot ? html`<span class=\"dot\"></span>` : nothing}\n        <span class=\"text\">${this.label}<slot></slot></span>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-badge': CgBadge;\n  }\n}\n"],"names":["CgBadge","LitElement","html","nothing","hostBase","reducedMotion","entranceStagger","dotPulseKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AA0BO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAoFwB,KAAA,UAA4E,WAC5E,KAAA,OAA2B,MAC3B,KAAA,UAAgD,MACjE,KAAA,QAAQ,IACS,KAAA,MAAM;AAAA,EAAA;AAAA,EAE1B,SAAS;AAChB,WAAOC;AAAA,iCACsB,KAAK,MAAM,WAAW,cAAc;AAAA,UAC3D,KAAK,MAAMA,+BAAkCC,CAAO;AAAA,6BACjC,KAAK,KAAK;AAAA;AAAA;AAAA,EAGrC;AACF;AAlGaH,EACK,SAAS,CAACI,GAAUC,GAAeC,GAAiBC,GAAmBC;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiFtF;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GApFhBV,EAoFkB,WAAA,WAAA,CAAA;AACAS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GArFhBV,EAqFkB,WAAA,QAAA,CAAA;AACAS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAtFhBV,EAsFkB,WAAA,WAAA,CAAA;AACjBS,EAAA;AAAA,EAAXC,EAAA;AAAS,GAvFCV,EAuFC,WAAA,SAAA,CAAA;AACiBS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAxFhBV,EAwFkB,WAAA,OAAA,CAAA;AAxFlBA,IAANS,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZX,CAAA;"}

package/dist/components/cg-badge-group/cg-badge-group.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-badge-group> — Container for a group of badges/tags.
+ *
+ * Features:
+ * - Horizontal wrap layout with configurable gap
+ * - Optional label above the group
+ * - Max visible count with "+N more" overflow indicator
+ * - Configurable size passed to children
+ */
+export declare class CgBadgeGroup extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Optional label displayed above the badge group. */
+    label: string;
+    /** Gap between badges. */
+    gap: 'xs' | 'sm' | 'md' | 'lg';
+    /** Max number of visible badges. 0 = show all. */
+    max: number;
+    /** Total count (for overflow calculation when using max). */
+    total: number;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-badge-group': CgBadgeGroup;
+    }
+}
+//# sourceMappingURL=cg-badge-group.d.ts.map

package/dist/components/cg-badge-group/cg-badge-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-badge-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-badge-group/cg-badge-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAmCnB;IAEH,sDAAsD;IAC1C,KAAK,SAAM;IAEvB,0BAA0B;IACG,GAAG,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEnE,kDAAkD;IACtB,GAAG,SAAK;IAEpC,6DAA6D;IACjC,KAAK,SAAK;IAE7B,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}

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

@@ -0,0 +1,78 @@
+import { css as m, LitElement as d, nothing as n, html as p } from "lit";
+import { property as g, customElement as f } from "lit/decorators.js";
+import { h as v, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var h = Object.defineProperty, u = Object.getOwnPropertyDescriptor, e = (r, o, l, s) => {
+  for (var t = s > 1 ? void 0 : s ? u(o, l) : o, i = r.length - 1, c; i >= 0; i--)
+    (c = r[i]) && (t = (s ? c(o, l, t) : c(t)) || t);
+  return s && t && h(o, l, t), t;
+};
+let a = class extends d {
+  constructor() {
+    super(...arguments), this.label = "", this.gap = "sm", this.max = 0, this.total = 0;
+  }
+  render() {
+    const r = this.max > 0 && this.total > this.max ? this.total - this.max : 0;
+    return p`
+      ${this.label ? p`<div class="label">${this.label}</div>` : n}
+      <div class="badges" role="group" aria-label=${this.label || "Badge group"}>
+        <slot></slot>
+        ${r > 0 ? p`<span class="overflow" title="${r} more items">+${r}</span>` : n}
+      </div>
+    `;
+  }
+};
+a.styles = [v, b, m`
+    :host {
+      display: block;
+      font-family: var(--cg-font-family-primary);
+    }
+
+    .label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-tertiary-text);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      margin-bottom: var(--cg-spacing-8);
+    }
+
+    .badges {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    :host([gap="xs"]) .badges { gap: var(--cg-spacing-4); }
+    :host([gap="sm"]) .badges { gap: var(--cg-spacing-6); }
+    :host([gap="md"]) .badges { gap: var(--cg-spacing-8); }
+    :host([gap="lg"]) .badges { gap: var(--cg-spacing-12); }
+
+    .overflow {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-tertiary-text);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      background: var(--cg-color-action-secondary-background-default);
+      border-radius: var(--cg-border-radius-100);
+      cursor: default;
+    }
+  `];
+e([
+  g()
+], a.prototype, "label", 2);
+e([
+  g({ reflect: !0 })
+], a.prototype, "gap", 2);
+e([
+  g({ type: Number })
+], a.prototype, "max", 2);
+e([
+  g({ type: Number })
+], a.prototype, "total", 2);
+a = e([
+  f("cg-badge-group")
+], a);
+export {
+  a as CgBadgeGroup
+};
+//# sourceMappingURL=cg-badge-group.js.map

package/dist/components/cg-badge-group/cg-badge-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-badge-group.js","sources":["../../../src/components/cg-badge-group/cg-badge-group.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-badge-group> — Container for a group of badges/tags.\n *\n * Features:\n * - Horizontal wrap layout with configurable gap\n * - Optional label above the group\n * - Max visible count with \"+N more\" overflow indicator\n * - Configurable size passed to children\n */\n@customElement('cg-badge-group')\nexport class CgBadgeGroup extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-tertiary-text);\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      margin-bottom: var(--cg-spacing-8);\n    }\n\n    .badges {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n    }\n\n    :host([gap=\"xs\"]) .badges { gap: var(--cg-spacing-4); }\n    :host([gap=\"sm\"]) .badges { gap: var(--cg-spacing-6); }\n    :host([gap=\"md\"]) .badges { gap: var(--cg-spacing-8); }\n    :host([gap=\"lg\"]) .badges { gap: var(--cg-spacing-12); }\n\n    .overflow {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-tertiary-text);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      background: var(--cg-color-action-secondary-background-default);\n      border-radius: var(--cg-border-radius-100);\n      cursor: default;\n    }\n  `];\n\n  /** Optional label displayed above the badge group. */\n  @property() label = '';\n\n  /** Gap between badges. */\n  @property({ reflect: true }) gap: 'xs' | 'sm' | 'md' | 'lg' = 'sm';\n\n  /** Max number of visible badges. 0 = show all. */\n  @property({ type: Number }) max = 0;\n\n  /** Total count (for overflow calculation when using max). */\n  @property({ type: Number }) total = 0;\n\n  override render() {\n    const overflowCount = this.max > 0 && this.total > this.max ? this.total - this.max : 0;\n\n    return html`\n      ${this.label ? html`<div class=\"label\">${this.label}</div>` : nothing}\n      <div class=\"badges\" role=\"group\" aria-label=${this.label || 'Badge group'}>\n        <slot></slot>\n        ${overflowCount > 0 ? html`<span class=\"overflow\" title=\"${overflowCount} more items\">+${overflowCount}</span>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-badge-group': CgBadgeGroup; }\n}\n"],"names":["CgBadgeGroup","LitElement","overflowCount","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAcO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAuCO,KAAA,QAAQ,IAGS,KAAA,MAAiC,MAGlC,KAAA,MAAM,GAGN,KAAA,QAAQ;AAAA,EAAA;AAAA,EAE3B,SAAS;AAChB,UAAMC,IAAgB,KAAK,MAAM,KAAK,KAAK,QAAQ,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AAEtF,WAAOC;AAAA,QACH,KAAK,QAAQA,uBAA0B,KAAK,KAAK,WAAWC,CAAO;AAAA,oDACvB,KAAK,SAAS,aAAa;AAAA;AAAA,UAErEF,IAAgB,IAAIC,kCAAqCD,CAAa,iBAAiBA,CAAa,YAAYE,CAAO;AAAA;AAAA;AAAA,EAG/H;AACF;AA7DaJ,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,GAmCnD;AAGWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAvCCT,EAuCC,WAAA,SAAA,CAAA;AAGiBQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1ChBT,EA0CkB,WAAA,OAAA,CAAA;AAGDQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7CfT,EA6CiB,WAAA,OAAA,CAAA;AAGAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhDfT,EAgDiB,WAAA,SAAA,CAAA;AAhDjBA,IAANQ,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBV,CAAA;"}

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

@@ -0,0 +1,52 @@
+import { LitElement, nothing } from 'lit';
+/** Breadcrumb segment for cg-breadcrumbs, with label, optional href, and optional icon. */
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: string;
+}
+/**
+ * @element cg-breadcrumbs
+ * Navigation breadcrumb trail with responsive collapse and custom separators.
+ *
+ * @example
+ * ```html
+ * <cg-breadcrumbs
+ *   separator="/"
+ *   .items=${[
+ *     {label:'Home', href:'/'},
+ *     {label:'Products', href:'/products'},
+ *     {label:'Widget'},
+ *   ]}
+ * ></cg-breadcrumbs>
+ * <cg-breadcrumbs maxVisible="3" .items=${longTrail}></cg-breadcrumbs>
+ * ```
+ *
+ * @fires {CustomEvent<{label: string, href?: string, index: number}>} cg-breadcrumb-click - When a breadcrumb link is clicked
+ *
+ * @cssprop [--cg-color-text-secondary=#a1a1aa] - Link text color
+ * @cssprop [--cg-color-text-primary=#fafafa] - Current page text color
+ * @cssprop [--cg-brand-ai-accent=#dfff61] - Focus ring color
+ * @cssprop [--cg-font-size-sm=14px] - Breadcrumb font size (md)
+ */
+export declare class CgBreadcrumbs extends LitElement {
+    static styles: import('lit').CSSResult[];
+    size: 'sm' | 'md' | 'lg';
+    items: BreadcrumbItem[];
+    separator: string;
+    /** Max visible items (0 = show all). Always shows first + last (maxVisible - 1) items. */
+    maxVisible: number;
+    private _expanded;
+    private _handleClick;
+    private _expandCollapsed;
+    private _renderCrumb;
+    private _renderItem;
+    private _renderEllipsis;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-breadcrumbs': CgBreadcrumbs;
+    }
+}
+//# sourceMappingURL=cg-breadcrumbs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/cg-breadcrumbs/cg-breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,2FAA2F;AAC3F,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA8JnB;IAE0B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAClC,KAAK,EAAE,cAAc,EAAE,CAAM;IAC5B,SAAS,SAAO;IAE5C,0FAA0F;IAC9D,UAAU,SAAK;IAElC,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAkCpB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,eAAe;IAad,MAAM;CA8ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}