@nova-design-system/nova-webcomponents 3.29.0 → 3.31.0

package/dist/cjs/nv-iconbutton_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 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)}`;
@@ -125,7 +125,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e05d654ad6c926e4bc481f52b4b0290ea9fefad0', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: '9da63b0c9d3ef9cb0b5f53a86fa7389ab43dd43c', size: this.size }), !this.loading && index.h("nv-icon", { key: '0cbf1eceb063dbfa995a5c9d8a426580b46e9a24', name: this.name, size: this.size }), index.h("slot", { key: 'eaddd1e0e0a1080461e4990d4b83f2c79340ecc4' })));
+        return (index.h(index.Host, { key: 'f206fab4c635b6d27b112cc68bebfc3e66593177', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: '2ea73a9f618aeda177874d9d628e67e2ecaeec52', size: this.size }), !this.loading && index.h("nv-icon", { key: '8ebed9969c09dedbb7c900b520cb52f28f342adc', name: this.name, size: this.size }), index.h("slot", { key: 'b4d27f55210016a776cb215f2f8788fe4fd7c4a1' })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -159,7 +159,7 @@ const NvLoader = class {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (index.h(index.Host, { key: 'a80c59f9585654352e1b48e1a245e94172e1e533', class: clsx.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (index.h(index.Host, { key: '7b918edfcde0ddd6c0d43ad6e2a2457715bd1889', class: clsx.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
 };
 NvLoader.style = nvLoaderCss();

package/dist/cjs/nv-menu.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 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)}`;
 
