@nova-design-system/nova-react 3.20.0 → 3.21.1-beta.0

package/dist/cjs/nv-sidebargroup.entry-DtwFliHZ.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+require('react');
+require('react-dom');
+
+const nvSidebargroupCss = "nv-sidebargroup{display:flex;flex-direction:column;gap:var(--spacing-1)}nv-sidebargroup .nv-sidebargroup-label{display:block;font-size:var(--font-size-sm);line-height:var(--line-height-sm);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-lower-text);letter-spacing:0;padding:var(--sidebar-primary-title-padding-y) var(--sidebar-primary-title-padding-x)}nv-sidebar[collapsed] nv-sidebargroup .nv-sidebargroup-label{display:none}";
+const NvSidebargroupStyle0 = nvSidebargroupCss;
+
+const NvSidebargroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'c7b4e34d8237dc93adaa33f12d7cfda36a8ac269', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '7cafdf840b12c89604efda7895b764331c8054b7', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: 'b6567a223f7cc05ce2874a632d38d6665c255659' })));
+    }
+};
+NvSidebargroup.style = NvSidebargroupStyle0;
+
+exports.nv_sidebargroup = NvSidebargroup;

package/dist/cjs/nv-sidebarheader.entry-BdOYIXCA.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+require('react');
+require('react-dom');
+
+const nvSidebarheaderCss = "nv-sidebarheader{display:block}";
+const NvSidebarheaderStyle0 = nvSidebarheaderCss;
+
+const NvSidebarheader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '42d91f8325df19e8208ab045a057657c97bf3ff4' }, index.h("slot", { key: '42b4e5952fd55b95fe2934297929cef3bd1b226c' })));
+    }
+};
+NvSidebarheader.style = NvSidebarheaderStyle0;
+
+exports.nv_sidebarheader = NvSidebarheader;

package/dist/cjs/nv-sidebarlogo.entry-Da0kGsfw.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+require('react');
+require('react-dom');
+
+const nvSidebarlogoCss = "nv-sidebarlogo{display:block}nv-sidebarlogo .nv-sidebarlogo-container{display:flex;align-items:center;gap:var(--spacing-3)}nv-sidebarlogo .nv-sidebarlogo-full,nv-sidebarlogo .nv-sidebarlogo-collapsed{height:var(--spacing-8);width:auto;object-fit:contain}nv-sidebarlogo .nv-sidebarlogo-collapsed{display:none}nv-sidebarlogo .nv-sidebarlogo-title{font-size:var(--nv-sidebarlogo-font-size, var(--font-size-md));font-weight:var(--nv-sidebarlogo-font-weight, var(--font-weight-high-emphasis));font-family:var(--nv-sidebarlogo-font-family, inherit);color:var(--color-content-high-text);white-space:nowrap;overflow:hidden;transition:opacity 0.2s ease, max-width 0.3s ease, margin-left 0.3s ease;max-width:200px;opacity:1}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-full{display:none}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-collapsed{display:block}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-title{max-width:0;opacity:0;margin-left:0}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-container{justify-content:center;align-items:center;gap:0;width:100%;min-height:var(--spacing-12);padding:0}";
+const NvSidebarlogoStyle0 = nvSidebarlogoCss;
+
+const NvSidebarlogo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region CONSTANTS
+        // Default Nova logo SVG (expanded - icon only, text comes from label prop)
+        this.defaultLogo = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class="cls-1" d="M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z"/%3E%3Cpath class="cls-1" d="M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z"/%3E%3Cpath class="cls-1" d="M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z"/%3E%3Cpath class="cls-1" d="M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z"/%3E%3Cpath class="cls-1" d="M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z"/%3E%3C/svg%3E';
+        // Default Nova icon (collapsed - same logo but will be displayed smaller)
+        this.defaultCollapsedLogo = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class="cls-1" d="M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z"/%3E%3Cpath class="cls-1" d="M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z"/%3E%3Cpath class="cls-1" d="M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z"/%3E%3Cpath class="cls-1" d="M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z"/%3E%3Cpath class="cls-1" d="M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z"/%3E%3C/svg%3E';
+    }
+    //#endregion CONSTANTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const logoSrc = this.logo || this.defaultLogo;
+        const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
+        return (index.h(index.Host, { key: 'ec2aba08293e4def2fe083c311b69cafe005cf5e' }, index.h("div", { key: '3a24d832a0bb5aa44264fe1fc3091878556649bd', class: "nv-sidebarlogo-container" }, index.h("img", { key: 'a9a08e7c5dd51902d9ffbda0d9216a4ffb186756', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: 'daef311e11c8d5ee6b823a4896be36ea5bd696cc', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), this.label && index.h("span", { key: '9685e4c110e7bb7356f5d49b615105033a32a736', class: "nv-sidebarlogo-title" }, this.label))));
+    }
+};
+NvSidebarlogo.style = NvSidebarlogoStyle0;
+
+exports.nv_sidebarlogo = NvSidebarlogo;

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

