@cognivo/components 0.8.0

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

@@ -0,0 +1,409 @@
+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;
+};
+let o = class extends u {
+  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()));
+  }
+  _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, {
+      returnFocus: !0,
+      handleEscape: this.closable,
+      onEscape: () => this._requestClose()
+    });
+  }
+  _onClose() {
+    document.body.style.overflow = this._previousOverflow, this._focusTrap.deactivate(), this.dispatchEvent(new CustomEvent("cg-modal-close", { bubbles: !0, composed: !0 }));
+  }
+  _handleBackdropClick() {
+    !this.persistent && this.closable && this._requestClose();
+  }
+  _requestClose() {
+    this.open = !1;
+  }
+  _handleFooterSlotChange(e) {
+    const n = e.target;
+    this._hasFooter = n.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 ${this._closing ? "closing" : ""}"
+          role="dialog"
+          aria-modal="true"
+          aria-label="${this.title ? i : "Dialog"}"
+          aria-labelledby="${this.title ? "modal-title" : i}"
+          tabindex="-1"
+        >
+          ${this.title || this.closable || this.icon ? s`
+            <div class="modal-header">
+              <div class="modal-header-content">
+                ${this.icon ? s`
+                  <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>
+              </div>
+              ${this.closable ? s`
+                <button
+                  class="close-btn"
+                  aria-label="Close dialog"
+                  @click="${this._requestClose}"
+                >
+                  <cg-icon name="x" size="xs"></cg-icon>
+                </button>
+              ` : i}
+            </div>
+          ` : i}
+
+          ${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}
+
+          <div class="modal-body">
+            <slot></slot>
+            ${this.loading ? s`
+              <div class="modal-loading-overlay" aria-busy="true" aria-label="Loading">
+                <span class="modal-spinner"></span>
+                <span class="modal-loading-text">Loading...</span>
+              </div>
+            ` : i}
+          </div>
+
+          <div class="modal-footer" ?hidden=${!this._hasFooter}>
+            <slot name="footer" @slotchange="${this._handleFooterSlotChange}"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = [h, f, v`
+    :host {
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: contents;
+      font-family: var(--cg-font-family-primary);
+    }
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: var(--cg-z-index-500);
+      background: var(--cg-color-modal-overlay-background);
+      backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);
+      -webkit-backdrop-filter: blur(var(--cg-blur-backdrop)) saturate(150%);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    :host([open]) .backdrop {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .modal-container {
+      position: fixed;
+      inset: 0;
+      z-index: var(--cg-z-index-top);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--cg-spacing-16);
+      pointer-events: none;
+    }
+
+    :host([open]) .modal-container {
+      pointer-events: auto;
+    }
+
+    .modal {
+      position: relative;
+      isolation: isolate;
+      display: flex;
+      flex-direction: column;
+      max-height: calc(100vh - var(--cg-spacing-48) * 2);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border-radius: var(--cg-component-modal-radius);
+      box-shadow: var(--cg-elevation-4);
+      overflow: hidden;
+
+      /* Animation */
+      opacity: 0;
+      transform: scale(0.95);
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);
+    }
+
+    :host([open]) .modal {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    /* ── Closing animation ── */
+    @keyframes modal-exit {
+      from { opacity: 1; transform: scale(1); }
+      to { opacity: 0; transform: scale(0.95); }
+    }
+    @keyframes backdrop-exit {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+    .modal.closing {
+      animation: modal-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;
+    }
+    .backdrop.closing {
+      pointer-events: auto;
+      animation: backdrop-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .backdrop,
+      .modal {
+        transition: opacity var(--cg-transition-duration-fast) ease;
+      }
+      .modal {
+        transform: scale(1) !important;
+      }
+    }
+
+    /* ── Sizes ── */
+    :host([size="sm"]) .modal { width: var(--cg-component-modal-width-sm); max-width: 100%; }
+    :host([size="md"]) .modal { width: var(--cg-component-modal-width-md); max-width: 100%; }
+    :host([size="lg"]) .modal { width: var(--cg-component-modal-width-lg); max-width: 100%; }
+    :host([size="xl"]) .modal { width: var(--cg-component-modal-width-xl); max-width: 100%; }
+
+    /* ── Header ── */
+    .modal-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: var(--cg-spacing-24) var(--cg-spacing-24) var(--cg-spacing-4);
+      flex-shrink: 0;
+    }
+
+    .modal-header-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+      flex: 1;
+      min-width: 0;
+    }
+
+    .modal-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      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);
+      color: var(--cg-color-accent-text);
+      font-size: var(--cg-icon-size-200);
+    }
+
+    .modal-title {
+      font-size: var(--cg-font-size-md);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-modal-header-text);
+      margin: 0;
+      line-height: var(--cg-line-height-snug);
+    }
+
+    /* When no icon — align title with close button */
+    .modal-header-content:not(:has(.modal-icon)) .modal-title {
+      padding-top: var(--cg-spacing-4);
+    }
+
+    .close-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border: none;
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      font-size: var(--cg-font-size-sm);
+      line-height: 1;
+      padding: 0;
+      flex-shrink: 0;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .close-btn:hover {
+      background: var(--cg-color-action-secondary-background-hover);
+      color: var(--cg-color-surface-container-text);
+    }
+
+    .close-btn: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);
+      outline: none;
+    }
+
+    /* ── Body ── */
+    .modal-body {
+      position: relative;
+      padding: var(--cg-spacing-16) var(--cg-spacing-24) var(--cg-spacing-24);
+      overflow-y: auto;
+      flex: 1;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+    }
+
+    /* ── Footer ── */
+    .modal-footer {
+      padding: var(--cg-spacing-12) var(--cg-spacing-24) var(--cg-spacing-24);
+      flex-shrink: 0;
+    }
+
+    .modal-footer ::slotted(*) {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      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); }
+    :host([rounded="md"]) .modal { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="lg"]) .modal { border-radius: var(--cg-component-modal-radius); }
+    :host([rounded="full"]) .modal { border-radius: var(--cg-border-radius-full); }
+
+    /* ── Loading overlay ── */
+    .modal-loading-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-12);
+      background: var(--cg-color-modal-container-background);
+      border-radius: inherit;
+    }
+    .modal-spinner {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-border);
+      border-top-color: var(--cg-color-surface-container-text);
+      border-radius: var(--cg-border-radius-full);
+      animation: spin var(--cg-transition-duration-slow) linear infinite;
+    }
+    .modal-loading-text {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    /* ── Error banner ── */
+    .modal-error-banner {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      margin: 0 var(--cg-spacing-24);
+      margin-top: var(--cg-spacing-16);
+      background: var(--cg-color-status-error-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
+      border-radius: var(--cg-border-radius-100);
+      color: var(--cg-color-status-error-text-default);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-snug);
+    }
+    .modal-error-icon {
+      flex-shrink: 0;
+      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([
+  p()
+], o.prototype, "_hasFooter", 2);
+a([
+  p()
+], o.prototype, "_closing", 2);
+o = a([
+  m("cg-modal")
+], o);
+export {
+  o as CgModal
+};
+//# sourceMappingURL=cg-modal.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,87 @@
+import { LitElement, PropertyValues } from 'lit';
+export interface NavItem {
+    /** Stable identifier — what `active` matches against. */
+    value: string;
+    /** Visible text. */
+    label: string;
+    /** Href for the underlying anchor. */
+    href: string;
+    /** Optional leading icon (SVG markup string). */
+    icon?: string;
+    /** Keyboard hint, rendered as a small `cg-kbd` chip on the right. */
+    kbd?: string;
+    /** Marks the item disabled. */
+    disabled?: boolean;
+    /** Optional badge text (e.g., "New"). */
+    badge?: string;
+    /** Open in a new tab. */
+    external?: boolean;
+}
+/**
+ * @element cg-navbar
+ * Top navigation bar with animated sliding active indicator, programmatic
+ * items API, three coherent variants (`solid` / `glass` / `floating`),
+ * mobile responsive panel, scroll-aware compact mode, and full keyboard
+ * navigation (arrow keys, Home, End, Escape).
+ *
+ * @example
+ * ```html
+ * <cg-navbar
+ *   variant="glass"
+ *   sticky
+ *   active="docs"
+ *   .items=${[
+ *     { value: 'docs', label: 'Docs', href: '/docs' },
+ *     { value: 'components', label: 'Components', href: '/components' },
+ *     { value: 'tokens', label: 'Tokens', href: '/tokens', badge: 'New' },
+ *   ]}
+ * >
+ *   <span slot="brand">Cognivo</span>
+ *   <cg-button slot="end" variant="primary">Sign in</cg-button>
+ * </cg-navbar>
+ * ```
+ *
+ * @slot brand - Brand area (leftmost). Logo + name.
+ * @slot center - Optional center content (search, breadcrumbs). Hidden below mobileBreakpoint.
+ * @slot end - Right region for actions, profile, theme toggle.
+ * @slot mobile-menu - Optional override for the mobile panel content.
+ *
+ * @fires {CustomEvent<{open: boolean}>} cg-navbar-toggle - Mobile menu toggled
+ * @fires {CustomEvent<{value: string, item: NavItem}>} cg-navbar-select - A nav item activated
+ */
+export declare class CgNavbar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    items: NavItem[];
+    active: string;
+    variant: 'solid' | 'glass' | 'floating';
+    sticky: boolean;
+    bordered: boolean;
+    compactOnScroll: boolean;
+    mobileOpen: boolean;
+    brandHref: string;
+    private _scrolled;
+    private _itemsEl?;
+    private _indicatorEl?;
+    private _navEl?;
+    private _resizeObserver;
+    private _onScroll;
+    private _onDocClick;
+    private _onKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    firstUpdated(): void;
+    closeMobileMenu(): void;
+    private _updateIndicator;
+    private _selectItem;
+    private _toggleMobile;
+    private _onItemKeydown;
+    private _renderItem;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-navbar': CgNavbar;
+    }
+}
+//# sourceMappingURL=cg-navbar.d.ts.map

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

@@ -0,0 +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"}