@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,91 +1,112 @@
-import { css as g, LitElement as u, nothing as v, html as c } from "lit";
-import { property as s, state as l, query as h, customElement as m } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-import { b as _, a as w } from "../../chunks/floating-DfsaYJnh.js";
+import { css as g, LitElement as v, nothing as c, html as d } from "lit";
+import { property as i, state as h, query as u, customElement as m } from "lit/decorators.js";
+import { h as f, r as _ } from "../../chunks/premium.css-DHekUEUt.js";
+import { b, a as w } from "../../chunks/floating-DfsaYJnh.js";
 import { b as y } from "../../chunks/outside-click-CP1P1fK3.js";
-import { F as E } from "../../chunks/focus-trap-BdRNhSPD.js";
-var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (t, r, n, i) => {
-  for (var a = i > 1 ? void 0 : i ? O(r, n) : r, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (a = (i ? d(r, n, a) : d(a)) || a);
-  return i && a && C(r, n, a), a;
+import { F as E } from "../../chunks/focus-trap-vlQwKK-3.js";
+var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (e, r, n, s) => {
+  for (var a = s > 1 ? void 0 : s ? O(r, n) : r, p = e.length - 1, l; p >= 0; p--)
+    (l = e[p]) && (a = (s ? l(r, n, a) : l(a)) || a);
+  return s && a && C(r, n, a), a;
 };
-let e = class extends u {
+let t = class extends v {
   constructor() {
-    super(...arguments), this.open = !1, this.placement = "bottom", this.offset = 8, this.arrow = !0, this.trigger = "click", this.closable = !0, this.size = "md", this.rounded = "md", this._actualSide = "bottom", this._arrowOffset = 0, this._focusTrap = new E(), this._cleanupAutoUpdate = null, this._disposeOutsideClick = null;
+    super(...arguments), this.open = !1, this.label = "", this.placement = "bottom", this.offset = 8, this.arrow = !0, this.trigger = "click", this.closable = !0, this.size = "md", this.rounded = "md", this._actualSide = "bottom", this._arrowOffset = 0, this._focusTrap = new E(), this._cleanupAutoUpdate = null, this._disposeOutsideClick = null, this._hoverOpenTimer = 0, this._hoverCloseTimer = 0, this._hoverEscListener = null;
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._cleanupAutoUpdate?.(), this._disposeOutsideClick?.(), this._disposeOutsideClick = null, this._focusTrap.deactivate();
+    super.disconnectedCallback(), this._cleanupAutoUpdate?.(), this._disposeOutsideClick?.(), this._disposeOutsideClick = null, this._focusTrap.deactivate(), clearTimeout(this._hoverOpenTimer), clearTimeout(this._hoverCloseTimer), this._disposeHoverEsc();
   }
-  updated(t) {
-    t.has("open") && (this.open ? this._onOpen() : this._onClose());
+  _disposeHoverEsc() {
+    this._hoverEscListener && (document.removeEventListener("keydown", this._hoverEscListener), this._hoverEscListener = null);
+  }
+  updated(e) {
+    e.has("open") && (this._slottedTrigger()?.setAttribute("aria-expanded", String(this.open)), this.open ? this._onOpen() : e.get("open") === !0 && this._onClose());
+  }
+  _slottedTrigger() {
+    return this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements()[0] ?? null;
+  }
+  /** ARIA popup state lives on the slotted trigger — a role-less wrapper
+   *  div is invisible to assistive tech. */
+  _onTriggerSlotChange() {
+    const e = this._slottedTrigger();
+    e && (e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-expanded", String(this.open)));
   }
   _onOpen() {
     this.dispatchEvent(new CustomEvent("cg-popover-open", { bubbles: !0, composed: !0 })), requestAnimationFrame(() => {
-      !this._triggerEl || !this._popoverEl || (this._cleanupAutoUpdate = _(this._triggerEl, this._popoverEl, () => this._updatePosition()));
+      !this._triggerEl || !this._popoverEl || (this._cleanupAutoUpdate = b(this._triggerEl, this._popoverEl, () => this._updatePosition()));
     }), this.closable && (this._disposeOutsideClick?.(), this._disposeOutsideClick = y(this, () => {
       this.open = !1;
-    })), requestAnimationFrame(() => {
+    })), this.trigger !== "hover" ? requestAnimationFrame(() => {
       this._popoverEl && this._focusTrap.activate(this._popoverEl, {
         onEscape: this.closable ? () => {
           this.open = !1;
         } : void 0
       });
-    });
+    }) : this.closable && (this._disposeHoverEsc(), this._hoverEscListener = (e) => {
+      e.key === "Escape" && (this.open = !1);
+    }, document.addEventListener("keydown", this._hoverEscListener));
   }
   _onClose() {
-    this.dispatchEvent(new CustomEvent("cg-popover-close", { bubbles: !0, composed: !0 })), this._cleanupAutoUpdate?.(), this._cleanupAutoUpdate = null, this._disposeOutsideClick?.(), this._disposeOutsideClick = null, this._focusTrap.deactivate();
+    this.dispatchEvent(new CustomEvent("cg-popover-close", { bubbles: !0, composed: !0 })), this._cleanupAutoUpdate?.(), this._cleanupAutoUpdate = null, this._disposeOutsideClick?.(), this._disposeOutsideClick = null, this._focusTrap.deactivate(), this._disposeHoverEsc();
   }
   _updatePosition() {
     if (!this._triggerEl || !this._popoverEl) return;
-    const t = this._triggerEl.getBoundingClientRect(), r = w(this._triggerEl, this._popoverEl, {
+    const e = this._triggerEl.getBoundingClientRect(), r = w(this._triggerEl, this._popoverEl, {
       placement: this.placement,
       offset: this.offset,
       flip: !0,
       shift: !0
     });
     if (this._actualSide = r.placement.split("-")[0], this._actualSide === "top" || this._actualSide === "bottom") {
-      const i = t.left + t.width / 2;
-      this._arrowOffset = i - r.x;
+      const s = e.left + e.width / 2;
+      this._arrowOffset = s - r.x;
     } else {
-      const i = t.top + t.height / 2;
-      this._arrowOffset = i - r.y;
+      const s = e.top + e.height / 2;
+      this._arrowOffset = s - r.y;
     }
   }
   _handleTriggerClick() {
     this.trigger === "click" && (this.open = !this.open);
   }
-  _handleTriggerMouseEnter() {
-    this.trigger === "hover" && (this.open = !0);
+  _scheduleOpen() {
+    this.trigger === "hover" && (clearTimeout(this._hoverCloseTimer), this._hoverOpenTimer = window.setTimeout(() => {
+      this.open = !0;
+    }, 80));
   }
-  _handleTriggerMouseLeave() {
-    this.trigger === "hover" && (this.open = !1);
+  _scheduleClose() {
+    this.trigger === "hover" && (clearTimeout(this._hoverOpenTimer), this._hoverCloseTimer = window.setTimeout(() => {
+      this.open = !1;
+    }, 150));
   }
   render() {
     const r = this._actualSide === "top" || this._actualSide === "bottom" ? `left: ${this._arrowOffset}px; margin-left: calc(var(--cg-component-popover-arrow-size) / -2);` : `top: ${this._arrowOffset}px; margin-top: calc(var(--cg-component-popover-arrow-size) / -2);`;
-    return c`
+    return d`
       <div
         class="trigger"
         @click=${this._handleTriggerClick}
-        @mouseenter=${this._handleTriggerMouseEnter}
-        @mouseleave=${this._handleTriggerMouseLeave}
-        aria-haspopup="dialog"
-        aria-expanded=${this.open ? "true" : "false"}
+        @mouseenter=${this._scheduleOpen}
+        @mouseleave=${this._scheduleClose}
+        @focusin=${this._scheduleOpen}
+        @focusout=${this._scheduleClose}
       >
-        <slot></slot>
+        <slot @slotchange=${this._onTriggerSlotChange}></slot>
       </div>
       <div
         class="popover"
         role="dialog"
         aria-modal="false"
+        aria-label=${this.label || c}
         data-side=${this._actualSide}
+        @mouseenter=${this._scheduleOpen}
+        @mouseleave=${this._scheduleClose}
       >
-        ${this.arrow ? c`<span class="arrow" data-side=${this._actualSide} style=${r}></span>` : v}
+        ${this.arrow ? d`<span class="arrow" data-side=${this._actualSide} style=${r}></span>` : c}
         <slot name="content"></slot>
       </div>
     `;
   }
 };
-e.styles = [f, b, g`
+t.styles = [f, _, g`
     :host {
       display: inline-block;
       position: relative;
@@ -108,15 +129,18 @@ e.styles = [f, b, g`
       color: var(--cg-color-surface-container-text);
       box-shadow: var(--cg-elevation-3);
       opacity: 0;
+      visibility: hidden;
       transform: scale(0.96) translateY(var(--cg-spacing-4));
       pointer-events: none;
       transition:
         opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out),
+        visibility var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
 
     :host([open]) .popover {
       opacity: 1;
+      visibility: visible;
       transform: scale(1) translateY(0);
       pointer-events: auto;
     }
@@ -171,45 +195,48 @@ e.styles = [f, b, g`
     }
   `];
 o([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "open", 2);
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+o([
+  i()
+], t.prototype, "label", 2);
 o([
-  s()
-], e.prototype, "placement", 2);
+  i()
+], t.prototype, "placement", 2);
 o([
-  s({ type: Number })
-], e.prototype, "offset", 2);
+  i({ type: Number })
+], t.prototype, "offset", 2);
 o([
-  s({ type: Boolean })
-], e.prototype, "arrow", 2);
+  i({ type: Boolean })
+], t.prototype, "arrow", 2);
 o([
-  s()
-], e.prototype, "trigger", 2);
+  i()
+], t.prototype, "trigger", 2);
 o([
-  s({ type: Boolean })
-], e.prototype, "closable", 2);
+  i({ type: Boolean })
+], t.prototype, "closable", 2);
 o([
-  s({ reflect: !0 })
-], e.prototype, "size", 2);
+  i({ reflect: !0 })
+], t.prototype, "size", 2);
 o([
-  s({ reflect: !0 })
-], e.prototype, "rounded", 2);
+  i({ reflect: !0 })
+], t.prototype, "rounded", 2);
 o([
-  l()
-], e.prototype, "_actualSide", 2);
+  h()
+], t.prototype, "_actualSide", 2);
 o([
-  l()
-], e.prototype, "_arrowOffset", 2);
+  h()
+], t.prototype, "_arrowOffset", 2);
 o([
-  h(".popover")
-], e.prototype, "_popoverEl", 2);
+  u(".popover")
+], t.prototype, "_popoverEl", 2);
 o([
-  h(".trigger")
-], e.prototype, "_triggerEl", 2);
-e = o([
+  u(".trigger")
+], t.prototype, "_triggerEl", 2);
+t = o([
   m("cg-popover")
-], e);
+], t);
 export {
-  e as CgPopover
+  t as CgPopover
 };
 //# sourceMappingURL=cg-popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cg-popover.js","sources":["../../../src/components/cg-popover/cg-popover.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';\nimport { applyFloatingPosition, autoUpdate, type Placement } from '../../utils/floating.js';\nimport { bindOutsideClick } from '../../utils/outside-click.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-popover\n * Floating content container with click/hover triggers, smart placement, and focus management.\n *\n * @example\n * ```html\n * <cg-popover placement=\"bottom-start\" trigger=\"click\">\n *   <cg-button>Filters</cg-button>\n *   <div slot=\"content\">Filter panel content</div>\n * </cg-popover>\n * ```\n *\n * @slot - Trigger element\n * @slot content - Popover content\n *\n * @fires {CustomEvent} cg-popover-open - When the popover opens\n * @fires {CustomEvent} cg-popover-close - When the popover closes\n */\n@customElement('cg-popover')\nexport class CgPopover 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      cursor: pointer;\n    }\n\n    .popover {\n      position: fixed;\n      z-index: var(--cg-z-index-500);\n      min-width: var(--cg-spacing-160);\n      max-width: var(--cg-component-popover-max-width);\n      padding: var(--cg-component-popover-padding);\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-component-popover-radius);\n      color: var(--cg-color-surface-container-text);\n      box-shadow: var(--cg-elevation-3);\n      opacity: 0;\n      transform: scale(0.96) translateY(var(--cg-spacing-4));\n      pointer-events: none;\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-ease-out);\n    }\n\n    :host([open]) .popover {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n      pointer-events: auto;\n    }\n\n    /* Transform origin based on placement side */\n    .popover[data-side=\"top\"] { transform-origin: bottom; }\n    .popover[data-side=\"bottom\"] { transform-origin: top; }\n    .popover[data-side=\"left\"] { transform-origin: right; }\n    .popover[data-side=\"right\"] { transform-origin: left; }\n\n    /* Size variants */\n    :host([size=\"sm\"]) .popover { max-width: var(--cg-spacing-256); }\n    :host([size=\"md\"]) .popover { max-width: var(--cg-component-popover-max-width); }\n    :host([size=\"lg\"]) .popover { max-width: var(--cg-spacing-480); }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .popover { border-radius: var(--cg-border-radius-none); }\n    :host([rounded=\"sm\"]) .popover { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .popover { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .popover { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .popover { border-radius: var(--cg-border-radius-full); }\n\n    /* Arrow */\n    .arrow {\n      position: absolute;\n      width: var(--cg-component-popover-arrow-size);\n      height: var(--cg-component-popover-arrow-size);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      transform: rotate(45deg);\n      pointer-events: none;\n    }\n    .arrow[data-side=\"top\"] {\n      bottom: calc(var(--cg-component-popover-arrow-size) / -2 - var(--cg-border-width-50));\n      border-top: none;\n      border-left: none;\n    }\n    .arrow[data-side=\"bottom\"] {\n      top: calc(var(--cg-component-popover-arrow-size) / -2 - var(--cg-border-width-50));\n      border-bottom: none;\n      border-right: none;\n    }\n    .arrow[data-side=\"left\"] {\n      right: calc(var(--cg-component-popover-arrow-size) / -2 - var(--cg-border-width-50));\n      border-left: none;\n      border-bottom: none;\n    }\n    .arrow[data-side=\"right\"] {\n      left: calc(var(--cg-component-popover-arrow-size) / -2 - var(--cg-border-width-50));\n      border-right: none;\n      border-top: none;\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property() placement: Placement = 'bottom';\n  @property({ type: Number }) offset = 8;\n  @property({ type: Boolean }) arrow = true;\n  @property() trigger: 'click' | 'hover' | 'manual' = 'click';\n  @property({ type: Boolean }) closable = true;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n\n  @state() private _actualSide: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n  @state() private _arrowOffset = 0;\n\n  @query('.popover') private _popoverEl!: HTMLElement;\n  @query('.trigger') private _triggerEl!: HTMLElement;\n\n  private _focusTrap = new FocusTrap();\n  private _cleanupAutoUpdate: (() => void) | null = null;\n  private _disposeOutsideClick: (() => void) | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cleanupAutoUpdate?.();\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    this._focusTrap.deactivate();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) this._onOpen();\n      else this._onClose();\n    }\n  }\n\n  private _onOpen(): void {\n    this.dispatchEvent(new CustomEvent('cg-popover-open', { bubbles: true, composed: true }));\n\n    // Start auto-positioning\n    requestAnimationFrame(() => {\n      if (!this._triggerEl || !this._popoverEl) return;\n      this._cleanupAutoUpdate = autoUpdate(this._triggerEl, this._popoverEl, () => this._updatePosition());\n    });\n\n    // Outside click to close\n    if (this.closable) {\n      this._disposeOutsideClick?.();\n      this._disposeOutsideClick = bindOutsideClick(this, () => { this.open = false; });\n    }\n\n    // Focus trap\n    requestAnimationFrame(() => {\n      if (this._popoverEl) {\n        this._focusTrap.activate(this._popoverEl, {\n          onEscape: this.closable ? () => { this.open = false; } : undefined,\n        });\n      }\n    });\n  }\n\n  private _onClose(): void {\n    this.dispatchEvent(new CustomEvent('cg-popover-close', { bubbles: true, composed: true }));\n    this._cleanupAutoUpdate?.();\n    this._cleanupAutoUpdate = null;\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    this._focusTrap.deactivate();\n  }\n\n  private _updatePosition(): void {\n    if (!this._triggerEl || !this._popoverEl) return;\n    const triggerRect = this._triggerEl.getBoundingClientRect();\n    const result = applyFloatingPosition(this._triggerEl, this._popoverEl, {\n      placement: this.placement, offset: this.offset, flip: true, shift: true,\n    });\n    this._actualSide = result.placement.split('-')[0] as 'top' | 'bottom' | 'left' | 'right';\n\n    // Compute arrow offset\n    const isVertical = this._actualSide === 'top' || this._actualSide === 'bottom';\n    if (isVertical) {\n      const triggerCenter = triggerRect.left + triggerRect.width / 2;\n      this._arrowOffset = triggerCenter - result.x;\n    } else {\n      const triggerCenter = triggerRect.top + triggerRect.height / 2;\n      this._arrowOffset = triggerCenter - result.y;\n    }\n  }\n\n  private _handleTriggerClick(): void {\n    if (this.trigger !== 'click') return;\n    this.open = !this.open;\n  }\n\n  private _handleTriggerMouseEnter(): void {\n    if (this.trigger !== 'hover') return;\n    this.open = true;\n  }\n\n  private _handleTriggerMouseLeave(): void {\n    if (this.trigger !== 'hover') return;\n    this.open = false;\n  }\n\n  override render() {\n    const isVertical = this._actualSide === 'top' || this._actualSide === 'bottom';\n    const arrowStyle = isVertical\n      ? `left: ${this._arrowOffset}px; margin-left: calc(var(--cg-component-popover-arrow-size) / -2);`\n      : `top: ${this._arrowOffset}px; margin-top: calc(var(--cg-component-popover-arrow-size) / -2);`;\n\n    return html`\n      <div\n        class=\"trigger\"\n        @click=${this._handleTriggerClick}\n        @mouseenter=${this._handleTriggerMouseEnter}\n        @mouseleave=${this._handleTriggerMouseLeave}\n        aria-haspopup=\"dialog\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </div>\n      <div\n        class=\"popover\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        data-side=${this._actualSide}\n      >\n        ${this.arrow ? html`<span class=\"arrow\" data-side=${this._actualSide} style=${arrowStyle}></span>` : nothing}\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-popover': CgPopover;\n  }\n}\n"],"names":["CgPopover","LitElement","FocusTrap","changed","autoUpdate","bindOutsideClick","triggerRect","result","applyFloatingPosition","triggerCenter","arrowStyle","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-popover.js","sources":["../../../src/components/cg-popover/cg-popover.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';\nimport { applyFloatingPosition, autoUpdate, type Placement } from '../../utils/floating.js';\nimport { bindOutsideClick } from '../../utils/outside-click.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-popover\n * Floating content container with click/hover triggers, smart placement, and focus management.\n *\n * @example\n * ```html\n * <cg-popover placement=\"bottom-start\" trigger=\"click\">\n *   <cg-button>Filters</cg-button>\n *   <div slot=\"content\">Filter panel content</div>\n * </cg-popover>\n * ```\n *\n * @slot - Trigger element\n * @slot content - Popover content\n *\n * @fires {CustomEvent} cg-popover-open - When the popover opens\n * @fires {CustomEvent} cg-popover-close - When the popover closes\n */\n@customElement('cg-popover')\nexport class CgPopover 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      cursor: pointer;\n    }\n\n    .popover {\n      position: fixed;\n      z-index: var(--cg-z-index-500);\n      min-width: var(--cg-spacing-160);\n      max-width: var(--cg-component-popover-max-width);\n      padding: var(--cg-component-popover-padding);\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-component-popover-radius);\n      color: var(--cg-color-surface-container-text);\n      box-shadow: var(--cg-elevation-3);\n      opacity: 0;\n      visibility: hidden;\n      transform: scale(0.96) translateY(var(--cg-spacing-4));\n      pointer-events: none;\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-ease-out),\n        visibility var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([open]) .popover {\n      opacity: 1;\n      visibility: visible;\n      transform: scale(1) translateY(0);\n      pointer-events: auto;\n    }\n\n    /* Transform origin based on placement side */\n    .popover[data-side=\"top\"] { transform-origin: bottom; }\n    .popover[data-side=\"bottom\"] { transform-origin: top; }\n    .popover[data-side=\"left\"] { transform-origin: right; }\n    .popover[data-side=\"right\"] { transform-origin: left; }\n\n    /* Size variants */\n    :host([size=\"sm\"]) .popover { max-width: var(--cg-spacing-256); }\n    :host([size=\"md\"]) .popover { max-width: var(--cg-component-popover-max-width); }\n    :host([size=\"lg\"]) .popover { max-width: var(--cg-spacing-480); }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .popover { border-radius: var(--cg-border-radius-none); }\n    :host([rounded=\"sm\"]) .popover { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .popover { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .popover { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .popover { border-radius: var(--cg-border-radius-full); }\n\n    /* Arrow */\n    .arrow {\n      position: absolute;\n      width: var(--cg-component-popover-arrow-size);\n      height: var(--cg-component-popover-arrow-size);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      transform: rotate(45deg);\n      pointer-events: none;\n    }\n    .arrow[data-side=\"top\"] {\n      bottom: calc(var(--cg-component-popover-arrow-size) / -2 - var(--cg-border-width-50));\n      border-top: none;\n      border-left: none;\n    }\n    .arrow[data-side=\"bottom\"] {\n      top: calc(var(--cg-component-popover-arrow-size) / -2 - var(--cg-border-width-50));\n      border-bottom: none;\n      border-right: none;\n    }\n    .arrow[data-side=\"left\"] {\n      right: calc(var(--cg-component-popover-arrow-size) / -2 - var(--cg-border-width-50));\n      border-left: none;\n      border-bottom: none;\n    }\n    .arrow[data-side=\"right\"] {\n      left: calc(var(--cg-component-popover-arrow-size) / -2 - var(--cg-border-width-50));\n      border-right: none;\n      border-top: none;\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  /** Accessible name for the popover dialog (required for WCAG 4.1.2). */\n  @property() label = '';\n  @property() placement: Placement = 'bottom';\n  @property({ type: Number }) offset = 8;\n  @property({ type: Boolean }) arrow = true;\n  @property() trigger: 'click' | 'hover' | 'manual' = 'click';\n  @property({ type: Boolean }) closable = true;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n\n  @state() private _actualSide: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n  @state() private _arrowOffset = 0;\n\n  @query('.popover') private _popoverEl!: HTMLElement;\n  @query('.trigger') private _triggerEl!: HTMLElement;\n\n  private _focusTrap = new FocusTrap();\n  private _cleanupAutoUpdate: (() => void) | null = null;\n  private _disposeOutsideClick: (() => void) | null = null;\n  private _hoverOpenTimer = 0;\n  private _hoverCloseTimer = 0;\n  private _hoverEscListener: ((e: KeyboardEvent) => void) | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cleanupAutoUpdate?.();\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    this._focusTrap.deactivate();\n    clearTimeout(this._hoverOpenTimer);\n    clearTimeout(this._hoverCloseTimer);\n    this._disposeHoverEsc();\n  }\n\n  private _disposeHoverEsc(): void {\n    if (this._hoverEscListener) {\n      document.removeEventListener('keydown', this._hoverEscListener);\n      this._hoverEscListener = null;\n    }\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('open')) {\n      this._slottedTrigger()?.setAttribute('aria-expanded', String(this.open));\n      if (this.open) this._onOpen();\n      else if (changed.get('open') === true) this._onClose();\n    }\n  }\n\n  private _slottedTrigger(): Element | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    return slot?.assignedElements()[0] ?? null;\n  }\n\n  /** ARIA popup state lives on the slotted trigger — a role-less wrapper\n   *  div is invisible to assistive tech. */\n  private _onTriggerSlotChange(): void {\n    const el = this._slottedTrigger();\n    if (el) {\n      el.setAttribute('aria-haspopup', 'dialog');\n      el.setAttribute('aria-expanded', String(this.open));\n    }\n  }\n\n  private _onOpen(): void {\n    this.dispatchEvent(new CustomEvent('cg-popover-open', { bubbles: true, composed: true }));\n\n    // Start auto-positioning\n    requestAnimationFrame(() => {\n      if (!this._triggerEl || !this._popoverEl) return;\n      this._cleanupAutoUpdate = autoUpdate(this._triggerEl, this._popoverEl, () => this._updatePosition());\n    });\n\n    // Outside click to close\n    if (this.closable) {\n      this._disposeOutsideClick?.();\n      this._disposeOutsideClick = bindOutsideClick(this, () => { this.open = false; });\n    }\n\n    // Focus trap — but never in hover mode: activate() steals keyboard focus\n    // on mere mouseover and deactivate() yanks it back on mouseleave.\n    if (this.trigger !== 'hover') {\n      requestAnimationFrame(() => {\n        if (this._popoverEl) {\n          this._focusTrap.activate(this._popoverEl, {\n            onEscape: this.closable ? () => { this.open = false; } : undefined,\n          });\n        }\n      });\n    } else if (this.closable) {\n      // WCAG 1.4.13: hover content must be dismissable without pointer moves.\n      this._disposeHoverEsc();\n      this._hoverEscListener = (e: KeyboardEvent) => { if (e.key === 'Escape') this.open = false; };\n      document.addEventListener('keydown', this._hoverEscListener);\n    }\n  }\n\n  private _onClose(): void {\n    this.dispatchEvent(new CustomEvent('cg-popover-close', { bubbles: true, composed: true }));\n    this._cleanupAutoUpdate?.();\n    this._cleanupAutoUpdate = null;\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    this._focusTrap.deactivate();\n    this._disposeHoverEsc();\n  }\n\n  private _updatePosition(): void {\n    if (!this._triggerEl || !this._popoverEl) return;\n    const triggerRect = this._triggerEl.getBoundingClientRect();\n    const result = applyFloatingPosition(this._triggerEl, this._popoverEl, {\n      placement: this.placement, offset: this.offset, flip: true, shift: true,\n    });\n    this._actualSide = result.placement.split('-')[0] as 'top' | 'bottom' | 'left' | 'right';\n\n    // Compute arrow offset\n    const isVertical = this._actualSide === 'top' || this._actualSide === 'bottom';\n    if (isVertical) {\n      const triggerCenter = triggerRect.left + triggerRect.width / 2;\n      this._arrowOffset = triggerCenter - result.x;\n    } else {\n      const triggerCenter = triggerRect.top + triggerRect.height / 2;\n      this._arrowOffset = triggerCenter - result.y;\n    }\n  }\n\n  private _handleTriggerClick(): void {\n    if (this.trigger !== 'click') return;\n    this.open = !this.open;\n  }\n\n  private _scheduleOpen(): void {\n    if (this.trigger !== 'hover') return;\n    clearTimeout(this._hoverCloseTimer);\n    this._hoverOpenTimer = window.setTimeout(() => { this.open = true; }, 80);\n  }\n\n  private _scheduleClose(): void {\n    if (this.trigger !== 'hover') return;\n    clearTimeout(this._hoverOpenTimer);\n    // Delay so the pointer can cross the gap into the popover (WCAG 1.4.13)\n    this._hoverCloseTimer = window.setTimeout(() => { this.open = false; }, 150);\n  }\n\n  override render() {\n    const isVertical = this._actualSide === 'top' || this._actualSide === 'bottom';\n    const arrowStyle = isVertical\n      ? `left: ${this._arrowOffset}px; margin-left: calc(var(--cg-component-popover-arrow-size) / -2);`\n      : `top: ${this._arrowOffset}px; margin-top: calc(var(--cg-component-popover-arrow-size) / -2);`;\n\n    return html`\n      <div\n        class=\"trigger\"\n        @click=${this._handleTriggerClick}\n        @mouseenter=${this._scheduleOpen}\n        @mouseleave=${this._scheduleClose}\n        @focusin=${this._scheduleOpen}\n        @focusout=${this._scheduleClose}\n      >\n        <slot @slotchange=${this._onTriggerSlotChange}></slot>\n      </div>\n      <div\n        class=\"popover\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n        aria-label=${this.label || nothing}\n        data-side=${this._actualSide}\n        @mouseenter=${this._scheduleOpen}\n        @mouseleave=${this._scheduleClose}\n      >\n        ${this.arrow ? html`<span class=\"arrow\" data-side=${this._actualSide} style=${arrowStyle}></span>` : nothing}\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-popover': CgPopover;\n  }\n}\n"],"names":["CgPopover","LitElement","FocusTrap","changed","el","autoUpdate","bindOutsideClick","triggerRect","result","applyFloatingPosition","triggerCenter","arrowStyle","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-portal.d.ts","sourceRoot":"","sources":["../../../src/components/cg-portal/cg-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAEpB;IAEU,MAAM,EAAE,MAAM,GAAG,WAAW,CAAM;IACjB,QAAQ,UAAS;IAE9C,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,SAAS,CAAiC;IAEzC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUrD,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,MAAM;IA8Bd,OAAO,CAAC,QAAQ;IAoBP,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"cg-portal.d.ts","sourceRoot":"","sources":["../../../src/components/cg-portal/cg-portal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAEpB;IAEU,MAAM,EAAE,MAAM,GAAG,WAAW,CAAM;IACjB,QAAQ,UAAS;IAE9C,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,SAAS,CAAiC;IAEzC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUrD,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,MAAM;IAwCd,OAAO,CAAC,QAAQ;IA2BP,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

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

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

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

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

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

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