@@ -0,0 +1,297 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+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-primary-item-gap-x);padding:var(--sidebar-primary-item-padding-y) var(--sidebar-primary-item-padding-x);border-radius:var(--sidebar-primary-item-radius);cursor:pointer;transition:all 0.15s ease;font-size:var(--sidebar-primary-item-font-size);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-low-text);background:var(--color-interaction-container-neutral-background);text-decoration:none;--nv-component-background:var(--color-interaction-container-neutral-background);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-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-primary-item-icon-size);height:var(--sidebar-primary-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-primary-notification-bullet-size-reduced:calc(\n    var(--sidebar-primary-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;width:100%}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 NvSidebarnavitemStyle0 = nvSidebarnavitemCss;
+
+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 === null || link === void 0 ? void 0 : 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 = () => {
+            var _a;
+            const sidebar = this.el.closest('nv-sidebar');
+            const wasCollapsed = this.isSidebarCollapsed;
+            this.isSidebarCollapsed = (_a = sidebar === null || sidebar === void 0 ? void 0 : sidebar.hasAttribute('collapsed')) !== null && _a !== void 0 ? _a : 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: 'c0c9c63cb295441389b5ced9a4b0a0d5a1af99cd', role: "listitem" }, index.h("div", { key: '6673c3f4c14762bff8512ecc430febddfa74b307', 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: '25f703e9fb7375b8b562be54f080120ae037dd9f', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '1a4e345c90afcec159890db6c6b0e22d53dd673d', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '15b69d1a2325daed7d6583ed10906fe4e91809e5', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'c717c09f39eab07616de419a35b11a5b7dfce5d1', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: '9f8687f151fd082a6737e7fbe6036cc3ebff3cc2' })), index.h("div", { key: 'b2c3d7a4c30ce96273731a05a1d361f5654582de', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: 'acf2dddbbbc7d2e83703c731a244237e0dc81153', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: 'adca5c7418a3b58afa5ef21ddd3fa9b2d880a56c', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: 'a4a4369d4ba76f567cca439d1b4c7e95ad5ba98c', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: '2d4fadb0b547eb369a702bb8210b3312dde505b2', 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: 'f0ffb970aa2d84580205ba110858d3f1c27875a3', name: "subitems" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["onOpenChanged"]
+    }; }
+};
+NvSidebarnavitem.style = NvSidebarnavitemStyle0;
+
+exports.nv_sidebarnavitem = NvSidebarnavitem;

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

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+require('react');
+require('react-dom');
+
+const nvSidebarnavsubitemCss = "nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--list-dropdown-sub-item-padding-left);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-primary-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-orange-600);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 NvSidebarnavsubitemStyle0 = nvSidebarnavsubitemCss;
+
+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: '8ae8c5e2038145bd458a35d237495a06fde97294', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: '559a99d72973f7af43091c5c920e77d8cad3944c', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '204c7ad681d51310f43b618ef14a12d0ccc93ddc', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'f4717aee216fbeac4dbfe0d98b34fe7e83476701' })), index.h("div", { key: 'b5db84c75ae4e51d8a048000a49697eaf4b20f1d', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: 'b6d0afcd6b4ace60b32f531f414b70aba513a274', name: "trailing" }))));
+    }
+};
+NvSidebarnavsubitem.style = NvSidebarnavsubitemStyle0;
+
+exports.nv_sidebarnavsubitem = NvSidebarnavsubitem;

