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

package/dist/cjs/nv-notification-bullet.entry-J8OkAZtU.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+require('react');
+require('react-dom');
+
+const nvNotificationBulletCss = "nv-notification-bullet{display:inline-flex;align-items:center;position:relative;}nv-notification-bullet .nv-notification-bullet{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-primary-notification-bullet-size);max-width:var(--sidebar-primary-notification-bullet-size);min-height:var(--sidebar-primary-notification-bullet-size);max-height:var(--sidebar-primary-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-primary-notification-bullet-font-size);font-weight:var(--sidebar-primary-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-brand-500);color:var(--color-feedback-error-high-contrast-title)}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-brand-50);color:var(--color-brand-600);border:1px solid var(--color-brand-600)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-with-cross-border::before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);border-radius:var(--radius-rounded-full);background-color:var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));z-index:-1;pointer-events:none}nv-sidebar[collapsed] nv-notification-bullet.nv-notification-bullet-with-cross-border::before{width:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5)}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet{min-width:var(--sidebar-primary-notification-bullet-size-reduced);max-width:var(--sidebar-primary-notification-bullet-size-reduced);min-height:var(--sidebar-primary-notification-bullet-size-reduced);max-height:var(--sidebar-primary-notification-bullet-size-reduced);padding:0;font-size:0;}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced.nv-notification-bullet-with-border,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}";
+const NvNotificationBulletStyle0 = nvNotificationBulletCss;
+
+const NvNotificationBullet = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Determines the size of the notification bullet.
+         * - default: Normal size with text visible
+         * - reduced: Smaller size, text hidden (just a dot)
+         */
+        this.size = 'default';
+        /**
+         * Allows to add a border to add contrast on background.
+         */
+        this.contrastingBorder = false;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    getIntention() {
+        if (this.intention) {
+            return this.intention;
+        }
+        // Inherit from parent nv-sidebar
+        const sidebar = this.el.closest('nv-sidebar');
+        if (sidebar) {
+            const sidebarIntention = sidebar.getAttribute('notification-intention');
+            if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {
+                return sidebarIntention;
+            }
+        }
+        return 'brand'; // Default fallback
+    }
+    getEmphasis() {
+        if (this.emphasis) {
+            return this.emphasis;
+        }
+        // Inherit from parent nv-sidebar
+        const sidebar = this.el.closest('nv-sidebar');
+        if (sidebar) {
+            const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');
+            if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {
+                return sidebarEmphasis;
+            }
+        }
+        return 'high'; // Default fallback
+    }
+    //#region RENDER
+    render() {
+        var _a;
+        const displayCount = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
+        const displayText = displayCount > 99 ? '99+' : String(displayCount);
+        if (displayCount <= 0) {
+            return null;
+        }
+        const sizeClass = this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';
+        const intention = this.getIntention();
+        const emphasis = this.getEmphasis();
+        const intentionClass = `nv-notification-bullet-${intention}`;
+        const emphasisClass = `nv-notification-bullet-${emphasis}`;
+        const borderClass = this.contrastingBorder
+            ? 'nv-notification-bullet-with-border'
+            : '';
+        return (index.h(index.Host, { class: `${intentionClass} ${borderClass ? 'nv-notification-bullet-with-cross-border' : ''}` }, index.h("span", { class: `nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`, "aria-label": `${displayCount} notifications` }, displayText)));
+    }
+    get el() { return index.getElement(this); }
+};
+NvNotificationBullet.style = NvNotificationBulletStyle0;
+
+exports.nv_notification_bullet = NvNotificationBullet;

package/dist/cjs/{nv-notification.entry-BPyEusqt.js → nv-notification.entry-BxvJMKxH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-CEKdYnmK.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
@@ -253,7 +253,7 @@ const NvNotification = class {
     //#region RENDER
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '46775401cabedd4ddc4b25d92c63411e9acb82dc', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, index.h("div", { key: 'e9b66d76b129916e980a150c87fa57bb26323c43', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: 'd5a3b8eea45bf183228c4c8297e031252569e029', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'd5a8c1fe676259e40a2af7d3dab5d3b301b0583f', name: "x", size: "sm" }))), index.h("nv-icon", { key: '55b19299a45267b98cb8bea6f3a26c34da03a652', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '4ec36ebdc8d45b0b381cae85f0b3768f9cbc5b73', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: 'b9dff96f37cddf2c1cd7c5fa78a20ae55e275db9', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: 'efd279084065fd729ab2b2a629b95405f5dedbc1', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '0cdd307c0bf278475d817d385e2af1e946170864', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: 'f1b5ccc34f45cb7a65bc24868134ca21d9cf3df3', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '9cced40d8f68f6b755c7a3b90e7c1899bcb95c56', "data-scope": "actions" }, index.h("slot", { key: 'e30bd73510f7e39e41db8bf395e99301ad53ec45', name: "actions" })))))));
+        return (index.h(index.Host, { key: '10e49ace93a23660383f9bbfb45460e610320db3', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, index.h("div", { key: '1cce0d5c025e404ad641eed3c0ff07045db12de6', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '64a9e8f95f51908ed82f5c832d5a9738420b574b', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'f4f5a742b862a52ebf7e2edc320e4521ad575a29', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'a85552d6f9d81f67643f4a8c428464ed7af2ff90', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: 'bb7fd2fd626191f53b59507c3d5003369aaa2d70', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: 'ce333015dc488c8371d2dc90b97461888a28174e', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '32c9d8c3c5a85a60e3993a5963ed019f5900e6c3', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '08d57bf3058e3efcaf6d95de5754c34405ddddfb', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: 'f930fb38f00addf2911fc5401d906ee7c52b0920', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '983c60ec7fdf1ed85d2ef9d1a5c327d0aaf78013', "data-scope": "actions" }, index.h("slot", { key: '521bd4d20db65dc6025a9fb285599dbd7643bed0', name: "actions" })))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-notificationcontainer.entry-MRIJURIS.js → nv-notificationcontainer.entry-CxGCIb96.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-CEKdYnmK.js');
 require('react');
 require('react-dom');
 
@@ -33,7 +33,7 @@ const NvNotificationContainer = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ee0a569e38a3f6402b027317b3bbd0f9773b30ea', class: `position-${this.position}` }, index.h("slot", { key: 'f8829878c8b5b4de5f3e82bbe77a0ae5d9eee809' })));
+        return (index.h(index.Host, { key: 'bf0b7cd02e0d214516f352eb7016d6060d6959c5', class: `position-${this.position}` }, index.h("slot", { key: 'f042e3f11b4d2af4b47aadeba04a332c57889616' })));
     }
 };
 NvNotificationContainer.style = NvNotificationcontainerStyle0;

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

@@ -1,96 +1,12 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-CEKdYnmK.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
-var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
-var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
+var grow_animation24ad5cf8 = require('./grow.animation-24ad5cf8-LUp_ITEx.js');
+require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
 require('react');
 require('react-dom');
 
