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

package/dist/cjs/{nv-iconbutton_2.entry-ChULGovr.js → nv-iconbutton_2.entry-hqp4AcRq.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var index = require('./index-kU2nW5aN.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
-const NvIconbuttonStyle0 = nvIconbuttonCss;
+const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:calc(var(--button-xs-icon-button-padding) - 1px);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:calc(var(--button-sm-icon-button-padding) - 1px);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:calc(var(--button-md-icon-button-padding) - 1px);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:calc(var(--button-lg-icon-button-padding) - 1px);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
 
 const NvIconbutton = class {
     constructor(hostRef) {
@@ -74,16 +74,15 @@ const NvIconbutton = class {
          * @param {Event} event - The click event.
          */
         this.handleClick = (event) => {
-            var _a, _b, _c, _d;
             if (this.disabled) {
                 event.preventDefault();
                 return;
             }
             if (this.type === 'submit') {
-                (_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+                this.internals?.form?.requestSubmit();
             }
             if (this.type === 'reset') {
-                (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
+                this.internals?.form?.reset();
             }
         };
     }
@@ -129,7 +128,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '81d7f0bfd1e64ecbb640c2f02b7e73cd7b2d3aa4', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx297c1ffe.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'cec3ee02a7fb0882557c8742c8f9d785835e79d0', size: this.size }), !this.loading && index.h("nv-icon", { key: '4892b3b78b291b159403a63ced6a150dd7def1c0', name: this.name, size: this.size }), index.h("slot", { key: 'b1204bf2dd026c1232b5e8209fd29f21a8aa704f' })));
+        return (index.h(index.Host, { key: '2e0011f5ebb23512aa89756ae7fd5ad81586f8b1', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsxChV9xqsO.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: '435692a00ed0af3548c2ac875e573af00daf5d62', size: this.size }), !this.loading && index.h("nv-icon", { key: '00b08fbd43724ad7ce54c96cd052ba637e111ece', name: this.name, size: this.size }), index.h("slot", { key: 'bb61e7db6115c9017007f15320dd5b2f6ccd9671' })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -138,10 +137,9 @@ const NvIconbutton = class {
         "disabled": ["handleDisabledChange"]
     }; }
 };
-NvIconbutton.style = NvIconbuttonStyle0;
+NvIconbutton.style = nvIconbuttonCss;
 
 const nvLoaderCss = "@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}nv-loader{display:inline-block;position:relative;aspect-ratio:1/1;border-radius:9999px;color:inherit}nv-loader.size-xs{width:var(--loader-size-xs);height:var(--loader-size-xs)}nv-loader.size-xs::before,nv-loader.size-xs::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xs::before{content:\" \";border:calc(var(--loader-size-xs) / 10) solid;opacity:0.3}nv-loader.size-xs::after{content:\" \";border-top:calc(var(--loader-size-xs) / 10) solid transparent;border-left:calc(var(--loader-size-xs) / 10) solid transparent;border-right:calc(var(--loader-size-xs) / 10) solid transparent;border-bottom:calc(var(--loader-size-xs) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-sm{width:var(--loader-size-sm);height:var(--loader-size-sm)}nv-loader.size-sm::before,nv-loader.size-sm::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-sm::before{content:\" \";border:calc(var(--loader-size-sm) / 10) solid;opacity:0.3}nv-loader.size-sm::after{content:\" \";border-top:calc(var(--loader-size-sm) / 10) solid transparent;border-left:calc(var(--loader-size-sm) / 10) solid transparent;border-right:calc(var(--loader-size-sm) / 10) solid transparent;border-bottom:calc(var(--loader-size-sm) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-md{width:var(--loader-size-md);height:var(--loader-size-md)}nv-loader.size-md::before,nv-loader.size-md::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-md::before{content:\" \";border:calc(var(--loader-size-md) / 10) solid;opacity:0.3}nv-loader.size-md::after{content:\" \";border-top:calc(var(--loader-size-md) / 10) solid transparent;border-left:calc(var(--loader-size-md) / 10) solid transparent;border-right:calc(var(--loader-size-md) / 10) solid transparent;border-bottom:calc(var(--loader-size-md) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-lg{width:var(--loader-size-lg);height:var(--loader-size-lg)}nv-loader.size-lg::before,nv-loader.size-lg::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-lg::before{content:\" \";border:calc(var(--loader-size-lg) / 10) solid;opacity:0.3}nv-loader.size-lg::after{content:\" \";border-top:calc(var(--loader-size-lg) / 10) solid transparent;border-left:calc(var(--loader-size-lg) / 10) solid transparent;border-right:calc(var(--loader-size-lg) / 10) solid transparent;border-bottom:calc(var(--loader-size-lg) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-xl{width:var(--loader-size-xl);height:var(--loader-size-xl)}nv-loader.size-xl::before,nv-loader.size-xl::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xl::before{content:\" \";border:calc(var(--loader-size-xl) / 10) solid;opacity:0.3}nv-loader.size-xl::after{content:\" \";border-top:calc(var(--loader-size-xl) / 10) solid transparent;border-left:calc(var(--loader-size-xl) / 10) solid transparent;border-right:calc(var(--loader-size-xl) / 10) solid transparent;border-bottom:calc(var(--loader-size-xl) / 10) solid;animation:rotation 1s linear infinite}nv-loader.color-brand::before{border-color:var(--components-loader-brand-background);opacity:1}nv-loader.color-brand::after{border-bottom-color:var(--components-loader-brand-foreground)}nv-loader.color-white::before{border-color:var(--components-loader-white-background);opacity:1}nv-loader.color-white::after{border-bottom-color:var(--components-loader-white-foreground)}";
-const NvLoaderStyle0 = nvLoaderCss;
 
 const NvLoader = class {
     constructor(hostRef) {
@@ -160,10 +158,10 @@ const NvLoader = class {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (index.h(index.Host, { key: '049afa243c1ce99643408d86afa99e69c5468b8b', class: clsx297c1ffe.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (index.h(index.Host, { key: '4347ec4ee393edb5e23a60e253bae73d0f9db583', class: clsxChV9xqsO.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
 };
-NvLoader.style = NvLoaderStyle0;
+NvLoader.style = nvLoaderCss;
 
 exports.nv_iconbutton = NvIconbutton;
 exports.nv_loader = NvLoader;

package/dist/cjs/{nv-menu.entry-sd0tatWq.js → nv-menu.entry-Dc_FvIx7.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvMenuCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";
-const NvMenuStyle0 = nvMenuCss;
 
 const NvMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.menuitemSelected = index.createEvent(this, "menuitemSelected");
+        this.menuitemSelected = index.createEvent(this, "menuitemSelected", 3);
         this.isHandlingKeyDown = false;
         /****************************************************************************/
         //#region PROPERTIES
@@ -45,11 +45,10 @@ const NvMenu = class {
          */
         this.renderMenuItems = () => {
             return this.items.map(item => {
-                var _a;
-                if (item.hasSubmenu && ((_a = item.submenuItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    return (index.h("nv-menu", { nested: true, placement: "right-start", items: item.submenuItems }, index.h("nv-menuitem", { slot: "trigger", hasSubmenu: true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label })));
+                if (item.hasSubmenu && item.submenuItems?.length > 0) {
+                    return (index.h("nv-menu", { nested: true, placement: "right-start", items: item.submenuItems }, index.h("nv-menuitem", { slot: "trigger", hasSubmenu: true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label, onMenuitemSelected: e => this.menuitemSelected.emit(e.detail) })));
                 }
-                return (index.h("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label }));
+                return (index.h("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label, onMenuitemSelected: e => this.menuitemSelected.emit(e.detail) }));
             });
         };
     }
@@ -74,18 +73,17 @@ const NvMenu = class {
             requestAnimationFrame(() => firstButton.focus());
         }
     }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    handleOpenChange(newOpen) {
-        // React to external changes, e.g., focus first item if opened externally
-        if (newOpen) {
+    handleOpenChanged(event) {
+        this.open = event.detail;
+        const triggerHasFocus = this.triggerElement === document.activeElement;
+        const triggerHasFocusVisible = this.triggerElement.matches(':focus-visible');
+        if (triggerHasFocus && triggerHasFocusVisible)
             this.focusFirstItem();
-        }
     }
-    //#endregion WATCHERS
+    //#endregion EVENTS
     /****************************************************************************/
     //#region LISTENERS
+    /* eslint-disable nova/native-event-listener */
     handleMenuItemSelect(event) {
         if (this.disableCloseOnSelect)
             return;
@@ -93,6 +91,7 @@ const NvMenu = class {
             return;
         this.open = false;
     }
+    /* eslint-enable nova/native-event-listener */
     handleKeydown(event) {
         // If the menu is not open, check if the trigger is focused
         // and the user presses Enter or ArrowDown, open the menu
@@ -103,6 +102,7 @@ const NvMenu = class {
                 document.activeElement === this.triggerElement) {
                 event.preventDefault();
                 this.show();
+                this.focusFirstItem();
                 // Then, put the focus on the first menuitem
                 const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');
                 if (firstMenuItem) {
@@ -128,7 +128,7 @@ const NvMenu = class {
             return;
         }
         const menuContent = this.el.querySelector('[slot="content"]');
-        const menuItems = Array.from(menuContent.childNodes).filter(item => { var _a; return (_a = item.matches) === null || _a === void 0 ? void 0 : _a.call(item, 'nv-menuitem, nv-menu'); });
+        const menuItems = Array.from(menuContent.childNodes).filter(item => item.matches?.('nv-menuitem, nv-menu'));
         let currentIndex = menuItems.indexOf(document.activeElement);
         if (currentIndex === -1)
             currentIndex = menuItems.indexOf(document.activeElement.parentElement);
@@ -187,17 +187,6 @@ const NvMenu = class {
         }
         this.isHandlingKeyDown = false;
     }
-    handleOpenChanged(event) {
-        // Stop propagation to prevent the event from affecting parent components like dialogs
-        event.stopPropagation();
-        if (event.target === this.el.querySelector('nv-popover')) {
-            this.open = event.detail;
-        }
-        const triggerHasFocus = this.triggerElement === document.activeElement;
-        const triggerHasFocusVisible = this.triggerElement.matches(':focus-visible');
-        if (triggerHasFocus && triggerHasFocusVisible)
-            this.focusFirstItem();
-    }
     //#endregion LISTENERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -207,13 +196,10 @@ const NvMenu = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '56a2d1b66805128c7bd26d2f6def4eda4fc3780d' }, index.h("slot", { key: '6bcbd93eebd0b97b95cf52de75ec06750797b042', name: "trigger" }), index.h("nv-popover", { key: 'b2c68d05416e9912dffa6f0804b090a0e80abd71', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (index.h("ul", { slot: "content" }, this.renderMenuItems())) : (index.h("slot", { name: "content" })))));
+        return (index.h(index.Host, { key: '1139a5dbbbb52e2f32c5d1410b4bdb87156cfd60' }, index.h("slot", { key: 'f2202b254512643f0a16ebcda3715438a7c7aa2a', name: "trigger" }), index.h("nv-popover", { key: '2f49bd9af8ff253ab662b5054717e0d44690f47d', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (index.h("ul", { slot: "content" }, this.renderMenuItems())) : (index.h("slot", { name: "content" })))));
     }
     get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
 };
-NvMenu.style = NvMenuStyle0;
+NvMenu.style = nvMenuCss;
 
 exports.nv_menu = NvMenu;

package/dist/cjs/{nv-menuitem.entry-CCOqR7UF.js → nv-menuitem.entry-DzMhx6c_.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvMenuitemCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";
-const NvMenuitemStyle0 = nvMenuitemCss;
 
 const NvMenuitem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.menuitemSelected = index.createEvent(this, "menuitemSelected");
+        this.menuitemSelected = index.createEvent(this, "menuitemSelected", 7);
         /**
          * Disables the item, preventing user interaction.
          */
@@ -20,6 +20,7 @@ const NvMenuitem = class {
          */
         this.hasSubmenu = false;
     }
+    /* eslint-enable nova/event-bubbling */
     handleMenuItemSelect(event) {
         // If the element is disabled, stop propagation
         if (this.disabled) {
@@ -50,10 +51,10 @@ const NvMenuitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '327165c89f4e5decf8dc4b7b28e18562e528056d', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '4247d922bca3797dc3f2917218749a8d3c038df1', name: this.icon }), index.h("slot", { key: '1f81464ccf47a5bd918873ef70d3d3385e870638' }), this.label && index.h("span", { key: '113358a0cacfa53710ec0049a8e1c5e981de5b15', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'ee7c773b89bf1f55876cf297600247883cd54937' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '70cbe2df51d9fbffe3b474b54e87aa06801acef7', name: "chevron-right" })));
+        return (index.h(index.Host, { key: 'e21f532b90f018810befe6a03ef4cb75fe05aea2', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: 'a63bdcae06b1311440ec95ecf002a8b9a130aea8', name: this.icon }), index.h("slot", { key: 'f25c0104369b8d70ce35d4bf74cf92c1bcdf66c6' }), this.label && index.h("span", { key: '5ab5691b53857876c8e13e91f975b41e255999da', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'c93777342da74e2cba4dfbbdf6657814b3996f41' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '87a58745651c54efb1c96841846363e377ee6fca', name: "chevron-right" })));
     }
     get el() { return index.getElement(this); }
 };
-NvMenuitem.style = NvMenuitemStyle0;
+NvMenuitem.style = nvMenuitemCss;
 
 exports.nv_menuitem = NvMenuitem;

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvNotificationBulletCss = "nv-notification-bullet{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-notification-bullet-size);max-width:var(--sidebar-notification-bullet-size);height:var(--sidebar-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-notification-bullet-font-size);font-weight:var(--sidebar-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0;position:relative;}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-notification-bullet-size);max-width:var(--sidebar-notification-bullet-size);height:var(--sidebar-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-notification-bullet-font-size);font-weight:var(--sidebar-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-neutral-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.nv-notification-bullet-neutral{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-notification-bullet-size);max-width:var(--sidebar-notification-bullet-size);height:var(--sidebar-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-notification-bullet-font-size);font-weight:var(--sidebar-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-feedback-neutral-high-contrast-background);color:var(--color-feedback-neutral-high-contrast-title)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-feedback-neutral-low-background);color:var(--color-feedback-neutral-low-text);border-radius:var(--radius-rounded-full)}nv-notification-bullet{}nv-notification-bullet.nv-notification-bullet-with-cross-border::before{content:\"\";position:absolute;top:55%;left:45%;transform:translate(-50%, -50%);width:calc(var(--sidebar-notification-bullet-size) + 1.5px);height:calc(var(--sidebar-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-notification-bullet{}nv-sidebar[collapsed] nv-notification-bullet.nv-notification-bullet-with-cross-border::before{width:calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);height:calc(var(--sidebar-notification-bullet-size-reduced) * 1.5)}nv-notification-bullet{}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet{width:var(--sidebar-notification-bullet-size-reduced);height:var(--sidebar-notification-bullet-size-reduced);min-width:var(--sidebar-notification-bullet-size-reduced);max-width:var(--sidebar-notification-bullet-size-reduced);min-height:var(--sidebar-notification-bullet-size-reduced);max-height:var(--sidebar-notification-bullet-size-reduced);padding:0;font-size:0}";
+
+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() {
+        const displayCount = this.count ?? 0;
+        const displayText = displayCount > 99 ? '99+' : String(displayCount);
+        if (displayCount <= 0) {
+            return index.h(index.Host, { style: { display: 'none' } });
+        }
+        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 = nvNotificationBulletCss;
+
+exports.nv_notification_bullet = NvNotificationBullet;

package/dist/cjs/{nv-notification.entry-Cc3zE3yY.js → nv-notification.entry-C3m5p5BL.js}

@@ -1,113 +1,30 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.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');
-var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
-var timeline_animation79215cd4 = require('./timeline.animation-79215cd4-KteJaZPb.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+var index = require('./index-kU2nW5aN.js');
+var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+var slide_animationCmH5d1of = require('./slide.animation-CmH5d1of-BZuw607U.js');
+var timeline_animationCgHCo_Ho = require('./timeline.animation-CgHCo_Ho-KteJaZPb.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const useSlide = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = fade_animation9b939939.index(node);
-    /**
-     * Will animate the translateX property.
-     *
-     * @param {object} options - The options for the animation.
-     * @param {number} options.from - The starting value for the translateX property.
-     * @param {number} options.to - The ending value for the translateX property.
-     * @returns {Promise<void>} - A promise that resolves when the animation is
-     * complete.
-     */
-    const slideX = (options = { from: 0, to: 100 }) => () => {
-        return new Promise(resolve => {
-            styleValueTypes_esF5d10b79.animate({
-                from: { x: options.from },
-                to: { x: options.to },
-                ease: styleValueTypes_esF5d10b79.easeOut,
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    };
-    /**
-     * Will animate the translateY property.
-     *
-     * @param {object} options - The options for the animation.
-     * @param {number} options.from - The starting value for the translateY property.
-     * @param {number} options.to - The ending value for the translateY property.
-     * @returns {Promise<void>} - A promise that resolves when the animation is
-     * complete.
-     */
-    const slideY = (options = { from: 0, to: 100 }) => () => {
-        return new Promise(resolve => {
-            styleValueTypes_esF5d10b79.animate({
-                from: { y: options.from },
-                to: { y: options.to },
-                ease: styleValueTypes_esF5d10b79.easeOut,
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ transform: `translateY(${latest.y}%)` });
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    };
-    /**
-     * Applies the slideX styles without animating, useful when initial state
-     * is slid out.
-     *
-     * @param {number} amount - The amount to translate the element by.
-     * @returns {function} - A function that applies the slideX styles.
-     */
-    const setSlideX = (amount = 100) => nodeStyler.set({ transform: `translateX(${amount}%)` });
-    /**
-     * Applies the slideY styles without animating, useful when initial state
-     * is slid out.
-     *
-     * @param {number} amount - The amount to translate the element by.
-     * @returns {function} - A function that applies the slideY styles.
-     */
-    const setSlideY = (amount = 100) => nodeStyler.set({ transform: `translateY(${amount}%)` });
-    /**
-     * Applies the slideIn styles without animating, useful when initial state
-     * is slid in.
-     */
-    function setSlideReset() {
-        nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });
-    }
-    return {
-        slideX,
-        slideY,
-        setSlideX,
-        setSlideY,
-        setSlideReset,
-    };
-};
-
 const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container] [data-scope=icon]{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}nv-notification[feedback=information] [data-scope=container]{background-color:var(--components-notification-information-background);border-color:var(--components-notification-information-border)}nv-notification[feedback=information] [data-scope=container] [data-scope=icon]{color:var(--components-notification-information-icon)}nv-notification[feedback=information]>[data-scope=close]:focus,nv-notification[feedback=information]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=warning] [data-scope=container]{background-color:var(--components-notification-warning-background);border-color:var(--components-notification-warning-border)}nv-notification[feedback=warning] [data-scope=container] [data-scope=icon]{color:var(--components-notification-warning-icon)}nv-notification[feedback=warning]>[data-scope=close]:focus,nv-notification[feedback=warning]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=error] [data-scope=container]{background-color:var(--components-notification-error-background);border-color:var(--components-notification-error-border)}nv-notification[feedback=error] [data-scope=container] [data-scope=icon]{color:var(--components-notification-error-icon)}nv-notification[feedback=error]>[data-scope=close]:focus,nv-notification[feedback=error]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=success] [data-scope=container]{background-color:var(--components-notification-success-background);border-color:var(--components-notification-success-border)}nv-notification[feedback=success] [data-scope=container] [data-scope=icon]{color:var(--components-notification-success-icon)}nv-notification[feedback=success]>[data-scope=close]:focus,nv-notification[feedback=success]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=neutral] [data-scope=container]{background-color:var(--components-notification-neutral-background);border-color:var(--components-notification-neutral-border)}nv-notification[feedback=neutral] [data-scope=container] [data-scope=icon]{color:var(--components-notification-neutral-icon)}nv-notification[feedback=neutral]>[data-scope=close]:focus,nv-notification[feedback=neutral]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}";
-const NvNotificationStyle0 = nvNotificationCss;
 
 const NvNotification = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
+        this.hiddenChanged = index.createEvent(this, "hiddenChanged", 3);
         /****************************************************************************/
         //#region PROPERTIES
         /**
          * Set a unique ID for the notification. Used for aria attributes and managing
          * multiple notifications.
          */
-        this.uid = v4A79185f4.v4();
+        this.uid = v4BdYh22OP.v4();
         /**
          * Specifies the notification type which determines the color and default icon.
          */
@@ -136,18 +53,18 @@ const NvNotification = class {
         /****************************************************************************/
         //#region INTERNAL
         this.iconByFeedback = {
-            [constants69bafca2.FeedbackColors.Warning]: 'alert-circle',
-            [constants69bafca2.FeedbackColors.Information]: 'info-circle',
-            [constants69bafca2.FeedbackColors.Success]: 'circle-check',
-            [constants69bafca2.FeedbackColors.Error]: 'alert-triangle',
-            [constants69bafca2.FeedbackColors.Neutral]: 'help',
+            [constantsBReL3Lsa.FeedbackColors.Warning]: 'alert-circle',
+            [constantsBReL3Lsa.FeedbackColors.Information]: 'info-circle',
+            [constantsBReL3Lsa.FeedbackColors.Success]: 'circle-check',
+            [constantsBReL3Lsa.FeedbackColors.Error]: 'alert-triangle',
+            [constantsBReL3Lsa.FeedbackColors.Neutral]: 'help',
         };
         this.roleByFeedback = {
-            [constants69bafca2.FeedbackColors.Error]: 'alert',
-            [constants69bafca2.FeedbackColors.Warning]: 'alert',
-            [constants69bafca2.FeedbackColors.Information]: 'status',
-            [constants69bafca2.FeedbackColors.Success]: 'status',
-            [constants69bafca2.FeedbackColors.Neutral]: 'status',
+            [constantsBReL3Lsa.FeedbackColors.Error]: 'alert',
+            [constantsBReL3Lsa.FeedbackColors.Warning]: 'alert',
+            [constantsBReL3Lsa.FeedbackColors.Information]: 'status',
+            [constantsBReL3Lsa.FeedbackColors.Success]: 'status',
+            [constantsBReL3Lsa.FeedbackColors.Neutral]: 'status',
         };
     }
     //#endregion PROPERTIES
@@ -170,12 +87,10 @@ const NvNotification = class {
         await this.showAnimation();
     }
     getDefaultIcon() {
-        var _a;
-        return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
+        return this.iconByFeedback[this.feedback] ?? 'info-circle';
     }
     getAriaRole() {
-        var _a;
-        return (_a = this.roleByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'status';
+        return this.roleByFeedback[this.feedback] ?? 'status';
     }
     getAriaLive() {
         return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';
@@ -188,45 +103,45 @@ const NvNotification = class {
     }
     async showAnimation() {
         this.hidden = false;
-        const { setFadeIn } = fade_animation9b939939.useFade(this.container);
-        const { expand } = collapse_animation6e0b08df.useCollapse(this.el, {
+        const { setFadeIn } = fade_animationDcRL9lcm.useFade(this.container);
+        const { expand } = collapse_animationDZDm0vSK.useCollapse(this.el, {
             duration: 300,
             overflow: 'visible',
         });
-        const { slideY, setSlideY } = useSlide(this.container, {
+        const { slideY, setSlideY } = slide_animationCmH5d1of.useSlide(this.container, {
             duration: 300,
         });
         setSlideY(-100);
         setFadeIn();
-        await timeline_animation79215cd4.parallel(slideY({ from: -100, to: 0 }), expand).start();
+        await timeline_animationCgHCo_Ho.parallel(slideY({ from: -100, to: 0 }), expand).start();
         this.hiddenChanged.emit(false);
     }
     getSlideDestination(pos) {
         switch (pos) {
-            case constants69bafca2.NotificationPosition.TopRight:
-            case constants69bafca2.NotificationPosition.BottomRight:
+            case constantsBReL3Lsa.NotificationPosition.TopRight:
+            case constantsBReL3Lsa.NotificationPosition.BottomRight:
                 return { axis: 'x', to: 100 }; // right
-            case constants69bafca2.NotificationPosition.TopLeft:
-            case constants69bafca2.NotificationPosition.BottomLeft:
+            case constantsBReL3Lsa.NotificationPosition.TopLeft:
+            case constantsBReL3Lsa.NotificationPosition.BottomLeft:
                 return { axis: 'x', to: -100 }; // left
-            case constants69bafca2.NotificationPosition.TopCenter:
+            case constantsBReL3Lsa.NotificationPosition.TopCenter:
                 return { axis: 'y', to: -100 }; // up
-            case constants69bafca2.NotificationPosition.BottomCenter:
+            case constantsBReL3Lsa.NotificationPosition.BottomCenter:
                 return { axis: 'y', to: 100 }; // down
             default:
                 return { axis: 'x', to: 100 }; // fallback
         }
     }
     async dismissAnimation() {
-        var _a;
-        const position = (_a = this.el
-            .closest('nv-notificationcontainer')) === null || _a === void 0 ? void 0 : _a.getAttribute('position');
+        const position = this.el
+            .closest('nv-notificationcontainer')
+            ?.getAttribute('position');
         const destination = this.getSlideDestination(position);
-        const { fadeOut } = fade_animation9b939939.useFade(this.container, { duration: 300 });
-        const { slideX, slideY, setSlideReset } = useSlide(this.container, {
+        const { fadeOut } = fade_animationDcRL9lcm.useFade(this.container, { duration: 300 });
+        const { slideX, slideY, setSlideReset } = slide_animationCmH5d1of.useSlide(this.container, {
             duration: 500,
         });
-        const { collapse } = collapse_animation6e0b08df.useCollapse(this.el, {
+        const { collapse } = collapse_animationDZDm0vSK.useCollapse(this.el, {
             duration: 500,
             overflow: 'visible',
         });
@@ -234,7 +149,7 @@ const NvNotification = class {
             ? slideX({ from: 0, to: destination.to })
             : slideY({ from: 0, to: destination.to });
         setSlideReset();
-        await timeline_animation79215cd4.parallel(fadeOut, slide, collapse).start();
+        await timeline_animationCgHCo_Ho.parallel(fadeOut, slide, collapse).start();
         this.hidden = true;
         this.hiddenChanged.emit(true);
     }
@@ -252,11 +167,10 @@ const NvNotification = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a, _b, _c;
-        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" })))))));
+        return (index.h(index.Host, { key: '64c79843ff7bdd1a4ae001a60a8db540947b8412', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, index.h("div", { key: 'b51c9c3829b122476564726e20a1da112059035b', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '3ee952fb7dc41f54fa35c88d12d4d512b96eece1', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: '4fa53d42ff6ea7b5e90a01cfcffec167368aece6', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'e116c962672fb2237382b7dc2d3c6feae62bfced', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '62a1da7ac952aa704965aca61ba6f98eb12341a2', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: '4ddc91bc5568f54c6f8f3114720c0821c103f1c3', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: 'b7b7c678c995d68be52ca6711e55e5a8fa43fe68', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '5e02782e07e7e2720cef3ec8c7f06321ce53940d', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '4886e5e490c5f1baf429c48666fd715f43113a71', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '1d75b6276a8622bc607cf296336abc734e02320a', "data-scope": "actions" }, index.h("slot", { key: '6cab1b879e9b0582a415edd5d096a2b794b82ea4', name: "actions" })))))));
     }
     get el() { return index.getElement(this); }
 };
-NvNotification.style = NvNotificationStyle0;
+NvNotification.style = nvNotificationCss;
 
 exports.nv_notification = NvNotification;