@@ -189,7 +189,7 @@ const NvMenu = class {
         this.triggerElement = this.el.querySelector('[slot="trigger"]');
     }
     render() {
-        return (index.h(index.Host, { key: 'b8154f4e215984b0dbb106b44dcad72eacb140e1' }, index.h("slot", { key: 'cddcea9afd3324d39168f3879cdbb0839f3e432a', name: "trigger" }), index.h("nv-popover", { key: '2e20e3b97279c27e16b0eef4eb2d327a1e22c3b3', 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" })))));
+        return (index.h(index.Host, { key: '6d6c019a93a9b9b86050676d9cfd6c9bed32f74e' }, index.h("slot", { key: 'cef1a6840042e09583d0b52afe8feb5ffa1596e1', name: "trigger" }), index.h("nv-popover", { key: '1c8e5c2080c18dc64cb1eda46c25de82bd56ffb7', 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); }
 };

package/dist/cjs/nv-menuitem.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 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)}`;
 
@@ -47,7 +47,7 @@ const NvMenuitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0099a12f8103b381df6892e0cbebf8e25eebab5f', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '469a58bde78f58b0cb3684afe402ccc4a5c7c540', name: this.icon }), index.h("slot", { key: 'fd285713bcfb464ceed4bfc65cc7a13ce0733606' }), this.label && index.h("span", { key: '8a0539f81fa903ec8ed817c5bda8d9ffc76ef2db', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'ff2a00962610c05587d685d3c57ec8898d9ec993' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '3f85d0a3b1a5553b8893d3a15f3aef8cd23af8e8', name: "chevron-right" })));
+        return (index.h(index.Host, { key: '9ae0a9d4520789157d869a8832f622176f9df331', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: 'a0f76ff34d83238add0cebfb83a1c7f715d9fcb0', name: this.icon }), index.h("slot", { key: '8a5883175325444025efcbd12ecb57c95dfb2ac3' }), this.label && index.h("span", { key: 'da5452a4fdc521cf336a38575c9ab2e49d7b0179', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'de40a96181c57c6ea27669c15634a568c6e3ed05' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'ff65838b28f0be31356645cfbdd5b7eb95b47266', name: "chevron-right" })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 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}`;
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
-var constants = require('./constants-BugGJYqL.js');
+var index = require('./index-Bj9nnTVm.js');
+var constants = require('./constants-BSdCE1ZF.js');
 var collapse_animation = require('./collapse.animation-CcG0GAWk.js');
 var fade_animation = require('./fade.animation-BQSqXXOJ.js');
 require('./style-value-types.es-B1vLqX9m.js');
@@ -164,7 +164,7 @@ const NvNotification = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e3f03dd6b580e9f19ac6908fc7d417c148317538', 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: '42d46d24c47909e381482aeb66e6aa5d2f1fcc92', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: 'dc47d41d40988dab9e63c6c5e794940826233400', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'f1f83c98845ed3df1a85c03c8262f15d2148131b', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'adf0fe6170343387ce6316e17f0ef614f44130e1', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '7e16202e3f42cf3abd47ac9e58812bd8de829fbd', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: 'f0e80aae320de33fe91e5fb4e573c6eacdaafa8c', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '54007f5cf01b74bb04bb2f48a0e482aa4c0522a5', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '249324e6ea951587ace619d6df0fff422e6eee40', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '2ae08bc1526aaf12b26a2202d33b85f9cfa69f74', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '36e930834c39b0552d203630baffa593542ff631', "data-scope": "actions" }, index.h("slot", { key: '15c1fa42b17f907962c6b6396afe384ba5e1c98f', name: "actions" })))))));
+        return (index.h(index.Host, { key: '963a3af8ccb2c30837117a043fb2448a4dc66495', 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: '6e19a01f8d53bea227582f1675c21c12d1a7999b', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '1e218a93694821570701052167d853bcef9838d8', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'f476ccf71ea7900ce5d6ae00a27704f73d9d6dca', name: "x", size: "sm" }))), index.h("nv-icon", { key: '94e1a29141c622494868fbb9b168768f2d81c009', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: 'a7e807940344cc5cd1313c6243d6397608b15256', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: 'd901622d9a82c1591052d00049d5ceff79c45d3f', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '4c56f47007bd90cd6bcb02334ca1df663e703d55', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '579226c99afd50444ea3e8030e8eb6aa3b875379', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '4d099d8f38269a49500f4e17d9d2cfb7552c4759', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '341d68bf9af3e14805022da7f18760ac1ab09616', "data-scope": "actions" }, index.h("slot", { key: '39d4bbe64673e00a65f650bb311f87e48af53c5f', name: "actions" })))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nv-notificationcontainer.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 const nvNotificationcontainerCss = () => `nv-notificationcontainer{position:fixed;display:flex;flex-direction:column;padding:var(--spacing-2);padding-top:0;z-index:9999;pointer-events:none;width:100%;max-width:512px}nv-notificationcontainer.position-top-right{top:0;right:0}nv-notificationcontainer.position-top-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-top-left{top:0;left:0}nv-notificationcontainer.position-top-left nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-top-center{top:0;left:50%;transform:translateX(-50%)}nv-notificationcontainer.position-top-center nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-bottom-right{bottom:0;right:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-left{bottom:0;left:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-left nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-center{bottom:0;left:50%;transform:translateX(-50%);flex-direction:column-reverse}nv-notificationcontainer.position-bottom-center nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer>*{pointer-events:auto}`;
 
@@ -18,7 +18,7 @@ const NvNotificationContainer = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd2c471aaac0f76edade303331718d2b0f7c6bb39', class: `position-${this.position}` }, index.h("slot", { key: '48bbc563523bfb107bbbd2cc60561ccb87f9968c' })));
+        return (index.h(index.Host, { key: 'd59852ab59c6689f8a8a691293c2f91798360ff9', class: `position-${this.position}` }, index.h("slot", { key: '0758d9cd7b66e21e90f8cf7df13146426749c379' })));
     }
 };
 NvNotificationContainer.style = nvNotificationcontainerCss();

