@nova-design-system/nova-webcomponents 3.28.0 → 3.30.0

package/dist/collection/components/nv-fieldtext/nv-fieldtext.docs.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldtextDocs = {
     component: 'nv-fieldtext',
-    parentGroup: 'Fields/nv-fieldtext',
+    parentGroup: 'Fields',
     subcomponents: ['nv-badge', 'nv-button', 'nv-icon'],
     stories: [
         // Default
@@ -218,7 +218,8 @@ const NvFieldtextDocs = {
             description: 'Deprecated: Use errorDescription and set the error prop instead. Add the message to the validation state.',
             args: {
                 label: 'Validation (Deprecated)',
-                validation: 'This is a validation message',
+                error: true,
+                errorDescription: 'This is a validation message',
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },

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

@@ -148,11 +148,11 @@ export class NvFieldtext {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '06b6e9b9451710d472b0bcccf2c359fe39a8aa9c' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'c09e307496887adea2c2e85abb47a2acecf6513e', htmlFor: this.inputId }, h("slot", { key: '992d9092cff24a1f66a727077822d83ba3d66c46', name: "label" }, this.label))), h("div", { key: '3cec57446afc770386e32fc668ad052ed30d4b66', class: "input-wrapper" }, h("slot", { key: '7c1c2e7b6d95a9fff42de4de987226489bd2c42a', name: "before-input" }), h("div", { key: '046de359ca38ac02eaa0f57d68b9cabc8670b0a2', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '2fe103101958bf04f03a33a7a273c1d5166d8d3f', name: "leading-input" }), h("input", { key: '3c9b977101115541230cdbc03f9206ba6dc61e64', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: '63089724e21e6c1e216a11a2638f30fee689c82e' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'c6cd68f868bd971708c5e95a5fef80de9dc6512d', htmlFor: this.inputId }, h("slot", { key: '5cf94a89c4229b78a79778ff7aade534ff72e507', name: "label" }, this.label))), h("div", { key: '28c17fd690a3a2bb0e55585d946677d8a3681a0e', class: "input-wrapper" }, h("slot", { key: 'd870c9740c1d9ba4386d963892de1e66778e1bfa', name: "before-input" }), h("div", { key: '09b3bff856699402e949ba15015c21229fafb029', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '86fdcb7cad564aa79deb5007fc443b2ed5c2bcdf', name: "leading-input" }), h("input", { key: '6b11e70de402487f3bd16c3b4229313d242c905e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: '13580eba3b8c7820532bd2d6542450605d289ea4', name: "trailing-input" }), this.error && (h("nv-icon", { key: '9d054f584c4ab3b15af94dde18378d3e1d657118', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'd733d068fb6515fc6df5d140cf539fad9e2d1f0c', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '357d5e8b2f74a289660acca34c65884de3fb82ad', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ee9f1eedf393f177cc67b797dca60e4c7805708b', class: "description" }, h("slot", { key: '3a8f2551be74f0886fb0ed65242c60e47fb8070e', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '96f465b7a489f1b9f34b71c3f23b4d78c2f0a77d', hidden: !this.error, class: "error-description" }, h("slot", { key: 'dcdbbcd9f41cd1d947a789c71c33cd9b8b7ed4e4', name: "error-description" }, this.errorDescription)))));
+            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: 'a0dc3bc46517a3457c0d3d8681a4078d23b2c2ea', name: "trailing-input" }), this.error && (h("nv-icon", { key: '240fc71f78572d94a5e4c5645f2531c58dd9762f', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '027784ee5c9d4bc37bfab78b991afd6c462bce37', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '4fc38f97f3b24b008589e5ba77a6d99c1dfb903d', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '9a784d007b8b94cf426d1b9e6090e37890859dce', class: "description" }, h("slot", { key: '1269822c641095aab99334f969d57a2850568a50', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'e5b3bb57e05350d65af0a333936cd8a0e91c42c2', hidden: !this.error, class: "error-description" }, h("slot", { key: '70a6d5cbe96d13deb808b3bbed64bb4e935636fa', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }

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

@@ -205,4 +205,7 @@ nv-fieldtextarea .error-description {
   font-style: normal;
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
+}
+nv-fieldtextarea .error-description[hidden] {
+  display: none;
 }

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

@@ -3,7 +3,7 @@ import { nameof } from "../../utils/class.utils";
 import { faker } from "@faker-js/faker";
 const NvFieldtextareaDocs = {
     component: 'nv-fieldtextarea',
-    parentGroup: 'Fields/nv-fieldtextarea',
+    parentGroup: 'Fields',
     subcomponents: ['nv-badge', 'nv-button'],
     stories: [
         // Default

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

@@ -215,11 +215,11 @@ export class NvFieldtextarea {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: 'e5dd85ced6fd9c2349937818b1bd3020918ec5a6' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '6f74a85203873163ff01ff1f9711c432a6e3cb7d', htmlFor: this.inputId }, h("slot", { key: 'b921ef64985f5a72aa4b6cb3828af99fd07e3982', name: "label" }, this.label))), h("div", { key: '422b0b20edb0f60bd3fc4050c885eabb71f0d4dc', class: "textarea-wrapper" }, h("div", { key: '8c22c47b74a97467ed399da53337b1c2904af395', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '63dbbf09f0abbed5ec62d024b45a783adc3e4069', 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: '8d31a9e4c294a58a02040dddb427c94caecf4d2e' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '4352374d8078448ce5f877d20b526a6725219f76', htmlFor: this.inputId }, h("slot", { key: '1f5dca95213c848f105fe8d4aec5e7a363cfd468', name: "label" }, this.label))), h("div", { key: '831c87ed454b2b7a6dfc84daf903c6bc3e7581f4', class: "textarea-wrapper" }, h("div", { key: '1a3dd73ca1a4f650f02309211154e3fcee02824c', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '97454b0c1845a4ed8f1e2f99285f363affff7c7c', 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: '75b575de27e1ad876c2036f379e7254e20259c23', class: "description" }, h("slot", { key: 'b54458f20c187207d5c69e4f74c3708970c1b6ff', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b34156ab4b08871d3474316b0dd75393de070ef7', hidden: !this.error, class: "error-description" }, h("slot", { key: '630487e5097436909753f6ddad8d8b0edca94199', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'd70c40f382d8d8a369e1ce584e4c050e6f6704b4', class: "description" }, h("slot", { key: '2287c2a52e18557f104ff6b2ceab876c41f7d666', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '3bc7bdb991381398ff622c10929848d4f6527533', hidden: !this.error, class: "error-description" }, h("slot", { key: '061f5fba67f18750f50090a78f53a5229e384343', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldtimeDocs = {
     component: 'nv-fieldtime',
-    parentGroup: 'Fields/nv-fieldtime',
+    parentGroup: 'Fields',
     subcomponents: ['nv-icon'],
     stories: [
         // Default

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

@@ -162,19 +162,20 @@ export class NvFieldtime {
     /****************************************************************************/
     //#region WATCHERS
     handleValueChange(newValue) {
-        // Parse the new value and ensure it's in the correct format
+        // Parse the new value and update internal state (hours, minutes, seconds)
+        // so the input fields reflect the new value
         if (newValue) {
             const components = parseValueByFormat(newValue, this.format);
             const formattedValue = reconstructTimeByFormat(components, this.format);
-            // Only emit if the formatted value is different from what we received
-            // This prevents infinite loops while ensuring format consistency
+            // Update internal state from parsed components
+            this.hours = components.hours;
+            this.minutes = components.minutes;
+            this.seconds = components.seconds;
+            // Ensure format consistency by correcting the value if needed
             if (formattedValue !== newValue) {
                 this.value = formattedValue;
-                return; // The watcher will be called again with the formatted value
             }
         }
-        // Emit the value in the correct format
-        this.valueChanged.emit(newValue);
     }
     handleOpenChange(newOpen) {
         // React to external changes, e.g., highlight current time on open
@@ -232,8 +233,9 @@ export class NvFieldtime {
         }
         // Reconstruct time from inputs in the correct format
         const reconstructedValue = this.reconstructTime();
-        // Update the value, which will trigger the watcher and emit the event
+        // Update the value and emit the event
         this.value = reconstructedValue;
+        this.valueChanged.emit(this.value);
     }
     handleHoursChange(inputValue, type) {
         const isHHFormat = this.format.startsWith('HH');
@@ -511,6 +513,7 @@ export class NvFieldtime {
         // Reconstruct time in the correct format and update value
         const reconstructedTime = this.reconstructTime();
         this.value = reconstructedTime;
+        this.valueChanged.emit(this.value);
     }
     handleInputBlur() {
         // Use a delay to check if the focus is still within the popover
@@ -871,9 +874,9 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: 'c250283de9b4de235cee8fa84f1561762c0bb6f9', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd18029863a3ae8305cc5e43399b82f083f83d921', htmlFor: this.inputId }, h("slot", { key: '05655a64f240181f997f40a1e9067db035bff9bd', name: "label" }, this.label))), h("nv-popover", { key: '9780461676a907cf7eab03716f8a20a22e940a41', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: 'c5d0c48848022e9e9fc65aa814e8e72521c1f6ed', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '9786f306ae1a325b584a3bbbe9cf090e527da256', name: "before-input" }), h("div", { key: '666e715dc8568ed25e1081f58570f5d2bf50c0c3', class: "input-container" }, h("slot", { key: '66545084f7872990be3adba701c54c2a86ccc64b', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '2dfc9e20ae4d245cc125643226169e83b73d87e7', 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: '4b6ee88ae65445de2a8f2228956fe47f9fb27764', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'd7b150d404c59efb3a9ba5964fe5d3d2201bac40', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '2ccaec2934e7d611675daf670832196f03217f3f', name: "after-input" })), h("div", { key: '6888123870b59cf64a5ee4c31bd05829154c542f', class: "time-dropdown", slot: "content" }, h("div", { key: '99547788b1aaf9b6e1c37176358da04d89060cd1', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '23671a99897ae51a90eb4ffefe089a0f220163bc', class: "description" }, h("slot", { key: 'b3a3857e78459f31c5a3295319640c6b2d37322b', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '88bbae1c431c1ec5c81ed66b5399299b64a609cf', hidden: !this.error, class: "error-description" }, h("slot", { key: '9f2a0530c81d5ec81a6a5224378f2e4346d776a1', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'a032b1f8f529f78197c0c392a36a2a7a0e64da9a', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '2ad43d201ababc34f5f2e83f56e993b4f4308391', htmlFor: this.inputId }, h("slot", { key: '94c4ae7c844a21ca5f2eaa2944ae6fde8a743db1', name: "label" }, this.label))), h("nv-popover", { key: '2ffeb7b5cdd4bee7c16d749a8f9056aa0b3e0def', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: '493e8641008451f36d289e54061cfbf7041219a8', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'cc4dda576165ac75fa7c3e64c2688e74631adbe1', name: "before-input" }), h("div", { key: '589853e389e86ada62ee220bd7d383d53841a857', class: "input-container" }, h("slot", { key: 'a705e0d398d6a169ff98b04944baf0df13d02a3f', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: 'a33b9ba6453d7649970040e690ee50bdfaa83ee3', 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: '89890ac88e95199aedc13ea536843ba1c0e1cb18', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '2f020e2a5efb5ec37eecbe2629236fbbf4ca6ce8', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '2357690da2edc71f674f384b2d497155ef47984e', name: "after-input" })), h("div", { key: 'd13be0ad80be00d85b87eb7981e875d75a0e4862', class: "time-dropdown", slot: "content" }, h("div", { key: '1443d77eea765261a16bd3f838ed9f7126bf68a5', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '4feca47ba72f1594a6a6c8246810620eda9d207b', class: "description" }, h("slot", { key: '43845e3b0f15f787ea69eb1a588e3bc6392449c1', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '539a080864dd94f4b7b1b1c2c16e813ca3d5e42d', hidden: !this.error, class: "error-description" }, h("slot", { key: '9c70b3af02a3e3a26b022d65cced0217d14c8812', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldtime/styles/nv-fieldtime.css

@@ -264,6 +264,9 @@ nv-fieldtime .error-description {
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
 }
+nv-fieldtime .error-description[hidden] {
+  display: none;
+}
 nv-fieldtime hr {
   border: none;
   border-top: 1px solid var(--dropdown-divider-color, #ccc);

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

@@ -48,7 +48,7 @@ export class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f59fdd9822d6163aed70296063359aba69872688', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '00f09b698e306414aa8a350f864439d74357361e', 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: 'a2deca1e231385373de8cc4265af7853a87978f7', href: `#nvicon_${this.name}` }))));
+        return (h(Host, { key: '296afbaf68b6883a35fa67651ffef9052a604c51', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '8d6977768135682a5c3777bacc55d5e0553211c1', 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: '91f29aae64f5f32ecc95382f0cdb8338112ee332', href: `#nvicon_${this.name}` }))));
     }
     static get is() { return "nv-icon"; }
     static get originalStyleUrls() {
@@ -206,8 +206,8 @@ export class NvIcon {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`${IconName}` | string",
-                    "resolved": "string",
+                    "original": "`${IconName}`",
+                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layers-intersect\" | \"layers-off\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
                     "references": {
                         "IconName": {
                             "location": "import",
@@ -220,7 +220,10 @@ export class NvIcon {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
                     "text": "Choose the icon you want to display. This also sets the aria-label for\nimproved accessibility, helping users who rely on screen readers."
                 },
                 "getter": false,

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

@@ -115,7 +115,7 @@ export class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b746b8c5f6e25d2fd0c3759f9bcb5451d18ac29c', 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: '5bb5ab5b49b0e1b19695e00846e462dc6a5b6093', size: this.size }), !this.loading && h("nv-icon", { key: '825f0532eea39531c63c669bac307a2c45478cbb', name: this.name, size: this.size }), h("slot", { key: '394a9f1b5fd16037fcd5bebb3075f363bfe4fa62' })));
+        return (h(Host, { key: '9b96d47b036561ab1458f193bf7a3b749e6189da', 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: 'cd55b87aae05c11cf9759421a2aa3c15fef8a19f', size: this.size }), !this.loading && h("nv-icon", { key: '1fb7bd007f0bde6693bc2241b4e3baa57e0a7fc0', name: this.name, size: this.size }), h("slot", { key: 'd2cc6d92bb9714d1b204e75c664b965d696a2fae' })));
     }
     static get is() { return "nv-iconbutton"; }
     static get formAssociated() { return true; }
@@ -249,8 +249,8 @@ export class NvIconbutton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "`${IconName}` | string",
-                    "resolved": "string",
+                    "original": "`${IconName}`",
+                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layers-intersect\" | \"layers-off\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
                     "references": {
                         "IconName": {
                             "location": "import",
@@ -263,7 +263,10 @@ export class NvIconbutton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
                     "text": "Choose the icon you want to display. This also sets the aria-label for\nimproved accessibility, helping users who rely on screen readers.\nThe icon is not displayed when the button is loading."
                 },
                 "getter": false,

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: 'a80c59f9585654352e1b48e1a245e94172e1e533', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: '8cac2279ffe58fe0243f638c9d55d2f0e5a8443a', 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: 'b8154f4e215984b0dbb106b44dcad72eacb140e1' }, h("slot", { key: 'cddcea9afd3324d39168f3879cdbb0839f3e432a', name: "trigger" }), 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 ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: 'efaa7d9242c23b27395dc1584ea05300ce3142d8' }, h("slot", { key: '42be7569ce9b393f2f22daabbe4f7594e3e48a7a', name: "trigger" }), h("nv-popover", { key: '55a12dabf7230a3fbb5e1811b4d211a4c9c7514a', 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: 'b377cf654cd4d0cc7e257c10606977db86087e31', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '409b0902ea54323d4dd778816a244f4ea64d986d', name: this.icon }), h("slot", { key: 'd5c5c4a9ab1e3c70ba6fe052e11cfff212bf93aa' }), this.label && h("span", { key: '0b1e3892dfb16bd1f1d19f72b29f4d4dd396ccdf', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'a099a45ed14e3922c3fe25d3b0e1f0d257101e4b' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '6c61d48ac2f3927ad7b33673bc9ed196f733e30a', name: "chevron-right" })));
+        return (h(Host, { key: '052f7822782c1a50cfc207dc6c7090e9ae7ddb23', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: 'b6fb4a24573d6ce2a65d1fbec49f25084aca4efc', name: this.icon }), h("slot", { key: 'dd4b413f909db1b13a642411532b4980fe495bcf' }), this.label && h("span", { key: '06e14c729b5d1a8c7fb58797fcf345eb15d02be4', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: '53802fa02a1c643b8f04ec71365115c469016e65' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: 'ef8e14ab9147ef7cba4e160a053e4900aac9a927', name: "chevron-right" })));
     }
     static get is() { return "nv-menuitem"; }
     static get originalStyleUrls() {
@@ -95,7 +95,10 @@ export class NvMenuitem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
                     "text": "Choose the icon you want to display. This also sets the aria-label for\nimproved accessibility, helping users who rely on screen readers.\nThe icon is not displayed when the button is loading."
                 },
                 "getter": false,

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

@@ -158,7 +158,7 @@ export class NvNotification {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6d78033613b4f5d8c90fd3f0228e90f28272a7ca', 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: '0a2e82809525643861c44462bbf85bb670b56bb9', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '46ce066fba0d63bce346697b512051e9fdbf939c', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: '25ce721523d04886ff700923310b0fea3e6eeea5', name: "x", size: "sm" }))), h("nv-icon", { key: '060dfd8b52e92af64a6f5d80f18b520e3fa2db4e', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: '0b60d8005cd53a7bb4f8cbb7d1e2c67337f5b73d', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: '549d7ee40542d3579e13c6e31dc313ba3a261f81', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: 'c5c067b17e2b7456b6ddf7a7747e51c9924cd50f', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '3de5ab6bf9a77bb0843cd04b945f40b3b16417db', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: '5bcc2b2842907f35d3e8b9f1be3c2045c5ad8a0f', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: 'e06454ce135e9869b9c7a9faea3e6f082ddc0e8a', "data-scope": "actions" }, h("slot", { key: 'eed113cd7f2d9ae51493f2cd8b9a175db6e7f4aa', name: "actions" })))))));
+        return (h(Host, { key: '32af1308aa22ce8228416fcce23ce5b75111895b', 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: 'e63deeef95ae6c0e3fe1d8ce178c5dbe9d82f88c', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '1b66875001f685293d83bbe90a85b297b335c024', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'b1be8798751f60f41925ea92e40df697eb15fa42', name: "x", size: "sm" }))), h("nv-icon", { key: 'a922d93bddb729fa7674199d438833544d48da2e', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: 'a55e449e8e17560a70d3d40ff3b9e7e2855fbbac', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'd4c7b85c8b9c5c488b86ba4c8f0c456b8ea3ca2d', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: 'e1ef0d24ae77ee788c63d66bed7fee308f3f9d13', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: 'cd7d469058230fec03311e485da0360766633dd0', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'cd5000e571c1a7b19bbb0f59e58e938ee4e51361', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: 'b0a19b512cc2fbce22907ac28828429202378e75', "data-scope": "actions" }, h("slot", { key: 'd40e04eb94154b319c8e212c76f1d932942137d0', name: "actions" })))))));
     }
     static get is() { return "nv-notification"; }
     static get originalStyleUrls() {
@@ -289,14 +289,24 @@ export class NvNotification {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "`${IconName}`",
+                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layers-intersect\" | \"layers-off\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../nv-icon/nv-icons",
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
                     "text": "Icon associated with the notification, defaults vary based on the feedback\ntype."
                 },
                 "getter": false,

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

@@ -15,7 +15,7 @@ export class NvNotificationContainer {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd2c471aaac0f76edade303331718d2b0f7c6bb39', class: `position-${this.position}` }, h("slot", { key: '48bbc563523bfb107bbbd2cc60561ccb87f9968c' })));
+        return (h(Host, { key: '3618bd72eb82ee09c8c971d83ea3e0dbb58f6fbf', class: `position-${this.position}` }, h("slot", { key: 'ed0d1b37dd23e984365a92d45c6ecae31a5bbac9' })));
     }
     static get is() { return "nv-notificationcontainer"; }
     static get originalStyleUrls() {

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

@@ -104,7 +104,7 @@ export class NvPaginationNav {
     render() {
         const isFirstPage = this.currentPage === 1;
         const isLastPage = this.currentPage === this.totalPages;
-        return (h(Host, { key: 'b2255fce4e03cee8ff370086aac31df5c69d275d' }, h("nav", { key: 'a136b7193f9b00a68e6ee626802dee19fd762531', "data-scope": "pagination-nav", "aria-label": "Pagination navigation" }, this.isOnlyIcon ? (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 })) : (h("nv-button", { size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-button" }, h("nv-icon", { slot: "leading-icon", name: "chevron-left" }), this.previousButtonLabel)), h("ol", { key: '5bebe0e3f5c8f1799ed8980752fbed7aadbcac01', "data-scope": "page-list" }, calculatePaginationRange({
+        return (h(Host, { key: '2aecff38a5777b1e229b04110e774d4ac708e940' }, h("nav", { key: 'a470aab7d30178269f25eb794b447b6478ed274d', "data-scope": "pagination-nav", "aria-label": "Pagination navigation" }, this.isOnlyIcon ? (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 })) : (h("nv-button", { size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-button" }, h("nv-icon", { slot: "leading-icon", name: "chevron-left" }), this.previousButtonLabel)), h("ol", { key: '4ea58c4f536310c0d60354da84d9fd650a16dc67', "data-scope": "page-list" }, calculatePaginationRange({
             currentPage: this.currentPage,
             totalCount: this.totalCount,
             pageSize: this.pageSize,

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

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-import { interpolate, isFirstPage, isLastPage, generatePageSizeOptions, } from "./nv-paginationtable.utils";
+import { interpolate, isFirstPage, isLastPage, getDisplayPageNumber, generatePageSizeOptions, } from "./nv-paginationtable.utils";
 /**
  * @slot default - Child content of the component.
  */
@@ -140,10 +140,13 @@ export class NvPaginationtable {
         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 (h(Host, { key: '0556d5f0dc69faa503b504ec87c47819f92d565d' }, !this.hideControls && (h("div", { key: 'b097a2bda8c09b88db038c1039133a7ec2571247', "data-scope": "controls" }, !this.hideFirstLast && (h("nv-iconbutton", { key: '29841590c99ee7534d1d41933c4eb155a9b9a9db', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: '9d075e5ea8ee0f1b77de4da5072862d076579778', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: '712ebb3f14e02945b20d57b85a891550a1e09e95', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (h("nv-iconbutton", { key: '1982d2de200284b3bc70dd51bea9c452b2791038', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), h("span", { key: '8c2f7473c47f4fcb9a8373c8b7030a7f56e8b682', "data-scope": "page-label" }, pageLabel), h("span", { key: '527cd649cf4e8ba1d62451d6910401076d555b86', "data-scope": "total" }, totalLabel), h("div", { key: '2bf99bd31d9d46059fc6ab52f6e20878ce2dea64', "data-scope": "per-page" }, h("nv-fieldselect", { key: '4f55796d8cccdf9f50792eb3ff3d448cdae8de07', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), h("slot", { key: '9b1dc7edf5dd4ed4be02705a11a3c04f5bcc81bd' })));
+        return (h(Host, { key: '5f0e4d93600b77cf9b54b99a1ccffb1048c389fe', role: "navigation", "aria-label": "Pagination" }, !this.hideControls && (h("div", { key: '5226510a0d4cabba98d7aafaa7e3cd7d413b2d8a', "data-scope": "controls" }, !this.hideFirstLast && (h("nv-iconbutton", { key: 'bdcb8d93cdf24821ab5cdedc0413a77f163e19a1', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: '822cfe5bd177ebbdce436f0f850fad9a86aae1c5', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: 'fd0aa10dee6b72d816b6801c03e5be7fb9a3698d', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (h("nv-iconbutton", { key: 'a5b8fa71a51d0157dc37b908f972c0d830b44b00', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), h("span", { key: '0b09d7507a9d1f3dbabbb37265d6949243290b1b', "data-scope": "page-label" }, pageLabel), h("span", { key: '275c4a1ca625a0afc68bfff46fc3e2872e0f76c3', "data-scope": "total" }, totalLabel), h("div", { key: '8a329ccc7baaac9f580aed7d2a53ed7f940c123a', "data-scope": "per-page" }, h("nv-fieldselect", { key: '83c644de7d30e63e0a96ccccaefb311acdd7617c', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), h("slot", { key: '190b8c8587c25ca449339a6ea1bbd85bed06d35f' })));
     }
     static get is() { return "nv-paginationtable"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-paginationtable/nv-paginationtable.utils.js

@@ -33,6 +33,19 @@ export function interpolate(template, values, fallback) {
 export 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)
+ */
+export 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)

package/dist/collection/components/nv-paginationtable/test/nv-paginationtable.utils.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { interpolate, isFirstPage, isLastPage, DEFAULT_PAGE_SIZES, generatePageSizeOptions, } from "../nv-paginationtable.utils";
+import { interpolate, isFirstPage, isLastPage, getDisplayPageNumber, DEFAULT_PAGE_SIZES, generatePageSizeOptions, } from "../nv-paginationtable.utils";
 /**
  * Comprehensive tests for nv-paginationtable utilities
  *
@@ -168,6 +168,26 @@ describe('nv-paginationtable.utils - Comprehensive Tests', () => {
             expect(isLastPage(0, 1)).toBe(true);
         });
     });
+    describe('getDisplayPageNumber', () => {
+        it('should return 0 when there are no pages (empty or filtered-to-zero dataset)', () => {
+            expect(getDisplayPageNumber(0, 0)).toBe(0);
+        });
+        it('should return 0 when page count is negative (defensive)', () => {
+            expect(getDisplayPageNumber(0, -1)).toBe(0);
+        });
+        it('should return 1-based page number when there are pages', () => {
+            expect(getDisplayPageNumber(0, 5)).toBe(1);
+            expect(getDisplayPageNumber(2, 5)).toBe(3);
+            expect(getDisplayPageNumber(4, 5)).toBe(5);
+        });
+        it('should produce a "Page 0 of 0" label when interpolated with empty state', () => {
+            const pageLabel = interpolate('Page {pageIndex} of {pageCount}', {
+                pageIndex: getDisplayPageNumber(0, 0),
+                pageCount: 0,
+            });
+            expect(pageLabel).toBe('Page 0 of 0');
+        });
+    });
     describe('DEFAULT_PAGE_SIZES', () => {
         it('should have correct number of sizes', () => {
             expect(DEFAULT_PAGE_SIZES).toHaveLength(4);
@@ -292,7 +312,12 @@ describe('nv-paginationtable.utils - Comprehensive Tests', () => {
             const pageIndex = 0;
             const pageCount = 0;
             const rowCount = 0;
+            const pageLabel = interpolate('Page {pageIndex} of {pageCount}', {
+                pageIndex: getDisplayPageNumber(pageIndex, pageCount),
+                pageCount,
+            });
             const totalLabel = interpolate('Total: {rowCount} rows', { rowCount });
+            expect(pageLabel).toBe('Page 0 of 0');
             expect(totalLabel).toBe('Total: 0 rows');
             expect(isFirstPage(pageIndex)).toBe(true);
             expect(isLastPage(pageIndex, pageCount)).toBe(true);

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

@@ -311,7 +311,7 @@ export class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8f9429a26146be5feff838bff9861c8016bcae72' }, h("slot", { key: '507917d729f202d0ec29e2011b0aae958a4474b5', name: "trigger" }), h("div", { key: 'cc85ae4610b0554b2cddd2fb62a8e8df5b8de21f', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'e53a79dc2a4d439271d55391ad087c0db8abaf19', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'ef72627c588727dff2f558133d46e1689a89fc24', name: "content" }))));
+        return (h(Host, { key: '01b6cff8203a7e1ffe5b05aeea7f8e35238ac9bb' }, h("slot", { key: '63264f349fbc817a8b4efe7272715942fc307863', name: "trigger" }), h("div", { key: '0a251a4447bbe7481a71465ac2402aeb156ba537', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'c958f8cd4c8f19d4ac7e8779cb4555a5b9dbfc01', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '72d516982d54945924c88372a54d19ba568a4e4a', name: "content" }))));
     }
     static get is() { return "nv-popover"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-row/nv-row.docs.js

@@ -3,6 +3,7 @@ const NvRowDocs = {
     component: 'nv-row',
     parentGroup: 'Grid/Row',
     subcomponents: ['nv-col'],
+    badge: 'deprecated',
     stories: [
         // Default
         {

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

@@ -1,12 +1,13 @@
 import { Host, h } from "@stencil/core";
 /**
  * @slot default - The row content.
+ * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
  */
 export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'fa7853dd84c1d35ff72147a7b622f62fe89ee29b' }, h("slot", { key: '48edd35ada0b2df00b61a2522ac8ff33063b7831' })));
+        return (h(Host, { key: '6363fba1008818b66f1eeb4ade8949f56c7c23b0' }, h("slot", { key: '2a2399121ac20fb577a29c93ba764f196352a9b8' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {