@nova-design-system/nova-webcomponents 3.0.0-beta.17 → 3.0.0-beta.20

package/hydrate/index.mjs

@@ -124,7 +124,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'native';
-const BUILD = /* native */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: 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) {
@@ -1592,6 +1592,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
+      fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
       Cstr = elm.constructor;
       const cmpTag = elm.localName;
@@ -1619,6 +1620,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
 };
 var fireConnectedCallback = (instance) => {
+  {
+    safeCall(instance, "connectedCallback");
+  }
 };
 
 // src/runtime/connected-callback.ts
@@ -1655,8 +1659,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();
@@ -5189,6 +5195,460 @@ class NvFieldcheckbox {
     }; }
 }
 
+const nvFielddropdownitemcheckCss = "@charset \"UTF-8\";nv-fielddropdownitemcheck slot-fb{all:unset;}nv-fielddropdownitemcheck nv-fieldcheckbox input[type=checkbox]{all:unset;display:inline-block;margin:0;padding:0;width:20px;height:20px}";
+var NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
+
+class NvFielddropdownitemcheck {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemChecked = createEvent(this, "itemChecked", 7);
+        this.handleCheckboxToggle = () => {
+            if (this.disabled)
+                return; // Ignore interactions si désactivé
+            this.checked = !this.checked;
+            this.itemChecked.emit({
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+            console.log('itemChecked emitted:', {
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+        };
+        this.checked = false;
+        this.value = undefined;
+        this.label = undefined;
+        this.description = undefined;
+        this.group = undefined;
+        this.disabled = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: 'a12664b18cb98c654b7e13b1883775baf96f174d', onClick: this.handleCheckboxToggle }, hAsync("div", { key: '279a9e736c4e12c214bff691494b1bbc8efea808' }, hAsync("nv-fieldcheckbox", { key: 'b278a88b87f8d5137cd9bdf28b332a28938ef1e2', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option" }))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return NvFielddropdownitemcheckStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 0,
+        "$tagName$": "nv-fielddropdownitemcheck",
+        "$members$": {
+            "checked": [1540],
+            "value": [513],
+            "label": [513],
+            "description": [513],
+            "group": [513],
+            "disabled": [516]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["checked", "checked"], ["value", "value"], ["label", "label"], ["description", "description"], ["group", "group"], ["disabled", "disabled"]]
+    }; }
+}
+
+const nvFieldmultiselectCss = "nv-fieldmultiselect{--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-fieldmultiselect[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-fieldmultiselect[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-fieldmultiselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldmultiselect 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-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{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-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect: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-fieldmultiselect .input-container-multiselect:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect 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-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect 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-fieldmultiselect .input-container-multiselect .toggle-dropdown-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldmultiselect .input-container-multiselect.focus-within,nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .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-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .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-fieldmultiselect .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-fieldmultiselect hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}.input-container-multiselect.focus-within,.input-container-multiselect:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}";
+var NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
+
+// import { DropdownItemSelectedEventDetail } from '../nv-fielddropdownitemcheck/DropdownItemSelectedEventDetail';
+/**
+ * @slot content - The content of the list.
+ * @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 NvFieldmultiselect {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.multiselectChange = createEvent(this, "multiselectChange", 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.maxHeight = '200px';
+        this.selectedValues = [];
+        this.badgeLabel = 'selected';
+        this.options = [];
+        this.clearable = false;
+        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;
+    }
+    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();
+    }
+    /**
+     * Listen for the `itemChecked` event emitted by child items.
+     * Updates the selected values accordingly.
+     * @param {CustomEvent<{ value: string; checked: boolean }>} event - The event object containing the selected value and its checked state.
+     */
+    handleItemChecked(event) {
+        if (this.disabled || this.readonly)
+            return;
+        const { value, checked } = event.detail;
+        // Si une valeur est définie, met à jour `selectedValues`.
+        if (value) {
+            if (checked) {
+                // Ajoute la valeur si elle est cochée
+                this.selectedValues = [...this.selectedValues, value];
+            }
+            else {
+                // Retire la valeur si elle est décochée
+                this.selectedValues = this.selectedValues.filter(val => val !== value);
+            }
+        }
+        // Émet l'événement `multiselectChange` avec la nouvelle liste des valeurs sélectionnées
+        this.multiselectChange.emit(this.selectedValues);
+    }
+    //#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-fielddropdownitemcheck'));
+        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-fielddropdownitemcheck'));
+        // Remove the "no results found" item if it exists
+        const existingEmptyItem = this.el.querySelector('nv-fielddropdownitemcheck[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-fielddropdownitemcheck');
+            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-fielddropdownitemcheck'));
+        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();
+                // Focus sur le premier élément si la liste n'est pas filtrable
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        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');
+                item.focus();
+            }
+            else {
+                item.classList.remove('highlighted');
+                item.setAttribute('tabindex', '-1');
+            }
+        });
+    }
+    focusFirstItem() {
+        const firstItem = this.el.querySelector('nv-fielddropdownitemcheck');
+        if (firstItem) {
+            firstItem.setAttribute('tabindex', '0');
+            firstItem.classList.add('highlighted');
+            firstItem.focus();
+        }
+        else {
+            console.warn('No first item found to focus');
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: '8491eef8fe6d3df7b6cc1992c2894e8dd2513a6c' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '79c49fdbcdf7ca404880d318c59afe5096bf4b9e', htmlFor: this.inputId }, hAsync("slot", { key: 'f4eba554fc97e2ae1a24f01a20d3e37ab84acae4', name: "label" }, this.label))), hAsync("nv-popover", { key: '46b5a94caa12e50b592de484b158ba67715cec14', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { key: '473a98f6c7636d65b1d9d35beb6f3c5ba012179f', class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { key: '4038e51342c18e735ea2c164a1658f0928f3f7e1', name: "before-input" }), hAsync("div", { key: 'cb53b835fb716e20f79593cdf7874f64987a8cc5', class: "input-container-multiselect", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'c5879628d28b7901bca1da93499ed83f661e1fe3', 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: '8459a377fbee5cebc457bcc53385a6e8832e4781', 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: 'f338a93f4eaac472817ce32f72695e8ea026b3d7', name: "after-input" })), hAsync("slot", { key: 'e9c871135bbed4f64113ab6a7ff5342a3374860e', name: "content" }, hAsync("ul", { key: 'd129ae2fcf0d84d7337b886fbd7a0b64dc6e0c3e' }, this.options.map(option => (hAsync("li", { class: {
+                'dropdown-item': true,
+                'is-selected': this.selectedValues.includes(option.value),
+            }, "aria-selected": this.selectedValues
+                .includes(option.value)
+                .toString(), role: "option" }, hAsync("nv-fielddropdownitemcheck", { value: option.value, label: option.label, checked: this.selectedValues.includes(option.value) }))))))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '66ce27f7c0ee316381c12664130518e84e080fd4', class: "description" }, hAsync("slot", { key: '9a7bd32d04f2b451fff8d6546273097c7bf8b0cc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ffcc1911fb6485e2b34dbb1dfb775d2800bfd940', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'd77fe0f486d0d0e9a905463f85fb91edbf7c0854', 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 NvFieldmultiselectStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 68,
+        "$tagName$": "nv-fieldmultiselect",
+        "$members$": {
+            "maxHeight": [513, "max-height"],
+            "badgeLabel": [513, "badge-label"],
+            "options": [16],
+            "clearable": [516],
+            "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],
+            "selectedValues": [32],
+            "filterText": [32],
+            "isFilterable": [32],
+            "getFilterText": [64]
+        },
+        "$listeners$": [[0, "openChanged", "handleOpenChanged"], [0, "itemChecked", "handleItemChecked"], [0, "keydown", "handleKeyDown"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["maxHeight", "max-height"], ["badgeLabel", "badge-label"], ["clearable", "clearable"], ["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"]]
+    }; }
+}
+
 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;
 