package/dist/cjs/nv-pagination-nav.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 /**
  * Generates a pagination range with page numbers and ellipsis items.
@@ -177,7 +177,7 @@ const NvPaginationNav = class {
     render() {
         const isFirstPage = this.currentPage === 1;
         const isLastPage = this.currentPage === this.totalPages;
-        return (index.h(index.Host, { key: 'b2255fce4e03cee8ff370086aac31df5c69d275d' }, index.h("nav", { key: 'a136b7193f9b00a68e6ee626802dee19fd762531', "data-scope": "pagination-nav", "aria-label": "Pagination navigation" }, this.isOnlyIcon ? (index.h("nv-iconbutton", { name: "chevron-left", size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-iconbutton", "aria-label": this.previousButtonLabel })) : (index.h("nv-button", { size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-button" }, index.h("nv-icon", { slot: "leading-icon", name: "chevron-left" }), this.previousButtonLabel)), index.h("ol", { key: '5bebe0e3f5c8f1799ed8980752fbed7aadbcac01', "data-scope": "page-list" }, calculatePaginationRange({
+        return (index.h(index.Host, { key: '0286f59b5bea5278e5e9765e8e8f9cf982012967' }, index.h("nav", { key: '90acdb38a7f5856c91008c59d0e33ed40e280413', "data-scope": "pagination-nav", "aria-label": "Pagination navigation" }, this.isOnlyIcon ? (index.h("nv-iconbutton", { name: "chevron-left", size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-iconbutton", "aria-label": this.previousButtonLabel })) : (index.h("nv-button", { size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-button" }, index.h("nv-icon", { slot: "leading-icon", name: "chevron-left" }), this.previousButtonLabel)), index.h("ol", { key: 'e0d45ea0585641912d07224cda2f28da4d403328', "data-scope": "page-list" }, calculatePaginationRange({
             currentPage: this.currentPage,
             totalCount: this.totalCount,
             pageSize: this.pageSize,

package/dist/cjs/nv-paginationtable.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 /**
  * Pagination table utility functions for nv-paginationtable component
@@ -37,6 +37,19 @@ function interpolate(template, values, fallback) {
 function isFirstPage(pageIndex) {
     return pageIndex === 0;
 }
+/**
+ * Returns the 1-based page number to show in the page label.
+ * When there are no pages (empty/filtered-to-zero dataset), returns 0 so
+ * the label reads e.g. "Page 0 of 0" instead of "Page 1 of 0".
+ * @param {number} pageIndex - Current page index (zero-based)
+ * @param {number} pageCount - Total number of pages
+ * @returns {number} The page number to display (1-based, or 0 when no pages)
+ */
+function getDisplayPageNumber(pageIndex, pageCount) {
+    if (pageCount <= 0)
+        return 0;
+    return pageIndex + 1;
+}
 /**
  * Checks if navigation to the last/next page is possible
  * @param {number} pageIndex - Current page index (zero-based)
@@ -209,10 +222,13 @@ const NvPaginationtable = class {
         const atFirstPage = isFirstPage(this.pageIndex);
         const atLastPage = isLastPage(this.pageIndex, this.pageCount);
         // Use fallback values to handle undefined props (can happen when frameworks pass undefined explicitly)
-        const pageLabel = interpolate(this.labelPage, { pageIndex: this.pageIndex + 1, pageCount: this.pageCount }, 'Page {pageIndex} of {pageCount}');
+        const pageLabel = interpolate(this.labelPage, {
+            pageIndex: getDisplayPageNumber(this.pageIndex, this.pageCount),
+            pageCount: this.pageCount,
+        }, 'Page {pageIndex} of {pageCount}');
         const totalLabel = interpolate(this.labelTotal, { rowCount: this.rowCount }, 'Total: {rowCount} rows');
         const pageSizeOptions = generatePageSizeOptions(this.labelPageSizeOption ?? '{pageSize} per page');
-        return (index.h(index.Host, { key: '0556d5f0dc69faa503b504ec87c47819f92d565d' }, !this.hideControls && (index.h("div", { key: 'b097a2bda8c09b88db038c1039133a7ec2571247', "data-scope": "controls" }, !this.hideFirstLast && (index.h("nv-iconbutton", { key: '29841590c99ee7534d1d41933c4eb155a9b9a9db', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (index.h("nv-iconbutton", { key: '9d075e5ea8ee0f1b77de4da5072862d076579778', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (index.h("nv-iconbutton", { key: '712ebb3f14e02945b20d57b85a891550a1e09e95', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (index.h("nv-iconbutton", { key: '1982d2de200284b3bc70dd51bea9c452b2791038', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), index.h("span", { key: '8c2f7473c47f4fcb9a8373c8b7030a7f56e8b682', "data-scope": "page-label" }, pageLabel), index.h("span", { key: '527cd649cf4e8ba1d62451d6910401076d555b86', "data-scope": "total" }, totalLabel), index.h("div", { key: '2bf99bd31d9d46059fc6ab52f6e20878ce2dea64', "data-scope": "per-page" }, index.h("nv-fieldselect", { key: '4f55796d8cccdf9f50792eb3ff3d448cdae8de07', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), index.h("slot", { key: '9b1dc7edf5dd4ed4be02705a11a3c04f5bcc81bd' })));
+        return (index.h(index.Host, { key: 'bd9f375e9cd70057e07f4a9c2959602deae32595', role: "navigation", "aria-label": "Pagination" }, !this.hideControls && (index.h("div", { key: '0386065df913eb6f2771ca2d2c4298fb366d4ab0', "data-scope": "controls" }, !this.hideFirstLast && (index.h("nv-iconbutton", { key: '3936165ea8dcf0ca31bdf5655227ac78850138da', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (index.h("nv-iconbutton", { key: '2bd49394589d6774a32b0389268bd411ebfa4e16', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (index.h("nv-iconbutton", { key: '030d56f45acc4021cd7541970c9e5190ed7e6385', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (index.h("nv-iconbutton", { key: '720dc8f95504f3b71b7dfd5e674c67d3f059b235', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), index.h("span", { key: 'd4bf47080fd6e9beb2197b9447b6f8619ab8321d', "data-scope": "page-label" }, pageLabel), index.h("span", { key: '874dc1d70c11a9e1a7553156c0eae64274ce1573', "data-scope": "total" }, totalLabel), index.h("div", { key: 'e7ce034f09df02eab8cbcd425680cf1f3548cc4e', "data-scope": "per-page" }, index.h("nv-fieldselect", { key: '61a7bc328283207597a8633bd77cb66a990b0973', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), index.h("slot", { key: '69c3590d8d2d2ce3df7ce3f809b7ee6614d58ce5' })));
     }
     static get watchers() { return {
         "pageIndex": [{

package/dist/cjs/nv-popover.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 var fade_animation = require('./fade.animation-BQSqXXOJ.js');
 var grow_animation = require('./grow.animation-ynu_HmA_.js');
 require('./style-value-types.es-B1vLqX9m.js');
@@ -1959,7 +1959,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8f9429a26146be5feff838bff9861c8016bcae72' }, index.h("slot", { key: '507917d729f202d0ec29e2011b0aae958a4474b5', name: "trigger" }), index.h("div", { key: 'cc85ae4610b0554b2cddd2fb62a8e8df5b8de21f', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'e53a79dc2a4d439271d55391ad087c0db8abaf19', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'ef72627c588727dff2f558133d46e1689a89fc24', name: "content" }))));
+        return (index.h(index.Host, { key: 'bf65e878d126fd511b574bf0262dde4f60e89750' }, index.h("slot", { key: '5482a6bc3d6eb3edfa6653623f6c3024c6d150be', name: "trigger" }), index.h("div", { key: '6cd445d44ad05def95647d2898dc19092716a8ee', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'b23f0f9709f733a44d239a05b99f965d5ba036fb', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '423901f5afaf3418edc8870b4de7b113151c685d', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-row.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 const nvRowCss = () => `nv-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--spacing-4) * -1);margin-left:calc(var(--spacing-4) * -1);row-gap:var(--spacing-4)}`;
 
@@ -11,7 +11,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '18964229751804689bc422177dcd5649ef9af68f' }, index.h("slot", { key: 'd2d331afe7dbcf2caded4dc6131512520472b716' })));
+        return (index.h(index.Host, { key: 'dd18c6bf2c540a0f9389d32c01ce1bf19417e15a' }, index.h("slot", { key: '2bae51fa253dd71ff2318af8538a64200b7dfef4' })));
     }
 };
 NvRow.style = nvRowCss();

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

@@ -1,13 +1,17 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
-const nvSidebarCss = () => `nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--components-sidebar-background);border-right:var(--sidebar-divider-size) solid var(--components-sidebar-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-width-collapsed)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed)}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--sidebar-padding-y) var(--sidebar-padding-x);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--sidebar-collapsible-button-position-top);right:calc(-1 * var(--sidebar-collapsible-button-position-right));display:flex;align-items:center;justify-content:center;padding:var(--sidebar-collapsible-button-padding);background-color:var(--components-sidebar-background);border:1px solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-interaction-container-neutral-background-hover)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-icon)}nv-sidebar .nv-sidebar-toggle nv-icon:hover{color:var(--color-interaction-container-neutral-icon-hover)}`;
+const nvSidebarCss = () => `nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--components-sidebar-background);border-right:var(--sidebar-divider-size) solid var(--components-sidebar-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-width-collapsed)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed)}nv-sidebar[resizing]{transition:none}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--sidebar-padding-y) var(--sidebar-padding-x);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--sidebar-collapsible-button-position-top);right:calc(-1 * var(--sidebar-collapsible-button-position-right));display:flex;align-items:center;justify-content:center;padding:var(--sidebar-collapsible-button-padding);background-color:var(--components-sidebar-background);border:1px solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-interaction-container-neutral-background-hover)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-icon)}nv-sidebar .nv-sidebar-toggle nv-icon:hover{color:var(--color-interaction-container-neutral-icon-hover)}nv-sidebar .nv-sidebar-resize-handle{position:absolute;top:0;right:calc(-1 * var(--sidebar-divider-size));width:4px;height:100%;cursor:col-resize;background-color:transparent;transition:background-color 0.15s ease;z-index:9;user-select:none;touch-action:none}nv-sidebar .nv-sidebar-resize-handle:hover,nv-sidebar .nv-sidebar-resize-handle:focus-visible{background-color:var(--color-interaction-container-branded-high-background)}nv-sidebar .nv-sidebar-resize-handle:focus,nv-sidebar .nv-sidebar-resize-handle:focus-within{outline:none}nv-sidebar .nv-sidebar-resize-handle:focus-visible,nv-sidebar .nv-sidebar-resize-handle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}`;
 
+const KEYBOARD_STEP = 8;
 const NvSidebar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.openChanged = index.createEvent(this, "openChanged", 3);
+        this.widthChanged = index.createEvent(this, "widthChanged", 3);
+        this.resizeStartX = 0;
+        this.resizeStartWidth = 0;
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -33,6 +37,23 @@ const NvSidebar = class {
          * - low: Less prominent appearance
          */
         this.notificationEmphasis = 'high';
