@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,28 +1,33 @@
-import { css as v, LitElement as u, nothing as i, html as s } from "lit";
-import { property as t, state as p, customElement as m } from "lit/decorators.js";
-import { c as h, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-import { F as b } from "../../chunks/focus-trap-BdRNhSPD.js";
-var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, n, l, c) => {
-  for (var r = c > 1 ? void 0 : c ? x(n, l) : n, d = e.length - 1, g; d >= 0; d--)
-    (g = e[d]) && (r = (c ? g(n, l, r) : g(r)) || r);
-  return c && r && y(n, l, r), r;
+import { css as u, LitElement as v, nothing as t, html as s } from "lit";
+import { property as r, state as p, customElement as h } from "lit/decorators.js";
+import { c as m, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+import { F as b } from "../../chunks/focus-trap-vlQwKK-3.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (o, i, l, c) => {
+  for (var n = c > 1 ? void 0 : c ? x(i, l) : i, d = o.length - 1, g; d >= 0; d--)
+    (g = o[d]) && (n = (c ? g(i, l, n) : g(n)) || n);
+  return c && n && y(i, l, n), n;
 };
-let o = class extends u {
+let a = class extends v {
   constructor() {
     super(...arguments), this.open = !1, this.title = "", this.icon = "", this.size = "md", this.rounded = "lg", this.closable = !0, this.persistent = !1, this.loading = !1, this.error = "", this._hasFooter = !1, this._closing = !1, this._previousOverflow = "", this._focusTrap = new b();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.open && (document.body.style.overflow = this._previousOverflow || ""), this._focusTrap.deactivate();
   }
-  updated(e) {
-    e.has("open") && (this.open ? this._onOpen() : (e.get("open") === !0 && (this._closing = !0, setTimeout(() => {
-      this._closing = !1;
-    }, 150)), this._onClose()));
+  updated(o) {
+    if (o.has("open")) {
+      if (o.get("open") === void 0 && !this.open) return;
+      this.open ? this._onOpen() : (o.get("open") === !0 && (this._closing = !0, this.shadowRoot?.querySelector(".modal")?.addEventListener("animationend", () => {
+        this._closing = !1;
+      }, { once: !0 }), setTimeout(() => {
+        this._closing = !1;
+      }, 300)), this._onClose());
+    }
   }
   _onOpen() {
     this._previousOverflow = document.body.style.overflow, document.body.style.overflow = "hidden", this.dispatchEvent(new CustomEvent("cg-modal-open", { bubbles: !0, composed: !0 }));
-    const e = this.shadowRoot?.querySelector(".modal-container");
-    e && this._focusTrap.activate(e, {
+    const o = this.shadowRoot?.querySelector(".modal-container");
+    o && this._focusTrap.activate(o, {
       returnFocus: !0,
       handleEscape: this.closable,
       onEscape: () => this._requestClose()
@@ -34,27 +39,31 @@ let o = class extends u {
   _handleBackdropClick() {
     !this.persistent && this.closable && this._requestClose();
   }
+  /** The container covers the backdrop (higher z-index), so outside-clicks
+   *  land here — only dismiss when the click is on the container itself. */
+  _handleContainerClick(o) {
+    o.target === o.currentTarget && this._handleBackdropClick();
+  }
   _requestClose() {
     this.open = !1;
   }
-  _handleFooterSlotChange(e) {
-    const n = e.target;
-    this._hasFooter = n.assignedNodes({ flatten: !0 }).length > 0;
+  _handleFooterSlotChange(o) {
+    const i = o.target;
+    this._hasFooter = i.assignedNodes({ flatten: !0 }).length > 0;
   }
   render() {
     return s`
       <div
         class="backdrop ${this._closing ? "closing" : ""}"
-        @click="${this._handleBackdropClick}"
         aria-hidden="true"
       ></div>
-      <div class="modal-container">
+      <div class="modal-container" @click="${this._handleContainerClick}">
         <div
           class="modal ${this._closing ? "closing" : ""}"
           role="dialog"
           aria-modal="true"
-          aria-label="${this.title ? i : "Dialog"}"
-          aria-labelledby="${this.title ? "modal-title" : i}"
+          aria-label="${this.title ? t : "Dialog"}"
+          aria-labelledby="${this.title ? "modal-title" : t}"
           tabindex="-1"
         >
           ${this.title || this.closable || this.icon ? s`
@@ -64,8 +73,8 @@ let o = class extends u {
                   <div class="modal-icon">
                     <slot name="icon"><cg-icon name="${this.icon}" size="md"></cg-icon></slot>
                   </div>
-                ` : i}
-                <h2 class="modal-title" id="modal-title">${this.title}</h2>
+                ` : t}
+                ${this.title ? s`<h2 class="modal-title" id="modal-title">${this.title}</h2>` : t}
               </div>
               ${this.closable ? s`
                 <button
@@ -75,25 +84,25 @@ let o = class extends u {
                 >
                   <cg-icon name="x" size="xs"></cg-icon>
                 </button>
-              ` : i}
+              ` : t}
             </div>
-          ` : i}
+          ` : t}
 
           ${this.error ? s`
             <div class="modal-error-banner" role="alert">
               <cg-icon class="modal-error-icon" name="warning" size="sm" color="danger"></cg-icon>
               <span>${this.error}</span>
             </div>
-          ` : i}
+          ` : t}
 
-          <div class="modal-body">
+          <div class="modal-body" aria-busy="${this.loading ? "true" : t}">
             <slot></slot>
             ${this.loading ? s`
-              <div class="modal-loading-overlay" aria-busy="true" aria-label="Loading">
+              <div class="modal-loading-overlay" role="status" aria-live="polite">
                 <span class="modal-spinner"></span>
                 <span class="modal-loading-text">Loading...</span>
               </div>
-            ` : i}
+            ` : t}
           </div>
 
           <div class="modal-footer" ?hidden=${!this._hasFooter}>
@@ -104,9 +113,8 @@ let o = class extends u {
     `;
   }
 };
-o.styles = [h, f, v`
+a.styles = [m, f, u`
     :host {
-      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       display: contents;
       font-family: var(--cg-font-family-primary);
     }
@@ -188,7 +196,7 @@ o.styles = [h, f, v`
     @media (prefers-reduced-motion: reduce) {
       .backdrop,
       .modal {
-        transition: opacity var(--cg-transition-duration-fast) ease;
+        transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       }
       .modal {
         transform: scale(1) !important;
@@ -225,7 +233,7 @@ o.styles = [h, f, v`
       width: var(--cg-spacing-40);
       height: var(--cg-spacing-40);
       border-radius: var(--cg-border-radius-100);
-      background: var(--cg-color-action-tertiary-background-hover);
+      background: var(--cg-color-accent-background);
       color: var(--cg-color-accent-text);
       font-size: var(--cg-icon-size-200);
     }
@@ -251,7 +259,7 @@ o.styles = [h, f, v`
       height: var(--cg-spacing-32);
       border: none;
       border-radius: var(--cg-border-radius-full);
-      background: var(--cg-color-action-tertiary-background-hover);
+      background: var(--cg-color-action-tertiary-background-default);
       color: var(--cg-color-surface-container-outlined);
       cursor: pointer;
       font-size: var(--cg-font-size-sm);
@@ -265,18 +273,19 @@ o.styles = [h, f, v`
     }
 
     .close-btn:hover {
-      background: var(--cg-color-action-secondary-background-hover);
+      background: var(--cg-color-action-tertiary-background-hover);
       color: var(--cg-color-surface-container-text);
     }
 
     .close-btn:active {
+      background: var(--cg-color-action-tertiary-background-active);
       transform: scale(var(--cg-interaction-press-scale));
     }
 
     .close-btn:focus-visible {
       box-shadow:
-        0 0 0 2px var(--cg-color-focus-ring-offset),
-        0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
       outline: none;
     }
 
@@ -304,16 +313,6 @@ o.styles = [h, f, v`
       gap: var(--cg-spacing-12);
     }
 
-    .modal-footer:empty,
-    .modal-footer ::slotted(:empty) {
-      display: none;
-    }
-
-    /* Hidden state for footer slot check */
-    .footer-wrapper {
-      display: contents;
-    }
-
     /* Rounded variants */
     :host([rounded="none"]) .modal { border-radius: 0; }
     :host([rounded="sm"]) .modal { border-radius: var(--cg-border-radius-100); }
@@ -367,43 +366,43 @@ o.styles = [h, f, v`
       font-size: var(--cg-font-size-md);
     }
   `];
-a([
-  t({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
-a([
-  t({ type: String })
-], o.prototype, "title", 2);
-a([
-  t({ type: String })
-], o.prototype, "icon", 2);
-a([
-  t({ type: String, reflect: !0 })
-], o.prototype, "size", 2);
-a([
-  t({ reflect: !0 })
-], o.prototype, "rounded", 2);
-a([
-  t({ type: Boolean })
-], o.prototype, "closable", 2);
-a([
-  t({ type: Boolean })
-], o.prototype, "persistent", 2);
-a([
-  t({ type: Boolean, reflect: !0 })
-], o.prototype, "loading", 2);
-a([
-  t({ type: String })
-], o.prototype, "error", 2);
-a([
+e([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "open", 2);
+e([
+  r({ type: String })
+], a.prototype, "title", 2);
+e([
+  r({ type: String })
+], a.prototype, "icon", 2);
+e([
+  r({ type: String, reflect: !0 })
+], a.prototype, "size", 2);
+e([
+  r({ reflect: !0 })
+], a.prototype, "rounded", 2);
+e([
+  r({ type: Boolean })
+], a.prototype, "closable", 2);
+e([
+  r({ type: Boolean })
+], a.prototype, "persistent", 2);
+e([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "loading", 2);
+e([
+  r({ type: String })
+], a.prototype, "error", 2);
+e([
   p()
-], o.prototype, "_hasFooter", 2);
-a([
+], a.prototype, "_hasFooter", 2);
+e([
   p()
-], o.prototype, "_closing", 2);
-o = a([
-  m("cg-modal")
-], o);
+], a.prototype, "_closing", 2);
+a = e([
+  h("cg-modal")
+], a);
 export {
-  o as CgModal
+  a as CgModal
 };
 //# sourceMappingURL=cg-modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cg-modal.js","sources":["../../../src/components/cg-modal/cg-modal.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { spinKeyframes, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-modal\n * Modal dialog with backdrop blur, scale animation, focus trap, and scroll lock.\n *\n * @example\n * ```html\n * <cg-modal title=\"Confirm\" open size=\"sm\">\n *   <p>Are you sure?</p>\n *   <div slot=\"footer\"><cg-button>OK</cg-button></div>\n * </cg-modal>\n * ```\n *\n * @slot - Default slot for modal body content\n * @slot icon - Icon displayed above the title\n * @slot footer - Action buttons area below the body\n *\n * @fires {CustomEvent} cg-modal-open - When the modal opens\n * @fires {CustomEvent} cg-modal-close - When the modal closes\n *\n * @cssprop --cg-color-modal-container-background - Modal background\n * @cssprop --cg-component-modal-radius - Modal border radius\n * @cssprop --cg-transition-easing-ease-out - Open animation easing\n * @cssprop --cg-color-focus-ring - Close button focus ring\n */\n@customElement('cg-modal')\nexport class CgModal extends LitElement {\n  static override styles = [spinKeyframes, reducedMotion, css`\n    :host {\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: contents;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: var(--cg-z-index-500);\n      background: var(--cg-color-modal-overlay-background);\n      backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .modal-container {\n      position: fixed;\n      inset: 0;\n      z-index: var(--cg-z-index-top);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--cg-spacing-16);\n      pointer-events: none;\n    }\n\n    :host([open]) .modal-container {\n      pointer-events: auto;\n    }\n\n    .modal {\n      position: relative;\n      isolation: isolate;\n      display: flex;\n      flex-direction: column;\n      max-height: calc(100vh - var(--cg-spacing-48) * 2);\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-modal-radius);\n      box-shadow: var(--cg-elevation-4);\n      overflow: hidden;\n\n      /* Animation */\n      opacity: 0;\n      transform: scale(0.95);\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n    }\n\n    :host([open]) .modal {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    /* ── Closing animation ── */\n    @keyframes modal-exit {\n      from { opacity: 1; transform: scale(1); }\n      to { opacity: 0; transform: scale(0.95); }\n    }\n    @keyframes backdrop-exit {\n      from { opacity: 1; }\n      to { opacity: 0; }\n    }\n    .modal.closing {\n      animation: modal-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n    .backdrop.closing {\n      pointer-events: auto;\n      animation: backdrop-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .backdrop,\n      .modal {\n        transition: opacity var(--cg-transition-duration-fast) ease;\n      }\n      .modal {\n        transform: scale(1) !important;\n      }\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .modal { width: var(--cg-component-modal-width-sm); max-width: 100%; }\n    :host([size=\"md\"]) .modal { width: var(--cg-component-modal-width-md); max-width: 100%; }\n    :host([size=\"lg\"]) .modal { width: var(--cg-component-modal-width-lg); max-width: 100%; }\n    :host([size=\"xl\"]) .modal { width: var(--cg-component-modal-width-xl); max-width: 100%; }\n\n    /* ── Header ── */\n    .modal-header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      padding: var(--cg-spacing-24) var(--cg-spacing-24) var(--cg-spacing-4);\n      flex-shrink: 0;\n    }\n\n    .modal-header-content {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      flex: 1;\n      min-width: 0;\n    }\n\n    .modal-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-accent-text);\n      font-size: var(--cg-icon-size-200);\n    }\n\n    .modal-title {\n      font-size: var(--cg-font-size-md);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-modal-header-text);\n      margin: 0;\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* When no icon — align title with close button */\n    .modal-header-content:not(:has(.modal-icon)) .modal-title {\n      padding-top: var(--cg-spacing-4);\n    }\n\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      font-size: var(--cg-font-size-sm);\n      line-height: 1;\n      padding: 0;\n      flex-shrink: 0;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .close-btn:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n      color: var(--cg-color-surface-container-text);\n    }\n\n    .close-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    .close-btn:focus-visible {\n      box-shadow:\n        0 0 0 2px var(--cg-color-focus-ring-offset),\n        0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);\n      outline: none;\n    }\n\n    /* ── Body ── */\n    .modal-body {\n      position: relative;\n      padding: var(--cg-spacing-16) var(--cg-spacing-24) var(--cg-spacing-24);\n      overflow-y: auto;\n      flex: 1;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n    }\n\n    /* ── Footer ── */\n    .modal-footer {\n      padding: var(--cg-spacing-12) var(--cg-spacing-24) var(--cg-spacing-24);\n      flex-shrink: 0;\n    }\n\n    .modal-footer ::slotted(*) {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: var(--cg-spacing-12);\n    }\n\n    .modal-footer:empty,\n    .modal-footer ::slotted(:empty) {\n      display: none;\n    }\n\n    /* Hidden state for footer slot check */\n    .footer-wrapper {\n      display: contents;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .modal { border-radius: 0; }\n    :host([rounded=\"sm\"]) .modal { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) .modal { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"lg\"]) .modal { border-radius: var(--cg-component-modal-radius); }\n    :host([rounded=\"full\"]) .modal { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Loading overlay ── */\n    .modal-loading-overlay {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-12);\n      background: var(--cg-color-modal-container-background);\n      border-radius: inherit;\n    }\n    .modal-spinner {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);\n      border-top-color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    .modal-loading-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* ── Error banner ── */\n    .modal-error-banner {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      margin: 0 var(--cg-spacing-24);\n      margin-top: var(--cg-spacing-16);\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-snug);\n    }\n    .modal-error-icon {\n      flex-shrink: 0;\n      font-size: var(--cg-font-size-md);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String }) override title = '';\n  @property({ type: String }) icon = '';\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Boolean }) closable = true;\n  @property({ type: Boolean }) persistent = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: String }) error = '';\n\n  @state() private _hasFooter = false;\n  @state() private _closing = false;\n\n  private _previousOverflow = '';\n  private _focusTrap = new FocusTrap();\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    // Always restore body scroll if destroyed while open\n    if (this.open) {\n      document.body.style.overflow = this._previousOverflow || '';\n    }\n    this._focusTrap.deactivate();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('open')) {\n      if (this.open) {\n        this._onOpen();\n      } else {\n        if (changed.get('open') === true) {\n          this._closing = true;\n          setTimeout(() => { this._closing = false; }, 150);\n        }\n        this._onClose();\n      }\n    }\n  }\n\n  private _onOpen() {\n    this._previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n\n    this.dispatchEvent(new CustomEvent('cg-modal-open', { bubbles: true, composed: true }));\n\n    const container = this.shadowRoot?.querySelector<HTMLElement>('.modal-container');\n    if (container) {\n      this._focusTrap.activate(container, {\n        returnFocus: true,\n        handleEscape: this.closable,\n        onEscape: () => this._requestClose(),\n      });\n    }\n  }\n\n  private _onClose() {\n    document.body.style.overflow = this._previousOverflow;\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-modal-close', { bubbles: true, composed: true }));\n  }\n\n  private _handleBackdropClick() {\n    if (!this.persistent && this.closable) {\n      this._requestClose();\n    }\n  }\n\n  private _requestClose() {\n    this.open = false;\n  }\n\n  private _handleFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"backdrop ${this._closing ? 'closing' : ''}\"\n        @click=\"${this._handleBackdropClick}\"\n        aria-hidden=\"true\"\n      ></div>\n      <div class=\"modal-container\">\n        <div\n          class=\"modal ${this._closing ? 'closing' : ''}\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"${this.title ? nothing : 'Dialog'}\"\n          aria-labelledby=\"${this.title ? 'modal-title' : nothing}\"\n          tabindex=\"-1\"\n        >\n          ${this.title || this.closable || this.icon ? html`\n            <div class=\"modal-header\">\n              <div class=\"modal-header-content\">\n                ${this.icon ? html`\n                  <div class=\"modal-icon\">\n                    <slot name=\"icon\"><cg-icon name=\"${this.icon}\" size=\"md\"></cg-icon></slot>\n                  </div>\n                ` : nothing}\n                <h2 class=\"modal-title\" id=\"modal-title\">${this.title}</h2>\n              </div>\n              ${this.closable ? html`\n                <button\n                  class=\"close-btn\"\n                  aria-label=\"Close dialog\"\n                  @click=\"${this._requestClose}\"\n                >\n                  <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n                </button>\n              ` : nothing}\n            </div>\n          ` : nothing}\n\n          ${this.error ? html`\n            <div class=\"modal-error-banner\" role=\"alert\">\n              <cg-icon class=\"modal-error-icon\" name=\"warning\" size=\"sm\" color=\"danger\"></cg-icon>\n              <span>${this.error}</span>\n            </div>\n          ` : nothing}\n\n          <div class=\"modal-body\">\n            <slot></slot>\n            ${this.loading ? html`\n              <div class=\"modal-loading-overlay\" aria-busy=\"true\" aria-label=\"Loading\">\n                <span class=\"modal-spinner\"></span>\n                <span class=\"modal-loading-text\">Loading...</span>\n              </div>\n            ` : nothing}\n          </div>\n\n          <div class=\"modal-footer\" ?hidden=${!this._hasFooter}>\n            <slot name=\"footer\" @slotchange=\"${this._handleFooterSlotChange}\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-modal': CgModal;\n  }\n}\n"],"names":["CgModal","LitElement","FocusTrap","changed","container","slot","html","nothing","spinKeyframes","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-modal.js","sources":["../../../src/components/cg-modal/cg-modal.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { spinKeyframes, reducedMotion } from '../../styles/index.js';\nimport { FocusTrap } from '../../utils/focus-trap.js';\n\n/**\n * @element cg-modal\n * Modal dialog with backdrop blur, scale animation, focus trap, and scroll lock.\n *\n * @example\n * ```html\n * <cg-modal title=\"Confirm\" open size=\"sm\">\n *   <p>Are you sure?</p>\n *   <div slot=\"footer\"><cg-button>OK</cg-button></div>\n * </cg-modal>\n * ```\n *\n * @slot - Default slot for modal body content\n * @slot icon - Icon displayed above the title\n * @slot footer - Action buttons area below the body\n *\n * @fires {CustomEvent} cg-modal-open - When the modal opens\n * @fires {CustomEvent} cg-modal-close - When the modal closes\n *\n * @cssprop --cg-color-modal-container-background - Modal background\n * @cssprop --cg-component-modal-radius - Modal border radius\n * @cssprop --cg-transition-easing-ease-out - Open animation easing\n * @cssprop --cg-color-focus-ring - Close button focus ring\n */\n@customElement('cg-modal')\nexport class CgModal extends LitElement {\n  static override styles = [spinKeyframes, reducedMotion, css`\n    :host {\n      display: contents;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .backdrop {\n      position: fixed;\n      inset: 0;\n      z-index: var(--cg-z-index-500);\n      background: var(--cg-color-modal-overlay-background);\n      backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([open]) .backdrop {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .modal-container {\n      position: fixed;\n      inset: 0;\n      z-index: var(--cg-z-index-top);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--cg-spacing-16);\n      pointer-events: none;\n    }\n\n    :host([open]) .modal-container {\n      pointer-events: auto;\n    }\n\n    .modal {\n      position: relative;\n      isolation: isolate;\n      display: flex;\n      flex-direction: column;\n      max-height: calc(100vh - var(--cg-spacing-48) * 2);\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-modal-radius);\n      box-shadow: var(--cg-elevation-4);\n      overflow: hidden;\n\n      /* Animation */\n      opacity: 0;\n      transform: scale(0.95);\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n    }\n\n    :host([open]) .modal {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    /* ── Closing animation ── */\n    @keyframes modal-exit {\n      from { opacity: 1; transform: scale(1); }\n      to { opacity: 0; transform: scale(0.95); }\n    }\n    @keyframes backdrop-exit {\n      from { opacity: 1; }\n      to { opacity: 0; }\n    }\n    .modal.closing {\n      animation: modal-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n    .backdrop.closing {\n      pointer-events: auto;\n      animation: backdrop-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .backdrop,\n      .modal {\n        transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      }\n      .modal {\n        transform: scale(1) !important;\n      }\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .modal { width: var(--cg-component-modal-width-sm); max-width: 100%; }\n    :host([size=\"md\"]) .modal { width: var(--cg-component-modal-width-md); max-width: 100%; }\n    :host([size=\"lg\"]) .modal { width: var(--cg-component-modal-width-lg); max-width: 100%; }\n    :host([size=\"xl\"]) .modal { width: var(--cg-component-modal-width-xl); max-width: 100%; }\n\n    /* ── Header ── */\n    .modal-header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      padding: var(--cg-spacing-24) var(--cg-spacing-24) var(--cg-spacing-4);\n      flex-shrink: 0;\n    }\n\n    .modal-header-content {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      flex: 1;\n      min-width: 0;\n    }\n\n    .modal-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-accent-background);\n      color: var(--cg-color-accent-text);\n      font-size: var(--cg-icon-size-200);\n    }\n\n    .modal-title {\n      font-size: var(--cg-font-size-md);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-modal-header-text);\n      margin: 0;\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* When no icon — align title with close button */\n    .modal-header-content:not(:has(.modal-icon)) .modal-title {\n      padding-top: var(--cg-spacing-4);\n    }\n\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-tertiary-background-default);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      font-size: var(--cg-font-size-sm);\n      line-height: 1;\n      padding: 0;\n      flex-shrink: 0;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .close-btn:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-container-text);\n    }\n\n    .close-btn:active {\n      background: var(--cg-color-action-tertiary-background-active);\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    .close-btn:focus-visible {\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n      outline: none;\n    }\n\n    /* ── Body ── */\n    .modal-body {\n      position: relative;\n      padding: var(--cg-spacing-16) var(--cg-spacing-24) var(--cg-spacing-24);\n      overflow-y: auto;\n      flex: 1;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n    }\n\n    /* ── Footer ── */\n    .modal-footer {\n      padding: var(--cg-spacing-12) var(--cg-spacing-24) var(--cg-spacing-24);\n      flex-shrink: 0;\n    }\n\n    .modal-footer ::slotted(*) {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: var(--cg-spacing-12);\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .modal { border-radius: 0; }\n    :host([rounded=\"sm\"]) .modal { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) .modal { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"lg\"]) .modal { border-radius: var(--cg-component-modal-radius); }\n    :host([rounded=\"full\"]) .modal { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Loading overlay ── */\n    .modal-loading-overlay {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-12);\n      background: var(--cg-color-modal-container-background);\n      border-radius: inherit;\n    }\n    .modal-spinner {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);\n      border-top-color: var(--cg-color-surface-container-text);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    .modal-loading-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* ── Error banner ── */\n    .modal-error-banner {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      margin: 0 var(--cg-spacing-24);\n      margin-top: var(--cg-spacing-16);\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-snug);\n    }\n    .modal-error-icon {\n      flex-shrink: 0;\n      font-size: var(--cg-font-size-md);\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String }) override title = '';\n  @property({ type: String }) icon = '';\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Boolean }) closable = true;\n  @property({ type: Boolean }) persistent = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: String }) error = '';\n\n  @state() private _hasFooter = false;\n  @state() private _closing = false;\n\n  private _previousOverflow = '';\n  private _focusTrap = new FocusTrap();\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    // Always restore body scroll if destroyed while open\n    if (this.open) {\n      document.body.style.overflow = this._previousOverflow || '';\n    }\n    this._focusTrap.deactivate();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('open')) {\n      // First render with open=false is NOT a close — don't fire a spurious\n      // cg-modal-close or clobber document.body.style.overflow on mount.\n      if (changed.get('open') === undefined && !this.open) return;\n      if (this.open) {\n        this._onOpen();\n      } else {\n        if (changed.get('open') === true) {\n          this._closing = true;\n          // Clear when the exit animation actually ends; the timeout stays\n          // only as a reduced-motion / detached-node fallback.\n          const modal = this.shadowRoot?.querySelector('.modal');\n          modal?.addEventListener('animationend', () => { this._closing = false; }, { once: true });\n          setTimeout(() => { this._closing = false; }, 300);\n        }\n        this._onClose();\n      }\n    }\n  }\n\n  private _onOpen() {\n    this._previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n\n    this.dispatchEvent(new CustomEvent('cg-modal-open', { bubbles: true, composed: true }));\n\n    const container = this.shadowRoot?.querySelector<HTMLElement>('.modal-container');\n    if (container) {\n      this._focusTrap.activate(container, {\n        returnFocus: true,\n        handleEscape: this.closable,\n        onEscape: () => this._requestClose(),\n      });\n    }\n  }\n\n  private _onClose() {\n    document.body.style.overflow = this._previousOverflow;\n    this._focusTrap.deactivate();\n    this.dispatchEvent(new CustomEvent('cg-modal-close', { bubbles: true, composed: true }));\n  }\n\n  private _handleBackdropClick() {\n    if (!this.persistent && this.closable) {\n      this._requestClose();\n    }\n  }\n\n  /** The container covers the backdrop (higher z-index), so outside-clicks\n   *  land here — only dismiss when the click is on the container itself. */\n  private _handleContainerClick(e: MouseEvent) {\n    if (e.target === e.currentTarget) this._handleBackdropClick();\n  }\n\n  private _requestClose() {\n    this.open = false;\n  }\n\n  private _handleFooterSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"backdrop ${this._closing ? 'closing' : ''}\"\n        aria-hidden=\"true\"\n      ></div>\n      <div class=\"modal-container\" @click=\"${this._handleContainerClick}\">\n        <div\n          class=\"modal ${this._closing ? 'closing' : ''}\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"${this.title ? nothing : 'Dialog'}\"\n          aria-labelledby=\"${this.title ? 'modal-title' : nothing}\"\n          tabindex=\"-1\"\n        >\n          ${this.title || this.closable || this.icon ? html`\n            <div class=\"modal-header\">\n              <div class=\"modal-header-content\">\n                ${this.icon ? html`\n                  <div class=\"modal-icon\">\n                    <slot name=\"icon\"><cg-icon name=\"${this.icon}\" size=\"md\"></cg-icon></slot>\n                  </div>\n                ` : nothing}\n                ${this.title ? html`<h2 class=\"modal-title\" id=\"modal-title\">${this.title}</h2>` : nothing}\n              </div>\n              ${this.closable ? html`\n                <button\n                  class=\"close-btn\"\n                  aria-label=\"Close dialog\"\n                  @click=\"${this._requestClose}\"\n                >\n                  <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n                </button>\n              ` : nothing}\n            </div>\n          ` : nothing}\n\n          ${this.error ? html`\n            <div class=\"modal-error-banner\" role=\"alert\">\n              <cg-icon class=\"modal-error-icon\" name=\"warning\" size=\"sm\" color=\"danger\"></cg-icon>\n              <span>${this.error}</span>\n            </div>\n          ` : nothing}\n\n          <div class=\"modal-body\" aria-busy=\"${this.loading ? 'true' : nothing}\">\n            <slot></slot>\n            ${this.loading ? html`\n              <div class=\"modal-loading-overlay\" role=\"status\" aria-live=\"polite\">\n                <span class=\"modal-spinner\"></span>\n                <span class=\"modal-loading-text\">Loading...</span>\n              </div>\n            ` : nothing}\n          </div>\n\n          <div class=\"modal-footer\" ?hidden=${!this._hasFooter}>\n            <slot name=\"footer\" @slotchange=\"${this._handleFooterSlotChange}\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-modal': CgModal;\n  }\n}\n"],"names":["CgModal","LitElement","FocusTrap","changed","container","e","slot","html","nothing","spinKeyframes","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4PvD;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/P/Bb,EA+PiC,WAAA,QAAA,CAAA;AACPY,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhQfb,EAgQ0B,WAAA,SAAA,CAAA;AACTY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjQfb,EAiQiB,WAAA,QAAA,CAAA;AACeY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlQ9Bb,EAkQgC,WAAA,QAAA,CAAA;AACdY,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnQhBb,EAmQkB,WAAA,WAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GApQhBb,EAoQkB,WAAA,YAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GArQhBb,EAqQkB,WAAA,cAAA,CAAA;AACeY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtQ/Bb,EAsQiC,WAAA,WAAA,CAAA;AAChBY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvQfb,EAuQiB,WAAA,SAAA,CAAA;AAEXY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAzQId,EAyQM,WAAA,cAAA,CAAA;AACAY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA1QId,EA0QM,WAAA,YAAA,CAAA;AA1QNA,IAANY,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZf,CAAA;"}

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

@@ -42,7 +42,7 @@ export interface NavItem {
  * ```
  *
  * @slot brand - Brand area (leftmost). Logo + name.
- * @slot center - Optional center content (search, breadcrumbs). Hidden below mobileBreakpoint.
+ * @slot center - Optional center content (search, breadcrumbs). Hidden below 768px.
  * @slot end - Right region for actions, profile, theme toggle.
  * @slot mobile-menu - Optional override for the mobile panel content.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"cg-navbar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-navbar/cg-navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,MAAM,WAAW,OAAO;IACtB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAkSnB;IAIwB,KAAK,EAAE,OAAO,EAAE,CAAM;IACrC,MAAM,SAAM;IACK,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAW;IACnC,MAAM,UAAS;IACf,QAAQ,UAAS;IACe,eAAe,UAAS;IAC9B,UAAU,UAAS;IAC7E,SAAS,SAAM;IAIlB,OAAO,CAAC,SAAS,CAAS;IAElB,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC3B,OAAO,CAAC,YAAY,CAAC,CAAc;IAC1C,OAAO,CAAC,MAAM,CAAC,CAAc;IAE3C,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,SAAS,CAOf;IACF,OAAO,CAAC,WAAW,CAGjB;IACF,OAAO,CAAC,UAAU,CAIhB;IAIO,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAS5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,YAAY,IAAI,IAAI;IAM7B,eAAe,IAAI,IAAI;IAUvB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,cAAc;IA+BtB,OAAO,CAAC,WAAW;IA0BV,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"cg-navbar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-navbar/cg-navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,MAAM,WAAW,OAAO;IACtB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA6SnB;IAIwB,KAAK,EAAE,OAAO,EAAE,CAAM;IACrC,MAAM,SAAM;IACK,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAW;IACnC,MAAM,UAAS;IACf,QAAQ,UAAS;IACe,eAAe,UAAS;IAC9B,UAAU,UAAS;IAC7E,SAAS,SAAM;IAIlB,OAAO,CAAC,SAAS,CAAS;IAElB,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC3B,OAAO,CAAC,YAAY,CAAC,CAAc;IAC1C,OAAO,CAAC,MAAM,CAAC,CAAc;IAE3C,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,SAAS,CAOf;IACF,OAAO,CAAC,WAAW,CAGjB;IACF,OAAO,CAAC,UAAU,CAQhB;IAIO,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAS5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,YAAY,IAAI,IAAI;IAM7B,eAAe,IAAI,IAAI;IAUvB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,cAAc;IA8BtB,OAAO,CAAC,WAAW;IA0BV,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -1,12 +1,12 @@
-import { css as u, LitElement as p, nothing as g, html as l } from "lit";
-import { property as d, state as b, query as v, customElement as f } from "lit/decorators.js";
-import { h, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { css as u, LitElement as b, nothing as d, html as l } from "lit";
+import { property as g, state as p, query as v, customElement as f } from "lit/decorators.js";
+import { h, r as m } from "../../chunks/premium.css-DHekUEUt.js";
 var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, a, t, s) => {
-  for (var r = s > 1 ? void 0 : s ? w(a, t) : a, i = e.length - 1, c; i >= 0; i--)
-    (c = e[i]) && (r = (s ? c(a, t, r) : c(r)) || r);
+  for (var r = s > 1 ? void 0 : s ? w(a, t) : a, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (r = (s ? c(a, t, r) : c(r)) || r);
   return s && r && y(a, t, r), r;
 };
-let o = class extends p {
+let i = class extends b {
   constructor() {
     super(...arguments), this.items = [], this.active = "", this.variant = "solid", this.sticky = !1, this.bordered = !1, this.compactOnScroll = !1, this.mobileOpen = !1, this.brandHref = "", this._scrolled = !1, this._resizeObserver = null, this._onScroll = () => {
       if (!this.compactOnScroll) return;
@@ -15,7 +15,7 @@ let o = class extends p {
     }, this._onDocClick = (e) => {
       this.mobileOpen && (e.composedPath().includes(this) || this.closeMobileMenu());
     }, this._onKeydown = (e) => {
-      e.key === "Escape" && this.mobileOpen && this.closeMobileMenu();
+      e.key === "Escape" && this.mobileOpen && (this.closeMobileMenu(), this.updateComplete.then(() => this.renderRoot.querySelector(".menu-btn")?.focus()));
     };
   }
   // ─── Lifecycle ──────────────────────────────────────────────────
@@ -70,36 +70,34 @@ let o = class extends p {
     }));
   }
   _onItemKeydown(e, a) {
-    const t = this.items.map((i, c) => ({ it: i, i: c })).filter(({ it: i }) => !i.disabled), s = t.findIndex(({ i }) => i === a);
+    const t = this.items.map((o, c) => ({ it: o, i: c })).filter(({ it: o }) => !o.disabled), s = t.findIndex(({ i: o }) => o === a);
     let r = s;
     if (e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), r = (s - 1 + t.length) % t.length) : e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), r = (s + 1) % t.length) : e.key === "Home" ? (e.preventDefault(), r = 0) : e.key === "End" && (e.preventDefault(), r = t.length - 1), r !== s) {
-      const i = t[r];
-      i && (this._selectItem(i.it, e), this.updateComplete.then(() => {
-        this._itemsEl?.querySelectorAll(".item")?.[i.i]?.focus();
-      }));
+      const o = t[r];
+      o && this._itemsEl?.querySelectorAll(".item")?.[o.i]?.focus();
     }
   }
   // ─── Render helpers ─────────────────────────────────────────────
   _renderItem(e, a, t = !1) {
-    const s = e.value === this.active, r = t ? "mobile-item" : "item", i = t ? `--idx:${a};animation-delay:calc(${a} * 50ms);` : "";
+    const s = e.value === this.active, r = t ? "mobile-item" : "item", o = t ? `animation-delay:calc(${a} * var(--cg-transition-duration-fast) / 2);` : "";
     return l`
       <a
         class=${r}
         href=${e.href}
-        target=${e.external ? "_blank" : g}
-        rel=${e.external ? "noopener noreferrer" : g}
-        role=${t ? "menuitem" : "tab"}
+        target=${e.external ? "_blank" : d}
+        rel=${e.external ? "noopener noreferrer" : d}
+        role=${t ? d : "tab"}
         aria-selected=${s ? "true" : "false"}
         aria-disabled=${e.disabled ? "true" : "false"}
         tabindex=${s || t ? "0" : "-1"}
-        style=${i}
+        style=${o}
         @click=${(c) => this._selectItem(e, c)}
         @keydown=${(c) => !t && this._onItemKeydown(c, a)}
       >
-        ${e.icon ? l`<span class="item-icon" aria-hidden="true" .innerHTML=${e.icon}></span>` : g}
+        ${e.icon ? l`<span class="item-icon" aria-hidden="true" .innerHTML=${e.icon}></span>` : d}
         <span>${e.label}</span>
-        ${e.badge ? l`<span class="item-badge">${e.badge}</span>` : g}
-        ${e.kbd ? l`<span class="item-kbd">${e.kbd}</span>` : g}
+        ${e.badge ? l`<span class="item-badge">${e.badge}</span>` : d}
+        ${e.kbd ? l`<span class="item-kbd">${e.kbd}</span>` : d}
       </a>
     `;
   }
@@ -113,7 +111,7 @@ let o = class extends p {
             <span class="indicator" data-ready="false"></span>
             ${this.items.map((a, t) => this._renderItem(a, t, !1))}
           </div>
-        ` : g}
+        ` : d}
         <div class="center"><slot name="center"></slot></div>
         <div class="end">
           <slot name="end"></slot>
@@ -128,16 +126,16 @@ let o = class extends p {
             ${this.mobileOpen ? l`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>` : l`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12h18M3 6h18M3 18h18"/></svg>`}
           </button>
         </div>
-        <div id="cg-navbar-mobile-panel" class="mobile-panel" role="menu">
+        <div id="cg-navbar-mobile-panel" class="mobile-panel">
           <slot name="mobile-menu">
-            ${e ? this.items.map((a, t) => this._renderItem(a, t, !0)) : g}
+            ${e ? this.items.map((a, t) => this._renderItem(a, t, !0)) : d}
           </slot>
         </div>
       </nav>
     `;
   }
 };
-o.styles = [h, m, u`
+i.styles = [h, m, u`
     :host {
       display: block;
       width: 100%;
@@ -179,8 +177,8 @@ o.styles = [h, m, u`
     /* Variant: glass — translucent + blur */
     :host([variant="glass"]) nav {
       background: color-mix(in srgb, var(--cg-color-surface-base-background) 72%, transparent);
-      backdrop-filter: saturate(180%) blur(20px);
-      -webkit-backdrop-filter: saturate(180%) blur(20px);
+      backdrop-filter: saturate(180%) blur(var(--cg-blur-backdrop));
+      -webkit-backdrop-filter: saturate(180%) blur(var(--cg-blur-backdrop));
       border-bottom: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
     }
 
@@ -190,8 +188,8 @@ o.styles = [h, m, u`
       height: calc(var(--cg-component-navbar-height) - 2 * var(--cg-component-navbar-floating-margin));
       padding: 0 var(--cg-spacing-20);
       background: color-mix(in srgb, var(--cg-color-surface-base-background) 80%, transparent);
-      backdrop-filter: saturate(180%) blur(20px);
-      -webkit-backdrop-filter: saturate(180%) blur(20px);
+      backdrop-filter: saturate(180%) blur(var(--cg-blur-backdrop));
+      -webkit-backdrop-filter: saturate(180%) blur(var(--cg-blur-backdrop));
       border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
       border-radius: var(--cg-border-radius-full);
       box-shadow: var(--cg-shadow-elevation-lg);
@@ -207,7 +205,7 @@ o.styles = [h, m, u`
       gap: var(--cg-spacing-8);
       font-size: var(--cg-font-size-base);
       font-weight: var(--cg-font-weight-semibold);
-      letter-spacing: -0.01em;
+      letter-spacing: var(--cg-letter-spacing-tight);
       flex-shrink: 0;
       color: var(--cg-color-surface-base-text);
       text-decoration: none;
@@ -319,7 +317,7 @@ o.styles = [h, m, u`
       border-radius: var(--cg-border-radius-full);
       font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-semibold);
-      letter-spacing: 0.02em;
+      letter-spacing: var(--cg-letter-spacing-wide);
     }
 
     .item-kbd {
@@ -400,10 +398,21 @@ o.styles = [h, m, u`
       font-weight: var(--cg-font-weight-medium);
       text-decoration: none;
       border-radius: var(--cg-border-radius-100);
-      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      transition:
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       animation: itemIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) backwards;
     }
     .mobile-item:hover { background: var(--cg-color-action-tertiary-background-hover); }
+    .mobile-item:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+    .mobile-item:active:not([aria-disabled="true"]) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
     .mobile-item[aria-selected="true"] {
       background: var(--cg-color-surface-container-background);
       box-shadow: var(--cg-shadow-elevation-sm);
@@ -429,45 +438,45 @@ o.styles = [h, m, u`
     }
   `];
 n([
-  d({ type: Array })
-], o.prototype, "items", 2);
+  g({ type: Array })
+], i.prototype, "items", 2);
 n([
-  d()
-], o.prototype, "active", 2);
+  g()
+], i.prototype, "active", 2);
 n([
-  d({ reflect: !0 })
-], o.prototype, "variant", 2);
+  g({ reflect: !0 })
+], i.prototype, "variant", 2);
 n([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "sticky", 2);
+  g({ type: Boolean, reflect: !0 })
+], i.prototype, "sticky", 2);
 n([
-  d({ type: Boolean, reflect: !0 })
-], o.prototype, "bordered", 2);
+  g({ type: Boolean, reflect: !0 })
+], i.prototype, "bordered", 2);
 n([
-  d({ type: Boolean, reflect: !0, attribute: "compact-on-scroll" })
-], o.prototype, "compactOnScroll", 2);
+  g({ type: Boolean, reflect: !0, attribute: "compact-on-scroll" })
+], i.prototype, "compactOnScroll", 2);
 n([
-  d({ type: Boolean, reflect: !0, attribute: "mobile-open" })
-], o.prototype, "mobileOpen", 2);
+  g({ type: Boolean, reflect: !0, attribute: "mobile-open" })
+], i.prototype, "mobileOpen", 2);
 n([
-  d()
-], o.prototype, "brandHref", 2);
+  g()
+], i.prototype, "brandHref", 2);
 n([
-  b()
-], o.prototype, "_scrolled", 2);
+  p()
+], i.prototype, "_scrolled", 2);
 n([
   v(".items")
-], o.prototype, "_itemsEl", 2);
+], i.prototype, "_itemsEl", 2);
 n([
   v(".indicator")
-], o.prototype, "_indicatorEl", 2);
+], i.prototype, "_indicatorEl", 2);
 n([
   v("nav")
-], o.prototype, "_navEl", 2);
-o = n([
+], i.prototype, "_navEl", 2);
+i = n([
   f("cg-navbar")
-], o);
+], i);
 export {
-  o as CgNavbar
+  i as CgNavbar
 };
 //# sourceMappingURL=cg-navbar.js.map