@nova-design-system/nova-webcomponents 3.0.0-beta.34 → 3.0.0-beta.36

package/hydrate/index.mjs

@@ -9573,6 +9573,1167 @@ class NvFielddropdownitem {
     }; }
 }
 
+const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{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);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Indicates whether the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * when the child <nv-fieldcheckbox> change its `checked` state,
+         * update `this.checked` and emit `itemChecked`.
+         * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.
+         */
+        this.onFieldcheckboxChanged = (event) => {
+            if (this.disabled)
+                return;
+            // NvFieldcheckbox has emitted checkedChanged
+            this.checked = event.detail; // get the new state
+            this.itemChecked.emit({
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+        };
+    }
+    render() {
+        return (hAsync(Host, { key: '790fd77fd927ace8081971a16d37896b44fe95f5' }, hAsync("div", { key: '8dbd46bbc2cd9bd83a81117bd66f62bdef3ece88' }, hAsync("nv-fieldcheckbox", { key: '1564df63e41efa0dce2f2b47aefc61d7b41bbffc', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged }))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return NvFielddropdownitemcheckStyle0; }
+    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)}.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)}.no-results-message{text-align:center;padding:10px;color:var(--nv-field-error-text, #999)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--multiselect-divider-color, #ccc);margin:8px 0}";
+var NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
+
+/**
+ * @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.dropdownItemSelected = createEvent(this, "dropdownItemSelected", 7);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        this.multiselectChange = createEvent(this, "multiselectChange", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4();
+        /**
+         * Defines the maximum height of the multiselect list when open.
+         */
+        this.maxHeight = '200px';
+        /**
+         * Text for the badge showing the number of selected items.
+         */
+        this.badgeLabel = '';
+        /**
+         * The text to display when no items match the filter.
+         */
+        this.emptyresult = 'No results found';
+        /**
+         * Marks the input field as required.
+         */
+        this.required = false;
+        /**
+         * Alters the input field's appearance to indicate an error.
+         */
+        this.error = false;
+        /**
+         * Display the input field's content without allowing users to change it.
+         */
+        this.readonly = false;
+        /**
+         * Disables the input field.
+         */
+        this.disabled = false;
+        /**
+         * The autocomplete prop for faster input filling.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Enables or disables the filtering feature for the multiselect items.
+         */
+        this.filterable = false;
+        /**
+         * State of the multiselect popover.
+         */
+        this.open = false;
+        /**
+         * Options configuration for the multiselect items.
+         */
+        this.parsedOptions = [];
+        /**
+         * List of selected values in the multiselect.
+         */
+        this.selectedValues = [];
+        /**
+         * Sorted options for display.
+         */
+        this.sortedOptions = [];
+        /**
+         * The text entered by the user for filtering multiselect items.
+         */
+        this.filterText = '';
+        /**
+         * Determines whether the multiselect is filterable.
+         */
+        this.isFilterable = this.filterable;
+        /**
+         * Delay in milliseconds before the search is triggered when typing in the filter input.
+         * @default 300
+         */
+        this.debounceDelay = 300;
+        /**
+         * State for the mode of the multiselect.
+         * @type {'options' | 'slots'}
+         * @default 'options'
+         */
+        this.modeState = 'options'; // Default value
+        this.isHandlingEscape = false;
+        /**x
+         * Handle badge close for options mode.
+         */
+        this.handleBadgeCloseOptions = () => {
+            this.selectedValues = [];
+            this.multiselectChange.emit(this.selectedValues);
+            // Uncheck all elements
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                item.checked = false;
+                item.style.display = '';
+            });
+            // Reorder options without the divider since there are no selected elements
+            this.parsedOptions = this.parsedOptions.filter(option => !option.isDivider);
+            // Reorder options without the divider since there are no selected elements
+            this.reorderOptionsContent();
+        };
+        /**
+         * Handle badge close for slots mode.
+         */
+        this.handleBadgeCloseSlots = () => {
+            this.selectedValues = [];
+            this.multiselectChange.emit(this.selectedValues);
+            // Uncheck all elements
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                item.checked = false;
+                item.style.display = '';
+            });
+            // Reorder slot content
+            this.reorderSlotContent();
+        };
+        /**
+         * Handle popover close
+         */
+        this.handlePopoverClose = () => {
+            // If we are handling Escape, ignore this event
+            if (this.isHandlingEscape) {
+                return;
+            }
+            this.open = false;
+            this.filterText = '';
+            // Only reorder based on the mode
+            if (this.modeState === 'options') {
+                this.reorderOptionsContent();
+            }
+            else {
+                this.reorderSlotContent();
+            }
+            // Reset filter if needed
+            if (this.filterable) {
+                this.resetFilter();
+            }
+        };
+        /**
+         * Handle input blur for options mode.
+         */
+        this.handleInputBlurOptions = () => {
+            setTimeout(() => {
+                if (!this.el.contains(document.activeElement)) {
+                    // Close the popover without affecting the divider
+                    this.open = false;
+                    this.popoverElement.hide();
+                    // Reset filter if needed
+                    if (this.filterable) {
+                        this.filterText = '';
+                        this.resetFilter();
+                    }
+                }
+            }, 150);
+        };
+        /**
+         * Handle click on the input container for options mode.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleInputContainerClickOptions = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const target = event.target;
+            if (target.tagName === 'P' || target.tagName === 'SPAN') {
+                this.open = true;
+                this.popoverElement.show();
+                const inputContainer = this.el.querySelector('.input-container');
+                if (inputContainer) {
+                    inputContainer.classList.add('focus-within');
+                    const removeFocusWithin = () => {
+                        inputContainer.classList.remove('focus-within');
+                    };
+                    this.popoverElement.addEventListener('hide', removeFocusWithin);
+                }
+            }
+        };
+        /**
+         * Handle click on the input container for slots mode.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleInputContainerClickSlots = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const target = event.target;
+            if (target.tagName === 'P' || target.tagName === 'SPAN') {
+                this.open = true;
+                this.popoverElement.show();
+                const inputContainer = this.el.querySelector('.input-container');
+                if (inputContainer) {
+                    inputContainer.classList.add('focus-within');
+                    const removeFocusWithin = () => {
+                        inputContainer.classList.remove('focus-within');
+                    };
+                    this.popoverElement.addEventListener('hide', removeFocusWithin);
+                }
+            }
+        };
+        /**
+         * Handle input change for options mode.
+         * @param {Event} event - The input event.
+         */
+        this.handleInputOptions = (event) => {
+            if (!this.filterable)
+                return;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const input = event.target;
+            this.value = input.value;
+            this.valueChanged.emit(this.value);
+            // Clear any existing timer
+            if (this.debounceTimer) {
+                window.clearTimeout(this.debounceTimer);
+            }
+            // Set a new timer for filtering
+            this.debounceTimer = window.setTimeout(() => {
+                this.filterText = input.value.toLowerCase();
+                this.filterItemsOption();
+            }, this.debounceDelay);
+        };
+        /**
+         * Handle input change for slots mode
+         * @param {Event} event - The input event.
+         */
+        this.handleInputSlots = (event) => {
+            if (!this.filterable)
+                return;
+            if (this.disabled || this.readonly)
+                return;
+            const input = event.target;
+            this.value = input.value;
+            this.valueChanged.emit(this.value);
+            // Clear any existing timer
+            if (this.debounceTimer) {
+                window.clearTimeout(this.debounceTimer);
+            }
+            // Set a new timer for filtering
+            this.debounceTimer = window.setTimeout(() => {
+                this.filterText = input.value.toLowerCase();
+                this.filterSlotsItems();
+            }, this.debounceDelay);
+        };
+        /**
+         * Handle input focus for options mode.
+         */
+        this.handleInputFocusOptions = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.open = true;
+        };
+        /**
+         * Handle input focus for slots mode.
+         */
+        this.handleInputFocusSlots = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.open = true;
+        };
+        /**
+         * Handle input blur for slots mode.
+         */
+        this.handleInputBlurSlots = () => {
+            setTimeout(() => {
+                if (!this.el.contains(document.activeElement)) {
+                    // Fermer le popover sans affecter le divider
+                    this.open = false;
+                    this.popoverElement.hide();
+                    // Reset filter if needed
+                    if (this.filterable) {
+                        this.filterText = '';
+                        this.resetFilter();
+                    }
+                }
+            }, 150);
+        };
+        /**
+         * Toggle the multiselect popover for options mode.
+         */
+        this.togglePopoverOptions = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            if (this.open) {
+                this.handlePopoverClose();
+            }
+            else {
+                this.open = true;
+                this.popoverElement.show();
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+            }
+        };
+        /**
+         * Toggle the multiselect popover for slots mode.
+         */
+        this.togglePopoverSlots = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            if (this.open) {
+                this.handlePopoverClose();
+            }
+            else {
+                this.open = true;
+                this.popoverElement.show();
+                if (!this.filterable) {
+                    this.focusFirstItem();
+                }
+            }
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Subscribe to click outside event.
+     */
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+    }
+    /**
+     * Set the mode state and handle options change.
+     */
+    componentWillLoad() {
+        this.modeState = this.mode;
+        // Don't call handleOptionsChange if we are in slots mode
+        if (this.modeState === 'options') {
+            this.handleOptionsChange(this.options);
+        }
+        // Add the listener for the hide event
+        requestAnimationFrame(() => {
+            if (this.popoverElement) {
+                this.popoverElement.addEventListener('hide', () => {
+                    this.handlePopoverClose();
+                });
+            }
+        });
+        // Specific initialization for slots mode
+        if (this.modeState === 'slots') {
+            Promise.resolve().then(() => {
+                const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+                // Initialize selectedValues with checked items
+                this.selectedValues = items
+                    .filter(item => item.hasAttribute('checked'))
+                    .map(item => item.getAttribute('value') || '');
+                // Force a reorder after initialization
+                requestAnimationFrame(() => {
+                    this.reorderSlotContent();
+                });
+            });
+        }
+        // Initialize the sorted options array with the parsed options for initial rendering
+        if (this.modeState === 'options') {
+            this.sortedOptions = [...this.parsedOptions];
+        }
+        // Apply filtering if the multiselect is filterable and there is a value
+        if (this.filterable && this.value) {
+            this.filterText = String(this.value).toLocaleLowerCase();
+            this.filterItems();
+        }
+        else {
+            // Reset visibility state of all dropdown items
+            this.resetFilter();
+        }
+    }
+    /**
+     * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
+     */
+    componentDidLoad() {
+        if (this.modeState === 'options') {
+            requestAnimationFrame(() => {
+                this.reorderOptionsContent();
+            });
+        }
+    }
+    /**
+     * Unsubscribe from click outside event.
+     */
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+        // Remove the listener for the hide event
+        if (this.popoverElement) {
+            this.popoverElement.removeEventListener('hide', () => {
+                this.handlePopoverClose();
+            });
+        }
+    }
+    /**
+     * Emitted when the input loses focus.
+     * @param {CustomEvent<boolean>} event - The event object containing the focus state.
+     */
+    handleOpenChanged(event) {
+        // Update the open state of popover
+        this.open = event.detail;
+        if (this.open) {
+            if (this.filterText) {
+                this.filterItems();
+            }
+        }
+        else if (this.modeState === 'options') {
+            this.reorderOptionsContent();
+        }
+        else {
+            this.reorderSlotContent();
+        }
+    }
+    /**
+     * Listen for the `itemChecked` event emitted by child items.
+     * @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;
+        if (value !== undefined && value !== null) {
+            const newSelectedValues = [...this.selectedValues];
+            const valueIndex = newSelectedValues.indexOf(value);
+            if (checked && valueIndex === -1) {
+                newSelectedValues.push(value);
+            }
+            else if (!checked && valueIndex > -1) {
+                newSelectedValues.splice(valueIndex, 1);
+            }
+            // Update the state and emit the event only if the selection has changed
+            if (JSON.stringify(this.selectedValues) !==
+                JSON.stringify(newSelectedValues)) {
+                this.selectedValues = newSelectedValues;
+                // Use requestAnimationFrame to ensure the state is updated before emitting the event
+                requestAnimationFrame(() => {
+                    this.multiselectChange.emit(this.selectedValues);
+                });
+            }
+        }
+        else {
+            console.warn('Received itemChecked event with undefined or null value'); // Warning log
+        }
+    }
+    /**
+     * Emitted when the options change.
+     * @param {string | Array<{label: string, value: string, isDivider?: boolean, disabled?: boolean, description?: string, checked?: boolean}>} newValue - The new value of the options.
+     */
+    handleOptionsChange(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                const parsedOpts = JSON.parse(newValue);
+                this.selectedValues = parsedOpts
+                    .filter(option => option.checked)
+                    .map(option => option.value);
+                this.parsedOptions = [...parsedOpts];
+            }
+            catch (error) {
+                console.error('Error parsing options:', error);
+                this.parsedOptions = [];
+            }
+        }
+        else if (Array.isArray(newValue)) {
+            this.selectedValues = newValue
+                .filter(option => option.checked)
+                .map(option => option.value);
+            this.parsedOptions = [...newValue];
+        }
+        else {
+            this.parsedOptions = [];
+        }
+        // Wait for the options to be fully loaded
+        Promise.resolve().then(() => {
+            requestAnimationFrame(() => {
+                if (this.modeState === 'options') {
+                    this.reorderOptionsContent();
+                }
+            });
+        });
+    }
+    /**
+     * Emitted when the value changes.
+     */
+    watchValueHandler() {
+        // Handle value change and update the corresponding multiselect item if it exists
+        this.setInitialSelection();
+    }
+    /**
+     * Emitted when the filterable property changes.
+     * @param {boolean} newValue - The new value of the filterable property.
+     */
+    watchFilterableHandler(newValue) {
+        this.isFilterable = newValue;
+        this.filterable = newValue;
+    }
+    // Add a listener for the slot content
+    handleSlotChange(event) {
+        // Check: we only want to reorder if it's the "content" slot
+        const slot = event.target;
+        if (slot && slot.name === 'content') {
+            // To give other platforms (VueJS, React, etc.) time to insert all their items,
+            // we place the reorder in a requestAnimationFrame
+            requestAnimationFrame(() => {
+                this.reorderSlotContent();
+            });
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Retrieves the current filter text entered by the user.
+     * @returns {string} The filter text.
+     */
+    async getFilterText() {
+        return this.filterText;
+    }
+    /**
+     * 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;
+            }
+        }
+    }
+    /**
+     * Reset the filter and make all items visible.
+     */
+    async resetFilter() {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Reset visibility state of all dropdown items
+        items.forEach(item => {
+            item.style.display = '';
+        });
+        // Clean up filter-related UI elements
+        const ul = this.el.querySelector('ul');
+        if (ul) {
+            const emptyMessage = ul.querySelector('[data-empty]');
+            if (emptyMessage)
+                emptyMessage.remove();
+            // Reorder with divider if needed
+            const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+            const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            if (selectedItems.length > 0) {
+                this.manageDivider(ul, selectedItems, unselectedItems);
+            }
+        }
+    }
+    /**
+     * Returns the list of selected values.
+     * @returns {string[]} The selected values.
+     */
+    async getSelectedValues() {
+        return this.selectedValues;
+    }
+    /**
+     * Reorder the content of the slot.
+     */
+    reorderSlotContent() {
+        if (this.modeState === 'options')
+            return;
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // Remove all existing <hr class="multiselect-divider">
+        ul.querySelectorAll('hr.multiselect-divider').forEach(divider => divider.remove());
+        // Retrieve all items (not hidden)
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
+        // If you possibly have a "No results" message:
+        const hasEmptyMessage = ul.querySelector('[data-empty]');
+        if (hasEmptyMessage) {
+            // if there is a "No results found" message, do not reorder
+            return;
+        }
+        // Separate checked vs unchecked
+        const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        // Reinsert CHECKED items FIRST
+        // appendChild() moves the element without recreating it
+        // this is not trigger a re-rendering of the component in the platforms
+        selectedItems.forEach(item => {
+            ul.appendChild(item); // <-- The <li> (or <nv-fielddropdownitemcheck>) is just "moved" to the end of the list
+        });
+        // Add a divider if needed
+        if (selectedItems.length > 0 && unselectedItems.length > 0) {
+            const divider = document.createElement('hr');
+            divider.className = 'multiselect-divider';
+            ul.appendChild(divider);
+        }
+        // Reinsert UNCHECKED items at the end
+        unselectedItems.forEach(item => {
+            ul.appendChild(item);
+        });
+    }
+    /**
+     * Reorder the content for options mode with async handling
+     */
+    reorderOptionsContent() {
+        const ul = this.el.querySelector('ul[role="content"]');
+        if (!ul)
+            return;
+        const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
+        const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        // Reorder the elements
+        selectedItems.forEach(item => ul.appendChild(item));
+        unselectedItems.forEach(item => ul.appendChild(item));
+        // Manage the divider after the reordering
+        this.manageDivider(ul, selectedItems, unselectedItems);
+    }
+    /**
+     * Filter multiselect items based on the text entered by the user.
+     */
+    filterItems() {
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // Remove existing empty message if any
+        const existingEmptyMessage = ul.querySelector('[data-empty]');
+        if (existingEmptyMessage) {
+            existingEmptyMessage.remove();
+        }
+        if (!this.filterText.trim()) {
+            if (this.parsedOptions && this.parsedOptions.length > 0) {
+                // Reset options display
+                const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+                items.forEach(item => {
+                    item.style.display = '';
+                });
+            }
+            else {
+                // Reset slot items display
+                const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+                items.forEach(item => {
+                    item.style.display = '';
+                });
+            }
+            // Reorder with divider
+            const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+            const selectedItems = items.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+            const unselectedItems = items.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            this.manageDivider(ul, selectedItems, unselectedItems);
+            return;
+        }
+        const normalizedFilter = this.normalizeText(this.filterText);
+        let hasVisibleItems = false;
+        if (this.parsedOptions && this.parsedOptions.length > 0) {
+            // Filter options mode
+            const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                const option = this.parsedOptions.find(opt => opt.value === item.getAttribute('value'));
+                if (option && !option.isDivider) {
+                    const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
+                        this.normalizeText(option.value).includes(normalizedFilter);
+                    item.style.display = matchesFilter ? '' : 'none';
+                    if (matchesFilter)
+                        hasVisibleItems = true;
+                }
+            });
+            // Manage the divider with the visible items
+            const visibleItems = items.filter(item => item.style.display !== 'none');
+            const visibleSelected = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+            const visibleUnselected = visibleItems.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+            this.manageDivider(ul, visibleSelected, visibleUnselected);
+        }
+        else {
+            // Filter slot items mode
+            const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+            items.forEach(item => {
+                const label = item.getAttribute('label') || '';
+                const value = item.getAttribute('value') || '';
+                const textContent = item.textContent || '';
+                const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
+                    this.normalizeText(value).includes(normalizedFilter) ||
+                    this.normalizeText(textContent).includes(normalizedFilter);
+                item.style.display = matchesFilter ? '' : 'none';
+                if (matchesFilter)
+                    hasVisibleItems = true;
+            });
+        }
+        // Add empty message if no items match the filter
+        if (!hasVisibleItems) {
+            const emptyMessage = document.createElement('li');
+            emptyMessage.setAttribute('data-empty', 'true');
+            emptyMessage.textContent = this.emptyresult;
+            emptyMessage.classList.add('no-results-message');
+            ul.appendChild(emptyMessage);
+        }
+        this.reorderSlotContent();
+    }
+    /**
+     * Filter multiselect items in options mode.
+     */
+    filterItemsOption() {
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        const normalizedFilter = this.normalizeText(this.filterText);
+        let hasVisibleItems = false;
+        const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Reset items if the filter text is empty
+        if (!this.filterText.trim()) {
+            // Remove the empty message if it exists
+            this.removeEmptyMessageOption(ul);
+            items.forEach(item => (item.style.display = ''));
+            this.reorderOptionsContent(); // Reorder after reset
+            return;
+        }
+        // Filter the items
+        items.forEach(item => {
+            const label = item.getAttribute('label') || '';
+            const value = item.getAttribute('value') || '';
+            const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
+                this.normalizeText(value).includes(normalizedFilter);
+            item.style.display = matchesFilter ? '' : 'none';
+            if (matchesFilter)
+                hasVisibleItems = true;
+        });
+        // Manage the divider with the visible items
+        const visibleItems = items.filter(item => item.style.display !== 'none');
+        const visibleSelected = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        const visibleUnselected = visibleItems.filter(item => !this.selectedValues.includes(item.getAttribute('value') || ''));
+        this.manageDivider(ul, visibleSelected, visibleUnselected);
+        // Add or remove the empty message based on the case
+        if (!hasVisibleItems) {
+            this.addEmptyMessageOption(ul);
+        }
+        else {
+            this.removeEmptyMessageOption(ul);
+        }
+    }
+    /**
+     * Filter multiselect items in slots mode
+     */
+    filterSlotsItems() {
+        if (this.modeState === 'options')
+            return;
+        const ul = this.el.querySelector('ul');
+        if (!ul)
+            return;
+        // Remove existing empty message if any
+        const existingEmptyMessage = ul.querySelector('[data-empty]');
+        if (existingEmptyMessage) {
+            existingEmptyMessage.remove();
+        }
+        // If filter text is empty, reset all items visibility
+        if (!this.filterText.trim()) {
+            this.resetFilter();
+            return;
+        }
+        const normalizedFilter = this.normalizeText(this.filterText);
+        let hasVisibleItems = false;
+        // Get all items and preserve them in the DOM
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Instead of removing/reordering, just hide/show items
+        items.forEach(item => {
+            var _a;
+            const label = item.getAttribute('label') || '';
+            const value = item.getAttribute('value') || '';
+            const textContent = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
+                this.normalizeText(value).includes(normalizedFilter) ||
+                this.normalizeText(textContent).includes(normalizedFilter);
+            item.style.display = matchesFilter ? '' : 'none';
+            if (matchesFilter)
+                hasVisibleItems = true;
+        });
+        // Get visible items after filtering
+        const visibleItems = items.filter(item => item.style.display !== 'none');
+        const visibleSelectedItems = visibleItems.filter(item => this.selectedValues.includes(item.getAttribute('value') || ''));
+        this.manageDivider(ul, visibleSelectedItems, visibleItems.filter(item => !this.selectedValues.includes(item.getAttribute('value') || '')));
+        // Add empty message if no items match the filter
+        if (!hasVisibleItems) {
+            const emptyMessage = document.createElement('li');
+            emptyMessage.setAttribute('data-empty', 'true');
+            emptyMessage.textContent = this.emptyresult;
+            emptyMessage.classList.add('no-results-message');
+            ul.appendChild(emptyMessage);
+        }
+    }
+    /**
+     * Normalizes text by removing accents and converting to lowercase
+     * @param {string} text - The text to normalize
+     * @returns {string} The normalized text
+     *
+     * @example
+     * normalizeText("Café Latte") => "cafe latte"
+     *
+     * @description
+     * This function performs text normalization in three steps:
+     * 1. Decomposes characters into their base form and combining characters (NFD)
+     * 2. Removes all diacritical marks (accents, umlauts, etc.)
+     * 3. Converts to lowercase and trims whitespace
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize} - MDN documentation on String.normalize()
+     * @see {@link https://en.wikipedia.org/wiki/Unicode_equivalence#Normal_forms} - More info about Unicode normalization forms
+     */
+    normalizeText(text) {
+        return text
+            .normalize('NFD') // Decompose characters into base + combining characters (e.g., é => e + ´)
+            .replace(/[\u0300-\u036f]/g, '') // Remove all diacritical marks (Unicode range for combining characters)
+            .toLowerCase() // Convert to lowercase
+            .trim(); // Remove leading and trailing whitespace
+    }
+    /**
+     * 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))) {
+            return;
+        }
+        // Use handlePopoverClose for all cases
+        this.handlePopoverClose();
+    }
+    /**
+     * Handle keyboard events & arrow key navigation.
+     * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.
+     * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.
+     * @param {KeyboardEvent} event - The keyboard event.
+     */
+    async handleKeyDown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                this.popoverElement.show();
+                // Focus on the first item if the list is not filterable
+                if (!this.filterable) {
+                    requestAnimationFrame(() => {
+                        this.focusFirstItem();
+                    });
+                }
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])'));
+        if (items.length === 0) {
+            console.warn('No visible items found to navigate');
+            return;
+        }
+        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            currentIndex =
+                currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            currentIndex =
+                currentIndex === -1
+                    ? items.length - 1
+                    : (currentIndex - 1 + items.length) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'Enter' && currentIndex >= 0) {
+            event.preventDefault();
+            const selectedItem = items[currentIndex];
+            // Toggle the checked state
+            const isCurrentlyChecked = selectedItem.hasAttribute('checked');
+            selectedItem.checked = !isCurrentlyChecked;
+            // Trigger a click event to ensure proper event handling
+            selectedItem.dispatchEvent(new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true,
+            }));
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation(); // Prevent the event from propagating to the popover
+            // Do the reorder and wait a bit before closing
+            const handleEscape = async () => {
+                this.isHandlingEscape = true; // Disable the hide listener
+                if (this.modeState === 'options') {
+                    this.reorderOptionsContent();
+                }
+                else {
+                    this.reorderSlotContent();
+                }
+                // Wait for the reorder to be applied
+                await new Promise(resolve => setTimeout(resolve, 100));
+                // Reactivate the hide listener after a short delay
+                setTimeout(() => {
+                    this.isHandlingEscape = false;
+                    this.open = false;
+                    this.popoverElement.hide();
+                }, 150);
+                if (this.inputElement) {
+                    this.inputElement.blur();
+                }
+            };
+            await handleEscape();
+        }
+    }
+    /**
+     * Updates the highlighted item in the dropdown list.
+     *
+     * @param {(HTMLNvFielddropdownitemElement | HTMLNvFielddropdownitemcheckElement)[]} items - The items to update.
+     * @param {number} index - The index of the item to highlight.
+     */
+    updateHighlightedItem(items, index) {
+        items.forEach((item, i) => {
+            if (i === index) {
+                item.classList.add('highlighted');
+                item.setAttribute('tabindex', '0');
+                item.scrollIntoView({ block: 'nearest' });
+                // Focus on the nv-fieldcheckbox inside
+                const checkbox = item.querySelector('nv-fieldcheckbox');
+                if (checkbox) {
+                    checkbox.focus();
+                }
+            }
+            else {
+                item.classList.remove('highlighted');
+                item.setAttribute('tabindex', '-1');
+            }
+        });
+    }
+    /**
+     * Focus on the first item in the dropdown list.
+     */
+    focusFirstItem() {
+        const firstItem = this.el.querySelector('nv-fielddropdownitemcheck:not([style*="display: none"])');
+        if (firstItem) {
+            firstItem.setAttribute('tabindex', '0');
+            firstItem.classList.add('highlighted');
+            firstItem.scrollIntoView({ block: 'nearest' });
+            // Focus on the nv-fieldcheckbox inside
+            const checkbox = firstItem.querySelector('nv-fieldcheckbox');
+            if (checkbox) {
+                checkbox.focus();
+            }
+        }
+        else {
+            console.warn('No visible first item found to focus');
+        }
+    }
+    addEmptyMessageOption(ul) {
+        const existingMessage = ul.querySelector('[data-empty]');
+        if (existingMessage)
+            return;
+        const emptyMessage = document.createElement('li');
+        emptyMessage.setAttribute('data-empty', 'true');
+        emptyMessage.textContent = this.emptyresult;
+        emptyMessage.classList.add('no-results-message');
+        ul.appendChild(emptyMessage);
+    }
+    removeEmptyMessageOption(ul) {
+        const existingMessage = ul.querySelector('[data-empty]');
+        if (existingMessage)
+            existingMessage.remove();
+    }
+    /**
+     * Watch for changes in the mode prop and update modeState accordingly
+     * @param {string} newValue - The new mode value
+     */
+    handleModeChange(newValue) {
+        this.modeState = newValue;
+    }
+    manageDivider(ul, selectedItems, unselectedItems) {
+        let divider = ul.querySelector('hr.multiselect-divider');
+        if (!divider) {
+            divider = document.createElement('hr');
+            divider.className = 'multiselect-divider';
+            ul.appendChild(divider);
+        }
+        const shouldShowDivider = selectedItems.length > 0 && unselectedItems.length > 0;
+        if (shouldShowDivider) {
+            // Place the divider after the last selected item
+            const lastSelectedItem = selectedItems[selectedItems.length - 1];
+            lastSelectedItem.after(divider);
+            divider.style.display = '';
+        }
+        else {
+            divider.style.display = 'none';
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    /**
+     * Renders the component in options mode
+     * @returns {any} The JSX for options mode
+     */
+    renderOptionsMode() {
+        return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect" }, hAsync("slot", { name: "leading-input" }), hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), hAsync("nv-iconbutton", { 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.togglePopoverOptions })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("ul", { role: "content" }, this.parsedOptions.map(option => (hAsync("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), hAsync("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+    }
+    /**
+     * Renders the component in slots mode
+     * @returns {any} The JSX for slots mode
+     */
+    renderSlotsMode() {
+        return (hAsync(Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { htmlFor: this.inputId }, hAsync("slot", { name: "label" }, this.label))), hAsync("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, hAsync("div", { class: "input-wrapper-multiselect", slot: "trigger" }, hAsync("slot", { name: "before-input" }), hAsync("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, hAsync("slot", { name: "leading-input" }, hAsync("p", null, "No leading input")), hAsync("nv-badge", { slot: "leading-input", "prevent-auto-close": "true", color: "10", dismissible: this.selectedValues.length > 0, hidden: this.selectedValues.length <= 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots }), this.isFilterable || this.disabled || this.readonly ? (hAsync("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (hAsync("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, hAsync("span", null, this.value || this.placeholder))), hAsync("nv-iconbutton", { 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.togglePopoverSlots })), hAsync("slot", { name: "after-input" })), hAsync("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, hAsync("slot", { name: "content" }))), this.renderDescriptions()));
+    }
+    /**
+     * Renders description and error description sections
+     * @returns {any} The JSX for descriptions
+     */
+    renderDescriptions() {
+        return [
+            (this.description || this.el.querySelector('[slot="description"]')) && (hAsync("div", { class: "description" }, hAsync("slot", { name: "description" }, this.description))),
+            (this.errorDescription ||
+                this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { hidden: !this.error, class: "error-description" }, hAsync("slot", { name: "error-description" }, this.errorDescription))),
+        ];
+    }
+    /**
+     * Main render method that decides which mode to render
+     * @returns {any} The JSX for the component
+     */
+    render() {
+        return this.modeState === 'options'
+            ? this.renderOptionsMode()
+            : this.renderSlotsMode();
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "options": ["handleOptionsChange"],
+        "value": ["watchValueHandler"],
+        "filterable": ["watchFilterableHandler"],
+        "mode": ["handleModeChange"]
+    }; }
+    static get style() { return NvFieldmultiselectStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-fieldmultiselect",
+        "$members$": {
+            "inputId": [513, "input-id"],
+            "name": [513],
+            "label": [513],
+            "description": [513],
+            "placeholder": [513],
+            "maxHeight": [513, "max-height"],
+            "badgeLabel": [513, "badge-label"],
+            "emptyresult": [513],
+            "required": [516],
+            "error": [516],
+            "errorDescription": [513, "error-description"],
+            "readonly": [516],
+            "disabled": [516],
+            "autocomplete": [513],
+            "filterable": [1540],
+            "value": [1537],
+            "open": [1540],
+            "mode": [513],
+            "options": [513],
+            "debounceDelay": [514, "debounce-delay"],
+            "parsedOptions": [32],
+            "selectedValues": [32],
+            "sortedOptions": [32],
+            "filterText": [32],
+            "isFilterable": [32],
+            "modeState": [32],
+            "isHandlingEscape": [32],
+            "getFilterText": [64],
+            "resetFilter": [64],
+            "getSelectedValues": [64]
+        },
+        "$listeners$": [[0, "openChanged", "handleOpenChanged"], [0, "itemChecked", "handleItemChecked"], [0, "slotchange", "handleSlotChange"], [0, "keydown", "handleKeyDown"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["inputId", "input-id"], ["name", "name"], ["label", "label"], ["description", "description"], ["placeholder", "placeholder"], ["maxHeight", "max-height"], ["badgeLabel", "badge-label"], ["emptyresult", "emptyresult"], ["required", "required"], ["error", "error"], ["errorDescription", "error-description"], ["readonly", "readonly"], ["disabled", "disabled"], ["autocomplete", "autocomplete"], ["filterable", "filterable"], ["value", "value"], ["open", "open"], ["mode", "mode"], ["options", "options"], ["debounceDelay", "debounce-delay"]]
+    }; }
+}
+
 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-container-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;
 