+        /**
+         * When true, the sidebar can be resized horizontally by dragging its right edge.
+         * Only active when the sidebar is open (not collapsed).
+         */
+        this.resizable = false;
+        /**
+         * Minimum width in pixels when resizing.
+         */
+        this.minWidth = 200;
+        /**
+         * Maximum width in pixels when resizing.
+         */
+        this.maxWidth = 480;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        this.resizing = false;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -42,6 +63,81 @@ const NvSidebar = class {
                 this.open = !this.open;
             }
         };
+        this.handleResizeStart = (event) => {
+            if (event.button !== 0)
+                return;
+            if (this.resizing)
+                return;
+            if (!this.canResize())
+                return;
+            event.preventDefault();
+            this.resizing = true;
+            this.resizeStartX = event.clientX;
+            // clientWidth excludes the border, matching the CSS width that drives `--sidebar-width`
+            this.resizeStartWidth = this.el.clientWidth;
+            // Pointer capture routes subsequent pointer events to the handle even when
+            // the pointer leaves it, so releasing outside the window still fires pointerup
+            event.currentTarget.setPointerCapture(event.pointerId);
+        };
+        this.handleResizeMove = (event) => {
+            if (!this.resizing || !this.canResize())
+                return;
+            const delta = event.clientX - this.resizeStartX;
+            this.width = this.clampWidth(this.resizeStartWidth + delta);
+        };
+        this.handleResizeEnd = (event) => {
+            if (!this.resizing)
+                return;
+            this.releasePointerCapture(event);
+            this.resizing = false;
+            if (this.width != null) {
+                this.widthChanged.emit(this.width);
+            }
+        };
+        this.handleResizeCancel = (event) => {
+            // Pointer cancel means the interaction was aborted (browser gesture, system
+            // event). Release capture and drop the drag, but do not emit widthChanged
+            // since the value was not committed by the user.
+            if (!this.resizing)
+                return;
+            this.releasePointerCapture(event);
+            this.resizing = false;
+        };
+        this.cancelResize = () => {
+            if (!this.resizing)
+                return;
+            this.resizing = false;
+        };
+        this.handleResizeKeyDown = (event) => {
+            if (!this.canResize())
+                return;
+            const [min, max] = this.getBounds();
+            const current = this.width ?? this.el.clientWidth;
+            let next = null;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    next = current - KEYBOARD_STEP;
+                    break;
+                case 'ArrowRight':
+                    next = current + KEYBOARD_STEP;
+                    break;
+                case 'Home':
+                    next = min;
+                    break;
+                case 'End':
+                    next = max;
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            const currentClamped = this.clampWidth(current);
+            const nextClamped = this.clampWidth(next);
+            if (nextClamped === currentClamped)
+                return;
+            this.width = nextClamped;
+            this.widthChanged.emit(this.width);
+        };
         /**
          * Sets the active state of navigation items based on activePath
          */
@@ -117,6 +213,48 @@ const NvSidebar = class {
             });
         };
     }
+    getBounds() {
+        // Fall back to the built-in defaults if a consumer passes a non-finite bound
+        const rawMin = Number.isFinite(this.minWidth) ? this.minWidth : 200;
+        const rawMax = Number.isFinite(this.maxWidth) ? this.maxWidth : 480;
+        return [Math.min(rawMin, rawMax), Math.max(rawMin, rawMax)];
+    }
+    clampWidth(value) {
+        const [min, max] = this.getBounds();
+        return Math.round(Math.min(Math.max(value, min), max));
+    }
+    canResize() {
+        return this.resizable && !(this.type === 'collapsible' && !this.open);
+    }
+    getAriaValueNow() {
+        if (this.width != null)
+            return this.clampWidth(this.width);
+        const [min] = this.getBounds();
+        return this.clampWidth(this.el?.clientWidth || min);
+    }
+    applyWidthStyle() {
+        if (this.width == null) {
+            this.el.style.removeProperty('--sidebar-width');
+            return;
+        }
+        if (!Number.isFinite(this.width)) {
+            // Guard against NaN/Infinity which would otherwise loop through @Watch('width') forever
+            this.width = undefined;
+            return;
+        }
+        const clamped = this.clampWidth(this.width);
+        if (clamped !== this.width) {
+            this.width = clamped;
+            return; // @Watch('width') will re-enter and apply the clamped value
+        }
+        this.el.style.setProperty('--sidebar-width', `${clamped}px`);
+    }
+    releasePointerCapture(event) {
+        const target = event.currentTarget;
+        if (target?.hasPointerCapture(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+        }
+    }
     handleCollapsedSideEffects(isCollapsed) {
         if (!isCollapsed) {
             return;
@@ -133,11 +271,32 @@ const NvSidebar = class {
     }
     onOpenChanged(newValue, oldValue) {
         this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);
+        // Cancel any in-progress resize if the sidebar is programmatically collapsed
+        if (this.type === 'collapsible' && !newValue) {
+            this.cancelResize();
+        }
         // 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);
         }
     }
+    onWidthChanged() {
+        this.applyWidthStyle();
+    }
+    onBoundsChanged() {
+        // Re-clamp the current width against the new bounds so visuals and ARIA stay within range
+        if (this.width != null) {
+            const clamped = this.clampWidth(this.width);
+            if (clamped !== this.width) {
+                this.width = clamped;
+            }
+        }
+    }
+    onResizableChanged(newValue) {
+        if (!newValue) {
+            this.cancelResize();
+        }
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -145,6 +304,7 @@ const NvSidebar = class {
         this.setActiveNavItems();
         this.setupMutationObserver();
         this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);
+        this.applyWidthStyle();
     }
     disconnectedCallback() {
         if (this.mutationObserver) {
@@ -159,9 +319,11 @@ const NvSidebar = class {
     //#region RENDER
     render() {
         const isCollapsed = this.type === 'collapsible' && !this.open;
-        return (index.h(index.Host, { key: '7c77dc107335664b3844b38579f53c8805de09ca', 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: '00e9958d45d311168ab3024eda4d0a45813a8152', class: "nv-sidebar-container" }, index.h("slot", { key: '047f6bda1730f65c403f6aefe52b7c06192001c3' })), this.type === 'collapsible' && (index.h("button", { key: '51174b4f74614dc1eb1bfc78aacc542d8c938a02', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '75fc4ce9ac319be982534d502d5c019ff7d8ebdf', name: this.open
+        const showResizeHandle = this.resizable && !isCollapsed;
+        const [ariaValueMin, ariaValueMax] = this.getBounds();
+        return (index.h(index.Host, { key: '6d43cb441e9477d4146d44af59365848dbbee875', role: "navigation", collapsed: isCollapsed ? true : undefined, resizing: this.resizing ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, index.h("div", { key: 'f6c58fbbafdb759499dd5a52e45eebc9ed6e5f4a', class: "nv-sidebar-container" }, index.h("slot", { key: '9ebf341658bb5631858390e3c76e274de72b5448' })), this.type === 'collapsible' && (index.h("button", { key: '1fd482c9157d47a5852395eb99a65f044f3db76a', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: 'cd0a51cd731fc8c703256c3b781e0f20b14a3e2f', name: this.open
                 ? 'layout-sidebar-left-collapse'
-                : 'layout-sidebar-right-collapse', size: "sm" })))));
+                : 'layout-sidebar-right-collapse', size: "sm" }))), showResizeHandle && (index.h("div", { key: '75fe0b6d98ad9558b9003c541f255f84a41dbf27', class: "nv-sidebar-resize-handle", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize sidebar", "aria-valuenow": this.getAriaValueNow(), "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, tabIndex: 0, onPointerDown: this.handleResizeStart, onPointerMove: this.handleResizeMove, onPointerUp: this.handleResizeEnd, onPointerCancel: this.handleResizeCancel, onKeyDown: this.handleResizeKeyDown }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -170,6 +332,18 @@ const NvSidebar = class {
             }],
         "open": [{
                 "onOpenChanged": 0
+            }],
+        "width": [{
+                "onWidthChanged": 0
+            }],
+        "minWidth": [{
+                "onBoundsChanged": 0
+            }],
+        "maxWidth": [{
+                "onBoundsChanged": 0
+            }],
+        "resizable": [{
+                "onResizableChanged": 0
             }]
     }; }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 const nvSidebarcontentCss = () => `nv-sidebarcontent{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}`;
 
@@ -11,7 +11,7 @@ const NvSidebarcontent = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '1892ab4b2c7698bb6c0e2baae242650f3a967947', role: "list" }, index.h("slot", { key: 'a971f991f52e65f4bd83dafeee2cbdf7c4b6de51' })));
+        return (index.h(index.Host, { key: '2460a0659ee45f37e92776ccf05a30a4bd58772f', role: "list" }, index.h("slot", { key: 'e7f41a9684461e8ee3fbc0388a6e1e80a33894ba' })));
     }
 };
 NvSidebarcontent.style = nvSidebarcontentCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 const nvSidebardividerCss = () => `nv-sidebardivider{display:block;height:var(--sidebar-divider-size);background-color:var(--components-sidebar-divider)}`;
 
