@nova-design-system/nova-webcomponents 3.0.0-beta.24 → 3.0.0-beta.27

package/hydrate/index.js

@@ -128,7 +128,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: false, 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, 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: 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, 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) {
@@ -136,7 +136,7 @@ if (Build.isDev) {
 }
 
 /*
- Stencil Hydrate Platform v4.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.22.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -570,11 +570,13 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
               const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
               styleContainerNode.insertBefore(styleElm, referenceNode2);
             } else if ("host" in styleContainerNode) {
-              const existingStyleContainer = styleContainerNode.querySelector("style");
-              if (existingStyleContainer) {
-                existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
-              } else {
-                styleContainerNode.prepend(styleElm);
+              {
+                const existingStyleContainer = styleContainerNode.querySelector("style");
+                if (existingStyleContainer) {
+                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
+                } else {
+                  styleContainerNode.prepend(styleElm);
+                }
               }
             } else {
               styleContainerNode.append(styleElm);
@@ -1459,23 +1461,23 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
   if (cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
-    FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach(
-      (cbName) => Object.defineProperty(prototype, cbName, {
+    FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => {
+      Object.defineProperty(prototype, cbName, {
         value(...args) {
           const hostRef = getHostRef(this);
           const instance = hostRef.$lazyInstance$ ;
           if (!instance) {
-            hostRef.$onReadyPromise$.then((instance2) => {
-              const cb = instance2[cbName];
-              typeof cb === "function" && cb.call(instance2, ...args);
+            hostRef.$onReadyPromise$.then((asyncInstance) => {
+              const cb = asyncInstance[cbName];
+              typeof cb === "function" && cb.call(asyncInstance, ...args);
             });
           } else {
-            const cb = instance[cbName];
+            const cb = instance[cbName] ;
             typeof cb === "function" && cb.call(instance, ...args);
           }
         }
-      })
-    );
+      });
+    });
   }
   if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
     if (Cstr.watchers && !cmpMeta.$watchers$) {
@@ -1596,6 +1598,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
+      fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
       Cstr = elm.constructor;
       const cmpTag = elm.localName;
@@ -1623,6 +1626,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
 };
 var fireConnectedCallback = (instance) => {
+  {
+    safeCall(instance, "connectedCallback");
+  }
 };
 
 // src/runtime/connected-callback.ts
@@ -1659,8 +1665,10 @@ var connectedCallback = (elm) => {
       }
     } else {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-        hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
+      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
+        fireConnectedCallback(hostRef.$lazyInstance$);
+      } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+        hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
       }
     }
     endConnected();
@@ -2254,6 +2262,462 @@ var Build = {
 };
 var styles = /* @__PURE__ */ new Map();
 
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+var byteToHex = [];
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  //
+  // Note to future-self: No, you can't remove the `toLowerCase()` call.
+  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+  return getRandomValues(rnds8);
+}
+
+var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)();
+
+  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80;
+
+  // Copy bytes to buffer, if provided
+  if (buf) {
+    offset = offset || 0;
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+    return buf;
+  }
+  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%;display:block}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;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 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;
+
+/**
+ * @slot content - Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.
+ * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot before-input - Content to be placed before the input text, outside the input container.
+ * @slot after-input - Content to be placed after the input text, outside the input container.
+ * @slot label - Content to be placed as the label, will override the label prop.
+ * @slot description - Content to be placed as the description, will override the description prop.
+ * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
+ */
+class NVFieldDropDown {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropdownItemSelected = createEvent(this, "dropdownItemSelected", 7);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        /**
+         * Handle click on the input container.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleInputContainerClick = (event) => {
+            if (this.disabled || this.readonly) {
+                return; // Do nothing if the dropdown is disabled or read-only
+            }
+            const target = event.target;
+            // Check if it is the paragraph or another part of the container
+            if (target.tagName === 'P' || target.tagName === 'SPAN') {
+                this.open = true;
+                this.popoverElement.show();
+                // Simulate focus to trigger "focus-within" style
+                const inputContainer = this.el.querySelector('.input-container');
+                if (inputContainer) {
+                    inputContainer.classList.add('focus-within');
+                    // Remove the "focus-within" class after a delay or when the popover is closed
+                    const removeFocusWithin = () => {
+                        inputContainer.classList.remove('focus-within');
+                    };
+                    // Or remove the class when the popover is closed
+                    this.popoverElement.addEventListener('hide', removeFocusWithin);
+                }
+            }
+        };
+        /**
+         * Handle input change.
+         * @param {Event} event - The input event.
+         */
+        this.handleInput = (event) => {
+            if (!this.filterable)
+                return; // Do not filter if `filterable` is false
+            if (this.disabled || this.readonly) {
+                return; // Do not toggle the state if the dropdown is disabled or read-only
+            }
+            const input = event.target;
+            this.filterText = input.value.toLowerCase();
+            this.value = input.value; // Update the value
+            this.valueChanged.emit(input.value); // Emit an event if needed
+            this.filterItems(); // Update the visibility of items
+        };
+        /**
+         * Handle input focus.
+         */
+        this.handleInputFocus = () => {
+            if (this.disabled || this.readonly) {
+                return; // Do not toggle the state if the dropdown is disabled or read-only
+            }
+            this.open = true; // Force the popover to open
+        };
+        /**
+         * Handle input blur.
+         */
+        this.handleInputBlur = () => {
+            // Use a delay to check if the focus is still within the popover
+            setTimeout(() => {
+                if (!this.el.contains(document.activeElement)) {
+                    this.open = false;
+                    this.popoverElement.hide(); // Close the popover if the focus is outside the component
+                }
+            }, 150);
+        };
+        /**
+         * Toggle the dropdown popover.
+         * @returns {void}
+         */
+        this.togglePopover = () => {
+            if (this.disabled || this.readonly) {
+                return; // Do not toggle if disabled or read-only
+            }
+            this.open = !this.open;
+            if (this.open) {
+                this.popoverElement.show();
+                // Si le dropdown n'est pas filtrable, focus sur le premier élément
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+            }
+            else {
+                this.popoverElement.hide();
+            }
+        };
+        this.inputId = v4();
+        this.label = undefined;
+        this.description = undefined;
+        this.placeholder = undefined;
+        this.name = undefined;
+        this.open = false;
+        this.autocomplete = 'off';
+        this.value = undefined;
+        this.required = false;
+        this.error = false;
+        this.errorDescription = undefined;
+        this.readonly = false;
+        this.disabled = false;
+        this.emptyresult = 'No results found';
+        this.filterText = '';
+        this.filterable = false;
+        this.isFilterable = this.filterable;
+        this.selectedValues = new Set();
+    }
+    handleItemSelected(event) {
+        if (this.disabled || this.readonly)
+            return;
+        // Retrieve all nv-fielddropdownitem elements present in the dropdown.
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        // For each item, remove the 'selected' attribute and the 'selected' class.
+        items.forEach(item => {
+            if (item !== event.target) {
+                item.removeAttribute('selected');
+                item.classList.remove('selected');
+            }
+        });
+        // Update the value and emit the event with the selected item.
+        this.value = event.detail.value;
+        event.target.setAttribute('selected', 'true');
+        event.target.classList.add('selected');
+        this.dropdownItemSelected.emit(event.detail);
+        // Close the popover after selecting.
+        if (this.popoverElement) {
+            this.popoverElement.hide();
+        }
+    }
+    handleOpenChanged(event) {
+        this.open = event.detail; // Update `open` based on the popover state
+    }
+    watchFilterableHandler(newValue) {
+        this.isFilterable = newValue;
+        this.filterable = newValue;
+    }
+    watchValueHandler() {
+        // Handle value change and update the corresponding dropdown item if it exists
+        this.setInitialSelection();
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Subscribe to click outside event.
+     */
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Handle pre-selection during component initialization
+        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();
+        }
+    }
+    /**
+     * Set the initial selection based on the current value and update the inputElement value.
+     */
+    setInitialSelection() {
+        var _a;
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        const selectedItem = items.find(item => {
+            var _a;
+            return item.getAttribute('label') === this.value ||
+                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') ||
+                    ((_a = selectedItem.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+                    '';
+            if (this.inputElement) {
+                this.inputElement.value = this.value;
+            }
+        }
+    }
+    /**
+     * Unsubscribe from click outside event.
+     */
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    /**
+     * Filter dropdown items based on the text entered by the user.
+     * If no items are found, display a message indicating no results.
+     */
+    filterItems() {
+        var _a;
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        // Remove the "no results found" item if it exists
+        const existingEmptyItem = this.el.querySelector('nv-fielddropdownitem[data-empty]');
+        if (existingEmptyItem) {
+            existingEmptyItem.remove();
+        }
+        let hasVisibleItems = false;
+        // Iterate over all items and adjust their visibility
+        items.forEach(item => {
+            var _a, _b;
+            const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ''; // Get the textual content of the slot
+            const value = ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || ''; // Get the value of the `value` attribute
+            // Check if the filtered text is present either in the value or in the textual content
+            const shouldShow = value.includes(this.filterText) ||
+                textContent.includes(this.filterText);
+            item.style.display = shouldShow ? '' : 'none'; // Hide or show the item
+            if (shouldShow) {
+                hasVisibleItems = true;
+            }
+        });
+        // If no items are visible, add the "no results found" item
+        if (!hasVisibleItems) {
+            const emptyItem = document.createElement('nv-fielddropdownitem');
+            emptyItem.setAttribute('data-empty', 'true');
+            emptyItem.setAttribute('disabled', 'true');
+            emptyItem.textContent = this.emptyresult;
+            (_a = this.el.querySelector('ul[slot="content"]')) === null || _a === void 0 ? void 0 : _a.appendChild(emptyItem);
+        }
+    }
+    /**
+     * Reset the filter and make all items visible.
+     */
+    resetFilter() {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
+        items.forEach(item => {
+            item.style.display = '';
+        });
+    }
+    /**
+     * Retrieves the current filter text entered by the user.
+     * @returns {string} The filter text.
+     */
+    async getFilterText() {
+        return this.filterText;
+    }
+    /**
+     * Handle click outside the component.
+     * @param {MouseEvent} event - The click event.
+     */
+    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
+    }
+    handleKeyDown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                this.popoverElement.show();
+                if (!this.filterable) {
+                    // Focus sur le premier élément si ce n'est pas filtrable
+                    this.focusFirstItem();
+                }
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        // Vérifiez si le popover est défini avant de chercher les items
+        if (!this.popoverElement) {
+            console.warn('Popover element is not defined');
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty])'));
+        // Vérifiez si les items existent
+        if (items.length === 0) {
+            console.warn('No dropdown items found to navigate');
+            return;
+        }
+        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            currentIndex = (currentIndex + 1) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            currentIndex = (currentIndex - 1 + items.length) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'Enter' && currentIndex >= 0) {
+            event.preventDefault();
+            items[currentIndex].click();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.open = false;
+            this.popoverElement.hide();
+            if (this.inputElement) {
+                this.inputElement.blur();
+            }
+        }
+    }
+    updateHighlightedItem(items, index) {
+        items.forEach((item, i) => {
+            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' });
+            }
+            else {
+                item.classList.remove('highlighted');
+                item.setAttribute('tabindex', '-1');
+            }
+        });
+    }
+    focusFirstItem() {
+        const firstItem = this.el.querySelector('nv-fielddropdownitem');
+        if (firstItem) {
+            firstItem.focus();
+            this.updateHighlightedItem(Array.from(this.el.querySelectorAll('nv-fielddropdownitem')), 0);
+        }
+        else {
+            console.warn('No first item found to focus');
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: '250c1480057430dc7ed9b9f9e754f141f72ae8df' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '381c4c83a2a868e3714770c942e02f7553c02593', htmlFor: this.inputId }, hAsync("slot", { key: '213591b66daee583e63f8f13097ce5d7e00176b5', name: "label" }, this.label))), hAsync("nv-popover", { key: '935e926058a328f1279002853a6125fb14183b3d', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: 'e0b285ab5bb4af2bf84afd20457fccbad87c7ab6', class: "input-wrapper", slot: "trigger" }, hAsync("slot", { key: '78a732873c07adb228c2e1c930bcadc3f77a25c6', name: "before-input" }), hAsync("div", { key: '7413239369a4d03acd13875f63d8f4973bf3147e', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '228cf0a81fdc68fd8ed9c25ce15da5ad88b4e1fb', 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: 'b6be1247858609d11db9401f08625445961c0c5c', 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: 'c0ad34bdf23bdfdb1adbdab04b4629b2b1c6bc9d', name: "after-input" })), hAsync("slot", { key: 'e8d4a526b62a84caca5f28aa0a9d448683d3ad51', name: "content" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '22273a23815f4048dce904b491c7972fce7051fd', class: "description" }, hAsync("slot", { key: '8f8364a20416b5cf20c75e9ead5a2856d1ad307f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'e13aa744e80484699a0abf26f93a1ed2490d13cb', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'faf36f46aede8b40e9f7c01c36119cee11ad5dd2', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "filterable": ["watchFilterableHandler"],
+        "value": ["watchValueHandler"]
+    }; }
+    static get style() { return NvFielddropdownStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 68,
+        "$tagName$": "nv-fielddropdown",
+        "$members$": {
+            "inputId": [513, "input-id"],
+            "label": [513],
+            "description": [513],
+            "placeholder": [513],
+            "name": [513],
+            "open": [1540],
+            "autocomplete": [513],
+            "value": [1537],
+            "required": [516],
+            "error": [516],
+            "errorDescription": [513, "error-description"],
+            "readonly": [516],
+            "disabled": [516],
+            "emptyresult": [513],
+            "filterable": [1540],
+            "filterText": [32],
+            "isFilterable": [32],
+            "selectedValues": [32],
+            "getFilterText": [64]
+        },
+        "$listeners$": [[0, "itemSelected", "handleItemSelected"], [0, "openChanged", "handleOpenChanged"], [0, "keydown", "handleKeyDown"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["inputId", "input-id"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["name", "name"], ["open", "open"], ["autocomplete", "autocomplete"], ["value", "value"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["readonly", "readonly"], ["disabled", "disabled"], ["emptyresult", "emptyresult"], ["filterable", "filterable"]]
+    }; }
+}
+
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 var FeedbackColors;
@@ -5015,68 +5479,6 @@ class NvCol {
     }; }
 }
 
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-var byteToHex = [];
-for (var i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  //
-  // Note to future-self: No, you can't remove the `toLowerCase()` call.
-  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
-}
-
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-
-var getRandomValues;
-var rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-  return getRandomValues(rnds8);
-}
-
-var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native = {
-  randomUUID
-};
-
-function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
-  }
-  options = options || {};
-  var rnds = options.random || (options.rng || rng)();
-
-  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80;
-
-  // Copy bytes to buffer, if provided
-  if (buf) {
-    offset = offset || 0;
-    for (var i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-    return buf;
-  }
-  return unsafeStringify(rnds);
-}
-
 const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(--components-form-field-border-default);--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(--components-form-field-background-default);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-checked);--nv-fieldcheckbox-background-disabled:var(--components-form-field-background-disabled);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(--components-form-shape-foreground-default);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error .input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(--components-form-shape-foreground-disabled-error);--nv-fieldcheckbox-background-checked:var(--components-form-field-background-error);--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]{opacity:0.5}nv-fieldcheckbox label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox .input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox .input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox .input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox .input-container input[type=checkbox]:focus,nv-fieldcheckbox .input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox .input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox .input-container input[type=checkbox]:has(:focus-visible){outline:var(--focus-outline-stroke) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox .input-container input[type=checkbox]:checked,nv-fieldcheckbox .input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox .input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox .input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox .input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox .input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldcheckbox .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
 var NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
 
@@ -5193,6 +5595,75 @@ class NvFieldcheckbox {
     }; }
 }
 
