@nova-design-system/nova-react 3.22.0 → 3.24.0

package/dist/cjs/nv-sidebarnavitem.entry-DVrafSMr.js

@@ -0,0 +1,296 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarnavitemCss = "nv-sidebarnavitem{display:flex;flex-direction:column;gap:0}nv-sidebarnavitem .nv-sidebarnavitem-trigger{display:flex;align-items:center;gap:var(--sidebar-item-gap-x);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x);border-radius:var(--sidebar-item-radius);cursor:pointer;transition:all 0.15s ease;font-size:var(--sidebar-item-font-size);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-low-text);background:var(--components-sidebar-background);text-decoration:none;--nv-component-background:var(--components-sidebar-background);--nv-sidebarnavitem-background:var(--components-sidebar-background)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:hover{background-color:var(--color-interaction-container-neutral-background-hover);color:var(--color-content-medium-text);--nv-component-background:var(--color-interaction-container-neutral-background-hover);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus,nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-within{outline:none}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-visible,nv-sidebarnavitem .nv-sidebarnavitem-trigger:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavitem[active] .nv-sidebarnavitem-trigger{background-color:var(--color-interaction-container-neutral-background-active);color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-medium-emphasis);--nv-component-background:var(--color-interaction-container-neutral-background-active);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavitem .nv-sidebarnavitem-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;width:var(--sidebar-item-icon-size);height:var(--sidebar-item-icon-size);position:relative}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon{overflow:visible;margin:0;justify-content:center}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon nv-notification-bullet{position:absolute;transform:translate(50%, -50%);z-index:1;--sidebar-notification-bullet-size-reduced:calc(\n    var(--sidebar-item-icon-size) * 0.4\n  )}nv-sidebarnavitem .nv-sidebarnavitem-content{flex:1;display:flex;align-items:center}nv-sidebarnavitem .nv-sidebarnavitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavitem .nv-sidebarnavitem-trailing{display:flex;align-items:center;gap:var(--spacing-2);margin-left:auto}nv-sidebarnavitem .nv-sidebarnavitem-chevron{transition:transform 0.2s ease;color:inherit}nv-sidebarnavitem[open] .nv-sidebarnavitem-chevron{transform:rotate(180deg)}nv-sidebarnavitem .nv-sidebarnavitem-subitems{display:flex;flex-direction:column;gap:0;max-height:0;overflow:hidden;opacity:0;transition:max-height 0.3s ease, opacity 0.2s ease;padding-left:0}nv-sidebarnavitem[open] .nv-sidebarnavitem-subitems{opacity:1;margin-top:var(--spacing-1)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trigger{justify-content:center;gap:0;padding:var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-content{display:none}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trailing,nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-chevron{display:none}";
+
+const NvSidebarnavitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Whether this item represents the active/current page.
+         * Can be set automatically when a sub-item becomes active.
+         */
+        this.active = false;
+        /**
+         * Whether this item can be collapsed/expanded (has sub-items).
+         */
+        this.collapsible = false;
+        /**
+         * Whether the collapsible item is currently open (showing sub-items).
+         */
+        this.open = false;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        this.hasSubitems = false;
+        this.isSidebarCollapsed = false;
+        this.wasActiveFromSubitem = false; // Track if active was set by subitem logic
+        //#endregion STATE
+        /****************************************************************************/
+        //#region METHODS
+        this.handleToggle = (event) => {
+            // Ignore clicks that originated from subitems (they bubble up but shouldn't toggle)
+            const target = event.target;
+            if (target.closest('nv-sidebarnavsubitem')) {
+                return; // Let the subitem's link handle navigation normally
+            }
+            // In collapsed sidebar mode, navigate to the main link instead of toggling
+            if (this.isSidebarCollapsed) {
+                // Find the first link that is NOT inside subitems
+                const link = this.el.querySelector('.nv-sidebarnavitem-content a, :scope > a');
+                if (link?.href) {
+                    // Check if click was directly on the link - if so, let it handle naturally
+                    if (target.closest('a')) {
+                        return;
+                    }
+                    // Trigger navigation by clicking the link programmatically
+                    link.click();
+                }
+                return;
+            }
+            // Only handle toggle for collapsible items when sidebar is expanded
+            if (this.collapsible) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.open = !this.open;
+            }
+            // For non-collapsible items in expanded mode, let the link handle the navigation
+            // Don't prevent default or stop propagation - allow the link to work normally
+        };
+        this.isAnimating = false;
+        this.hasInitializedHeight = false;
+        /** Tracks the last open state that was animated to, to prevent redundant animations */
+        this.lastAnimatedOpenState = null;
+        this.updateSubitemsHeight = (force = false) => {
+            if (!this.subitemsRef)
+                return;
+            // Skip animation if we're already in the target state (prevents animation on active change)
+            // Only animate if:
+            // 1. forced (explicit toggle by user via @Watch)
+            // 2. OR this is the first animation (lastAnimatedOpenState is null)
+            // 3. OR the open state has actually changed since last animation
+            if (!force &&
+                this.lastAnimatedOpenState !== null &&
+                this.lastAnimatedOpenState === this.open) {
+                return;
+            }
+            // Don't re-animate if already animating and not forced
+            if (this.isAnimating && !force) {
+                return;
+            }
+            this.isAnimating = true;
+            this.lastAnimatedOpenState = this.open;
+            if (this.open) {
+                // Calculate real height and animate to it
+                this.subitemsRef.style.transition = 'none';
+                this.subitemsRef.style.maxHeight = '0px';
+                requestAnimationFrame(() => {
+                    if (this.subitemsRef) {
+                        this.subitemsRef.style.transition =
+                            'max-height 0.3s ease, opacity 0.2s ease';
+                        this.subitemsRef.style.maxHeight =
+                            this.subitemsRef.scrollHeight + 'px';
+                        // Reset animation flag after animation completes
+                        setTimeout(() => {
+                            this.isAnimating = false;
+                        }, 300); // Match animation duration
+                    }
+                });
+            }
+            else {
+                // Animate to 0
+                this.subitemsRef.style.transition = 'none';
+                this.subitemsRef.style.maxHeight = this.subitemsRef.scrollHeight + 'px';
+                requestAnimationFrame(() => {
+                    if (this.subitemsRef) {
+                        this.subitemsRef.style.transition =
+                            'max-height 0.3s ease, opacity 0.2s ease';
+                        this.subitemsRef.style.maxHeight = '0px';
+                        // Reset animation flag after animation completes
+                        setTimeout(() => {
+                            this.isAnimating = false;
+                        }, 300); // Match animation duration
+                    }
+                });
+            }
+        };
+        this.checkSidebarCollapsed = () => {
+            const sidebar = this.el.closest('nv-sidebar');
+            const wasCollapsed = this.isSidebarCollapsed;
+            this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;
+            // When sidebar collapse state changes, update active state based on subitems
+            if (wasCollapsed !== this.isSidebarCollapsed) {
+                this.updateActiveFromSubitems();
+            }
+        };
+        /**
+         * Checks if any sub-item is active and updates parent active state.
+         * - When sidebar is collapsed: if a sub-item is active, parent should be active
+         * - When sidebar is expanded: if a sub-item is active AND parent is not open, parent should be active
+         *   (because sub-items are hidden, we need to indicate the parent contains an active child)
+         */
+        this.updateActiveFromSubitems = () => {
+            if (!this.hasSubitems)
+                return;
+            // Find all sub-items
+            const subItems = Array.from(this.el.querySelectorAll('nv-sidebarnavsubitem'));
+            // Check if any sub-item is active
+            const hasActiveSubitem = subItems.some(subItem => subItem.active);
+            if (this.isSidebarCollapsed) {
+                // When sidebar is collapsed AND a sub-item is active, make parent active
+                if (hasActiveSubitem) {
+                    this.active = true;
+                    this.wasActiveFromSubitem = true;
+                }
+                else {
+                    // When collapsed and no sub-item is active, remove active state only if we set it
+                    if (this.wasActiveFromSubitem) {
+                        this.active = false;
+                        this.wasActiveFromSubitem = false;
+                    }
+                }
+            }
+            else {
+                // When sidebar is expanded
+                if (hasActiveSubitem && !this.open) {
+                    // If a sub-item is active AND parent is not open (sub-items hidden),
+                    // make parent active to indicate it contains an active child
+                    this.active = true;
+                    this.wasActiveFromSubitem = true;
+                }
+                else if (hasActiveSubitem && this.open) {
+                    // If a sub-item is active BUT parent is open (sub-items visible),
+                    // remove active state from parent (only sub-item should be active)
+                    if (this.wasActiveFromSubitem) {
+                        this.active = false;
+                        this.wasActiveFromSubitem = false;
+                    }
+                }
+                else {
+                    // No active sub-item, remove active state if we set it
+                    if (this.wasActiveFromSubitem) {
+                        this.active = false;
+                        this.wasActiveFromSubitem = false;
+                    }
+                }
+                // Note: activePath logic in nv-sidebar can also manage parent active state
+                // (when parent href matches activePath exactly)
+            }
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        // Check if there are sub-items in any slot
+        const subItems = Array.from(this.el.children).filter(child => child.tagName.toLowerCase() === 'nv-sidebarnavsubitem');
+        this.hasSubitems = subItems.length > 0;
+        // Move sub-items to the subitems slot
+        if (this.hasSubitems) {
+            subItems.forEach(item => {
+                item.setAttribute('slot', 'subitems');
+            });
+        }
+        // Check sidebar collapsed state
+        this.checkSidebarCollapsed();
+        // Watch for sidebar state changes
+        const sidebar = this.el.closest('nv-sidebar');
+        if (sidebar) {
+            this.mutationObserver = new MutationObserver(() => {
+                this.checkSidebarCollapsed();
+            });
+            this.mutationObserver.observe(sidebar, {
+                attributes: true,
+                attributeFilter: ['collapsed'],
+            });
+        }
+        // Watch for sub-items active state changes
+        if (this.hasSubitems) {
+            // Observe the subitems container for changes (including new sub-items being added)
+            // Using subtree: true to catch all attribute changes in descendants
+            const subitemsContainer = this.el.querySelector('.nv-sidebarnavitem-subitems');
+            if (subitemsContainer) {
+                this.subitemsMutationObserver = new MutationObserver(() => {
+                    this.updateActiveFromSubitems();
+                });
+                // Observe the container for child list changes and attribute changes in descendants
+                this.subitemsMutationObserver.observe(subitemsContainer, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['active'],
+                });
+            }
+            else {
+                // If container doesn't exist yet (not collapsible or not rendered), observe the element itself
+                // This handles cases where sub-items are direct children
+                this.subitemsMutationObserver = new MutationObserver(() => {
+                    this.updateActiveFromSubitems();
+                });
+                this.subitemsMutationObserver.observe(this.el, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['active'],
+                });
+            }
+        }
+        // Initial check for active subitems
+        this.updateActiveFromSubitems();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+        if (this.subitemsMutationObserver) {
+            this.subitemsMutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region WATCHERS
+    onOpenChanged(newValue, oldValue) {
+        // Only animate if the value actually changed (prevents false triggers from React re-renders)
+        if (newValue === oldValue) {
+            return;
+        }
+        // Force update when open state changes (user clicked toggle)
+        this.updateSubitemsHeight(true);
+        // Update active state based on subitems when open state changes
+        this.updateActiveFromSubitems();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
+        const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
+        return (index.h(index.Host, { key: '7a3523c68080b90ef262a2fa3fa63f1f34baaaf1', role: "listitem" }, index.h("div", { key: '21abd8cf4e5d4a368b25db79306cb0ac747edfce', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (index.h("div", { key: '8255f2f75b751e5005b4bbb7178e553123c7c109', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '5396567c08fc46084f085b544aeee3f874b7b439', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '63dfbd2a986124a9c1ba1741e4d1079ec2b38a18', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'a4d8df28b532018d6961d6d779d77ba88bbea756', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: '7394c3534de567f9230ff872b57b4211939bc142' })), index.h("div", { key: 'c8f8451e9ebc42e6ee16407a5ba9c6f6c32f4a66', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: '2e901538498c62fe5a5bc21c76c66b493c215e32', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '9a7c172f0b7dbf78068135344e469d261b80d368', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: 'f1caa3750edb35376d8b45121ffb443b033735d4', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: '4b141fd9639afd78351b01df146866d4d091381f', class: "nv-sidebarnavitem-subitems", ref: el => {
+                // Only update ref and initialize if element changed or not yet initialized
+                if (el !== this.subitemsRef) {
+                    this.subitemsRef = el;
+                    if (el && !this.hasInitializedHeight) {
+                        // Initialize height only on first mount, not on re-renders
+                        this.hasInitializedHeight = true;
+                        requestAnimationFrame(() => {
+                            // Only animate if item is open, otherwise it will animate when opened
+                            if (this.open) {
+                                this.updateSubitemsHeight();
+                            }
+                        });
+                    }
+                }
+            } }, index.h("slot", { key: '6a38e07d0559b6eaf2fafb4c9928047a9cfd19b4', name: "subitems" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["onOpenChanged"]
+    }; }
+};
+NvSidebarnavitem.style = nvSidebarnavitemCss;
+
+exports.nv_sidebarnavitem = NvSidebarnavitem;

package/dist/cjs/nv-sidebarnavsubitem.entry-C0XDAzma.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarnavsubitemCss = "nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x) var(--sidebar-item-padding-y) calc(var(--sidebar-sub-item-padding-left) + var(--sidebar-item-padding-x));cursor:pointer;transition:all 0.15s ease;position:relative;min-height:var(--spacing-10);background-color:var(--color-interaction-container-neutral-background);border-radius:var(--sidebar-item-radius);--nv-component-background:var(--color-interaction-container-neutral-background)}nv-sidebarnavsubitem:hover{background-color:var(--color-interaction-container-neutral-background-hover);--nv-component-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavsubitem:focus,nv-sidebarnavsubitem:focus-within{outline:none}nv-sidebarnavsubitem:focus-visible,nv-sidebarnavsubitem:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{display:none}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{flex:1;display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-content-medium-text);text-decoration:none;font-weight:var(--font-weight-medium-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavsubitem:hover .nv-sidebarnavsubitem-content{color:var(--color-content-medium-text)}nv-sidebarnavsubitem[active]{background-color:var(--color-interaction-container-neutral-background-active);--nv-component-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavsubitem[active] .nv-sidebarnavsubitem-content{color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-high-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:flex;align-items:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{max-width:0;opacity:0;margin:0;overflow:hidden;transition:opacity 0.2s ease, max-width 0.2s ease}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{margin-right:0;width:var(--spacing-6);justify-content:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:none}";
+
+const NvSidebarnavsubitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Whether this sub-item represents the active/current page.
+         */
+        this.active = false;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    // Note: We no longer use stopPropagation() here because it prevents React Router
+    // (and other SPA routers) from receiving the click event due to event delegation.
+    // Instead, the parent nv-sidebarnavitem checks if clicks originate from subitems.
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '7e9b3aaf42bc7ca19cc3ceeed4afc74058ea48f2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'd865d9cff0e9632dd0ca5f97334e09ae3ad6ddf8', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '28bddb32eea17dbc3b33f2e1c3ef6744e6646cbe', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: '0f58fbe30b054e42ac3f431cb8cafe0374994856' })), index.h("div", { key: '3b1b74c67b1e338e158a67dab828941f40f3a147', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '98ad3fde4a5295f6835ba6b15ac832fc0426b75b', name: "trailing" }))));
+    }
+};
+NvSidebarnavsubitem.style = nvSidebarnavsubitemCss;
+
+exports.nv_sidebarnavsubitem = NvSidebarnavsubitem;

package/dist/cjs/{nv-split.entry-CYP2bTTM.js → nv-split.entry-0HTslRAX.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--nv-color-neutral-400, #ccc);border-radius:2px;transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--nv-color-brand-primary, #0066cc)}nv-split .nv-split-gutter::before{content:\"\";position:absolute;background-repeat:no-repeat;background-position:center;opacity:0.4;transition:opacity 0.2s ease;pointer-events:none}nv-split .nv-split-gutter:hover::before{opacity:0.7}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--nv-split-gutter-size, 24px);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:2px;height:60%;left:50%;top:20%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter::before{width:16px;height:16px}nv-split[direction=vertical]>.nv-split-gutter{height:var(--nv-split-gutter-size, 24px);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:2px;width:60%;top:50%;left:20%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter::before{width:16px;height:16px}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--nv-color-neutral-500, #9ca3af)}nv-split>[slot=pane]{flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
-const NvSplitStyle0 = nvSplitCss;
+const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:\"\";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{box-sizing:border-box;flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column;margin:0 !important}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
 
 const NvSplit = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sizesChanged = index.createEvent(this, "sizesChanged");
+        this.sizesChanged = index.createEvent(this, "sizesChanged", 3);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -38,7 +38,7 @@ const NvSplit = class {
         this.startPos = 0;
         this.startSizes = [];
         // Handlers stored to be able to detach them
-        this.onDocMove = (ev) => this.handleMouseMove(ev);
+        this.onDocMove = (e) => this.handleMouseMove(e);
         this.onDocUp = () => this.stopDragging();
     }
     //#endregion
@@ -59,18 +59,20 @@ const NvSplit = class {
     componentDidLoad() {
         // Initialization (once)
         this.ensureGutters();
-        this.applySizes();
-        this.positionGutters();
-        // Observer: reposition gutters when resized (nested or parent split changes)
+        // Defer applySizes to ensure CSS (margins, padding) is computed
+        requestAnimationFrame(() => {
+            this.applySizes();
+            this.positionGutters();
+        });
+        // Observer: reposition gutters when resized
         this.ro = new ResizeObserver(() => this.positionGutters());
         this.ro.observe(this.el);
         window.addEventListener('resize', () => this.positionGutters());
     }
     disconnectedCallback() {
-        var _a;
         // Security cleanup (in case a drag was in progress)
         this.detachDocumentListeners();
-        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro?.disconnect();
         this.ro = undefined;
     }
     //#endregion
@@ -118,13 +120,12 @@ const NvSplit = class {
      * @returns {Promise<void>}
      */
     async destroy() {
-        var _a;
         this.sizes = [];
         this.isDragging = false;
         this.dragIndex = -1;
         this.removeOwnGutters();
         this.detachDocumentListeners();
-        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro?.disconnect();
     }
     //#endregion
     /****************************************************************************/
@@ -199,15 +200,14 @@ const NvSplit = class {
             this.sizes = Array(n).fill(100 / n);
         }
         panes.forEach((pane, i) => {
-            var _a;
-            const size = Math.max(0, (_a = this.sizes[i]) !== null && _a !== void 0 ? _a : 100 / n);
-            // Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
+            const size = Math.max(0, this.sizes[i] ?? 100 / n);
             pane.style.flex = `0 0 ${size}%`;
             pane.style.minWidth = '0';
             pane.style.minHeight = '0';
-            pane.style.overflow = 'hidden'; // let a nv-split child extend
+            pane.style.overflow = 'hidden';
             pane.style.display = 'flex';
             pane.style.flexDirection = 'column';
+            pane.style.boxSizing = 'border-box';
         });
         this.positionGutters();
     }
@@ -229,7 +229,6 @@ const NvSplit = class {
      * Positions the gutters based on the current sizes of the panes.
      */
     positionGutters() {
-        var _a, _b;
         const panes = this.getPanes();
         const gutters = this.getOwnGutters();
         if (panes.length <= 1 || gutters.length === 0)
@@ -237,7 +236,7 @@ const NvSplit = class {
         const horizontal = this.direction === 'horizontal';
         let cumPct = 0;
         for (let i = 0; i < gutters.length; i++) {
-            const sizePct = (_b = (_a = this.sizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 100 / panes.length;
+            const sizePct = this.sizes?.[i] ?? 100 / panes.length;
             cumPct += sizePct;
             const g = gutters[i];
             g.style.position = 'absolute';
@@ -246,68 +245,70 @@ const NvSplit = class {
                 g.style.top = '0';
                 g.style.bottom = '0';
                 g.style.height = '100%';
+                g.style.transform = 'translateX(-50%)';
             }
             else {
                 g.style.top = `${cumPct}%`;
                 g.style.left = '0';
                 g.style.right = '0';
                 g.style.width = '100%';
+                g.style.transform = 'translateY(-50%)';
             }
         }
     }
     /**
      * Starts the dragging process.
-     * @param {MouseEvent} ev - The mouse event.
+     * @param {MouseEvent} e - The mouse event.
      * @param {number} index - The index of the gutter.
      */
-    startDragging(ev, index) {
+    startDragging(e, index) {
+        e.preventDefault();
         this.isDragging = true;
         this.dragIndex = index;
-        this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;
+        this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;
         this.startSizes = [...this.sizes];
         this.attachDocumentListeners();
+        this.sizesChanged.emit([...this.sizes]);
     }
     /**
      * Handles the mouse movement during dragging.
-     * @param {MouseEvent} ev - The mouse event.
+     * @param {MouseEvent} e - The mouse event.
      */
-    handleMouseMove(ev) {
-        var _a, _b, _c, _d;
+    handleMouseMove(e) {
         if (!this.isDragging || this.dragIndex < 0)
             return;
         const panes = this.getPanes();
         if (panes.length < 2)
             return;
         const rect = this.el.getBoundingClientRect();
-        // Ensure we never divide by zero if the element has zero width/height
-        const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;
-        const totalPx = Math.max(rawSize, 1);
-        const deltaPx = (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -
-            this.startPos;
+        const horizontal = this.direction === 'horizontal';
+        const totalPx = Math.max(horizontal ? rect.width : rect.height, 1);
+        const deltaPx = (horizontal ? e.clientX : e.clientY) - this.startPos;
         const deltaPct = (deltaPx / totalPx) * 100;
         const i = this.dragIndex;
         const j = i + 1;
-        let left = this.startSizes[i] + deltaPct;
-        let right = this.startSizes[j] - deltaPct;
+        const startLeft = this.startSizes[i];
+        const startRight = this.startSizes[j];
         // minSizes (px) -> %
-        const minLeftPct = (((_b = (_a = this.minSizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 0) / totalPx) * 100;
-        const minRightPct = (((_d = (_c = this.minSizes) === null || _c === void 0 ? void 0 : _c[j]) !== null && _d !== void 0 ? _d : 0) / totalPx) * 100;
-        left = Math.max(left, minLeftPct);
-        right = Math.max(right, minRightPct);
-        // Keep the sum of the pair i/j constant
-        const pairSum = left + right;
-        const targetSum = this.startSizes[i] + this.startSizes[j];
-        if (Math.abs(pairSum - targetSum) > 0.0001) {
-            const k = targetSum / (pairSum || 1);
-            left *= k;
-            right *= k;
+        let minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;
+        let minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;
+        const minSum = minLeftPct + minRightPct;
+        const availableSum = startLeft + startRight;
+        if (minSum > availableSum) {
+            const scale = availableSum / minSum;
+            minLeftPct *= scale;
+            minRightPct *= scale;
         }
+        const minDelta = minLeftPct - startLeft;
+        const maxDelta = startRight - minRightPct;
+        const clampedDelta = Math.min(Math.max(deltaPct, minDelta), maxDelta);
+        const left = startLeft + clampedDelta;
+        const right = startRight - clampedDelta;
         const next = [...this.startSizes];
         next[i] = left;
         next[j] = right;
         this.sizes = next;
         this.applySizes();
-        this.sizesChanged.emit([...this.sizes]);
         this.positionGutters();
     }
     /**
@@ -319,12 +320,13 @@ const NvSplit = class {
         this.isDragging = false;
         this.dragIndex = -1;
         this.detachDocumentListeners();
+        this.sizesChanged.emit([...this.sizes]);
     }
     //#endregion
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '6b1fd4447295f209a9b0ea95b7d2a07200204504', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '67089b66457c4ad64abb80749d64ca67c881a1c0', name: "pane" }), index.h("slot", { key: '2fe9da5dd2aa2ff5b14bdd9ea99e9f0fa027931d', name: "gutter" })));
+        return (index.h(index.Host, { key: '850cf8fb9d492e1da39da0037c1fd8d414960d28', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '4d2f540ca147abe4778bcc0d02be2e87ee2cf3b4', name: "pane" }), index.h("slot", { key: '1ceb2dc6375c50fe7786ba03fb2a753f852980ba', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -332,6 +334,6 @@ const NvSplit = class {
         "direction": ["onDirectionChanged"]
     }; }
 };
-NvSplit.style = NvSplitStyle0;
+NvSplit.style = nvSplitCss;
 
 exports.nv_split = NvSplit;

package/dist/cjs/{nv-stack.entry-D35-75Vw.js → nv-stack.entry-CqO7uTQf.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var index = require('./index-kU2nW5aN.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvStackCss = "nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";
-const NvStackStyle0 = nvStackCss;
 
 const NvStack = class {
     constructor(hostRef) {
@@ -23,9 +23,9 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '65adeb492f9eb9b709c809d65b52f4447d1c938d', class: clsx297c1ffe.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '09773d6affbc9bf3c18e75162d9c096dd31a48e7' })));
+        return (index.h(index.Host, { key: '7b44b30e42b8df1c456f70b1f3be986e2fce1617', class: clsxChV9xqsO.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: 'd38b6f0c043959ed97b3e90d21309ab832713b4e' })));
     }
 };
-NvStack.style = NvStackStyle0;
+NvStack.style = nvStackCss;
 
 exports.nv_stack = NvStack;