@nova-design-system/nova-webcomponents 3.0.0-beta.44 → 3.0.0-beta.46

package/hydrate/index.js

@@ -5278,12 +5278,12 @@ class NvAvatar {
     }; }
 }
 
-const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
+const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
 var NvBadgeStyle0 = nvBadgeCss;
 
 /**
  * @slot leading-icon - Icon before the label.
- * @slot default - Default slot for the badge label.
+ * @slot default - for custom content, for pure text use label instead.
  */
 class NvBadge {
     constructor(hostRef) {
@@ -5321,7 +5321,6 @@ class NvBadge {
          * Controls the visibility of the badge. Will animate with fade and collapse.
          */
         this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
-        this._isHidden = this.hidden;
         /**
          * When true, the alert does not automatically close upon dismissing.
          * Useful for externally controlled component behavior.
@@ -5390,6 +5389,7 @@ class NvBadge {
             this.leadIcon = this.icon;
         }
         if (this.hidden) {
+            this._isHidden = true;
             const { setCollapsed } = useCollapse(this.ref);
             const { setFadeOut } = useFade(this.ref);
             setCollapsed();
@@ -5400,10 +5400,11 @@ class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '0fe871313f0a98b8dfb4b84e1fc4898ae73baa69', class: clsx(`badge-${this.color} with-gap`, {
+        return (hAsync(Host, { key: '8d97eed4a84f2f913e4f8cd64d08c806d9724f33', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
+                'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, hAsync("slot", { key: '728a5ed5ad4795619bf0bc1c89478c68bc47497a', name: "leading-icon" }, this.leadIcon && (hAsync("nv-icon", { key: '4b48fc280769ffe520c6a8f15eb2b283cb42243b', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && hAsync("span", { key: 'c1f3ab6775ffcf3079bf2c861fb34831aa5ffda7' }, this.label), hAsync("span", { key: '352cca4c6a6ffb300c25f7ed05d9fdca3fda161c' }, hAsync("slot", { key: 'a0a36898691b9a3cf42eb1d87ab3fb3084ae8489' })), this.dismissible && (hAsync("button", { key: 'e5702056e9a2080d15df91d2bc3a32898bdc0ce5', onClick: this.handleClose, class: "close", type: "button" }, hAsync("nv-icon", { key: '23a856aaa98c4489cd1dabe2eb4a88a5d9065e92', name: "x", size: "sm" })))));
+            }) }, hAsync("slot", { key: '34c2c387727e6b68d37fe2b2ac68c82799356e3d', name: "leading-icon" }, this.leadIcon && hAsync("nv-icon", { key: '0c23dd58e48fce39d7935549c6289f87f1fb66af', name: this.leadIcon, size: "sm" })), hAsync("slot", { key: '7485f570aa3cf519b030bedfa8ccf6a6d37d2c1b' }, this.label && hAsync("span", { key: 'eb7afa0eb52582c6d782d2383dfe2eeb41a9649b' }, this.label)), this.dismissible && (hAsync("button", { key: 'bc07eed3e1328a8009cb2c8add026a7f8a5335da', onClick: this.handleClose, class: "close", type: "button" }, hAsync("nv-icon", { key: 'ab0b2c6224f4b8b147e8158856acbf1ab987b392', name: "x", size: "sm" })))));
     }
     get ref() { return getElement(this); }
     static get watchers() { return {
@@ -5497,7 +5498,7 @@ class NvBaseComponent {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '1294fcaf46e19af023796e1f21cbb2b2506d8163', style: { display: 'block' } }, hAsync("slot", { key: '447dad96223063ef7914d21a98a370a47441d97f' })));
+        return (hAsync(Host, { key: 'ba3d284241a61fa30bd434f563b7e4962ea3f238', style: { display: 'block' } }, hAsync("slot", { key: '44a0f1bc5267cf7e7bd0c1d258e8d9b8020a59f3' })));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -5510,7 +5511,7 @@ class NvBaseComponent {
     }; }
 }
 
-const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
+const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
 var NvBreadcrumbStyle0 = nvBreadcrumbCss;
 
 /**
@@ -5542,7 +5543,7 @@ class NvBreadcrumb {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '54b25de1375f6a01c5bb5b302474d00c5b26bb33', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (hAsync("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (hAsync("slot", null)), this.tooltip && (hAsync("nv-tooltip", { key: '636034df91035bbd6d8e06a53d61a3997a3c5ff2', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (hAsync("nv-popover", { key: 'ab5b203d0f40b130d31c5a1830278e3cc2117c00', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, hAsync("ul", { key: 'acb0cd65282b1091823664a9769509cafbba15db', slot: "content" }, hAsync("slot", { key: 'c343113351979000b071404e8edb1632147415e6' })))), hAsync("span", { key: '9ccdb10f973c408b655c4bf94f312fb5d4ac18c7', "data-scope": "separator" }, "/")));
+        return (hAsync(Host, { key: '8ffa46d8714261924aaab55940c7dc6b36f2a9f9', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (hAsync("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (hAsync("slot", null)), this.tooltip && (hAsync("nv-tooltip", { key: 'a2beda9f4b9a5eb71962a1cc060f5467fd2b0134', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (hAsync("nv-popover", { key: 'd4a837d21c07697d6ef01506169474bd5cf5a304', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, hAsync("ul", { key: 'bf089278cfe03ed3ae4beeac57ad67dc029b91cf', slot: "content" }, hAsync("slot", { key: '23f21367fc803a5f176947720e55dba4201f64c4' })))), hAsync("span", { key: 'e1a9414f3be1fd6ef3450f3e7b99d7ff091ec2f0', "data-scope": "separator" }, "/")));
     }
     get el() { return getElement(this); }
     static get style() { return NvBreadcrumbStyle0; }
@@ -5572,7 +5573,7 @@ class NvBreadcrumbs {
     }
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '6dd93d8f605b851f8a1d5de50b04b32b694e73e8', role: "navigation", "aria-label": "breadcrumbs" }, hAsync("ol", { key: 'c116a1e51d947a81686770a5283c8efe44de63ef' }, hAsync("slot", { key: '3afae5018687f3906f207aef913c7b329bcfce2f' }))));
+        return (hAsync(Host, { key: '5ab0f09cb86a92464ffcd06d8129543539bdcddf', role: "navigation", "aria-label": "breadcrumbs" }, hAsync("ol", { key: 'a7624a2400d9a91ec477694bbd3600960e198981' }, hAsync("slot", { key: '7c4102ceebe110377bf212e0695bdec6b455ea74' }))));
     }
     static get style() { return NvBreadcrumbsStyle0; }
     static get cmpMeta() { return {
@@ -5657,14 +5658,16 @@ class NvButton {
          * @param {Event} event - The click event.
          */
         this.handleButtonClick = (event) => {
+            var _a;
             if (this.loading || this.disabled) {
                 event.preventDefault();
                 return;
             }
-            if (this.form && this.type !== ButtonType.Button) {
+            if (this.type !== ButtonType.Button &&
+                (this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
                 this.processFormAction();
             }
-            else if (this.form) {
+            else if (this.form && this.type === ButtonType.Button) {
                 console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
             }
         };
@@ -5734,7 +5737,7 @@ class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '2919f1f230ca7c49e4f722832b36cf139f5cebf1', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (hAsync("nv-loader", { key: 'e2105d891322b9dbe2c5d6138d59533a13115d96', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: 'ba5757e4ff651db4e5a5e074f0fd72590f94fcf6', name: "leading-icon" }), hAsync("slot", { key: 'b0e0c3869846618b0d8558d247e72271838f0a27' }), hAsync("slot", { key: '1cea166b81b36016e095d65691d9d364436f8d91', name: "trailing-icon" })));
+        return (hAsync(Host, { key: '751fa0a552eaf13a193a15f9c9d6fe0c257b93e8', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (hAsync("nv-loader", { key: 'ae8b39b13bfd6cd8a33f7a30afea19e426d0064d', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: 'e1a213305895c9b35d517bedce3a61f49e39642a', name: "leading-icon" }), hAsync("slot", { key: '2e9e5ed4381790f3c1c06f1a4bf5f60bda79bd1c' }), hAsync("slot", { key: 'e960ec4f4eca0a2a941ca7f3b96a4e31603fa633', name: "trailing-icon" })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -6789,7 +6792,7 @@ class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (hAsync(Host, { key: '9b09650b368bcc9e0ce3c9508630c2fdeb573674' }, hAsync("div", { key: '57d3ef9b5f450570176132293fb2a102bba51312', class: "datepicker-root" }, hAsync("div", { key: 'aa49f6897b3da87214945d77eb046dc7f8c68b82', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: '0939858f254cfc36db1d40e8fdb4e524699a8e91', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (hAsync("div", { key: '39df0c4b31203d6fd500a8b97c1c33c87b2e326a', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: 'a1433b59ecda88aad2d5589cebd310dff4ad30fb' })));
+        return (hAsync(Host, { key: '49bdf5cc44f9e8f13b0fd61936d3b015e6105d18' }, hAsync("div", { key: 'e1a0fcc20c7c12930df31c36751824a64fae053f', class: "datepicker-root" }, hAsync("div", { key: '48cd6f6d92c41c748fdd05a6d932cbb634e3dfd6', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: 'f5d5ca631e448067cbfb04f0bcc74695b5c6fb5e', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (hAsync("div", { key: 'cb1ebc42e3616b9c35d147c227a53924fd2c73c8', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: 'e9bec2dd219502e8855c6195ebe69bff8fff0da5' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6857,7 +6860,7 @@ class NvCol {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '2f4052741fbe2e2c67c4ce6e1fd83446e724e216', class: clsx(this.getColSize()) }, hAsync("slot", { key: 'a5803fe2cfcd9ced01e025907759f4859db60470' })));
+        return (hAsync(Host, { key: '8c6efe159aa3b9d853d07897e17045adabf5716c', class: clsx(this.getColSize()) }, hAsync("slot", { key: '5438e2dd941088fde68b17495a4d231cc56fba3c' })));
     }
     static get style() { return NvColStyle0; }
     static get cmpMeta() { return {
@@ -10219,6 +10222,7 @@ class NvDatagrid {
         this.parsedColumns = []; // Parsed array
         this.parsedData = []; // Parsed array
         this.globalFilter = '';
+        this.columnData = [];
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
@@ -10262,6 +10266,12 @@ class NvDatagrid {
          * @default false
          */
         this.enableGlobalFilter = false;
+        /**
+         * Whether to automatically generate columns if none are provided.
+         * If columns are explicitly set, this property is ignored.
+         * @default false
+         */
+        this.autoGenerateColumns = false;
         this.debouncedFilter = debounce$1((value) => {
             this.globalFilter = value;
         }, 300);
@@ -10288,6 +10298,7 @@ class NvDatagrid {
      */
     cacheTemplates() {
         const columns = Array.from(this.el.querySelectorAll('nv-datagridcolumn'));
+        this.columnData = [];
         columns.forEach((col) => {
             const key = col.accessor;
             const cellSlot = col.querySelector('[slot="cell"]');
@@ -10308,6 +10319,12 @@ class NvDatagrid {
                     this.headerTemplateCache.set(key, headerDiv);
                 }
             }
+            const colData = {
+                header: col.header,
+                accessor: col.accessor,
+                repeatTemplate: col.hasAttribute('repeat-template'),
+            };
+            this.columnData.push(colData);
         });
     }
     parseDataAndColumns() {
@@ -10334,7 +10351,9 @@ class NvDatagrid {
                 accessor: key,
                 header: key.charAt(0).toUpperCase() + key.slice(1),
             }));
-            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+            if (this.autoGenerateColumns) {
+                this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+            }
         }
     }
     deepEqual(a, b) {
@@ -10440,6 +10459,25 @@ class NvDatagrid {
                 tableOptions.columns = this.generateColumns(validColumns, tableOptions);
             }
         }
+        else {
+            // No columns and data is available
+            const hasData = this.parsedData &&
+                Array.isArray(this.parsedData) &&
+                this.parsedData.length > 0;
+            if (hasData) {
+                // No columns and data is available
+                const firstRow = this.parsedData[0];
+                const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
+                    accessor: key,
+                    header: key.charAt(0).toUpperCase() + key.slice(1),
+                }));
+                if (this.autoGenerateColumns) {
+                    this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+                }
+                tableOptions.data = this.getTableData();
+                tableOptions.columns = this.generateColumns(arrayColumnsConfig, tableOptions);
+            }
+        }
         // Initialize the table
         this.table = createTable(tableOptions);
     }
@@ -10568,7 +10606,25 @@ class NvDatagrid {
                 }
             }
             // Handle single-level key lookup
-            return key in cellValue ? String(cellValue[key]) : this.fallbackValue;
+            if (key in cellValue) {
+                return String(cellValue[key]);
+            }
+            else if (Array.isArray(cellValue)) {
+                // Handle array of objects
+                const response = cellValue.map((item) => {
+                    if (typeof item !== 'object') {
+                        return item.toString();
+                    }
+                    else if (key in item) {
+                        return item[key];
+                    }
+                    else {
+                        return item.toString();
+                    }
+                });
+                return response.join(', ');
+            }
+            return this.fallbackValue;
         }
         // If cellValue is a primitive (string, number, boolean, etc.), return it as a string
         return (_a = cellValue === null || cellValue === void 0 ? void 0 : cellValue.toString()) !== null && _a !== void 0 ? _a : this.fallbackValue;
@@ -10679,7 +10735,7 @@ class NvDatagrid {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
-        return (hAsync(Host, { key: '1c5233899e6940571c3aedefbd65f2ee5ec4f601' }, hAsync("div", { key: '164f47d8c6c758a457b28b610d2660d51ae3707b', class: "hidden" }, hAsync("slot", { key: '792284e9478b8486578e6a9b1e946df16a1f6c14' })), hAsync("slot", { key: 'e8ea5758ec2c918a7f0af963312a114d162aabf5', name: "before" }), this.enableGlobalFilter && this.table && (hAsync("div", { key: '6532e4d4427c5fa5ae9125bf434cd34b182099c9', class: "search-container" }, hAsync("input", { key: 'd7740d417a6e649294a38454ba3f4a6c59e86547', type: "text", value: (_d = this.globalFilter) !== null && _d !== void 0 ? _d : '', onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns...", class: "search-input", "aria-label": "Search all columns" }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (hAsync(Host, { key: '94163c2c73d03dca35795bfb536c5743cb3aa0dc' }, hAsync("div", { key: '022776844872a4a6fcf9d7bdc71651e946e83724', class: "hidden" }, hAsync("slot", { key: 'a479cfc2b5ee53aa83450ec784451625e1ae7667' })), hAsync("slot", { key: '9beeb16975a685d8ce05981923c999ab2ffa004e', name: "before" }), this.enableGlobalFilter && this.table && (hAsync("div", { key: '57efcd1ee55fae941a0071000dc665ee76615f32', class: "search-container" }, hAsync("input", { key: 'd7352618ce123a7c14d8ebcc0b228136ae2df66a', type: "text", value: (_d = this.globalFilter) !== null && _d !== void 0 ? _d : '', onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns...", class: "search-input", "aria-label": "Search all columns" }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (hAsync("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return (hAsync("th", { key: header.id }, header.isPlaceholder
                     ? null
@@ -10689,12 +10745,19 @@ class NvDatagrid {
             const rowId = row.id;
             const visibleCells = row === null || row === void 0 ? void 0 : row.getVisibleCells();
             return (hAsync("tr", { key: rowId }, visibleCells.map(cell => {
+                var _a, _b;
                 const cellAccessors = cell.column.id;
                 const cellValue = cell.getValue();
-                return (hAsync("td", { key: cell.id, "data-row-id": rowId }, this.renderTemplate(this.templateCache.get(cellAccessors), cellValue, row) ||
-                    (cellValue !== null && cellValue !== void 0 ? cellValue : this.fallbackValue)));
+                return (hAsync("td", { key: cell.id, "data-row-id": rowId }, ((_a = this.columnData.find(x => x.accessor === cellAccessors)) === null || _a === void 0 ? void 0 : _a.repeatTemplate) && Array.isArray(cellValue)
+                    ? cellValue.map((item) => {
+                        var _a;
+                        return (_a = (this.renderTemplate(this.templateCache.get(cellAccessors), item, row) ||
+                            item)) !== null && _a !== void 0 ? _a : this.fallbackValue;
+                    })
+                    : (_b = (this.renderTemplate(this.templateCache.get(cellAccessors), cellValue, row) ||
+                        cellValue)) !== null && _b !== void 0 ? _b : this.fallbackValue));
             })));
-        }))))), hAsync("slot", { key: '3a3f83daf332e7d38ad9f225cc5a886197283a0a', name: "after" })));
+        }))))), hAsync("slot", { key: '15815f259d3936559c89ff943dc349f99fda34fa', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10719,14 +10782,16 @@ class NvDatagrid {
             "noDataMessage": [513, "no-data-message"],
             "noColumnsNoDataMessage": [513, "no-columns-no-data-message"],
             "enableGlobalFilter": [516, "enable-global-filter"],
+            "autoGenerateColumns": [516, "auto-generate-columns"],
             "table": [32],
             "parsedColumns": [32],
             "parsedData": [32],
-            "globalFilter": [32]
+            "globalFilter": [32],
+            "columnData": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["dataJson", "data-json"], ["columnsJson", "columns-json"], ["fallbackValue", "fallback-value"], ["noDataMessage", "no-data-message"], ["noColumnsNoDataMessage", "no-columns-no-data-message"], ["enableGlobalFilter", "enable-global-filter"]]
+        "$attrsToReflect$": [["dataJson", "data-json"], ["columnsJson", "columns-json"], ["fallbackValue", "fallback-value"], ["noDataMessage", "no-data-message"], ["noColumnsNoDataMessage", "no-columns-no-data-message"], ["enableGlobalFilter", "enable-global-filter"], ["autoGenerateColumns", "auto-generate-columns"]]
     }; }
 }
 
@@ -10737,23 +10802,28 @@ class NvDatagrid {
 class NvDatagridcolumn {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Whether the column need to be repeated with the template.
+         */
+        this.repeatTemplate = false;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '3528bee82ffaa794f35b525ceb246947848e1bc2' }, hAsync("slot", { key: 'd8ac07dcdb1912b331443adcdb13e121cc59fc87', name: "header" }), hAsync("slot", { key: '59dc43378b92ba201f3a549104adedeb9528c3e7', name: "cell" })));
+        return (hAsync(Host, { key: '462144dc8ea401f4f3e3683bdafba983c7147737' }, hAsync("slot", { key: '9af4055567f5199f6b4393e37a8a77b884ce82b9', name: "header" }), hAsync("slot", { key: '36b8cfd9bc974ed9d2a249418ababa504b66091d', name: "cell" })));
     }
     static get cmpMeta() { return {
         "$flags$": 4,
         "$tagName$": "nv-datagridcolumn",
         "$members$": {
             "header": [513],
-            "accessor": [513]
+            "accessor": [513],
+            "repeatTemplate": [516, "repeat-template"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["header", "header"], ["accessor", "accessor"]]
+        "$attrsToReflect$": [["header", "header"], ["accessor", "accessor"], ["repeatTemplate", "repeat-template"]]
     }; }
 }
 
@@ -11384,7 +11454,7 @@ var NvDialogStyle0 = nvDialogCss;
 class NvDialog {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.close = createEvent(this, "close", 7);
+        this.openChanged = createEvent(this, "openChanged", 7);
         this.eventsAttached = false;
         /**
          * Use this prop to toggle the visibility of the dialog. Set to true to show
@@ -11411,24 +11481,25 @@ class NvDialog {
          * Handles the close button click.
          */
         this.handleCloseButton = () => {
-            this.hide();
+            this.close();
         };
         /**
          * Handles the cancel button click.
          */
         this.handleCancelButton = () => {
-            this.hide();
+            this.close();
         };
         /**
-         * Handles the dialog close event.
+         * Handles the native dialog close event.
          */
         this.handleDialogClose = () => {
-            this.hide();
-            this.close.emit();
+            if (this.open) {
+                this.close();
+            }
         };
         this.handleClickOutside = (event) => {
             if (event.target === this.dialogElement) {
-                this.hide();
+                this.close();
                 event.preventDefault();
                 event.stopPropagation();
             }
@@ -11454,17 +11525,20 @@ class NvDialog {
      * Call this method to show the dialog, making it visible on the screen.
      */
     async show() {
+        this.open = true;
         this.preventScroll();
+        // It is recommended to use the .show() or .showModal() method to render dialogs, rather than the open attribute. If a <dialog> is opened using the open attribute, it is non-modal.
         this.dialogElement.showModal();
-        this.open = true;
+        this.openChanged.emit(this.open);
     }
     /**
      * Call this method to hide the dialog, making it disappear from view.
      */
-    async hide() {
+    async close() {
+        this.open = false;
         this.allowScroll();
         this.dialogElement.close();
-        this.open = false;
+        this.openChanged.emit(this.open);
     }
     /**
      * Sets the autofocus on the first focusable element in the dialog.
@@ -11551,7 +11625,7 @@ class NvDialog {
             this.show();
         }
         else {
-            this.hide();
+            this.close();
         }
     }
     //#endregion WATCHERS
@@ -11609,7 +11683,7 @@ class NvDialog {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (hAsync(Host, { key: '731274a64589490c56ab51e29de4d5a1b0f46fcb' }, hAsync("slot", { key: '87364a75032d2912402cb7521f8139534b31e836', name: "trigger" }), hAsync("dialog", { key: '689f5acab998db40d17014a70956b227af28fdce', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, hAsync("div", { key: '819b8a7c7b57c80f6581d2130ef799bc66697a2a', class: "content" }, !this.undismissable && (hAsync("nv-button", { key: 'bb370ddcf138c75f383a0cd21417a738f49574b7', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, hAsync("nv-icon", { key: '1a6f429045572f88bd5c0ceba0d7745ce074316e', name: "x", size: "sm" }))), this.headerElement ? (hAsync("slot", { name: "header" })) : (hAsync("nv-dialogheader", { id: "dialog-header" })), hAsync("div", { key: '609b0f6c8f902270e497cd31fd6eabe41b889978', class: "content-body", id: "dialog-content" }, hAsync("slot", { key: '7923f02b0aed38de9db5e61ab38b90b4888e3735' })), this.footerElement ? (hAsync("slot", { name: "footer" })) : (hAsync("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
+        return (hAsync(Host, { key: '61eba0f85db952b244052a3ee2ef7b7f87fd326c' }, hAsync("slot", { key: '44c72cba8610442c45386055285fcc81b9fccc4f', name: "trigger" }), hAsync("dialog", { key: 'db3983ac428f7e537037884f5556d97330928238', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx({ full: this.full }) }, hAsync("div", { key: '9ec2a2df306d68ac4cea2c5b2c303d3b491d5e34', class: "content" }, !this.undismissable && (hAsync("nv-button", { key: 'a586462512605de60726b912897fa16c39f8f68f', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, hAsync("nv-icon", { key: '95eb4b492442aa0eb43dcab3f9111d9961421322', name: "x", size: "sm" }))), this.headerElement ? (hAsync("slot", { name: "header" })) : (hAsync("nv-dialogheader", { id: "dialog-header" })), hAsync("div", { key: 'f9c1cf75b545166afc4dbb3d650e90042a83ea7a', class: "content-body", id: "dialog-content" }, hAsync("slot", { key: '7716af492453f1a9f142aaf2a8af06689e4ded82' })), this.footerElement ? (hAsync("slot", { name: "footer" })) : (hAsync("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -11629,7 +11703,7 @@ class NvDialog {
             "controlled": [516],
             "full": [516],
             "show": [64],
-            "hide": [64]
+            "close": [64]
         },
         "$listeners$": [[4, "keydown", "handleKeyDown"], [4, "click", "handleDocumentClick"], [5, "touchstart", "handleDocumentTouch"]],
         "$lazyBundleId$": "-",
@@ -11725,7 +11799,7 @@ class NvDialogfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '20d86d12b859505ed088fc21ee04d8ee1d9bbb81' }, !this.hasSlot ? (hAsync(Fragment, null, !this.undismissable && (hAsync("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), hAsync("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (hAsync("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (hAsync("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (hAsync("slot", null))));
+        return (hAsync(Host, { key: '11bfb772cb942d91363b9636f0baf10d33ce6bbd' }, !this.hasSlot ? (hAsync(Fragment, null, !this.undismissable && (hAsync("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), hAsync("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (hAsync("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (hAsync("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (hAsync("slot", null))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -11781,7 +11855,7 @@ class NvDialogheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '6840a5af95a0534339bc0682d829c33d7376a79a' }, !this.hasSlot ? (hAsync(Fragment, null, hAsync("div", { class: "heading" }, this.heading), hAsync("div", { class: "subheading" }, this.subheading))) : (hAsync("slot", null))));
+        return (hAsync(Host, { key: '7658d8f0517e63b3688b938108e8c3a6df788a77' }, !this.hasSlot ? (hAsync(Fragment, null, hAsync("div", { class: "heading" }, this.heading), hAsync("div", { class: "subheading" }, this.subheading))) : (hAsync("slot", null))));
     }
     get el() { return getElement(this); }
     static get style() { return NvDialogheaderStyle0; }
@@ -11798,7 +11872,7 @@ class NvDialogheader {
     }; }
 }
 
-const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 var NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
 
 /**
@@ -11918,13 +11992,13 @@ class NvFieldcheckbox {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'de53d56a14565faed09432cf9caa2ac04009a395', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '1b2eaf318015983b76354a0f98ca659748defaf2', class: "input-container" }, hAsync("input", { key: '949928601227543717db9cec038e6f55efa618d1', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+        return (hAsync(Host, { key: '1d627199f94d133d82bbef8f20de86590d9a3813', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: 'bca54e59576da2ec632a7ef7c5f8adb6fb3c77fb', class: "input-container" }, hAsync("input", { key: '4f27772a35e74cc945fc4de202099866fbd8a317', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), hAsync("span", { key: '6e969279cb7279a1fbe6c1112e77139d274eccfd', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: '9655696bf7ecda02105f4ab68743800fec0c6500', name: "checked-icon" }, hAsync("svg", { key: '1fe56dea643795713cc6df292757256d89a7ae11', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'd3ee68e0b4199591794ba39b4cc6aa4b24e61ee6', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: 'c598b604c2c3aec0c1d36d36ff243972b33d4f77', name: "indeterminate-icon" }, hAsync("svg", { key: '38eb1768bc6e5d7b5dfdcaafbc39a7618500a1d4', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '06170fa3c62bb8793ea76ea30925d1a2b3520a77', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: '375979126e20eea97fde15f7c3b9237880f40766', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'abe195bf795d754abd5462605440e2fa40c756e1', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '7c25e043ab0bb79cc51594336dfce76086b6c901', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '365c2da85957590b6c365b95c78309711dec1fc7', class: "description" }, hAsync("slot", { key: '4f95fa143036d8f701cce9e2bd29036414426f38', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c7db38efbfcfb30d8de8ccad513e96019ade14be', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'c0ecad03278dc4ebbb43a3b30ff00c5be5051f6e', name: "error-description" }, this.errorDescription))))));
+            } }), hAsync("span", { key: 'd575209c82fe0cbb4f3136a50eb78a9db12cacc0', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'c265cb54bc4d76962203e8ee0298508e9f96bc58', name: "checked-icon" }, hAsync("svg", { key: '03d326e69ac11bf22bc3ce43a80023f8c2ff8401', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'ae602d5613c82569f89f97d9e1b6994940f03f9c', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '9f90d9b9a63a50bd0ecd4433b390d4c03604e124', name: "indeterminate-icon" }, hAsync("svg", { key: '7681c9b1203240f419fb7cf93644cef77f8438f6', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'c28a5d22adace616ede31baa3a4edbc8cb899f01', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: '9213ad654a4c4f9576160c80195aec378559f2a0', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '73f6c22fe57659b0618216e69289a5704ac231eb', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'fd70342006329609c2b0f9b501d0e2e7ad311f07', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '17fb2ed0060b24b1ef797efe34b53c94a755a1ac', class: "description" }, hAsync("slot", { key: '96d6c1b135f716de40c1223f35a479d3c8cc6c0d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c63392b6d315d5104087561ca2abf166e190f0f7', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '154010b1ec725f95d88bbf18a9e5d309b73affdd', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -15981,12 +16055,12 @@ class NvFielddate {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f4ac8fc14fa8e152377801da2ad06db00a780632' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '29ad17b261aeb6013b72b03e2f2e960a7395c4ff', htmlFor: this.inputId }, hAsync("slot", { key: 'e478022257fe1b4c8667f9a7813c270664e51fb1', name: "label" }, this.label))), hAsync("nv-popover", { key: 'fb6e74859034ea4a918901794dc50569327246f3', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '8144b07f3310cfd684fc5eff8e2f4b195afa0a85', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '13719fa680565927f1d4d49c9b8b18fbd8724895', name: "before-input" }), hAsync("div", { key: '7483c3a0f194f1c433a378dbf8def6c644062520', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'def0c8bd58dc65d121d6a5259d0ff71cd32df6d0', name: "leading-input" }), hAsync("input", { key: 'e3a9c13f3da9437a7eebd849c89b59f9014312dd', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus }), hAsync("nv-iconbutton", { key: 'c82ab5489ec156ed6d83f249e69a19230e990bda', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        return (hAsync(Host, { key: 'c7df11a97881887a55ebcedcb2b92aa1ac24097e' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'a1b973f2de3b2510e7ed9c4a02d38ebc96cf5261', htmlFor: this.inputId }, hAsync("slot", { key: '8a236ef847c3c65994fa47fad12f7c1a84820859', name: "label" }, this.label))), hAsync("nv-popover", { key: '76448ee54d85eeed56bc700b6cf5c92bfbad75b3', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '1e3610ab28f294d1075aa78a971ee80a2c5f67bc', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '1ddf6042b74ba760238a92a4bd76e1385ed5b964', name: "before-input" }), hAsync("div", { key: 'ed60189f121928bc42fdf6f419a92fe2733ad2a3', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '27d9c9302a8cb2d9d803020e2bc7b86b8c2c673b', name: "leading-input" }), hAsync("input", { key: 'c8edffba97c6c51ef545c218459a8ce80698b3c4', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus }), hAsync("nv-iconbutton", { key: 'e69bf0edb9726c201659f5a4aa7453eb3f5067ac', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: 'dce118ee3c305e63d9ee35ea2862ca6a0d461329', name: "after-input" })), hAsync("div", { key: '5f6ec80b1552401b386e9d18cc77ba6238ded537', slot: "content" }, hAsync("nv-calendar", { key: '100f2ddb0f3f5393143aeaaebc16ced4c84ba8fe', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '2e04bba3f1578f4cb4e9d9fdff3f969f06965231', class: "description" }, hAsync("slot", { key: '9b5d6314cd11e146cc03febfe0d588b7671371c5', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'be836494c6ee4972b6830069517c8402946244bd', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '6483eb88eabdda1f3feb3cf63dfabc66fad4ca2f' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: 'd8231b608d9d08abb88e261118f9dd02cf8f5c2c', name: "after-input" })), hAsync("div", { key: 'c8bb3d4a753e8ad311db1947717f1dad109999c1', slot: "content" }, hAsync("nv-calendar", { key: 'bd73bc48c48e708f3655c112b874135003f1a16f', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'dee7ad7eaa2854756e616ef033264c4a2cf8f96c', class: "description" }, hAsync("slot", { key: '5556239ae6ed962cd2d51944d2f394f8d7741fb0', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '82ba5366e053563fe5fc9471493fb99c78bf078f', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '1fda22554d69a5998b99d3f8c95362a926b44fb3' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16368,15 +16442,15 @@ class NvFielddaterange {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '093caee1d7944ccded9cd64f579057492e0d0493' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '423a473a9d996cc57efdf140440d9c8282c47552', htmlFor: this.startInputId }, hAsync("slot", { key: '9c0e45cc247755fa4e01c2a1f47ed55ee26d5120', name: "label" }, this.label))), hAsync("nv-popover", { key: '7c80be4f96c66bef3f06da587db9f316b2bc7a8b', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '84d7bb82e508521c80d5aa28e5738b95a6d88301', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '6e26220a3d633dd70a538cc1039db23518013eac', name: "before-input" }), hAsync("div", { key: '6d4cc658e1aa63d62f55acc5cad858a5269f3629', class: "input-container" }, hAsync("slot", { key: 'e71bbd1de9fb33b95ba0e71a8de19e9d0acfeb56', name: "leading-input" }), hAsync("div", { key: '7f48156f1a9c18ff71a6a21aa5ddb8f3e72fa03c', class: "range-inputs" }, hAsync("input", { key: '306a3feeeb8af8e340427a240f36cd38c5be8ee9', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.shouldAutoFocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus }), hAsync("svg", { key: 'b49d1c29dc4cc6c9fd2452212781a326bc673a93', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, hAsync("path", { key: '39c7a7e3ab83f9231ffd2df9d31d451939868aff', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), hAsync("path", { key: 'c3ad84053b33be954398f387ee58c680a8f11420', d: "M18 9l3 3l-3 3" }), hAsync("path", { key: 'd2ec3d45a4b599ff12b054c8f027652f64da09f0', d: "M15 12h6" }), hAsync("path", { key: '509aac76d4974dc4a522f6a37d20be6847f8fbc7', d: "M6 9l-3 3l3 3" }), hAsync("path", { key: 'c3e97c1c2b42b66197ce1d7b0b4b09bad8780bea', d: "M3 12h6" })), hAsync("input", { key: 'fa3c9a646a96a078a7e5b5360847f4ba4d5e132d', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus })), hAsync("nv-iconbutton", { key: 'e38df040bf7450f1aefe5f5d2d4e824935ddb2f9', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: 'd60c491f4688d9e04888af97d027fa7e02492f6c', name: "after-input" })), hAsync("div", { key: '2b54c1c5c19b6dff615850d151cb52bccbd322fc', slot: "content" }, hAsync("nv-calendar", { key: '11d1c70f9e3e5ce1979f7127d828fc06f2b52078', dateFormat: this.dateFormat, rangeValue: this.startValue && this.endValue
+        return (hAsync(Host, { key: '357f98b39d7cade75f24caaba007eec4279cd24e' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0731f0d5ad79d323dade2f023f5a9c3088c744b2', htmlFor: this.startInputId }, hAsync("slot", { key: '75309cb4161e1652f0445ba924c6d7a58de140c3', name: "label" }, this.label))), hAsync("nv-popover", { key: 'f66e2544956ea3dedd249719a4b436077bdc85c0', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'c1a3b117056a521f6f778a978b4bc8edac32a111', slot: "trigger", class: "input-wrapper" }, hAsync("slot", { key: '5fbe2aff9687456dd299792016904470386dfb94', name: "before-input" }), hAsync("div", { key: '46726768e9724e983063479e0f301c3d09169669', class: "input-container" }, hAsync("slot", { key: 'f4a405be4a98566bd40dc9d19087d2c5c0ac798f', name: "leading-input" }), hAsync("div", { key: 'd1abc5e239272e57f0fdbf4c0e9e76ca86230996', class: "range-inputs" }, hAsync("input", { key: 'd13584d024b50162d47a74e68592c05206484876', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.shouldAutoFocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus }), hAsync("svg", { key: '641dda60614637939d8ffaa25052e8f2bcb234d8', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, hAsync("path", { key: 'c6245bd4ffa2bb12df3a295a6a10ce8386b5f54b', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), hAsync("path", { key: 'c1b3400148e367dae092eecec9da410cfa2e7547', d: "M18 9l3 3l-3 3" }), hAsync("path", { key: '08bc414df54afe457775aec97897ed0acf2dca38', d: "M15 12h6" }), hAsync("path", { key: 'd9136526597df7a8193f71414caba9481248ebf2', d: "M6 9l-3 3l3 3" }), hAsync("path", { key: '1d194b3449c53be3f05458ade789e99998861371', d: "M3 12h6" })), hAsync("input", { key: '5ed58df2a2680b1fa66916f65c2dc48dc648e461', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus })), hAsync("nv-iconbutton", { key: 'e06b3a9326245e581998a60627634560be7124f0', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: 'bf0ea3f63a5476e7ff4a6954fb200c15a493d6ac', name: "after-input" })), hAsync("div", { key: '32fcfbafe86ce08d87d597d40ad25702dd059ed6', slot: "content" }, hAsync("nv-calendar", { key: 'ef670618ecca933d976adefaec9996f172f95d7a', dateFormat: this.dateFormat, rangeValue: this.startValue && this.endValue
                 ? JSON.stringify({
                     start: this.startValue,
                     end: this.endValue,
                 })
                 : '', firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '609d5a80059699ffad7272459975ee4ac04fabd3', class: "description" }, hAsync("slot", { key: '472e10256149d7729186152da03e356da1360ded', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a2e3f0db10b38d4e37616ef0df0c28c31c1480c6', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '8ee594b994a8e86909bf47718f20b9d1f2a653db' })));
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '15dbab39d7ceaf406246462812d8a1307dad40bb', class: "description" }, hAsync("slot", { key: '1c5f74676b312a6bbca659a783473da7c3936829', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '8f48ac666968cddfdd2c282366ed2f6dccd3013c', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (hAsync("slot", { name: "error-description" })) : (this.errorDescription))), hAsync("slot", { key: '92dc673a2d62a34d3830cf6644b84103b73b695b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16503,7 +16577,6 @@ class NvFielddropdown {
         //#region STATE
         /** The text entered by the user for filtering dropdown items. */
         this.filterText = '';
-        this.isFilterable = this.filterable;
         this.selectedValues = new Set();
         /**
          * Options configuration for the dropdown items.
@@ -16593,10 +16666,6 @@ class NvFielddropdown {
     handleOpenChanged(event) {
         this.open = event.detail; // Update `open` based on the popover state
     }
-    watchFilterableHandler(newValue) {
-        this.isFilterable = newValue;
-        this.filterable = newValue;
-    }
     watchValueHandler(newValue) {
         this.valueChanged.emit(newValue);
     }
@@ -16773,14 +16842,13 @@ class NvFielddropdown {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'fd9c415beb138bf85bdd914c6143b50a2f2330bf', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3bd9ea3ac7f1202882511ab6bf0d187975eaaaf6', htmlFor: this.inputId }, hAsync("slot", { key: '0e33a34af113e622401e5d23843fc67afce8c7a0', name: "label" }, this.label))), hAsync("nv-popover", { key: 'cf41abb986f71b746f7b83828eb69244e502626a', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'c030054877c24d5091bc9ea91f8b90182a5150b9', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '974aa8736caa3112d2e17a6e6fc33d0271315303', name: "before-input" }), hAsync("div", { key: '7b657cf2dd489e8e22ecd52403a9eba8193c1728', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '26d55cabf26329cde6f7ac93464def081533dd7d', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (hAsync("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.isFilterable && this.filterText && this.open && (hAsync("nv-iconbutton", { key: '4dab0dd29d016a68b94681893bd0367c2f2bbccb', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (hAsync("nv-icon", { key: '94555a8f663a45ce5e744a2c4f42442ee725556f', name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: 'c52dcc16864b6093cc7c1417d98506c9b4739f4b', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: 'a78197668881b8fc5fd7522a3b2ebcb4e4d6c1cc', name: "after-input" })), hAsync("div", { key: '161678718ea939874d27b800052f3ff2df94a07d', slot: "content" }, this.parsedOptions.length > 0 ? (hAsync("ul", null, this.parsedOptions.map(option => (hAsync("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (hAsync("slot", { name: "content" })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'b4ea5b9e6d12307201847c8b9979e7c77442c0a9', class: "description" }, hAsync("slot", { key: '7162553aadfbeae787683a1fcf4ac7a1ca4788da', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c96506582bd9c604490ce0d9c4a398ff70b7e814', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '9069e068a0e1624344b248d68799ecf07f10c649', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '9624c909eb35f0e6d9a9875cbeaec8ffb8122d40', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '27389b0b422af6b7714cea6654ac243d1e9c242f', htmlFor: this.inputId }, hAsync("slot", { key: 'd77573395386ba0c0afa2233f420fa250b86ac9f', name: "label" }, this.label))), hAsync("nv-popover", { key: '0b1dda746e71b810ab6050cd8ef6a6bb9a44866e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '437a94f2230891674dd9c820595fcecfcea48e77', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'e01c2e4bda2806b21c0016bfe710969044994dfc', name: "before-input" }), hAsync("div", { key: '310d387f5cc22ad85232c0f491763a810833befc', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'c16096b15be3fe16ad8f5fb4a730050f6f797342', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (hAsync("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (hAsync("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (hAsync("nv-iconbutton", { key: '208c945944cddcb1c67a3b560428f21ca056b17b', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (hAsync("nv-icon", { key: 'e3797d5e47e54fd328c0bcd86d14e80ee5e21e17', name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { key: '1ccb8f3bb1ad086339b9888bf89e929164576910', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), hAsync("slot", { key: '92a66b2da4f7ada21fdb8199d2b047840050be13', name: "after-input" })), hAsync("div", { key: '51ba49500cb0e03531c5b4b939e76817f432be57', slot: "content" }, this.parsedOptions.length > 0 ? (hAsync("ul", null, this.parsedOptions.map(option => (hAsync("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (hAsync("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3cb31c8bfb17db1862af12e817f6646480cd697c', class: "description" }, hAsync("slot", { key: '830538f4e63f9de6a613fcce23a80370d941e9da', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '8ffee4c7d2c9a93bc4de344f812ff568e3d6a23e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '8f534be6233f54e6b43e2271d0a151a02148d5d8', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "filterable": ["watchFilterableHandler"],
         "value": ["watchValueHandler"],
         "options": ["handleOptionsChange"]
     }; }
@@ -16803,11 +16871,10 @@ class NvFielddropdown {
             "readonly": [516],
             "disabled": [516],
             "emptyResult": [513, "empty-result"],
-            "filterable": [1540],
+            "filterable": [516],
             "options": [513],
             "autofocus": [516],
             "filterText": [32],
-            "isFilterable": [32],
             "selectedValues": [32],
             "parsedOptions": [32],
             "getFilterText": [64]
@@ -16877,7 +16944,7 @@ class NvFielddropdownitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'acee05b9d46a503b8ca19acf9f96577f83686c38', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: '07eb6931adeb42c1bd9d83b58ef43d07eb0fd4df' }), !this.composed && (hAsync("div", { key: '4a1c9d51f6d7e2ea3680ddd2294bc5a88c6a354b', class: "text-wrapper" }, hAsync("span", { key: '6f13add04158044d4b3cd00b386ed0ed5cde87fc', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: '88bfab2accd9b3bb8a2bb8fbbc6bafab8712432e', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (hAsync(Host, { key: '228a213b0a8acb108676e412ed2aa8bcd3f2e88d', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, hAsync("slot", { key: '4578676f2a58e9a3a3a5173ff4659ca8e65755df' }), !this.composed && (hAsync("div", { key: 'a4f670296e56319007852726fd5fa3dca1ea3d04', class: "text-wrapper" }, hAsync("span", { key: '2b69bca3ee6e1d7e8db57befdfb57bd27c096658', "data-scope": "text" }, this.label))), this.selected && (hAsync("nv-icon", { key: '869900dc55ef7e35550d9de1aea06478e90ba890', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemStyle0; }
@@ -16942,7 +17009,7 @@ class NvFielddropdownitemcheck {
         };
     }
     render() {
-        return (hAsync(Host, { key: '99198b739ef8440c24997cd06c563b2c7b0fbcc0', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: 'f57f89e6c9e889e254809c0587f92d05339b0116', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
+        return (hAsync(Host, { key: '69e403031200efea98b211ed6d69d3a21338bea0', onClick: this.handleClick }, hAsync("nv-fieldcheckbox", { key: '0d12dbeef8532087d950bfc4e14994821b1cd3f1', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemcheckStyle0; }
@@ -17047,10 +17114,6 @@ class NvFieldmultiselect {
          * The text entered by the user for filtering multiselect items.
          */
         this.filterText = '';
-        /**
-         * Determines whether the multiselect is filterable.
-         */
-        this.isFilterable = this.filterable;
         /**
          * Delay in milliseconds before the search is triggered when typing in the filter input.
          * @default 300
@@ -17069,7 +17132,7 @@ class NvFieldmultiselect {
          * element.
          */
         this.autofocus = false;
-        /**x
+        /**
          * Handle badge close for options mode.
          */
         this.handleBadgeCloseOptions = () => {
@@ -17109,7 +17172,6 @@ class NvFieldmultiselect {
             if (this.isHandlingEscape) {
                 return;
             }
-            this.open = false;
             this.filterText = '';
             // Only reorder based on the mode
             if (this.modeState === 'options') {
@@ -17131,7 +17193,6 @@ class NvFieldmultiselect {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    this.popoverElement.hide();
                     // Reset filter if needed
                     if (this.filterable) {
                         this.filterText = '';
@@ -17151,7 +17212,6 @@ class NvFieldmultiselect {
             const target = event.target;
             if (target.tagName === 'P' || target.tagName === 'SPAN') {
                 this.open = true;
-                this.popoverElement.show();
                 const inputContainer = this.el.querySelector('.input-container');
                 if (inputContainer) {
                     inputContainer.classList.add('focus-within');
@@ -17173,7 +17233,6 @@ class NvFieldmultiselect {
             const target = event.target;
             if (target.tagName === 'P' || target.tagName === 'SPAN') {
                 this.open = true;
-                this.popoverElement.show();
                 const inputContainer = this.el.querySelector('.input-container');
                 if (inputContainer) {
                     inputContainer.classList.add('focus-within');
@@ -17255,7 +17314,6 @@ class NvFieldmultiselect {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    this.popoverElement.hide();
                     // Reset filter if needed
                     if (this.filterable) {
                         this.filterText = '';
@@ -17271,16 +17329,7 @@ class NvFieldmultiselect {
             if (this.disabled || this.readonly) {
                 return;
             }
-            if (this.open) {
-                this.handlePopoverClose();
-            }
-            else {
-                this.open = true;
-                this.popoverElement.show();
-                if (!this.filterable) {
-                    this.focusFirstItem();
-                }
-            }
+            this.open = !this.open;
         };
         /**
          * Toggle the multiselect popover for slots mode.
@@ -17289,16 +17338,7 @@ class NvFieldmultiselect {
             if (this.disabled || this.readonly) {
                 return;
             }
-            if (this.open) {
-                this.handlePopoverClose();
-            }
-            else {
-                this.open = true;
-                this.popoverElement.show();
-                if (!this.filterable) {
-                    this.focusFirstItem();
-                }
-            }
+            this.open = !this.open;
         };
         //#endregion METHODS
         /****************************************************************************/
@@ -17308,14 +17348,14 @@ class NvFieldmultiselect {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("ul", { role: "content" }, this.parsedOptions.map(option => (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), hAsync("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+            return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("ul", { role: "content" }, this.parsedOptions.map(option => (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), hAsync("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
         };
         /**
          * Renders the component in slots mode
          * @returns {any} The JSX for slots mode
          */
         this.renderSlotsMode = () => {
-            return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, hAsync("slot", { name: "leading-input" }), hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("slot", { name: "content" }))), this.renderDescriptions()));
+            return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, hAsync("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), this.error && (hAsync("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), hAsync("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion PROPERTIES
@@ -17336,14 +17376,6 @@ class NvFieldmultiselect {
         if (this.modeState === 'options') {
             this.handleOptionsChange(this.options);
         }
-        // Add the listener for the hide event
-        requestAnimationFrame(() => {
-            if (this.popoverElement) {
-                this.popoverElement.addEventListener('hide', () => {
-                    this.handlePopoverClose();
-                });
-            }
-        });
         // Specific initialization for slots mode
         if (this.modeState === 'slots') {
             Promise.resolve().then(() => {
@@ -17387,12 +17419,6 @@ class NvFieldmultiselect {
      */
     disconnectedCallback() {
         document.removeEventListener('click', this.handleClickOutside.bind(this));
-        // Remove the listener for the hide event
-        if (this.popoverElement) {
-            this.popoverElement.removeEventListener('hide', () => {
-                this.handlePopoverClose();
-            });
-        }
     }
     /**
      * Emitted when the input loses focus.
@@ -17402,15 +17428,13 @@ class NvFieldmultiselect {
         // Update the open state of popover
         this.open = event.detail;
         if (this.open) {
+            // Filter items only if there is filter text
             if (this.filterText) {
                 this.filterItems();
             }
         }
-        else if (this.modeState === 'options') {
-            this.reorderOptionsContent();
-        }
         else {
-            this.reorderSlotContent();
+            this.handlePopoverClose();
         }
     }
     /**
@@ -17488,14 +17512,6 @@ class NvFieldmultiselect {
         // Handle value change and update the corresponding multiselect item if it exists
         this.setInitialSelection();
     }
-    /**
-     * Emitted when the filterable property changes.
-     * @param {boolean} newValue - The new value of the filterable property.
-     */
-    watchFilterableHandler(newValue) {
-        this.isFilterable = newValue;
-        this.filterable = newValue;
-    }
     // Add a listener for the slot content
     handleSlotChange(event) {
         // Check: we only want to reorder if it's the "content" slot
@@ -17834,8 +17850,7 @@ class NvFieldmultiselect {
             (this.inputElement && this.inputElement.contains(event.target))) {
             return;
         }
-        // Use handlePopoverClose for all cases
-        this.handlePopoverClose();
+        this.open = false;
     }
     /**
      * Handle keyboard events & arrow key navigation.
@@ -17847,7 +17862,6 @@ class NvFieldmultiselect {
         if (!this.open) {
             if (event.key === 'ArrowDown') {
                 this.open = true;
-                this.popoverElement.show();
                 // Focus on the first item if the list is not filterable
                 if (!this.filterable) {
                     requestAnimationFrame(() => {
@@ -17910,7 +17924,6 @@ class NvFieldmultiselect {
                 setTimeout(() => {
                     this.isHandlingEscape = false;
                     this.open = false;
-                    this.popoverElement.hide();
                 }, 150);
                 if (this.inputElement) {
                     this.inputElement.blur();
@@ -18019,8 +18032,7 @@ class NvFieldmultiselect {
     get el() { return getElement(this); }
     static get watchers() { return {
         "options": ["handleOptionsChange"],
-        "value": ["watchValueHandler"],
-        "filterable": ["watchFilterableHandler"]
+        "value": ["watchValueHandler"]
     }; }
     static get style() { return NvFieldmultiselectStyle0; }
     static get cmpMeta() { return {
@@ -18041,7 +18053,7 @@ class NvFieldmultiselect {
             "readonly": [516],
             "disabled": [516],
             "autocomplete": [513],
-            "filterable": [1540],
+            "filterable": [516],
             "value": [1537],
             "open": [1540],
             "options": [513],
@@ -18051,7 +18063,6 @@ class NvFieldmultiselect {
             "selectedValues": [32],
             "sortedOptions": [32],
             "filterText": [32],
-            "isFilterable": [32],
             "modeState": [32],
             "isHandlingEscape": [32],
             "getFilterText": [64],
@@ -18179,9 +18190,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'd4a702bbb94585da82e6c40ac83d0f3508564a7b' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '11cfc66c6796aae236796fb5a637aa72ef6c2340', htmlFor: this.inputId }, hAsync("slot", { key: 'bce23d0b1a283ec2d1c1ce0cc6d2c61a6d2cf6e9', name: "label" }, this.label))), hAsync("div", { key: 'c62aa0a4d69fd0235912ef16c89a4d511348aa48', class: "input-wrapper" }, hAsync("slot", { key: '2f7a66f50f7256b7ef5dcc90d112da47a4cac511', name: "before-input" }), hAsync("div", { key: 'b00c8348136289513a1c3d5ef68a08a581fa4d9c', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '9d4cce93ff07c710db6cafb3d5c644fad480a397', name: "leading-input" }), hAsync("input", { key: '44ef9c168f0e6e1ce9166cc896127f79d0794392', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: 'b2335c490f6ff69c3019731e309d450c94f0a881', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '5b259e0b4fce9444d6bd4019a5a9c01b66cb8b67', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: 'a22e29f5af849084331ddda2d63339b3517cb0cf', class: "stepper" }, hAsync("nv-iconbutton", { key: '97b7a1646b20fb0804daa5c830c70be05bc6673f', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), hAsync("nv-iconbutton", { key: '2a9cfde9dfa60a3a565a4673a3696f2907e67845', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), hAsync("slot", { key: '85b9df5f03f45486dec27961d9c98eafa90e008a', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '1bab44c8766935832acf883732f059333426bd61', class: "description" }, hAsync("slot", { key: 'f148c139053ce336f342a93e6bc9b8ac11872909', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a47082dd9ae82156fde1dd4948e31dcfec804a64', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '9537d8157e4acd4a2c502e271b9b2640c0cc71a6', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '99076502efb577ad65e43827f4d4959fb1f84055' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '365821e9e3cb25367591680279f05d951f6a5fd9', htmlFor: this.inputId }, hAsync("slot", { key: '92273b991f6c6bd34fe6a302dedb808d46abb71d', name: "label" }, this.label))), hAsync("div", { key: 'ab849355fa1719ed40b5379a8aeee160f98ea798', class: "input-wrapper" }, hAsync("slot", { key: '71e4de7753f3880756cd763a7a8955832066d0e7', name: "before-input" }), hAsync("div", { key: '6da56e990c4ad0329c5d974868e9520cb5ac7a99', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'd09eb9350067116d5236142951f0e7ed81d9aa5c', name: "leading-input" }), hAsync("input", { key: '6df1d2f3acb880000b57e5be990f6d843c7d3b2c', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: '85deaf9197825370d0bc7d81bd82cf9fd86b7a05', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '68ed66eb7a9af38f974e515d554eed6e3d28a915', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '16b0e4b303cce4ee7df29ea411e8fee808e5ddb0', class: "stepper" }, hAsync("nv-iconbutton", { key: '6dec84d7c05b467b5178177351e6fa769d2a9433', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }), hAsync("nv-iconbutton", { key: '66391588b961555aa20a1974098c114aadceadd1', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabIndex: -1 }))), hAsync("slot", { key: '4549e591971e83d5d14f08b56a8d5357c5d6aaf0', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'cef21ffaf75f976708d0c8b51f928daea26f1221', class: "description" }, hAsync("slot", { key: 'be36b7c3c6a606847805dc1a50f762a80155d695', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '91b5b8c969520bb10bccd59066ddea32d6fa58f3', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '7e0729d42390a1fc62d320841de4e016e01e2485', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18290,10 +18301,6 @@ class NvFieldpassword {
          * Show/hide the password programmatically.
          */
         this.showPassword = false;
-        /**
-         * Defines whether the password is visible or not.
-         */
-        this.showPasswordState = this.showPassword;
         /**
          * Applies focus to the input field as soon as the component is mounted. This
          * is equivalent to setting the native autofocus attribute on an <input>
@@ -18320,11 +18327,17 @@ class NvFieldpassword {
     }
     //#endregion METHODS
     /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.showPasswordState = this.showPassword;
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '38452ffde2d780abd369e0a4a395736c99ba3698' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'aba6b414793d44094dee6c80ee5f08ee8a6ff563', htmlFor: this.inputId }, hAsync("slot", { key: 'd69148906088a40b1f43b3734870d45e279af814', name: "label" }, this.label))), hAsync("div", { key: '9f23cf52be9502bbeae61b7c288c0232d64c4503', class: "input-wrapper" }, hAsync("slot", { key: '75317dbe9b44d2cc83745c12b1d856d0f3a70559', name: "before-input" }), hAsync("div", { key: 'c522f4b7b8346a34a345f9027b06090e596da5db', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'd816df16413183ab21887d90527dd66b6f36e922', name: "leading-input" }), hAsync("input", { key: '02d98198a48492e70738177651d69d606ea5a350', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (hAsync("nv-icon", { key: '796e8f87c15ae450b79973f66478491c53d43c54', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: 'c8b3c5605caad59c387f7211137de382692a6155', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), hAsync("slot", { key: '5f78d51ab2a4f095d136bb912b8d8c98f10bb297', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '87a876d189f8f66cbbf9d558316f8962bf8ef2db', class: "description" }, hAsync("slot", { key: 'e387e44b850db2cd0aebecadffe1395312049454', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '4b723b9d4a68f3536565e1cb4b701ef2c0aaad4c', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '896c7c76f4eb9ed88914a37edd1c832cf94e8b46', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '79c87deb52017b4500b695a513dc4100e7359d97' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'bd4785278a21ea61de41ed694e429228286f853b', htmlFor: this.inputId }, hAsync("slot", { key: '7c3cd8188e35aa00c0377ffdefb1d5e9c380ac59', name: "label" }, this.label))), hAsync("div", { key: '61f0e04b056ba1b08e9e3ede89d5975b4549705f', class: "input-wrapper" }, hAsync("slot", { key: '96070a1d584277de90962700a9e6764f0bd36a38', name: "before-input" }), hAsync("div", { key: 'ea04afadccfb828f5d081b1f30ef3d4619659b80', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'cfd54cbdf3d9d03c31cdd781491097cc6db405bd', name: "leading-input" }), hAsync("input", { key: '04bf191014aef621d314973d531533ffa50d8b2f', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (hAsync("nv-icon", { key: 'b2e57a5f496bda92dbb877850e67ffb921a288df', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '2664cbcbfd7aa04a5292a6821fa79a1cb12e1578', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), hAsync("slot", { key: '959a8d098548c85db4b1a8f9c0d2d8a8cdc5e386', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c7b85cb8d2f1f42d133e9937bccb8d3edd9d1cf8', class: "description" }, hAsync("slot", { key: 'fd41c7389e871ad4d57df283f9872c6964176bb3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '014db98dbf132a493b8842ffcc45ced808e9f52c', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '3909a8e0ac73dae4731e23806875f26bfb2185ff', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18451,9 +18464,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c600a157513b8401903807773cbd269008b35197', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '7861b2a7e9f6b5b4bef5f74781401eb4fb3c746d', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: '3612e5a6667d8bb1800a724386f84debe33cc0f4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e9caab357d06e25dab7b7b72020f56029d89f373', htmlFor: this.inputId }, hAsync("slot", { key: '04441ea9acb42628cf0618c566e9d7be159d962d', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '190427a3db123787a85f2abb72e47192a06586b4', class: "description" }, hAsync("slot", { key: '6799968f7ebbc302890c4544fe16f5928ac2a0e8', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b37bd97668df39b1160c581f0b62a5140ada9b59', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '7a715e8cc5dd5f41173d3b4d5d7cc229a787e2f9', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: 'fd326df67c5617156ef00d50d789d3328584788e', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: 'fae44c510d1f43c508a837b94cc16f8094617813', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: 'd4e9378e300691439bf57a580e8381a8142d8c78', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '56cdbda0feb823825f5ba5e125a478db23321379', htmlFor: this.inputId }, hAsync("slot", { key: '83e67f52228b7d6313fd35cd4a46edeeabc83a1b', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '8bb15a57d23f2826dfff31a7a3101ed263618e5f', class: "description" }, hAsync("slot", { key: '6d339430073e1eada1557ea762d9abeda7f338e1', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'd4b3c8ef17c70442839c61cf19bc0d9598be57c2', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'ca609be33a5253f85ed5101786c1981101f83743', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18833,13 +18846,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: '2d7fbe4141cbef0243b0c08c5af89e6249f20c09' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e8a03bde5c1c35d24d4ebe0b266aa3a653e6f763', htmlFor: this.inputId }, hAsync("slot", { key: '9a2ec1d03f76c5349fc93c99f3a409ea47a24f62', name: "label" }, this.label))), hAsync("div", { key: '6226069dcdc067cec3f6a3eaaf9ba536baf9ddf9', class: "select-wrapper" }, hAsync("slot", { key: 'f94e5b37a4008571913260b371aa2a710ba16fad', name: "before-input" }), hAsync("div", { key: '9774c2ee0b8b0b4159e90d2ac4b1bd98616e9554', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'e84d98a96ab47916d8332968f1d94946251582b3', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'c0a22ae71c95e0b22a8d1a8dbd5a6d447970147b', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (hAsync(Host, { key: '017364e5a5df156be42741e3acc4457414f8e6ee' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '2e4b247018a759307ea5e3920a4066a2c1c14e92', htmlFor: this.inputId }, hAsync("slot", { key: '1bbad9d0b4be9fc35c0cc63859ba6dcdb4375377', name: "label" }, this.label))), hAsync("div", { key: '572073518f738014fd27d8de84fc856a01889636', class: "select-wrapper" }, hAsync("slot", { key: '490730d4fc16f78284a8ca40ab952870eb01b503', name: "before-input" }), hAsync("div", { key: 'a92ea3295f64ce1c6d8da5cf439d7c796493fdf5', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'f80e732415ec42a4c7b02922f1b50d2cf3950e88', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'b1ee7e799434d0e36d1f98031338137347bcedea', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), hAsync("select", { key: '792ea3aa8c7cc04110951e7896ff54c0e097fb9d', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), hAsync("select", { key: '9a8b48a7a41522b09b65a5c76b7e861b5d6eef49', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (hAsync("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (hAsync("slot", null))), hAsync("div", { key: 'c05c31e672ac5e63c6935aa1457f180860193af3', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: 'b8a51b02da5a15bed729022268a298fe4242af78', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '2e54e71e2ca509762616baa546ade6362e9b3607', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: '7d7548609c904d261ffc347a24bf5fcfe10c3896', name: "chevron-down", size: "md", emphasis: "lower", tabIndex: -1 })))), hAsync("slot", { key: '22741934d8e09a384c9b1a84b773e3dbbd5ea061', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '2b352c4845ed135b03429b8382b8b7c79a1468ea', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: 'b1afb4fa2a554d5ce8a9e8d7c1a122baef2af671', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '7a472dfd9df5d9e1a2bab533d24d6f3656072a2d', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '70bf1c4c53a26f4aaeb72cce36260560e5d098fd', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (hAsync("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (hAsync("slot", null))), hAsync("div", { key: '7ecac0a159ca2b4925b8a940c80f8aef94a2ca1d', class: "select-icons" }, this.error && (hAsync("nv-icon", { key: 'fd3d75a5c621a49f45550d9596f4910ef01a56b2', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '45b3e11a48f5f700ac9c21ba276ee9c93640d0d9', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (hAsync("nv-iconbutton", { key: '07171fbe1fc88f4c7af0513ed718376ce1a1aeb3', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), hAsync("slot", { key: '096bf49c55359062fc790d31660b331a5988ad22', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '7b292eeb3a1ca29b7cb1b631926b591183ab50fc', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: 'a2fdc1929f7aa2571cd11d01e2c1ed165afb856c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '3d189e87ff7cee9a43ccad85c6e84fcdb3343f1f', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '515059b75c8e2c1e600a28124135cbd7af87ccbf', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18992,9 +19005,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '322d1e58130e04d69a5f14343fc5325c299e7d74' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '12cc27c3d8e7791db20ba39be84a261708ac1b81', htmlFor: this.inputId }, hAsync("slot", { key: '01cbeb48a79294d3c10283891fcdd68fce8b5597', name: "label" }, this.label))), hAsync("div", { key: 'd13eccee6cb016d49b9e2bba0a6333ea9ddb7cb0', class: "input-wrapper" }, hAsync("slot", { key: 'af2ffdddf6f9ae4f1af16a1710a0f829ef30196c', name: "before-input" }), hAsync("div", { key: 'b598d6b8709bd56051b25a12705a3b785cc5c7d5', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'c3006ed040dee98b443467e5d4a081fb4404efd8', name: "leading-input" }), hAsync("input", { key: '057f8836541e78d465083174ec029ed9ba56d950', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: '1c961288b97eb8f2580fd421b03db1f275709d47', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '4ffaf30cf97c5c6e69709abcca3db5ef7fa2598e', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: '46257b784d082071ed717f37aeac1e1bbffaeac3', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'dad03cc1954a17b4d9075f5c0949abdb83bee15c', class: "description" }, hAsync("slot", { key: '62c4d6315ad5eff50c86e289d7bcc61afacf64bc', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '3cd561cd634519ae18da4edfe8ec35dd2000a4ce', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '7fc992b0285652f46530ca23f12e626752dd1282', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'ffcbe1c8f14257f6380d28f2c50fe8b77ae73027' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3b84598a05eedc7625312def01ca726dc68fa247', htmlFor: this.inputId }, hAsync("slot", { key: '8c8f0d2f86742dd0699b8b309cbea0dca1d294ce', name: "label" }, this.label))), hAsync("div", { key: 'c2adf3acc7780a7eba5d4762b7275d1c63304bf5', class: "input-wrapper" }, hAsync("slot", { key: 'c49756d1daaba476222ebda2df4854b1094655b3', name: "before-input" }), hAsync("div", { key: '723c34f09e6c073bdef2db799246da72ffd52703', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '4e94bcac72ac2e5147a8d5e33396a13359820009', name: "leading-input" }), hAsync("input", { key: '96cbf022912735445467320600e372fba03de4e4', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: '39a55c42a49006d316e5dcc5389793c6264d2b09', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'bf1b6040dbb392b5c46b3b9af665d7cdc7389d29', name: "circle-check", class: "validation", size: "md" }))), hAsync("slot", { key: 'bb2256bf3fc5165e61f162fe89dd7be564a989c0', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3d2c5a89247042184b3a110ca7982b793b0bd86a', class: "description" }, hAsync("slot", { key: '2358cc5217d6ba65b4d4baa927b397dbe62982e8', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cdef4117d71b8a6bdde19fea1a0f4070ba02ab2e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '66a2b100ab641aa9c2e22fdfc9a987bb86cd44a0', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19209,9 +19222,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9edf7962ccdff743da72152b98f03d27c8f14f1f' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'c3f365dc9d7b27464ead7b80d2bf29ab830cc8df', htmlFor: this.inputId }, hAsync("slot", { key: 'bcfc6ada8c84894be98adcc58c5d5dbc19da5693', name: "label" }, this.label))), hAsync("div", { key: 'e6341cf7d87d9e0d2534ddb0401b595970beabfb', class: "textarea-wrapper" }, hAsync("div", { key: '80e0b0bc0cb7ec4b237b032e0a4c00a3d6a2e16a', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '20bcce08c32dddaa9fcd54b5fca5724318f31010', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, 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"]')) && (hAsync("div", { key: 'd3f26d3a2f81d5009e55e532ce8079433bbe60bb', class: "description" }, hAsync("slot", { key: 'd9f16157d8ea355d57d8935aec45aa1fcaba2b68', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c4b838a46fc477530dcb6101f8d8758d99466f65', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '3370a1b2d89a1d24a9e3ed93aebf04751aaa1e86', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'b5d6707fa7ebbd64f3b1616c9f61746f394e347d' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '6fd76411b08da2d22d86d0a4ef81ce99534d0112', htmlFor: this.inputId }, hAsync("slot", { key: '634339fa1bd5ccb2627dab03117535b2bc09b9cc', name: "label" }, this.label))), hAsync("div", { key: '6a521f191ebae60a874c4d48a1872b7a61181c54', class: "textarea-wrapper" }, hAsync("div", { key: 'ecca606c8775282c5b21b8f8e12a9c98df7aa410', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '7547d01134c155c9f76e1978f08075d1e8ff50fd', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, 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"]')) && (hAsync("div", { key: 'fc436e3cc4dbdf8730920173a74f4da249678e39', class: "description" }, hAsync("slot", { key: '27aa71e73818742bc92f3860dd0071eef182474a', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cc3733783b2f5985358d1c21e502845f7bab8406', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '1db584479ed23d616d88dc9fc28fe1e0acd7a463', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20235,26 +20248,26 @@ class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (hAsync(Host, { key: '2bd5109091c0e07418ce9565e87384f386428c7f', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'fb435b88f17474c69e9400f3f74545a6e1b9e71c', htmlFor: this.inputId }, hAsync("slot", { key: 'c252c0daf40bec73e405ad53a06ca84de823b3d7', name: "label" }, this.label))), hAsync("nv-popover", { key: '009f40e96c5cb95ef985909e8a0edfa9df3e7c7f', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'd22fa1424d88309d07dbbd73a8c1d25d21392329', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: 'e56bcfab83d254bc7df35ac84481b5ef67b23ca2', name: "before-input" }), hAsync("div", { key: '20ce8289edbfbddd54424dd86e672ab4689cd51d', class: "input-container" }, hAsync("slot", { key: '98c4d58900edfc2b618f6882be0832eae4ce1e65', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            hAsync("input", { key: '9317fddf11f5715a585f784cda78b54aa62be063', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
+        return (hAsync(Host, { key: 'd9b980ce6cf9d4c00da007608b03261983ae49b7', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ff69b45e9b30ee4b0dd2034c1e29b698796f8796', htmlFor: this.inputId }, hAsync("slot", { key: '6cfd62e39f69451c326b5266a3c8b33520366ac7', name: "label" }, this.label))), hAsync("nv-popover", { key: 'f2c68b4286769203b9f4af8cc61375dc60795589', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'eb45e4d83e5d9754336bc7d03a2937931fa56378', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '644faecac37927eae57da8eb039a79154ebf5787', name: "before-input" }), hAsync("div", { key: '10b656c08d991100a5ef0fe87299af7a3d0a7831', class: "input-container" }, hAsync("slot", { key: '3908fc76c97f4a362974199f30bdc2535172e4dc', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            hAsync("input", { key: 'b68e32193ab056a230138dfbb2d14240fa700b1d', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
                     ? `${TimeType.Hours}-${this.name}`
                     : TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('mm') && [
-            hAsync("span", { key: '044a1a102651f107f84815479428737a01ec9bc5' }, ":"),
-            hAsync("input", { key: '19facb2211d8e3505a66effb65357e40cd5d4cdb', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
+            hAsync("span", { key: 'ebef6f727c34aa8f9348c65c02ab970a409cce2e' }, ":"),
+            hAsync("input", { key: 'd4aa6001b2f462d64eae1bdda7f46d97a926802e', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
                     ? `${TimeType.Minutes}-${this.name}`
                     : TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('ss') && [
-            hAsync("span", { key: '239c6cee81a91eaa37c66dad419838eac713dc52' }, ":"),
-            hAsync("input", { key: '86b90a830be379c88c93b56cb19ff2f7905ae90a', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
+            hAsync("span", { key: '9ce4067c241aae590f4cd4383b1ece3a7510a2c7' }, ":"),
+            hAsync("input", { key: 'f42706c6e606c59e739b0460b9c9016c796542da', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
                     ? `${TimeType.Seconds}-${this.name}`
                     : TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], hAsync("nv-iconbutton", { key: '2aed05d3ba441bb145e43b480d3c30b227559fd5', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: '88e621d6753e3b4661a49d612133eff268abe459', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: 'c9493053d4c60c9826517e63d8bdb9d3d915e5a4', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'd1e56ff18a036b3eecfc3b82603417747444f515', name: "after-input" })), hAsync("div", { key: 'ee316a5355842ba4b94d7f155be4ee76170b653d', class: "time-dropdown", slot: "content" }, hAsync("div", { key: 'b4c00d933a89420c2b7f6c91e52dab14b00aacd2', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], hAsync("nv-iconbutton", { key: '4c233506c36553289c0e21d889e6c77c46e2862a', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (hAsync("nv-icon", { key: '9dcf992cc15a5462269208daecec4dbfc7fc9183', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '3614bfd444d8243c110bf2b458e0d2d5f296566f', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'e703a923e7c98e2d9fd5d69a5741f1f67c9710b4', name: "after-input" })), hAsync("div", { key: '6a56bd36fac3051ae1a40cbb450a51a415c00db2', class: "time-dropdown", slot: "content" }, hAsync("div", { key: 'c001e4f3afa3fadf49df9186ef38ac10ca3c1f70', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ebb6ca0885ea6f099617f2deebd1e55e53dd4f05', class: "description" }, hAsync("slot", { key: '7045fe19cba7c811db78636b57f05d2f9913f49e', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b6b52a078889f4a5e5856bc29580f1dd461175e0', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '76759966defe06d595e9aa5df3a580ebea1d7f81', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '62782d291c7e065b79c91a51ebd61afcef60c058', class: "description" }, hAsync("slot", { key: '70d29b36d481bfc5ec8a9435e2eadf0007aa95c3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '71818050156b31a39daf70e4cf8cb1a03f809458', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'cb7fb776375e7afaaa22ae90f8e6eb533e066e53', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20359,7 +20372,7 @@ class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'af052140e4b3d9e7b8b11b7a9f074b1a774500b8', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '0f7d916bdc94a13c5efbef392696197b511d6060', 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}` }, hAsync("use", { key: 'b333c06450a2467e13202edee9dd869a5f38cd66', href: `#${this.name}` }))));
+        return (hAsync(Host, { key: 'a5d7dbfd9cf1be24ba19e8a8902a5a7adb89cc24', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: 'b35bc42c038fd288022e13650556086d1dc3604d', 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}` }, hAsync("use", { key: '41833d3d27433422c859b513f28dc48a202d5919', href: `#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -20503,7 +20516,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '87a2f7fcf90b0fbc331d35cfc47b7b994b92de4b', role: "button", type: this.type, tabindex: "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 && hAsync("nv-loader", { key: '0b22f0bb31b62300da99367d7db8979964f7a9d3', size: this.size }), !this.loading && hAsync("nv-icon", { key: '878aaefbdae6da207cfc433c0d2a3110ef3d269f', name: this.name, size: this.size }), hAsync("slot", { key: 'b3c802b3498683cccc511941ead4254c6de22466' })));
+        return (hAsync(Host, { key: 'e67f2cfb172fc315ea4d12290000cd92ff683e88', role: "button", type: this.type, tabindex: "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 && hAsync("nv-loader", { key: '6477c82dcaa79147d03ae730d9ab2835959bcde6', size: this.size }), !this.loading && hAsync("nv-icon", { key: '8ffecf3db1d721ff88ba3c7b4e08543e48adedd5', name: this.name, size: this.size }), hAsync("slot", { key: 'c03cccb5aff47a9f758fc23b4e2226301d2d2fcc' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20551,7 +20564,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: 'e52bc6752a57515a595064e2ebc284c88aca52d3', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: '701552c6cf9126e60d81f844648ec1d29079fdd3', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -20571,8 +20584,8 @@ const nvMenuCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;w
 var NvMenuStyle0 = nvMenuCss;
 
 /**
- * @slot trigger - Button to toggle the menu popover.
- * @slot content - Use an &lt;ul&gt;&lt;/ul&gt; tag for the slot, and place &lt;nv-menuitem&gt; elements inside.
+ * @slot trigger - The button element that toggles the menu popover
+ * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements
  */
 class NvMenu {
     constructor(hostRef) {
@@ -20597,8 +20610,8 @@ class NvMenu {
          */
         this.disableCloseOnSelect = false;
         /**
-         * Decides where the menu shows up next to the button it’s linked to (above,
-         * below, to the sides). If there isn’t enough room, it will adjust its
+         * Decides where the menu shows up next to the button it's linked to (above,
+         * below, to the sides). If there isn't enough room, it will adjust its
          * position on the axis to fit on the screen, so users can always see it.
          */
         this.placement = 'bottom-end';
@@ -20783,7 +20796,7 @@ class NvMenu {
         });
     }
     render() {
-        return (hAsync(Host, { key: '1fb6ff6905cf3c0ed2f900e1ad733b5bde66e4ba' }, hAsync("slot", { key: '442dddad7f81672de063c90ab86f7271c412c6a2', name: "trigger" }), hAsync("nv-popover", { key: '02e1c322caf45ac2efba7313f66ddb6743c7691d', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.parsedItems.length > 0 ? (hAsync("ul", { slot: "content" }, this.renderMenuItems(this.parsedItems))) : (hAsync("slot", { name: "content" })))));
+        return (hAsync(Host, { key: '8334eee36cadee43d5d78d227841b43da86a46c6' }, hAsync("slot", { key: 'a4f260a9161dc239eabfc9c43178b1394721f37d', name: "trigger" }), hAsync("nv-popover", { key: '6f163bc5c02afba3af1e9bb43cf3b6bfec1e9374', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.parsedItems.length > 0 ? (hAsync("ul", { slot: "content" }, this.renderMenuItems(this.parsedItems))) : (hAsync("slot", { name: "content" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20858,7 +20871,7 @@ class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b8cac84bb424c083ed0be5943b385ba54187adb5', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '6032ba2e7048c89e6470adc95483db8d77352827', name: this.icon }), hAsync("slot", { key: '29164bf0c16df37d5d8c2fe9646220cf740a5795' }), this.label && hAsync("span", { key: 'ac544f68655d4d8423c475e68d9a9b5ae4151145', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'a2a4b1ab816c4feb2946df548d538a3052195954' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: 'e39a45bc31f9bafbfe5a1dfa20dbc9d7bf26b2e6', name: "chevron-right" })));
+        return (hAsync(Host, { key: 'd1d9969a8e812f22d2097dca29b8e46b54115709', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '4dd5c1c2fdd741cec06ca112788d8d00863b0ac7', name: this.icon }), hAsync("slot", { key: '6030b5a030b46281d54ca139e55163e8ede064fe' }), this.label && hAsync("span", { key: 'f253f5eb0fed0853a46ed08c211a42bace1784f6', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'b7c445db91af3ae3e2a845a839fee7c77a768045' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '54bcd0bc879136d542b5e2c4241949f623258ad0', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -23008,9 +23021,11 @@ class NvPopover {
                 return;
             if ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target))
                 return;
-            this.hide();
+            this.open = false;
         };
-        this.clickEvents = [['click', this.toggle]];
+        this.clickEvents = [
+            ['click', () => (this.open = !this.open)],
+        ];
         this.outsideClickEvents = [
             ['click', this.handleClickOutside],
             ['touchstart', this.handleClickOutside],
@@ -23020,28 +23035,28 @@ class NvPopover {
                 'focus',
                 () => {
                     clearTimeout(this.hideTimeout);
-                    this.showTimeout = setTimeout(() => this.show(), this.enterDelay);
+                    this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
                 },
             ],
             [
                 'blur',
                 () => {
                     clearTimeout(this.showTimeout);
-                    this.hideTimeout = setTimeout(() => this.hide(), 50);
+                    this.hideTimeout = setTimeout(() => (this.open = false), 50);
                 },
             ],
             [
                 'mouseenter',
                 () => {
                     clearTimeout(this.hideTimeout);
-                    this.showTimeout = setTimeout(() => this.show(), this.enterDelay);
+                    this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
                 },
             ],
             [
                 'mouseleave',
                 () => {
                     clearTimeout(this.showTimeout);
-                    this.hideTimeout = setTimeout(() => this.hide(), 100);
+                    this.hideTimeout = setTimeout(() => (this.open = false), 100);
                 },
             ],
         ];
@@ -23050,7 +23065,7 @@ class NvPopover {
                 'keydown',
                 (e) => {
                     if (e.key === 'Escape') {
-                        this.hide();
+                        this.open = false;
                     }
                 },
             ],
@@ -23160,7 +23175,7 @@ class NvPopover {
             return;
         // This popover should close when another one is opened.
         if (event.target !== this.el && event.detail === true)
-            this.hide();
+            this.open = false;
     }
     async handleOpenChange(open) {
         // Prevent multiple animations from running at the same time.
@@ -23241,7 +23256,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '71e205e04f915a2fa9e4657b65c41159306b8bbe' }, hAsync("slot", { key: '490d0bb186a1d535616ecde7a6e7aec3bbedacd1', name: "trigger" }), hAsync("div", { key: '8c4841e9eb86ff090cf82298f3d91578880f67ab', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'ca0cb19cd0313a94119232acffe7702f162aaad5', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: 'e391466de2b07c5beba80896a7c910b0fa4b426d', name: "content" }))));
+        return (hAsync(Host, { key: 'efab8d78e1163d23e197ca04786b9f99f248ce05' }, hAsync("slot", { key: 'b8197a385e5d9cda08d6b3e0232c052fb7238d01', name: "trigger" }), hAsync("div", { key: '480c3cc8352bc833216cd64c8bfcf75ba9c79130', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '8b1b10a15427ef05bc267460161e4a53be4cc3d1', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '8c9a8708a36fae6cac5e533b5c1a3128d7375195', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23286,7 +23301,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '81e601144158d09429560e6d936454485807d92d' }, hAsync("slot", { key: 'f58b212ba8c754db2f84bc48468db5a6ee817f59' })));
+        return (hAsync(Host, { key: '0b27560267e6f5186ca4237658ad35f3a436b70d' }, hAsync("slot", { key: 'b2805eb6abe9d02b57f030c91344ecf4927136d8' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -23321,7 +23336,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'cb020ed488cd43090467bbe122b83b0c714d8606', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: 'd06069ed1efd5e81b4a32dac07c37ce884841c06' })));
+        return (hAsync(Host, { key: '9869c0eaa423e363482bd4685dbd082dfba017f5', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: 'd4b597ec95f71c47edf99d58d22c95a5540e904c' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -23655,14 +23670,14 @@ class NvTable {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (hAsync(Host, { key: 'a08b8c3fbb73b6201ad09ade112f30bf386e9d57' }, hAsync("div", { key: '061f5b1e31292efce4d6c97f2377811b0f8c1551', class: "hidden" }, hAsync("slot", { key: 'd40cc5c47598873b865bd3175e0f6db00b034a0b' })), hAsync("slot", { key: 'e51a7bb121f10cdcf893a594cc27e46b89855403', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
+        return (hAsync(Host, { key: '89d230b38e5f853a9d8246b3634d25f3add88bb0' }, hAsync("div", { key: '130f44d0833635aec8eb1ff5db6f92f5342e39b4', class: "hidden" }, hAsync("slot", { key: 'e68523ead80fd187bfb0fc6710aaea42e1d9c4e7' })), hAsync("slot", { key: '087164f8a817d99091d54ed841b4faa5f01b215e', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (hAsync("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), hAsync("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (hAsync("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (hAsync("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), hAsync("slot", { key: '3cf2f0a8de9f52bf60dcd7a641e40e046874c164', name: "after" })));
+        })))))))), hAsync("slot", { key: '046b1b705c5885eb2685a0e8780e6eec2f1ca50e', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23718,7 +23733,7 @@ class NvTablecolumn {
     }; }
 }
 
-const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
 var NvToggleStyle0 = nvToggleCss;
 
 /**
@@ -23782,8 +23797,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '59aa4f6fba2a51afd7e2ed35396e1e906cf338e9', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '5ed63f6be69e49e93e21761e583122f3a5c73ea0', class: "input-container" }, hAsync("input", { key: 'dc48775994ef9873478191bdb7ecfb11090b0298', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: '4731c95eefb7a762f868b5105c613b635be330bf', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '80b0737dc38cbee593cb15f84362cbf2d5a4fbdd', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '8c886a43d3f7e30330f6f2c23f27fd8848bb845d', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '32036ee81dd3d286950d85f7b9ce4a3e06661ed3', class: "description" }, hAsync("slot", { key: '090417815292fa0b07bb21551b47630261f7f7dd', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '6e18c6145fccdf7926bcc64a2414e6b41d364487', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'fda6ce7b087d1acef0f2afb24edbdc2566ca6cbf', class: "input-container" }, hAsync("input", { key: '53569ce97f75b7a2ac0c94a702096d3f9215432a', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: '26f0a6f570b8ef4150d53a7733c832f1c5f4343d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '5ff30cca4abfd0c2f4283eab6c7ae678653748d3', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'c6cc3536fa741fb89ebb24dfe455957b66edd77b', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '0b1804f9e5407f15037fb6e5c80d7b8dafee5599', class: "description" }, hAsync("slot", { key: '8f1b272158ffebb03992ed8c3b115e52504ff8ce', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -23848,7 +23863,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'e11a19bbdd775cb54b054bd502c589d80feacb35' }, hAsync("slot", { key: '9fb404ae962570d3b1f5cdd42ed8673f86eeedae' }), hAsync("nv-popover", { key: 'd5114554c2e97909b25dfa7ec0d64a7d10d624ec', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '4d675b15e413054b7bd9fd71df6f3c236c175c47', slot: "content" }, this.message), hAsync("slot", { key: '2967e58a96ed6d8d4d0fecc195209c8b2f9d1353', name: "content" }))));
+        return (hAsync(Host, { key: '42d55bd749a31fc808d6685b75b5002b10575b63' }, hAsync("slot", { key: '7ccb801774290a4e47c9bf6e61994936f0cb793e' }), hAsync("nv-popover", { key: '6c67ddae0787dbc9e24d239e3b34218dfa997747', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '900d3a61fc7adb7aee3f9982d932c6e2f9889ab3', slot: "content" }, this.message), hAsync("slot", { key: '3f5e490d760e723271acef897cf4e0247ca7cd44', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }