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

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

@@ -71,7 +71,7 @@ export class NvFieldtextarea {
         /**
          * Enable this to make the textarea automatically resize as the user types,
          * adjusting the height to fit the content. For the best experience, avoid
-         * vertical resizing, as it’s controlled by this feature. Horizontal resizing
+         * vertical resizing, as it's controlled by this feature. Horizontal resizing
          * can still be allowed if desired.
          */
         this.autosize = false;
@@ -133,35 +133,37 @@ export class NvFieldtextarea {
     adjustTextareaHeight() {
         if (this.textareaElement && this.autosize) {
             /**
-             * The first requestAnimationFrame ensures that the DOM has applied any
+             * A single requestAnimationFrame ensures that the DOM has applied any
              * pending changes (e.g., value updates or attribute changes) before
-             * proceeding to the next frame.
+             * measuring. All style reads and writes happen synchronously within
+             * this callback so the browser never paints the intermediate
+             * "height: auto" state, avoiding a visible flash.
              */
             requestAnimationFrame(() => {
-                /**
-                 * The second requestAnimationFrame ensures that the browser has fully
-                 * recalculated layout and styles based on the updated DOM, such as
-                 * recalculating scrollHeight for the textarea after the new value is
-                 * rendered.
-                 */
-                requestAnimationFrame(() => {
-                    this.textareaElement.style.height = 'auto';
-                    const computedStyle = window.getComputedStyle(this.textareaElement);
-                    const lineHeight = parseFloat(computedStyle.lineHeight);
-                    const paddingTop = parseFloat(computedStyle.paddingTop);
-                    const paddingBottom = parseFloat(computedStyle.paddingBottom);
-                    const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
-                    const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
-                    // Calculate min-height based on rows
-                    const minHeight = lineHeight * this.rows +
-                        paddingTop +
-                        paddingBottom +
-                        borderTopWidth +
-                        borderBottomWidth;
-                    this.textareaElement.style.minHeight = `${minHeight}px`;
+                this.textareaElement.style.height = 'auto';
+                const computedStyle = window.getComputedStyle(this.textareaElement);
+                const lineHeight = parseFloat(computedStyle.lineHeight);
+                const paddingTop = parseFloat(computedStyle.paddingTop);
+                const paddingBottom = parseFloat(computedStyle.paddingBottom);
+                const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+                const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+                // Calculate min-height based on rows
+                const minHeight = lineHeight * this.rows +
+                    paddingTop +
+                    paddingBottom +
+                    borderTopWidth +
+                    borderBottomWidth;
+                this.textareaElement.style.minHeight = `${minHeight}px`;
+                if (this.maxAutoHeight &&
+                    this.textareaElement.scrollHeight > this.maxAutoHeight) {
+                    this.textareaElement.style.height = `${this.maxAutoHeight}px`;
+                    this.textareaElement.style.overflowY = 'auto';
+                }
+                else {
                     this.textareaElement.style.height =
                         this.textareaElement.scrollHeight + 'px';
-                });
+                    this.textareaElement.style.overflowY = 'hidden';
+                }
             });
         }
     }
@@ -213,11 +215,11 @@ export class NvFieldtextarea {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '318e509b03c06725526be8f6ec4ed07ad6f2180a' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '705f55c450ebdb9b3ccf61583436c5b9d1aa0ca6', htmlFor: this.inputId }, h("slot", { key: 'e4c2c58b5a8592dfe235d9544193c877c896d2b4', name: "label" }, this.label))), h("div", { key: '4c91b621928b8a38139c0a8f3a775abf0b76f178', class: "textarea-wrapper" }, h("div", { key: '2b15d531bb208a225f2bbf469f5ac7002805e9b5', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '15be5b082d20a8ee0cafb1ae78008b3b76b175c8', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: '9d7aed8625b1cfa103e275495d40116b8f1314c3' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '6609cc39f3809b833a4c9755c487ba3eef05a5c4', htmlFor: this.inputId }, h("slot", { key: '277484af20e4054be5491576ffdfb95ca0f23a79', name: "label" }, this.label))), h("div", { key: '6224c47beaee1e15ea9277a1f69f4ac5ea496cb6', class: "textarea-wrapper" }, h("div", { key: '6dd7868aa65091dd79c34497dec020945d56f925', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '2548dab5d8b387d37036a07c4a76b567c84a8b59', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
             }), maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'e3f3ab334446af3f6d16b916001bd3297341362b', class: "description" }, h("slot", { key: '1ba84f8c4de83e5bfdbdb307cd8493dd86be36ca', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '0dfef83d86ca29fad329d4c656173f052a51c4fa', hidden: !this.error, class: "error-description" }, h("slot", { key: '0361fa48742aba68bfb2b205c741bf0aff896134', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '10ba44a9c4b83db00d00c2a4e791c68836413aac', class: "description" }, h("slot", { key: '5015686b48e185707376008306c204432199cde1', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '312502a84e08fdacbe77cc55f4e91e0b4122c82b', hidden: !this.error, class: "error-description" }, h("slot", { key: 'b837f0784d75b8d0df04e025ee8f9a309c6f46d3', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }
@@ -636,7 +638,7 @@ export class NvFieldtextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable this to make the textarea automatically resize as the user types,\nadjusting the height to fit the content. For the best experience, avoid\nvertical resizing, as it\u2019s controlled by this feature. Horizontal resizing\ncan still be allowed if desired."
+                    "text": "Enable this to make the textarea automatically resize as the user types,\nadjusting the height to fit the content. For the best experience, avoid\nvertical resizing, as it's controlled by this feature. Horizontal resizing\ncan still be allowed if desired."
                 },
                 "getter": false,
                 "setter": false,
@@ -644,6 +646,25 @@ export class NvFieldtextarea {
                 "attribute": "autosize",
                 "defaultValue": "false"
             },
+            "maxAutoHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets a maximum height (in pixels) for the textarea when autosize is\nenabled. Once the content exceeds this height the textarea will stop\ngrowing and the content will overflow with a scrollbar. This is useful\nfor chat-style inputs where unlimited growth is undesirable. Only\napplies when `autosize` is `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-auto-height"
+            },
             "autofocus": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-bind */
 import { Host, h, forceUpdate, } from "@stencil/core";
 import { v4 as uuidv4 } from "uuid";
 import { TimeType } from "../../utils/constants";
@@ -872,9 +871,9 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: '021f0592f7a4eae1b249f12c668b3ce805546593', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '6c105236217cb0c6b326e3ecea4bc38bfa4353f2', htmlFor: this.inputId }, h("slot", { key: 'f4c2dbce6a50d648970acc57d8367194635b7e82', name: "label" }, this.label))), h("nv-popover", { key: 'b852ec86ace95303e1e7445765a334819135766f', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: '2ddd521de9665e64095090a187b52d9fdb207dfb', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'e8ea5e1abc5b9b502e942e2a118184233677384f', name: "before-input" }), h("div", { key: '3d3a8e00ace3bab58b57305a68aac46863a61f36', class: "input-container" }, h("slot", { key: '2a1f88fc38b5d956f9d71d181f787ace20199588', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '497d5b2cdea39e83b0cb83eb6a9adbb18e57b952', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'e223b6faa4a476fe68aa9ae3c54e27dd0ff2017b', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'ec7a22c2005d297c25959d16c8326ebe7bc80dde', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: 'b12336e4d2708b3d5c25db1a4c5b761bf954e27b', name: "after-input" })), h("div", { key: '3a341dc72b2ece47841521817f5e44ca4b2286d1', class: "time-dropdown", slot: "content" }, h("div", { key: 'b67f1f796f0a2155210d6f6937264170f1fff7c3', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b31b8401c4eb3a12ff466f389345ab8179f9ca5b', class: "description" }, h("slot", { key: '8a81cc74fb35d10f34f9abd372a58758227a4937', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '87e16ffc6ed5983850271c18ea762671ef1f99ad', hidden: !this.error, class: "error-description" }, h("slot", { key: '154a889711ce35c28bab77c64418c0bdcc912fc0', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'a02fbea3aa9b46d22978cececd750548c16c79cf', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '0ec36fbb4e2e810455e35537277496b600b8bd72', htmlFor: this.inputId }, h("slot", { key: '5ab4bca171c9d68fbb592c378b0db30139e23642', name: "label" }, this.label))), h("nv-popover", { key: '962705b7347af233d00ad7c33ea8777403e32534', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: '16e06fbf7003cfdf29e019cd4dfcd33c3b4a12e4', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '64c31ef85a92430ac348e9ff06405f682ceb7a98', name: "before-input" }), h("div", { key: '291130925798643a0c034719fc46a5ee391ec487', class: "input-container" }, h("slot", { key: '823f17b06aeb798216a46631655513bef79f7508', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '4e87bc2c19494f43cb4ac7dfb3b370eac6edab0b', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'a5c97446025ee0b571f3fe2223dfd759ed69f9ca', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '475f240e74459e16e5a9dd3bea0df21f32949e18', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '696be862dee53acc18c311fe2ea26f4ec099c62e', name: "after-input" })), h("div", { key: '75e7e8ad1c1bc7be602d633946b3845007a3b1c5', class: "time-dropdown", slot: "content" }, h("div", { key: '89898000bb7005ef687372d1016b5b93f02a43bc', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'a0bddd8851b21c57637fbe8f9d8a83d62ff43bdf', class: "description" }, h("slot", { key: '133c39ce0065b8f95a932d12c5150af595eab460', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'de3a537dd418c1c218eceb8062fd925c0ea06bba', hidden: !this.error, class: "error-description" }, h("slot", { key: '97e2865ce647f2e4e32697acf5154fc94be9eab7', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }

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

@@ -48,7 +48,7 @@ export class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '9cdc768f9a44f61de25e708c9d563faa7804782f', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '24c1ecfb3cbe406e60127d6d822523d35a6aa2c1', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: 'e85e828f692e966c4679aa653b5dd4593edf58c3', href: `#nvicon_${this.name}` }))));
+        return (h(Host, { key: 'd96ca7fdb241a00f00ccdbce5f0437efade91e5e', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '9de91a2e3ed62fc6128249a3ebf791bf42053475', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '4e9891a48aa09ec65096298ced483092d0a54d23', href: `#nvicon_${this.name}` }))));
     }
     static get is() { return "nv-icon"; }
     static get originalStyleUrls() {

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

@@ -115,7 +115,7 @@ export class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '06b48253c77b09ae1259f72ad7698c9f9ddcd750', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '5b4117978546581bfb217a0595dec6c736369955', size: this.size }), !this.loading && h("nv-icon", { key: 'f2f0da0fae0d0fde955cc2f766cb98a3058ffb7e', name: this.name, size: this.size }), h("slot", { key: '8d59cdf4be11216ff4a0a607bea4970128faa214' })));
+        return (h(Host, { key: 'e63c932f14d3b673d43ed48f61bb37a48605338d', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '22ea154dce89eae701d873674a8bc6b2cecbcab9', size: this.size }), !this.loading && h("nv-icon", { key: 'f05c05c455e62d27aed57de09efd32230f68c450', name: this.name, size: this.size }), h("slot", { key: 'a1a163e56c8c027d0df2a019f77c187c6abbd91a' })));
     }
     static get is() { return "nv-iconbutton"; }
     static get formAssociated() { return true; }

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