package/dist/cjs/{nv-split.entry-BrMHK6TS.js → nv-split.entry-y66NBf88.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BObVnP12.js');
+var index = require('./index-CEKdYnmK.js');
 require('react');
 require('react-dom');
 
@@ -324,7 +324,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd0bcb4330d157fa239289fa7176c502bfe01d0b8', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '490799f805f0833e5a33b480e205c8deb65f215b', name: "pane" }), index.h("slot", { key: '69d05ed6f6bbeac1f123ac100c753cf78ced3f08', name: "gutter" })));
+        return (index.h(index.Host, { key: 'df6a2141e14d1f691af162d1eae2e2763ffad014', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: 'ce9d941bc73fa6e12161f334d4cd86e9045f6271', name: "pane" }), index.h("slot", { key: 'a70c14b0989a758ad35dc3c611563f7d03be0d02', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-stack.entry-C8jLJ5Ki.js → nv-stack.entry-CXjpkpbW.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BObVnP12.js');
+var index = require('./index-CEKdYnmK.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');
@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', 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: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
+        return (index.h(index.Host, { key: 'fbdaf5b2fb134b050883a512b4aeb96b070017c1', 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: '6c7c231b8ff2575a1b509539d227468629fae6ab' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/{nv-table.entry-D6o4g9Vo.js → nv-table.entry-quaVnLru.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BObVnP12.js');
+var index = require('./index-CEKdYnmK.js');
 require('react');
 require('react-dom');
 
@@ -236,7 +236,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, index.h("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
+        return (index.h(index.Host, { key: 'ec194bed7ec58642be9f6b52a737e2f9375a152e' }, index.h("slot", { key: '009ce0f20491156ca93141c85683f0be499a9938' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/nv-tableheader.entry-DTBE2XQO.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+require('react');
+require('react-dom');
+
+const nvTableheaderCss = "nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}";
+const NvTableheaderStyle0 = nvTableheaderCss;
+
+const NvTableheader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sortDirectionChanged = index.createEvent(this, "sortDirectionChanged");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Will render the header as sortable with the corresponding icon button.
+         * Allows the header to be tabbed, and trigger sorting via click or keyboard
+         * navigation
+         */
+        this.sortable = false;
+        /**
+         * The current sort direction of the header. Will be 'none' if the header is
+         * not sortable or if the sort direction is not set.
+         */
+        this.sortDirection = 'none';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    cycleSortDirection(e) {
+        if (!this.sortable)
+            return;
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        const next = {
+            none: 'asc',
+            asc: 'desc',
+            desc: 'none',
+        };
+        this.sortDirection = next[this.sortDirection];
+        this.sortDirectionChanged.emit(this.sortDirection);
+    }
+    handleKeyDown(event) {
+        if (!this.sortable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.cycleSortDirection();
+        }
+    }
+    get ariaSort() {
+        const sortMap = {
+            none: 'none',
+            asc: 'ascending',
+            desc: 'descending',
+        };
+        if (!this.sortable)
+            return sortMap.none;
+        return sortMap[this.sortDirection];
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '6719336a9812b1d1abd161b955b841c1459fb584', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: 'd559e3b7c74f6dcf8197e2d082310660a23291d6' }), this.sortable && (index.h("span", { key: '540c8c8cf3cccac47a3ece7d9be4e97c4e283690', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: 'ac713c7af3b5b2e452f02d0d77cb64398b0febd4', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+            // prevent mousedown from selecting text
+            onMouseDown: (e) => e.preventDefault(), class: {
+                'is-none': this.sortDirection === 'none',
+                'is-desc': this.sortDirection === 'desc',
+            } })))));
+    }
+};
+NvTableheader.style = NvTableheaderStyle0;
+
+exports.nv_tableheader = NvTableheader;

package/dist/cjs/{nv-toggle.entry-9iwmu7qi.js → nv-toggle.entry-CxUwF0pb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BObVnP12.js');
+var index = require('./index-CEKdYnmK.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '65222149af4edb9f8fd2da7efe9a01e15dec4722', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '7edd5587281b5610269f1ac09826ce379abfae24', class: "input-container" }, index.h("input", { key: '30d3db3cbdc263259a5ba1bf8e637225c4db3b4a', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'a8a6d3c2774560b7d43cda75882d90cc564f4c54', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fe980a07df4901081fda42df758236da0b8a11d0', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '723cec5914c6c0bed7e14e61e2f64e83c8e8b7b8', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f811065ed06f0816d8f0f1f65d4c659cbde3f683', class: "description" }, index.h("slot", { key: '541946e3f33a315bf667999c30a44fd93fc5f07f', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '1a217a31999750cb1c8f26af5407ef2d7277600c', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '35e39e8df6475ffa41cd8b811948454ba956e814', class: "input-container" }, index.h("input", { key: '359a584d868d37affcb7b5fe5c24fef71eae209e', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '3bc4c7d7ef8bca23391ede4b08eb596bab68289a', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '61be38f883222b69807c0e8b8540f6ad20ed0cf4', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'e5ad1f81fc6e98794931b5e6dc811d9cc6aa9c73', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f1f0d41c28be40b24e17d9f6f29224fbb2f9f05e', class: "description" }, index.h("slot", { key: '5418c3c3195045200e9ad0eb4bc6438eee453fd9', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }