@nova-design-system/nova-react 3.5.0 → 3.7.0

package/dist/cjs/{nv-fieldmultiselect.entry-B74CLRuh.js → nv-fieldmultiselect.entry-CAdWlUw2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Te0zRbKN.js');
+var index = require('./index-Cv7U-U85.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 
@@ -11,7 +11,7 @@ const NvFieldmultiselect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.valueChanged = index.createEvent(this, "valueChanged");
-        this.multiselectChange = index.createEvent(this, "multiselectChange");
+        this.filterTextChanged = index.createEvent(this, "filterTextChanged");
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -28,6 +28,11 @@ const NvFieldmultiselect = class {
          * always type in fresh data.
          */
         this.autocomplete = 'off';
+        /**
+         * Specifies the selected values of the multiselect field.
+         * This is the canonical value for the component and is used for form submission.
+         */
+        this.value = [];
         /**
          * Marks the input field as required.
          */
@@ -81,17 +86,13 @@ const NvFieldmultiselect = class {
          * Text for the badge showing the number of selected items.
          */
         this.badgeLabel = '';
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region STATE
         /**
          * The text entered by the user for filtering multiselect items.
          */
         this.filterText = '';
-        /**
-         * List of selected values in the multiselect.
-         */
-        this.selectedValues = [];
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
         /**
          * Sorted options for display.
          */
@@ -101,8 +102,8 @@ const NvFieldmultiselect = class {
          * Handle badge close for options mode.
          */
         this.handleBadgeCloseOptions = () => {
-            this.selectedValues = [];
-            this.multiselectChange.emit(this.selectedValues);
+            this.value = [];
+            this.valueChanged.emit(this.value);
             // Uncheck all elements
             const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
             items.forEach(item => {
@@ -118,8 +119,8 @@ const NvFieldmultiselect = class {
          * Handle badge close for slots mode.
          */
         this.handleBadgeCloseSlots = () => {
-            this.selectedValues = [];
-            this.multiselectChange.emit(this.selectedValues);
+            this.value = [];
+            this.valueChanged.emit(this.value);
             // Uncheck all elements
             const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
             items.forEach(item => {
@@ -137,12 +138,19 @@ const NvFieldmultiselect = class {
             if (this.isHandlingEscape) {
                 return;
             }
-            this.filterText = '';
-            // Reset filter if needed
+            // Reset filter if needed, but preserve the filter text
             if (this.filterable) {
                 this.resetFilter();
             }
         };
+        /**
+         * Clear the filter text
+         */
+        this.clearFilterText = () => {
+            this.filterText = '';
+            this.filterTextChanged.emit('');
+            this.resetFilter();
+        };
         /**
          * Handle input blur for options mode.
          */
@@ -151,10 +159,9 @@ const NvFieldmultiselect = class {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    // Reset filter if needed
+                    // Clear filter text when focus is lost
                     if (this.filterable) {
-                        this.filterText = '';
-                        this.resetFilter();
+                        this.clearFilterText();
                     }
                 }
             }, 150);
@@ -212,15 +219,14 @@ const NvFieldmultiselect = class {
                 return;
             }
             const input = event.target;
-            this.value = input.value;
-            this.valueChanged.emit(this.value);
+            this.filterText = input.value;
+            this.filterTextChanged.emit(this.filterText);
             // 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);
         };
@@ -234,15 +240,14 @@ const NvFieldmultiselect = class {
             if (this.disabled || this.readonly)
                 return;
             const input = event.target;
-            this.value = input.value;
-            this.valueChanged.emit(this.value);
+            this.filterText = input.value;
+            this.filterTextChanged.emit(this.filterText);
             // 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);
         };
@@ -272,10 +277,9 @@ const NvFieldmultiselect = class {
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
-                    // Reset filter if needed
+                    // Clear filter text when focus is lost
                     if (this.filterable) {
-                        this.filterText = '';
-                        this.resetFilter();
+                        this.clearFilterText();
                     }
                 }
             }, 150);
@@ -306,14 +310,14 @@ const NvFieldmultiselect = class {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect" }, index.h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (index.h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (index.h("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, "data-scope": "focusable" }, index.h("span", null, this.value || this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, index.h("ul", { role: "content" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), index.h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+            return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect" }, index.h("slot", { name: "leading-input" }), this.value.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (index.h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (index.h("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, "data-scope": "focusable" }, index.h("span", null, this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, index.h("ul", { role: "content" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled }))), index.h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
         };
         /**
          * Renders the component in slots mode
          * @returns {any} The JSX for slots mode
          */
         this.renderSlotsMode = () => {
-            return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, index.h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (index.h("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, "data-scope": "focusable" })) : (index.h("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, "data-scope": "focusable" }, index.h("span", null, this.value || this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, index.h("slot", { name: "content" }))), this.renderDescriptions()));
+            return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, index.h("slot", { name: "leading-input" }), this.value.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (index.h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (index.h("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, "data-scope": "focusable" }, index.h("span", null, this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, index.h("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion EVENTS
@@ -322,7 +326,7 @@ const NvFieldmultiselect = class {
     handleOptionsChange(newValue) {
         if (!newValue)
             return;
-        this.selectedValues = newValue
+        this.value = newValue
             .filter(option => option.checked)
             .map(option => option.value);
         this.reorderOptionsContent();
@@ -331,8 +335,10 @@ const NvFieldmultiselect = class {
      * Emitted when the value changes.
      */
     watchValueHandler() {
-        // Handle value change and update the corresponding multiselect item if it exists
-        this.setInitialSelection();
+        // Synchronize child components when value changes programmatically
+        if (this.el && this.el.isConnected) {
+            this.syncChildComponents();
+        }
     }
     //#endregion WATCHERS
     /****************************************************************************/
@@ -372,22 +378,23 @@ const NvFieldmultiselect = class {
         }
         const { value, checked } = event.detail;
         if (value !== undefined && value !== null) {
-            const newSelectedValues = [...this.selectedValues];
-            const valueIndex = newSelectedValues.indexOf(value);
+            const newValue = [...this.value];
+            const valueIndex = newValue.indexOf(value);
             if (checked && valueIndex === -1) {
-                newSelectedValues.push(value);
+                newValue.push(value);
             }
             else if (!checked && valueIndex > -1) {
-                newSelectedValues.splice(valueIndex, 1);
+                newValue.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);
-                });
+            // Always update the state and emit the event when an item is checked/unchecked
+            this.value = newValue;
+            this.valueChanged.emit(this.value);
+            // Update the checked state of all items to ensure consistency
+            this.syncChildComponents();
+            // Preserve the filter text in the input
+            if (this.filterable && this.inputElement) {
+                // Keep the current filter text in the input
+                this.inputElement.value = this.filterText;
             }
         }
         else {
@@ -426,12 +433,10 @@ const NvFieldmultiselect = class {
         }
         // Specific initialization for slots mode
         if (!this.options) {
+            // Use a microtask to ensure DOM is ready
             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') || '');
+                // Synchronize child components
+                this.syncChildComponents();
                 // Force a reorder after initialization
                 requestAnimationFrame(() => {
                     this.reorderSlotContent();
@@ -442,13 +447,8 @@ const NvFieldmultiselect = class {
         if (this.options) {
             this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
         }
-        // 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
+        // Reset filter if needed
+        if (!this.filterText) {
             this.resetFilter();
         }
     }
@@ -459,6 +459,8 @@ const NvFieldmultiselect = class {
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
+        // Final synchronization of child components after everything is loaded
+        this.syncChildComponents();
     }
     /**
      * Unsubscribe from click outside event.
@@ -476,38 +478,6 @@ const NvFieldmultiselect = class {
     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.
      */
@@ -524,8 +494,8 @@ const NvFieldmultiselect = class {
             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') || ''));
+            const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
+            const unselectedItems = items.filter(item => !this.value.includes(item.getAttribute('value') || ''));
             if (selectedItems.length > 0) {
                 this.manageDivider(ul, selectedItems, unselectedItems);
             }
@@ -536,7 +506,7 @@ const NvFieldmultiselect = class {
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
-        return this.selectedValues;
+        return this.value;
     }
     /**
      * Reorder the content of the slot.
@@ -558,8 +528,8 @@ const NvFieldmultiselect = class {
             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') || ''));
+        const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
+        const unselectedItems = items.filter(item => !this.value.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
@@ -585,8 +555,8 @@ const NvFieldmultiselect = class {
         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') || ''));
+        const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
+        const unselectedItems = items.filter(item => !this.value.includes(item.getAttribute('value') || ''));
         // Reorder the elements
         selectedItems.forEach(item => ul.appendChild(item));
         unselectedItems.forEach(item => ul.appendChild(item));
@@ -622,8 +592,8 @@ const NvFieldmultiselect = class {
             }
             // 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') || ''));
+            const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
+            const unselectedItems = items.filter(item => !this.value.includes(item.getAttribute('value') || ''));
             this.manageDivider(ul, selectedItems, unselectedItems);
             return;
         }
@@ -644,8 +614,8 @@ const NvFieldmultiselect = class {
             });
             // 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') || ''));
+            const visibleSelected = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
+            const visibleUnselected = visibleItems.filter(item => !this.value.includes(item.getAttribute('value') || ''));
             this.manageDivider(ul, visibleSelected, visibleUnselected);
         }
         else {
@@ -703,8 +673,8 @@ const NvFieldmultiselect = class {
         });
         // 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') || ''));
+        const visibleSelected = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
+        const visibleUnselected = visibleItems.filter(item => !this.value.includes(item.getAttribute('value') || ''));
         this.manageDivider(ul, visibleSelected, visibleUnselected);
         // Add or remove the empty message based on the case
         if (!hasVisibleItems) {
@@ -752,8 +722,8 @@ const NvFieldmultiselect = class {
         });
         // 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') || '')));
+        const visibleSelectedItems = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
+        this.manageDivider(ul, visibleSelectedItems, visibleItems.filter(item => !this.value.includes(item.getAttribute('value') || '')));
         // Add empty message if no items match the filter
         if (!hasVisibleItems) {
             const emptyMessage = document.createElement('li');
@@ -950,6 +920,29 @@ const NvFieldmultiselect = class {
             divider.style.display = 'none';
         }
     }
+    /**
+     * Synchronizes the checked state of all child nv-fielddropdownitemcheck components
+     * with the current selectedValues state.
+     */
+    syncChildComponents() {
+        // Early return if element is not ready
+        if (!this.el || !this.el.isConnected) {
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        items.forEach(item => {
+            // Get the effective value: use explicit value if present, otherwise use label
+            const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
+            if (this.value.includes(itemValue)) {
+                item.setAttribute('checked', '');
+                item.checked = true;
+            }
+            else {
+                item.removeAttribute('checked');
+                item.checked = false;
+            }
+        });
+    }
     /**
      * Renders description and error description sections
      * @returns {any} The JSX for descriptions

package/dist/cjs/{nv-fieldnumber.entry-BQBy1EIj.js → nv-fieldnumber.entry-Bbk2wO5k.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Te0zRbKN.js');
+var index = require('./index-Cv7U-U85.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 
@@ -115,9 +115,9 @@ const NvFieldnumber = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '9a2922f5aaa1047da249563152b08f5fd74f0340' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'f7f0f9a711f4c94ea4f6257a541aabbd08b9ca31', htmlFor: this.inputId }, index.h("slot", { key: '9dbcb9386a05462da3cdeba01e6c4831ef52b7a5', name: "label" }, this.label))), index.h("div", { key: '81ff77ec49a03d9bb622b8e934b71a475770b518', class: "input-wrapper" }, index.h("slot", { key: 'd445e90aeebaf9b546b96cbbc77c72b10ab144bf', name: "before-input" }), index.h("div", { key: '537c96360b91404d1ca560be27a71dbd0efd54ce', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '894fc44bf45a7d66d5d108fd816d19aa86b24407', name: "leading-input" }), index.h("input", { key: 'a774febb21a489c858d1308f6d38b138815896aa', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: 'e955eb9ad46950afcfe3de93ae18540ed583f66f', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: 'b2b5824c6cb2e1bb378600f0fb6511b8695e8df4', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'bce78b06f5ae6ed68bf795abad0f34dadd849422', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '2c304550d4f49de47cf24e6d650e995f98b4a17a', class: "stepper" }, index.h("nv-iconbutton", { key: 'e96f7a47521387c79149f93f3cb4719cd24a9c0d', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '2f579a243c57166f3ccd43960deccda9b3f2d798', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: 'b305bae132034786a51e6a918f650391f0e4d406', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6eaae8de9885c77a36342ba48b9b0e88266e9bfe', class: "description" }, index.h("slot", { key: '3a2f56c02df550ce7ca8b51771acbfd3dd7bf2d4', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'aa505a05a032ac11c8626cbb601544c1037aabf6', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'e94717e1233cba33c2c189bb0b971f8ca6dc979e', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '0fcd74073e1c3f2c8de00c21e1ff782d4ed2fbe8' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c4dc1dc4efd2150fb897f0602b07ab22643756e6', htmlFor: this.inputId }, index.h("slot", { key: 'a0aa360dd532e11fd0273c8ba8d5ded3adc45642', name: "label" }, this.label))), index.h("div", { key: 'c2ffeb70a8e5ffe43ec5061e035add48fd0f09a2', class: "input-wrapper" }, index.h("slot", { key: '62ef15b0961ae4af93940d3d2dd10fdb6a636d4d', name: "before-input" }), index.h("div", { key: '07be430ad207b6023ee969b7ad290d4946f4b6fe', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '69978ac5971a25cc8c0515250d741ac8a658c3bd', name: "leading-input" }), index.h("input", { key: '284f8da710438e470a26541b7cf72f89730ef3ab', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: 'd028cd632cff77f592429e97a81a1d45aeec621d', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '7de629b71971559c647ba4ad4885815124bb63b3', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '135e609c2e568174db3503633f389c70a2fceaba', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '17a952157f55ff65911d852a4274de5db4241508', class: "stepper" }, index.h("nv-iconbutton", { key: '33d0412ea6ed883d92b64363b404628d610e2339', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '68bf536a5fe5bb0b3c2c3bd5508324c050cb8764', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: '3922a559b4ca954bee9caea379c940e7b132f65f', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '8844bf48e0251717549d4e0079370fe2f590c616', class: "description" }, index.h("slot", { key: 'f35c77ffa2f01a66d72ef75a65c5c634b14bbdbc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'ce407c77dd30a235c7691727480c911ad6128392', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7ffb85e03e5a9a949f022398537c74a812b8a12f', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-fieldpassword.entry-DNFZvmBx.js → nv-fieldpassword.entry-BOtLqrGx.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Te0zRbKN.js');
+var index = require('./index-Cv7U-U85.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 
@@ -106,9 +106,9 @@ const NvFieldpassword = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'de631f354c11bca46438aa57eb2f5b255b99f439' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'b5b7d00ec3cd2bf062c7891f44cb1b9f4032e659', htmlFor: this.inputId }, index.h("slot", { key: '04149706c9f07e290cf9d93b2890de26c6ba832a', name: "label" }, this.label))), index.h("div", { key: 'eb7a834ceb2769de0059ca96226bb8a31e7f3e95', class: "input-wrapper" }, index.h("slot", { key: 'd250f823150eb3ff2fc93869cd7c7afa9738a8ef', name: "before-input" }), index.h("div", { key: 'a1ce5f337b3c29152869395a33acdf4b872e8e04', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '589cc579cba9c2364bda3948cdf14ac4e1687088', name: "leading-input" }), index.h("input", { key: '5f45023c3a4f5dca5bff08e960221c711eb008b6', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: '1b78092817109ee795bf90c8182abfa0a9af35af', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '1d64a57a5e4eab88b499a9783d460a33d052950e', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), index.h("slot", { key: '1183158e98fa88ca143b5443db36f7f658b9acb7', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '34181f122eb6651a605bc00f96bccd7cfce6b11b', class: "description" }, index.h("slot", { key: '74a0b8e00d96d60884f32c89a4a15e9b2f7c25ed', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'd16bf3d39dc42960dc089df6ac8959d09f8a1076', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'cf19821689d4889eda9ce5a6cfa5675b97fca86e', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: 'b8d142f5a35087f977437af4d2094783e455d9a0' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'f26d2c14ee03d1ef80fe263a1849c0da03a39a8c', htmlFor: this.inputId }, index.h("slot", { key: '13dfa9e681e1b5a7244e7debc7d1c1af36bedd37', name: "label" }, this.label))), index.h("div", { key: '5a01c9cc4573543e0d6633f9b8fadfa1ad6b066a', class: "input-wrapper" }, index.h("slot", { key: '2ff066ad5da2d3fe0885ccc1a0c97f9817ff4bbe', name: "before-input" }), index.h("div", { key: '429535a2b55ea4af5374067948f5be1d16898694', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '00d8fa3cd0e8af41f1b9c46cefc256a29187db9d', name: "leading-input" }), index.h("input", { key: '7aa5db4e17d62e3a9c10e8b5e2dabe224033b2da', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: '0c919def4c580387d87a2f500a663f4dba5874cb', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '2b020de565c3311431c83c68a773731055c1c6c5', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), index.h("slot", { key: '938de4d9c513e3aef3de1e9a108e69558843b466', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6150e4be7c79bf10a1a2db3b14334c4fd9d2396c', class: "description" }, index.h("slot", { key: 'de557936e4ed9e0798cbbb95f832fa6a831d63a9', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '74e43aa5f463f8156d44d261d5641c0aafccc5fc', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '4956c95a870964a712524fb30d26e9fd500edef8', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-fieldradio.entry-BIR29jv5.js → nv-fieldradio.entry-CY4txacC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Te0zRbKN.js');
+var index = require('./index-Cv7U-U85.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -87,9 +87,9 @@ const NvFieldradio = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e1a92204a7d3e07de9485873906ed57dc2f4dfb1', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '8161b36c31b960a4ca4f7a1291a9cdbdd830429c', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), index.h("div", { key: '8d5ff5b5742a96dc9d1167298859a7a97347eeab', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '7417fe1c5041e20fd63abca907fd75fe7d3b49d2', htmlFor: this.inputId }, index.h("slot", { key: 'e29a092dbd19c912c496e1ae56d9f46bcb44208c', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'a894108a6e5235010d18547a39daf526e066e432', class: "description" }, index.h("slot", { key: 'c67b5b5a5d2ef1f27e69eb251e9a15c98909db85', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '18ea2ae58994289900f28c0e6220e113b45b2a92', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '52a10763fb7bf688e5a1de5e854aa0d80bc996f4', name: "error-description" }, this.errorDescription))))));
+        return (index.h(index.Host, { key: '5721fd4ffd6d8b1392e65d0b8eaea4dea241be63', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: 'c54d8952edb57e34016a85ba2b6b9c7fc2a20a37', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), index.h("div", { key: 'e80c6c12fbf461776822185109e05aea5a6c954b', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '0f89b274c7ee7ea7d2e3116a004575176d044b5b', htmlFor: this.inputId }, index.h("slot", { key: '04b04fbc8ad5a199def48e728c74f13e7230414d', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'e5c5048c50d0089393a29f12eb09f0ae26aedcfc', class: "description" }, index.h("slot", { key: '6902044f273d508a79a66a3f185fc4a9ac48e94f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '8d388b64deccd2f398485dfa0b83d70b8c50ae47', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'c5237272b97c754d2745eb62a85519f2c14dfb27', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-fieldselect.entry-DulA_N5q.js → nv-fieldselect.entry-CRP6e7uq.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Te0zRbKN.js');
+var index = require('./index-Cv7U-U85.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 
@@ -347,13 +347,13 @@ const NvFieldselect = class {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (index.h(index.Host, { key: '17dc03e5db7ec57623e6fb4c06199aaf1ed85991' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '81fff1ee75f4e1415f60a2900303123cee3c8b58', htmlFor: this.inputId }, index.h("slot", { key: '69569c3981e754e22ffcfb4d73121ee7056f0695', name: "label" }, this.label))), index.h("div", { key: '251d557b6f1618241cccbb36e8c03415075ddf98', class: "select-wrapper" }, index.h("slot", { key: '765d37ea12613de6e65cc77c9aa0000e75dc1243', name: "before-input" }), index.h("div", { key: '6150af4f94e13a2fced6dcf597d1310a2282c337', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '88f48c27c2a109d9db8a65671e3028c13272dde7', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '2e0884fdbdda028426957530f815f0ce2b772322', 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 (index.h(index.Host, { key: 'ff869c177289342a39ae292a530359af940a5669' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '10815f70059de9b1774ccc26b69d441d250e1833', htmlFor: this.inputId }, index.h("slot", { key: 'afe78cd3671151060fd1e2a37b77c164767908fa', name: "label" }, this.label))), index.h("div", { key: '064d8f512bc5f11831096d3a092afb00dcfeb1bc', class: "select-wrapper" }, index.h("slot", { key: 'c12d375bc5a558d25f1eb34343e2ad5fce784558', name: "before-input" }), index.h("div", { key: 'ffb39cfc0444edc49a4e2b6318990085009d7598', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: 'd5fccac0e92fe0553b8478a6f5dc9be4591e8c23', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '94dc05d08de8120c78fa140df5eb3adc09ce97da', 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` })), index.h("select", { key: '0bd79358080fd6d76e28ba574e5fae336ab4b34d', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), index.h("select", { key: '85ffba58429aaa393cc9178e0866a61f85d92103', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '8266f6651293d179f5d119bc25b0d171d1064cd8', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '5300e5c151dfdca429550a4e1823954783b4f086', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '40ff228bfc531fe269a4acca577ebe2230d679e9', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: '5d77e09bbce330e3e855035f2cab0b0001ba7839', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: 'b19c29e25d9f9cae2c6a3e4129f6f74cbb01becd', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'ef53e3d22291e580bcf2554273d47cdfa43eefc4', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '8bdbcef6106634c2ce37c8c1be50d6bd7cbe9e2f', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '1e4b5d282fcacceac0c46a02dfa1243a00c28ac0', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '634be5308aaf40697bd1e7a2ef085e94e0d38f43', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '694b0306ddaf671faea9dd863bb7f2917b567ffb', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '4f86b0916dcbfefb24af5e5e2c0ca009ece6193b', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'f99ba37d4a70b7c352b4abb0be0b5eb85b4cc947', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'b152a3b110b0f780b29adcf1efb4aadf98cf81be', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '63c6076165bae5d36732179c4a761d5b381076b5', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'dd3e41b62290c580e050eb5a4742aabc7395cbda', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '87bedab511a8b3d07d6616e4937342b6d272c5f3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'd4cf69f5f2446fbbf8ed36910d89c3aa7ac2c826', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '2fc8b58658bd406af834dcad378b3b00aca40b22', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }