@nova-design-system/nova-webcomponents 3.0.0-beta.31 → 3.0.0-beta.33

package/hydrate/index.mjs

@@ -124,7 +124,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'native';
-const BUILD = /* native */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* native */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 // Prevents the dev components from being bundled in production as a component
 if (Build.isDev) {
@@ -1439,6 +1439,10 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
     {
       maybePromise = safeCall(instance, "componentWillLoad");
     }
+  } else {
+    {
+      maybePromise = safeCall(instance, "componentWillUpdate");
+    }
   }
   {
     maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
@@ -2559,7 +2563,7 @@ function v4(options, buf, offset) {
   return unsafeStringify(rnds);
 }
 
-const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);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-fielddropdown nv-popover{width:100%}nv-fielddropdown div[data-scope=popover]{width:100%;padding:var(--list-custom-padding);background-color:var(--components-list-custom-background);border:1px solid var(--components-list-custom-border)}nv-fielddropdown ul[slot=content]{gap:var(--list-custom-gap-y);display:flex;flex-direction:column}nv-fielddropdown hr{border:none;height:1px;background-color:var(--components-list-custom-separator);margin:0}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;align-items:center;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fielddropdown .input-container.focus-within,nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .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;line-height:var(--form-description-line-height)}nv-fielddropdown .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;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}";
+const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);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-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{padding:var(--list-custom-padding);background-color:var(--components-list-custom-background);border:1px solid var(--components-list-custom-border);width:100%}nv-fielddropdown nv-popover [data-scope=popover] hr{color:var(--components-list-custom-separator)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-custom-gap-y);display:flex;flex-direction:column}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;align-items:center;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;padding-right:2rem;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fielddropdown .input-container.focus-within,nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .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;line-height:var(--form-description-line-height)}nv-fielddropdown .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;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddropdown hr{border:none;height:1px;background-color:var(--components-list-custom-separator);margin:0}.input-container.focus-within,.input-container:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}";
 var NvFielddropdownStyle0 = nvFielddropdownCss;
 
 /**
@@ -2746,28 +2750,39 @@ class NVFieldDropDown {
         this.isFilterable = newValue;
         this.filterable = newValue;
     }
-    watchValueHandler() {
-        // Handle value change and update the corresponding dropdown item if it exists
-        this.setInitialSelection();
+    watchValueHandler(newValue) {
+        if (newValue) {
+            this.updateSelectedItem(newValue);
+        }
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region METHODS
+    componentWillLoad() {
+        if (this.value) {
+            // If an initial value exists, set it as selected
+            this.updateSelectedItem(this.value);
+        }
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Check again after complete rendering
+        if (this.value) {
+            this.updateSelectedItem(this.value);
+        }
+    }
     /**
      * Subscribe to click outside event.
      */
     connectedCallback() {
         document.addEventListener('click', this.handleClickOutside.bind(this));
-        // Handle pre-selection during component initialization
+        // First, reset the filter to ensure all elements are visible
+        this.resetFilter();
+        // Then, handle the pre-selection
         this.setInitialSelection();
-        // Apply filtering if the dropdown is filterable and there is a value
-        if (this.filterable && this.value) {
-            this.filterText = this.value.toLowerCase();
-            this.filterItems(); // Update the visibility of items
-        }
-        else {
-            // Ensure all items are visible if no filtering is applied
-            this.resetFilter();
+        // Finally, apply the filter if needed
+        if (this.filterable && this.filterText) {
+            this.filterItems();
         }
     }
     /**
@@ -2782,16 +2797,13 @@ class NVFieldDropDown {
                 item.getAttribute('value') === this.value ||
                 ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === this.value;
         });
-        // Remove 'selected' from all items first to reset the state
         items.forEach(item => {
             item.removeAttribute('selected');
             item.classList.remove('selected');
         });
         if (selectedItem) {
-            // Add the `selected` attribute and `selected` class for visual styling
             selectedItem.setAttribute('selected', 'true');
             selectedItem.classList.add('selected');
-            // Update the value and inputElement value to reflect the pre-selected item
             this.value =
                 selectedItem.getAttribute('label') ||
                     selectedItem.getAttribute('value') ||
@@ -2801,6 +2813,9 @@ class NVFieldDropDown {
                 this.inputElement.value = this.value;
             }
         }
+        else {
+            console.warn('No matching item found for value:', this.value);
+        }
     }
     /**
      * Unsubscribe from click outside event.
@@ -2866,10 +2881,9 @@ class NVFieldDropDown {
     handleClickOutside(event) {
         if (this.el.contains(event.target) ||
             (this.inputElement && this.inputElement.contains(event.target))) {
-            // If the click is inside the component or on the input, do not close the popover
             return;
         }
-        this.popoverElement.hide(); // Close the popover if the click is outside the component
+        this.popoverElement.hide();
     }
     handleKeyDown(event) {
         if (!this.open) {
@@ -2925,9 +2939,6 @@ class NVFieldDropDown {
             if (i === index) {
                 item.classList.add('highlighted');
                 item.setAttribute('tabindex', '0');
-                if (!item.checkVisibility()) {
-                    console.log('Item not focused');
-                }
                 item.focus(); // Forcer le focus ici
                 item.scrollIntoView({ block: 'nearest' });
             }
@@ -2947,13 +2958,45 @@ class NVFieldDropDown {
             console.warn('No first item found to focus');
         }
     }
+    updateSelectedItem(value) {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        // Reset all items
+        items.forEach(item => {
+            item.removeAttribute('selected');
+            item.classList.remove('selected');
+        });
+        // Find the item matching the value
+        const matchingItem = items.find(item => {
+            var _a;
+            const itemLabel = item.getAttribute('label');
+            const itemValue = item.getAttribute('value');
+            const itemText = (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+            return itemLabel === value || itemValue === value || itemText === value;
+        });
+        if (matchingItem) {
+            // Mark the item as selected
+            matchingItem.setAttribute('selected', 'true');
+            matchingItem.classList.add('selected');
+            // Update the input
+            if (this.inputElement) {
+                this.inputElement.value = value;
+            }
+            // Emit the selection event
+            this.dropdownItemSelected.emit({
+                value: value,
+                label: matchingItem.getAttribute('label') || value,
+                selected: true,
+                disabled: matchingItem.hasAttribute('disabled'),
+            });
+        }
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'ee220f04cb94b18afa0504938ee269c0edb1d1b5' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '9cf2035bcef627718cb0e9cda9f10d1deb829201', htmlFor: this.inputId }, hAsync("slot", { key: '6fe8d6dadee22c489696fbd94067398f5b22f8a7', name: "label" }, this.label))), hAsync("nv-popover", { key: 'c96697a489ceb13a600f63e1496dcc2cedf6baa7', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '0a996e770694e7521e57007f5b3a9272ef9ad485', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '41b6e77ce228cd4aedbffbb440bf375c82e05c30', name: "before-input" }), hAsync("div", { key: 'ffdeba473c57672b13577a225c0b2cc436df2c12', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '14af93b626704024c44371934cc1b4b49b068ac7', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, type: "search", 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.handleInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, hAsync("span", null, this.value || this.placeholder))), hAsync("nv-iconbutton", { key: '961e3b20bb234ba3c24e8e5389154245ae35fdb9', class: "toggle-dropdown-icon", 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 })), hAsync("slot", { key: '37f6b2288683f0b2e16e553b66e5a534a0d372f6', name: "after-input" })), hAsync("slot", { key: 'd7c7ad38d9f486408858a68c1cba7e9c6ae8788f', name: "content" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '6a4d137ba434bb2d36bc74b6f4cb442274857716', class: "description" }, hAsync("slot", { key: 'd2e85ddebab03a8a752c0f7558b57f35d2e30b85', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'b05d210c0e0a43ce8bd96849f7556f1accd691fb', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '7d455d5027589ccad7cdccf5ce0e0cc25a7ac7bd', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '2ff0476929b58734a50c303ebb6ad308f0c41602' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '87756cac62747e76d851813426c4aa560b6a5a4e', htmlFor: this.inputId }, hAsync("slot", { key: 'ae2d7374b524274e86777639cd1ad5cbc5c57404', name: "label" }, this.label))), hAsync("nv-popover", { key: 'ed58d72aab9b23f25cd4ec8359ce7148a43fb22e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'ae3e65b9274c56f012e9798f549ee62063879688', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '1fc77f160aebd9e21c8a79406ec1e829bd3c9265', name: "before-input" }), hAsync("div", { key: '7502dc9df91a3b91bf1bb448e9f3cbee9f356f80', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '50acd86050d4357c8e7af3c8464ad34cb73382ad', name: "leading-input" }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, type: "search", 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.handleInput, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, hAsync("span", null, this.value || this.placeholder))), hAsync("nv-iconbutton", { key: '2f8c2773754656835583484e2fa7acc0fabcffb6', class: "toggle-dropdown-icon", 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 })), hAsync("slot", { key: '26d4de108aa80b931f03201adc7b2470dc9ed526', name: "after-input" })), hAsync("slot", { key: 'b9a39773f100d2579b2a9e568c19fabbbabbcefe', name: "content" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '220b815bc502ff4f18fe40471139efc808f6a31b', class: "description" }, hAsync("slot", { key: '6d0bfc07e3c5c5329d38e447f0c3a1974663e15b', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '0cc511a914c00de65ee9f0f2033e292b9123620c', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'f442db41fdde383abc0873bafbaabba8be1387b3', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -3038,6 +3081,11 @@ var ButtonType;
     ButtonType["Reset"] = "reset";
     ButtonType["Button"] = "button";
 })(ButtonType || (ButtonType = {}));
+var IconButtonShape;
+(function (IconButtonShape) {
+    IconButtonShape["Square"] = "square";
+    IconButtonShape["Rounded"] = "rounded";
+})(IconButtonShape || (IconButtonShape = {}));
 var LoaderColors;
 (function (LoaderColors) {
     LoaderColors["High"] = "brand";
@@ -5301,7 +5349,7 @@ class NvAlert {
     //#region RENDER
     render() {
         var _a;
-        return (hAsync(Host, { key: '6df6a1c8f72ca1291f3ba03242225fb63b43e6dd', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, hAsync("nv-icon", { key: '51b6e7d130b4c81e1de48c511dfe2edc52de5bfb', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), hAsync("div", { key: 'dac06159b49e2a6caf48245a8131dcd6d530c346', class: "content" }, this.heading && hAsync("p", { key: '8fb6805d964174a0c5808e49152f4c047cba1f82', class: "heading" }, this.heading), this.message && hAsync("p", { key: 'ff5a70d54c760651e3cfa7dfff40095d9599e448', class: "message" }, this.message), hAsync("slot", { key: '546aff25cadda8a402e2b45b2f4f039a7e3a7ecc' })), this.dismissible && (hAsync("button", { key: 'a43b47df76ede8cf646b9c8430532848b73008f4', class: "close", type: "button", onClick: this.handleDismiss }, hAsync("nv-icon", { key: 'cef62db2b2234101c49a44c80ebfa9224220ec0b', name: "x", size: "sm" })))));
+        return (hAsync(Host, { key: 'e14c9a07c3127a8ac3b1881e055526b82a93ff83', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, hAsync("nv-icon", { key: 'c4aaf00e4b18891dd6053f1529f7a6267386c647', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), hAsync("div", { key: '9df1b181179cd21361bae2ae347a02dbe07cee63', class: "content" }, this.heading && hAsync("p", { key: '53a21fe4139260bd9aca34cefbb194024a3a1afb', class: "heading" }, this.heading), this.message && hAsync("p", { key: 'eb58482e492f4aff15ccb300f3e89c70544c66d9', class: "message" }, this.message), hAsync("slot", { key: '2762850b8d37f8c53447321a80f2d12d81c8b6f6' })), this.dismissible && (hAsync("button", { key: '8827d5cbffe2f3757111f09806672514c10f7942', class: "close", type: "button", onClick: this.handleDismiss }, hAsync("nv-icon", { key: '398ee6b8fc57eb994b30d7194ea69cd251ae5076', name: "x", size: "sm" })))));
     }
     get ref() { return getElement(this); }
     static get watchers() { return {
@@ -5327,7 +5375,7 @@ class NvAlert {
     }; }
 }
 
-const nvAvatarCss = "nv-icon{display:inline-block;width:fit-content;height:fit-content;color:inherit}nv-icon>.nv-icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-icon>.nv-icon-sm{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-icon>.nv-icon-md{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-icon>.nv-icon-lg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-icon>.nv-icon-xl{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
+const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
 var NvAvatarStyle0 = nvAvatarCss;
 
 /**
@@ -5384,7 +5432,7 @@ class NvAvatar {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '8cd1fe9e804aa11e821c0983c28eefdbe2275235', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (hAsync("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (hAsync("slot", { name: "icon" }, hAsync("nv-icon", { name: "user" })))));
+        return (hAsync(Host, { key: '4543ac26e2c1d6d91de2c4671657e584486daefe', class: clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (hAsync("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (hAsync("slot", { name: "icon" }, hAsync("nv-icon", { name: "user" })))));
     }
     static get style() { return NvAvatarStyle0; }
     static get cmpMeta() { return {
@@ -5410,7 +5458,7 @@ class NvAvatar {
     }; }
 }
 
-const nvBadgeCss = "nv-icon{display:inline-block;width:fit-content;height:fit-content;color:inherit}nv-icon>.nv-icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-icon>.nv-icon-sm{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-icon>.nv-icon-md{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-icon>.nv-icon-lg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-icon>.nv-icon-xl{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}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);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);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);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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);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);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);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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)}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:var(--focus-outline-stroke) 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;
 
 /**
@@ -5531,11 +5579,11 @@ class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '18d3a28777aa74117ccc68aa0c889ea716b90d56', class: clsx(`badge-${this.color}`, {
+        return (hAsync(Host, { key: 'f0b9bf1d1a32c72f9d8176300d06875f0258f068', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, hAsync("slot", { key: '87ac2dd4ae3ba521d1a6b15394d79c85c1899102', name: "leading-icon" }, this.leadIcon && (hAsync("nv-icon", { key: '22fbc091fe0c861e9a6ce12e5ba1b8d0e83ca7da', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && hAsync("span", { key: '040559657d6a337b2cd3ce265d2e99cdd0245324' }, this.label), this.dismissible && (hAsync("button", { key: 'd0f992bdf748be5bf63d7a3e9864f96cad4dfae7', onClick: this.handleClose, class: "close", type: "button" }, hAsync("nv-icon", { key: '60915e33efb355a5e2820507fe2365ba4e602c26', name: "x", size: "sm" })))));
+            }) }, hAsync("slot", { key: '967f6cceadd13f1a7758696b0ddb9b77d256caac', name: "leading-icon" }, this.leadIcon && (hAsync("nv-icon", { key: '683ccf19e6281ab8fded9e217f61a67d835a7b37', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && hAsync("span", { key: 'e01b6071da8bdc73d7708e91c67afe9bc2819095' }, this.label), this.dismissible && (hAsync("button", { key: 'f8040e70acd910c63fa377837fc13316a321366c', onClick: this.handleClose, class: "close", type: "button" }, hAsync("nv-icon", { key: '405cee0cdcdab3a470086ccbd3aa5b46c5e0e2ea', name: "x", size: "sm" })))));
     }
     get ref() { return getElement(this); }
     static get watchers() { return {
@@ -5586,7 +5634,6 @@ class NvBaseComponent {
     }
     componentDidLoad() {
         this.mutationObserver = new MutationObserver(mutations => {
-            console.log(mutations);
             mutations.forEach(mutation => {
                 if (mutation.type === 'attributes') {
                     const target = mutation.target;
@@ -5630,7 +5677,7 @@ class NvBaseComponent {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b337eb1cfbe80ce8cefdb00a9d0d1fbb153869ba', style: { display: 'block' } }, hAsync("slot", { key: '575c8605510de2b97bf202809492dd5e2ba4a285' })));
+        return (hAsync(Host, { key: '81da4e7fd653192079ab22a607d1f525b504f3e4', style: { display: 'block' } }, hAsync("slot", { key: 'e766e4b073b16d367c473b02c94448cf835a4921' })));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -5643,7 +5690,83 @@ class NvBaseComponent {
     }; }
 }
 
-const nvButtonCss = "nv-icon{display:inline-block;width:fit-content;height:fit-content;color:inherit}nv-icon>.nv-icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-icon>.nv-icon-sm{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-icon>.nv-icon-md{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-icon>.nv-icon-lg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-icon>.nv-icon-xl{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}nv-button{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
+const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:inherit;gap:var(--spacing-1)}nv-breadcrumb>a{display:inline-flex;align-self:center;color:inherit}nv-breadcrumb[current]:not([current=false]){color:var(--color-interaction-link-high-text)}";
+var NvBreadcrumbStyle0 = nvBreadcrumbCss;
+
+/**
+ * @slot default - Pass an icon, a link, or text to render the breadcrumb content.
+ * @slot separator - The separator between breadcrumb items.
+ */
+class NvBreadcrumb {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs
+         * in a dropdown. Use default for a single item. When passing multiple items
+         * as collapsed, make sure to wrap you links in list tags
+         */
+        this.type = 'default';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+    }
+    componentWillLoad() {
+        if (this.type === 'default' && this.tooltip) {
+            this.popoverTrigger = Array.from(this.el.children).find(child => child.getAttribute('slot') === null);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: '44aca9cb5e3a794ca8bae895b96c0c8bba146fa9', role: "listitem", "aria-current": this.current ? 'location' : undefined }, this.type === 'collapsed' ? (hAsync("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (hAsync("slot", null)), this.tooltip && (hAsync("nv-tooltip", { key: '4a3ab4872fe69a361be4699a54ecb17175fe7a77', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (hAsync("nv-popover", { key: '286cc8222a28f70c72e4d4496ba105c82721a2fe', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, hAsync("ul", { key: 'c3bc55b938e5a3ec5f90f5f50aefa9fcb75463f8', slot: "content" }, hAsync("slot", { key: '2533b6026d20fc818caa3146580b1ffd4d0aa98c' })))), hAsync("slot", { key: '4f3c160421ca81596f7c131592b797b544f43f98', name: "separator" }, hAsync("nv-icon", { key: 'e7bdab55acbba96b7149e929affd6b07acb13afb', name: 'chevron-right', "data-scope": "separator" }))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return NvBreadcrumbStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-breadcrumb",
+        "$members$": {
+            "type": [513],
+            "tooltip": [513],
+            "current": [516]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["type", "type"], ["tooltip", "tooltip"], ["current", "current"]]
+    }; }
+}
+
+const nvBreadcrumbsCss = "nv-breadcrumbs{display:block}nv-breadcrumbs>ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}";
+var NvBreadcrumbsStyle0 = nvBreadcrumbsCss;
+
+/**
+ * @slot default - Child content of the component.
+ */
+class NvBreadcrumbs {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    //#region RENDER
+    render() {
+        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 {
+        "$flags$": 4,
+        "$tagName$": "nv-breadcrumbs",
+        "$members$": undefined,
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const nvButtonCss = "nv-button{text-decoration:none;display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:\"TT Norms Pro\", sans-serif;transition:background-color 150ms ease-out;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[emphasis=high]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid unset;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid unset;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[emphasis=medium]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[emphasis=low]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[emphasis=lower]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
 var NvButtonStyle0 = nvButtonCss;
 
 /**
@@ -5750,7 +5873,7 @@ class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f3349cdf1da05ae9a11a1b213db9f4cf062f6d9d', role: "button", tabindex: "0", onClick: this.handleClick }, this.loading && (hAsync("nv-loader", { key: 'e776853069e4a34e72a1f07065cb969a08998f19', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: '4533e74ed576e23a75ca68a58711013c4c3482cd', name: "leading-icon" }), hAsync("slot", { key: 'ecd5b1c5e970e47144ee522d17891af2a9c8eef7' }), hAsync("slot", { key: '275517fb22c5cbfda415d0c5b5e45f44e1d99b21', name: "trailing-icon" })));
+        return (hAsync(Host, { key: '09d1a764e1dd0a8175e5b1ec0e5fececac19ad31', role: "button", tabindex: "0", onClick: this.handleClick }, this.loading && (hAsync("nv-loader", { key: '796432d620655f263be114909f9777b2d408a75c', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: '4309b3ec76fd089bb57af356c08212498ada787b', name: "leading-icon" }), hAsync("slot", { key: '2531e9e7c50cf549eea56595c16bbcf0431d346e' }), hAsync("slot", { key: 'b1884a687df70ead0e5ff5ab905eb6a3265d7f59', name: "trailing-icon" })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5805,7 +5928,7 @@ class NvCol {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'e0caccedd19c02c1854eb48f89302405e2cb0f46', class: clsx(this.getColSize()) }, hAsync("slot", { key: 'a8d672a55a70d6ee551e9ac9e7366455f76aa1e5' })));
+        return (hAsync(Host, { key: 'b3ef4b6e10022cdb97e2ea6238ba99b5a84c5c82', class: clsx(this.getColSize()) }, hAsync("slot", { key: 'a77821b6384d2abc78233bfa966795b99db785ff' })));
     }
     static get style() { return NvColStyle0; }
     static get cmpMeta() { return {
@@ -8869,7 +8992,7 @@ class NvDatagrid {
             data: [],
             getCoreRowModel: getCoreRowModel(),
             debugAll: true,
-            onStateChange: state => console.log('Table state changed:', state),
+            onStateChange: state => console.log('Table state changed:', state), // eslint-disable-line nova/no-console
             renderFallbackValue: 'No rows to display',
             state: {
                 sorting: [], // Default: no active sorting
@@ -9042,7 +9165,7 @@ class NvDatagrid {
             (this.parsedData.length === 0 && !this.hasSlotBody)
             ? []
             : (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
-        return (hAsync(Host, { key: '7f3244baba5487f57ba32b6f5e68cbb5794efce9' }, hAsync("div", { key: '35cbeed33a37393ee16dbd06a43fd75e8affb0d6', class: "hidden" }, hAsync("slot", { key: '03458f585639fb906e74c3124f74c38fb2d9d96f' }), hAsync("slot", { key: 'e4862ff4ba814bd34c1d39081be83d11e3884b4a', name: "head" }), hAsync("slot", { key: 'd0d77e8d159590531760052d842b4e461c6e0652', name: "body" })), hAsync("slot", { key: '57150feaf6ac865d838e31edeae0af6d92a9dedb', name: "before" }), this.parsedColumns.length === 0 &&
+        return (hAsync(Host, { key: '4ac86760843a2877a240757998a368867ece89da' }, hAsync("div", { key: '608eab614751fd7d889859f4b4ba7a602c31e464', class: "hidden" }, hAsync("slot", { key: 'e97d3a0b6ad7a338eda2e03e1f9ab43825bd3e73' }), hAsync("slot", { key: 'f277710a088202b4afdfcaeda0b42c1632e6cc3d', name: "head" }), hAsync("slot", { key: 'c2bf75d94b72a343995e777c62fe150aa330c586', name: "body" })), hAsync("slot", { key: '0bdf3ae59fb4674d30ff8c36efa150c226f59149', name: "before" }), this.parsedColumns.length === 0 &&
             this.parsedData.length === 0 &&
             !this.hasSlotHead &&
             !this.hasSlotBody ? (hAsync("p", null, this.noColumnsNoDataMessage)) : (hAsync("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", null, this.parsedColumns.length > 0 && headerGroups
@@ -9057,7 +9180,7 @@ class NvDatagrid {
                 return `<td key="${cell.id}" data-row-id="${rowId}">${cellValue}</td>`;
             }).join('');
             return hAsync("tr", { key: rowId, innerHTML: cells });
-        }))))), hAsync("slot", { key: '35b4438cfaa83c045d49da21aeb4dc13356242ad', name: "after" })));
+        }))))), hAsync("slot", { key: '0511cd2b445c149093b09a3583ca33cfc22650f2', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -9104,7 +9227,7 @@ class NvDatagridbody {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c24bf0e6d18d00b39b6e0382b0268ee24e6e7567' }, hAsync("tbody", { key: '1fae4b6126134317bd2dc7d4819ed861e8915761' }, hAsync("slot", { key: 'a6a537e6ed6c8b831da5294c1bce7010038b6291' }))));
+        return (hAsync(Host, { key: 'fdb910bb7b6388d4d0f8d61a18822e8334534a18' }, hAsync("tbody", { key: 'f19bd351d639a4d9a94d27647e977d14d6cacf7e' }, hAsync("slot", { key: '376ae58f100a27adefaec863497479d814af8124' }))));
     }
     static get style() { return NvDatagridbodyStyle0; }
     static get cmpMeta() { return {
@@ -9131,7 +9254,7 @@ class NvDatagridcolumn {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '4607ea5be4f54aec289b09e40f980aaf33c304c7' }, hAsync("th", { key: '5a24f302d8b01c8ed44fb3c015d9701967d2833f' }, hAsync("slot", { key: '272e390027621eb09b17baa1529fbdaba40eb74a' }))));
+        return (hAsync(Host, { key: '2982f199f488077a91812c214b0e881a0e32e1ec' }, hAsync("th", { key: 'cc46a9eb1aa232a8068308d7e7175aed89f007c1' }, hAsync("slot", { key: 'bd1f13adfd55b1c4ae8dab30d7aea33c9079f3e0' }))));
     }
     static get style() { return NvDatagridcolumnStyle0; }
     static get cmpMeta() { return {
@@ -9161,7 +9284,7 @@ class NvDatagriddatacell {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'bf3caf31ee31fdba6254c1907883474a84610dda' }, hAsync("td", { key: '709febb6ab666afd3841c7d0086f889309f31fbd' }, hAsync("slot", { key: 'c309eda6f57527a3ca1bba68983521121944a156' }))));
+        return (hAsync(Host, { key: 'dbdf7fa0353e84e702ddd082fe466f89492f48e1' }, hAsync("td", { key: '3d3d8ae038cb5a6bf3404fe7178003529790fc10' }, hAsync("slot", { key: 'b8585f6517d053f90be59fe7e492771114911496' }))));
     }
     static get style() { return NvDatagriddatacellStyle0; }
     static get cmpMeta() { return {
@@ -9189,7 +9312,7 @@ class NvDatagridhead {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '272ab6e598f1edfc53fd99372acd64c3834c0fd0' }, hAsync("thead", { key: '66d5e24d5d0757be7b0190bc4c156e476e0f748e' }, hAsync("slot", { key: 'b41ac2580003d1df53595d66837ed51d597bee8c' }))));
+        return (hAsync(Host, { key: 'e56a8e78a9034ce2cd2eda97ee074662b533ace9' }, hAsync("thead", { key: '0a32742beaf23f214bbf3f03f9de5bab748573cd' }, hAsync("slot", { key: '0beabbfbadee2af0caa07f31fb681d24fe6da240' }))));
     }
     static get style() { return NvDatagridheadStyle0; }
     static get cmpMeta() { return {
@@ -9215,7 +9338,7 @@ class NvDatagridrow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f136ccd96f48d5743cc1c08c26029421af4ab2c0' }, hAsync("tr", { key: '21787f1823a778ab6433cbcc5bff0596e2257485' }, hAsync("slot", { key: 'edfc2d36e247097eaddfd694bf9de44f001a8219' }))));
+        return (hAsync(Host, { key: '99a83706b411732ff2d2443794ab61bdc0a95c7e' }, hAsync("tr", { key: 'd64ab8c5d39236cdbe4950c7d891f3aca9c696dc' }, hAsync("slot", { key: '696117c1e59fe60e0d3de5928658ba479cfeb472' }))));
     }
     static get style() { return NvDatagridrowStyle0; }
     static get cmpMeta() { return {
@@ -9334,13 +9457,13 @@ class NvFieldcheckbox {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c87c2b3e3a4b81c9d6eb6c3784919a5fcb78e38b', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: '8e43a91fec01b02dfa6b27408e1c1fd252558014', class: "input-container" }, hAsync("input", { key: 'bffbfc1ac879fb70e1c7b436c3a9845150b78bca', 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 && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
+        return (hAsync(Host, { key: 'dee6fd99a2e97591189c8a6bdce3c8909b4ceb97', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("div", { key: 'dd6ab7f4cddd11c89cc15249290fe43d83a669ab', class: "input-container" }, hAsync("input", { key: '1132052e8f369f16d3a0ce4698b72644975886f8', 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 && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), hAsync("span", { key: 'b100feee33694f72c59496f09f5ecbbf9358d7c6', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: 'a5f5159aff04c111e4b944123686f00f817ecb1e', name: "checked-icon" }, hAsync("svg", { key: '26a750b600fa0857ec9adf17f9d4dcd9ce0e2aad', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: 'ddf0155de05297d7ec966bdaf9633ceb1ee413d7', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: 'e64681ce70326348083402f7996eaf6134aaca3e', name: "indeterminate-icon" }, hAsync("svg", { key: '9cfcd8118bb6f208278614711fd726fe29c9070a', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '8d88be8c4bd195982bf0024e4f67f30601ddfb80', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: '061d18d589ef2a8efd0fb73f70d5c0a6013c497d', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '129013f8e60d1aaae82b97321c4cc26ab6229bbb', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'e134c0683e4c4c410c78d45f3537d8ed1491c67e', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '78166f4fb7d1e5dc20f13ce5b4ca567a90862493', class: "description" }, hAsync("slot", { key: '6bced15913e4a22371520818343de5598c5a5e6d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '88f4ceaef2412ce5f4bb08b19485fc27d9842792', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '96a581ce5d0e66416d24bf52219a87d3c39457d8', name: "error-description" }, this.errorDescription))))));
+            } }), hAsync("span", { key: 'ac87b7d83e5731da6ce8f9990a1d55bd247cb750', class: "icon" }, this.checked && !this.indeterminate && (hAsync("slot", { key: '911e69045129dc8755fea438570858f338a18ad3', name: "checked-icon" }, hAsync("svg", { key: 'de2e547ac9ab00c52ee9c924fdb4e24cf0321158', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '10dc26b32951b18a6bd29482349894bf1ca87bd8', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (hAsync("slot", { key: '7e957be646aa6a96f94e0cf70b5ef88b8037e07e', name: "indeterminate-icon" }, hAsync("svg", { key: 'd132aabc77f0dcf5c67377a60004b72307cf61ba', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, hAsync("path", { key: '353c950a9d8d14c32e276e393c9314374d10337f', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hAsync("div", { key: 'a14fc39e16a9dcee74e722a361fcc8df63fad5d6', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '13a9fee6f1c4aea8735eca27f36944d6c26cf7f2', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'dbbce25b8f65d2b12d10e419f94ae56ef2d0c355', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3647cdaa6a4ec2cacab7b2c1fe731e3454746648', class: "description" }, hAsync("slot", { key: '19dff40045f22c6403029731a0a628455b831c5c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'dd78ae62d1a1cd6c2a9b41d32740321cb1f36f2a', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '1e4d1c10387aaea37c87111c43c84cd204ca1619', name: "error-description" }, this.errorDescription))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -9431,7 +9554,7 @@ class NvFielddropdownitem {
     //#region RENDER
     render() {
         const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);
-        return (hAsync(Host, { key: '0b0070ad824841f49bf5c24423131c46c41ef4ef', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (hAsync("slot", null)) : (hAsync("div", { class: "dropdown-item-text-wrapper" }, hAsync("span", { "data-scope": "text" }, this.label), this.selected && (hAsync("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
+        return (hAsync(Host, { key: 'e482a762c7b011389f1f1312b14f1686e38528aa', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (hAsync("slot", null)) : (hAsync("div", { class: "dropdown-item-text-wrapper" }, hAsync("span", { "data-scope": "text" }, this.label), this.selected && (hAsync("nv-icon", { name: "check", "aria-hidden": "true", class: "selection-icon" }))))));
     }
     get el() { return getElement(this); }
     static get style() { return NvFielddropdownitemStyle0; }
@@ -9555,9 +9678,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5d63f2dca1678d7ea971b52a40f55481eae421d6' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '145560063839b6fe34e3c8431003d5f5fb5eb65d', htmlFor: this.inputId }, hAsync("slot", { key: 'd36ca2394cf3ce62c7d5f6177480a41979d7d1cb', name: "label" }, this.label))), hAsync("div", { key: 'c53243b5f2019033a24b22120e1bd5209c415075', class: "input-wrapper" }, hAsync("slot", { key: 'e32e0fdd6b0e27cbb719b3d962fb6417eb2f3e1b', name: "before-input" }), hAsync("div", { key: 'b9de75924bde8a2cd1108e34173d0f867f0bdcea', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '4d0bbdce8201370f1f62d06eabb5a2bd3b248c1f', name: "leading-input" }), hAsync("input", { key: '0c85ade03f9ca7e6c3aca788b3a107d0807d7b70', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", 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: '5da0668775a6841bf01c662009ec7bf9048b1622', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'be8e6e9e3c5428885aed216f49f1510b0fb29201', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '84ddbc5eb7e35ea216e0c9650dcbcb865e3bd726', class: "stepper-spacer" }), hAsync("div", { key: '9ba5a8087ef4fa46614d1c7492c80781af5c4a40', class: "stepper" }, hAsync("nv-icon", { key: 'a3b5adffd9b7a5a266711f02ed2862e84f2a5839', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: '1a37933cfeab32a057807173a3b411e23a3c93b0', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: '99c9105e0f46dfb5e56fa3949dd99264f61e7be5', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3b9df6f1e03117123b376c637840e4219ee4e45d', class: "description" }, hAsync("slot", { key: 'deb7681e9d6fe583e418f6d25248b667c4b2fcf0', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '6848cf6e73924df0552ed71078d19cc1423b6d72', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'cf5526311207e2fca942ba84a5480cae6917060d', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '440aa92437d7cbd00e09ad8f7aab663ad09c8406' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e892aef7b1534c6d73181d2d25fe7f17945524ac', htmlFor: this.inputId }, hAsync("slot", { key: '77489c52e374149a75effa7d3f4ab97c3109a13c', name: "label" }, this.label))), hAsync("div", { key: 'a1d23b332303ac468771b2b7dd2a31d21d9a3487', class: "input-wrapper" }, hAsync("slot", { key: '76f9993d1168a004b1de82b1e19b99062e7b6386', name: "before-input" }), hAsync("div", { key: 'a51ec42108436d853c2e74aeb64088dc071074f7', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '9084cef7de60e84db9dc7042b64e6c64a4a8f5d7', name: "leading-input" }), hAsync("input", { key: '395d2d7a2b8157495735b47cac47fd37e7c24c7e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", 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: 'e015cebd60a0bda842dd8aff05dbce27586e861c', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '42a0ea62a160f92150d949789694d1d6e992c39d', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '9df0a8c66b6086dfcd0e1c48e21d4d1866ed4563', class: "stepper-spacer" }), hAsync("div", { key: 'a4d16b2f50878ecdb5a322b6707fce5e908e88a0', class: "stepper" }, hAsync("nv-icon", { key: 'edf55fafe8d8f58aab7b5083d630905e78783c2e', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: '04d7e7b4fdc80d444ab64660f71c998bbce0f73a', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: '9893c52a46ad08a1ccb301411141bd723af33b21', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'b21b984e9695fab93a198ef58a3bd394bfc3aaa3', class: "description" }, hAsync("slot", { key: '1750efcd886f70078848f608e0be326324ea6928', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '14cde2f86fd23c98fafb2cd4645e7af64ce6c011', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '96e1a6084ec5467cf35e1eb3e86fa6b757f2574c', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -9699,9 +9822,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '40f6d172ebe46636a4240e010cc1dd9eb9e90e79' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'dc7b47c5796cfc862e1dafbe6720fe725662dd2c', htmlFor: this.inputId }, hAsync("slot", { key: 'a5696e12f593408bb20b92e49c0c5a6b21fef9b1', name: "label" }, this.label))), hAsync("div", { key: 'a1856e68415b5685982e936588791d36c9188d29', class: "input-wrapper" }, hAsync("slot", { key: 'ee701f5efbc0f7dcdbfd8d8494eb660ed9081f80', name: "before-input" }), hAsync("div", { key: '3a2b900d7fadac36538d936cc6853fe855713f26', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'b59c93d7457f00ff7b7cb4fcd7caca927a197dc4', name: "leading-input" }), hAsync("input", { key: '67755bdf835476b8511083ba6e35ed5eca8868e5', id: this.inputId, ref: e => (this.inputElement = e), 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.hidePasswordIcon && (hAsync("nv-iconbutton", { key: 'd9ffdbb9a4bd76d30c6adbb5ada4a989c6bdc092', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (hAsync("nv-icon", { key: '40b2376b0cf815998eede9c8917f1126cda51d28', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: '6ae6f802256ac343a232bb24f7b7ec7e21ee5dd0', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e08e5965bebe38262e5efd30f0ab3d3a905083ff', class: "description" }, hAsync("slot", { key: '8554c3620920efc3dd108b5e4f0e79dddc55c845', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cf40170d0e1c8de40601b1ef2d3a8260a07cf7e9', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'e3b0ff01a8ffd569d2eb2c2e3a188cb6e53f0f6f', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '77ade2d0b5b4282b16925957709433d047a730c7' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '158f0347fa53cebea4b89ceee56c8d92c801861f', htmlFor: this.inputId }, hAsync("slot", { key: '6ad0d4a2b7d0e6c32249f8ecfc221523999a7e86', name: "label" }, this.label))), hAsync("div", { key: '7cab4de8be04d0cbdbaee4b3ea64fcb6d9043ca5', class: "input-wrapper" }, hAsync("slot", { key: '808e2c1308b7e095f5207cd9a9198c4667bf2310', name: "before-input" }), hAsync("div", { key: '23f6b0833be73faef6d46dcf0c007c1c16c59681', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'f53ff33bc75dd2417cac55a39e1f24875375c564', name: "leading-input" }), hAsync("input", { key: '70e7e28f957224c7613a1da4b2156afeba706d14', id: this.inputId, ref: e => (this.inputElement = e), 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.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '96742eeecc9de1bf4ae753fc8c64c2e436e5af86', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (hAsync("nv-icon", { key: '71666d2e39bc4fe5057ec014cc788f3b734c0e69', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: '7d232c975753c74ce8419b6258dd63f7ca7ab811', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f9330dd27bce24c81d2fb58c0da7a8de079deb87', class: "description" }, hAsync("slot", { key: '61b9f61075435d7854603aa9e4700a755e0eeb4f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'f4e9183622a9451baa054eea9eb7113b38aa72c2', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '234af9d31bc011493f700f34a707305a8fb421d4', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -9821,9 +9944,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5c03f0c1423eb932aa9d2022e9d6a30bdbbb08ca', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '3ffb0990423348725ded997c26b12b41f10a8f0d', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: 'f862a9040abe14402fa352006c1cdedaba81a1af', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '07269171f02fc8a9621d958b0997728162fda439', htmlFor: this.inputId }, hAsync("slot", { key: '5e66a1ac747ed1462e948c35b96cbca4e4c037b3', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'cfa36a9cd3958511abf407027ec9432addd7cc1a', class: "description" }, hAsync("slot", { key: '1e86daa3580d6f99091950acb1fda3eeeb742ad5', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c1c1e7ecae6edc43b5a7793c180c0dd28fc09a67', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '51f217f3465720fd73371dcd420492b2cdf00802', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: 'c180e5204343412df6b2539cd46d7bd53d2d7f19', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '778a3ddc598a81df45f6eecda4660f95af48795a', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: '82e3e9ed3cdcd5918f824e5956e720ba04ec3160', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'b906d712188ef0ba06c177021b81b9b8132e2d58', htmlFor: this.inputId }, hAsync("slot", { key: '2c81a91a98d2d4739d6b912a0018826830b17c7f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '1caa426f06d0d5fcb9fe59e58be7000c854fceb9', class: "description" }, hAsync("slot", { key: 'ba454a12b8f535db62945a145c665f189624dc61', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'bf7a31b55f2716cb6436b595d0d96a1974c9c313', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '9a3b54c1e06d7e42eee9c4ca8e213270b66306b6', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -9883,7 +10006,7 @@ class NvFieldselect {
          * to ensure unique identification, facilitating proper label association and
          * accessibility.
          */
-        this.selectId = v4();
+        this.inputId = v4();
         /**
          * The disabled prop lets you turn off the select field so that users can’t
          * choose something. When disabled, the field is grayed out and won’t respond to
@@ -10166,13 +10289,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: 'e1333260c8fa6eebf9078f7497d2d0b30f555068' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '42d18737d174df03ac92c2cd178e372fed4bde1a', htmlFor: this.selectId }, hAsync("slot", { key: '675f7d4d5089bebb8104d848f1953445c79b584f', name: "label" }, this.label))), hAsync("div", { key: '59f13a05173ee15cffa6afca296da0333568cea4', class: "select-wrapper" }, hAsync("slot", { key: '1c2fe2ec6e84b95a47dc4c2668afd5d0ea899aee', name: "before-input" }), hAsync("div", { key: 'f6bd0c186ac6fa781e52329fc8a4622b740066f2', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'fbf25811a89197b11a4d4ea6dd1020b44fd14f73', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'c05413ddedb713944ad7f128a866d761e38080c6', id: this.selectId + '-readonly', type: "text", value: this.computedDisplayValue, readOnly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
-                ? `${this.selectId}-error`
-                : `${this.selectId}-description` })), hAsync("select", { key: '6bd95875e397c69c0297fe0c3bc9703c7872f477', id: this.selectId, ref: el => (this.selectElement = el), name: this.name, 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.selectId}-error`
-                : `${this.selectId}-description` }, hAsync("slot", { key: '22798124b2b743ee1b8ffc22f4e8fffc6704be66' })), this.internalReadonly && (hAsync("nv-icon", { key: '6fb4193bf131fce928d0e5d0346eb7fe62fcf77e', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: '4a84c2b8eece45c6247c7c58f74696fbc5b8ff4c', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '84af6db55127c516538f0df4d19f09f4570800f4', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '11dd18fc96e0360ac62b80d3d295895051a914d1', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '142d57ab7ba7aaef8ae0929b94716d37dd151e1c', class: "description", id: `${this.selectId}-description` }, hAsync("slot", { key: '0ce2c8c5bfa0966b1017cfea79461df6630773b4', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a06402c222f5f377ef314c66317c98df4b72e4b0', class: "error-description", id: `${this.selectId}-error` }, hAsync("slot", { key: '0d9e63fd9b8fa53a4ea037e5cb720a42206ee49d', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'd9334ee7b0373a6d7c48b144107fad9420dfb8b0' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'fd69171f1609c8aa450d81f81149da6a42ab15f3', htmlFor: this.inputId }, hAsync("slot", { key: '26bb813a2919a62fb71c23a0564704ea9bb2b118', name: "label" }, this.label))), hAsync("div", { key: '14ce1ff79a90c1bcbc3f757905347dd96bbb9708', class: "select-wrapper" }, hAsync("slot", { key: '99eecebeaa197dc27306471ad8d813e16b8597b5', name: "before-input" }), hAsync("div", { key: 'd594672879ef8cf8aad8df170eda2210c094a9e2', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '0cf4321aa3bab4b2fedf6c8819914713eacd8ee2', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '99e5bf60ff1f263bf28e9aaf3610db27fe1507fc', 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: 'f7581c343c875e267eea166f35f195ee8432eaf1', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, 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` }, hAsync("slot", { key: '02745ef20836ae3001b4f6b4cb623100ddc97725' })), this.internalReadonly && (hAsync("nv-icon", { key: 'feb701a5665c82234a00ce411afed52a7a3ddd72', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: 'bc43f872fce4fdb5940020ca3ac89fda8d6a9709', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '0a04cd146c865c512a6817df83540ffce2d0d308', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '495e2d37897c15d2e2dee95310ae536b03be5822', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3bf2e184784d98940e2ee11fb4f8d1730281bc89', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: 'da02156b85bace7c898e5792cd9db37feab50839', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '5e95ce042deaad2eec68cb4d29ed6fea6f2d3f4c', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: 'e693e1eb32737de9e0d533b8c74b5d87fd7ce0f5', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10188,7 +10311,7 @@ class NvFieldselect {
         "$members$": {
             "message": [1],
             "validation": [1],
-            "selectId": [513, "select-id"],
+            "inputId": [513, "input-id"],
             "label": [513],
             "description": [1537],
             "name": [513],
@@ -10206,7 +10329,7 @@ class NvFieldselect {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["selectId", "select-id"], ["label", "label"], ["description", "description"], ["name", "name"], ["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["success", "success"], ["multiple", "multiple"], ["value", "value"], ["displayValue", "display-value"]]
+        "$attrsToReflect$": [["inputId", "input-id"], ["label", "label"], ["description", "description"], ["name", "name"], ["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["success", "success"], ["multiple", "multiple"], ["value", "value"], ["displayValue", "display-value"]]
     }; }
 }
 
@@ -10312,9 +10435,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '8c9c791ef7164a3d1dc248242ced345652fae05d' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '8e768c2299d48e0ec4f2f4052503b38ec07367e9', htmlFor: this.inputId }, hAsync("slot", { key: '316e1beffe5534bd1386c9a85818a4fc134de595', name: "label" }, this.label))), hAsync("div", { key: '9a52ffcbcf9ef514c108c0f64ab09b0f1c70f80b', class: "input-wrapper" }, hAsync("slot", { key: 'bcb5d42ea25518e7d4408f6044ec70343476bd80', name: "before-input" }), hAsync("div", { key: '478c7770b2d00c7a0a4182cc4e23b426d74924b9', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '0b9538c630b6d1e27b439c54e47c31c39cce6001', name: "leading-input" }), hAsync("input", { key: '3a3ccf0c9fb16ef47f1c143c4d54a73e400e2b29', 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, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: 'cd45c694b5480e3ee92d58ac05e51c97a1dd12f6', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '6fca533bbceb8c4f4f9ed7dbcd9373df54d8496d', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '0ee33ded353265eeed3253b5c9f039b739508a82', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '12bd5f917245feb4562dd8903c157429ef72dae9', class: "description" }, hAsync("slot", { key: '37894343aa3ad21d37dc93f47a27723fdc7cc89a', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '04253d575a1c987f48a95e32c41a38e0fe10c3a4', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '2db01455b977c68638271427283d95b811f41d54', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '515758fdb12fd8df454fb1d1113356b20fc1600b' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'fc24e70454352dfbf2df977f3287fba276c67cd1', htmlFor: this.inputId }, hAsync("slot", { key: '422c1c9bd42de0a998b8fc45e000c6a30d9a49f3', name: "label" }, this.label))), hAsync("div", { key: 'b1ad372ab559d8245ce184c6abceafa468e449f0', class: "input-wrapper" }, hAsync("slot", { key: 'e30624a7b5db6510db337a408bc069de37bbdbea', name: "before-input" }), hAsync("div", { key: '13657397c9ac78dc97f9b94b8fdbd46126aceb16', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'edf3ee8cc920870aa907f1bbbeaca6cc8d38219c', name: "leading-input" }), hAsync("input", { key: 'afab7a4f2575e5e8a1e675aee9b21e90803db7a6', 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, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: '8f9746766d8ca61d34671e7957b46a256a54e726', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '99abc485edd96a5d772f83339d02141896e99dd9', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '4a0bc519345614a07968e3e7c5d25efc9ba40a02', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd46001bfd7c7a485a9c4dcfa93beafb65dda7b5c', class: "description" }, hAsync("slot", { key: '7580203ed856a803d5dc6d264e10c72c3714de06', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '52ee56aa45e9876b075237f3ddb89618a34567e9', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '8ee7a5a7cbbcce96e8a94651c140e163a0545286', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10427,9 +10550,6 @@ class NvFieldtextarea {
             const textarea = event.target;
             this.value = textarea.value;
             this.valueChanged.emit(textarea.value);
-            if (this.autosize) {
-                this.adjustTextareaHeight();
-            }
         };
         this.handleTextareaContainerClick = () => {
             this.textareaElement.focus();
@@ -10469,46 +10589,50 @@ class NvFieldtextarea {
             (_a = this.textareaElement) === null || _a === void 0 ? void 0 : _a.style.removeProperty('height');
         }
     }
+    /**
+     * Make sure to adjust the height of the textarea when the value changes
+     * programmatically or by typing when autosize is on.
+     */
+    handleValueChange() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
     adjustTextareaHeight() {
         if (this.textareaElement && this.autosize) {
-            this.textareaElement.style.height = 'auto';
-            // Get computed styles
-            const computedStyle = window.getComputedStyle(this.textareaElement);
-            const lineHeight = parseFloat(computedStyle.lineHeight);
-            const paddingTop = parseFloat(computedStyle.paddingTop);
-            const paddingBottom = parseFloat(computedStyle.paddingBottom);
-            const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
-            const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
-            // Calculate min-height based on rows
-            const minHeight = lineHeight * this.rows +
-                paddingTop +
-                paddingBottom +
-                borderTopWidth +
-                borderBottomWidth;
-            this.textareaElement.style.minHeight = `${minHeight}px`;
-            this.textareaElement.style.height =
-                this.textareaElement.scrollHeight + 'px';
+            /**
+             * The first requestAnimationFrame ensures that the DOM has applied any
+             * pending changes (e.g., value updates or attribute changes) before
+             * proceeding to the next frame.
+             */
+            requestAnimationFrame(() => {
+                /**
+                 * The second requestAnimationFrame ensures that the browser has fully
+                 * recalculated layout and styles based on the updated DOM, such as
+                 * recalculating scrollHeight for the textarea after the new value is
+                 * rendered.
+                 */
+                requestAnimationFrame(() => {
+                    this.textareaElement.style.height = 'auto';
+                    const computedStyle = window.getComputedStyle(this.textareaElement);
+                    const lineHeight = parseFloat(computedStyle.lineHeight);
+                    const paddingTop = parseFloat(computedStyle.paddingTop);
+                    const paddingBottom = parseFloat(computedStyle.paddingBottom);
+                    const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+                    const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+                    // Calculate min-height based on rows
+                    const minHeight = lineHeight * this.rows +
+                        paddingTop +
+                        paddingBottom +
+                        borderTopWidth +
+                        borderBottomWidth;
+                    this.textareaElement.style.minHeight = `${minHeight}px`;
+                    this.textareaElement.style.height =
+                        this.textareaElement.scrollHeight + 'px';
+                });
+            });
         }
     }
-    /**
-     * Class        Properties
-     * resize-none	resize: none;
-     * resize-y	    resize: vertical;
-     * resize-x	    resize: horizontal;
-     * resize	      resize: both;
-     * @returns {string} The resize class.
-     */
-    getResize() {
-        if (this.resize === 'none')
-            return 'resize-none';
-        if (this.resize === 'vertical')
-            return 'resize-y';
-        if (this.resize === 'horizontal')
-            return 'resize-x';
-        if (this.resize === 'both')
-            return 'resize';
-        return 'resize-none';
-    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -10521,15 +10645,16 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '373b828a0b311ba52dbfb666fe27e1ec22c7a8b2' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ad9a79413e380c3213d1090a9b8677f24789b966', htmlFor: this.inputId }, hAsync("slot", { key: 'be3b38804bfee6eb258b904700a06f0031644329', name: "label" }, this.label))), hAsync("div", { key: '9053d8e74cb27c6296b9de27627cb954ae0fe4bc', class: "textarea-wrapper" }, hAsync("div", { key: '870cbaff23359bc7677ecf48cd01610c14c209ed', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '7efb8560969ece9527c5617c1300feabf5490f00', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, 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.getResize()) }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd6920a2ce734349a88d671d8c2a92d301d80171e', class: "description" }, hAsync("slot", { key: '087138569e3f0b5dc327aa6525233fe366ec9126', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a7ef3bc71412e23af7d20a4938ab0f4fd1f101a2', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'cd448427a41d917cb9d32358b3e1efc01297dbd5', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '683a4bf119b61bd928fca68484adafc290242542' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '9ee48a620c7d7b5bf13181b4bf2cc013267a98cc', htmlFor: this.inputId }, hAsync("slot", { key: '28b618f5639aa84748319ee17e081e67730b85a5', name: "label" }, this.label))), hAsync("div", { key: '4086bb637f43dd332d078dc2edef046ab08f5bd6', class: "textarea-wrapper" }, hAsync("div", { key: 'ee38cea5b14938865de2416d309952357527528c', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: 'fe35a432fe0f737dc49bc37a2a2fdc56c95cef4d', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, 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: 'e44539c99f51bf28978c87eea681286959570446', class: "description" }, hAsync("slot", { key: '1fc80c66fa30871035cc47e2de35fd7ce390f766', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ecb5d0b11d5b9fb3175824abcc0bcc98433b2dbf', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '28063a5373418b506d30a30fb524cca294024daf', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
         "rows": ["rowsChanged"],
-        "autosize": ["autosizeChanged"]
+        "autosize": ["autosizeChanged"],
+        "value": ["handleValueChange"]
     }; }
     static get style() { return NvFieldtextareaStyle0; }
     static get cmpMeta() { return {
@@ -10626,8 +10751,8 @@ class NvFieldtoggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '18603a99c814b19f77a3e78f4a7dd3960bdc0841', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '3fb419bde30424ee2abdb63d75ef8ef3c78754c8', class: "input-container" }, hAsync("input", { key: '2c6d98d5c1e05bb33832c48fbe4b2e68f133a70f', 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: 'cc81c4e259750d75fb4e799365da64cedb71304c', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '44177bd0153a833d5b5ef7a4e2e1d6dedfea3c91', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '05719cf662559b26b3074e4b9bd67ed908e4c9bf', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'db2e5122431af687ce42c85476bb38bca868ee26', class: "description" }, hAsync("slot", { key: '68256d968071f13d7441b1801d17162b91021a8b', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: 'ed329e4f412fe907483baaba3c41601df1b4d42b', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '007e241bbcefa7f1cab09beef0f14a5617bcffb5', class: "input-container" }, hAsync("input", { key: '95d37868390b5f562b90bc1f9160c8545ca1d99c', 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: 'bdd17bd03068f5da78a1a8c69fe672d77bd19c5b', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '24809a89cb508d48a3c67dd495481ea06f287bfd', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'a8babfbc290a8f9f3da56145246ade9d1ad6f775', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '075a518f042244c5823bd1bee758462ea111f1cd', class: "description" }, hAsync("slot", { key: 'c3ac97a983611c0568c0e0753f3c57870fb61cb1', name: "description" }, this.description))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10700,7 +10825,7 @@ class NvIcon {
     //#region RENDER
     render() {
         //const iconSprite = getAssetPath('assets/icon-sprite.svg');
-        return (hAsync(Host, { key: '1862efaf5cb956c36b1dad264518f7eb37a10c34', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '7beb3a4697c73a42e28b8d59128cea93978ba282', 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: '50e901a1dc92fb8ada8489e9be15c1bf069df5e6', href: `${this.spriteUrl}#${this.name}` }))));
+        return (hAsync(Host, { key: '4f3b6f3fd706975fc5cca36c5efb5ce47fe3ed0a', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '6cdf2e45567317fe70c205514f01d5da0207fd3f', 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: 'e6e616c6b5a2d07ab342f7c9ed2076630606d3c8', href: `${this.spriteUrl}#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -10791,7 +10916,7 @@ class NvIconbutton {
          */
         this.handleClick = (event) => {
             var _a, _b, _c, _d;
-            if (this.loading || this.disabled) {
+            if (this.disabled) {
                 event.preventDefault();
                 return;
             }
@@ -10830,7 +10955,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7d785e95270a8ebcf303a345a887005774295ee6', 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: '028836989901ce6f625f325d368c661b31477e62', size: this.size }), !this.loading && hAsync("nv-icon", { key: '5184638cc9dd4550c65eca5b2492806e5e77e43e', name: this.name, size: this.size }), hAsync("slot", { key: '36ab315cb2ac6741c4debb5bfa84eb2e05e3abc8' })));
+        return (hAsync(Host, { key: 'abbd417169f29ce6616909c79b2f4162943791d8', 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: 'd933f2ada3fd2b01361f3508af9201dcde9d3f56', size: this.size }), !this.loading && hAsync("nv-icon", { key: 'a60298b06f4ea8b4837ad8a46c2ad0adc411fc75', name: this.name, size: this.size }), hAsync("slot", { key: 'b19a111bb5304ac176eb834a661b2324f12b57e7' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10878,7 +11003,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: '9d70fed6bfe41c8e1a87bd7eb2d83a1bb6af69ab', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: '0fdf2ee8bad6bab413c729f7dfcf516f5fb46a35', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -10906,7 +11031,6 @@ class NvMenu {
         registerInstance(this, hostRef);
         this.menuitemSelected = createEvent(this, "menuitemSelected", 7);
         this.isHandlingKeyDown = false;
-        this.isHandlingClick = false;
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -10946,43 +11070,18 @@ class NvMenu {
     async close() {
         this.open = false;
     }
-    handleMenuItemSelect(menuItem, event) {
-        // If the element is disabled, stop propagation
-        if (menuItem.hasAttribute('disabled')) {
-            event.stopPropagation();
+    handleMenuItemSelect(event) {
+        if (this.disableCloseOnSelect)
             return;
-        }
-        // Emit the menuitemSelected event for the selected item
-        const itemId = menuItem.id;
-        if (itemId) {
-            this.menuitemSelected.emit({ itemId });
-        }
-        // Prevent event propagation to avoid multiple triggers
-        event.stopPropagation();
-        if (!this.disableCloseOnSelect) {
-            this.open = false;
-        }
-    }
-    handleMenuClick(event) {
-        if (this.isHandlingClick) {
+        if (event.detail.hasSubmenu)
             return;
-        }
-        this.isHandlingClick = true;
-        const target = event.target;
-        const menuItem = target.closest('nv-menuitem');
-        if (menuItem &&
-            menuItem.tagName === 'NV-MENUITEM' &&
-            !menuItem.hasAttribute('has-submenu')) {
-            this.handleMenuItemSelect(menuItem, event);
-        }
-        this.isHandlingClick = false;
+        this.open = false;
     }
     handleKeydown(event) {
         if (!this.open)
             return;
-        if (this.isHandlingKeyDown) {
+        if (this.isHandlingKeyDown)
             return;
-        }
         this.isHandlingKeyDown = true;
         if (event.key === 'ArrowDown' ||
             event.key === 'ArrowUp' ||
@@ -10997,17 +11096,6 @@ class NvMenu {
             this.isHandlingKeyDown = false;
             return;
         }
-        if (event.key === 'Enter') {
-            const activeElement = document.activeElement;
-            if (activeElement &&
-                activeElement.tagName === 'NV-MENUITEM' &&
-                !activeElement.hasAttribute('has-submenu')) {
-                event.preventDefault();
-                this.handleMenuItemSelect(activeElement, event);
-            }
-            this.isHandlingKeyDown = false;
-            return;
-        }
         const menuContent = this.el.querySelector('[slot="content"]');
         const menuItems = Array.from(menuContent.childNodes).filter(item => { var _a; return (_a = item.matches) === null || _a === void 0 ? void 0 : _a.call(item, 'nv-menuitem, nv-menu'); });
         let currentIndex = menuItems.indexOf(document.activeElement);
@@ -11091,7 +11179,7 @@ class NvMenu {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '23fdff061d4aa8364590e2486c60b26684400a34' }, hAsync("slot", { key: '50ff6d6a5b84ad83a9b9deefed42335e663c989d', name: "trigger" }), hAsync("nv-popover", { key: 'ee15458289098254b7074452b2c25a32a7e82b3e', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, hAsync("slot", { key: 'bccea8f6469c29bad2e764c6628b6a783890d10d', name: "content" }))));
+        return (hAsync(Host, { key: '2916995a257343bb849c8e64938850e0167d5491' }, hAsync("slot", { key: '012e521f58fd4b603f90c4eb6bef29c71e05586e', name: "trigger" }), hAsync("nv-popover", { key: '187f89fd4dad78f8ebc99082ad936fced52b81d3', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, hAsync("slot", { key: '3d94bcc4a617fd475f3e6057f10e25a3aae772fd', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuStyle0; }
@@ -11106,7 +11194,7 @@ class NvMenu {
             "show": [64],
             "close": [64]
         },
-        "$listeners$": [[2, "click", "handleMenuClick"], [0, "keydown", "handleKeydown"], [0, "openChanged", "handleOpenChanged"]],
+        "$listeners$": [[0, "menuitemSelected", "handleMenuItemSelect"], [0, "keydown", "handleKeydown"], [0, "openChanged", "handleOpenChanged"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["open", "open"]]
     }; }
@@ -11121,6 +11209,7 @@ var NvMenuitemStyle0 = nvMenuitemCss;
 class NvMenuitem {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.menuitemSelected = createEvent(this, "menuitemSelected", 7);
         /**
          * Disables the item, preventing user interaction.
          */
@@ -11130,11 +11219,37 @@ class NvMenuitem {
          */
         this.hasSubmenu = false;
     }
-    //#endregion PROPERTIES
+    handleMenuItemSelect(event) {
+        // If the element is disabled, stop propagation
+        if (this.disabled) {
+            event.stopPropagation();
+            return;
+        }
+        this.menuitemSelected.emit({
+            id: this.el.id,
+            name: this.name,
+            hasSubmenu: this.hasSubmenu,
+        });
+    }
+    handleClick(event) {
+        this.handleMenuItemSelect(event);
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            const activeElement = document.activeElement;
+            if (activeElement &&
+                activeElement.tagName === 'NV-MENUITEM' &&
+                !activeElement.hasAttribute('has-submenu')) {
+                event.preventDefault();
+                this.handleMenuItemSelect(event);
+            }
+        }
+    }
+    //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c2d22d3d9da87cf9397d53bc1d04664f2b2fdaf6', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '1e058e4ab0d0d8a38e832bbfecc89b68f308c5b3', name: this.icon }), hAsync("span", { key: 'c2320e9145f09aa561103e594b8921aa067f50ac', "data-scope": "text" }, hAsync("slot", { key: '4783773cfc252c76ff5e23a776cc81b3ddefaa08' })), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: '5ae203ed4236966e3f72e587d047f5d6e3a1ebbd' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: 'a92df958241abeb73584d780777afb5967a45753', name: "chevron-right" })));
+        return (hAsync(Host, { key: 'a67dc0ea59f24f8e603b85fca99a95727559f749', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '5f9b024b930199552cbcb25c20b8acb85cb49dc7', name: this.icon }), hAsync("span", { key: '096c9c5ea2cc697c7eb4de9c43dff60e06751e89', "data-scope": "text" }, hAsync("slot", { key: '87e3815be0751cf1bf4e31dacc3a1658c4d7fdf4' })), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'e0bfbf8cb85eab0b935b37963d52ff14c844db2b' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '869adf3673781fb5d21ca493118bfc4e5b56d9c4', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -11145,11 +11260,12 @@ class NvMenuitem {
             "icon": [513],
             "disabled": [516],
             "shortcut": [513],
-            "hasSubmenu": [516, "has-submenu"]
+            "hasSubmenu": [516, "has-submenu"],
+            "name": [513]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[2, "click", "handleClick"], [0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["icon", "icon"], ["disabled", "disabled"], ["shortcut", "shortcut"], ["hasSubmenu", "has-submenu"]]
+        "$attrsToReflect$": [["icon", "icon"], ["disabled", "disabled"], ["shortcut", "shortcut"], ["hasSubmenu", "has-submenu"], ["name", "name"]]
     }; }
 }
 
@@ -13242,6 +13358,7 @@ class NvPopover {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.openChanged = createEvent(this, "openChanged", 7);
+        this.eventsAttached = false;
         /**
          * Use this prop to toggle the visibility of the popover. Set to true to show
          * the popover and false to hide it.
@@ -13377,6 +13494,20 @@ class NvPopover {
     async toggle() {
         this.open = !this.open;
     }
+    /**
+     * Attaches event listeners to the trigger element, and makes sure this only
+     * happens once.
+     */
+    attachEventListeners() {
+        if (this.triggerElement && !this.eventsAttached) {
+            addEventListeners(this.closeEvents, document, this);
+            if (this.triggerMode === 'click')
+                addEventListeners(this.clickEvents, this.triggerElement, this);
+            if (this.triggerMode === 'hover')
+                addEventListeners(this.hoverEvents, this.triggerElement, this);
+            this.eventsAttached = true;
+        }
+    }
     /**
      * Calculates the position of the popover relative to the trigger.
      * @docs https://floating-ui.com/docs/computePosition
@@ -13490,6 +13621,9 @@ class NvPopover {
         if (!this.triggerElement)
             this.triggerElement = Array.from(this.el.children).find(child => child.getAttribute('slot') === 'trigger');
     }
+    componentWillUpdate() {
+        this.attachEventListeners();
+    }
     componentDidLoad() {
         // Initial inline style setup
         if (!this.open) {
@@ -13502,11 +13636,7 @@ class NvPopover {
             this.popoverElement.removeAttribute('hidden');
         }
         this.positionPopover();
-        addEventListeners(this.closeEvents, document, this);
-        if (this.triggerMode === 'click')
-            addEventListeners(this.clickEvents, this.triggerElement, this);
-        if (this.triggerMode === 'hover')
-            addEventListeners(this.hoverEvents, this.triggerElement, this);
+        this.attachEventListeners();
     }
     disconnectedCallback() {
         removeEventListeners(this.closeEvents, document, this);
@@ -13519,7 +13649,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'ec0fd394fe5d735afcc7077b32ef4c5717a36349' }, hAsync("slot", { key: '7ed68d138ea990da3c1f245919245e5ad1978495', name: "trigger" }), hAsync("div", { key: '15b681de4c00d96eb7eb32912429d48e849c426e', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '8ac2cc5bba6be174cb3577fd885b13fea3a36071', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '57775b2726b6fdc1aa2798665d5971a68a6a5f12', name: "content" }))));
+        return (hAsync(Host, { key: '17eff9af9c2b956bb09a5398f08c1bd6cc748d30' }, hAsync("slot", { key: '4633c6f88fe81214a5b2b189c32b6c6ed71c7c0a', name: "trigger" }), hAsync("div", { key: '792f7ad6fe7d7405e617e54819d90a76b82fc36c', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '8acc19dd8728f2b164172eb53accfea4ac41e8b0', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: 'b0785e444dabddb50f7105aa958c81967ee27e5d', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13564,7 +13694,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '559c93b3961fdee5d278df42693dd4faae1f1eaf' }, hAsync("slot", { key: '3cbf2c0ed7a07e23537ae6fb3cc999fef27561ea' })));
+        return (hAsync(Host, { key: 'f43c7500aaec670bdbf7b78bdb257820e9a6a2f4' }, hAsync("slot", { key: '2c5c9634138d7be6dc46d84dfa75fad3a6d72a71' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -13599,7 +13729,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '900b3afd3b0394433a719769797b4275998be59d', 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: 'de28519746e3c18f04bdaea3f13258bc3d3d49a9' })));
+        return (hAsync(Host, { key: 'adb66e681e65a9ae43a1d6651d5c85299a60d095', 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: '882bebcf2fe4c09a8a5bbf689c54d849a99e5941' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -13748,7 +13878,7 @@ class NvTable {
                 .querySelector('[slot="body"]')
                 .querySelectorAll('nv-tablerow'))
             : [];
-        return (hAsync(Host, { key: 'ab2f459ea80c9f134a537b62298ffd55ad7b719f' }, hAsync("div", { key: '081211573d87749e8b133b89e9da2a201b9e8bf3', class: "hidden" }, hAsync("slot", { key: '7dd2c168d379818e1456eb2117e14cf79e44f33e' }), hAsync("slot", { key: '7c8e1b4cf0b223257148459d753c2eb325a7cd17', name: "head" }), hAsync("slot", { key: 'd107814f31a82e3fd6e22dbccff319c5baf2b3db', name: "body" })), hAsync("slot", { key: 'd704c43a322b073ed459947f23950bc719402656', name: "before" }), this.parsedColumns.length === 0 &&
+        return (hAsync(Host, { key: '1db7f4f0eda8e4659c2929ef137a69e5dfd60cab' }, hAsync("div", { key: '34d2c4d60a415be61189474db1ca042c48a728dd', class: "hidden" }, hAsync("slot", { key: '0b9f4234024ee63965c6f42064a947af1c45769d' }), hAsync("slot", { key: 'aa88f265936ee32cd2d07d4dd3df94a5a32bad5e', name: "head" }), hAsync("slot", { key: 'f027b8d3570643f9d9e85281c4cc74e4143e91be', name: "body" })), hAsync("slot", { key: '9ece2fef9862c961e35f10d12077f27c95262bfe', name: "before" }), this.parsedColumns.length === 0 &&
             this.parsedData.length === 0 &&
             headerRows.length === 0 &&
             bodyRows.length === 0 ? (hAsync("p", null, this.noColumnsNoDataMessage)) : (hAsync("table", null, this.parsedColumns.length > 0 ? (hAsync("thead", null, hAsync("tr", null, this.parsedColumns.map(column => (hAsync("th", null, column)))))) : headerRows.length > 0 ? (hAsync("thead", null, headerRows.map(row => {
@@ -13759,7 +13889,7 @@ class NvTable {
             : Object.values(row).map(value => hAsync("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
             const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
             return (hAsync("tr", null, cells.map(cell => (hAsync("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
-        })) : null))), hAsync("slot", { key: '727d2040bec14d6632d062637b86b3a79e30b88d', name: "after" })));
+        })) : null))), hAsync("slot", { key: 'bf544e391ea06f3cad8f90450e71af2b6b973dd7', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13803,7 +13933,7 @@ class NvTablebody {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '033046403a927a4e738ee0b17491436872845375' }, hAsync("tbody", { key: 'e9dd64ba4c4463b64f7c48ea01aa8d577d1abddd' }, hAsync("slot", { key: '3790e34a3f1c0c870e41f5259edf956253cf031d' }))));
+        return (hAsync(Host, { key: '7a5935aabb4a5136d60d1f16047f914bbd187ef3' }, hAsync("tbody", { key: 'ec41d476bec5f5e1b745cc0282b6b19a4ed674af' }, hAsync("slot", { key: '5c974cca2fd9207860615d81f4f0343e5d69d95c' }))));
     }
     static get style() { return NvTablebodyStyle0; }
     static get cmpMeta() { return {
@@ -13846,7 +13976,7 @@ class NvTablecolumn {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '9e3e12375467e02e9e964b3f008aaee842704132' }, hAsync("th", { key: '9e4ee5f486d53a6200bd73652d35783da9d56eae', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, hAsync("slot", { key: 'b59a867f3fad0e30e475f730aaaf482564969807' }))));
+        return (hAsync(Host, { key: '976a7fb6560a797a1fdf754714f44f2879cf7346' }, hAsync("th", { key: 'd2fb85bea5e7ca5ee9cf8a6e0b5ec86d248f400b', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, hAsync("slot", { key: '0e7fc2dbda83ac114bcb70cfd81c4f324c4155a6' }))));
     }
     static get style() { return NvTablecolumnStyle0; }
     static get cmpMeta() { return {
@@ -13897,7 +14027,7 @@ class NvTabledatacell {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '2b8dd0b288e8771055c061f42bae406e35618394' }, hAsync("td", { key: '4c77b5ddb3e992816a9f74097b184cf0a4299a1d', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, hAsync("slot", { key: '9698292b649e85f9d1a6578ae6b6166c33594eab' }))));
+        return (hAsync(Host, { key: '7ac83ec253d7dc4646a647b90f2930ea18d20c9b' }, hAsync("td", { key: 'dedbdb25b21e28cfde242966dc950e1ddf1497ca', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, hAsync("slot", { key: 'f899ee0423444463fb943c4fd9096bc91ba16ea3' }))));
     }
     static get style() { return NvTabledatacellStyle0; }
     static get cmpMeta() { return {
@@ -13927,7 +14057,7 @@ class NvTablehead {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '664bc779e57e372c4939f34e79be34672c701b9b' }, hAsync("thead", { key: '772dfe48aea949fa05229f036589947dcf097992' }, hAsync("slot", { key: 'bc76551105f0f0dfb4d6639bbe5b304b5b824328' }))));
+        return (hAsync(Host, { key: '57d72ca018eb61884bcc91df678d8c97c44463b5' }, hAsync("thead", { key: '30a4ab6720e842aa5fcbebe66f3de4a7fa1aa9e1' }, hAsync("slot", { key: '03ac5c8da1260aa29acb359e2b6fe53fb36bfac4' }))));
     }
     static get style() { return NvTableheadStyle0; }
     static get cmpMeta() { return {
@@ -13953,7 +14083,7 @@ class NvTablerow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '2b24e970bb04d2ce5e9a95a136127fbdaa84a677' }, hAsync("tr", { key: 'd6c6a5ca230a5282a152db23885f200c04c43be4' }, hAsync("slot", { key: '84d7b5452772f4ff37e481fa14bd28b25cb0fd77' }))));
+        return (hAsync(Host, { key: '4c4a058b45a05fcff3ed541f7ffcb80aaaec6c3d' }, hAsync("tr", { key: 'c37eb2098562ba01e8376b5ab6614f64988fe454' }, hAsync("slot", { key: '4b202392edb7345547c423697a2211457b591c00' }))));
     }
     static get style() { return NvTablerowStyle0; }
     static get cmpMeta() { return {
@@ -13993,15 +14123,16 @@ class NvTooltip {
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
-        this.triggerElement = Array.from(this.el.children).find(child => {
-            return child.getAttribute('slot') === null;
-        });
+        if (!this.triggerElement)
+            this.triggerElement = Array.from(this.el.children).find(child => {
+                return child.getAttribute('slot') === null;
+            });
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '590d897c7012f9020f6ac6e9f49acb840b4067ca' }, hAsync("slot", { key: '9479477482e361a042d464311a90dc3b0babb9e5' }), hAsync("nv-popover", { key: '89a2903946a89074201b5eb61a64b0595d831512', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '5a6097b56440b06c33b20d5c06054f6aad9c9a42', slot: "content" }, this.message), hAsync("slot", { key: '595f1185183da50e916b243276c38a10a84e5712', name: "content" }))));
+        return (hAsync(Host, { key: '943d4c2989f7a2f63b1f22f196b1f6d26b7f8edf' }, hAsync("slot", { key: '82784aa5225fe8c437a52c97242ff2db2cb41fb6' }), hAsync("nv-popover", { key: 'e560ee505f65e0ca0fa525959ad9aa321cd6821d', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'da9632921d70c9ae6a75639e65e1e83160ad16e4', slot: "content" }, this.message), hAsync("slot", { key: '3bbe81d6c0004d9f6691fd89c5732409e57e26e6', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -14009,6 +14140,7 @@ class NvTooltip {
         "$flags$": 4,
         "$tagName$": "nv-tooltip",
         "$members$": {
+            "triggerElement": [1040],
             "message": [1],
             "placement": [1],
             "enterDelay": [2, "enter-delay"]
@@ -14025,6 +14157,8 @@ registerComponents([
   NvAvatar,
   NvBadge,
   NvBaseComponent,
+  NvBreadcrumb,
+  NvBreadcrumbs,
   NvButton,
   NvCol,
   NvDatagrid,