@@ -11,7 +11,7 @@ const NvSidebardivider = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return index.h(index.Host, { key: 'f8b607a8376e9e27d33ff13da96765bf46231cc0', role: "separator", "aria-orientation": "horizontal" });
+        return index.h(index.Host, { key: '479568a0cd52812e71cfc721ddd7e2af3da0762d', role: "separator", "aria-orientation": "horizontal" });
     }
 };
 NvSidebardivider.style = nvSidebardividerCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 const nvSidebarfooterCss = () => `nv-sidebarfooter{display:block;margin-top:auto}`;
 
@@ -11,7 +11,7 @@ const NvSidebarfooter = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4ef8bb09df1cca9008062f4dc8f0252472da6a66' }, index.h("slot", { key: 'b30037ecc79272287a5ad134b1b17ce9516d14c7' })));
+        return (index.h(index.Host, { key: 'e678899934cfdb9b0c5433d3a22b23e73728ab46' }, index.h("slot", { key: '39e4a8351deb008e9672a3e90c2f2c51196a2021' })));
     }
 };
 NvSidebarfooter.style = nvSidebarfooterCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 const nvSidebargroupCss = () => `nv-sidebargroup{display:flex;flex-direction:column;gap:var(--sidebar-group-gap-y)}nv-sidebargroup .nv-sidebargroup-label{display:block;font-size:var(--font-size-sm);line-height:var(--line-height-sm);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-lower-text);letter-spacing:0;padding:var(--sidebar-title-padding-y) var(--sidebar-title-padding-x)}nv-sidebar[collapsed] nv-sidebargroup .nv-sidebargroup-label{display:none}`;
 