+const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;align-items:center;justify-content:space-between;max-width:300px;width:100%;padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem.selected{background-color:var(--components-menu-contextual-item-background-selected);color:var(--components-menu-contextual-item-content-selected)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem .selection-icon{padding-left:10px;color:var(--components-menu-contextual-item-icon-selected);align-self:center}:root{--components-menu-contextual-item-background-selected:#f5f6f7;--components-menu-contextual-item-content-selected:#171f22;--components-menu-contextual-item-icon-selected:#007f00;--components-menu-contextual-item-background-hover:#f5f6f7;--components-menu-contextual-item-content-hover:#171f22}";
+var NvFielddropdownitemStyle0 = nvFielddropdownitemCss;
+
+/**
+ * @slot default - The content to be displayed inside the dropdown item.
+ */
+class NvFielddropdownitem {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemSelected = createEvent(this, "itemSelected", 7);
+        this.handleClick = () => {
+            if (!this.disabled) {
+                let itemValue = this.value || '';
+                if (!itemValue) {
+                    itemValue =
+                        Array.from(this.el.childNodes)
+                            .map(node => { var _a; return (_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
+                            .filter(text => text && text.length > 0)
+                            .join(' ') || '';
+                }
+                this.selected = !this.selected; // Toggle the selected state
+                this.itemSelected.emit({
+                    label: this.label,
+                    value: itemValue,
+                    selected: this.selected,
+                    disabled: this.disabled,
+                });
+            }
+        };
+        this.disabled = false;
+        this.selected = false;
+        this.value = undefined;
+        this.label = undefined;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Utility function to check if a string is null, empty, or contains only whitespace.
+     * @param {string | null | undefined} input - The string to check.
+     * @returns {boolean} - Returns true if the string is null, empty, or contains only whitespace; otherwise, false.
+     */
+    isNullOrEmptyOrWhitespace(input) {
+        return !input || input.trim().length === 0;
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const showDefaultLayout = this.isNullOrEmptyOrWhitespace(this.label);
+        return (hAsync(Host, { key: '7883f469059e808bca1d6fa7f4a0bbef75681d81', role: "menuitem", tabindex: this.disabled ? '-1' : '0', onClick: this.handleClick, class: { selected: this.selected } }, showDefaultLayout ? (hAsync("slot", null)) : (hAsync("div", { class: "flex gap-2" }, 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; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-fielddropdownitem",
+        "$members$": {
+            "disabled": [516],
+            "selected": [1540],
+            "value": [513],
+            "label": [513]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["disabled", "disabled"], ["selected", "selected"], ["value", "value"], ["label", "label"]]
+    }; }
+}
+
 const nvFieldnumberCss = "nv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: 700;\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 400;\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  position: absolute;\n  right: 0;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon {\n  color: var(--components-form-field-icon-default);\n  height: 100%;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon:first-child {\n  padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon:last-child {\n  padding: var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-ext) var(--form-field-inner-button-padding-y) var(--form-field-inner-button-padding-x-int);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper nv-icon:hover {\n  background: var(--color-interaction-neutral-background-hover);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n  width: calc(2 * (var(--form-field-icon-size) + var(--form-field-inner-button-padding-x-ext) + var(--form-field-inner-button-padding-x-int)) + var(--form-field-padding-x) + var(--notification-border-width-low-emphasis));\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
 var NvFieldnumberStyle0 = nvFieldnumberCss;
 
@@ -5272,9 +5743,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a150acab0261cad03438abbce43dda76c2fd222f' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '69519f99052729a6a2b62b001694048342b6c0ae', htmlFor: this.inputId }, hAsync("slot", { key: '21427c7b39a7282f14fcbca437f7ca74d59f3cbe', name: "label" }, this.label))), hAsync("div", { key: '23cc57bdefec4c0d200afe9176407d9306cd296f', class: "input-wrapper" }, hAsync("slot", { key: 'd9c83c42093fff848a75d9e79940f19cb945c7ff', name: "before-input" }), hAsync("div", { key: '9edcc27d93280f193e2e7bf51efd63d815ffcf7e', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '8b844a90904874f63965d91a33c2a78b32b4fa96', name: "leading-input" }), hAsync("input", { key: '19520af4e0bea22a5092201270051a97faed62a1', 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: '5f5ad3a9e4a6dc88710a6f0714bb3cf7c54bfb27', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '2c81457c414bc282ad602156ee1e17bdc02a87fe', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '56408d1860ffb8f59971b15a5c4155d6f8da027f', class: "stepper-spacer" }), hAsync("div", { key: '237b6d01a886bd2648d8c00d19ef32cce7a8bbd5', class: "stepper" }, hAsync("nv-icon", { key: '7ea54e299fbbbaee4eaaa955057c52f6be47fce3', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: 'fbfd4a9cd3d78bfbeefa99b2a74f0710fb72a60d', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: '5d43fe5dabf1eecb3c00ce809e2e4802326f4599', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a76876356c76c22a3189fd4bfb5c50dd80329a67', class: "description" }, hAsync("slot", { key: '91877b6ce1ea6b9c8e1f67e13a733cfa70cd635a', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '2449f25e9fac52a815ece32de6d488044ce78969', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '276537a3e19c182de08c4a48c4f5b4a9bbbdda09', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '3a9223b9ec5b98988453bb2e4c3d321c753dbcd7' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'be1746ca557a151ff837a1477b37291297aebbb8', htmlFor: this.inputId }, hAsync("slot", { key: '982e9f0d6aeed6fe243e7f3ad44de0efba796df1', name: "label" }, this.label))), hAsync("div", { key: '931b96aeac31f348be4ee0650e9db607d1b67376', class: "input-wrapper" }, hAsync("slot", { key: 'dfc3887c891cdf34591254294cd510a1850b22eb', name: "before-input" }), hAsync("div", { key: '59724e6aa3c46b55f88ec02bfe4fefa271e988d1', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'db0ad5990287b5e5d731346ea9088d18aea437f9', name: "leading-input" }), hAsync("input", { key: 'c524743652559eb6d039a71c9507cfbb08e2a115', 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: 'eeba7946b7576c8eb37954479864d0fe5616609e', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '50ca73fb3cb891f2267da51bf4e2fe6c08e8384e', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '399d9a01d07c98dbfd75cbe1f17720a3e2e7d892', class: "stepper-spacer" }), hAsync("div", { key: '5d006aba51286bdbf6727e7970ffa6b7a1d089e6', class: "stepper" }, hAsync("nv-icon", { key: 'bc7b73f787d0749fc617d689944eea3df06eb78d', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: '5e4389fa084cb76c82f086d1937b6967c8292d53', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: '462809599f077fd76f8fac8bab40870885ec1369', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '0cfe8a2d53663147451a173fc524fd20af5391ba', class: "description" }, hAsync("slot", { key: '99ddab81b68af0835b80a2d7bd5745ccb698da12', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c9199d6a3cf00ae2b63f93a11a15ff247fea2eda', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '0bb584f886a73deaa18dfbbc5e93b25c96f22b1a', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5375,9 +5846,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '12607b189f41947cc3083d2feb88bd47d2c24327' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '1f4055bc907a3c184c435e1c5d522bb8693d3177', htmlFor: this.inputId }, hAsync("slot", { key: '048db2f8c164b645b4087990731c0f78c14949b3', name: "label" }, this.label))), hAsync("div", { key: 'c519d50463b405c0c887b96b9c2e15276dfcc179', class: "input-wrapper" }, hAsync("slot", { key: 'e2a203745d188c4cf8ec2d68cdc795dafe260c89', name: "before-input" }), hAsync("div", { key: 'c19efd9bfdd1a685d4a77fc8caa43d0a5bc9f0d0', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '18554d4beb2fe523880e14738bbdfb0cf6d90fe2', name: "leading-input" }), hAsync("input", { key: 'b52c85804a3cb9d9705412bbb70aa0d37b4cd000', 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: '8b90cd19d7fcd2b10dcd8bff8862e09b4590f64b', 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: '7de3d6d824a5e1d8b456a5cdaf44edc0f284a1f1', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: 'ef0034098648349218e1de6850c55ee7bac830d3', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '00df78e3991f968880006eaca78f957e5e81e932', class: "description" }, hAsync("slot", { key: '4614e4cbdd49380194e337c4fe381cf426dd9be3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ef7fa856c04d4dc4751067184a3fd94c18ed5b0f', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '96c24255cf95f9172a1c41f2579106157f2c1b8a', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '69ec0ce8bb09a3d18bc35ea9d3507642577e1d73' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd1d7da07f6a385d9f1e533bcd2265416ad72c081', htmlFor: this.inputId }, hAsync("slot", { key: 'e3636425c7ff4774efcebf23003c4ddfffd8deeb', name: "label" }, this.label))), hAsync("div", { key: 'b1c900415a7c52f7c8049ee25095d672fcf0b2ae', class: "input-wrapper" }, hAsync("slot", { key: 'a185ce16ac38763e53a874221a6d356b5a124a26', name: "before-input" }), hAsync("div", { key: 'fea4f799535237b6eeaf74f4c689df99a9961676', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '9d0b505fc3c5289d6e58c097d4c60ee7afee7df1', name: "leading-input" }), hAsync("input", { key: 'c3edbe0d8ff28fe7fc37adc73857654bebab642b', 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: '603d51f607526c519a181fd76d4e710948485041', 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: '64d7c84b4c559a1d5abde6838f851a7020a13479', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: 'a4b2924196420f0907721fe48d759720cf0b2bbb', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e5d33079071a718cafc7b0fc8fde5f9117dda201', class: "description" }, hAsync("slot", { key: '29ea9388ff1d4ec61ae54c13ff34f9101661bc62', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '34ed51e1bf050712126bd5a48ab9f426a3444db9', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '940aa4d7799df58265a82b9440bf1e0bb36eb68e', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5479,9 +5950,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '923184aa248f433413ecdc49e4da07a60b408047', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '37c0948ac9a100352908a60dd2ad94e1f7fb2bab', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: 'cb217f7f999396b1b477eb25e5e1db77e941f76a', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '84859686efb45332b5dade8f2cb3147643782588', htmlFor: this.inputId }, hAsync("slot", { key: 'f456892bd1bad003efdd128051989952b1719ca1', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f518939cc9f5f2a1bd9ceccbe284484d51ac44fa', class: "description" }, hAsync("slot", { key: 'f6b1c15c9be9d9c87311b7a658358edf1dbd9c8e', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '3f862fccc7e1a85c076e70babca97a74680a462b', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '3d42e75ba035117f90e5c2f924781617a297173a', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: '3b583693083de14efaeb3fec362b7841d792fd64', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: 'afbb24afc56563ba72f598f6bd5e195d5bcefcbf', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: 'f7506c57b0d409e0834fff77ed6f3f20937a7684', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '094290188857979a7c54878cfbba40333ea21044', htmlFor: this.inputId }, hAsync("slot", { key: 'dd1dd4cda3cde671224d2a96b75a0db2d68484f9', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'de70a59d9849648140de4df091d0a6431bbeba66', class: "description" }, hAsync("slot", { key: '297df2dc5e58ede572cb3ebee160d9f13cd3a2d0', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'e514dad229d2bedb194ac1e9586ce15cf9fca9ce', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '68e52668dc96da4c354f1bc81927b7de3b81c8f6', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5783,13 +6254,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: 'b610d79592893cf82b0ef164f833cc033f43416d' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'a8232954b2230c8b44d2aadba0aba5cfd71813b5', htmlFor: this.selectId }, hAsync("slot", { key: '457157a4cc3dece0363f13ec6c7d3357505e69f8', name: "label" }, this.label))), hAsync("div", { key: '39b1f61586fb2e5784dba297f5f1080d5f9ab560', class: "select-wrapper" }, hAsync("slot", { key: '9ba008fe7250f95e0158e7b0cb530ae565d6bc7f', name: "before-input" }), hAsync("div", { key: 'e2b0b254fc64d5c33cd0252469fbf9024b6735b2', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '9b8158bb110cecc1bd8dd37082b813a1231d7392', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '65163fd120b753358bf45aa731be03e1291473c2', 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
+        return (hAsync(Host, { key: '084b481cd9fb4a5de72475c55b160e6b52791b19' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '8af61112f500899f876163354f0b75b1e68f0874', htmlFor: this.selectId }, hAsync("slot", { key: 'e49a64d55614534aafc53b1aae1f93ab1e164ff2', name: "label" }, this.label))), hAsync("div", { key: '3b91159475d481c9c2cfcebfdefee9e9ada81e09', class: "select-wrapper" }, hAsync("slot", { key: '8a1e0736dcf48b2bf6d63936011115b903cc732a', name: "before-input" }), hAsync("div", { key: 'c5d874489e528f67c60ee2262ed053cc29ed53fa', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '22e1ef11fb7924b71dc968ddc0cab92ce7ad0ad9', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'd117241f08b1bc4e1c81cd07ff71ef4335a07768', 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: '5f38318e3c073e9514c9bd3d429455fc7657b783', 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}-description` })), hAsync("select", { key: '62715b40d36a97243f3126238bb89cf99bfa697a', 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: 'c8f9b54cd6d88603070e34748b8115ae8ccfd522' })), this.internalReadonly && (hAsync("nv-icon", { key: 'bc0151f125212a1044768a3110982cef8da0b26e', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: 'e0883e47712cfc57746ca4167df0924ad1501e57', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '085c0833541a4ff6e6fbbf3350e4fc4ae570e0ec', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '436a1faa2b2d6d651f32556f1d69c6e6b9bdb318', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c734be03a4741a2dd03406997874cf6044954214', class: "description", id: `${this.selectId}-description` }, hAsync("slot", { key: 'dd91d274fd97401a0dbf9b5f68fe23670b2ccf02', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '45998c6f7ecf2ee9a63c566e1f8826d1e321779c', class: "error-description", id: `${this.selectId}-error` }, hAsync("slot", { key: '807d57d77f557d4f0d920df6ec914c2c559e4431', name: "error-description" }, this.errorDescription)))));
+                : `${this.selectId}-description` }, hAsync("slot", { key: '48005aa82e831392898795ce1bf84f6ae62ebbae' })), this.internalReadonly && (hAsync("nv-icon", { key: 'b708946069c6ae49bd56910efaa246757d5c9aa6', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: '43b4b0a27420de9fa357783cea4dfc3755dad51a', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: 'd0607401dffd4bf618acb7af51ff9a21576fb6ec', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'e90a2d6a6b75e3a85c300c4913cfe68356e09cc5', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ea723eab08cd1c2501719d327b441c4ee5f017c0', class: "description", id: `${this.selectId}-description` }, hAsync("slot", { key: 'eb4ee8a77bef595b8f654ff38debea299f702adc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '3177ab730cb80127e12e807db80574dd777a2a99', class: "error-description", id: `${this.selectId}-error` }, hAsync("slot", { key: '5e3c77cb967bfe314c8a492db0c735f40a540a66', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5899,9 +6370,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '76d1f79b55fe4ec4b09b901537900bcbe1b40f1b' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'cdc3fd4a8f7506bee14be3a3a7c22d86858f96d0', htmlFor: this.inputId }, hAsync("slot", { key: '5b4cf92566b0f4da29dbf84cc7b3128e9229228c', name: "label" }, this.label))), hAsync("div", { key: '3d812356dc59127180bc0dcb1bec604c8fd1f281', class: "input-wrapper" }, hAsync("slot", { key: 'ec9ab2b19178a3008f4582997126e1516c75e80d', name: "before-input" }), hAsync("div", { key: '5b7c78c064e5282ddba000ccc57d90e005c16f50', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'c4a420fc3233fdca8db34ebc430764f30c79e488', name: "leading-input" }), hAsync("input", { key: 'e2e09e3643316bda2e0e718455e050b983b73486', 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: '79ed73de7a55f5c501e175805014512d11fc42b4', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: 'ebd69fb668f3fe391d77faf89a8c2766c88dac34', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'c6028274d27b0bce8c1cc314d173934f4c7b1cde', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd0b510a930a7d3bbbd93320b7023bad73eaf507d', class: "description" }, hAsync("slot", { key: 'ae671effb670898267e390cec5e0781190320cd3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '1d0b68e0ea4ac79077b730f4ac37bf66d9923fb1', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '8e9c3464a32461fe493bc262fe240828aa247e5c', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'e225aa4eaca09107049fa32ccf899bce6ee470a7' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ba7633e59530f2ee1d4705d7d1a9aba41e1b3f35', htmlFor: this.inputId }, hAsync("slot", { key: '2baaf93329a6ccc2272dffa02b5cae183e0df7c5', name: "label" }, this.label))), hAsync("div", { key: 'acb57998333c6f120e8f2767edb5219522cef1b1', class: "input-wrapper" }, hAsync("slot", { key: '9514a67fc44ed12d19a77d7dbe207973c9e2a2e4', name: "before-input" }), hAsync("div", { key: '5ddfe286f746e0a8bb227cb161f136e3accd31d8', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '468801862e9586bd7c4ced9514e03e564e003751', name: "leading-input" }), hAsync("input", { key: '5fee6340bb6b66fa06459f646528b31e1894493f', 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: '29cef781d6815da459d2459749237c2fd8daa3a5', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '2d43eed9dd4cfc5545bb001809604903879cbe44', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'bf438d831e88a0a2a8886c4539c9a294f0276507', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '11ead2a09340dc116ed3f6701dcd42cf14393e68', class: "description" }, hAsync("slot", { key: 'a54450d197d3fe5565d64b66899aac0a69fc27be', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ee77c6e156665ab92ece7d653f2079d841a3ba71', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'b8eb5b43f7a7df72b4f278b9b86c0c621642900b', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5966,7 +6437,7 @@ class NvFieldtextarea {
         };
         this.message = undefined;
         this.validation = undefined;
-        this.textareaId = v4();
+        this.inputId = v4();
         this.label = undefined;
         this.description = undefined;
         this.placeholder = undefined;
@@ -6070,9 +6541,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '05e5be100e389a0d604ef6c6a126a3992c4400d8' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'f0e8d865770ad7249748d76eafc520733a73df61', htmlFor: this.textareaId }, hAsync("slot", { key: '88dc412644dd9ba26c1c4fd6495257071ea9355f', name: "label" }, this.label))), hAsync("div", { key: 'ed27e42a150bacb526fad21c33167e5daa88fbdb', class: "textarea-wrapper" }, hAsync("div", { key: '12afa52b296240e0b8cb7ee3dd68100619a0aaef', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '9269535072a3df3aff0f4d6093618ef3d0b9aed3', id: this.textareaId, 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: 'f4cbe287f58bcffa17f9175b5507ffd260652805', class: "description" }, hAsync("slot", { key: 'b3df2bfd379089e489173b0c961ce9bc04080892', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'cb194709b15cbe0e4f243161bb34f5e487b2e073', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'de80cb7d6b1ad8e9f33bd17a407604df66b8eda1', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '535238832a686d98bed7a743ba994515be7fa43b' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ee8ee83154d8ebd436f697fb69235ad431aed0fd', htmlFor: this.inputId }, hAsync("slot", { key: 'cf261fdd000fb29094888419a51f82dfa3fd8648', name: "label" }, this.label))), hAsync("div", { key: '4b0573cf4c17e9a7c1ef2ff7ab4d1d08fe3e4848', class: "textarea-wrapper" }, hAsync("div", { key: '36817cc56f30858fd5c4d2fe0acb29ebcbcaa2b8', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '6586b1d3dd17b29edccb96e556b6d01b721025b5', 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: '068a1b72b760fed02ef647a866016ff6a39ed8e8', class: "description" }, hAsync("slot", { key: '2d8e34b3c44a5ca3943dadbe91a98efdfc9e1df2', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '35fea730fcc254764c545f275298d3b03917b608', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '58e300e380166c82e9857aa9d2929bdd11d798bf', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -6087,7 +6558,7 @@ class NvFieldtextarea {
         "$members$": {
             "message": [1],
             "validation": [1],
-            "textareaId": [513, "textarea-id"],
+            "inputId": [513, "input-id"],
             "label": [513],
             "description": [1537],
             "placeholder": [513],
@@ -6107,7 +6578,7 @@ class NvFieldtextarea {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["textareaId", "textarea-id"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["name", "name"], ["value", "value"], ["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["success", "success"], ["maxlength", "maxlength"], ["minlength", "minlength"], ["rows", "rows"], ["resize", "resize"], ["autosize", "autosize"]]
+        "$attrsToReflect$": [["inputId", "input-id"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["name", "name"], ["value", "value"], ["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["success", "success"], ["maxlength", "maxlength"], ["minlength", "minlength"], ["rows", "rows"], ["resize", "resize"], ["autosize", "autosize"]]
     }; }
 }
 
@@ -6158,8 +6629,8 @@ class NvFieldtoggle {
     }
     /********************************* RENDER ***********************************/
     render() {
-        return (hAsync(Host, { key: '32394c2068002d65652918e998a837ed413db2e8', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'd2a037dbf554e6885853e10d1c5097e2900f7594', class: "input-container" }, hAsync("input", { key: 'c9f150ee7742ed49066f2af75e9aa2fbe03750ba', 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: '6b6d95647dcd2eb850c6e78420581d7205707e62', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '00393d9a26ea57a6ecacc0a248d450d5ef8f543c', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '8e2f5085aea5337d59e753ecd856a3fc6e057269', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c44a88b35cab4b2c034a2f29a9bf0ec168b86a50', class: "description" }, hAsync("slot", { key: '5d80f64e1ac6d61025aa54b77f5e7b0860e6cc11', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '3ea68d4cbec4bc0de00705d5b4dbf4a42316319b', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'cef0c3c3919f7248cc9870dbd2363cba85d2b038', class: "input-container" }, hAsync("input", { key: '74d23f8ee6ed6fd7fb91dd5d233515970ac7ceed', 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: '09a4f4c7fce473f4bb40a35f09e52a64d2dcf1d7', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '8bd7591d0c24613aa4b8c590e1bdec1b2e722042', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '404b6150ec81bcb651ac45c8ca5b2017c1805f49', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '464d5965f59fb70656e918f5808146d247b86b33', class: "description" }, hAsync("slot", { key: '6d0445706d47cffbd7ec80799d11f2eae048652f', name: "description" }, this.description))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6237,7 +6708,7 @@ class NvIcon {
     //#region RENDER
     render() {
         //const iconSprite = getAssetPath('assets/icon-sprite.svg');
-        return (hAsync(Host, { key: '3d42ca8c50da067e3b7c293f803ffb6304ce1b79', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '7dd48f09f3778e3b8c3e28a157a409d919274e9d', 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: 'bd722065819995d483bef237a06b418758f3d6a3', href: `${this.spriteUrl}#${this.name}` }))));
+        return (hAsync(Host, { key: 'aa3f7b43ad5884ad7cde113d0628f7189d791a21', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '4b8b9ecc37fb1d420bc6c4dd03d0e190c1b7565a', 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: '14ebb2c282fb36c1dea48fc2fe6be4b537e0855c', href: `${this.spriteUrl}#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -6334,7 +6805,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '3ca84b14312db9e4fff85fac71fbb0cc7ae7db44', 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: 'bfb6c6ee4dbfa56595b704f436120c3ae18f4fc4', size: this.size }), !this.loading && hAsync("nv-icon", { key: '7e87da2f6d233289bbce12416bf0d39b647f43f3', name: this.name, size: this.size }), hAsync("slot", { key: '43972e79cf4efb921cbc9714110b13590144a268' })));
+        return (hAsync(Host, { key: '50d222f7466955415b3f14d23661cea99cac11d3', 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: '53956bced12f2fa88bd8a1c53edef08df06b03c6', size: this.size }), !this.loading && hAsync("nv-icon", { key: '802248d952f0724dcb8f9e22821d270a01c52800', name: this.name, size: this.size }), hAsync("slot", { key: '3429a4dfaa3d683a23c0b18770a8caf0bfb26726' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -6376,7 +6847,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: 'b4c0dab3c3ea4e2bdd434d779d4b736577bd467e', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: '1b1c99d9d22aabedb2037b67fe277c679b0c9cb9', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -6570,7 +7041,7 @@ class NvMenu {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '5a3a0645d952724b5c2ddd1f2578201568bf827b' }, hAsync("slot", { key: '65506a9b7035ef645daa87079339ad7e7cd76377', name: "trigger" }), hAsync("nv-popover", { key: 'f5998e3d878671d09ea684de2a54bca504513f48', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, hAsync("slot", { key: '267e0e587177bdb8b6ce9b10f36c43158547d5b2', name: "content" }))));
+        return (hAsync(Host, { key: '7a68c75f464a73f44ca5e9b586f14074f8997ef7' }, hAsync("slot", { key: '844e291a25b0761e00b3d491fca937b652d9289b', name: "trigger" }), hAsync("nv-popover", { key: 'cb231870f62e952483ee32fe07e92c03dfa18acf', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, hAsync("slot", { key: 'b59e6458addf054a4ef370a50498bb6620676166', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuStyle0; }
@@ -8958,7 +9429,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '8d32b4cb618de8d8c88e813b5cb446eb4e667f27' }, hAsync("slot", { key: 'bb4688a7ed334a32c1033c340d765e5abc8aef4a', name: "trigger" }), hAsync("div", { key: '2e3847dd205be87742f3794f806ed1d903d88f14', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '8259476267d3c14043c649b95d875452909e1e08', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: 'e6d68d89876b7353c0abd349b7c3bc1bfe790a76', name: "content" }))));
+        return (hAsync(Host, { key: '4af33bb11f90830320677d0c7e9d1c7e6e6fe3e4' }, hAsync("slot", { key: '7c1a62939502345813b4f2c9b33f4a9d3bbb6f4e', name: "trigger" }), hAsync("div", { key: '52c93de45bcb3411e75414604d71f5f28ead7450', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'd12fde333309d12224c5bf0a4959c9549396755b', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '8c8475dd19a1373d5bdd3f679a241e5e0accb5a1', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -9003,7 +9474,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b6a2c143bf767ab622d0305574be11c71a770421' }, hAsync("slot", { key: '8665290a25fdb12165d52436fc64d1a11ff93814' })));
+        return (hAsync(Host, { key: '0509e4652dd679fbfb5b4eadb3aaef8979d879e7' }, hAsync("slot", { key: '75a3a0b83eec4f573a3e54340b3679dc8f529fda' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -9036,7 +9507,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '4c8889bb870137f5c3aa8fc499c26fc77bc6fba1', 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: 'dbd5b334a0e6ee5aa3bbc0431d44d81933f1c05c' })));
+        return (hAsync(Host, { key: 'c644c9312f247c75b8eecc0903fb16d36e9ed4e5', 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: '654459698308057e20afc68fc046364cd32c2512' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -9081,7 +9552,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7fbaa673028556f15b8c15a863f066d79b7b844e' }, hAsync("slot", { key: 'b9007b3c3326ed7bb3bea05c2b2ad90d49b25a45' }), hAsync("nv-popover", { key: '9a72b61bf4af4a769ba5ad991925bc982a440f93', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'aa7d584e0db97792915f5460a7760ad16f45c5ba', slot: "content" }, this.message), hAsync("slot", { key: 'fc32501ada94b526adf6e9fcb71ec355f72a163d', name: "content" }))));
+        return (hAsync(Host, { key: '46f64d21b9d3b2b69b46e9c1314d1f23594b1475' }, hAsync("slot", { key: '92264616d33e8cea569b86e03108680a9cd77ce6' }), hAsync("nv-popover", { key: '23eabf680f27fcdd0eb924bd48cadcd88e057f6f', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'e61c681be642de5a1a4dd113c809bf3939970141', slot: "content" }, this.message), hAsync("slot", { key: 'bd44dcd5180244856cab6df5840e6c8bb2c07e32', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -9100,6 +9571,7 @@ class NvTooltip {
 }
 
 registerComponents([
+  NVFieldDropDown,
   NvAlert,
   NvAvatar,
   NvBadge,
@@ -9107,6 +9579,7 @@ registerComponents([
   NvButton,
   NvCol,
   NvFieldcheckbox,
+  NvFielddropdownitem,
   NvFieldnumber,
   NvFieldpassword,
   NvFieldradio,
@@ -9237,7 +9710,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.22.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -21210,6 +21683,9 @@ var MockAnchorElement = class extends MockHTMLElement {
     this.setAttribute("href", value);
   }
   get pathname() {
+    if (!this.href) {
+      return "";
+    }
     return new URL(this.href).pathname;
   }
 };