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

package/dist/cjs/{nv-notificationcontainer.entry-DV4D6oOH.js → nv-notificationcontainer.entry-DTRNn7VE.js}

@@ -1,11 +1,11 @@
 '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 nvNotificationcontainerCss = "nv-notificationcontainer{position:fixed;display:flex;flex-direction:column;padding:var(--spacing-2);padding-top:0;z-index:9999;pointer-events:none;width:100%;max-width:512px}nv-notificationcontainer.position-top-right{top:0;right:0}nv-notificationcontainer.position-top-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-top-left{top:0;left:0}nv-notificationcontainer.position-top-left nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-top-center{top:0;left:50%;transform:translateX(-50%)}nv-notificationcontainer.position-top-center nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-bottom-right{bottom:0;right:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-left{bottom:0;left:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-left nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-center{bottom:0;left:50%;transform:translateX(-50%);flex-direction:column-reverse}nv-notificationcontainer.position-bottom-center nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer>*{pointer-events:auto}";
-const NvNotificationcontainerStyle0 = nvNotificationcontainerCss;
 
 const NvNotificationContainer = class {
     constructor(hostRef) {
@@ -33,9 +33,9 @@ const NvNotificationContainer = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'bf0b7cd02e0d214516f352eb7016d6060d6959c5', class: `position-${this.position}` }, index.h("slot", { key: 'f042e3f11b4d2af4b47aadeba04a332c57889616' })));
+        return (index.h(index.Host, { key: '5dee0dc22cb8917d8134e2f256996118e3e30b42', class: `position-${this.position}` }, index.h("slot", { key: '14664d70fb1840877d80eda1b3c7804457ffa67f' })));
     }
 };
-NvNotificationContainer.style = NvNotificationcontainerStyle0;
+NvNotificationContainer.style = nvNotificationcontainerCss;
 
 exports.nv_notificationcontainer = NvNotificationContainer;

package/dist/cjs/{nv-popover.entry-DQSwI2jT.js → nv-popover.entry-B0c-2rO4.js}

@@ -1,12 +1,19 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
-var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
-var grow_animation24ad5cf8 = require('./grow.animation-24ad5cf8-LUp_ITEx.js');
-require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
+var index = require('./index-kU2nW5aN.js');
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+var grow_animationD7ep_aVl = require('./grow.animation-D7ep_aVl-BuXEDSK-.js');
+require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+var events_utilsB6GgGra_ = require('./events.utils-B6GgGra--01N__3wY.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -843,7 +850,6 @@ function getOverflowAncestors(node, list, traverseIframes) {
   const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
   const win = getWindow(scrollableAncestor);
   if (isBody) {
-    getFrameElement(win);
     return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], []);
   }
   return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, []));
@@ -1409,7 +1415,7 @@ const cleanupElements = debounce((map) => {
     for (let key of map.keys()) {
         map.set(key, map.get(key).filter(isConnected));
     }
-}, 2000);
+}, 2_000);
 const stencilSubscription = () => {
     if (typeof index.getRenderingRef !== 'function') {
         // If we are not in a stencil project, we do nothing.
@@ -1442,18 +1448,19 @@ const stencilSubscription = () => {
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
     const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    let states = new Map(Object.entries(unwrappedState ?? {}));
     const handlers = {
         dispose: [],
         get: [],
         set: [],
         reset: [],
     };
+    // Track onChange listeners to enable removeListener functionality
+    const changeListeners = new Map();
     const reset = () => {
-        var _a;
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
-        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -1503,17 +1510,21 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         };
     };
     const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
+        const setHandler = (key, newValue) => {
             if (key === propName) {
                 cb(newValue);
             }
-        });
-        // We need to unwrap the defaultState because it might be a function.
-        // Otherwise we might not be sending the right reset value.
-        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        };
+        const resetHandler = () => cb(unwrap(defaultState)[propName]);
+        // Register the handlers
+        const unSet = on('set', setHandler);
+        const unReset = on('reset', resetHandler);
+        // Track the relationship between the user callback and internal handlers
+        changeListeners.set(cb, { setHandler, resetHandler, propName });
         return () => {
             unSet();
             unReset();
+            changeListeners.delete(cb);
         };
     };
     const use = (...subscriptions) => {
@@ -1538,6 +1549,15 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(key);
         handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
     };
