@cognivo/components 0.8.0

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

@@ -0,0 +1,279 @@
+import { css as g, LitElement as h, html as s, nothing as d } from "lit";
+import { property as c, state as u, query as v, customElement as f } from "lit/decorators.js";
+import { h as b, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, r, a, n) => {
+  for (var i = n > 1 ? void 0 : n ? y(r, a) : r, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (i = (n ? p(r, a, i) : p(i)) || i);
+  return n && i && _(r, a, i), i;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.options = [], this.rounded = "lg", this.value = "", this.placeholder = "", this.label = "", this.disabled = !1, this.error = !1, this.clearable = !1, this._query = "", this._open = !1, this._focused = !1, this._activeIndex = -1;
+  }
+  get _filtered() {
+    const e = this._query.toLowerCase();
+    return e ? this.options.filter((r) => r.label.toLowerCase().includes(e)) : this.options;
+  }
+  _onInput(e) {
+    this._query = e.target.value, this._open = !0, this._activeIndex = -1, this.dispatchEvent(new CustomEvent("cg-autocomplete-input", { detail: { query: this._query }, bubbles: !0, composed: !0 }));
+  }
+  _select(e) {
+    this.value = e.value, this._query = e.label, this._open = !1, this.dispatchEvent(new CustomEvent("cg-autocomplete-select", { detail: { value: e.value, label: e.label }, bubbles: !0, composed: !0 }));
+  }
+  _onKeyDown(e) {
+    const r = this._filtered;
+    e.key === "ArrowDown" ? (e.preventDefault(), this._open = !0, this._activeIndex = Math.min(this._activeIndex + 1, r.length - 1)) : e.key === "ArrowUp" ? (e.preventDefault(), this._activeIndex = Math.max(this._activeIndex - 1, 0)) : e.key === "Enter" && this._activeIndex >= 0 && r[this._activeIndex] ? (e.preventDefault(), this._select(r[this._activeIndex])) : e.key === "Escape" && (this._open = !1);
+  }
+  _clear() {
+    this.value = "", this._query = "", this._input.focus(), this.dispatchEvent(new CustomEvent("cg-autocomplete-select", { detail: { value: "", label: "" }, bubbles: !0, composed: !0 }));
+  }
+  _highlightMatch(e) {
+    const r = this._query.toLowerCase(), a = e.toLowerCase().indexOf(r);
+    if (a < 0 || !r) return e;
+    const n = e.slice(0, a), i = e.slice(a, a + r.length), l = e.slice(a + r.length);
+    return s`${n}<span class="match">${i}</span>${l}`;
+  }
+  render() {
+    const e = this._filtered;
+    return s`
+      ${this.label ? s`<span class="label">${this.label}</span>` : d}
+      <div class="input-wrap ${this._focused ? "focused" : ""} ${this.disabled ? "disabled" : ""}">
+        <input
+          .value=${this._query}
+          placeholder=${this.placeholder || d}
+          ?disabled=${this.disabled}
+          role="combobox"
+          aria-expanded=${this._open}
+          aria-autocomplete="list"
+          aria-label=${this.label || "Autocomplete"}
+          @input=${this._onInput}
+          @keydown=${this._onKeyDown}
+          @focus=${() => {
+      this._focused = !0, this._open = !0;
+    }}
+          @blur=${() => {
+      this._focused = !1, this._open = !1;
+    }}
+        />
+        ${this.clearable && this._query ? s`
+          <button class="clear" @mousedown=${(r) => r.preventDefault()} @click=${this._clear} aria-label="Clear">
+            <cg-icon name="x" size="xs"></cg-icon>
+          </button>
+        ` : d}
+        <span class="chevron ${this._open ? "open" : ""}">
+          <cg-icon name="chevron-down" size="sm"></cg-icon>
+        </span>
+      </div>
+      ${this._open ? s`
+        <div class="dropdown" role="listbox">
+          ${e.length === 0 ? s`<div class="empty">No results found</div>` : e.map((r, a) => s`
+              <div class="option ${a === this._activeIndex ? "active" : ""}"
+                role="option"
+                aria-selected=${a === this._activeIndex}
+                @mousedown=${(n) => n.preventDefault()}
+                @click=${() => this._select(r)}>
+                ${r.icon ? s`<cg-icon name="${r.icon}" size="sm"></cg-icon>` : d}
+                <span>${this._highlightMatch(r.label)}</span>
+              </div>
+            `)}
+        </div>
+      ` : d}
+    `;
+  }
+};
+t.styles = [b, m, g`
+    :host {
+      position: relative;
+    }
+
+    .label {
+      display: block;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-text);
+      margin-bottom: var(--cg-spacing-6);
+    }
+
+    .input-wrap {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: 0 var(--cg-spacing-12);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      background: var(--cg-color-input-background-default);
+      min-height: var(--cg-component-input-height-md);
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .input-wrap:hover:not(.disabled) {
+      border-color: var(--cg-color-input-border-hover);
+    }
+    .input-wrap.focused {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .input-wrap.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background: var(--cg-color-input-background-disabled);
+      border-color: var(--cg-color-input-border-disabled);
+    }
+
+    /* ── Error state ── */
+    :host([error]) .input-wrap {
+      border-color: var(--cg-color-input-border-error);
+    }
+    :host([error]) .input-wrap.focused {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+
+    input {
+      flex: 1;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-default);
+      min-width: 0;
+      padding: var(--cg-spacing-8) 0;
+    }
+    input::placeholder { color: var(--cg-color-input-text-placeholder); }
+    input:disabled { cursor: not-allowed; }
+
+    .clear {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      border: none;
+      padding: 0;
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-container-outlined);
+      border-radius: var(--cg-border-radius-full);
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .clear:hover {
+      background: var(--cg-color-action-secondary-background-hover);
+      color: var(--cg-color-surface-container-text);
+    }
+
+    .chevron {
+      flex-shrink: 0;
+      color: var(--cg-color-input-icon-default);
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .chevron.open { transform: rotate(180deg); }
+
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      margin-top: var(--cg-spacing-4);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border-radius: var(--cg-border-radius-100);
+      box-shadow: var(--cg-elevation-3);
+      max-height: 280px;
+      overflow-y: auto;
+      z-index: var(--cg-z-index-400);
+      padding: var(--cg-spacing-6);
+      animation: dropIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    @keyframes dropIn {
+      from { opacity: 0; transform: scale(0.96) translateY(calc(var(--cg-spacing-4) * -1)); }
+      to { opacity: 1; transform: scale(1) translateY(0); }
+    }
+
+    .option {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-50);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-text);
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .option:hover, .option.active {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .option .match {
+      color: var(--cg-color-action-primary-background-default);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    .empty {
+      padding: var(--cg-spacing-16);
+      text-align: center;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) .input-wrap { border-radius: 0; }
+    :host([rounded="sm"]) .input-wrap { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .input-wrap { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .input-wrap { border-radius: var(--cg-component-input-radius); }
+    :host([rounded="full"]) .input-wrap { border-radius: var(--cg-border-radius-full); }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .dropdown { animation: none; }
+    }
+  `];
+o([
+  c({ type: Array })
+], t.prototype, "options", 2);
+o([
+  c({ reflect: !0 })
+], t.prototype, "rounded", 2);
+o([
+  c()
+], t.prototype, "value", 2);
+o([
+  c()
+], t.prototype, "placeholder", 2);
+o([
+  c()
+], t.prototype, "label", 2);
+o([
+  c({ type: Boolean })
+], t.prototype, "disabled", 2);
+o([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "error", 2);
+o([
+  c({ type: Boolean })
+], t.prototype, "clearable", 2);
+o([
+  u()
+], t.prototype, "_query", 2);
+o([
+  u()
+], t.prototype, "_open", 2);
+o([
+  u()
+], t.prototype, "_focused", 2);
+o([
+  u()
+], t.prototype, "_activeIndex", 2);
+o([
+  v("input")
+], t.prototype, "_input", 2);
+t = o([
+  f("cg-autocomplete")
+], t);
+export {
+  t as CgAutocomplete
+};
+//# sourceMappingURL=cg-autocomplete.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-autocomplete.js","sources":["../../../src/components/cg-autocomplete/cg-autocomplete.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface AutocompleteOption {\n  value: string;\n  label: string;\n  icon?: string;\n}\n\n/**\n * <cg-autocomplete> — Combobox input with filtered dropdown suggestions.\n *\n * @example\n * ```html\n * <cg-autocomplete label=\"Country\" placeholder=\"Search...\" .options=${countries}></cg-autocomplete>\n * ```\n *\n * @fires {CustomEvent<{query: string}>} cg-autocomplete-input - On input change\n * @fires {CustomEvent<{value: string, label: string}>} cg-autocomplete-select - On option select\n *\n * @cssprop --cg-component-input-radius - Input border radius\n * @cssprop --cg-component-input-height-md - Input height\n * @cssprop --cg-color-input-border-default - Default border color\n */\n@customElement('cg-autocomplete')\nexport class CgAutocomplete extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      position: relative;\n    }\n\n    .label {\n      display: block;\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      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .input-wrap {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: 0 var(--cg-spacing-12);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      min-height: var(--cg-component-input-height-md);\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .input-wrap:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .input-wrap.focused {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .input-wrap.disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      background: var(--cg-color-input-background-disabled);\n      border-color: var(--cg-color-input-border-disabled);\n    }\n\n    /* ── Error state ── */\n    :host([error]) .input-wrap {\n      border-color: var(--cg-color-input-border-error);\n    }\n    :host([error]) .input-wrap.focused {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    input {\n      flex: 1;\n      border: none;\n      outline: none;\n      background: transparent;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-default);\n      min-width: 0;\n      padding: var(--cg-spacing-8) 0;\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n    input:disabled { cursor: not-allowed; }\n\n    .clear {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border: none;\n      padding: 0;\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-container-outlined);\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      flex-shrink: 0;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .clear:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n      color: var(--cg-color-surface-container-text);\n    }\n\n    .chevron {\n      flex-shrink: 0;\n      color: var(--cg-color-input-icon-default);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .chevron.open { transform: rotate(180deg); }\n\n    .dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      margin-top: var(--cg-spacing-4);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-border-radius-100);\n      box-shadow: var(--cg-elevation-3);\n      max-height: 280px;\n      overflow-y: auto;\n      z-index: var(--cg-z-index-400);\n      padding: var(--cg-spacing-6);\n      animation: dropIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    @keyframes dropIn {\n      from { opacity: 0; transform: scale(0.96) translateY(calc(var(--cg-spacing-4) * -1)); }\n      to { opacity: 1; transform: scale(1) translateY(0); }\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-text);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .option:hover, .option.active {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .option .match {\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-16);\n      text-align: center;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .input-wrap { border-radius: 0; }\n    :host([rounded=\"sm\"]) .input-wrap { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .input-wrap { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .input-wrap { border-radius: var(--cg-component-input-radius); }\n    :host([rounded=\"full\"]) .input-wrap { border-radius: var(--cg-border-radius-full); }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .dropdown { animation: none; }\n    }\n  `];\n\n  @property({ type: Array }) options: AutocompleteOption[] = [];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property() value = '';\n  @property() placeholder = '';\n  @property() label = '';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean }) clearable = false;\n\n  @state() private _query = '';\n  @state() private _open = false;\n  @state() private _focused = false;\n  @state() private _activeIndex = -1;\n\n  @query('input') private _input!: HTMLInputElement;\n\n  private get _filtered(): AutocompleteOption[] {\n    const q = this._query.toLowerCase();\n    if (!q) return this.options;\n    return this.options.filter(o => o.label.toLowerCase().includes(q));\n  }\n\n  private _onInput(e: Event) {\n    this._query = (e.target as HTMLInputElement).value;\n    this._open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-autocomplete-input', { detail: { query: this._query }, bubbles: true, composed: true }));\n  }\n\n  private _select(opt: AutocompleteOption) {\n    this.value = opt.value;\n    this._query = opt.label;\n    this._open = false;\n    this.dispatchEvent(new CustomEvent('cg-autocomplete-select', { detail: { value: opt.value, label: opt.label }, bubbles: true, composed: true }));\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    const list = this._filtered;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this._open = true;\n      this._activeIndex = Math.min(this._activeIndex + 1, list.length - 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._activeIndex = Math.max(this._activeIndex - 1, 0);\n    } else if (e.key === 'Enter' && this._activeIndex >= 0 && list[this._activeIndex]) {\n      e.preventDefault();\n      this._select(list[this._activeIndex]!);\n    } else if (e.key === 'Escape') {\n      this._open = false;\n    }\n  }\n\n  private _clear() {\n    this.value = '';\n    this._query = '';\n    this._input.focus();\n    this.dispatchEvent(new CustomEvent('cg-autocomplete-select', { detail: { value: '', label: '' }, bubbles: true, composed: true }));\n  }\n\n  private _highlightMatch(label: string): unknown {\n    const q = this._query.toLowerCase();\n    const idx = label.toLowerCase().indexOf(q);\n    if (idx < 0 || !q) return label;\n    const before = label.slice(0, idx);\n    const match = label.slice(idx, idx + q.length);\n    const after = label.slice(idx + q.length);\n    return html`${before}<span class=\"match\">${match}</span>${after}`;\n  }\n\n  override render() {\n    const filtered = this._filtered;\n    return html`\n      ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n      <div class=\"input-wrap ${this._focused ? 'focused' : ''} ${this.disabled ? 'disabled' : ''}\">\n        <input\n          .value=${this._query}\n          placeholder=${this.placeholder || nothing}\n          ?disabled=${this.disabled}\n          role=\"combobox\"\n          aria-expanded=${this._open}\n          aria-autocomplete=\"list\"\n          aria-label=${this.label || 'Autocomplete'}\n          @input=${this._onInput}\n          @keydown=${this._onKeyDown}\n          @focus=${() => { this._focused = true; this._open = true; }}\n          @blur=${() => { this._focused = false; this._open = false; }}\n        />\n        ${this.clearable && this._query ? html`\n          <button class=\"clear\" @mousedown=${(e: Event) => e.preventDefault()} @click=${this._clear} aria-label=\"Clear\">\n            <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n          </button>\n        ` : nothing}\n        <span class=\"chevron ${this._open ? 'open' : ''}\">\n          <cg-icon name=\"chevron-down\" size=\"sm\"></cg-icon>\n        </span>\n      </div>\n      ${this._open ? html`\n        <div class=\"dropdown\" role=\"listbox\">\n          ${filtered.length === 0 ? html`<div class=\"empty\">No results found</div>` :\n            filtered.map((opt, i) => html`\n              <div class=\"option ${i === this._activeIndex ? 'active' : ''}\"\n                role=\"option\"\n                aria-selected=${i === this._activeIndex}\n                @mousedown=${(e: Event) => e.preventDefault()}\n                @click=${() => this._select(opt)}>\n                ${opt.icon ? html`<cg-icon name=\"${opt.icon}\" size=\"sm\"></cg-icon>` : nothing}\n                <span>${this._highlightMatch(opt.label)}</span>\n              </div>\n            `)}\n        </div>\n      ` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-autocomplete': CgAutocomplete;\n  }\n}\n"],"names":["CgAutocomplete","LitElement","q","o","opt","list","label","idx","before","match","after","html","filtered","nothing","e","i","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-avatar
+ * Image with initials fallback and optional status indicator.
+ *
+ * @example
+ * ```html
+ * <cg-avatar src="/u.jpg" name="Ada Lovelace" size="md" status="online"></cg-avatar>
+ * <cg-avatar name="Grace Hopper" size="lg" shape="square"></cg-avatar>
+ * ```
+ *
+ * @slot fallback - Override fallback content
+ */
+export declare class CgAvatar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    src: string;
+    alt: string;
+    name: string;
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape: 'circle' | 'square';
+    status: 'online' | 'offline' | 'away' | 'busy' | null;
+    type: 'user' | 'agent' | 'system' | null;
+    fallbackIcon: string;
+    private _imgFailed;
+    private _getInitials;
+    private _onError;
+    private _onLoad;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-avatar': CgAvatar;
+    }
+}
+//# sourceMappingURL=cg-avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-avatar/cg-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA6FnB;IAES,GAAG,SAAM;IACT,GAAG,SAAM;IACT,IAAI,SAAM;IACO,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,QAAQ,GAAG,QAAQ,CAAY;IACtC,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IAC7D,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAQ;IACnC,YAAY,SAAM;IAEnD,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,OAAO;IAIN,MAAM;CA2BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,171 @@
+import { css as g, LitElement as d, svg as v, nothing as u, html as n } from "lit";
+import { property as r, state as p, customElement as f } from "lit/decorators.js";
+import { a as m, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var z = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (s, e, c, i) => {
+  for (var o = i > 1 ? void 0 : i ? x(e, c) : e, l = s.length - 1, h; l >= 0; l--)
+    (h = s[l]) && (o = (i ? h(e, c, o) : h(o)) || o);
+  return i && o && z(e, c, o), o;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.src = "", this.alt = "", this.name = "", this.size = "md", this.shape = "circle", this.status = null, this.type = null, this.fallbackIcon = "", this._imgFailed = !1;
+  }
+  _getInitials(s) {
+    return s ? s.trim().split(/\s+/).slice(0, 2).map((e) => e[0] || "").join("").toUpperCase() : "";
+  }
+  _onError() {
+    this._imgFailed = !0;
+  }
+  _onLoad() {
+    this._imgFailed = !1;
+  }
+  render() {
+    const s = this._getInitials(this.name), e = this.src && !this._imgFailed, c = this.alt || this.name || "Avatar", i = v`
+      <svg class="fallback-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+        <circle cx="12" cy="7" r="4"></circle>
+      </svg>
+    `;
+    return n`
+      <div class="avatar" role="img" aria-label=${c}>
+        ${e ? n`
+          <img
+            src=${this.src}
+            alt=${this.alt || this.name || ""}
+            @error=${this._onError}
+            @load=${this._onLoad}
+          />
+        ` : s ? n`<span class="initials">${s}</span>` : n`<slot name="fallback">${i}</slot>`}
+      </div>
+      ${this.status ? n`<span class="status ${this.status}" aria-hidden="true"></span>` : u}
+    `;
+  }
+};
+t.styles = [m, b, g`
+    :host {
+      display: inline-block;
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    .avatar {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      aspect-ratio: 1 / 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--cg-color-action-secondary-background-default);
+      color: var(--cg-color-surface-container-text);
+      overflow: hidden;
+      border-radius: var(--cg-border-radius-full);
+      font-weight: var(--cg-font-weight-semibold);
+      text-transform: uppercase;
+      line-height: 1;
+      user-select: none;
+    }
+
+    :host([shape="square"]) .avatar {
+      border-radius: var(--cg-border-radius-150);
+    }
+
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .fallback-icon {
+      width: 60%;
+      height: 60%;
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    /* ── Sizes ── */
+    :host([size="xs"]) { width: var(--cg-component-avatar-size-xs); height: var(--cg-component-avatar-size-xs); }
+    :host([size="xs"]) .avatar { font-size: var(--cg-font-size-xs); }
+
+    :host([size="sm"]) { width: var(--cg-component-avatar-size-sm); height: var(--cg-component-avatar-size-sm); }
+    :host([size="sm"]) .avatar { font-size: var(--cg-font-size-xs); }
+
+    :host([size="md"]) { width: var(--cg-component-avatar-size-md); height: var(--cg-component-avatar-size-md); }
+    :host([size="md"]) .avatar { font-size: var(--cg-font-size-sm); }
+
+    :host([size="lg"]) { width: var(--cg-component-avatar-size-lg); height: var(--cg-component-avatar-size-lg); }
+    :host([size="lg"]) .avatar { font-size: var(--cg-font-size-base); }
+
+    :host([size="xl"]) { width: var(--cg-component-avatar-size-xl); height: var(--cg-component-avatar-size-xl); }
+    :host([size="xl"]) .avatar { font-size: var(--cg-font-size-lg); }
+
+    /* ── Status dot ── */
+    .status {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: var(--cg-component-avatar-status-dot-size);
+      height: var(--cg-component-avatar-status-dot-size);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);
+      box-sizing: border-box;
+    }
+    :host([size="xs"]) .status,
+    :host([size="sm"]) .status {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+    }
+
+    .status.online { background: var(--cg-color-status-success-text-default); }
+    .status.offline {
+      background: var(--cg-color-surface-base-background);
+      border-color: var(--cg-color-surface-container-outlined);
+    }
+    .status.away { background: var(--cg-color-status-warning-text-default); }
+    .status.busy { background: var(--cg-color-status-error-text-default); }
+
+    /* ── Type ring (AI-app variant) ── */
+    :host([type="agent"]) .avatar {
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-accent-text);
+    }
+    :host([type="user"]) .avatar {
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-status-info-text-default);
+    }
+    :host([type="system"]) .avatar {
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-surface-container-outlined);
+    }
+  `];
+a([
+  r()
+], t.prototype, "src", 2);
+a([
+  r()
+], t.prototype, "alt", 2);
+a([
+  r()
+], t.prototype, "name", 2);
+a([
+  r({ reflect: !0 })
+], t.prototype, "size", 2);
+a([
+  r({ reflect: !0 })
+], t.prototype, "shape", 2);
+a([
+  r({ reflect: !0 })
+], t.prototype, "status", 2);
+a([
+  r({ reflect: !0 })
+], t.prototype, "type", 2);
+a([
+  r({ attribute: "fallback-icon" })
+], t.prototype, "fallbackIcon", 2);
+a([
+  p()
+], t.prototype, "_imgFailed", 2);
+t = a([
+  f("cg-avatar")
+], t);
+export {
+  t as CgAvatar
+};
+//# sourceMappingURL=cg-avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-avatar.js","sources":["../../../src/components/cg-avatar/cg-avatar.ts"],"sourcesContent":["import { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-avatar\n * Image with initials fallback and optional status indicator.\n *\n * @example\n * ```html\n * <cg-avatar src=\"/u.jpg\" name=\"Ada Lovelace\" size=\"md\" status=\"online\"></cg-avatar>\n * <cg-avatar name=\"Grace Hopper\" size=\"lg\" shape=\"square\"></cg-avatar>\n * ```\n *\n * @slot fallback - Override fallback content\n */\n@customElement('cg-avatar')\nexport class CgAvatar extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-block;\n      position: relative;\n      flex-shrink: 0;\n    }\n\n    .avatar {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      aspect-ratio: 1 / 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--cg-color-action-secondary-background-default);\n      color: var(--cg-color-surface-container-text);\n      overflow: hidden;\n      border-radius: var(--cg-border-radius-full);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      line-height: 1;\n      user-select: none;\n    }\n\n    :host([shape=\"square\"]) .avatar {\n      border-radius: var(--cg-border-radius-150);\n    }\n\n    .avatar img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    .fallback-icon {\n      width: 60%;\n      height: 60%;\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"xs\"]) { width: var(--cg-component-avatar-size-xs); height: var(--cg-component-avatar-size-xs); }\n    :host([size=\"xs\"]) .avatar { font-size: var(--cg-font-size-xs); }\n\n    :host([size=\"sm\"]) { width: var(--cg-component-avatar-size-sm); height: var(--cg-component-avatar-size-sm); }\n    :host([size=\"sm\"]) .avatar { font-size: var(--cg-font-size-xs); }\n\n    :host([size=\"md\"]) { width: var(--cg-component-avatar-size-md); height: var(--cg-component-avatar-size-md); }\n    :host([size=\"md\"]) .avatar { font-size: var(--cg-font-size-sm); }\n\n    :host([size=\"lg\"]) { width: var(--cg-component-avatar-size-lg); height: var(--cg-component-avatar-size-lg); }\n    :host([size=\"lg\"]) .avatar { font-size: var(--cg-font-size-base); }\n\n    :host([size=\"xl\"]) { width: var(--cg-component-avatar-size-xl); height: var(--cg-component-avatar-size-xl); }\n    :host([size=\"xl\"]) .avatar { font-size: var(--cg-font-size-lg); }\n\n    /* ── Status dot ── */\n    .status {\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      width: var(--cg-component-avatar-status-dot-size);\n      height: var(--cg-component-avatar-status-dot-size);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n      box-sizing: border-box;\n    }\n    :host([size=\"xs\"]) .status,\n    :host([size=\"sm\"]) .status {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n    }\n\n    .status.online { background: var(--cg-color-status-success-text-default); }\n    .status.offline {\n      background: var(--cg-color-surface-base-background);\n      border-color: var(--cg-color-surface-container-outlined);\n    }\n    .status.away { background: var(--cg-color-status-warning-text-default); }\n    .status.busy { background: var(--cg-color-status-error-text-default); }\n\n    /* ── Type ring (AI-app variant) ── */\n    :host([type=\"agent\"]) .avatar {\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-accent-text);\n    }\n    :host([type=\"user\"]) .avatar {\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-status-info-text-default);\n    }\n    :host([type=\"system\"]) .avatar {\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-surface-container-outlined);\n    }\n  `];\n\n  @property() src = '';\n  @property() alt = '';\n  @property() name = '';\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n  @property({ reflect: true }) shape: 'circle' | 'square' = 'circle';\n  @property({ reflect: true }) status: 'online' | 'offline' | 'away' | 'busy' | null = null;\n  @property({ reflect: true }) type: 'user' | 'agent' | 'system' | null = null;\n  @property({ attribute: 'fallback-icon' }) fallbackIcon = '';\n\n  @state() private _imgFailed = false;\n\n  private _getInitials(name: string): string {\n    if (!name) return '';\n    return name\n      .trim()\n      .split(/\\s+/)\n      .slice(0, 2)\n      .map(p => p[0] || '')\n      .join('')\n      .toUpperCase();\n  }\n\n  private _onError() {\n    this._imgFailed = true;\n  }\n\n  private _onLoad() {\n    this._imgFailed = false;\n  }\n\n  override render() {\n    const initials = this._getInitials(this.name);\n    const hasImage = this.src && !this._imgFailed;\n    const label = this.alt || this.name || 'Avatar';\n\n    const userIcon = svg`\n      <svg class=\"fallback-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path>\n        <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n      </svg>\n    `;\n\n    return html`\n      <div class=\"avatar\" role=\"img\" aria-label=${label}>\n        ${hasImage ? html`\n          <img\n            src=${this.src}\n            alt=${this.alt || this.name || ''}\n            @error=${this._onError}\n            @load=${this._onLoad}\n          />\n        ` : initials ? html`<span class=\"initials\">${initials}</span>`\n          : html`<slot name=\"fallback\">${userIcon}</slot>`}\n      </div>\n      ${this.status ? html`<span class=\"status ${this.status}\" aria-hidden=\"true\"></span>` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-avatar': CgAvatar;\n  }\n}\n"],"names":["CgAvatar","LitElement","name","p","initials","hasImage","label","userIcon","svg","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+export interface AvatarItem {
+    src?: string;
+    name: string;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+}
+/**
+ * <cg-avatar-group> — Overlapping avatar stack with overflow badge.
+ *
+ * Features:
+ * - Overlapping circles with negative margin
+ * - "+N more" overflow badge
+ * - Status dots (online/offline/busy/away)
+ * - Initials fallback, image error fallback
+ * - Hover to spread apart, size variants
+ * - Click events on overflow
+ */
+export declare class CgAvatarGroup extends LitElement {
+    static styles: import('lit').CSSResult[];
+    avatars: AvatarItem[];
+    maxVisible: number;
+    size: 'sm' | 'md' | 'lg';
+    expanded: boolean;
+    /** Tracks which avatar indices have failed images */
+    private _failedImages;
+    private _getInitials;
+    private _onImgError;
+    private _onGroupEnter;
+    private _onGroupLeave;
+    private _onAvatarClick;
+    private _onOverflowClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-avatar-group': CgAvatarGroup;
+    }
+}
+//# sourceMappingURL=cg-avatar-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-avatar-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-avatar-group/cg-avatar-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;CACjD;AAED;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA+HnB;IAEwB,OAAO,EAAE,UAAU,EAAE,CAAM;IAC1B,UAAU,SAAK;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjB,QAAQ,UAAS;IAE7D,qDAAqD;IAC5C,OAAO,CAAC,aAAa,CAAqB;IAEnD,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,aAAa;IAErB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAIf,MAAM;CAqChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}