@@ -16,7 +16,7 @@ export class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (h(Host, { key: '0e617a9043f912160b40255feba5c5a9140f1703', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: '5449f31fff78e9aabb1a6af11b99247cdf9fd4f3', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get is() { return "nv-loader"; }
     static get originalStyleUrls() {

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

@@ -192,7 +192,7 @@ export class NvMenu {
         this.triggerElement = this.el.querySelector('[slot="trigger"]');
     }
     render() {
-        return (h(Host, { key: 'de2604e6681418f23352dc436ac6dfb64d3d3a8d' }, h("slot", { key: '26afcd55842377b82a3f6d1f63d2f87eff4f6001', name: "trigger" }), h("nv-popover", { key: '03466649d538b909070feb3c50e18a35ee7dda19', 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 ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: '470d14ed698cc0064a24bf02e5fac3b32d64601a' }, h("slot", { key: '2dd81fbe5a23b5225fc464fe528ff08983959b7f', name: "trigger" }), h("nv-popover", { key: '68634d33954033dbd997c8a7f7ed711c6a17470b', 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 ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
     }
     static get is() { return "nv-menu"; }
     static get originalStyleUrls() {

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

@@ -43,7 +43,7 @@ export class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '3c05131caa0ee794ee2bbbd9c3a9d589d1fde266', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '5d9e236545a19a4291885d26bbc13fed02d3e4bd', name: this.icon }), h("slot", { key: 'b020591899e341c5775f662dcdcd1a9894ab85a1' }), this.label && h("span", { key: '4984519ed9fefbb1647739ae0eeb4087ff320a01', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'bd3e3e3544e7efafa4eaedc212e88e55ad7ea4d0' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '7b928e7c9ea2892061915ace6c08d3cccbf1655e', name: "chevron-right" })));
+        return (h(Host, { key: 'aac708fbf246c1083c3c4666e97b421485dd44a6', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '3b37a8661321152859dbc4247b299e60e909fe34', name: this.icon }), h("slot", { key: 'e690d7574f8960c44bee2e3f20b1150b578a49da' }), this.label && h("span", { key: '32d487f8ec9c1d6a910734c825382899982a23a5', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'cefcda06f7cb217348e5027ee6a38f8731421d6e' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '1085e47ae40ac38f87fca10dfbecbf32db95bace', name: "chevron-right" })));
     }
     static get is() { return "nv-menuitem"; }
     static get originalStyleUrls() {

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

@@ -158,7 +158,7 @@ export class NvNotification {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f8d336b349e7a71862bfa058022deee6fcf0a956', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: 'e75e6bd61a041bac249d77459ebcb3ac98dc54b7', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: 'b87bf092486682914d8c22612cb93c1f12027753', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: '95436607fe33bb5fc899af9dd430413b99c4615f', name: "x", size: "sm" }))), h("nv-icon", { key: '9962cdd859425b7c542fee370b637288aeb9a63f', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: '8056d8d40228eea6de9dd8cc243f1a99b5fb23c1', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: '4d13e9d221f3ca0f7dbba81afdb77a6e57c55983', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '6ab11ef7c73caa7864c44c58870c3ee7519e48a4', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '8002e001201393026b28a55c17d51568e4d60aa3', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'ae7bac61287736609a9101c185d7ef3a6f0aee5d', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '7116aaf907928256e971c737730d1908bdb72b6a', "data-scope": "actions" }, h("slot", { key: 'ffe5530dccfbdea2b26646b376c22c008c67f77c', name: "actions" })))))));
+        return (h(Host, { key: '3c5025f664fcfc1e68856c003cd31ff10b8efdd9', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: 'a26032a0b0ac9818b5da1f6e815a8c96f096ed46', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: 'f660bc8b5e5d8df073b69fb60d1ed0b11ec75c6f', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'dbeea84ab7f1c965eae3a8ae74b7afca98453705', name: "x", size: "sm" }))), h("nv-icon", { key: '0cbcee4f8667579b38ea205bdd747aabf6bdca8c', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: 'aed13fae98256180ff8d453c9f9d108eab429952', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'a2964d1c4dc744765ed916fe74d6cc167164eaf4', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '2eee0bd4a73fd92ea283ae6cd50af2d1edc01f0c', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '2f7e9b5429b9fa27bc4088b5d26955b8360695c1', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'f1b3dbe8722c8750231b4fb18fdc120ecfd04c54', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '56a881b3a53bb68a214f8db560805c726930b8d4', "data-scope": "actions" }, h("slot", { key: 'ece50671721f12e58dfd03df09545cb456d00a9c', name: "actions" })))))));
     }
     static get is() { return "nv-notification"; }
     static get originalStyleUrls() {

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

@@ -29,7 +29,7 @@ export class NvNotificationContainer {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'a3fd9f89cf68fbd203b2bc669a85c3e33a9b9cb7', class: `position-${this.position}` }, h("slot", { key: '972e9722ec2ac5d909066d46ab9a9d3de4626ee6' })));
+        return (h(Host, { key: '97882d6391db2e1c9db884a84469db78136765e4', class: `position-${this.position}` }, h("slot", { key: '0a0c52f26006ebd186862634b7b5470c7410c976' })));
     }
     static get is() { return "nv-notificationcontainer"; }
     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;