@@ -1,12 +1,12 @@
-import { css as h, LitElement as g, nothing as r, html as n } from "lit";
-import { property as a, customElement as m } from "lit/decorators.js";
-import { h as u, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (l, s, o, c) => {
-  for (var i = c > 1 ? void 0 : c ? b(s, o) : s, p = l.length - 1, d; p >= 0; p--)
-    (d = l[p]) && (i = (c ? d(s, o, i) : d(i)) || i);
-  return c && i && v(s, o, i), i;
+import { css as g, LitElement as u, nothing as r, html as s } from "lit";
+import { property as a, customElement as h } from "lit/decorators.js";
+import { h as f, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (l, n, o, c) => {
+  for (var i = c > 1 ? void 0 : c ? b(n, o) : n, p = l.length - 1, d; p >= 0; p--)
+    (d = l[p]) && (i = (c ? d(n, o, i) : d(i)) || i);
+  return c && i && v(n, o, i), i;
 };
-let t = class extends g {
+let t = class extends u {
   constructor() {
     super(...arguments), this.value = 0, this.label = "", this.description = "", this.showValue = !1, this.formatValue = "", this.buffer = 0, this.minLabel = "", this.maxLabel = "", this.variant = "default", this.indeterminate = !1, this.size = "md", this.striped = !1, this.animated = !1;
   }
@@ -20,15 +20,15 @@ let t = class extends g {
     return this.formatValue ? this.formatValue : `${this._clampedValue}%`;
   }
   render() {
-    const l = this.label || this.description || (this.showValue || this.formatValue) && !this.indeterminate, s = this.minLabel || this.maxLabel, o = this.buffer > 0 && !this.indeterminate;
-    return n`
-      ${l ? n`
+    const l = this.label || this.description || (this.showValue || this.formatValue) && !this.indeterminate, n = this.minLabel || this.maxLabel, o = this.buffer > 0 && !this.indeterminate;
+    return s`
+      ${l ? s`
         <div class="header">
           <div class="header-left">
-            ${this.label ? n`<span class="label">${this.label}</span>` : r}
-            ${this.description ? n`<span class="description">${this.description}</span>` : r}
+            ${this.label ? s`<span class="label">${this.label}</span>` : r}
+            ${this.description ? s`<span class="description">${this.description}</span>` : r}
           </div>
-          ${(this.showValue || this.formatValue) && !this.indeterminate ? n`
+          ${(this.showValue || this.formatValue) && !this.indeterminate ? s`
             <span class="value-text">${this._displayValue}</span>
           ` : r}
         </div>
@@ -40,9 +40,10 @@ let t = class extends g {
         aria-valuemin="0"
         aria-valuemax="100"
         aria-label="${this.label || "Progress"}"
+        aria-valuetext=${this.formatValue && !this.indeterminate ? this.formatValue : r}
         aria-busy="${this.indeterminate}"
       >
-        ${o ? n`
+        ${o ? s`
           <div class="buffer" style="width: ${this._clampedBuffer}%"></div>
         ` : r}
         <div
@@ -50,7 +51,7 @@ let t = class extends g {
           style="${this.indeterminate ? "" : `width: ${this._clampedValue}%`}"
         ></div>
       </div>
-      ${s ? n`
+      ${n ? s`
         <div class="range-labels">
           <span>${this.minLabel}</span>
           <span>${this.maxLabel}</span>
@@ -59,7 +60,7 @@ let t = class extends g {
     `;
   }
 };
-t.styles = [u, f, h`
+t.styles = [f, m, g`
     :host {
       width: 100%;
     }
@@ -120,9 +121,12 @@ t.styles = [u, f, h`
       height: 100%;
       border-radius: var(--cg-component-progress-radius);
       background: var(--cg-color-loading-spinner-primary);
-      opacity: 0.25;
+      opacity: var(--cg-opacity-25);
       transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
     }
+    :host([variant="success"]) .buffer { background: var(--cg-color-status-success-text-default); }
+    :host([variant="warning"]) .buffer { background: var(--cg-color-status-warning-text-default); }
+    :host([variant="danger"]) .buffer { background: var(--cg-color-status-error-text-default); }
 
     /* ── Fill bar ── */
     .fill {
@@ -162,7 +166,7 @@ t.styles = [u, f, h`
         transparent 75%,
         transparent
       );
-      background-size: 20px 20px;
+      background-size: var(--cg-spacing-20) var(--cg-spacing-20);
     }
 
     /* ── Animated stripes ── */
@@ -172,7 +176,7 @@ t.styles = [u, f, h`
 
     @keyframes stripe-move {
       from { background-position: 0 0; }
-      to { background-position: 20px 0; }
+      to { background-position: var(--cg-spacing-20) 0; }
     }
 
     /* ── Indeterminate ── */
@@ -204,10 +208,6 @@ t.styles = [u, f, h`
 
     /* Reduced motion */
     @media (prefers-reduced-motion: reduce) {
-      .fill::before {
-        animation: none !important;
-        background: none !important;
-      }
       :host([animated]) .fill::after {
         animation: none !important;
       }
@@ -259,7 +259,7 @@ e([
   a({ type: Boolean, reflect: !0 })
 ], t.prototype, "animated", 2);
 t = e([
-  m("cg-progress-bar")
+  h("cg-progress-bar")
 ], t);
 export {
   t as CgProgressBar