@nova-design-system/nova-webcomponents 3.26.0 → 3.27.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 /**
  * Table utility functions and constants for nv-table component
@@ -233,7 +233,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0d5518a54b41c67bdd7c73d5147fd954fb53d388' }, index.h("slot", { key: '8ab65d5dd1ce751fd357b275b84db042b1d9ce2e' })));
+        return (index.h(index.Host, { key: '43a288ca58eb82de6308dd98ac30abb3fc971f1e' }, index.h("slot", { key: '3a0b986f015777d2ca95b8ce7aebab7133b5d054' })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvTableheaderCss = () => `nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}`;
 
@@ -59,7 +59,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '95447cd8ccde74d09226bcdbf645eed309be0fa8', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '4e26aa21f080cf23ce42fb72d6777463bd079991' }), this.sortable && (index.h("span", { key: '666254c197e97226d2f1c6830d1216b9457c4acc', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '11b2de5c4c270740857094ec8a39f1d392d7246a', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: '809cf43ff3c9d3977a60a30e350fe6f4457c39f4', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: 'ba569a25aa09bb3b18d39e463474698efe6cff40' }), this.sortable && (index.h("span", { key: '77a948313d5dfc746c142eaf448df609ae0bf2b3', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: 'f18fa1d05c5d4eac8c057a7f350c270eaacc7055', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 
@@ -63,8 +63,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '38dd2a460c82599e2c2bfd6b039eafff0dc6fc67', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4d6bf742f548cc5f92ae84497f12569d9680dcef', class: "input-container" }, index.h("input", { key: '97f54363c17cde48ec226680ee58da012e590b69', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'e4576a0884f02731a3e6d2d20537cfabf411a8fe', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '4744036b0d1e73f350bbc4b6f6e7664bb9361d1e', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '44a2aeb86c840246473bc47e0ba01269af77ef06', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e5c3d1721c9db3cffd019c9274294c40793daf0', class: "description" }, index.h("slot", { key: '87c3d35c78ded085cd1ddb5b2874dfae7bd99842', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '626c2acc6992a641c5fd94509fd0ef171fd6d1c6', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'a9e4b73d740032520f6094bcada1f835b4bac16c', class: "input-container" }, index.h("input", { key: '1856dfa88421fecee06bdf098dcad22e69f34c00', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '4c46bc519d38a66fdecf75cb15caf6d577d92856', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fd61979a72a2b4e3254987beafd4b024fe1c6bae', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '0e32e3e03ffda0633f881f41d2372a3d92d82f10', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '688d4160a48d85fa5049556de27f0a26f10ec549', class: "description" }, index.h("slot", { key: '006a61b40a49426bc7c70f1fe830aeb38ecdbf3b', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvTogglebuttonCss = () => `nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));border-radius:var(--togglegroup-xs-button-radius);height:calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-sm-button-radius) + 1px);height:calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-md-button-radius) + 1px);height:calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-lg-button-radius) + 1px);height:calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[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-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[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-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}`;
 
@@ -54,7 +54,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4af1293d9eb69a3a20d8f30c6b2876c6c29ddc03', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '783fad27c525553cd404c1ffed0ae1305d330de8' })));
+        return (index.h(index.Host, { key: 'd619862ae9db76a7ce34b05c4974d40e731a576e', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '5bb9a32e26c3c404a9d2bab2bf7d573a501296a5' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvTogglebuttongroupCss = () => `nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius);height:var(--togglegroup-xs-height)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius);height:var(--togglegroup-sm-height)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius);height:var(--togglegroup-md-height)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);height:var(--togglegroup-lg-height)}`;
 
@@ -153,7 +153,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '1116872815229d09e1e286dd1f12a9787218e207' }, index.h("slot", { key: 'fa5363ec707f38830065718b2423dd8493acdd4e' })));
+        return (index.h(index.Host, { key: '93a5693197f8b41b18ecef0132168e7f209ec86a' }, index.h("slot", { key: '3085cde261575115286c295eb416063ef14a7bf2' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvTooltipCss = () => `nv-tooltip{display:inline-block;vertical-align:top;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover{display:block;height:0;min-height:0;overflow:visible}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}`;
 
@@ -44,7 +44,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'bda9ba58186add585457f8fdf4a8e1d6389da01a' }, index.h("nv-popover", { key: 'ac67ea44cebbc8abb9ff4e190668093bb7179222', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: 'b677689d4a73462b7d16ff7d9f31bfd61e7f47eb', slot: "content" }, this.message), index.h("slot", { key: 'bd1540db065fdeceb89d09d69e1dbf7ad4de728d', name: "content" })), index.h("slot", { key: '648d3c3125b0528cd8e88675122d775ad7cc40d9', ref: el => (this.defaultSlot = el) })));
+        return (index.h(index.Host, { key: 'f01e67c6f67c35beba40681c4bcd109886bbdbcf' }, index.h("nv-popover", { key: '47cd75161715752aeeae29223606e21c617a271a', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: 'fe5b09a6c0e4a67a50c9f43cb8344cee68e197f5', slot: "content" }, this.message), index.h("slot", { key: '4ef23e294baa1d5e60236ffec4a26439610030c1', name: "content" })), index.h("slot", { key: '5d8486923cd7cf99da69f4fa4d319dd5b5999cfa', ref: el => (this.defaultSlot = el) })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -42,6 +42,7 @@
     "components/nv-notification/nv-notification.js",
     "components/nv-notification-bullet/nv-notification-bullet.js",
     "components/nv-notificationcontainer/nv-notificationcontainer.js",
+    "components/nv-pagination-nav/nv-pagination-nav.js",
     "components/nv-paginationtable/nv-paginationtable.js",
     "components/nv-popover/nv-popover.js",
     "components/nv-row/nv-row.js",

package/dist/collection/components/nv-dialog/nv-dialog.js

@@ -14,6 +14,7 @@ import { v4 as uuidv4 } from "uuid";
 export class NvDialog {
     constructor() {
         this.eventsAttached = false;
+        this.pointerDownTarget = null;
         this.triggerClickEvents = [
             ['click', this.show],
             [
@@ -73,8 +74,18 @@ export class NvDialog {
                 this.close();
             }
         };
+        /**
+         * Records the pointer down target to distinguish intentional outside clicks
+         * from drag-out gestures (press inside, release outside).
+         * @param {PointerEvent} event - The pointerdown event.
+         */
+        this.handleDialogPointerDown = (event) => {
+            this.pointerDownTarget = event.target;
+        };
         /**
          * Handles the click event to close the dialog when clickOutside is true.
+         * Only closes if both pointerdown and click originated on the backdrop,
+         * preventing accidental closes from drag-out gestures.
          * @param {MouseEvent} event - The click event.
          */
         this.handleDialogClick = (event) => {
@@ -82,11 +93,13 @@ export class NvDialog {
                 return;
             if (this.checkForOpenPopovers())
                 return;
-            if (event.target === this.backdropElement) {
+            if (event.target === this.backdropElement &&
+                this.pointerDownTarget === this.backdropElement) {
                 this.close();
                 event.preventDefault();
                 event.stopPropagation();
             }
+            this.pointerDownTarget = null;
         };
         this.checkForOpenPopovers = () => {
             let hasOpenPopover = false;
@@ -278,7 +291,7 @@ export class NvDialog {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (h(Host, { key: 'd8d44a128d01fd7a9b62d42f08f7eb5b85e4e5b2' }, h("slot", { key: '7157a6121fea5e8828dd2c0c3db4998c0cb5d0d2', name: "trigger" }), h("dialog", { key: '22674ade1de7b50439ffe77ad2a20e6473929c34', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, h("div", { key: '4f851e286f94be5972ebb417bef891e29714cb44', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: '881171acec6e40b627a544b716302d576b836487', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (h("nv-button", { key: '9691520158952a35da536f94073e8ff5fd6041f0', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, h("nv-icon", { key: '8392a7d6ec89d08391904c94f10296223c4d6012', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: '7fa62a9d5e8f1fe3f42872af3fc753e2fb175a9a', class: "content-body", id: "dialog-content" }, h("slot", { key: '5ec44365b70f6ec2762896ce242a264fb4ffb05a' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
+        return (h(Host, { key: '402dda24aab32637cbfd4a2967297fab760e6389' }, h("slot", { key: '3744313bc37f3bbf4fabe235004d1e99a6d82ffd', name: "trigger" }), h("dialog", { key: '8d34a090d52e729c8dbed18270900d8ef46c6a7a', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onPointerDown: this.handleDialogPointerDown, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, h("div", { key: '9539f8682b25f4cf52f4a6fc554d1c314f015655', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: '3d74eb9b30bd5d39afd76a20d229adc0f3343f8c', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (h("nv-button", { key: 'd061699ef943f1178e985cfca832918b05e914be', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, h("nv-icon", { key: 'f60991a49b800d6a5f3af15ddc27fcbf77310a0d', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-dialogheader", { id: "dialog-header" })), h("div", { key: 'b3e76c96245728cd574d7d357ec0507525ba9ed5', class: "content-body", id: "dialog-content" }, h("slot", { key: 'be5a36d7e816f5be9c624c13d5ee03126e1d97cf' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
     }
     static get is() { return "nv-dialog"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-pagination-nav/nv-pagination-nav.css

@@ -0,0 +1,37 @@
+nv-pagination-nav {
+  display: block;
+}
+nv-pagination-nav [data-scope=pagination-nav] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+nv-pagination-nav [data-scope=page-list] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+nv-pagination-nav [data-scope=page-button] {
+  display: flex;
+  align-items: center;
+}
+nv-pagination-nav [data-scope=page-button] nv-button,
+nv-pagination-nav [data-scope=page-button] nv-iconbutton {
+  min-width: var(--spacing-8);
+  justify-content: center;
+}
+nv-pagination-nav [data-scope=ellipsis] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--spacing-8);
+  height: var(--spacing-8);
+  color: var(--color-content-lower-text);
+  font-size: var(--font-size-sm);
+  user-select: none;
+}

package/dist/collection/components/nv-pagination-nav/nv-pagination-nav.docs.js

@@ -0,0 +1,278 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvPaginationNavDocs = {
+    component: 'nv-pagination-nav',
+    subcomponents: ['nv-button', 'nv-iconbutton', 'nv-icon'],
+    badge: 'beta',
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Basic pagination navigation with default settings. Shows a sliding window of page numbers with Previous/Next buttons. The component automatically handles button states and provides a clean, accessible navigation experience.',
+            args: {
+                currentPage: 1,
+                totalCount: 100,
+                pageSize: 10,
+                previousButtonLabel: 'Previous',
+                nextButtonLabel: 'Next',
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // currentPage
+        {
+            name: nameof(x => x.currentPage),
+            description: 'The currently active page number (1-based index). The active page is visually highlighted with an active state. Use this prop to control which page is selected, typically bound to your application state.',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // totalCount
+        {
+            name: nameof(x => x.totalCount),
+            description: 'Total number of items to paginate. Works with pageSize to calculate the total number of pages (totalCount / pageSize). In this example: 250 items ÷ 10 per page = 25 pages.',
+            args: {
+                currentPage: 1,
+                totalCount: 250,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // pageSize
+        {
+            name: nameof(x => x.pageSize),
+            description: 'Number of items per page. Works with totalCount to determine total pages. Smaller values create more pages. In this example: 100 items ÷ 25 per page = 4 pages.',
+            args: {
+                currentPage: 1,
+                totalCount: 100,
+                pageSize: 25,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // previousButtonLabel
+        {
+            name: nameof(x => x.previousButtonLabel),
+            description: 'Customize the label for the previous navigation button. Use this for internationalization (i18n) to display text in different languages. Default is "Previous".',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                previousButtonLabel: 'Précédent',
+                nextButtonLabel: 'Suivant',
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // nextButtonLabel
+        {
+            name: nameof(x => x.nextButtonLabel),
+            description: 'Customize the label for the next navigation button. Use this for internationalization (i18n) to display text in different languages. Default is "Next".',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                previousButtonLabel: 'Zurück',
+                nextButtonLabel: 'Weiter',
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // numStartZoneButtons
+        {
+            name: nameof(x => x.numStartZoneButtons),
+            description: 'Number of page buttons to show at the start of the pagination. Combined with numEndZoneButtons, this determines the total number of visible page buttons (default: 2). Increasing this value shows more pages at the beginning.',
+            args: {
+                currentPage: 10,
+                totalCount: 200,
+                pageSize: 10,
+                numStartZoneButtons: 3,
+                numEndZoneButtons: 2,
+                numMiddleButtons: 3,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // numEndZoneButtons
+        {
+            name: nameof(x => x.numEndZoneButtons),
+            description: 'Number of page buttons to show at the end of the pagination. Combined with numStartZoneButtons, this determines the total number of visible page buttons (default: 2). Increasing this value shows more pages at the end.',
+            args: {
+                currentPage: 10,
+                totalCount: 200,
+                pageSize: 10,
+                numStartZoneButtons: 2,
+                numEndZoneButtons: 3,
+                numMiddleButtons: 3,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // numMiddleButtons
+        {
+            name: nameof(x => x.numMiddleButtons),
+            description: 'Number of page buttons to show in the middle zone around the current page (only used when showMiddleZone is true)',
+            args: {
+                currentPage: 10,
+                totalCount: 200,
+                pageSize: 10,
+                numStartZoneButtons: 2,
+                numEndZoneButtons: 2,
+                numMiddleButtons: 5,
+                showMiddleZone: true,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // isOnlyIcon
+        {
+            name: nameof(x => x.isOnlyIcon),
+            description: 'Display Previous/Next navigation buttons as icon buttons for a more compact layout. Page number buttons always use regular buttons.',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                isOnlyIcon: true,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // showMiddleZone
+        {
+            name: nameof(x => x.showMiddleZone),
+            description: 'When true, shows a middle zone with the current page and two ellipses. When false (default), uses a sliding window that keeps a constant number of buttons while ensuring the current page is always visible.',
+            args: {
+                currentPage: 15,
+                totalCount: 500,
+                pageSize: 10,
+                showMiddleZone: true,
+                numMiddleButtons: 3,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // SlidingWindow
+        {
+            name: 'SlidingWindow',
+            description: 'Default behavior with sliding window (showMiddleZone=false). The pagination window slides to keep the current page visible while maintaining a constant number of buttons.',
+            args: {
+                currentPage: 15,
+                totalCount: 500,
+                pageSize: 10,
+                showMiddleZone: false,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // ManyPages
+        {
+            name: 'ManyPages',
+            description: 'Pagination with many pages showing the sliding window behavior (default). The window slides to include the current page while keeping a constant number of buttons.',
+            args: {
+                currentPage: 15,
+                totalCount: 500,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // FewPages
+        {
+            name: 'FewPages',
+            description: 'When the total number of pages is small (4 pages or fewer), all page numbers are displayed without ellipses. This provides direct access to all pages without any truncation.',
+            args: {
+                currentPage: 2,
+                totalCount: 35,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // FirstPage
+        {
+            name: 'FirstPage',
+            description: 'Edge case demonstrating the first page state. The Previous button is automatically disabled to prevent navigation beyond the first page, providing a clear visual indicator that users are at the start.',
+            args: {
+                currentPage: 1,
+                totalCount: 100,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // LastPage
+        {
+            name: 'LastPage',
+            description: 'Edge case demonstrating the last page state. The Next button is automatically disabled to prevent navigation beyond the last page, providing a clear visual indicator that users are at the end.',
+            args: {
+                currentPage: 10,
+                totalCount: 100,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // SinglePage
+        {
+            name: 'SinglePage',
+            description: 'Edge case with only one page of data. Both Previous and Next buttons are disabled since there are no other pages to navigate to. This is common when filtering reduces results to a single page.',
+            args: {
+                currentPage: 1,
+                totalCount: 8,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // CustomZones
+        {
+            name: 'CustomZones',
+            description: 'Advanced example with minimal zone configuration (1 start + 1 end button). This creates a very compact pagination display, showing only 2 page buttons at a time plus the current page when sliding. Useful for space-constrained layouts.',
+            args: {
+                currentPage: 12,
+                totalCount: 300,
+                pageSize: 10,
+                numStartZoneButtons: 1,
+                numEndZoneButtons: 1,
+                numMiddleButtons: 5,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // LargeDataset
+        {
+            name: 'LargeDataset',
+            description: 'Demonstrates pagination with a very large dataset (10,000 items across 100 pages). The sliding window behavior efficiently handles large page counts by showing only a small, constant number of page buttons while maintaining easy navigation.',
+            args: {
+                currentPage: 50,
+                totalCount: 10000,
+                pageSize: 100,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // SmallPageSize
+        {
+            name: 'SmallPageSize',
+            description: 'Shows how a smaller page size creates more pages from the same dataset. 100 items with 5 per page creates 20 pages instead of 10. Useful for scenarios where you want to display fewer items at once (mobile views, detailed cards, etc.).',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 5,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // Internationalization
+        {
+            name: 'Internationalization',
+            description: 'Complete example showing how to localize the pagination component for different languages. Use previousButtonLabel and nextButtonLabel props to translate the navigation buttons. This example uses French labels.',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                previousButtonLabel: 'Précédent',
+                nextButtonLabel: 'Suivant',
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // IconButtonMode
+        {
+            name: 'IconButtonMode',
+            description: 'Compact navigation with Previous/Next as icon buttons. Page numbers remain as regular buttons for readability.',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                isOnlyIcon: true,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+    ],
+};
+export default NvPaginationNavDocs;