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

package/dist/cjs/{nv-popover.entry-1KsO_KQm.js → nv-popover.entry-mLdLSp6n.js}

@@ -1,12 +1,18 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.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-CtjeeUI-.js');
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+var grow_animationCvHGHBL4 = require('./grow.animation-CvHGHBL4-DDIEYBK-.js');
+require('./style-value-types.es-xlgmw4x8-B1vLqX9m.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 +849,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 +1414,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 +1447,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 +1509,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 +1548,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 +1567,7 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         dispose,
         reset,
         forceUpdate,
+        removeListener,
     };
 };
 const removeFromArray = (array, item) => {
@@ -1565,7 +1585,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 +1592,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 = [
@@ -1724,14 +1743,14 @@ const NvPopover = class {
      */
     attachEventListeners() {
         if (this.triggerElement && !this.eventsAttached) {
-            grow_animation24ad5cf8.addEventListeners(this.closeEvents, document, this);
+            grow_animationCvHGHBL4.addEventListeners(this.closeEvents, document, this);
             if (this.triggerMode === 'click') {
-                grow_animation24ad5cf8.addEventListeners(this.clickEvents, this.triggerElement, this);
+                grow_animationCvHGHBL4.addEventListeners(this.clickEvents, this.triggerElement, this);
                 // Add document click and touch listeners
-                grow_animation24ad5cf8.addEventListeners(this.outsideClickEvents, document, this);
+                grow_animationCvHGHBL4.addEventListeners(this.outsideClickEvents, document, this);
             }
             if (this.triggerMode === 'hover') {
-                grow_animation24ad5cf8.addEventListeners(this.hoverEvents, this.triggerElement, this);
+                grow_animationCvHGHBL4.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_animationCvHGHBL4.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_animationCvHGHBL4.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);
+        grow_animationCvHGHBL4.removeEventListeners(this.closeEvents, document, this);
         if (this.triggerMode === 'click') {
-            grow_animation24ad5cf8.removeEventListeners(this.clickEvents, this.triggerElement, this);
+            grow_animationCvHGHBL4.removeEventListeners(this.clickEvents, this.triggerElement, this);
             // Remove document listeners
-            grow_animation24ad5cf8.removeEventListeners(this.outsideClickEvents, document, this);
+            grow_animationCvHGHBL4.removeEventListeners(this.outsideClickEvents, document, this);
         }
         if (this.triggerMode === 'hover')
-            grow_animation24ad5cf8.removeEventListeners(this.hoverEvents, this.triggerElement, this);
+            grow_animationCvHGHBL4.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: '8ef71227900185e903bd0003771074ba5d071aac' }, index.h("slot", { key: '84ccbb797f486d76ed650b50e5004bffc2521ddb', name: "trigger" }), index.h("div", { key: '66dc1bf520a2bf6f0a1c4e91b091b0b4941807c4', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'a1ab4831292b9ab60ebfd8dd478c3685944dbe79', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '2d9ee411891f956ff3ccd7b74d956e5b952e1af0', 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-PBLq_BzJ.js → nv-row.entry-C2C94fcv.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.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) {
@@ -17,6 +17,6 @@ const NvRow = class {
         return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
     }
 };
-NvRow.style = NvRowStyle0;
+NvRow.style = nvRowCss;
 
 exports.nv_row = NvRow;

package/dist/cjs/{nv-sidebar.entry-CjLbvLqw.js → nv-sidebar.entry-inDVNJ4s.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.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(--color-level-00-background);border-right:var(--sidebar-primary-separator-size) solid var(--color-content-low-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-reduced-max-width)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--spacing-6) var(--spacing-5)}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--spacing-6);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--spacing-8);right:calc(var(--spacing-8) / -2);display:flex;align-items:center;justify-content:center;width:var(--spacing-8);height:var(--spacing-8);padding:var(--sidebar-collapsible-button-padding);background-color:var(--color-level-00-background);border:var(--sidebar-primary-separator-size) 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-level-10-background)}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)}";
-const NvSidebarStyle0 = nvSidebarCss;
+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");
+        this.openChanged = index.createEvent(this, "openChanged", 3);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -134,6 +134,13 @@ const NvSidebar = class {
     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
@@ -142,13 +149,6 @@ const NvSidebar = class {
         this.setupMutationObserver();
         this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);
     }