+    const removeListener = (propName, listener) => {
+        const listenerInfo = changeListeners.get(listener);
+        if (listenerInfo && listenerInfo.propName === propName) {
+            // Remove the specific handlers that were created for this listener
+            removeFromArray(handlers.set, listenerInfo.setHandler);
+            removeFromArray(handlers.reset, listenerInfo.resetHandler);
+            changeListeners.delete(listener);
+        }
+    };
     return {
         state,
         get,
@@ -1548,6 +1568,7 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         dispose,
         reset,
         forceUpdate,
+        removeListener,
     };
 };
 const removeFromArray = (array, item) => {
@@ -1565,7 +1586,6 @@ const createStore = (defaultState, shouldUpdate) => {
 };
 
 const nvPopoverCss = "nv-popover{display:inline-block;position:relative}nv-popover:has([fluid]:not([fluid=false])){display:block}nv-popover[strategy=fixed]{position:static}nv-popover>[data-scope=popover]{width:max-content;background-color:var(--components-popover-background);border-color:var(--components-popover-border);font-weight:var(--font-weight-medium-emphasis);border-width:1px;border-style:solid;border-radius:var(--popover-radius);padding:var(--popover-padding-y) var(--popover-padding-x);position:absolute;top:0;left:0;z-index:1;box-shadow:var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity)}nv-popover>[data-scope=popover][hidden]:not([hidden=false]){display:none}nv-popover>[data-scope=popover][data-strategy=fixed]{position:fixed;z-index:9999}nv-popover>[data-scope=popover]>[data-scope=arrow]{background-color:var(--components-popover-background);position:absolute;border-color:var(--components-popover-border);border-width:1px;border-style:solid;border-bottom-color:transparent;border-right-color:transparent;width:8px;height:8px;transform:rotate(45deg);border-radius:1px}nv-popover>[data-scope=popover]>[slot=content]{position:relative;z-index:1}nv-popover>slot-fb{display:none}";
-const NvPopoverStyle0 = nvPopoverCss;
 
 const { state } = createStore({
     groups: new Map(),
@@ -1573,7 +1593,7 @@ const { state } = createStore({
 const NvPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.openChanged = index.createEvent(this, "openChanged");
+        this.openChanged = index.createEvent(this, "openChanged", 3);
         this.eventsAttached = false;
         this.isAnimating = false;
         this.clickEvents = [
@@ -1680,11 +1700,10 @@ const NvPopover = class {
          * @param {MouseEvent | TouchEvent} event - The event object.
          */
         this.handleClickOutside = (event) => {
-            var _a;
             // This popover should close when the user clicks outside of it.
             if (this.el.contains(event.target))
                 return;
-            if ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target))
+            if (this.triggerElement?.contains(event.target))
                 return;
             this.open = false;
         };
@@ -1724,14 +1743,14 @@ const NvPopover = class {
      */
     attachEventListeners() {
         if (this.triggerElement && !this.eventsAttached) {
-            grow_animation24ad5cf8.addEventListeners(this.closeEvents, document, this);
+            events_utilsB6GgGra_.addEventListeners(this.closeEvents, document, this);
             if (this.triggerMode === 'click') {
-                grow_animation24ad5cf8.addEventListeners(this.clickEvents, this.triggerElement, this);
+                events_utilsB6GgGra_.addEventListeners(this.clickEvents, this.triggerElement, this);
                 // Add document click and touch listeners
-                grow_animation24ad5cf8.addEventListeners(this.outsideClickEvents, document, this);
+                events_utilsB6GgGra_.addEventListeners(this.outsideClickEvents, document, this);
             }
             if (this.triggerMode === 'hover') {
-                grow_animation24ad5cf8.addEventListeners(this.hoverEvents, this.triggerElement, this);
+                events_utilsB6GgGra_.addEventListeners(this.hoverEvents, this.triggerElement, this);
             }
             this.eventsAttached = true;
         }
@@ -1806,11 +1825,11 @@ const NvPopover = class {
             state.groups.delete(this.groupName);
         if (this.groupName && open)
             state.groups.set(this.groupName, { openedBy: this.el });
-        const { growIn } = grow_animation24ad5cf8.useGrow(this.popoverElement, {
+        const { growIn } = grow_animationD7ep_aVl.useGrow(this.popoverElement, {
             duration: isOtherMemberOpen ? 0 : 100,
             amount: 0.85,
         });
-        const { fadeOut } = fade_animation9b939939.useFade(this.popoverElement, {
+        const { fadeOut } = fade_animationDcRL9lcm.useFade(this.popoverElement, {
             duration: isOtherMemberOpen ? 0 : 100,
         });
         if (open === true) {
@@ -1832,21 +1851,6 @@ const NvPopover = class {
     }
     //#endregion WATCHERS
     /****************************************************************************/
-    //#region LISTENERS
-    handleOpenChanged(event) {
-        var _a;
-        if (this.triggerMode === 'controlled')
-            return;
-        if (this.nested)
-            return;
-        if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.hasAttribute('nested'))
-            return;
-        // This popover should close when another one is opened.
-        if (event.target !== this.el && event.detail === true)
-            this.open = false;
-    }
-    //#endregion LISTENERS
-    /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
         if (!this.triggerElement)
@@ -1858,11 +1862,11 @@ const NvPopover = class {
     componentDidLoad() {
         // Initial inline style setup
         if (!this.open) {
-            const { setGrowOut } = grow_animation24ad5cf8.useGrow(this.popoverElement);
+            const { setGrowOut } = grow_animationD7ep_aVl.useGrow(this.popoverElement);
             setGrowOut();
         }
         else {
-            const { setFadeIn } = fade_animation9b939939.useFade(this.popoverElement);
+            const { setFadeIn } = fade_animationDcRL9lcm.useFade(this.popoverElement);
             setFadeIn();
             this.popoverElement.removeAttribute('hidden');
         }
@@ -1870,14 +1874,14 @@ const NvPopover = class {
         this.attachEventListeners();
     }
     disconnectedCallback() {
-        grow_animation24ad5cf8.removeEventListeners(this.closeEvents, document, this);
+        events_utilsB6GgGra_.removeEventListeners(this.closeEvents, document, this);
         if (this.triggerMode === 'click') {
-            grow_animation24ad5cf8.removeEventListeners(this.clickEvents, this.triggerElement, this);
+            events_utilsB6GgGra_.removeEventListeners(this.clickEvents, this.triggerElement, this);
             // Remove document listeners
-            grow_animation24ad5cf8.removeEventListeners(this.outsideClickEvents, document, this);
+            events_utilsB6GgGra_.removeEventListeners(this.outsideClickEvents, document, this);
         }
         if (this.triggerMode === 'hover')
-            grow_animation24ad5cf8.removeEventListeners(this.hoverEvents, this.triggerElement, this);
+            events_utilsB6GgGra_.removeEventListeners(this.hoverEvents, this.triggerElement, this);
         // Reset flag so events can be reattached if component is reconnected
         this.eventsAttached = false;
         // Clean up any pending timeouts
@@ -1890,7 +1894,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c54fc90b90bbe48b0410c750bf4ba97e51eb24e5' }, index.h("slot", { key: 'd957fba61d4e91d8afd85f14b602290c88e5128a', name: "trigger" }), index.h("div", { key: '548c798fc047d41c06d8a84cc9a4f65a4cbf75b5', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'd3c6e110e2c3f45ba0ed5c69b99f0a60413cbb39', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '20c2d8e3ff0ed3d3b9957513e19586e4aa4a39ca', name: "content" }))));
+        return (index.h(index.Host, { key: '3505c77a628a1c612d937703777b72459a71e256' }, index.h("slot", { key: '36596c5ca1b182ed5d9f723b81398cf54923bd83', name: "trigger" }), index.h("div", { key: 'efc6da5c69cefad2611f0b9fa96d072ddc48d07a', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '9439cf1c7fdadfd9538c4ed186d4c54300d00e95', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '868cd1ce1ac648f4446aa6d4f86069551c208d1f', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1898,6 +1902,6 @@ const NvPopover = class {
         "strategy": ["handleStrategyChange"]
     }; }
 };
-NvPopover.style = NvPopoverStyle0;
+NvPopover.style = nvPopoverCss;
 
 exports.nv_popover = NvPopover;

package/dist/cjs/{nv-row.entry-UUuMSAY5.js → nv-row.entry-CdcjVGZv.js}

@@ -1,11 +1,11 @@
 '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 nvRowCss = "nv-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--spacing-4) * -1);margin-left:calc(var(--spacing-4) * -1);row-gap:var(--spacing-4)}";
-const NvRowStyle0 = nvRowCss;
 
 const NvRow = class {
     constructor(hostRef) {
@@ -14,9 +14,9 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
+        return (index.h(index.Host, { key: 'fda91377821b426a6cbc6ade6f253144a388fb62' }, index.h("slot", { key: '5d7cc9aa4d4ad0b251aa5c028adfddade4e4d1c4' })));
     }
 };
-NvRow.style = NvRowStyle0;
+NvRow.style = nvRowCss;
 
 exports.nv_row = NvRow;

package/dist/cjs/nv-sidebar.entry-CiN813gQ.js

@@ -0,0 +1,177 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarCss = "nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--components-sidebar-background);border-right:var(--sidebar-divider-size) solid var(--components-sidebar-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-width-collapsed)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed)}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--sidebar-padding-y) var(--sidebar-padding-x);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--sidebar-collapsible-button-position-top);right:calc(-1 * var(--sidebar-collapsible-button-position-right));display:flex;align-items:center;justify-content:center;padding:var(--sidebar-collapsible-button-padding);background-color:var(--components-sidebar-background);border:1px solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-interaction-container-neutral-background-hover)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-icon)}nv-sidebar .nv-sidebar-toggle nv-icon:hover{color:var(--color-interaction-container-neutral-icon-hover)}";
+
+const NvSidebar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged", 3);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The type of sidebar behavior.
+         * - collapsible: Can be toggled open/closed
+         * - persistent: Always visible
+         */
+        this.type = 'persistent';
+        /**
+         * Whether the sidebar is currently open (only applies to collapsible type).
+         */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.open = true;
+        /**
+         * Determines the type of notification bullets in the sidebar.
+         * - neutral: Uses neutral colors (gray)
+         * - brand: Uses brand colors (orange/teal depending on theme)
+         */
+        this.notificationIntention = 'brand';
+        /**
+         * Determines the emphasis of notification bullets in the sidebar.
+         * - high: More prominent appearance
+         * - low: Less prominent appearance
+         */
+        this.notificationEmphasis = 'high';
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleToggle = () => {
+            if (this.type === 'collapsible') {
+                // Changing open will trigger @Watch which emits the event
+                this.open = !this.open;
+            }
+        };
+        /**
+         * Sets the active state of navigation items based on activePath
+         */
+        this.setActiveNavItems = () => {
+            if (!this.activePath)
+                return;
+            // First, check all subitems to find if any matches exactly
+            const activeSubitemHrefs = new Set();
+            this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {
+                const link = subItem.querySelector('a');
+                const href = link?.getAttribute('href');
+                if (href) {
+                    const isActive = this.activePath === href;
+                    subItem.active = isActive;
+                    if (isActive) {
+                        activeSubitemHrefs.add(href);
+                    }
+                }
+            });
+            // Then, set nav items active only if:
+            // 1. Exact match with activePath AND no subitem matches
+            // 2. OR the navitem has no subitems and activePath starts with its href
+            this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {
+                const link = navItem.querySelector(':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a');
+                const href = link?.getAttribute('href');
+                const hasSubitems = navItem.querySelector('nv-sidebarnavsubitem') !== null;
+                if (href) {
+                    if (hasSubitems) {
+                        // Parent with subitems: only active if exact match (not when subitem is active)
+                        navItem.active = this.activePath === href;
+                    }
+                    else {
+                        // Item without subitems: active on exact match
+                        navItem.active = this.activePath === href;
+                    }
+                }
+            });
+        };
+        this.pendingActiveUpdate = null;
+        /**
+         * Sets up the MutationObserver to watch for changes in child elements.
+         * Only triggers on new nav items being added, not on attribute changes.
+         */
+        this.setupMutationObserver = () => {
+            this.mutationObserver = new MutationObserver(mutations => {
+                // Only react to new nav items being added, ignore other mutations
+                const hasNewNavItems = mutations.some(mutation => {
+                    if (mutation.type !== 'childList')
+                        return false;
+                    return Array.from(mutation.addedNodes).some(node => {
+                        if (node.nodeType !== Node.ELEMENT_NODE)
+                            return false;
+                        const el = node;
+                        return (el.tagName.toLowerCase() === 'nv-sidebarnavitem' ||
+                            el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' ||
+                            el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem'));
+                    });
+                });
+                if (hasNewNavItems) {
+                    // Debounce to prevent multiple rapid calls
+                    if (this.pendingActiveUpdate) {
+                        clearTimeout(this.pendingActiveUpdate);
+                    }
+                    this.pendingActiveUpdate = window.setTimeout(() => {
+                        this.setActiveNavItems();
+                        this.pendingActiveUpdate = null;
+                    }, 50);
+                }
+            });
+            this.mutationObserver.observe(this.el, {
+                childList: true,
+                subtree: true,
+            });
+        };
+    }
+    handleCollapsedSideEffects(isCollapsed) {
+        if (!isCollapsed) {
+            return;
+        }
+        this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {
+            navItem.open = false;
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    onActivePathChanged() {
+        this.setActiveNavItems();
+    }
+    onOpenChanged(newValue, oldValue) {
+        this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);
+        // Only emit event when open state actually changes (not on re-render with same value)
+        if (this.type === 'collapsible' && newValue !== oldValue) {
+            this.openChanged.emit(newValue);
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.setActiveNavItems();
+        this.setupMutationObserver();
+        this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+        if (this.pendingActiveUpdate) {
+            clearTimeout(this.pendingActiveUpdate);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const isCollapsed = this.type === 'collapsible' && !this.open;
+        return (index.h(index.Host, { key: 'ac14d7b4027c06d1aa19b1b6c7de3f0d2e231b1a', role: "navigation", collapsed: isCollapsed ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, index.h("div", { key: 'e567303c87a2308747290fae95d7ade9971cd67a', class: "nv-sidebar-container" }, index.h("slot", { key: '0b2e0e1b1721aae3c0f910500bde3c2db92f879b' })), this.type === 'collapsible' && (index.h("button", { key: '493204449f3bb9aedd5a34cb238242aadd61324b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '0e389c1c6c92f02f7c1e39fc07ef17a469b1e0f2', name: this.open
+                ? 'layout-sidebar-left-collapse'
+                : 'layout-sidebar-right-collapse', size: "sm" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "activePath": ["onActivePathChanged"],
+        "open": ["onOpenChanged"]
+    }; }
+};
+NvSidebar.style = nvSidebarCss;
+
+exports.nv_sidebar = NvSidebar;

package/dist/cjs/nv-sidebarcontent.entry-D9hpAhK8.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarcontentCss = "nv-sidebarcontent{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}";
+
+const NvSidebarcontent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'c72a3de4460c4de37c2008ec4d777771d8771d32', role: "list" }, index.h("slot", { key: '8d08c073aebf079dbb9062bb183370e4dc4d9fe8' })));
+    }
+};
+NvSidebarcontent.style = nvSidebarcontentCss;
+
+exports.nv_sidebarcontent = NvSidebarcontent;

package/dist/cjs/nv-sidebardivider.entry-B4EMyca5.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebardividerCss = "nv-sidebardivider{display:block;height:var(--sidebar-divider-size);background-color:var(--components-sidebar-divider)}";
+
+const NvSidebardivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return index.h(index.Host, { key: '157045ee7209aa55574c54c2392f1e53d6cdba1e', role: "separator", "aria-orientation": "horizontal" });
+    }
+};
+NvSidebardivider.style = nvSidebardividerCss;
+
+exports.nv_sidebardivider = NvSidebardivider;

package/dist/cjs/nv-sidebarfooter.entry-CHi4qOFe.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarfooterCss = "nv-sidebarfooter{display:block;margin-top:auto}";
+
+const NvSidebarfooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'be19b80fc56a296999532d986d477dcbd817a9f2' }, index.h("slot", { key: '55b3e91dab40b923d67eb140be42fd2483951254' })));
+    }
+};
+NvSidebarfooter.style = nvSidebarfooterCss;
+
+exports.nv_sidebarfooter = NvSidebarfooter;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebargroupCss = "nv-sidebargroup{display:flex;flex-direction:column;gap:var(--sidebar-group-gap-y)}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-title-padding-y) var(--sidebar-title-padding-x)}nv-sidebar[collapsed] nv-sidebargroup .nv-sidebargroup-label{display:none}";
+
+const NvSidebargroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '64b17f621fef826a4105dfa39fbc57013bad0abc', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '48e36725296ecc87da7d15606977fbe616dd4aa3', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '61aaf8541e9372220df24dcf9cf0b5b43e22e19b' })));
+    }
+};
+NvSidebargroup.style = nvSidebargroupCss;
+
+exports.nv_sidebargroup = NvSidebargroup;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarheaderCss = "nv-sidebarheader{display:block}";
+
+const NvSidebarheader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '2c9c0c109138ed3a23cb8f1a2fb78f29f93a4056' }, index.h("slot", { key: 'a928008023c6ce8a77aafbe0042ec8ed72e9c32d' })));
+    }
+};
+NvSidebarheader.style = nvSidebarheaderCss;
+
+exports.nv_sidebarheader = NvSidebarheader;

package/dist/cjs/nv-sidebarlogo.entry-Ch9F-JnT.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+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 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: '0d14763dcb7b1b961f2b32a7be44d8a8116087bb' }, index.h("div", { key: '78c2a6578cc48298aa88baf946954d79d36894db', class: "nv-sidebarlogo-container" }, index.h("img", { key: 'd4dd86b4d4a00bedfab84fd987d46e5e83fcb5a6', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: 'c0382d6fb18fbc17a21bb411fde64dcd255f42a5', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), this.label && index.h("span", { key: 'f75152415bb2569698a5cae856c6b26a202f8c7d', class: "nv-sidebarlogo-title" }, this.label))));
+    }
+};
+NvSidebarlogo.style = nvSidebarlogoCss;
+
+exports.nv_sidebarlogo = NvSidebarlogo;