@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/esm/co-loader_2.entry.js

@@ -0,0 +1,290 @@
+import { r as registerInstance, h, c as createEvent, a as getElement } from './index-CYsftTKf.js';
+import { a as afterEventFor } from './overlayAfterClose-Ch1jfwZ2.js';
+
+const coLoaderCss = () => `:host{display:contents;--co-loader-ball:15px;--co-loader-step:25px;--co-loader-text:var(--co-font-size-14);--co-loader-gap:10px}:host([size="sm"]){--co-loader-ball:8px;--co-loader-step:14px;--co-loader-text:var(--co-font-size-12);--co-loader-gap:6px}:host([size="lg"]){--co-loader-ball:20px;--co-loader-step:33px;--co-loader-gap:12px}.co-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-loader-gap)}.co-loader--overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.72);z-index:10}.co-loader__balls{position:relative;width:calc(var(--co-loader-step) * 3);height:var(--co-loader-ball)}.co-loader__ball{position:absolute;width:var(--co-loader-ball);height:var(--co-loader-ball);border-radius:50%;animation:co-loader-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1)}.co-loader__ball--blue{background-color:#4285f4}.co-loader__ball--yellow{background-color:#fdbd00;animation-delay:0.4s}.co-loader__ball--red{background-color:#d4145a;animation-delay:0.8s}.co-loader__text{margin:0;font-family:var(--co-font-family-primary);font-size:var(--co-loader-text);color:var(--co-semantic-text-secondary);text-align:center;white-space:pre-line}@keyframes co-loader-bounce{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(var(--co-loader-step)) scale(1.2)}50%{transform:translateX(calc(var(--co-loader-step) * 2)) scale(0.8)}75%{transform:translateX(var(--co-loader-step)) scale(1.2)}}@media (prefers-reduced-motion: reduce){.co-loader__ball{animation:none}.co-loader__ball--blue{transform:translateX(0)}.co-loader__ball--yellow{transform:translateX(var(--co-loader-step))}.co-loader__ball--red{transform:translateX(calc(var(--co-loader-step) * 2))}}`;
+
+const CoLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Show the loader. When false the component renders nothing so it doesn't
+         *  hold layout space or run animations while hidden. */
+        this.visible = true;
+        /** Render as an absolute-positioned overlay over the nearest positioned
+         *  ancestor. When false (default) the loader is inline. */
+        this.overlay = false;
+        /** Size of the ball animation. `sm` ~42px wide for tight UI like dropdown
+         *  bodies; `md` (default) ~75px for drawers/boot; `lg` ~100px for big
+         *  empty screens. */
+        this.size = 'md';
+        /** Optional text label below the balls. Multi-line is supported. */
+        this.text = '';
+        /** CSS color for the overlay backdrop. Only applied when `overlay=true`. */
+        this.background = '';
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const style = this.overlay && this.background ? { background: this.background } : undefined;
+        return (h("div", { class: { 'co-loader': true, 'co-loader--overlay': this.overlay }, style: style, part: "root", role: "status", "aria-live": "polite" }, h("div", { class: "co-loader__balls", part: "balls" }, h("span", { class: "co-loader__ball co-loader__ball--blue" }), h("span", { class: "co-loader__ball co-loader__ball--yellow" }), h("span", { class: "co-loader__ball co-loader__ball--red" })), this.text && h("p", { class: "co-loader__text", part: "text" }, this.text)));
+    }
+};
+CoLoader.style = coLoaderCss();
+
+// focusTrap.ts
+//
+// Focus-trap helpers for co-overlay. The Tab-cycling decision is a PURE function
+// (`resolveTabIndex`) so it can be unit-tested in a node env, mirroring the
+// `overlayAfterClose` split. The DOM query lives here too but is only invoked by
+// the component at runtime.
+/** CSS selector matching natively tabbable elements. */
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+/**
+ * Decide which focusable index a Tab / Shift+Tab keystroke should move to.
+ *
+ * @param count       number of focusable elements inside the trap
+ * @param activeIndex index of the currently focused element, or -1 when focus
+ *                    is outside the trap (e.g. it escaped to the body)
+ * @param shiftKey    whether Shift is held (backward tabbing)
+ * @returns the index to focus, or -1 when there is nothing to trap
+ *
+ * Pure — no DOM — so the wrap-around edge cases stay unit-testable.
+ */
+function resolveTabIndex(count, activeIndex, shiftKey) {
+    if (count <= 0)
+        return -1;
+    if (shiftKey) {
+        // Backward: from the first element (or from outside) wrap to the last.
+        return activeIndex <= 0 ? count - 1 : activeIndex - 1;
+    }
+    // Forward: from the last element (or from outside) wrap to the first.
+    return activeIndex === -1 || activeIndex >= count - 1 ? 0 : activeIndex + 1;
+}
+/**
+ * Collect the tabbable elements slotted into the overlay's light DOM, skipping
+ * hidden / aria-hidden ones. (Focusables nested inside further shadow roots are
+ * out of scope — the common dialog/modal content lives in the slotted subtree.)
+ */
+function getFocusableElements(root) {
+    const nodes = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+    return nodes.filter((el) => !el.hasAttribute('disabled') &&
+        el.getAttribute('aria-hidden') !== 'true' &&
+        // offsetParent is null for display:none; getClientRects covers position:fixed.
+        (el.offsetParent !== null || el.getClientRects().length > 0));
+}
+
+const coOverlayCss = () => `:host{display:contents}.co-overlay{position:fixed;inset:0;z-index:1000;margin:0;border:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;overflow:visible;display:flex;align-items:center;justify-content:center;background:var(--co-overlay-bg, rgba(0, 0, 0, 0.4));-webkit-backdrop-filter:blur(var(--co-overlay-blur, 2px));backdrop-filter:blur(var(--co-overlay-blur, 2px));opacity:0;pointer-events:none;transition:opacity 0.2s ease}.co-overlay--open{opacity:1;pointer-events:auto;transition:opacity 0.12s ease}`;
+
+/**
+ * Module-level body-scroll lock shared by every overlay instance.
+ * Ref-counted so stacked/nested overlays (e.g. a modal opened from a drawer)
+ * don't release the lock until the LAST one closes.
+ */
+let lockCount = 0;
+let savedOverflow = '';
+function lockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (lockCount === 0) {
+        savedOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    lockCount++;
+}
+function unlockBodyScroll() {
+    if (typeof document === 'undefined')
+        return;
+    if (lockCount === 0)
+        return;
+    lockCount--;
+    if (lockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+    }
+}
+function nextFrame(cb) {
+    if (typeof requestAnimationFrame === 'function')
+        requestAnimationFrame(cb);
+    else
+        cb();
+}
+const CoOverlay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coClose = createEvent(this, "coClose", 7);
+        this.coAfterClose = createEvent(this, "coAfterClose", 3);
+        this.coAfterOpen = createEvent(this, "coAfterOpen", 3);
+        /** Whether the overlay is visible */
+        this.open = false;
+        /**
+         * Opt-in accessible focus trap. When true, opening the overlay records the
+         * previously-focused element, moves focus into the overlay, cycles Tab /
+         * Shift+Tab within the slotted content, and restores focus on close.
+         * Default false → existing consumers are unchanged.
+         */
+        this.trapFocus = false;
+        /**
+         * Opt-in: emit `coClose` when Escape is pressed while open.
+         * Default false → existing consumers are unchanged.
+         */
+        this.closeOnEscape = false;
+        /** Whether THIS instance currently holds a scroll lock (prevents double-count). */
+        this.hasLock = false;
+        this.handleClick = () => {
+            this.coClose.emit();
+        };
+        this.handleTransitionEnd = (e) => {
+            if (e.target !== this.overlayEl)
+                return;
+            const ev = afterEventFor(e.propertyName, this.open, 'opacity');
+            if (ev === 'after-open')
+                this.coAfterOpen.emit();
+            else if (ev === 'after-close')
+                this.coAfterClose.emit();
+        };
+    }
+    onOpenChange(isOpen) {
+        if (isOpen)
+            this.acquireLock();
+        else
+            this.releaseLock();
+        this.syncPopover();
+        if (this.trapFocus) {
+            if (isOpen)
+                this.captureAndFocus();
+            else
+                this.restoreFocus();
+        }
+    }
+    componentDidLoad() {
+        // Handle the case where the overlay mounts already open.
+        if (this.open)
+            this.acquireLock();
+        this.syncPopover();
+        if (this.open && this.trapFocus)
+            this.captureAndFocus();
+    }
+    disconnectedCallback() {
+        // Safety: never leave the body locked if removed while open.
+        this.releaseLock();
+        // Safety: return focus if we were removed while trapping.
+        if (this.trapFocus)
+            this.restoreFocus();
+    }
+    acquireLock() {
+        if (this.hasLock)
+            return;
+        this.hasLock = true;
+        lockBodyScroll();
+    }
+    releaseLock() {
+        if (!this.hasLock)
+            return;
+        this.hasLock = false;
+        unlockBodyScroll();
+    }
+    /**
+     * Promote the scrim to the browser top layer so it covers the whole viewport
+     * regardless of ancestor `filter`/`mask`/`transform` (which would otherwise
+     * make `position: fixed` resolve against that ancestor, confining the scrim).
+     * The Popover API promotes WITHOUT moving the DOM node, so slots and Stencil
+     * reconciliation are untouched. No-ops gracefully where unsupported.
+     */
+    syncPopover() {
+        const el = this.overlayEl;
+        if (!el || typeof el.showPopover !== 'function')
+            return;
+        try {
+            const isShown = el.matches(':popover-open');
+            if (this.open && !isShown)
+                el.showPopover();
+            else if (!this.open && isShown)
+                el.hidePopover();
+        }
+        catch (_a) {
+            /* not connected yet, or already in the desired state */
+        }
+    }
+    /** Record the current focus and move it into the overlay (guarded by trapFocus). */
+    captureAndFocus() {
+        if (typeof document !== 'undefined') {
+            this.returnFocusEl = document.activeElement;
+        }
+        // Defer so slotted content / the open transition is ready to take focus.
+        nextFrame(() => {
+            var _a;
+            if (!this.open)
+                return;
+            const focusables = getFocusableElements(this.el);
+            if (focusables.length > 0)
+                focusables[0].focus();
+            else
+                (_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    /** Restore focus to the element that had it before the trap engaged. */
+    restoreFocus() {
+        const target = this.returnFocusEl;
+        this.returnFocusEl = null;
+        if (target && typeof target.focus === 'function')
+            target.focus();
+    }
+    /** Deepest active element, descending through nested shadow roots. */
+    deepActiveElement() {
+        if (typeof document === 'undefined')
+            return null;
+        let node = document.activeElement;
+        while (node && node.shadowRoot && node.shadowRoot.activeElement) {
+            node = node.shadowRoot.activeElement;
+        }
+        return node;
+    }
+    handleKeydown(e) {
+        if (!this.open)
+            return;
+        if (this.closeOnEscape && e.key === 'Escape') {
+            this.coClose.emit();
+            return;
+        }
+        if (this.trapFocus && e.key === 'Tab')
+            this.trapTab(e);
+    }
+    trapTab(e) {
+        var _a;
+        const focusables = getFocusableElements(this.el);
+        if (focusables.length === 0) {
+            // Nothing to move to — keep focus pinned to the overlay container.
+            e.preventDefault();
+            (_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        const activeIndex = focusables.indexOf(this.deepActiveElement());
+        const nextIndex = resolveTabIndex(focusables.length, activeIndex, e.shiftKey);
+        if (nextIndex < 0)
+            return;
+        e.preventDefault();
+        focusables[nextIndex].focus();
+    }
+    render() {
+        return (h("div", { key: 'e6a474574b171c1f4f0b55b9165aa22ee7faa7f1', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '05a95bc4822c57de49137f2e604f4dbb54f81f9e' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+CoOverlay.style = coOverlayCss();
+
+export { CoLoader as co_loader, CoOverlay as co_overlay };

package/dist/esm/co-menu-divider.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, h } from './index-CYsftTKf.js';
 
 const coMenuDividerCss = () => `:host{display:block}.co-menu-divider{border:0;border-top:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));margin:var(--co-spacing-xs, 4px) 0}`;
 
@@ -7,7 +7,7 @@ const CoMenuDivider = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("hr", { key: '50dcc97db96c79c6ce7398d627e991750a0f05ac', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '08549f09b4a76d1bc2cd572a8f09ed9289551175', class: "co-menu-divider", role: "separator" });
     }
 };
 CoMenuDivider.style = coMenuDividerCss();

package/dist/esm/co-menu-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
 
-const coMenuItemCss = () => `:host{display:block}.co-menu-item__wrap{display:block}.co-menu-item{width:100%;display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);background:transparent;border:0;border-radius:var(--co-border-radius-xs, 8px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default);text-align:left;cursor:pointer;transition:background 0.1s ease, color 0.1s ease;min-height:36px;box-sizing:border-box}.co-menu-item--dense{padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);min-height:32px}.co-menu-item:hover,.co-menu-item--submenu-open{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-menu-item:focus-visible{outline:2px solid var(--co-semantic-border-focus, #2563eb);outline-offset:-2px}.co-menu-item--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.co-menu-item--danger{color:var(--co-color-status-error, #aa2e1b)}.co-menu-item--danger:hover{background:var(--co-color-status-error-bg, rgba(170, 46, 27, 0.08))}.co-menu-item__icon{display:inline-flex;align-items:center;flex-shrink:0;color:currentColor}.co-menu-item__label{flex:1;display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-menu-item__suffix{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-menu-item--submenu-open .co-menu-item__suffix{color:var(--co-semantic-text-default)}.co-menu-item__trigger-wrap{display:block}.co-menu-item__submenu{background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08),     0 1px 3px rgba(0, 0, 0, 0.04);padding:var(--co-spacing-xs, 4px);min-width:180px;display:flex;flex-direction:column;gap:2px}`;
+const coMenuItemCss = () => `:host{display:block}.co-menu-item__wrap{display:block}.co-menu-item{width:100%;display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);background:transparent;border:0;border-radius:var(--co-border-radius-xs, 8px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default);text-align:left;cursor:pointer;transition:background 0.1s ease, color 0.1s ease;min-height:36px;box-sizing:border-box}.co-menu-item--dense{padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);min-height:32px}.co-menu-item:hover,.co-menu-item--submenu-open{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-menu-item:focus-visible{outline:2px solid var(--co-semantic-border-focus, #2563eb);outline-offset:-2px}.co-menu-item--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.co-menu-item--danger{color:var(--co-color-status-error, #aa2e1b)}.co-menu-item--danger:hover{background:var(--co-color-status-error-bg, rgba(170, 46, 27, 0.08))}.co-menu-item__icon{display:inline-flex;align-items:center;flex-shrink:0;color:currentColor}.co-menu-item__label{flex:1;display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-menu-item__suffix{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-menu-item--submenu-open .co-menu-item__suffix{color:var(--co-semantic-text-default)}.co-menu-item__trigger-wrap{display:block}.co-menu-item__submenu{background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08),     0 1px 3px rgba(0, 0, 0, 0.04);padding:var(--co-spacing-xs, 4px);min-width:180px;display:flex;flex-direction:column;gap:2px;position:relative}.co-menu-item__submenu::before,.co-menu-item__submenu::after{content:'';position:absolute;top:0;bottom:0;width:6px;}.co-menu-item__submenu::before{left:-6px}.co-menu-item__submenu::after{right:-6px}`;
 
 const CoMenuItem = class {
     constructor(hostRef) {
@@ -66,6 +66,16 @@ const CoMenuItem = class {
                 return;
             this.scheduleClose();
         };
+        // Arrow function (not a plain method) so `this` stays bound when it is passed
+        // directly as a JSX event handler (`onMouseEnter={this.cancelClose}`). Stencil
+        // does NOT auto-bind plain methods used as listeners — as a listener `this`
+        // would be the DOM element, so the timer would never actually clear.
+        this.cancelClose = () => {
+            if (this.closeTimer) {
+                window.clearTimeout(this.closeTimer);
+                this.closeTimer = undefined;
+            }
+        };
     }
     /** Programmatic focus — used by `co-menu`'s keyboard navigation. Named
      *  `focusItem` (not `focus`) because Stencil reserves the latter (it shadows
@@ -96,13 +106,10 @@ const CoMenuItem = class {
     openSubmenu() { this.submenuOpen = true; }
     scheduleClose() {
         this.cancelClose();
-        this.closeTimer = window.setTimeout(() => { this.submenuOpen = false; }, 200);
-    }
-    cancelClose() {
-        if (this.closeTimer) {
-            window.clearTimeout(this.closeTimer);
-            this.closeTimer = undefined;
-        }
+        // Delay tolerates the cursor travelling from the trigger row, across the
+        // offset gap, to the submenu panel (and slow diagonal paths toward a
+        // flipped submenu). The panel's own mouseenter cancels this on arrival.
+        this.closeTimer = window.setTimeout(() => { this.submenuOpen = false; }, 260);
     }
     render() {
         const row = (h("button", { ref: (el) => (this.rowEl = el), class: {
@@ -119,7 +126,7 @@ const CoMenuItem = class {
         }
         // Submenu trigger — wrap the row in a co-popover anchored to the right.
         // The default slot (nested co-menu-items) is projected into the popover.
-        return (h("div", { class: "co-menu-item__wrap co-menu-item__wrap--submenu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("co-popover", { placement: "right-start", offset: 4, open: this.submenuOpen, onCoOpen: () => { this.submenuOpen = true; }, onCoClose: () => { this.submenuOpen = false; } }, h("div", { slot: "trigger", class: "co-menu-item__trigger-wrap" }, row), h("div", { class: "co-menu-item__submenu", role: "menu" }, h("slot", null)))));
+        return (h("div", { class: "co-menu-item__wrap co-menu-item__wrap--submenu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("co-popover", { placement: "right-start", offset: 4, open: this.submenuOpen, onCoOpen: () => { this.submenuOpen = true; }, onCoClose: () => { this.submenuOpen = false; } }, h("div", { slot: "trigger", class: "co-menu-item__trigger-wrap" }, row), h("div", { class: "co-menu-item__submenu", role: "menu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("slot", null)))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/co-menu.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
 
 const coMenuCss = () => `:host{display:contents}.co-menu{background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08),     0 1px 3px rgba(0, 0, 0, 0.04);padding:var(--co-spacing-xs, 4px);min-width:200px;display:flex;flex-direction:column;gap:2px;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default)}`;
 
@@ -90,7 +90,7 @@ const CoMenu = class {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (h("co-popover", { key: 'b3c7932fb6c4574e66ddb3ccbc139ebcd86cce41', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'aa6546808d38973f71d12575ac62106a4e4c2c1f', name: "trigger", slot: "trigger" }), h("div", { key: '376d8202add51e08dd9361fa4fd6d4840c1d61ce', class: "co-menu", role: "menu" }, h("slot", { key: '2e1df74c20f44e98dc51474b9009e8dc12f9b403' }))));
+        return (h("co-popover", { key: 'b6d6cd9511cc0ce9d2025ca162aaeb7d962b96a2', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: '91085adedc753afe8f6f9ba2b137ecde1af0155d', name: "trigger", slot: "trigger" }), h("div", { key: 'f7bf1839cc05d7d5ba5c8ea7f5fcb10d50f37ede', class: "co-menu", role: "menu" }, h("slot", { key: 'c11fa45f19630d6568fb66e4df38301b40f83031' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-modal.entry.js

@@ -1,11 +1,14 @@
-import { r as registerInstance, c as createEvent, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h } from './index-CYsftTKf.js';
+import { a as afterEventFor } from './overlayAfterClose-Ch1jfwZ2.js';
 
-const coModalCss = () => `:host{display:contents}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-page);border-radius:var(--co-border-radius-xl);box-shadow:0 4px 24px rgba(0, 0, 0, 0.12);max-width:540px;width:90vw;max-height:80vh;overflow:hidden;font-family:var(--co-font-family-primary);transform:translateY(8px);opacity:0;transition:transform 0.2s ease, opacity 0.2s ease}.co-modal--open{transform:translateY(0);opacity:1}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background 0.1s ease}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-md) var(--co-spacing-xl);overflow-y:auto;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl)}.co-modal__footer:empty{display:none}`;
+const coModalCss = () => `:host{display:contents;--co-overlay-blur:8px;--co-overlay-bg:rgba(31, 28, 27, 0.35)}.co-modal__frame{display:flex;filter:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))     drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16))}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);--co-modal-r:var(--co-border-radius-xl);--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");-webkit-mask:var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;border-radius:0;max-width:540px;width:90vw;max-height:80vh;overflow:hidden;font-family:var(--co-font-family-primary);transform:translateY(8px);opacity:0;transition:transform 0.2s ease, opacity 0.2s ease}.co-modal--sm{max-width:400px}.co-modal--lg{max-width:680px}.co-modal--open{transform:none;opacity:1}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background 0.1s ease}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-xl);overflow-y:auto;overscroll-behavior:contain;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6;border-top:1px solid var(--co-semantic-border-default)}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);--co-button-radius:var(--co-border-radius-xs)}.co-modal__footer:empty{display:none}.co-modal--no-dividers .co-modal__footer{border-top:none}`;
 
 const CoModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coClose = createEvent(this, "coClose", 7);
+        this.coAfterClose = createEvent(this, "coAfterClose", 3);
+        this.coAfterOpen = createEvent(this, "coAfterOpen", 3);
         /** Whether the modal is visible */
         this.open = false;
         /** Modal title */
@@ -14,6 +17,10 @@ const CoModal = class {
         this.closable = true;
         /** Close when clicking the overlay backdrop */
         this.closeOnOverlay = true;
+        /** Modal width: sm (400px), md (540px), lg (680px) */
+        this.size = 'md';
+        /** Hide body section and all border dividers (compact confirm dialogs) */
+        this.noDividers = false;
         this.handleOverlayClick = () => {
             if (this.closeOnOverlay)
                 this.coClose.emit();
@@ -24,9 +31,24 @@ const CoModal = class {
         this.stopPropagation = (e) => {
             e.stopPropagation();
         };
+        this.handleTransitionEnd = (e) => {
+            if (e.target !== this.modalEl)
+                return;
+            const ev = afterEventFor(e.propertyName, this.open, 'transform');
+            if (ev === 'after-open')
+                this.coAfterOpen.emit();
+            else if (ev === 'after-close')
+                this.coAfterClose.emit();
+        };
     }
     render() {
-        return (h("co-overlay", { key: '5f3801c0c05b279dc74757dd2d8f716a539d0fb9', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '86805a8d5d51363231a2376ea0a5d5ec303af9fa', class: { 'co-modal': true, 'co-modal--open': this.open }, part: "modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation }, h("div", { key: '360a11aeb0681a2b8b5a58b0b1e4cbd0e1238d4b', class: "co-modal__header", part: "header" }, h("div", { key: 'a0f9d269b62015c03e24aca95be8897aa7694cf9', class: "co-modal__header-text" }, h("h2", { key: 'd33d895a09c3653200ac2cedb914360707438d12', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: '10ec973d66bd6d28c994eb98b444dded32cdddc2', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '9005317d5e6a0611b2e30455ad04450393015a0d', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '13d2f893a2d34cec9fd7dd04d61c17230af88339', name: "x", size: 20 })))), h("div", { key: 'b482deada782191e1c1c156256f18427147f87dc', class: "co-modal__body", part: "body" }, h("slot", { key: '0e33f4340bbf6ab3334b7f5034eae1394ae07871' })), h("div", { key: 'a5ab52491c22c8a5c51e00fbcafb6286e0be2b12', class: "co-modal__footer", part: "footer" }, h("slot", { key: '5f3fa7189cea7a8ff246ecd2129a79f35adee6b9', name: "footer" })))));
+        return (h("co-overlay", { key: '2fee2b3d1249611a053b917e7d56cb9550e5f3b8', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '68cd9017ea7b89c2a3c3a5a6be81a4a1760588be', class: "co-modal__frame" }, h("div", { key: 'cb97ce8eb1bb4ca47b9f81dd8c72878eec383928', class: {
+                'co-modal': true,
+                'co-modal--open': this.open,
+                'co-modal--sm': this.size === 'sm',
+                'co-modal--lg': this.size === 'lg',
+                'co-modal--no-dividers': this.noDividers,
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '85b3c3616ec370427f30832aaec9674fa3651205', class: "co-modal__header", part: "header" }, h("div", { key: '4bcab7c1022aeaa357feae91999120e5b4dc2d30', class: "co-modal__header-text" }, h("h2", { key: '40879cdb0533f481e4807d8510937eec0de46317', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'ba57a406a257ce0a969da6a508a287f28ffc64b4', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: 'e5eb0cbcf8cbe53b02991b41a2b2e4e75ae0d5b3', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'f11fd06c1a6b3cd41254324e44dcfb70b2058003', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '8e189a09c8418f1646650c57748855d805d9bd7e', class: "co-modal__body", part: "body" }, h("slot", { key: '8c8363b3405295c7823feb6196c4c72a1724a6d5' }))), h("div", { key: 'fdd675455b1391ea7d3456321a1fb03104f14b49', class: "co-modal__footer", part: "footer" }, h("slot", { key: 'a05ba1229c4fa147c582ad7d06fb4a27d4a42ef5', name: "footer" }))))));
     }
 };
 CoModal.style = coModalCss();

package/dist/esm/co-navbar.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, h } from './index-CYsftTKf.js';
 
-const coNavbarCss = () => `:host{display:block}.co-navbar{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--co-font-family-primary);box-sizing:border-box;background:var(--co-navbar-bg);color:var(--co-navbar-color)}.co-navbar--default{--co-navbar-bg:transparent}.co-navbar--filled{--co-navbar-bg:var(--co-semantic-surface-primary, #1f1c1b);--co-navbar-color:var(--co-semantic-on-primary, #fff)}.co-navbar--bordered{--co-navbar-bg:var(--co-semantic-surface-page, #fff);--co-navbar-color:inherit;border-bottom:1px solid var(--co-semantic-border-subtle, rgba(31,28,27,0.08))}.co-navbar--dark{--co-navbar-bg:var(--co-theme-navbar-bg, var(--co-color-opacity-negro-80, rgba(31,28,27,0.8)));--co-navbar-color:var(--co-theme-on-navbar, #fff);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);--co-icon-button-bg:var(--co-theme-on-navbar-surface, var(--co-color-opacity-blanco-16, rgba(255,255,255,0.16)));--co-icon-button-color:var(--co-theme-on-navbar, #fff);--co-icon-button-border:transparent}.co-navbar--rounded{border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-navbar--sm{min-height:40px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-12, 12px)}.co-navbar--md{min-height:48px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-lg, 16px));gap:var(--co-spacing-md, 12px);font-size:var(--co-font-size-14, 14px)}.co-navbar--lg{min-height:56px;padding:0     var(--co-navbar-padding-x-end, var(--co-spacing-2xl, 24px))     0     var(--co-navbar-padding-x-start, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-14, 14px)}::slotted([slot-spacer]),::slotted(.co-spacer){flex:1}`;
+const coNavbarCss = () => `:host{display:block}.co-navbar{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--co-font-family-primary);box-sizing:border-box;background:var(--co-navbar-bg);color:var(--co-navbar-color)}.co-navbar--default{--co-navbar-bg:transparent}.co-navbar--filled{--co-navbar-bg:var(--co-semantic-surface-primary, #1f1c1b);--co-navbar-color:var(--co-semantic-on-primary, #fff)}.co-navbar--bordered{--co-navbar-bg:var(--co-semantic-surface-page, #fff);--co-navbar-color:inherit;border-bottom:1px solid var(--co-semantic-border-subtle, rgba(31,28,27,0.08))}.co-navbar--dark{--co-navbar-bg:var(--co-theme-navbar-bg, var(--co-color-base-negro, #1F1C1B));--co-navbar-color:var(--co-theme-on-navbar, #fff);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);--co-icon-button-bg:var(--co-theme-on-navbar-surface, var(--co-color-opacity-blanco-16, rgba(255,255,255,0.16)));--co-icon-button-color:var(--co-theme-on-navbar, #fff);--co-icon-button-border:transparent}.co-navbar--rounded{border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-navbar--sm{min-height:40px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-12, 12px)}.co-navbar--md{min-height:48px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-lg, 16px));gap:var(--co-spacing-md, 12px);font-size:var(--co-font-size-14, 14px)}.co-navbar--lg{min-height:56px;padding:0     var(--co-navbar-padding-x-end, var(--co-spacing-2xl, 24px))     0     var(--co-navbar-padding-x-start, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-14, 14px)}::slotted([slot-spacer]),::slotted(.co-spacer){flex:1}`;
 
 const CoNavbar = class {
     constructor(hostRef) {
@@ -13,12 +13,12 @@ const CoNavbar = class {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: 'bf36fdff69c691f99a420fc9e782df9b75517052', class: {
+        return (h("div", { key: 'b2af21d1a45ce64e859c5eee4565bed3acf59af9', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: '62f1bc0ba7c1cd61727cd01f7d540643fbe44575' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: '70eabcdbfdae15af12cc9bfd8aea140ca37176c9' })));
     }
 };
 CoNavbar.style = coNavbarCss();