@@ -12,7 +12,7 @@ const NvSidebargroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e23656515b0882eaeed7a9a3b5c772deab41cd9c', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '41600406fb5fd8f3845464260ccbcb3845d52b37', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '14303ef78c5da82c9a6d94d09a1e9341ade5bee4' })));
+        return (index.h(index.Host, { key: 'aa466d5d04f8f349c5f40b2705ce3ca07dcc0733', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '4460638eaac697aaba09e634bebc895dfeac43c8', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '4bfb3047dd95cb445797068c6915860b372a0864' })));
     }
 };
 NvSidebargroup.style = nvSidebargroupCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 const nvSidebarheaderCss = () => `nv-sidebarheader{display:block}`;
 
@@ -11,7 +11,7 @@ const NvSidebarheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '5e0b6bdc78618f3e434b62b6f6e4d60c220895ce' }, index.h("slot", { key: 'ae0f11bea6f4f9bbe5376d0870453648dc4acc77' })));
+        return (index.h(index.Host, { key: '058b1681ff0e0a35d96b3f5b27444853211eb067' }, index.h("slot", { key: '7b2f91201fe6ae8325dcfd07fae8f71cc15ffea1' })));
     }
 };
 NvSidebarheader.style = nvSidebarheaderCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-eLt3bBQs.js');