@@ -9678,9 +10839,9 @@ class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '440aa92437d7cbd00e09ad8f7aab663ad09c8406' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'e892aef7b1534c6d73181d2d25fe7f17945524ac', htmlFor: this.inputId }, hAsync("slot", { key: '77489c52e374149a75effa7d3f4ab97c3109a13c', name: "label" }, this.label))), hAsync("div", { key: 'a1d23b332303ac468771b2b7dd2a31d21d9a3487', class: "input-wrapper" }, hAsync("slot", { key: '76f9993d1168a004b1de82b1e19b99062e7b6386', name: "before-input" }), hAsync("div", { key: 'a51ec42108436d853c2e74aeb64088dc071074f7', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '9084cef7de60e84db9dc7042b64e6c64a4a8f5d7', name: "leading-input" }), hAsync("input", { key: '395d2d7a2b8157495735b47cac47fd37e7c24c7e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: 'e015cebd60a0bda842dd8aff05dbce27586e861c', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: '42a0ea62a160f92150d949789694d1d6e992c39d', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '9df0a8c66b6086dfcd0e1c48e21d4d1866ed4563', class: "stepper-spacer" }), hAsync("div", { key: 'a4d16b2f50878ecdb5a322b6707fce5e908e88a0', class: "stepper" }, hAsync("nv-icon", { key: 'edf55fafe8d8f58aab7b5083d630905e78783c2e', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: '04d7e7b4fdc80d444ab64660f71c998bbce0f73a', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: '9893c52a46ad08a1ccb301411141bd723af33b21', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'b21b984e9695fab93a198ef58a3bd394bfc3aaa3', class: "description" }, hAsync("slot", { key: '1750efcd886f70078848f608e0be326324ea6928', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '14cde2f86fd23c98fafb2cd4645e7af64ce6c011', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '96e1a6084ec5467cf35e1eb3e86fa6b757f2574c', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '3e63ee0ddeea7114b2b46d1b487beda165f15ee7' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3d2466d944f46dcf3898a91db177566b17a47bae', htmlFor: this.inputId }, hAsync("slot", { key: '9aabd8d4192de72fcc4b1244f48bf8339426576d', name: "label" }, this.label))), hAsync("div", { key: '03307177d9b82f77fea2c41d12239ed4b9073287', class: "input-wrapper" }, hAsync("slot", { key: '64ca5e34fa924a92e83eed4abe011e5ff5bedcef', name: "before-input" }), hAsync("div", { key: 'df01a5825076af1678b41ccd4164d4c094ff2c49', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'af451d8c693374942d9d15ae6fe639d447bc3212', name: "leading-input" }), hAsync("input", { key: '60e0f22c61738e0bfb1ab769ff2521d7b6e41add', 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: '2a821cf41606870dbd5d3d1a8073809da575eef6', name: "alert-circle", class: "validation", size: "md" })), this.success && (hAsync("nv-icon", { key: 'ed13f730a9ce5b27d635b0061f361229bdce6893', name: "circle-check", class: "validation", size: "md" })), hAsync("div", { key: '5e181e738b0074d619b85c966aa0fc248fa8b2df', class: "stepper-spacer" }), hAsync("div", { key: '2dd786b7af88781f1adb3b342a6cd80ed1e65b20', class: "stepper" }, hAsync("nv-icon", { key: '9f2e2780c82b6459207de3a921064114f116c8df', name: "minus", size: "md", onClick: this.handleMinus, class: clsx({ disabled: this.isMinValueReached() }) }), hAsync("nv-icon", { key: 'b7004ec1823b71b89862c4a4b2038946fb2ca776', name: "plus", size: "md", onClick: this.handlePlus, class: clsx({ disabled: this.isMaxValueReached() }) }))), hAsync("slot", { key: 'b44ad95be87ef5b4201a3eebb660de56b5fec6e0', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '8a5f2d1d5afcd40338187f9675ee780330f5c253', class: "description" }, hAsync("slot", { key: '07618e9a9c36d13f2ae33e49b16a4744aad87150', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '95f049c2b32537c63afb6b7edcb19f1c9100da7d', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '4390b2d8bba172e04f0cd6740c347af56738d208', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -9822,9 +10983,9 @@ class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '77ade2d0b5b4282b16925957709433d047a730c7' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '158f0347fa53cebea4b89ceee56c8d92c801861f', htmlFor: this.inputId }, hAsync("slot", { key: '6ad0d4a2b7d0e6c32249f8ecfc221523999a7e86', name: "label" }, this.label))), hAsync("div", { key: '7cab4de8be04d0cbdbaee4b3ea64fcb6d9043ca5', class: "input-wrapper" }, hAsync("slot", { key: '808e2c1308b7e095f5207cd9a9198c4667bf2310', name: "before-input" }), hAsync("div", { key: '23f6b0833be73faef6d46dcf0c007c1c16c59681', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'f53ff33bc75dd2417cac55a39e1f24875375c564', name: "leading-input" }), hAsync("input", { key: '70e7e28f957224c7613a1da4b2156afeba706d14', id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), !this.hidePasswordIcon && (hAsync("nv-iconbutton", { key: '96742eeecc9de1bf4ae753fc8c64c2e436e5af86', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (hAsync("nv-icon", { key: '71666d2e39bc4fe5057ec014cc788f3b734c0e69', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: '7d232c975753c74ce8419b6258dd63f7ca7ab811', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f9330dd27bce24c81d2fb58c0da7a8de079deb87', class: "description" }, hAsync("slot", { key: '61b9f61075435d7854603aa9e4700a755e0eeb4f', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'f4e9183622a9451baa054eea9eb7113b38aa72c2', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '234af9d31bc011493f700f34a707305a8fb421d4', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '3651f681b77d6955486e2d2bcc2f70d61e012089' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '24032106e853a32c2e35418e2f32126cdcf1c2e8', htmlFor: this.inputId }, hAsync("slot", { key: '44deddd654d370beaeff254eba1c054ba1250267', name: "label" }, this.label))), hAsync("div", { key: 'fbbb86259a866dfd5c0c660b8e6afe5978d82dd1', class: "input-wrapper" }, hAsync("slot", { key: '05595aab730f9c430bda896137383cff6def5b9f', name: "before-input" }), hAsync("div", { key: '0f693ce1d94f1b40cbd215a8ee92040801e9f12f', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: '8d0c453201a6f6c874da6708f539ac3b9c62eb57', name: "leading-input" }), hAsync("input", { key: 'eaf902b52d59e1ec745d06a684cc6743878fd17a', 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: '7e52b6f031d680c601012b70e30a5b685da753b1', 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: '4aeb80d040982ffa14d9783d1a6321358d883eb5', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), hAsync("slot", { key: '0eaf082103ba3440d7dbd94c113a944a02de92ad', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '4de2f9371c606f503daf93370e2bf5a61c2241eb', class: "description" }, hAsync("slot", { key: 'fbbe4144a1a4d9b601156c53f25d08809989bead', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'd8d81ec37edc4e05b24ee7b3c051899d49902899', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'd6c21cdefc94b7dc9c494dda505507cfb3c06c1b', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -9944,9 +11105,9 @@ class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c180e5204343412df6b2539cd46d7bd53d2d7f19', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: '778a3ddc598a81df45f6eecda4660f95af48795a', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: '82e3e9ed3cdcd5918f824e5956e720ba04ec3160', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'b906d712188ef0ba06c177021b81b9b8132e2d58', htmlFor: this.inputId }, hAsync("slot", { key: '2c81a91a98d2d4739d6b912a0018826830b17c7f', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '1caa426f06d0d5fcb9fe59e58be7000c854fceb9', class: "description" }, hAsync("slot", { key: 'ba454a12b8f535db62945a145c665f189624dc61', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'bf7a31b55f2716cb6436b595d0d96a1974c9c313', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '9a3b54c1e06d7e42eee9c4ca8e213270b66306b6', name: "error-description" }, this.errorDescription))))));
+        return (hAsync(Host, { key: '529231ea33610d441eeabfcb0c87febc003549f7', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, hAsync("input", { key: 'ec0ccd0b2f380eeb8cfbfc8554a15218209ab7a3', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), hAsync("div", { key: 'c6e0281290c266e68c4c09cd697384e32bad5204', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '0ac8815394c4d2176165cf3b41c1d946aad87a3d', htmlFor: this.inputId }, hAsync("slot", { key: '3e872fba160c095bb25b8b0e16a03947a2880383', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'c1a34348e13f9cf27a73cada9c770913badb8e65', class: "description" }, hAsync("slot", { key: 'f214bfdf9291dc6460abbef754b00953baa9b4bc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '67c582d253edb3c504e2ad02a2db35bd1544a764', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '428a6e4c7a2de0d22d6fc5e693ade6ac906d4ce3', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10289,13 +11450,13 @@ class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (hAsync(Host, { key: 'd9334ee7b0373a6d7c48b144107fad9420dfb8b0' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'fd69171f1609c8aa450d81f81149da6a42ab15f3', htmlFor: this.inputId }, hAsync("slot", { key: '26bb813a2919a62fb71c23a0564704ea9bb2b118', name: "label" }, this.label))), hAsync("div", { key: '14ce1ff79a90c1bcbc3f757905347dd96bbb9708', class: "select-wrapper" }, hAsync("slot", { key: '99eecebeaa197dc27306471ad8d813e16b8597b5', name: "before-input" }), hAsync("div", { key: 'd594672879ef8cf8aad8df170eda2210c094a9e2', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: '0cf4321aa3bab4b2fedf6c8819914713eacd8ee2', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: '99e5bf60ff1f263bf28e9aaf3610db27fe1507fc', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (hAsync(Host, { key: '488eabdf0d55be6e34cc726317f2081cd62cd36b' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '8f7a27d3829bb0d794525b3e7cae99d8512bd541', htmlFor: this.inputId }, hAsync("slot", { key: 'd716b5c2d050859dfa2ff640b8c71e9e2e52d167', name: "label" }, this.label))), hAsync("div", { key: '193c698fe743b361df7d51db8242ecd4ac4a845e', class: "select-wrapper" }, hAsync("slot", { key: '8b6d17fb246b1226f0fb0ec682aad0c96256744d', name: "before-input" }), hAsync("div", { key: 'aeba6544e7f59ea79ea9dd69ece2d322d4639d9c', class: "select-container", onClick: this.handleSelectContainerClick }, hAsync("slot", { key: 'a895b3ff375f8b39c7dbfffc7b7e197ead24d756', name: "leading-input" }), this.internalReadonly && (hAsync("input", { key: 'ed6f534b074ee0a9d4c2ceea8fb3501174ffe21d', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), hAsync("select", { key: 'f7581c343c875e267eea166f35f195ee8432eaf1', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), hAsync("select", { key: 'b04cd5dc7a761235bb99bf6dfafc7df460d4015b', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, hAsync("slot", { key: '02745ef20836ae3001b4f6b4cb623100ddc97725' })), this.internalReadonly && (hAsync("nv-icon", { key: 'feb701a5665c82234a00ce411afed52a7a3ddd72', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: 'bc43f872fce4fdb5940020ca3ac89fda8d6a9709', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '0a04cd146c865c512a6817df83540ffce2d0d308', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '495e2d37897c15d2e2dee95310ae536b03be5822', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '3bf2e184784d98940e2ee11fb4f8d1730281bc89', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: 'da02156b85bace7c898e5792cd9db37feab50839', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '5e95ce042deaad2eec68cb4d29ed6fea6f2d3f4c', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: 'e693e1eb32737de9e0d533b8c74b5d87fd7ce0f5', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, hAsync("slot", { key: '53e76753cce820e5a2e0603e06c3b45213e74665' })), this.internalReadonly && (hAsync("nv-icon", { key: '74de038ef7f426556da9d3366a60a9eac11f06e1', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (hAsync("nv-icon", { key: '354f4ee5153f48e8f0221b27310482c3b046ffa2', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '118d5be3c1b859e18b0ebd430763059be07f7416', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'f30fab6851bef6311e2c0302b70ce779d46baffc', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'a56d029e8e9d9c5ba3c019ea735b71781641c1fe', class: "description", id: `${this.inputId}-description` }, hAsync("slot", { key: 'fc6315884c44da3092a3cb2536cae28e1d767553', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '92997cdace95b2bc58dfdc41b184c7147e0817e3', class: "error-description", id: `${this.inputId}-error` }, hAsync("slot", { key: '75eefd84cabcfa330eab1453317643a4036dd33d', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10435,9 +11596,9 @@ class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '515758fdb12fd8df454fb1d1113356b20fc1600b' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'fc24e70454352dfbf2df977f3287fba276c67cd1', htmlFor: this.inputId }, hAsync("slot", { key: '422c1c9bd42de0a998b8fc45e000c6a30d9a49f3', name: "label" }, this.label))), hAsync("div", { key: 'b1ad372ab559d8245ce184c6abceafa468e449f0', class: "input-wrapper" }, hAsync("slot", { key: 'e30624a7b5db6510db337a408bc069de37bbdbea', name: "before-input" }), hAsync("div", { key: '13657397c9ac78dc97f9b94b8fdbd46126aceb16', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'edf3ee8cc920870aa907f1bbbeaca6cc8d38219c', name: "leading-input" }), hAsync("input", { key: 'afab7a4f2575e5e8a1e675aee9b21e90803db7a6', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (hAsync("nv-icon", { key: '8f9746766d8ca61d34671e7957b46a256a54e726', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '99abc485edd96a5d772f83339d02141896e99dd9', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: '4a0bc519345614a07968e3e7c5d25efc9ba40a02', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd46001bfd7c7a485a9c4dcfa93beafb65dda7b5c', class: "description" }, hAsync("slot", { key: '7580203ed856a803d5dc6d264e10c72c3714de06', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '52ee56aa45e9876b075237f3ddb89618a34567e9', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '8ee7a5a7cbbcce96e8a94651c140e163a0545286', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: 'a72abeeb27e5ca2cd99bae24bc82244c804f3139' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '5cc62313402e322db31535acca086c380f457dc6', htmlFor: this.inputId }, hAsync("slot", { key: 'f815f5311aa3ce60fa7f77d29cd90750cb399820', name: "label" }, this.label))), hAsync("div", { key: '1d4c261110faf55ca25b65d86b77a7666dfe8adc', class: "input-wrapper" }, hAsync("slot", { key: '5743bcb174019f5a92c20c5d6336e17842d7bb08', name: "before-input" }), hAsync("div", { key: '7def6d8c23971148763ba6c901e1a07307c1ca9a', class: "input-container", onClick: this.handleInputContainerClick }, hAsync("slot", { key: 'ce53a9e36919808dc3738ee05983e97785585e9f', name: "leading-input" }), hAsync("input", { key: '5f434436a8708c2895bea87a2327ddc6a222d2a6', 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: '023814741ab991b0f46e132c243f7a7c513b82c8', name: "alert-circle", class: "validation", size: "sm" })), this.success && (hAsync("nv-icon", { key: '06d572bedac515cb797799bb887d2b624f173cb1', name: "circle-check", class: "validation", size: "sm" }))), hAsync("slot", { key: 'd81a53001f95f60ad44bc8aabd45803d5eca54e6', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f0f6afc05adf9493ee5f5eb90a454006b07d131c', class: "description" }, hAsync("slot", { key: '70b93af3c69573b8ba4ca9d8db28773de1a88362', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ce2b969356c92da9eab40792cba126d15f88250e', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'd6aa536ce3fc900bc5dcfbae524458ca925081f6', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10645,9 +11806,9 @@ class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '683a4bf119b61bd928fca68484adafc290242542' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '9ee48a620c7d7b5bf13181b4bf2cc013267a98cc', htmlFor: this.inputId }, hAsync("slot", { key: '28b618f5639aa84748319ee17e081e67730b85a5', name: "label" }, this.label))), hAsync("div", { key: '4086bb637f43dd332d078dc2edef046ab08f5bd6', class: "textarea-wrapper" }, hAsync("div", { key: 'ee38cea5b14938865de2416d309952357527528c', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: 'fe35a432fe0f737dc49bc37a2a2fdc56c95cef4d', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'e44539c99f51bf28978c87eea681286959570446', class: "description" }, hAsync("slot", { key: '1fc80c66fa30871035cc47e2de35fd7ce390f766', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'ecb5d0b11d5b9fb3175824abcc0bcc98433b2dbf', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: '28063a5373418b506d30a30fb524cca294024daf', name: "error-description" }, this.errorDescription)))));
+        return (hAsync(Host, { key: '13efbb6d3808652f3b0f3e348338cc770140533b' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '3584c6a3045e5dcf1f3a26af77e9d1d0399ba82c', htmlFor: this.inputId }, hAsync("slot", { key: '7ec834555eec08002bdf5f28d6ab9ee0ec59914d', name: "label" }, this.label))), hAsync("div", { key: '386206a939b02f2ac97bfae21242f98ed4a5a814', class: "textarea-wrapper" }, hAsync("div", { key: 'c1bef6551b677cbad2eef80e8d8a9e04d326a1fc', class: "textarea-container", onClick: this.handleTextareaContainerClick }, hAsync("textarea", { key: 'f519c3ec458df4d91163122277f1b91d1ec21315', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'd431c988df6f442196c004514b78832ebcf5e0f5', class: "description" }, hAsync("slot", { key: '8830e8ee7b9649fb13dfd86e2d0b7730e23106d6', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'fb8d9b7347f0033faa7b4355817517273351d3af', hidden: !this.error, class: "error-description" }, hAsync("slot", { key: 'f39fbf2ab7e01c1c2a2f611450adaede41632473', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -10751,8 +11912,8 @@ class NvFieldtoggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'ed329e4f412fe907483baaba3c41601df1b4d42b', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '007e241bbcefa7f1cab09beef0f14a5617bcffb5', class: "input-container" }, hAsync("input", { key: '95d37868390b5f562b90bc1f9160c8545ca1d99c', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'bdd17bd03068f5da78a1a8c69fe672d77bd19c5b', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '24809a89cb508d48a3c67dd495481ea06f287bfd', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: 'a8babfbc290a8f9f3da56145246ade9d1ad6f775', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '075a518f042244c5823bd1bee758462ea111f1cd', class: "description" }, hAsync("slot", { key: 'c3ac97a983611c0568c0e0753f3c57870fb61cb1', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '3ea6cc0c5c5955ab9e2447d940e7716a8e120bd8', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '5b7df808f832edcbc600df0c64af6ad7c1e41e40', class: "input-container" }, hAsync("input", { key: '8680c917371bf0c7b0a91610f18e51800f65f094', 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: '3273cf879e7ebdf9cb0ab81df4b674d39943c8fe', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'd98f1db14a1de22dc47f6f6cb95431211c364ddf', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '1a1ca78c91d39e230a95af52fff8dd1f97a095e0', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '9c63a661b4a722575d74d2a0f38a41813b0b822e', class: "description" }, hAsync("slot", { key: '5074ff74cc430a43387905a53d854e2acda5c8b5', name: "description" }, this.description))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10825,7 +11986,7 @@ class NvIcon {
     //#region RENDER
     render() {
         //const iconSprite = getAssetPath('assets/icon-sprite.svg');
-        return (hAsync(Host, { key: '4f3b6f3fd706975fc5cca36c5efb5ce47fe3ed0a', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '6cdf2e45567317fe70c205514f01d5da0207fd3f', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, hAsync("use", { key: 'e6e616c6b5a2d07ab342f7c9ed2076630606d3c8', href: `${this.spriteUrl}#${this.name}` }))));
+        return (hAsync(Host, { key: 'f61ded4f06fd48ef89b4fcf48350401a71f5642e', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, hAsync("svg", { key: '9d3dd25cfa34416cc0baf547cac1cf74c72b7f06', 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: 'a66fe0b7a80cdd59425ad94eab3a16c03ef6218d', href: `${this.spriteUrl}#${this.name}` }))));
     }
     static get style() { return NvIconStyle0; }
     static get cmpMeta() { return {
@@ -10955,7 +12116,7 @@ class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'abbd417169f29ce6616909c79b2f4162943791d8', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && hAsync("nv-loader", { key: 'd933f2ada3fd2b01361f3508af9201dcde9d3f56', size: this.size }), !this.loading && hAsync("nv-icon", { key: 'a60298b06f4ea8b4837ad8a46c2ad0adc411fc75', name: this.name, size: this.size }), hAsync("slot", { key: 'b19a111bb5304ac176eb834a661b2324f12b57e7' })));
+        return (hAsync(Host, { key: 'da500bc993c56223fbbef59de813d6abc4edae66', 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: '853eb4bb3b24acab512e4a97d1d62d9f9868c54b', size: this.size }), !this.loading && hAsync("nv-icon", { key: 'ae37d9c53d96da31230b0ea783ba90873bc63fd3', name: this.name, size: this.size }), hAsync("slot", { key: 'e244d12cf966dc1636eee84dcf4ce91a8982127e' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -11003,7 +12164,7 @@ class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (hAsync(Host, { key: '0fdf2ee8bad6bab413c729f7dfcf516f5fb46a35', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (hAsync(Host, { key: 'd47cddef84d79aa07307501fc9aa43d33ae79287', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get style() { return NvLoaderStyle0; }
     static get cmpMeta() { return {
@@ -11179,7 +12340,7 @@ class NvMenu {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '2916995a257343bb849c8e64938850e0167d5491' }, hAsync("slot", { key: '012e521f58fd4b603f90c4eb6bef29c71e05586e', name: "trigger" }), hAsync("nv-popover", { key: '187f89fd4dad78f8ebc99082ad936fced52b81d3', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, hAsync("slot", { key: '3d94bcc4a617fd475f3e6057f10e25a3aae772fd', name: "content" }))));
+        return (hAsync(Host, { key: 'a28164031ff34af57a3039e7e9077114a84e5ead' }, hAsync("slot", { key: 'b84c1bce094b2039b2f8d6e202752a48ce5967e6', name: "trigger" }), hAsync("nv-popover", { key: '0bf868e671a882d1a0073f0bae321541f9bda10b', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, hAsync("slot", { key: '09d7a81d65214f6b803ca4fb84995aa16e747174', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuStyle0; }
@@ -11249,7 +12410,7 @@ class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a67dc0ea59f24f8e603b85fca99a95727559f749', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '5f9b024b930199552cbcb25c20b8acb85cb49dc7', name: this.icon }), hAsync("span", { key: '096c9c5ea2cc697c7eb4de9c43dff60e06751e89', "data-scope": "text" }, hAsync("slot", { key: '87e3815be0751cf1bf4e31dacc3a1658c4d7fdf4' })), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: 'e0bfbf8cb85eab0b935b37963d52ff14c844db2b' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '869adf3673781fb5d21ca493118bfc4e5b56d9c4', name: "chevron-right" })));
+        return (hAsync(Host, { key: '31ff42ca3327ad886aa6c7095f70b56013a91bc9', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && hAsync("nv-icon", { key: '27d59e5fb7877401d74915f6176d5d37b441d24b', name: this.icon }), hAsync("span", { key: '9ee13d14d026e8aa9738c29051ea3eddb72973b6', "data-scope": "text" }, hAsync("slot", { key: '09ae4f46f55268113c030b106838ff4f21a81dd2' })), this.shortcut && !this.hasSubmenu && hAsync("kbd", { key: '56336e605425e598f3c9e3384b5a12f84f529e73' }, this.shortcut), this.hasSubmenu && hAsync("nv-icon", { key: '18a8b87eb166189bdebc7fa7a362fec7725257d1', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
     static get style() { return NvMenuitemStyle0; }
@@ -13649,7 +14810,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '17eff9af9c2b956bb09a5398f08c1bd6cc748d30' }, hAsync("slot", { key: '4633c6f88fe81214a5b2b189c32b6c6ed71c7c0a', name: "trigger" }), hAsync("div", { key: '792f7ad6fe7d7405e617e54819d90a76b82fc36c', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '8acc19dd8728f2b164172eb53accfea4ac41e8b0', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: 'b0785e444dabddb50f7105aa958c81967ee27e5d', name: "content" }))));
+        return (hAsync(Host, { key: '1014588b3220a543ba8f51aa82664b933e4ff477' }, hAsync("slot", { key: '5a6d7bb46a32f77a4eab3fe0fd105b268862c2aa', name: "trigger" }), hAsync("div", { key: 'c9043c20aa2667b80bd3668992a017b89da0dbba', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '1ffcc0878409b66d7cecd398e18d1923465d5381', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '814d6cdc6150c66342c35607364bfcf60c85b036', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13694,7 +14855,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'f43c7500aaec670bdbf7b78bdb257820e9a6a2f4' }, hAsync("slot", { key: '2c5c9634138d7be6dc46d84dfa75fad3a6d72a71' })));
+        return (hAsync(Host, { key: 'd114427cd2f3e3ec93f16d42db6f011c299d7550' }, hAsync("slot", { key: '1246a285010f7e84b97ab00d82878e1abce631c2' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -13729,7 +14890,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'adb66e681e65a9ae43a1d6651d5c85299a60d095', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: '882bebcf2fe4c09a8a5bbf689c54d849a99e5941' })));
+        return (hAsync(Host, { key: 'b62a759491ca6e1a54836be2a02623f7fa10afc9', 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: '80fe393d0d3fc5b63d158ec2a77d50c98e23058b' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -13878,7 +15039,7 @@ class NvTable {
                 .querySelector('[slot="body"]')
                 .querySelectorAll('nv-tablerow'))
             : [];
-        return (hAsync(Host, { key: '1db7f4f0eda8e4659c2929ef137a69e5dfd60cab' }, hAsync("div", { key: '34d2c4d60a415be61189474db1ca042c48a728dd', class: "hidden" }, hAsync("slot", { key: '0b9f4234024ee63965c6f42064a947af1c45769d' }), hAsync("slot", { key: 'aa88f265936ee32cd2d07d4dd3df94a5a32bad5e', name: "head" }), hAsync("slot", { key: 'f027b8d3570643f9d9e85281c4cc74e4143e91be', name: "body" })), hAsync("slot", { key: '9ece2fef9862c961e35f10d12077f27c95262bfe', name: "before" }), this.parsedColumns.length === 0 &&
+        return (hAsync(Host, { key: '8de3c15197a92540c43b80df5eb14e456d7fa9fb' }, hAsync("div", { key: '355ae5642547c995b0cd61f6ed5c56086546717a', class: "hidden" }, hAsync("slot", { key: '92fadc1b368c4938723dd006ffe860ef7e3f333b' }), hAsync("slot", { key: '68d5eee9f4f162bf8b8674e5b0387cd2c7c9443d', name: "head" }), hAsync("slot", { key: 'a03dba982bbea6e7a49072aa44a0e3329c289759', name: "body" })), hAsync("slot", { key: 'f8474331714b5c1f07c63d84eabdca28daac467f', name: "before" }), this.parsedColumns.length === 0 &&
             this.parsedData.length === 0 &&
             headerRows.length === 0 &&
             bodyRows.length === 0 ? (hAsync("p", null, this.noColumnsNoDataMessage)) : (hAsync("table", null, this.parsedColumns.length > 0 ? (hAsync("thead", null, hAsync("tr", null, this.parsedColumns.map(column => (hAsync("th", null, column)))))) : headerRows.length > 0 ? (hAsync("thead", null, headerRows.map(row => {
@@ -13889,7 +15050,7 @@ class NvTable {
             : Object.values(row).map(value => hAsync("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
             const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
             return (hAsync("tr", null, cells.map(cell => (hAsync("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
-        })) : null))), hAsync("slot", { key: 'bf544e391ea06f3cad8f90450e71af2b6b973dd7', name: "after" })));
+        })) : null))), hAsync("slot", { key: 'cb6d29a453c6d76ce6e97cd5928b180d70c37a33', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13933,7 +15094,7 @@ class NvTablebody {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7a5935aabb4a5136d60d1f16047f914bbd187ef3' }, hAsync("tbody", { key: 'ec41d476bec5f5e1b745cc0282b6b19a4ed674af' }, hAsync("slot", { key: '5c974cca2fd9207860615d81f4f0343e5d69d95c' }))));
+        return (hAsync(Host, { key: '500001e6d0de218e7d0d7a8bd689164d65aaa039' }, hAsync("tbody", { key: '97d4947747a3dcdd6f8d1d941cdc8fa19b983908' }, hAsync("slot", { key: 'cbecc34bdc025bf64b9d810ed2ff23bb6dfc6f31' }))));
     }
     static get style() { return NvTablebodyStyle0; }
     static get cmpMeta() { return {
@@ -13976,7 +15137,7 @@ class NvTablecolumn {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '976a7fb6560a797a1fdf754714f44f2879cf7346' }, hAsync("th", { key: 'd2fb85bea5e7ca5ee9cf8a6e0b5ec86d248f400b', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, hAsync("slot", { key: '0e7fc2dbda83ac114bcb70cfd81c4f324c4155a6' }))));
+        return (hAsync(Host, { key: 'd84688d8480034f9ccfc0965056fe97d7fded63d' }, hAsync("th", { key: '66af0bd8372fd31f26f1d76dce881a50b4c2c3a7', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, hAsync("slot", { key: '4a7517e19a7f9db8f29d748c75dad359e75dc367' }))));
     }
     static get style() { return NvTablecolumnStyle0; }
     static get cmpMeta() { return {
@@ -14027,7 +15188,7 @@ class NvTabledatacell {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7ac83ec253d7dc4646a647b90f2930ea18d20c9b' }, hAsync("td", { key: 'dedbdb25b21e28cfde242966dc950e1ddf1497ca', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, hAsync("slot", { key: 'f899ee0423444463fb943c4fd9096bc91ba16ea3' }))));
+        return (hAsync(Host, { key: '7a1ce39e2214eb2f85ce54642c9ce01b8af84267' }, hAsync("td", { key: '74359eaa2f3b91c9c58bf1fb24444614c6b21676', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, hAsync("slot", { key: 'cc6eb32e097d4b11a43194aaeda4db1ddda1ff12' }))));
     }
     static get style() { return NvTabledatacellStyle0; }
     static get cmpMeta() { return {
@@ -14057,7 +15218,7 @@ class NvTablehead {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '57d72ca018eb61884bcc91df678d8c97c44463b5' }, hAsync("thead", { key: '30a4ab6720e842aa5fcbebe66f3de4a7fa1aa9e1' }, hAsync("slot", { key: '03ac5c8da1260aa29acb359e2b6fe53fb36bfac4' }))));
+        return (hAsync(Host, { key: '49d3a0f625f25d004fb3c0b4fe570c9bece0cf28' }, hAsync("thead", { key: '7c3c48978fd21f6e942c2b7da1646c79e0e96e37' }, hAsync("slot", { key: 'f61a4f0f89571e1d3d0548b1391207a3d0f09319' }))));
     }
     static get style() { return NvTableheadStyle0; }
     static get cmpMeta() { return {
@@ -14083,7 +15244,7 @@ class NvTablerow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '4c4a058b45a05fcff3ed541f7ffcb80aaaec6c3d' }, hAsync("tr", { key: 'c37eb2098562ba01e8376b5ab6614f64988fe454' }, hAsync("slot", { key: '4b202392edb7345547c423697a2211457b591c00' }))));
+        return (hAsync(Host, { key: 'b36e5025d1bdc47acfb8502ca733681b34bb5481' }, hAsync("tr", { key: '60d9831825ab3fe6acda82ae63336c4f2dddf52a' }, hAsync("slot", { key: 'd5f7388f36ef8a3c06d2ba13c6d2b751479be426' }))));
     }
     static get style() { return NvTablerowStyle0; }
     static get cmpMeta() { return {
@@ -14132,7 +15293,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '943d4c2989f7a2f63b1f22f196b1f6d26b7f8edf' }, hAsync("slot", { key: '82784aa5225fe8c437a52c97242ff2db2cb41fb6' }), hAsync("nv-popover", { key: 'e560ee505f65e0ca0fa525959ad9aa321cd6821d', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'da9632921d70c9ae6a75639e65e1e83160ad16e4', slot: "content" }, this.message), hAsync("slot", { key: '3bbe81d6c0004d9f6691fd89c5732409e57e26e6', name: "content" }))));
+        return (hAsync(Host, { key: '4813090b7b9cabaa208ee6b7e384003a64a5db4b' }, hAsync("slot", { key: 'b80271e22aab3dca30afc8c35eb9861df29669c5' }), hAsync("nv-popover", { key: '854d726cccce5018b4eed180c97798cade7a46c5', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '343519886ef5f664a5ad461b5f3978cec527c9fb', slot: "content" }, this.message), hAsync("slot", { key: '75eeb2a6f32e6eba85dc5d717773be4611a05de4', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -14169,6 +15330,8 @@ registerComponents([
   NvDatagridrow,
   NvFieldcheckbox,
   NvFielddropdownitem,
+  NvFielddropdownitemcheck,
+  NvFieldmultiselect,
   NvFieldnumber,
   NvFieldpassword,
   NvFieldradio,