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

package/dist/cjs/{nv-iconbutton_2.entry-BtDxwMFD.js → nv-iconbutton_2.entry-CNR_poEm.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-BRxlcrvE.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 require('@stencil/react-output-target/runtime');
 require('react');
@@ -128,7 +128,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: 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: '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: 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: '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); }
@@ -162,7 +162,7 @@ const NvLoader = class {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (index.h(index.Host, { key: 'a80c59f9585654352e1b48e1a245e94172e1e533', class: clsxChV9xqsO.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (index.h(index.Host, { key: '7b918edfcde0ddd6c0d43ad6e2a2457715bd1889', class: clsxChV9xqsO.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
 };
 NvLoader.style = nvLoaderCss();

package/dist/cjs/{nv-menu.entry-aX39SPH8.js → nv-menu.entry-CxXHuTq3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -192,7 +192,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.entry-DzSp52G2.js → nv-menuitem.entry-44XD7nfl.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -50,7 +50,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.entry-D2yOXj46.js → nv-notification-bullet.entry-Cn2OELYw.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-notification.entry-BRXHbtT8.js → nv-notification.entry-C8beqUzI.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
-var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+var index = require('./index-BRxlcrvE.js');
+var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.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');
@@ -53,18 +53,18 @@ const NvNotification = class {
         /****************************************************************************/
         //#region INTERNAL
         this.iconByFeedback = {
-            [constantsBReL3Lsa.FeedbackColors.Warning]: 'alert-circle',
-            [constantsBReL3Lsa.FeedbackColors.Information]: 'info-circle',
-            [constantsBReL3Lsa.FeedbackColors.Success]: 'circle-check',
-            [constantsBReL3Lsa.FeedbackColors.Error]: 'alert-triangle',
-            [constantsBReL3Lsa.FeedbackColors.Neutral]: 'help',
+            [constantsGOKBmbgZ.FeedbackColors.Warning]: 'alert-circle',
+            [constantsGOKBmbgZ.FeedbackColors.Information]: 'info-circle',
+            [constantsGOKBmbgZ.FeedbackColors.Success]: 'circle-check',
+            [constantsGOKBmbgZ.FeedbackColors.Error]: 'alert-triangle',
+            [constantsGOKBmbgZ.FeedbackColors.Neutral]: 'help',
         };
         this.roleByFeedback = {
-            [constantsBReL3Lsa.FeedbackColors.Error]: 'alert',
-            [constantsBReL3Lsa.FeedbackColors.Warning]: 'alert',
-            [constantsBReL3Lsa.FeedbackColors.Information]: 'status',
-            [constantsBReL3Lsa.FeedbackColors.Success]: 'status',
-            [constantsBReL3Lsa.FeedbackColors.Neutral]: 'status',
+            [constantsGOKBmbgZ.FeedbackColors.Error]: 'alert',
+            [constantsGOKBmbgZ.FeedbackColors.Warning]: 'alert',
+            [constantsGOKBmbgZ.FeedbackColors.Information]: 'status',
+            [constantsGOKBmbgZ.FeedbackColors.Success]: 'status',
+            [constantsGOKBmbgZ.FeedbackColors.Neutral]: 'status',
         };
     }
     //#endregion PROPERTIES
@@ -118,15 +118,15 @@ const NvNotification = class {
     }
     getSlideDestination(pos) {
         switch (pos) {
-            case constantsBReL3Lsa.NotificationPosition.TopRight:
-            case constantsBReL3Lsa.NotificationPosition.BottomRight:
+            case constantsGOKBmbgZ.NotificationPosition.TopRight:
+            case constantsGOKBmbgZ.NotificationPosition.BottomRight:
                 return { axis: 'x', to: 100 }; // right
-            case constantsBReL3Lsa.NotificationPosition.TopLeft:
-            case constantsBReL3Lsa.NotificationPosition.BottomLeft:
+            case constantsGOKBmbgZ.NotificationPosition.TopLeft:
+            case constantsGOKBmbgZ.NotificationPosition.BottomLeft:
                 return { axis: 'x', to: -100 }; // left
-            case constantsBReL3Lsa.NotificationPosition.TopCenter:
+            case constantsGOKBmbgZ.NotificationPosition.TopCenter:
                 return { axis: 'y', to: -100 }; // up
-            case constantsBReL3Lsa.NotificationPosition.BottomCenter:
+            case constantsGOKBmbgZ.NotificationPosition.BottomCenter:
                 return { axis: 'y', to: 100 }; // down
             default:
                 return { axis: 'x', to: 100 }; // fallback
@@ -167,7 +167,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.entry-YNIM2_ah.js → nv-notificationcontainer.entry-DgEstiLX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -21,7 +21,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.entry-uY1nT9aT.js → nv-pagination-nav.entry-CIZPwFeF.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -180,7 +180,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.entry-mr5KYXVC.js → nv-paginationtable.entry-woQZpVmb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -40,6 +40,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)
@@ -212,10 +225,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.entry-_9ARKM70.js → nv-popover.entry-rHUUSzR-.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-BRxlcrvE.js');
 var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
 var grow_animationD7ep_aVl = require('./grow.animation-D7ep_aVl-BuXEDSK-.js');
 require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
@@ -1962,7 +1962,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.entry-BMQvcqlU.js → nv-row.entry-DaERf8TD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,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.entry-BI9me_HP.js

@@ -0,0 +1,355 @@
+'use strict';
+
+var index = require('./index-BRxlcrvE.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarCss = () => `nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--components-sidebar-background);border-right:var(--sidebar-divider-size) solid var(--components-sidebar-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-width-collapsed)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed)}nv-sidebar[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
+        /**
+         * The type of sidebar behavior.
+         * - collapsible: Can be toggled open/closed
+         * - persistent: Always visible
+         */
+        this.type = 'persistent';
+        /**
+         * Whether the sidebar is currently open (only applies to collapsible type).
+         */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.open = true;
+        /**
+         * Determines the type of notification bullets in the sidebar.
+         * - neutral: Uses neutral colors (gray)
+         * - brand: Uses brand colors (orange/teal depending on theme)
+         */
+        this.notificationIntention = 'brand';
+        /**
+         * Determines the emphasis of notification bullets in the sidebar.
+         * - high: More prominent appearance
+         * - low: Less prominent appearance
+         */
+        this.notificationEmphasis = 'high';
+        /**
+         * 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
+        this.handleToggle = () => {
+            if (this.type === 'collapsible') {
+                // Changing open will trigger @Watch which emits the event
+                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
+         */
+        this.setActiveNavItems = () => {
+            if (!this.activePath)
+                return;
+            // First, check all subitems to find if any matches exactly
+            const activeSubitemHrefs = new Set();
+            this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {
+                const link = subItem.querySelector('a');
+                const href = link?.getAttribute('href');
+                if (href) {
+                    const isActive = this.activePath === href;
+                    subItem.active = isActive;
+                    if (isActive) {
+                        activeSubitemHrefs.add(href);
+                    }
+                }
+            });
+            // Then, set nav items active only if:
+            // 1. Exact match with activePath AND no subitem matches
+            // 2. OR the navitem has no subitems and activePath starts with its href
+            this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {
+                const link = navItem.querySelector(':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a');
+                const href = link?.getAttribute('href');
+                const hasSubitems = navItem.querySelector('nv-sidebarnavsubitem') !== null;
+                if (href) {
+                    if (hasSubitems) {
+                        // Parent with subitems: only active if exact match (not when subitem is active)
+                        navItem.active = this.activePath === href;
+                    }
+                    else {
+                        // Item without subitems: active on exact match
+                        navItem.active = this.activePath === href;
+                    }
+                }
+            });
+        };
+        this.pendingActiveUpdate = null;
+        /**
+         * Sets up the MutationObserver to watch for changes in child elements.
+         * Only triggers on new nav items being added, not on attribute changes.
+         */
+        this.setupMutationObserver = () => {
+            this.mutationObserver = new MutationObserver(mutations => {
+                // Only react to new nav items being added, ignore other mutations
+                const hasNewNavItems = mutations.some(mutation => {
+                    if (mutation.type !== 'childList')
+                        return false;
+                    return Array.from(mutation.addedNodes).some(node => {
+                        if (node.nodeType !== Node.ELEMENT_NODE)
+                            return false;
+                        const el = node;
+                        return (el.tagName.toLowerCase() === 'nv-sidebarnavitem' ||
+                            el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' ||
+                            el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem'));
+                    });
+                });
+                if (hasNewNavItems) {
+                    // Debounce to prevent multiple rapid calls
+                    if (this.pendingActiveUpdate) {
+                        clearTimeout(this.pendingActiveUpdate);
+                    }
+                    this.pendingActiveUpdate = window.setTimeout(() => {
+                        this.setActiveNavItems();
+                        this.pendingActiveUpdate = null;
+                    }, 50);
+                }
+            });
+            this.mutationObserver.observe(this.el, {
+                childList: true,
+                subtree: true,
+            });
+        };
+    }
+    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;
+        }
+        this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {
+            navItem.open = false;
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    onActivePathChanged() {
+        this.setActiveNavItems();
+    }
+    onOpenChanged(newValue, oldValue) {
+        this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);
+        // 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
+    componentWillLoad() {
+        this.setActiveNavItems();
+        this.setupMutationObserver();
+        this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);
+        this.applyWidthStyle();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+        if (this.pendingActiveUpdate) {
+            clearTimeout(this.pendingActiveUpdate);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const isCollapsed = this.type === 'collapsible' && !this.open;
+        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" }))), 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 {
+        "activePath": [{
+                "onActivePathChanged": 0
+            }],
+        "open": [{
+                "onOpenChanged": 0
+            }],
+        "width": [{
+                "onWidthChanged": 0
+            }],
+        "minWidth": [{
+                "onBoundsChanged": 0
+            }],
+        "maxWidth": [{
+                "onBoundsChanged": 0
+            }],
+        "resizable": [{
+                "onResizableChanged": 0
+            }]
+    }; }
+};
+NvSidebar.style = nvSidebarCss();
+
+exports.nv_sidebar = NvSidebar;