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

package/dist/components/nv-fieldmultiselect.js

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
-import { d as defineCustomElement$8 } from './p-00ac701f.js';
-import { d as defineCustomElement$7 } from './p-9e6e26cb.js';
-import { d as defineCustomElement$6 } from './p-44f0039b.js';
-import { d as defineCustomElement$5 } from './p-e072f051.js';
-import { d as defineCustomElement$4 } from './p-05c19c9a.js';
-import { d as defineCustomElement$3 } from './p-918bb719.js';
-import { d as defineCustomElement$2 } from './p-001c888b.js';
+import { d as defineCustomElement$8 } from './p-e8e6f88a.js';
+import { d as defineCustomElement$7 } from './p-0143cee0.js';
+import { d as defineCustomElement$6 } from './p-e104c58a.js';
+import { d as defineCustomElement$5 } from './p-dd7ff995.js';
+import { d as defineCustomElement$4 } from './p-144e80f0.js';
+import { d as defineCustomElement$3 } from './p-dfd2d4f0.js';
+import { d as defineCustomElement$2 } from './p-8067d283.js';
 import { v as v4 } from './p-f5ff676c.js';
 
 const nvFieldmultiselectCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}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;max-width:480px}nv-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}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-in-field)}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 nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}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;justify-content:center;align-items:center;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, 1);background:var(--nv-field-background);transition:all 150ms ease-out;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,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect:focus: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 .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>nv-badge{margin-left:var(--form-field-padding-x)}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);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;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 input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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)}.no-results-message{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}";
@@ -16,7 +16,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         super();
         this.__registerHost();
         this.valueChanged = createEvent(this, "valueChanged", 7);
-        this.multiselectChange = createEvent(this, "multiselectChange", 7);
+        this.filterTextChanged = createEvent(this, "filterTextChanged", 7);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -33,6 +33,11 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
          * 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.
          */
@@ -86,17 +91,13 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
          * 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.
          */
@@ -106,8 +107,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
          * 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 => {
@@ -123,8 +124,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
          * 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 => {
@@ -142,12 +143,19 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             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.
          */
@@ -156,10 +164,9 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
                 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);
@@ -217,15 +224,14 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
                 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);
         };
@@ -239,15 +245,14 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             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);
         };
@@ -277,10 +282,9 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
                 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);
@@ -311,14 +315,14 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            return (h(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (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 ? (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" })) : (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" }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), 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 })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, h("ul", { role: "content" }, this.options.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
+            return (h(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), this.value.length > 0 && (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 ? (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" })) : (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" }, h("span", null, this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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 })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, h("ul", { role: "content" }, this.options.map(option => (h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled }))), 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 (h(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (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 ? (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" })) : (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" }, h("span", null, this.value || this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), 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 })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, h("slot", { name: "content" }))), this.renderDescriptions()));
+            return (h(Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), this.value.length > 0 && (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 ? (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" })) : (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" }, h("span", null, this.placeholder))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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 })), h("slot", { name: "after-input" })), h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, h("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion EVENTS
@@ -327,7 +331,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
     handleOptionsChange(newValue) {
         if (!newValue)
             return;
-        this.selectedValues = newValue
+        this.value = newValue
             .filter(option => option.checked)
             .map(option => option.value);
         this.reorderOptionsContent();
@@ -336,8 +340,10 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      * 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
     /****************************************************************************/
@@ -377,22 +383,23 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         }
         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 {
@@ -431,12 +438,10 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         }
         // 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();
@@ -447,13 +452,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         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();
         }
     }
@@ -464,6 +464,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
+        // Final synchronization of child components after everything is loaded
+        this.syncChildComponents();
     }
     /**
      * Unsubscribe from click outside event.
@@ -481,38 +483,6 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
     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.
      */
@@ -529,8 +499,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             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);
             }
@@ -541,7 +511,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
-        return this.selectedValues;
+        return this.value;
     }
     /**
      * Reorder the content of the slot.
@@ -563,8 +533,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             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
@@ -590,8 +560,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         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));
@@ -627,8 +597,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             }
             // 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;
         }
@@ -649,8 +619,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             });
             // 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 {
@@ -708,8 +678,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         });
         // 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) {
@@ -757,8 +727,8 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         });
         // 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');
@@ -955,6 +925,29 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             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
@@ -987,7 +980,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         "description": [513],
         "placeholder": [513],
         "autocomplete": [513],
-        "value": [1537],
+        "value": [1040],
         "required": [516],
         "readonly": [516],
         "disabled": [516],
@@ -1002,8 +995,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         "autofocus": [516],
         "fluid": [516],
         "badgeLabel": [513, "badge-label"],
-        "filterText": [32],
-        "selectedValues": [32],
+        "filterText": [1537, "filter-text"],
         "sortedOptions": [32],
         "isHandlingEscape": [32],
         "getFilterText": [64],