-const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
-    const nodeStyler = fade_animation9b939939.index(node);
-    /**
-     * Will animate the scale and optionally the opacity to make the element grow and fade in,
-     * and removes the scale and opacity style attributes once complete.
-     */
-    function growIn() {
-        return new Promise(resolve => {
-            styleValueTypes_esF5d10b79.animate({
-                from: { opacity: hasFade ? 0 : 1, scale: amount },
-                to: { opacity: 1, scale: 1 },
-                duration,
-                onUpdate(latest) {
-                    const updates = {
-                        scale: latest.scale,
-                    };
-                    if (hasFade) {
-                        updates['opacity'] = latest.opacity;
-                    }
-                    nodeStyler.set(updates);
-                },
-                onComplete() {
-                    resolve();
-                    if (hasFade) {
-                        node.style.removeProperty('opacity');
-                    }
-                    node.style.removeProperty('transform');
-                },
-            });
-        });
-    }
-    /**
-     * Applies the growOut styles without animating, useful when the initial
-     * state is hidden.
-     */
-    function setGrowOut() {
-        node.style.transform = `scale(${amount})`;
-        if (hasFade) {
-            node.style.opacity = '0';
-        }
-    }
-    /**
-     * Applies the growIn styles without animating, useful when the initial
-     * state is visible.
-     */
-    function setGrowIn() {
-        node.style.transform = `scale(1)`;
-        if (hasFade) {
-            node.style.opacity = '1';
-        }
-    }
-    /**
-     * Will animate the scale and optionally the opacity to make the element shrink and fade out,
-     * leaving the scale and opacity styles on the element.
-     */
-    function growOut() {
-        return new Promise(resolve => {
-            styleValueTypes_esF5d10b79.animate({
-                from: { opacity: 1, scale: 1 },
-                to: { opacity: hasFade ? 0 : 1, scale: amount },
-                duration,
-                onUpdate(latest) {
-                    const updates = {
-                        scale: latest.scale,
-                    };
-                    if (hasFade) {
-                        updates['opacity'] = latest.opacity;
-                    }
-                    nodeStyler.set(updates);
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    }
-    return {
-        growIn,
-        growOut,
-        setGrowOut,
-        setGrowIn,
-    };
-};
-
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -1808,14 +1724,14 @@ const NvPopover = class {
      */
     attachEventListeners() {
         if (this.triggerElement && !this.eventsAttached) {
-            events_utilsFe1d907f.addEventListeners(this.closeEvents, document, this);
+            grow_animation24ad5cf8.addEventListeners(this.closeEvents, document, this);
             if (this.triggerMode === 'click') {
-                events_utilsFe1d907f.addEventListeners(this.clickEvents, this.triggerElement, this);
+                grow_animation24ad5cf8.addEventListeners(this.clickEvents, this.triggerElement, this);
                 // Add document click and touch listeners
-                events_utilsFe1d907f.addEventListeners(this.outsideClickEvents, document, this);
+                grow_animation24ad5cf8.addEventListeners(this.outsideClickEvents, document, this);
             }
             if (this.triggerMode === 'hover') {
-                events_utilsFe1d907f.addEventListeners(this.hoverEvents, this.triggerElement, this);
+                grow_animation24ad5cf8.addEventListeners(this.hoverEvents, this.triggerElement, this);
             }
             this.eventsAttached = true;
         }
@@ -1890,7 +1806,7 @@ const NvPopover = class {
             state.groups.delete(this.groupName);
         if (this.groupName && open)
             state.groups.set(this.groupName, { openedBy: this.el });
-        const { growIn } = useGrow(this.popoverElement, {
+        const { growIn } = grow_animation24ad5cf8.useGrow(this.popoverElement, {
             duration: isOtherMemberOpen ? 0 : 100,
             amount: 0.85,
         });
@@ -1942,7 +1858,7 @@ const NvPopover = class {
     componentDidLoad() {
         // Initial inline style setup
         if (!this.open) {
-            const { setGrowOut } = useGrow(this.popoverElement);
+            const { setGrowOut } = grow_animation24ad5cf8.useGrow(this.popoverElement);
             setGrowOut();
         }
         else {
@@ -1954,14 +1870,14 @@ const NvPopover = class {
         this.attachEventListeners();
     }
     disconnectedCallback() {
-        events_utilsFe1d907f.removeEventListeners(this.closeEvents, document, this);
+        grow_animation24ad5cf8.removeEventListeners(this.closeEvents, document, this);
         if (this.triggerMode === 'click') {
-            events_utilsFe1d907f.removeEventListeners(this.clickEvents, this.triggerElement, this);
+            grow_animation24ad5cf8.removeEventListeners(this.clickEvents, this.triggerElement, this);
             // Remove document listeners
-            events_utilsFe1d907f.removeEventListeners(this.outsideClickEvents, document, this);
+            grow_animation24ad5cf8.removeEventListeners(this.outsideClickEvents, document, this);
         }
         if (this.triggerMode === 'hover')
-            events_utilsFe1d907f.removeEventListeners(this.hoverEvents, this.triggerElement, this);
+            grow_animation24ad5cf8.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
@@ -1974,7 +1890,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '12a7b1a584b3430808f55294772240a1dc77800e' }, index.h("slot", { key: '3d9b86bdccf5ed03bbc477c8e0eaad6c9f886cc9', name: "trigger" }), index.h("div", { key: 'df5924d7e88fda20b769a7ab0329428fc04e3920', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '559702ed280c31331703e98d4c57a189491481c4', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'f5872f0bb2865f053b56e9aa128414f777dd9454', name: "content" }))));
+        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" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-row.entry-T0OlcSij.js → nv-row.entry-PBLq_BzJ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yxDlFA78.js');
+var index = require('./index-CEKdYnmK.js');
 require('react');
 require('react-dom');
 
@@ -14,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7349317dfee793dd34ceab919bae6155811f25f4' }, index.h("slot", { key: '0b31cf4d03d1057ec6f02b65b0ace85ee390cbc4' })));
+        return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
     }
 };
 NvRow.style = NvRowStyle0;

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

@@ -0,0 +1,177 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+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 NvSidebar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged");
+        /****************************************************************************/
+        //#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 === null || link === void 0 ? void 0 : 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 === null || link === void 0 ? void 0 : 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();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.setActiveNavItems();
+        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();
+        }
+        if (this.pendingActiveUpdate) {
+            clearTimeout(this.pendingActiveUpdate);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#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
+                ? '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 = NvSidebarStyle0;
+
+exports.nv_sidebar = NvSidebar;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+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) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'd960a2c2abe06db605980bf35d2c7cc74f4e0dba', role: "list" }, index.h("slot", { key: '7c0b0ad872d1afc279bfd9c9d381097207f055e2' })));
+    }
+};
+NvSidebarcontent.style = NvSidebarcontentStyle0;
+
+exports.nv_sidebarcontent = NvSidebarcontent;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+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 NvSidebardivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return index.h(index.Host, { key: 'a4328b357b750232920c8b5e24e91503bba7e235', role: "separator", "aria-orientation": "horizontal" });
+    }
+};
+NvSidebardivider.style = NvSidebardividerStyle0;
+
+exports.nv_sidebardivider = NvSidebardivider;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-CEKdYnmK.js');
+require('react');
+require('react-dom');
+
+const nvSidebarfooterCss = "nv-sidebarfooter{display:block;margin-top:auto}";
+const NvSidebarfooterStyle0 = nvSidebarfooterCss;
+
+const NvSidebarfooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '73ce5246f93d982caf0d65f2cde8156dfbe565da' }, index.h("slot", { key: '92a297a59988ce6e70875eedd50227cdf011d4bf' })));
+    }
+};
+NvSidebarfooter.style = NvSidebarfooterStyle0;
+
+exports.nv_sidebarfooter = NvSidebarfooter;

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;