@@ -5268,9 +5728,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: 'a3b8d64f764fd236278e67c626327b211a2bc30a' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'bb5d9824708bf35f1b73dbfb4ab30e6fede19f44', htmlFor: this.inputId }, hAsync("slot", { key: 'eda2d2f07714a1095334ba2706ccbb87d815bd33', name: "label" }, this.label))), hAsync("div", { key: '428c24da018c0f4f05343534fea2a37799172fc2', class: "input-wrapper" }, hAsync("slot", { key: '9a58edf56e297b0ebcd184baca8e146b303b6f8e', name: "before-input" }), hAsync("div", { key: '49114d52c107caea529a16f7732b760d988f9afb', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'b3c22781468a05404188d71975803ec11b0fad62', name: "leading-input" }), hAsync("input", { key: '597370e1fa23eb83a1a5f2580870ad462c7cbae1', 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: '6a875290196c12c777566cf27ec9dcfca6d0c798', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '678953d63353f9c245f2908c82ec24d3b599306a', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '0e9b75ef761a5b82190ba2ad1f5a5fc5b63301fc', class: "stepper-spacer" }), hAsync("div", { key: 'a100967e0c8f985808ee6f221521e85580a22e4b', class: "stepper" }, hAsync("nv-icon", { key: 'd90e5e4f4de5a4f0cdceb5384bf643a42757a84b', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: '09023dc13c43dbe9a75382105bd9bdff1c7aa97c', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: '3a558b9d20cc2b28bb8ac08ee1305b8026c5c5b8', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c4ab45b3528fd0e21439f8966faf725d6cbbd054', class: "description" }, hAsync("slot", { key: 'f0e4fbf1c6c04476d97034fedea2e9bc4bbc4463', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'a639b3720d2cf584d22896676e90ff82ab08e2d6', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '4e6c53cec245b254207fb57452568306fa7777b7', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5371,9 +5831,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: '3b83c474000bd8a34aeb5f7363d49de26b2c2680' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '59f247422c68fa70680cd556ff5cbe7d7dd929b2', htmlFor: this.inputId }, hAsync("slot", { key: 'c9bb7201668cf2457f59a55c976a816e5c77252c', name: "label" }, this.label))), hAsync("div", { key: 'd947f2a1b906b101714875ec08a24c7c0d1f4909', class: "input-wrapper" }, hAsync("slot", { key: 'f023af3d9ed156a27eb3623a17670cc8813c5bb8', name: "before-input" }), hAsync("div", { key: '9581ad75398638ebd54d3c7e54510dfbbf8497db', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'c946a46456e237a0f9a40659c453eceb3147f129', name: "leading-input" }), hAsync("input", { key: '47b731bf7a8bd5a9ad37855971fbd8f1efda1677', 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: '3076ce72bead47d1e903bcbbac0e857020126d58', 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: '168a6245ce8bd32685c9a628117876987a0d7347', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: 'ac33fe20e562dff96ae1554455900b59798be874', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '2983712f72ee3d5188e5a29893b38010dcea7b6b', class: "description" }, hAsync("slot", { key: 'c6523453b9fb2da50413f5ce643f4d89ab352dcb', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '7461dd7d908c3f972776cd22ebd157a32f5b8f3c', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'ea012f1732fc455e797aef90f10ea86a6ce947da', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5475,9 +5935,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: 'a8b1186795a3dad169078bce07f41255d81ee5c7', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '6dbd0a12f435706e15ea563f20e09ed07ad7acb5', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: 'b0dd4b9e94b34746992c999e0670168b9c426fd4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3322b627728e3c12e0b964350af8708143029bde', htmlFor: this.inputId }, hAsync("slot", { key: '72e61a533cc32c5cd447d1eaf74f599907b526e8', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '4e136ff319c090deba878ca3b64939484c1545c2', class: "description" }, hAsync("slot", { key: '41ab10aeac57c627096f06df69ebd1bb7e8d2341', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '675e61e361a4a0e1863156838f8580d5fd48b14b', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '182947d22634957b571a7d9260bde3a7f6f8d8c1', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5779,13 +6239,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: '311593e5930fd3ce1f973f351915526783b8a3ec' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '1075e1f17c0ced7dfe2910a26e868d48acb1d42e', htmlFor: this.selectId }, hAsync("slot", { key: '4e302b832bb1024c6a3d7ab5c1eb0a1fcc9c1988', name: "label" }, this.label))), hAsync("div", { key: '5bd2d63555668b337b646ad68cb915391d4c42f3', class: "select-wrapper" }, hAsync("slot", { key: '59f848679390b13a2e6677e5ab80091353a3ce37', name: "before-input" }), hAsync("div", { key: '55621c6e06cc7ce1f47afa70ad94fa1644f10887', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '14b265ca1217598ca9738983398fec805ca0bb78', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '33338c73698f8a032f40e296e02837db8f85bbd6', 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: '6e8e427b566615f893a08e434a4c3f85c06ac2a2', 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: '32217461d75c0bc91b2fe73e39fd6a493746f0a9' })), this.internalReadonly && (hAsync("nv-icon", { key: 'ec175d87b3367620f20b60155cf4b8be224ab449', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: '4fdb2c10f5ed1151431628873b8bf7722e2b68d0', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '0c20543304333b87724f630bf4790ba3d7d16b16', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '2cd7c2734e2c52233a0d782c76f967af884764e1', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd7c4b5632f678d092a5ff95a00d4df3acf8afefc', class: "description", id: `${this.selectId}-description` }, hAsync("slot", { key: 'f0a51369f018fef3b69811726d34634a4274ebab', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'c72d98d88fa763042ca6a97a53320d4cfec3ce00', class: "error-description", id: `${this.selectId}-error` }, hAsync("slot", { key: '50de0d322e4a8a0d57231c114186a646529f0276', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5895,9 +6355,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: '30cccf8007d80765860eb1344d9d280d3b49ea42' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'a2c1726e3102b4d14dd92d02083f7ec6c0cd411e', htmlFor: this.inputId }, hAsync("slot", { key: 'dde6902e511d4436302b1d82bae7799a66120394', name: "label" }, this.label))), hAsync("div", { key: '72ae532cf928fa102e1b22225feffc351f1bc457', class: "input-wrapper" }, hAsync("slot", { key: '52b5464d5de9cbfe95bdd35c4619ed1fc9fe6f78', name: "before-input" }), hAsync("div", { key: '206542310bccb142eeeaf4abda370a308ae254a9', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '41b1c75e25e18212cd730bff7daee7502c847be7', name: "leading-input" }), hAsync("input", { key: '57e219bb9680e134f741b031958c9463e5d6d24c', 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: '6fbcacfe2acd35748cff049a011c3c957ee0c909', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '46da7a1c2805c6ad1f7c5ae201d4de3e1adf2e17', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'f2a341dcb2d7bf6cd094812b000023b183cc9c9e', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd75de043cf06e26e688fdd799ee3c78bffed7e82', class: "description" }, hAsync("slot", { key: '6f2ca8884fad345357651b798aab559ced31d12c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ec4ddeeb8677b7483eaef7ddd7c51446d4c8d5aa', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '077d8437bcb354900cd9d87ec721cb0f627c3877', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -6066,9 +6526,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: '0598ad37f0c12f0fda513fd7ffe67225d2a44a4d' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '1cd2b826969fea01765369aedd6f4d5bce7c6a70', htmlFor: this.textareaId }, hAsync("slot", { key: 'dc05b50149123674953a9005d6db8f87eafe78ca', name: "label" }, this.label))), hAsync("div", { key: 'd74e98654af707b2fd374f6c7e0f0416a240514d', class: "textarea-wrapper" }, hAsync("div", { key: '8a2314259104f40c7deb4b28bca88e0926803895', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: '7b477d27aa4abdacab00443e45564fd1202bbf9b', 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: '17b2890bacaae204b5e8f1b9da48038317a16a9c', class: "description" }, hAsync("slot", { key: 'f32d1b730ec843a3c8c19f00983f2c9f041c8fcd', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '7ecb127dc057e5d2fb9e330d9c79c0f12ed14b8e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '621fd3cb88771242aeb87646e41711f79bfaae17', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -6154,8 +6614,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: '367c438a430481a14f0b9b772c898f97c8d6da4d', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: 'b1a29fbcab71e95d9ef87088316c600b5467f533', class: "input-container" }, hAsync("input", { key: '7fe8a8c9c2e9e05ba6fb4511606cc90306cf0de4', 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: '0ffb1fd89f31b7710a20340144d52feb93ca4360', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0086b54008008dadb6d3501d2632fe96e223af03', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'cd83067ab5172bd90ddbbd3c925a78576aa6e139', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'aec1639e7f157d372ec095cda64813b15a9c9c39', class: "description" }, hAsync("slot", { key: '9416422ec7f93b40c199b3202c4546e609313486', name: "description" }, this.description))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6233,7 +6693,7 @@ class NvIcon {
     //#region RENDER
     render() {
         //const iconSprite = getAssetPath('assets/icon-sprite.svg');
-        return (hAsync(Host, { key: '83ef29b29944ef1a761334ef5738f1073122f5d1', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '63684e8f1e5fc0a102457f5c73d30e4fcc66eb7e', 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: '6c80c9543535b02710b3892e7ca6c94fe24c2186', href: `${this.spriteUrl}#${this.name}` }))));
+        return (hAsync(Host, { key: '6831debeaf9f3b8fb3ade7132fa985b01104e423', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '6319922bd5537f4098b226aa9945719ece686fb2', 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: '47e3a338e2e1e40ccccd70973f55939829b9cde5', href: `${this.spriteUrl}#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -6330,7 +6790,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: 'dc918224a0fcbea4bc0d299fcd86a066c9fb2a6e', 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: '7f2484c41aa8b8dc2d6e40f4174c486e95efe65b', size: this.size }), !this.loading && hAsync("nv-icon", { key: '772c5d352e9eb65911ee68fcbeeb6f1b1ad3606a', name: this.name, size: this.size }), hAsync("slot", { key: 'e4bdc61098a178a8c12a898410b5131105a1b6f4' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -6372,7 +6832,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: 'd6bc07fa876b14f8332275b0013eb0957463448d', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -6566,7 +7026,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: '080871f790f3725ee0c627ff6f2c23b0b9c67ed9' }, hAsync("slot", { key: '8b2b2392d606f14b61c7c3ea799273948b045d0d', name: "trigger" }), hAsync("nv-popover", { key: '33bae39e185e26a23aa0d7d9d2ac7b0f35658fd9', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, hAsync("slot", { key: 'f50743c2ed89866882266413e595a03185bd329e', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuStyle0; }
@@ -8954,7 +9414,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: '305452892fe5a5889aa81ad8a794f91407965a82' }, hAsync("slot", { key: 'c82770ebfafb46c8e5ceb55b71199873ac7ca039', name: "trigger" }), hAsync("div", { key: '02646f26b908fa4103ebb0a44233a833713c57bc', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: 'dc654f5595b1e9b2fae2b8eab2d8716ad8c1fcee', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '0d2dd2e1fca7f73815add0cd4ff85b41932f01fb', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8999,7 +9459,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b6a2c143bf767ab622d0305574be11c71a770421' }, hAsync("slot", { key: '8665290a25fdb12165d52436fc64d1a11ff93814' })));
+        return (hAsync(Host, { key: 'bccdd262d6d7bcec9a25422886173b75e84e8681' }, hAsync("slot", { key: '5e16847683228465a72ec2f5b03de429cb881d41' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -9032,7 +9492,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: 'a06b3c85ea07e19125e1b8b23561869de8c8edcc', 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: '8d902ed2b636bb6d1d8930c6d89117c7a1081707' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -9077,7 +9537,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: 'adb606648ce4c11bb1293007a640f90603c66317' }, hAsync("slot", { key: 'eef7d009694b5cd1010c3bf2ef40f46e726f1306' }), hAsync("nv-popover", { key: '5ab73b344c52709cae8e27b519e27b9297f9e048', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '999764402770b8a19402d2c87c2994aead46ba87', slot: "content" }, this.message), hAsync("slot", { key: '8c4f29a7acb4469ad8a4bced0defc2f8021f125a', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -9103,6 +9563,8 @@ registerComponents([
   NvButton,
   NvCol,
   NvFieldcheckbox,
+  NvFielddropdownitemcheck,
+  NvFieldmultiselect,
   NvFieldnumber,
   NvFieldpassword,
   NvFieldradio,