-    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);
-        }
-    }
     disconnectedCallback() {
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
@@ -162,7 +162,7 @@ const NvSidebar = class {
     //#region RENDER
     render() {
         const isCollapsed = this.type === 'collapsible' && !this.open;
-        return (index.h(index.Host, { key: 'af78cae6f6cd895dbef098e549e63ac8baace243', 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: '28a2ec38d36308d803362d361a243dc5c1b6083e', class: "nv-sidebar-container" }, index.h("slot", { key: 'c4d85987d256e89508392b6e28fdb74be9140ccb' })), this.type === 'collapsible' && (index.h("button", { key: 'a34c2b6a0be9b1bd494ac542db3ed096c81e32f9', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '8905351a55b339106a4c7bb5cf61582a98dd31a5', name: this.open
+        return (index.h(index.Host, { key: '79f262f95af40b330d5640273f7a6059f672068b', 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: '348023343f71ba232b82c21f968c0a8bbb170eca', class: "nv-sidebar-container" }, index.h("slot", { key: 'b634857cb88c12975de9641e154b669de8ce8726' })), this.type === 'collapsible' && (index.h("button", { key: '0b398d6738536aad4d4e96ad5ca1f04dd543ee1b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '44b5eb0c9b3239750956c7da09eb9a22e5d0939f', name: this.open
                 ? 'layout-sidebar-left-collapse'
                 : 'layout-sidebar-right-collapse', size: "sm" })))));
     }
@@ -172,6 +172,6 @@ const NvSidebar = class {
         "open": ["onOpenChanged"]
     }; }
 };
-NvSidebar.style = NvSidebarStyle0;
+NvSidebar.style = nvSidebarCss;
 
 exports.nv_sidebar = NvSidebar;

package/dist/cjs/{nv-sidebarcontent.entry-Cv76IH4W.js → nv-sidebarcontent.entry-DxoljE15.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.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 NvSidebarcontentStyle0 = nvSidebarcontentCss;
 
 const NvSidebarcontent = class {
     constructor(hostRef) {
@@ -17,6 +17,6 @@ const NvSidebarcontent = class {
         return (index.h(index.Host, { key: 'd960a2c2abe06db605980bf35d2c7cc74f4e0dba', role: "list" }, index.h("slot", { key: '7c0b0ad872d1afc279bfd9c9d381097207f055e2' })));
     }
 };
-NvSidebarcontent.style = NvSidebarcontentStyle0;
+NvSidebarcontent.style = nvSidebarcontentCss;
 
 exports.nv_sidebarcontent = NvSidebarcontent;

package/dist/cjs/{nv-sidebardivider.entry-DYPJ_k73.js → nv-sidebardivider.entry-D_yern0R.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvSidebardividerCss = "nv-sidebardivider{display:block;height:var(--sidebar-primary-separator-size);background-color:var(--color-content-low-border);margin:var(--spacing-2) 0}";
-const NvSidebardividerStyle0 = nvSidebardividerCss;
+const nvSidebardividerCss = "nv-sidebardivider{display:block;height:var(--sidebar-divider-size);background-color:var(--components-sidebar-divider)}";
 
 const NvSidebardivider = class {
     constructor(hostRef) {
@@ -17,6 +17,6 @@ const NvSidebardivider = class {
         return index.h(index.Host, { key: 'a4328b357b750232920c8b5e24e91503bba7e235', role: "separator", "aria-orientation": "horizontal" });
     }
 };
-NvSidebardivider.style = NvSidebardividerStyle0;
+NvSidebardivider.style = nvSidebardividerCss;
 
 exports.nv_sidebardivider = NvSidebardivider;

package/dist/cjs/{nv-sidebarfooter.entry-mGcMBRmv.js → nv-sidebarfooter.entry-Rkkn9TB_.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvSidebarfooterCss = "nv-sidebarfooter{display:block;margin-top:auto}";
-const NvSidebarfooterStyle0 = nvSidebarfooterCss;
 
 const NvSidebarfooter = class {
     constructor(hostRef) {
@@ -17,6 +17,6 @@ const NvSidebarfooter = class {
         return (index.h(index.Host, { key: '73ce5246f93d982caf0d65f2cde8156dfbe565da' }, index.h("slot", { key: '92a297a59988ce6e70875eedd50227cdf011d4bf' })));
     }
 };
-NvSidebarfooter.style = NvSidebarfooterStyle0;
+NvSidebarfooter.style = nvSidebarfooterCss;
 
 exports.nv_sidebarfooter = NvSidebarfooter;

package/dist/cjs/{nv-sidebargroup.entry-DtwFliHZ.js → nv-sidebargroup.entry-C1p9qqxr.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 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 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) {
@@ -18,6 +18,6 @@ const NvSidebargroup = class {
         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;
+NvSidebargroup.style = nvSidebargroupCss;
 
 exports.nv_sidebargroup = NvSidebargroup;

package/dist/cjs/{nv-sidebarheader.entry-BdOYIXCA.js → nv-sidebarheader.entry-CYpD_4pI.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvSidebarheaderCss = "nv-sidebarheader{display:block}";
-const NvSidebarheaderStyle0 = nvSidebarheaderCss;
 
 const NvSidebarheader = class {
     constructor(hostRef) {
@@ -17,6 +17,6 @@ const NvSidebarheader = class {
         return (index.h(index.Host, { key: '42d91f8325df19e8208ab045a057657c97bf3ff4' }, index.h("slot", { key: '42b4e5952fd55b95fe2934297929cef3bd1b226c' })));
     }
 };
-NvSidebarheader.style = NvSidebarheaderStyle0;
+NvSidebarheader.style = nvSidebarheaderCss;
 
 exports.nv_sidebarheader = NvSidebarheader;

package/dist/cjs/{nv-sidebarlogo.entry-Da0kGsfw.js → nv-sidebarlogo.entry-BgK03M1v.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.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 NvSidebarlogoStyle0 = nvSidebarlogoCss;
 
 const NvSidebarlogo = class {
     constructor(hostRef) {
@@ -27,6 +27,6 @@ const NvSidebarlogo = class {
         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;
+NvSidebarlogo.style = nvSidebarlogoCss;
 
 exports.nv_sidebarlogo = NvSidebarlogo;

package/dist/cjs/{nv-sidebarnavitem.entry-D5xLfpwn.js → nv-sidebarnavitem.entry-DglvcCOD.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.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-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 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) {
@@ -292,6 +292,6 @@ const NvSidebarnavitem = class {
         "open": ["onOpenChanged"]
     }; }
 };
-NvSidebarnavitem.style = NvSidebarnavitemStyle0;
+NvSidebarnavitem.style = nvSidebarnavitemCss;
 
 exports.nv_sidebarnavitem = NvSidebarnavitem;

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

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-CtjeeUI-.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: '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 = nvSidebarnavsubitemCss;
+
+exports.nv_sidebarnavsubitem = NvSidebarnavsubitem;

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

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.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]{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 NvSplit = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sizesChanged = index.createEvent(this, "sizesChanged");
+        this.sizesChanged = index.createEvent(this, "sizesChanged", 3);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -324,7 +324,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        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" })));
+        return (index.h(index.Host, { key: '2266f982349909b08637721e0bf5d8792fa2f3aa', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '0b0845ae2f93bb137692fd570beaa2e26816c1c9', name: "pane" }), index.h("slot", { key: 'ac322712eb7024dde9efc41dac946196fd15a786', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -332,6 +332,6 @@ const NvSplit = class {
         "direction": ["onDirectionChanged"]
     }; }
 };
-NvSplit.style = NvSplitStyle0;
+NvSplit.style = nvSplitCss;
 
 exports.nv_split = NvSplit;

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var index = require('./index-CtjeeUI-.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: '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' })));
+        return (index.h(index.Host, { key: 'fbdaf5b2fb134b050883a512b4aeb96b070017c1', 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: '6c7c231b8ff2575a1b509539d227468629fae6ab' })));
     }
 };
-NvStack.style = NvStackStyle0;
+NvStack.style = nvStackCss;
 
 exports.nv_stack = NvStack;