@cognivo/components 0.8.0 → 0.8.2

package/dist/components/cg-follow-up/cg-follow-up.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-follow-up.js","sources":["../../../src/components/cg-follow-up/cg-follow-up.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\n/**\n * <cg-follow-up> — Suggestion chips for chat conversations.\n *\n * @fires {CustomEvent<{text: string}>} cg-follow-up-click - When a suggestion is clicked\n */\n\nexport interface FollowUpItem {\n  text: string;\n  icon?: string;\n}\n\n@customElement('cg-follow-up')\nexport class CgFollowUp extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    :host {\n      display: block;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .header-icon {\n      color: var(--cg-color-action-primary-background-default);\n    }\n    .label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-action-primary-background-default);\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n    }\n\n    .chips {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* ── Chip variant (default) ── */\n    button {\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      white-space: nowrap;\n      line-height: var(--cg-line-height-snug);\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      animation: fadeIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--item-index, 0) * 60ms);\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-6)); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    button:hover:not(:disabled) {\n      border-color: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    button:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n    button:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    button:disabled { opacity: 0.4; cursor: not-allowed; }\n\n    .icon {\n      color: var(--cg-color-surface-container-outlined);\n    }\n    button:hover:not(:disabled) .icon {\n      color: var(--cg-color-action-primary-background-default);\n    }\n\n    /* ── Card variant ── */\n    :host([variant=\"cards\"]) button {\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      flex-direction: column;\n      align-items: flex-start;\n      gap: var(--cg-spacing-4);\n      white-space: normal;\n      text-align: left;\n      min-width: 140px;\n    }\n    :host([variant=\"cards\"]) .icon {\n      color: var(--cg-color-action-primary-background-default);\n      opacity: 0.7;\n    }\n\n    /* ── Button variant ── */\n    :host([variant=\"buttons\"]) button {\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    /* ── Overflow \"+N more\" ── */\n    .more-badge {\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) dashed var(--cg-color-surface-container-border);\n      background: transparent;\n      color: var(--cg-color-surface-container-outlined);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .more-badge:hover {\n      border-color: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n    }\n\n    /* ── Loading shimmer ── */\n    .shimmer {\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      background: linear-gradient(\n        90deg,\n        var(--cg-color-surface-container-background) 25%,\n        var(--cg-color-surface-container-border) 50%,\n        var(--cg-color-surface-container-background) 75%\n      );\n      background-size: 200% 100%;\n      animation: shimmer 1.5s infinite;\n    }\n  `];\n\n  @property({ type: Array }) items: (string | FollowUpItem)[] = [];\n  @property() label = 'Suggested';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean }) loading = false;\n  @property({ type: Boolean }) hideLabel = false;\n  @property({ type: String, reflect: true }) variant: 'chips' | 'cards' | 'buttons' = 'chips';\n  @property({ type: Number }) maxVisible: number = 0;\n\n  @state() private _showAll = false;\n\n  private _getText(item: string | FollowUpItem): string {\n    return typeof item === 'string' ? item : item.text;\n  }\n\n  private _getIcon(item: string | FollowUpItem): string | undefined {\n    return typeof item === 'string' ? undefined : item.icon;\n  }\n\n  private _handleClick(item: string | FollowUpItem) {\n    if (this.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-follow-up-click', {\n      detail: { text: this._getText(item) },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleShowAll() {\n    this._showAll = true;\n  }\n\n  override render() {\n    const visibleItems = this.maxVisible > 0 && !this._showAll\n      ? this.items.slice(0, this.maxVisible)\n      : this.items;\n    const remaining = this.maxVisible > 0 && !this._showAll\n      ? this.items.length - this.maxVisible\n      : 0;\n\n    const shimmerWidths = [150, 190, 130, 170, 120];\n\n    return html`\n      ${!this.hideLabel ? html`\n        <div class=\"header\">\n          <cg-icon class=\"header-icon\" name=\"sparkle\" size=\"sm\"></cg-icon>\n          <span class=\"label\">${this.label}</span>\n        </div>\n      ` : nothing}\n\n      <div class=\"chips\" role=\"group\" aria-label=${this.label}>\n        ${this.loading\n          ? shimmerWidths.slice(0, this.maxVisible || 3).map(w => html`\n              <div class=\"shimmer\" style=\"width: ${w}px\"></div>\n            `)\n          : html`\n              ${visibleItems.map((item, i) => {\n                const text = this._getText(item);\n                const icon = this._getIcon(item);\n                return html`\n                  <button\n                    style=\"--item-index: ${i}\"\n                    ?disabled=${this.disabled}\n                    aria-label=\"Suggestion: ${text}\"\n                    @click=${() => this._handleClick(item)}\n                  >\n                    ${icon ? html`<cg-icon class=\"icon\" name=\"${icon}\" size=\"sm\" aria-hidden=\"true\"></cg-icon>` : nothing}\n                    ${text}\n                  </button>\n                `;\n              })}\n              ${remaining > 0 ? html`\n                <button class=\"more-badge\" @click=${this._handleShowAll} aria-label=\"Show ${remaining} more suggestions\">\n                  +${remaining} more\n                </button>\n              ` : nothing}\n            `\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-follow-up': CgFollowUp; }\n}\n"],"names":["CgFollowUp","LitElement","item","visibleItems","remaining","shimmerWidths","html","nothing","w","i","text","icon","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-follow-up.js","sources":["../../../src/components/cg-follow-up/cg-follow-up.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes, focusRingSingle } from '../../styles/index.js';\n\n/**\n * <cg-follow-up> — Suggestion chips for chat conversations.\n *\n * @fires {CustomEvent<{text: string}>} cg-follow-up-click - When a suggestion is clicked\n */\n\nexport interface FollowUpItem {\n  text: string;\n  icon?: string;\n}\n\n@customElement('cg-follow-up')\nexport class CgFollowUp extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    :host {\n      display: block;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .header-icon {\n      color: var(--cg-color-action-primary-background-default);\n    }\n    .label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-action-primary-background-default);\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n    }\n\n    .chips {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* ── Chip variant (default) ── */\n    button {\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      white-space: nowrap;\n      line-height: var(--cg-line-height-snug);\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      animation: fadeIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--item-index, 0) * 60ms);\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-6)); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    button:hover:not(:disabled) {\n      border-color: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    button:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n    button:focus-visible {\n      ${focusRingSingle}\n    }\n    button:disabled { opacity: 0.4; cursor: not-allowed; }\n\n    .icon {\n      color: var(--cg-color-surface-container-outlined);\n    }\n    button:hover:not(:disabled) .icon {\n      color: var(--cg-color-action-primary-background-default);\n    }\n\n    /* ── Card variant ── */\n    :host([variant=\"cards\"]) button {\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      flex-direction: column;\n      align-items: flex-start;\n      gap: var(--cg-spacing-4);\n      white-space: normal;\n      text-align: left;\n      min-width: 140px;\n    }\n    :host([variant=\"cards\"]) .icon {\n      color: var(--cg-color-action-primary-background-default);\n      opacity: 0.7;\n    }\n\n    /* ── Button variant ── */\n    :host([variant=\"buttons\"]) button {\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    /* ── Overflow \"+N more\" ── */\n    .more-badge {\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) dashed var(--cg-color-surface-container-border);\n      background: transparent;\n      color: var(--cg-color-surface-container-outlined);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .more-badge:hover {\n      border-color: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n    }\n\n    /* ── Loading shimmer ── */\n    .shimmer {\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      background: linear-gradient(\n        90deg,\n        var(--cg-color-surface-container-background) 25%,\n        var(--cg-color-surface-container-border) 50%,\n        var(--cg-color-surface-container-background) 75%\n      );\n      background-size: 200% 100%;\n      animation: shimmer 1.5s infinite;\n    }\n  `];\n\n  @property({ type: Array }) items: (string | FollowUpItem)[] = [];\n  @property() label = 'Suggested';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean }) loading = false;\n  @property({ type: Boolean }) hideLabel = false;\n  @property({ type: String, reflect: true }) variant: 'chips' | 'cards' | 'buttons' = 'chips';\n  @property({ type: Number }) maxVisible: number = 0;\n\n  @state() private _showAll = false;\n\n  private _getText(item: string | FollowUpItem): string {\n    return typeof item === 'string' ? item : item.text;\n  }\n\n  private _getIcon(item: string | FollowUpItem): string | undefined {\n    return typeof item === 'string' ? undefined : item.icon;\n  }\n\n  private _handleClick(item: string | FollowUpItem) {\n    if (this.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-follow-up-click', {\n      detail: { text: this._getText(item) },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleShowAll() {\n    this._showAll = true;\n  }\n\n  override render() {\n    const visibleItems = this.maxVisible > 0 && !this._showAll\n      ? this.items.slice(0, this.maxVisible)\n      : this.items;\n    const remaining = this.maxVisible > 0 && !this._showAll\n      ? this.items.length - this.maxVisible\n      : 0;\n\n    const shimmerWidths = [150, 190, 130, 170, 120];\n\n    return html`\n      ${!this.hideLabel ? html`\n        <div class=\"header\">\n          <cg-icon class=\"header-icon\" name=\"sparkle\" size=\"sm\"></cg-icon>\n          <span class=\"label\">${this.label}</span>\n        </div>\n      ` : nothing}\n\n      <div class=\"chips\" role=\"group\" aria-label=${this.label} aria-busy=${this.loading}>\n        ${this.loading\n          ? shimmerWidths.slice(0, this.maxVisible || 3).map(w => html`\n              <div class=\"shimmer\" style=\"width: ${w}px\"></div>\n            `)\n          : html`\n              ${visibleItems.map((item, i) => {\n                const text = this._getText(item);\n                const icon = this._getIcon(item);\n                return html`\n                  <button\n                    style=\"--item-index: ${i}\"\n                    ?disabled=${this.disabled}\n                    aria-label=\"Suggestion: ${text}\"\n                    @click=${() => this._handleClick(item)}\n                  >\n                    ${icon ? html`<cg-icon class=\"icon\" name=\"${icon}\" size=\"sm\" aria-hidden=\"true\"></cg-icon>` : nothing}\n                    ${text}\n                  </button>\n                `;\n              })}\n              ${remaining > 0 ? html`\n                <button class=\"more-badge\" @click=${this._handleShowAll} aria-label=\"Show ${remaining} more suggestions\">\n                  +${remaining} more\n                </button>\n              ` : nothing}\n            `\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-follow-up': CgFollowUp; }\n}\n"],"names":["CgFollowUp","LitElement","item","visibleItems","remaining","shimmerWidths","html","nothing","w","i","text","icon","hostBlock","reducedMotion","shimmerKeyframes","css","focusRingSingle","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,17 +1,17 @@
-import { css as g, LitElement as f, nothing as p, html as m } from "lit";
-import { property as i, customElement as u } from "lit/decorators.js";
-import { h as d, r as h } from "../../chunks/premium.css-9I4kHrsl.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (e, s, a, t) => {
-  for (var r = t > 1 ? void 0 : t ? b(s, a) : s, n = e.length - 1, c; n >= 0; n--)
-    (c = e[n]) && (r = (t ? c(s, a, r) : c(r)) || r);
-  return t && r && v(s, a, r), r;
+import { css as g, LitElement as f, nothing as d, html as m } from "lit";
+import { property as i, customElement as p } from "lit/decorators.js";
+import { h as u, r as h } from "../../chunks/premium.css-DHekUEUt.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (t, s, a, e) => {
+  for (var r = e > 1 ? void 0 : e ? b(s, a) : s, n = t.length - 1, c; n >= 0; n--)
+    (c = t[n]) && (r = (e ? c(s, a, r) : c(r)) || r);
+  return e && r && v(s, a, r), r;
 };
 let o = class extends f {
   constructor() {
     super(...arguments), this.name = "", this.gap = "md", this.loading = !1, this.errors = [];
   }
-  _handleSubmit(e) {
-    e.preventDefault(), !this.loading && this.dispatchEvent(new CustomEvent("cg-submit", {
+  _handleSubmit(t) {
+    t.preventDefault(), !this.loading && this.dispatchEvent(new CustomEvent("cg-submit", {
       detail: { name: this.name },
       bubbles: !0,
       composed: !0
@@ -21,8 +21,8 @@ let o = class extends f {
   reset() {
     this.shadowRoot?.querySelector("form")?.reset();
     const a = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? [];
-    for (const t of a)
-      typeof t.formResetCallback == "function" && t.formResetCallback(), t.querySelectorAll("*").forEach((r) => {
+    for (const e of a)
+      typeof e.formResetCallback == "function" && e.formResetCallback(), e.querySelectorAll("*").forEach((r) => {
         typeof r.formResetCallback == "function" && r.formResetCallback();
       });
     this.dispatchEvent(new CustomEvent("cg-reset", { bubbles: !0, composed: !0 }));
@@ -35,17 +35,17 @@ let o = class extends f {
         aria-busy=${this.loading ? "true" : "false"}
       >
         ${this.errors.length > 0 ? m`
-          <div class="error-summary" role="alert">
-            <strong>Please fix the following:</strong>
-            <ul>${this.errors.map((e) => m`<li>${e}</li>`)}</ul>
+          <div class="error-summary" role="alert" aria-labelledby="cg-form-error-heading">
+            <strong id="cg-form-error-heading" role="heading" aria-level="2">Please fix the following:</strong>
+            <ul>${this.errors.map((t) => m`<li>${t}</li>`)}</ul>
           </div>
-        ` : p}
+        ` : d}
         <slot></slot>
       </form>
     `;
   }
 };
-o.styles = [d, h, g`
+o.styles = [u, h, g`
     :host {
       display: block;
       font-family: var(--cg-font-family-primary);
@@ -101,7 +101,7 @@ l([
   i({ type: Array })
 ], o.prototype, "errors", 2);
 o = l([
-  u("cg-form")
+  p("cg-form")
 ], o);
 export {
   o as CgForm

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

@@ -1 +1 @@
-{"version":3,"file":"cg-form.js","sources":["../../../src/components/cg-form/cg-form.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-form> — Form container with submit handling, loading state, and field gap control.\n *\n * Features:\n * - Prevents default submit, emits cg-submit with form name\n * - Loading state disables submit\n * - Configurable gap between fields\n * - Reset method\n * - Keyboard submit on Enter\n */\n@customElement('cg-form')\nexport class CgForm 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    form {\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* All slotted children stretch to full width */\n    ::slotted(*) {\n      width: 100%;\n    }\n\n    :host([gap=\"sm\"]) form { gap: var(--cg-spacing-8); }\n    :host([gap=\"md\"]) form { gap: var(--cg-spacing-16); }\n    :host([gap=\"lg\"]) form { gap: var(--cg-spacing-24); }\n\n    :host([loading]) form {\n      opacity: 0.6;\n      pointer-events: none;\n    }\n\n    .error-summary {\n      padding: var(--cg-spacing-12);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-normal);\n    }\n\n    .error-summary ul {\n      margin: var(--cg-spacing-4) 0 0;\n      padding-left: var(--cg-spacing-16);\n    }\n    .error-summary li {\n      margin: var(--cg-spacing-2) 0;\n    }\n  `];\n\n  /** Form name identifier. */\n  @property() name = '';\n\n  /** Gap between form fields. */\n  @property({ reflect: true }) gap: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Loading state — disables interactions. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** List of error messages to show in summary. */\n  @property({ type: Array }) errors: string[] = [];\n\n  private _handleSubmit(e: Event) {\n    e.preventDefault();\n    if (this.loading) return;\n    this.dispatchEvent(new CustomEvent('cg-submit', {\n      detail: { name: this.name },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /** Programmatic reset — clears inputs via native form reset and slotted custom elements. */\n  reset() {\n    const form = this.shadowRoot?.querySelector('form');\n    form?.reset();\n\n    // Reset slotted form-associated custom elements via formResetCallback\n    const slot = this.shadowRoot?.querySelector('slot');\n    const slotted = slot?.assignedElements({ flatten: true }) ?? [];\n    for (const el of slotted) {\n      if (typeof (el as any).formResetCallback === 'function') {\n        (el as any).formResetCallback();\n      }\n      // Also check nested children (e.g., wrapper divs containing custom elements)\n      el.querySelectorAll('*').forEach((child: Element) => {\n        if (typeof (child as any).formResetCallback === 'function') {\n          (child as any).formResetCallback();\n        }\n      });\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-reset', { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <form\n        @submit=${this._handleSubmit}\n        novalidate\n        aria-busy=${this.loading ? 'true' : 'false'}\n      >\n        ${this.errors.length > 0 ? html`\n          <div class=\"error-summary\" role=\"alert\">\n            <strong>Please fix the following:</strong>\n            <ul>${this.errors.map(e => html`<li>${e}</li>`)}</ul>\n          </div>\n        ` : nothing}\n        <slot></slot>\n      </form>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-form': CgForm; }\n}\n"],"names":["CgForm","LitElement","slotted","el","child","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAeO,IAAMA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8CO,KAAA,OAAO,IAGU,KAAA,MAA0B,MAGX,KAAA,UAAU,IAG3B,KAAA,SAAmB,CAAA;AAAA,EAAC;AAAA,EAEvC,cAAc,GAAU;AAE9B,IADA,EAAE,eAAA,GACE,MAAK,WACT,KAAK,cAAc,IAAI,YAAY,aAAa;AAAA,MAC9C,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MACrB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA;AAAA,EAGA,QAAQ;AAEN,IADa,KAAK,YAAY,cAAc,MAAM,GAC5C,MAAA;AAIN,UAAMC,IADO,KAAK,YAAY,cAAc,MAAM,GAC5B,iBAAiB,EAAE,SAAS,GAAA,CAAM,KAAK,CAAA;AAC7D,eAAWC,KAAMD;AACf,MAAI,OAAQC,EAAW,qBAAsB,cAC1CA,EAAW,kBAAA,GAGdA,EAAG,iBAAiB,GAAG,EAAE,QAAQ,CAACC,MAAmB;AACnD,QAAI,OAAQA,EAAc,qBAAsB,cAC7CA,EAAc,kBAAA;AAAA,MAEnB,CAAC;AAGH,SAAK,cAAc,IAAI,YAAY,YAAY,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACnF;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA,kBAEO,KAAK,aAAa;AAAA;AAAA,oBAEhB,KAAK,UAAU,SAAS,OAAO;AAAA;AAAA,UAEzC,KAAK,OAAO,SAAS,IAAIA;AAAA;AAAA;AAAA,kBAGjB,KAAK,OAAO,IAAI,OAAKA,QAAW,CAAC,OAAO,CAAC;AAAA;AAAA,YAE/CC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AA3GaN,EACK,SAAS,CAACO,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0CnD;AAGWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9CCX,EA8CC,WAAA,QAAA,CAAA;AAGiBU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjDhBX,EAiDkB,WAAA,OAAA,CAAA;AAGeU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApD/BX,EAoDiC,WAAA,WAAA,CAAA;AAGjBU,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAvDdX,EAuDgB,WAAA,UAAA,CAAA;AAvDhBA,IAANU,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXZ,CAAA;"}
+{"version":3,"file":"cg-form.js","sources":["../../../src/components/cg-form/cg-form.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-form> — Form container with submit handling, loading state, and field gap control.\n *\n * Features:\n * - Prevents default submit, emits cg-submit with form name\n * - Loading state disables submit\n * - Configurable gap between fields\n * - Reset method\n * - Keyboard submit on Enter\n */\n@customElement('cg-form')\nexport class CgForm 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    form {\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* All slotted children stretch to full width */\n    ::slotted(*) {\n      width: 100%;\n    }\n\n    :host([gap=\"sm\"]) form { gap: var(--cg-spacing-8); }\n    :host([gap=\"md\"]) form { gap: var(--cg-spacing-16); }\n    :host([gap=\"lg\"]) form { gap: var(--cg-spacing-24); }\n\n    :host([loading]) form {\n      opacity: 0.6;\n      pointer-events: none;\n    }\n\n    .error-summary {\n      padding: var(--cg-spacing-12);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-normal);\n    }\n\n    .error-summary ul {\n      margin: var(--cg-spacing-4) 0 0;\n      padding-left: var(--cg-spacing-16);\n    }\n    .error-summary li {\n      margin: var(--cg-spacing-2) 0;\n    }\n  `];\n\n  /** Form name identifier. */\n  @property() name = '';\n\n  /** Gap between form fields. */\n  @property({ reflect: true }) gap: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Loading state — disables interactions. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** List of error messages to show in summary. */\n  @property({ type: Array }) errors: string[] = [];\n\n  private _handleSubmit(e: Event) {\n    e.preventDefault();\n    if (this.loading) return;\n    this.dispatchEvent(new CustomEvent('cg-submit', {\n      detail: { name: this.name },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /** Programmatic reset — clears inputs via native form reset and slotted custom elements. */\n  reset() {\n    const form = this.shadowRoot?.querySelector('form');\n    form?.reset();\n\n    // Reset slotted form-associated custom elements via formResetCallback\n    const slot = this.shadowRoot?.querySelector('slot');\n    const slotted = slot?.assignedElements({ flatten: true }) ?? [];\n    for (const el of slotted) {\n      if (typeof (el as any).formResetCallback === 'function') {\n        (el as any).formResetCallback();\n      }\n      // Also check nested children (e.g., wrapper divs containing custom elements)\n      el.querySelectorAll('*').forEach((child: Element) => {\n        if (typeof (child as any).formResetCallback === 'function') {\n          (child as any).formResetCallback();\n        }\n      });\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-reset', { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <form\n        @submit=${this._handleSubmit}\n        novalidate\n        aria-busy=${this.loading ? 'true' : 'false'}\n      >\n        ${this.errors.length > 0 ? html`\n          <div class=\"error-summary\" role=\"alert\" aria-labelledby=\"cg-form-error-heading\">\n            <strong id=\"cg-form-error-heading\" role=\"heading\" aria-level=\"2\">Please fix the following:</strong>\n            <ul>${this.errors.map(e => html`<li>${e}</li>`)}</ul>\n          </div>\n        ` : nothing}\n        <slot></slot>\n      </form>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-form': CgForm; }\n}\n"],"names":["CgForm","LitElement","e","slotted","el","child","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAeO,IAAMA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8CO,KAAA,OAAO,IAGU,KAAA,MAA0B,MAGX,KAAA,UAAU,IAG3B,KAAA,SAAmB,CAAA;AAAA,EAAC;AAAA,EAEvC,cAAcC,GAAU;AAE9B,IADAA,EAAE,eAAA,GACE,MAAK,WACT,KAAK,cAAc,IAAI,YAAY,aAAa;AAAA,MAC9C,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MACrB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA;AAAA,EAGA,QAAQ;AAEN,IADa,KAAK,YAAY,cAAc,MAAM,GAC5C,MAAA;AAIN,UAAMC,IADO,KAAK,YAAY,cAAc,MAAM,GAC5B,iBAAiB,EAAE,SAAS,GAAA,CAAM,KAAK,CAAA;AAC7D,eAAWC,KAAMD;AACf,MAAI,OAAQC,EAAW,qBAAsB,cAC1CA,EAAW,kBAAA,GAGdA,EAAG,iBAAiB,GAAG,EAAE,QAAQ,CAACC,MAAmB;AACnD,QAAI,OAAQA,EAAc,qBAAsB,cAC7CA,EAAc,kBAAA;AAAA,MAEnB,CAAC;AAGH,SAAK,cAAc,IAAI,YAAY,YAAY,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACnF;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA,kBAEO,KAAK,aAAa;AAAA;AAAA,oBAEhB,KAAK,UAAU,SAAS,OAAO;AAAA;AAAA,UAEzC,KAAK,OAAO,SAAS,IAAIA;AAAA;AAAA;AAAA,kBAGjB,KAAK,OAAO,IAAI,OAAKA,QAAWJ,CAAC,OAAO,CAAC;AAAA;AAAA,YAE/CK,CAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AA3GaP,EACK,SAAS,CAACQ,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0CnD;AAGWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9CCZ,EA8CC,WAAA,QAAA,CAAA;AAGiBW,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjDhBZ,EAiDkB,WAAA,OAAA,CAAA;AAGeW,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApD/BZ,EAoDiC,WAAA,WAAA,CAAA;AAGjBW,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAvDdZ,EAuDgB,WAAA,UAAA,CAAA;AAvDhBA,IAANW,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXb,CAAA;"}

package/dist/components/cg-hover-card/cg-hover-card.d.ts

@@ -39,6 +39,7 @@ export declare class CgHoverCard extends LitElement {
     private _updatePosition;
     private _scheduleOpen;
     private _scheduleClose;
+    private _onKeydown;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/dist/components/cg-hover-card/cg-hover-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/cg-hover-card/cg-hover-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEtF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAyDnB;IAEyC,IAAI,UAAS;IAC7C,SAAS,EAAE,SAAS,CAAS;IACb,MAAM,SAAM;IACa,SAAS,SAAO;IACf,UAAU,SAAO;IAEvD,OAAO,CAAC,OAAO,CAAe;IAC3B,OAAO,CAAC,UAAU,CAAe;IAEpD,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,kBAAkB,CAA6B;IAE9C,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiBrD,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;IAMb,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
+{"version":3,"file":"cg-hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/cg-hover-card/cg-hover-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEtF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAyDnB;IAEyC,IAAI,UAAS;IAC7C,SAAS,EAAE,SAAS,CAAS;IACb,MAAM,SAAM;IACa,SAAS,SAAO;IACf,UAAU,SAAO;IAEvD,OAAO,CAAC,OAAO,CAAe;IAC3B,OAAO,CAAC,UAAU,CAAe;IAEpD,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,kBAAkB,CAA6B;IAE9C,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiBrD,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,UAAU,CAIhB;IAEO,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/cg-hover-card/cg-hover-card.js

@@ -1,29 +1,31 @@
-import { css as p, LitElement as d, html as u } from "lit";
+import { css as d, LitElement as p, html as u } from "lit";
 import { property as n, query as h, customElement as g } from "lit/decorators.js";
-import { h as m, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as m, r as f } from "../../chunks/premium.css-DHekUEUt.js";
 import { b as v, c as _ } from "../../chunks/floating-DfsaYJnh.js";
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (t, o, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? b(o, s) : o, l = t.length - 1, c; l >= 0; l--)
-    (c = t[l]) && (i = (a ? c(o, s, i) : c(i)) || i);
-  return a && i && y(o, s, i), i;
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, r, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? b(r, s) : r, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (i = (a ? c(r, s, i) : c(i)) || i);
+  return a && i && y(r, s, i), i;
 };
-let e = class extends d {
+let t = class extends p {
   constructor() {
-    super(...arguments), this.open = !1, this.placement = "top", this.offset = 12, this.openDelay = 700, this.closeDelay = 300, this._openTimer = null, this._closeTimer = null, this._cleanupAutoUpdate = null;
+    super(...arguments), this.open = !1, this.placement = "top", this.offset = 12, this.openDelay = 700, this.closeDelay = 300, this._openTimer = null, this._closeTimer = null, this._cleanupAutoUpdate = null, this._onKeydown = (e) => {
+      e.key === "Escape" && this.open && (this.open = !1);
+    };
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._openTimer && clearTimeout(this._openTimer), this._closeTimer && clearTimeout(this._closeTimer), this._cleanupAutoUpdate?.();
   }
-  updated(t) {
-    t.has("open") && (this.open ? (this.dispatchEvent(new CustomEvent("cg-hover-card-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
+  updated(e) {
+    e.has("open") && (this.open ? (this.dispatchEvent(new CustomEvent("cg-hover-card-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
       this._triggerEl && this._cardEl && (this._cleanupAutoUpdate = v(this._triggerEl, this._cardEl, () => this._updatePosition()));
     })) : (this.dispatchEvent(new CustomEvent("cg-hover-card-close", { bubbles: !0, composed: !0 })), this._cleanupAutoUpdate?.(), this._cleanupAutoUpdate = null));
   }
   _updatePosition() {
     if (!this._triggerEl || !this._cardEl) return;
-    const t = this._triggerEl.getBoundingClientRect(), o = this._cardEl.getBoundingClientRect(), s = _(
-      { top: t.top, left: t.left, width: t.width, height: t.height },
-      { width: o.width, height: o.height },
+    const e = this._triggerEl.getBoundingClientRect(), r = this._cardEl.getBoundingClientRect(), s = _(
+      { top: e.top, left: e.left, width: e.width, height: e.height },
+      { width: r.width, height: r.height },
       { placement: this.placement, offset: this.offset, flip: !0, shift: !0 }
     );
     this._cardEl.style.top = `${s.y}px`, this._cardEl.style.left = `${s.x}px`;
@@ -46,22 +48,25 @@ let e = class extends d {
         @mouseleave=${this._scheduleClose}
         @focusin=${this._scheduleOpen}
         @focusout=${this._scheduleClose}
+        @keydown=${this._onKeydown}
       >
         <slot></slot>
       </div>
       <div
         class="card"
-        role="tooltip"
+        role="dialog"
+        aria-modal="false"
         ?inert=${!this.open}
         @mouseenter=${this._scheduleOpen}
         @mouseleave=${this._scheduleClose}
+        @keydown=${this._onKeydown}
       >
         <slot name="content"></slot>
       </div>
     `;
   }
 };
-e.styles = [m, f, p`
+t.styles = [m, f, d`
     :host {
       display: inline-block;
       position: relative;
@@ -119,31 +124,31 @@ e.styles = [m, f, p`
       filter: brightness(1.05);
     }
   `];
-r([
+o([
   n({ type: Boolean, reflect: !0 })
-], e.prototype, "open", 2);
-r([
+], t.prototype, "open", 2);
+o([
   n()
-], e.prototype, "placement", 2);
-r([
+], t.prototype, "placement", 2);
+o([
   n({ type: Number })
-], e.prototype, "offset", 2);
-r([
+], t.prototype, "offset", 2);
+o([
   n({ type: Number, attribute: "open-delay" })
-], e.prototype, "openDelay", 2);
-r([
+], t.prototype, "openDelay", 2);
+o([
   n({ type: Number, attribute: "close-delay" })
-], e.prototype, "closeDelay", 2);
-r([
+], t.prototype, "closeDelay", 2);
+o([
   h(".card")
-], e.prototype, "_cardEl", 2);
-r([
+], t.prototype, "_cardEl", 2);
+o([
   h(".trigger")
-], e.prototype, "_triggerEl", 2);
-e = r([
+], t.prototype, "_triggerEl", 2);
+t = o([
   g("cg-hover-card")
-], e);
+], t);
 export {
-  e as CgHoverCard
+  t as CgHoverCard
 };
 //# sourceMappingURL=cg-hover-card.js.map

package/dist/components/cg-hover-card/cg-hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-hover-card.js","sources":["../../../src/components/cg-hover-card/cg-hover-card.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { computePosition, autoUpdate, type Placement } from '../../utils/floating.js';\n\n/**\n * @element cg-hover-card\n * Rich hover preview with configurable open/close delays. Useful for user cards,\n * link previews, or any content that benefits from non-intrusive hover.\n *\n * @example\n * ```html\n * <cg-hover-card placement=\"top\">\n *   <a href=\"#\">@alice</a>\n *   <div slot=\"content\">\n *     <strong>Alice Johnson</strong>\n *     <p>Senior Engineer</p>\n *   </div>\n * </cg-hover-card>\n * ```\n *\n * @slot - Trigger element\n * @slot content - Hover card content\n *\n * @fires {CustomEvent} cg-hover-card-open\n * @fires {CustomEvent} cg-hover-card-close\n */\n@customElement('cg-hover-card')\nexport class CgHoverCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: inline-block;\n      position: relative;\n    }\n\n    .trigger {\n      display: inline-flex;\n    }\n\n    .card {\n      position: fixed;\n      z-index: var(--cg-z-index-500);\n      width: var(--cg-component-hover-card-width);\n      padding: var(--cg-component-hover-card-padding);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: var(--cg-component-hover-card-radius);\n      color: var(--cg-color-surface-container-text);\n      /* Hover-card sits between popover (sm) and modal (xl) on the elevation scale.\n         Lg gives it presence without feeling weighty — matches GitHub/Linear/Vercel norms. */\n      box-shadow: var(--cg-shadow-elevation-lg);\n      opacity: 0;\n      transform: scale(0.94) translateY(var(--cg-spacing-6));\n      pointer-events: none;\n      will-change: transform, opacity;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n    }\n\n    :host([open]) .card {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n      pointer-events: auto;\n    }\n\n    /* Stagger the inner content slightly behind the card chrome so the entrance\n       reads as \"card lands, then content settles in\" — feels premium without\n       being slow. */\n    .card ::slotted(*) {\n      opacity: 0;\n      transform: translateY(var(--cg-spacing-2));\n      transition:\n        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default) 60ms,\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) 60ms;\n    }\n    :host([open]) .card ::slotted(*) {\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    /* Subtle border highlight on hover of the trigger — telegraphs that the\n       trigger has a richer interaction beyond a normal link. */\n    .trigger:hover ::slotted(*) {\n      filter: brightness(1.05);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() placement: Placement = 'top';\n  @property({ type: Number }) offset = 12;\n  @property({ type: Number, attribute: 'open-delay' }) openDelay = 700;\n  @property({ type: Number, attribute: 'close-delay' }) closeDelay = 300;\n\n  @query('.card') private _cardEl!: HTMLElement;\n  @query('.trigger') private _triggerEl!: HTMLElement;\n\n  private _openTimer: number | null = null;\n  private _closeTimer: number | null = null;\n  private _cleanupAutoUpdate: (() => void) | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._openTimer) clearTimeout(this._openTimer);\n    if (this._closeTimer) clearTimeout(this._closeTimer);\n    this._cleanupAutoUpdate?.();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) {\n        this.dispatchEvent(new CustomEvent('cg-hover-card-open', { bubbles: true, composed: true }));\n        requestAnimationFrame(() => {\n          if (this._triggerEl && this._cardEl) {\n            this._cleanupAutoUpdate = autoUpdate(this._triggerEl, this._cardEl, () => this._updatePosition());\n          }\n        });\n      } else {\n        this.dispatchEvent(new CustomEvent('cg-hover-card-close', { bubbles: true, composed: true }));\n        this._cleanupAutoUpdate?.();\n        this._cleanupAutoUpdate = null;\n      }\n    }\n  }\n\n  private _updatePosition(): void {\n    if (!this._triggerEl || !this._cardEl) return;\n    const triggerRect = this._triggerEl.getBoundingClientRect();\n    const cardRect = this._cardEl.getBoundingClientRect();\n    const result = computePosition(\n      { top: triggerRect.top, left: triggerRect.left, width: triggerRect.width, height: triggerRect.height },\n      { width: cardRect.width, height: cardRect.height },\n      { placement: this.placement, offset: this.offset, flip: true, shift: true }\n    );\n    this._cardEl.style.top = `${result.y}px`;\n    this._cardEl.style.left = `${result.x}px`;\n  }\n\n  private _scheduleOpen(): void {\n    if (this._closeTimer) { clearTimeout(this._closeTimer); this._closeTimer = null; }\n    if (this.open) return;\n    this._openTimer = window.setTimeout(() => { this.open = true; }, this.openDelay);\n  }\n\n  private _scheduleClose(): void {\n    if (this._openTimer) { clearTimeout(this._openTimer); this._openTimer = null; }\n    if (!this.open) return;\n    this._closeTimer = window.setTimeout(() => { this.open = false; }, this.closeDelay);\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger\"\n        @mouseenter=${this._scheduleOpen}\n        @mouseleave=${this._scheduleClose}\n        @focusin=${this._scheduleOpen}\n        @focusout=${this._scheduleClose}\n      >\n        <slot></slot>\n      </div>\n      <div\n        class=\"card\"\n        role=\"tooltip\"\n        ?inert=${!this.open}\n        @mouseenter=${this._scheduleOpen}\n        @mouseleave=${this._scheduleClose}\n      >\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-hover-card': CgHoverCard;\n  }\n}\n"],"names":["CgHoverCard","LitElement","changed","autoUpdate","triggerRect","cardRect","result","computePosition","html","hostBlock","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-hover-card.js","sources":["../../../src/components/cg-hover-card/cg-hover-card.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport { computePosition, autoUpdate, type Placement } from '../../utils/floating.js';\n\n/**\n * @element cg-hover-card\n * Rich hover preview with configurable open/close delays. Useful for user cards,\n * link previews, or any content that benefits from non-intrusive hover.\n *\n * @example\n * ```html\n * <cg-hover-card placement=\"top\">\n *   <a href=\"#\">@alice</a>\n *   <div slot=\"content\">\n *     <strong>Alice Johnson</strong>\n *     <p>Senior Engineer</p>\n *   </div>\n * </cg-hover-card>\n * ```\n *\n * @slot - Trigger element\n * @slot content - Hover card content\n *\n * @fires {CustomEvent} cg-hover-card-open\n * @fires {CustomEvent} cg-hover-card-close\n */\n@customElement('cg-hover-card')\nexport class CgHoverCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: inline-block;\n      position: relative;\n    }\n\n    .trigger {\n      display: inline-flex;\n    }\n\n    .card {\n      position: fixed;\n      z-index: var(--cg-z-index-500);\n      width: var(--cg-component-hover-card-width);\n      padding: var(--cg-component-hover-card-padding);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: var(--cg-component-hover-card-radius);\n      color: var(--cg-color-surface-container-text);\n      /* Hover-card sits between popover (sm) and modal (xl) on the elevation scale.\n         Lg gives it presence without feeling weighty — matches GitHub/Linear/Vercel norms. */\n      box-shadow: var(--cg-shadow-elevation-lg);\n      opacity: 0;\n      transform: scale(0.94) translateY(var(--cg-spacing-6));\n      pointer-events: none;\n      will-change: transform, opacity;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n    }\n\n    :host([open]) .card {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n      pointer-events: auto;\n    }\n\n    /* Stagger the inner content slightly behind the card chrome so the entrance\n       reads as \"card lands, then content settles in\" — feels premium without\n       being slow. */\n    .card ::slotted(*) {\n      opacity: 0;\n      transform: translateY(var(--cg-spacing-2));\n      transition:\n        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default) 60ms,\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) 60ms;\n    }\n    :host([open]) .card ::slotted(*) {\n      opacity: 1;\n      transform: translateY(0);\n    }\n\n    /* Subtle border highlight on hover of the trigger — telegraphs that the\n       trigger has a richer interaction beyond a normal link. */\n    .trigger:hover ::slotted(*) {\n      filter: brightness(1.05);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() placement: Placement = 'top';\n  @property({ type: Number }) offset = 12;\n  @property({ type: Number, attribute: 'open-delay' }) openDelay = 700;\n  @property({ type: Number, attribute: 'close-delay' }) closeDelay = 300;\n\n  @query('.card') private _cardEl!: HTMLElement;\n  @query('.trigger') private _triggerEl!: HTMLElement;\n\n  private _openTimer: number | null = null;\n  private _closeTimer: number | null = null;\n  private _cleanupAutoUpdate: (() => void) | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._openTimer) clearTimeout(this._openTimer);\n    if (this._closeTimer) clearTimeout(this._closeTimer);\n    this._cleanupAutoUpdate?.();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) {\n        this.dispatchEvent(new CustomEvent('cg-hover-card-open', { bubbles: true, composed: true }));\n        requestAnimationFrame(() => {\n          if (this._triggerEl && this._cardEl) {\n            this._cleanupAutoUpdate = autoUpdate(this._triggerEl, this._cardEl, () => this._updatePosition());\n          }\n        });\n      } else {\n        this.dispatchEvent(new CustomEvent('cg-hover-card-close', { bubbles: true, composed: true }));\n        this._cleanupAutoUpdate?.();\n        this._cleanupAutoUpdate = null;\n      }\n    }\n  }\n\n  private _updatePosition(): void {\n    if (!this._triggerEl || !this._cardEl) return;\n    const triggerRect = this._triggerEl.getBoundingClientRect();\n    const cardRect = this._cardEl.getBoundingClientRect();\n    const result = computePosition(\n      { top: triggerRect.top, left: triggerRect.left, width: triggerRect.width, height: triggerRect.height },\n      { width: cardRect.width, height: cardRect.height },\n      { placement: this.placement, offset: this.offset, flip: true, shift: true }\n    );\n    this._cardEl.style.top = `${result.y}px`;\n    this._cardEl.style.left = `${result.x}px`;\n  }\n\n  private _scheduleOpen(): void {\n    if (this._closeTimer) { clearTimeout(this._closeTimer); this._closeTimer = null; }\n    if (this.open) return;\n    this._openTimer = window.setTimeout(() => { this.open = true; }, this.openDelay);\n  }\n\n  private _scheduleClose(): void {\n    if (this._openTimer) { clearTimeout(this._openTimer); this._openTimer = null; }\n    if (!this.open) return;\n    this._closeTimer = window.setTimeout(() => { this.open = false; }, this.closeDelay);\n  }\n\n  private _onKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape' && this.open) {\n      this.open = false;\n    }\n  };\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger\"\n        @mouseenter=${this._scheduleOpen}\n        @mouseleave=${this._scheduleClose}\n        @focusin=${this._scheduleOpen}\n        @focusout=${this._scheduleClose}\n        @keydown=${this._onKeydown}\n      >\n        <slot></slot>\n      </div>\n      <div\n        class=\"card\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        ?inert=${!this.open}\n        @mouseenter=${this._scheduleOpen}\n        @mouseleave=${this._scheduleClose}\n        @keydown=${this._onKeydown}\n      >\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-hover-card': CgHoverCard;\n  }\n}\n"],"names":["CgHoverCard","LitElement","changed","autoUpdate","triggerRect","cardRect","result","computePosition","html","hostBlock","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-icon.d.ts","sourceRoot":"","sources":["../../../src/components/cg-icon/cg-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA0B,OAAO,EAAE,MAAM,KAAK,CAAC;AAmKlE,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAyCnB;IAEH,8HAA8H;IACjG,IAAI,SAAM;IAEvC,mBAAmB;IACU,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE3E,oBAAoB;IACS,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAa;IAE3H,yCAAyC;IAC7B,KAAK,SAAM;IAEd,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,kCAAkC;IAClC,OAAO,CAAC,WAAW;IAInB,wDAAwD;IACxD,OAAO,CAAC,SAAS;IAajB,yCAAyC;YAC3B,aAAa;IA6BlB,MAAM;CA4DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"cg-icon.d.ts","sourceRoot":"","sources":["../../../src/components/cg-icon/cg-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA0B,OAAO,EAAE,MAAM,KAAK,CAAC;AAmKlE,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BA+CnB;IAEH,8HAA8H;IACjG,IAAI,SAAM;IAEvC,mBAAmB;IACU,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE3E,oBAAoB;IACS,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAa;IAE3H,yCAAyC;IAC7B,KAAK,SAAM;IAEd,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,kCAAkC;IAClC,OAAO,CAAC,WAAW;IAInB,wDAAwD;IACxD,OAAO,CAAC,SAAS;IAajB,yCAAyC;YAC3B,aAAa;IA8BlB,MAAM;CA4DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

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

@@ -2,7 +2,7 @@ import { css as z, LitElement as S, nothing as M, svg as C, html as d } from "li
 import { property as k, state as b, customElement as L } from "lit/decorators.js";
 import { unsafeSVG as x } from "lit/directives/unsafe-svg.js";
 import { unsafeHTML as A } from "lit/directives/unsafe-html.js";
-import { a as V, r as Z, c as H } from "../../chunks/premium.css-9I4kHrsl.js";
+import { a as V, r as Z, c as H } from "../../chunks/premium.css-DHekUEUt.js";
 const _ = {
   "home-2-linear": { body: '<g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 12.204c0-2.289 0-3.433.52-4.381c.518-.949 1.467-1.537 3.364-2.715l2-1.241C9.889 2.622 10.892 2 12 2s2.11.622 4.116 1.867l2 1.241c1.897 1.178 2.846 1.766 3.365 2.715S22 9.915 22 12.203v1.522c0 3.9 0 5.851-1.172 7.063S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.212S2 17.626 2 13.725z"/><path stroke-linecap="round" d="M12 15v3"/></g>', width: 24, height: 24 },
   "home-2-bold": { body: '<path fill="currentColor" fill-rule="evenodd" d="M2.52 7.823C2 8.77 2 9.915 2 12.203v1.522c0 3.9 0 5.851 1.172 7.063S6.229 22 10 22h4c3.771 0 5.657 0 6.828-1.212S22 17.626 22 13.725v-1.521c0-2.289 0-3.433-.52-4.381c-.518-.949-1.467-1.537-3.364-2.715l-2-1.241C14.111 2.622 13.108 2 12 2s-2.11.622-4.116 1.867l-2 1.241C3.987 6.286 3.038 6.874 2.519 7.823M11.25 18a.75.75 0 0 0 1.5 0v-3a.75.75 0 0 0-1.5 0z" clip-rule="evenodd"/>', width: 24, height: 24 },
@@ -85,10 +85,10 @@ const _ = {
   "bug-linear": { body: '<g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 15v-3.062A3.94 3.94 0 0 0 15.063 8H8.936A3.94 3.94 0 0 0 5 11.938V15a7 7 0 1 0 14 0Z"/><path d="M16.5 8.5v-1a4.5 4.5 0 1 0-9 0v1"/><path stroke-linecap="round" d="M19 14h3M5 14H2M14.5 3.5L17 2M9.5 3.5L7 2m13.5 18l-2-.8m2-11.2l-2 .8M3.5 20l2-.8M3.5 8l2 .8M12 21.5V15"/></g>', width: 24, height: 24 },
   "command-linear": { body: '<path fill="none" stroke="currentColor" stroke-width="1.5" d="M8 8h8v8H8zm8 8.001h3a3 3 0 1 1-3 3zm-7.999 0h-3a3 3 0 1 0 3 3zM16 8h3a3 3 0 1 0-3-3zM8.001 8h-3a3 3 0 1 1 3-3z"/>', width: 24, height: 24 }
 };
-var j = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (r, e, l, t) => {
-  for (var i = t > 1 ? void 0 : t ? $(e, l) : e, o = r.length - 1, n; o >= 0; o--)
-    (n = r[o]) && (i = (t ? n(e, l, i) : n(i)) || i);
-  return t && i && j(e, l, i), i;
+var j = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (r, e, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? $(e, l) : e, i = r.length - 1, n; i >= 0; i--)
+    (n = r[i]) && (t = (o ? n(e, l, t) : n(t)) || t);
+  return o && t && j(e, l, t), t;
 };
 const q = {
   "chevron-down": "M6 9l6 6 6-6",
@@ -123,7 +123,7 @@ const q = {
   "more-vertical": [[12, 5], [12, 12], [12, 19]],
   "more-horizontal": [[5, 12], [12, 12], [19, 12]],
   grip: [[9, 5], [9, 12], [9, 19], [15, 5], [15, 12], [15, 19]]
-}, m = {
+}, g = {
   home: "home-2-linear",
   trash: "trash-bin-trash-linear",
   edit: "pen-new-square-linear",
@@ -180,20 +180,20 @@ function O(r) {
     return null;
   }
   if (e.querySelector("parsererror")) return null;
-  const t = e.querySelector("svg");
-  return t ? (((o) => {
-    o.querySelectorAll("script, iframe, object, embed, form, style, foreignObject, use").forEach((s) => s.remove());
-    const h = o.querySelectorAll("*"), u = (s) => {
+  const o = e.querySelector("svg");
+  return o ? (((i) => {
+    i.querySelectorAll("script, iframe, object, embed, form, style, foreignObject, use").forEach((s) => s.remove());
+    const h = i.querySelectorAll("*"), u = (s) => {
       const y = Array.from(s.attributes);
       for (const p of y) {
-        const g = p.name.toLowerCase();
-        (g.startsWith("on") || g === "formaction") && s.removeAttribute(p.name);
+        const m = p.name.toLowerCase();
+        (m.startsWith("on") || m === "formaction") && s.removeAttribute(p.name);
         const w = p.value.trim().toLowerCase();
-        (g === "href" || g === "xlink:href") && (w.startsWith("javascript:") || w.startsWith("data:")) && s.removeAttribute(p.name);
+        (m === "href" || m === "xlink:href") && (w.startsWith("javascript:") || w.startsWith("data:")) && s.removeAttribute(p.name);
       }
     };
-    u(o), h.forEach(u);
-  })(t), t.outerHTML) : null;
+    u(i), h.forEach(u);
+  })(o), o.outerHTML) : null;
 }
 const f = /* @__PURE__ */ new Map();
 let a = class extends S {
@@ -210,34 +210,35 @@ let a = class extends S {
   /** Check bundled Solar icons (with alias resolution) */
   _getSolar() {
     let r = this.name;
-    r.startsWith("solar:") ? r = r.slice(6) : m[r] && (r = m[r]);
+    r.startsWith("solar:") ? r = r.slice(6) : g[r] && (r = g[r]);
     const e = _[r];
     return e ? { body: e.body, width: e.width || 24, height: e.height || 24 } : null;
   }
   /** Fetch from Iconify API as fallback */
   async _fetchFromApi() {
-    let r = this.name;
-    if (r.startsWith("solar:") ? r = r.slice(6) : m[r] && (r = m[r]), f.has(r)) {
-      this._apiSvg = f.get(r);
+    const r = this.name;
+    let e = r;
+    if (e.startsWith("solar:") ? e = e.slice(6) : g[e] && (e = g[e]), f.has(e)) {
+      this._apiSvg = f.get(e);
       return;
     }
     this._loading = !0;
     try {
-      const e = await fetch(`https://api.iconify.design/solar/${r}.svg?height=24`);
-      if (e.ok) {
-        const l = await e.text(), t = O(l);
-        t && (f.set(r, t), this._apiSvg = t);
+      const l = await fetch(`https://api.iconify.design/solar/${e}.svg?height=24`);
+      if (l.ok) {
+        const o = await l.text(), t = O(o);
+        t && (f.set(e, t), this.name === r && (this._apiSvg = t));
       }
     } catch {
     } finally {
-      this._loading = !1;
+      this.name === r && (this._loading = !1);
     }
   }
   render() {
     if (!this.name) return M;
-    const r = this.label ? "img" : "presentation", e = this.label || M, l = this.label ? "false" : "true", t = this._getBuiltin();
-    if (t) {
-      const n = t.split(/(?=M)/).map(
+    const r = this.label ? "img" : "presentation", e = this.label || M, l = this.label ? "false" : "true", o = this._getBuiltin();
+    if (o) {
+      const n = o.split(/(?=M)/).map(
         (h) => C`<path d="${h.trim()}"></path>`
       );
       return d`
@@ -248,9 +249,9 @@ let a = class extends S {
         </svg>
       `;
     }
-    const i = v[this.name];
-    if (i) {
-      const n = i.map(
+    const t = v[this.name];
+    if (t) {
+      const n = t.map(
         ([h, u]) => C`<circle cx="${h}" cy="${u}" r="2"></circle>`
       );
       return d`
@@ -260,14 +261,14 @@ let a = class extends S {
         </svg>
       `;
     }
-    const o = this._getSolar();
-    return o ? d`
-        <svg viewBox="0 0 ${o.width} ${o.height}"
+    const i = this._getSolar();
+    return i ? d`
+        <svg viewBox="0 0 ${i.width} ${i.height}"
           role="${r}" aria-label="${e}" aria-hidden="${l}">
-          ${x(o.body)}
+          ${x(i.body)}
         </svg>
-      ` : this._apiSvg ? d`<span role="${r}" aria-label="${e}" aria-hidden="${l}"
-        style="display:contents;">${A(this._apiSvg)}</span>` : this._loading ? d`<div class="placeholder" aria-hidden="true"></div>` : M;
+      ` : this._apiSvg ? d`<span class="api-icon" role="${r}" aria-label="${e}"
+        aria-hidden="${l}">${A(this._apiSvg)}</span>` : this._loading ? d`<div class="placeholder" aria-hidden="true"></div>` : M;
   }
 };
 a.styles = [V, Z, H, z`
@@ -289,7 +290,7 @@ a.styles = [V, Z, H, z`
     :host([size="xl"]) { font-size: var(--cg-icon-size-300); }
 
     :host([color="muted"]) { color: var(--cg-color-surface-container-outlined); }
-    :host([color="accent"]) { color: var(--cg-color-action-primary-background-default); }
+    :host([color="accent"]) { color: var(--cg-color-accent-text); }
     :host([color="success"]) { color: var(--cg-color-status-success-text-default); }
     :host([color="warning"]) { color: var(--cg-color-status-warning-text-default); }
     :host([color="danger"]) { color: var(--cg-color-status-error-text-default); }
@@ -305,6 +306,12 @@ a.styles = [V, Z, H, z`
       animation: spin var(--cg-transition-duration-slow) linear infinite;
     }
 
+    .api-icon {
+      display: inline-flex;
+      width: 100%;
+      height: 100%;
+    }
+
     .placeholder {
       width: 100%;
       height: 100%;