+var index = require('./index-Bj9nnTVm.js');
 
 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}`;
 
@@ -21,7 +21,7 @@ const NvSidebarlogo = class {
     render() {
         const logoSrc = this.logo || this.defaultLogo;
         const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
-        return (index.h(index.Host, { key: '4a4ce90770480c97bbe8d940cf30f75b838de6c4' }, index.h("div", { key: '0ff88ef0a319410b0162f79738c13b3eb304fccb', class: "nv-sidebarlogo-container" }, index.h("img", { key: '6e94515fac21420295752374392e24de5079f013', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: '88f326b233a44c0e4bbc1efbeabfa619f27366a2', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), index.h("slot", { key: 'bb09f8c0b8df53e8e3a47cc70235ca1599420ec1', name: "label" }), this.label && index.h("span", { key: 'b711afc9977d86decc2f475b457e8a8d6ed507f0', class: "nv-sidebarlogo-title" }, this.label))));
+        return (index.h(index.Host, { key: '1b61ccdfac0bf190f46b9750c0d64dd594982446' }, index.h("div", { key: '57e98866efe588eb18a6e9ec89a4bc1a43129598', class: "nv-sidebarlogo-container" }, index.h("img", { key: 'b682703b4343aa2ab1db7f9d312e238acd2af008', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: '0c01b944f5dabbb3120c890651b40724edbdae29', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), index.h("slot", { key: '9f6cb193bc61463f827e8bb8a39aaac8c37d3049', name: "label" }), this.label && index.h("span", { key: '1610d7896bcdce509fd601f3dfb4b6a59fcebac8', class: "nv-sidebarlogo-title" }, this.label))));
     }
 };
 NvSidebarlogo.style = nvSidebarlogoCss();