@nova-design-system/nova-webcomponents 3.9.1 → 3.10.0

package/dist/esm/nv-fieldmultiselect.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a1936cd0.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-a1936cd0.js';
 import { v as v4 } from './v4-a79185f4.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}";
+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-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{cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x)}.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}.select-all-container{position:sticky;top:0;background-color:var(--components-list-dropdown-background);border-bottom:1px solid var(--components-list-dropdown-separator);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);z-index:10;margin-bottom:0}.select-all-container .select-all-header{display:flex;align-items:center;gap:var(--form-field-gap)}.select-all-container .select-all-header nv-fieldcheckbox{flex:1;margin:0}.select-all-container .select-all-header nv-iconbutton,.select-all-container .select-all-header nv-button{flex-shrink:0;margin-left:auto}.select-all-container .select-all-header nv-button{justify-content:center}";
 const NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
 
 const NvFieldmultiselect = class {
@@ -9,8 +9,6 @@ const NvFieldmultiselect = class {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.filterTextChanged = createEvent(this, "filterTextChanged", 7);
-        /****************************************************************************/
-        //#region PROPERTIES
         /**
          * Sets the ID for the input element and the for attribute of the associated
          * label. If no ID is provided, a random one will be automatically generated
@@ -25,11 +23,6 @@ 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.
          */
@@ -57,13 +50,22 @@ const NvFieldmultiselect = class {
          */
         this.open = false;
         /**
-         * The text to display when no items match the filter.
+         * Allows the field to stretch and fill the entire width of its container.
          */
-        this.emptyResult = 'No results found';
+        this.fluid = false;
+        /**
+         * Specifies the selected values of the multiselect field.
+         * This is the canonical value for the component and is used for form submission.
+         */
+        this.value = [];
         /**
          * Enables or disables the filtering feature for the multiselect items.
          */
         this.filterable = false;
+        /**
+         * The text to display when no items match the filter.
+         */
+        this.emptyResult = 'No results found';
         /**
          * Delay in milliseconds before the search is triggered when typing in the filter input.
          * @default 300
@@ -75,10 +77,6 @@ const NvFieldmultiselect = class {
          * element.
          */
         this.autofocus = false;
-        /**
-         * Allows the field to stretch and fill the entire width of its container.
-         */
-        this.fluid = false;
         /**
          * Text for the badge showing the number of selected items.
          */
@@ -87,6 +85,18 @@ const NvFieldmultiselect = class {
          * The text entered by the user for filtering multiselect items.
          */
         this.filterText = '';
+        /**
+         * Enables or disables the "Select All / Deselect All" toggle functionality.
+         */
+        this.enableSelectAll = false;
+        /**
+         * Text for the "Select All" button.
+         */
+        this.selectAllLabel = 'Select/deselect all';
+        /**
+         * Text for the "Deselect All" button.
+         */
+        this.deselectAllLabel = 'Select/deselect all';
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
@@ -95,10 +105,22 @@ const NvFieldmultiselect = class {
          */
         this.sortedOptions = [];
         this.isHandlingEscape = false;
+        /**
+         * Indicates whether the current filter has visible results.
+         * Used to control the visibility of the "Select All" button.
+         */
+        this.hasFilterResults = true;
+        /**
+         * Controls the visibility of the select all section.
+         */
+        this.isSelectAllSectionVisible = true;
+        // Add the flag to the class
+        this.preventBlurClose = false;
         /**
          * Handle badge close for options mode.
          */
         this.handleBadgeCloseOptions = () => {
+            console.info('handleBadgeCloseOptions:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -116,6 +138,7 @@ const NvFieldmultiselect = class {
          * Handle badge close for slots mode.
          */
         this.handleBadgeCloseSlots = () => {
+            console.info('handleBadgeCloseSlots:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -124,8 +147,11 @@ const NvFieldmultiselect = class {
                 item.checked = false;
                 item.style.display = '';
             });
-            // Reorder slot content
-            this.reorderSlotContent();
+            // Force DOM update before reordering
+            requestAnimationFrame(() => {
+                // Reorder slot content
+                this.reorderSlotContent();
+            });
         };
         /**
          * Handle popover close
@@ -147,12 +173,17 @@ const NvFieldmultiselect = class {
             this.filterText = '';
             this.filterTextChanged.emit('');
             this.resetFilter();
+            this.hasFilterResults = true;
         };
         /**
          * Handle input blur for options mode.
          */
         this.handleInputBlurOptions = () => {
             setTimeout(() => {
+                if (this.preventBlurClose) {
+                    this.preventBlurClose = false;
+                    return; // Don't close the popover
+                }
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
@@ -299,6 +330,102 @@ const NvFieldmultiselect = class {
             }
             this.open = !this.open;
         };
+        /**
+         * Toggles the selection state of all non-disabled options in options mode.
+         * Respects filtering by only selecting/deselecting visible items.
+         * @param {boolean} selectAll - Whether to select all items (true) or deselect all (false)
+         */
+        this.toggleSelectAllOptions = (selectAll) => {
+            if (!this.options)
+                return;
+            // Get visible and enabled option values from DOM
+            const visibleOptionValues = this.getVisibleEnabledOptionItems();
+            console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
+            if (selectAll) {
+                // Select all visible options - merge with existing selections
+                this.value = [...new Set([...this.value, ...visibleOptionValues])];
+            }
+            else {
+                // Deselect only the visible options, keep others that might be filtered out
+                this.value = this.value.filter(val => !visibleOptionValues.includes(val));
+            }
+            console.info('[SelectAll][Options] New value after toggle:', this.value);
+            // Emit the change event
+            this.valueChanged.emit(this.value);
+            // Synchronize child components
+            this.syncChildComponents();
+            // Reorder content to move selected items to top
+            this.reorderOptionsContent();
+        };
+        /**
+         * Toggles the selection state of all non-disabled slot items.
+         * @param {boolean} selectAll - Whether to select all items (true) or deselect all (false)
+         */
+        this.toggleSelectAllSlots = (selectAll) => {
+            if (this.options)
+                return; // Only for slots mode
+            // Get visible and enabled items
+            const items = this.getVisibleEnabledSlotItems();
+            console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
+            if (selectAll) {
+                // Select all visible items
+                const allActiveValues = items
+                    .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
+                    .filter(value => value !== '');
+                this.value = [...new Set([...this.value, ...allActiveValues])];
+            }
+            else {
+                // Deselect only the visible items, keep others that might be filtered out
+                const visibleValues = items
+                    .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
+                    .filter(value => value !== '');
+                this.value = this.value.filter(val => !visibleValues.includes(val));
+            }
+            console.info('[SelectAll][Slots] New value after toggle:', this.value);
+            // Emit the change event
+            this.valueChanged.emit(this.value);
+            // Force synchronization with a small delay to ensure DOM is updated
+            requestAnimationFrame(() => {
+                this.syncChildComponents();
+                this.reorderSlotContent();
+            });
+        };
+        /**
+         * Handle click on the select all checkbox in options mode.
+         * @param {Event} event - The click event.
+         */
+        this.handleSelectAllCheckboxOptionsClick = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            console.info('[handleSelectAllCheckboxOptionsClick] event:', event);
+            const currentState = this.getSelectAllCheckboxStateOptions();
+            console.info('[SelectAll][Options] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
+            // Logic to handle the indeterminate state
+            // - unchecked → select all
+            // - indeterminate → select all (clicking on indeterminate will change to checked)
+            // - checked → deselect all
+            const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
+            console.info('[SelectAll][Options] shouldSelectAll:', shouldSelectAll);
+            this.toggleSelectAllOptions(shouldSelectAll);
+        };
+        /**
+         * Handle click on the select all checkbox in slots mode.
+         * @param {Event} event - The click event.
+         */
+        this.handleSelectAllCheckboxSlotsClick = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            console.info('[handleSelectAllCheckboxSlotsClick] event:', event);
+            const currentState = this.getSelectAllCheckboxStateSlots();
+            console.info('[SelectAll][Slots] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
+            // Logic to handle the indeterminate state
+            // - unchecked → select all
+            // - indeterminate → select all (clicking on indeterminate will change to checked)
+            // - checked → deselect all
+            const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
+            console.info('[SelectAll][Slots] shouldSelectAll:', shouldSelectAll);
+            this.toggleSelectAllSlots(shouldSelectAll);
+        };
         //#endregion METHODS
         /****************************************************************************/
         //#region RENDER
@@ -307,35 +434,83 @@ const NvFieldmultiselect = class {
          * @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.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()));
+            return (h(Host, { "aria-label": this.label }, (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", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (h(Fragment, null, h("input", { id: this.inputId, type: "text", style: {
+                    position: 'absolute',
+                    opacity: '0',
+                    width: '0',
+                    height: '0',
+                    pointerEvents: 'none',
+                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, 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", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: () => {
+                    this.preventBlurClose = true;
+                }, onClick: this.clearFilterText })), 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
+                    this.preventBlurClose = true;
+                }, onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllOptionsButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
+                    'indeterminate', label: this.getSelectAllCheckboxStateOptions() === 'unchecked'
+                    ? this.selectAllLabel
+                    : this.deselectAllLabel, onMouseDown: () => {
+                    this.preventBlurClose = true;
+                }, onClick: this.handleSelectAllCheckboxOptionsClick }))))), h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (h("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled })))))), 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.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()));
+            return (h(Host, { "aria-label": this.label }, (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", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (h(Fragment, null, h("input", { id: this.inputId, type: "text", style: {
+                    position: 'absolute',
+                    opacity: '0',
+                    width: '0',
+                    height: '0',
+                    pointerEvents: 'none',
+                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), h("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, 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", onMouseDown: () => {
+                    this.preventBlurClose = true;
+                }, 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', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
+                    this.preventBlurClose = true;
+                }, onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllSlotButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
+                    'indeterminate', label: this.getSelectAllCheckboxStateSlots() === 'unchecked'
+                    ? this.selectAllLabel
+                    : this.deselectAllLabel, onMouseDown: () => {
+                    this.preventBlurClose = true;
+                }, onClick: this.handleSelectAllCheckboxSlotsClick }))))), h("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
     handleOptionsChange(newValue) {
+        console.info('[Watch:options] newValue:', newValue);
+        console.info('[Watch:options] current value before update:', this.value);
         if (!newValue)
             return;
-        this.value = newValue
-            .filter(option => option.checked)
-            .map(option => option.value);
+        // If the parent has set a value prop, use it. Otherwise, derive from checked options.
+        // (Assume: if value is undefined, it's not set by parent; if it's an array, it's set.)
+        if (this.value === undefined || this.value.length === 0) {
+            this.value = newValue
+                .filter(option => option.checked)
+                .map(option => option.value);
+            console.info('[Watch:options] updated value from checked options:', this.value);
+        }
+        else {
+            // If value is set, ensure checked states in options match value
+            newValue.forEach(option => {
+                option.checked = this.value.includes(option.value);
+            });
+            console.info('[Watch:options] options checked state synced to value:', newValue);
+        }
         this.reorderOptionsContent();
     }
-    /**
-     * Emitted when the value changes.
-     */
     watchValueHandler() {
+        console.info('[Watch:value] Value changed:', this.value);
         // Synchronize child components when value changes programmatically
         if (this.el && this.el.isConnected) {
             this.syncChildComponents();
         }
+        // Also, update options checked state if options exist
+        if (this.options) {
+            this.options.forEach(option => {
+                option.checked = this.value.includes(option.value);
+            });
+        }
     }
     //#endregion WATCHERS
     /****************************************************************************/
@@ -374,6 +549,7 @@ const NvFieldmultiselect = class {
             return;
         }
         const { value, checked } = event.detail;
+        console.info('[Event:itemChecked] value:', value, 'checked:', checked, 'current value:', this.value);
         if (value !== undefined && value !== null) {
             const newValue = [...this.value];
             const valueIndex = newValue.indexOf(value);
@@ -383,6 +559,7 @@ const NvFieldmultiselect = class {
             else if (!checked && valueIndex > -1) {
                 newValue.splice(valueIndex, 1);
             }
+            console.info('[Event:itemChecked] newValue after update:', newValue);
             // Always update the state and emit the event when an item is checked/unchecked
             this.value = newValue;
             this.valueChanged.emit(this.value);
@@ -395,7 +572,7 @@ const NvFieldmultiselect = class {
             }
         }
         else {
-            console.warn('Received itemChecked event with undefined or null value'); // Warning log
+            console.warn('[Event:itemChecked] Received itemChecked event with undefined or null value'); // Warning log
         }
     }
     // Add a listener for the slot content
@@ -417,6 +594,7 @@ const NvFieldmultiselect = class {
      * Subscribe to click outside event.
      */
     connectedCallback() {
+        console.info('[Lifecycle] connectedCallback - value:', this.value);
         document.addEventListener('click', this.handleClickOutside.bind(this));
     }
     /**
@@ -424,12 +602,15 @@ const NvFieldmultiselect = class {
      */
     componentWillLoad() {
         var _a;
+        console.info('[Lifecycle] componentWillLoad - value:', this.value, 'options:', this.options);
         // Don't call handleOptionsChange if we are in slots mode
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
         // Specific initialization for slots mode
         if (!this.options) {
+            // Initialize value from checked slotted children
+            this.initializeValueFromSlots();
             // Use a microtask to ensure DOM is ready
             Promise.resolve().then(() => {
                 // Synchronize child components
@@ -448,21 +629,30 @@ const NvFieldmultiselect = class {
         if (!this.filterText) {
             this.resetFilter();
         }
+        // Initialize filter results state
+        this.hasFilterResults = true;
     }
     /**
      * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
      */
     componentDidLoad() {
+        console.info('[Lifecycle] componentDidLoad - value:', this.value, 'options:', this.options);
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
         // Final synchronization of child components after everything is loaded
         this.syncChildComponents();
+        // For slots mode, ensure value is initialized from checked children if not already
+        if (!this.options) {
+            this.initializeValueFromSlots();
+            this.syncChildComponents();
+        }
     }
     /**
      * Unsubscribe from click outside event.
      */
     disconnectedCallback() {
+        console.info('[Lifecycle] disconnectedCallback - value:', this.value);
         document.removeEventListener('click', this.handleClickOutside.bind(this));
     }
     //#endregion LIFECYCLE
@@ -497,14 +687,67 @@ const NvFieldmultiselect = class {
                 this.manageDivider(ul, selectedItems, unselectedItems);
             }
         }
+        // Reset filter results state
+        this.hasFilterResults = true;
     }
     /**
      * Returns the list of selected values.
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
+        console.info('getSelectedValues:', this.value);
         return this.value;
     }
+    /**
+     * Select all visible and enabled items.
+     * Works for both options and slots mode.
+     * @returns {Promise<void>}
+     */
+    async selectAll() {
+        if (this.disabled || this.readonly)
+            return;
+        if (this.options) {
+            this.toggleSelectAllOptions(true);
+        }
+        else {
+            this.toggleSelectAllSlots(true);
+        }
+    }
+    /**
+     * Deselect all visible and enabled items.
+     * Works for both options and slots mode.
+     * @returns {Promise<void>}
+     */
+    async deselectAll() {
+        if (this.disabled || this.readonly)
+            return;
+        if (this.options) {
+            this.toggleSelectAllOptions(false);
+        }
+        else {
+            this.toggleSelectAllSlots(false);
+        }
+    }
+    /**
+     * Toggle selection state of all visible and enabled items.
+     * If all items are selected, deselects all. Otherwise, selects all.
+     * Works for both options and slots mode.
+     * @returns {Promise<void>}
+     */
+    async toggleSelectAll() {
+        if (this.disabled || this.readonly)
+            return;
+        const currentState = this.options
+            ? this.getSelectAllCheckboxStateOptions()
+            : this.getSelectAllCheckboxStateSlots();
+        const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
+        if (this.options) {
+            this.toggleSelectAllOptions(shouldSelectAll);
+        }
+        else {
+            this.toggleSelectAllSlots(shouldSelectAll);
+        }
+    }
     /**
      * Reorder the content of the slot.
      */
@@ -548,7 +791,7 @@ const NvFieldmultiselect = class {
      * Reorder the content for options mode with async handling
      */
     reorderOptionsContent() {
-        const ul = this.el.querySelector('ul[role="content"]');
+        const ul = this.el.querySelector('ul');
         if (!ul)
             return;
         const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
@@ -656,6 +899,7 @@ const NvFieldmultiselect = class {
             this.removeEmptyMessageOption(ul);
             items.forEach(item => (item.style.display = ''));
             this.reorderOptionsContent(); // Reorder after reset
+            this.hasFilterResults = true; // Reset filter means we have results
             return;
         }
         // Filter the items
@@ -668,6 +912,8 @@ const NvFieldmultiselect = class {
             if (matchesFilter)
                 hasVisibleItems = true;
         });
+        // Update the filter results state
+        this.hasFilterResults = hasVisibleItems;
         // Manage the divider with the visible items
         const visibleItems = items.filter(item => item.style.display !== 'none');
         const visibleSelected = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
@@ -698,6 +944,7 @@ const NvFieldmultiselect = class {
         // If filter text is empty, reset all items visibility
         if (!this.filterText.trim()) {
             this.resetFilter();
+            this.hasFilterResults = true; // Reset filter means we have results
             return;
         }
         const normalizedFilter = this.normalizeText(this.filterText);
@@ -717,6 +964,8 @@ const NvFieldmultiselect = class {
             if (matchesFilter)
                 hasVisibleItems = true;
         });
+        // Update the filter results state
+        this.hasFilterResults = hasVisibleItems;
         // Get visible items after filtering
         const visibleItems = items.filter(item => item.style.display !== 'none');
         const visibleSelectedItems = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
@@ -927,10 +1176,13 @@ const NvFieldmultiselect = class {
             return;
         }
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        console.info('[syncChildComponents] value:', this.value);
         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)) {
+            const shouldBeChecked = this.value.includes(itemValue);
+            console.info('[syncChildComponents] itemValue:', itemValue, 'shouldBeChecked:', shouldBeChecked, 'item.checked(before):', item.checked);
+            if (shouldBeChecked) {
                 item.setAttribute('checked', '');
                 item.checked = true;
             }
@@ -938,8 +1190,106 @@ const NvFieldmultiselect = class {
                 item.removeAttribute('checked');
                 item.checked = false;
             }
+            console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
+        });
+    }
+    /**
+     * Gets visible and enabled slot items using consistent logic.
+     * @returns {Element[]} Array of visible and enabled items
+     */
+    getVisibleEnabledSlotItems() {
+        const allItems = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        return allItems.filter(item => {
+            const isHidden = item.style.display === 'none';
+            const isDisabled = item.hasAttribute('disabled');
+            return !isHidden && !isDisabled;
         });
     }
+    /**
+     * Gets visible and enabled option items by checking DOM elements.
+     * @returns {string[]} Array of visible and enabled option values
+     */
+    getVisibleEnabledOptionItems() {
+        const allItems = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        const visibleItems = allItems.filter(item => {
+            const isHidden = item.style.display === 'none';
+            const isDisabled = item.hasAttribute('disabled');
+            return !isHidden && !isDisabled;
+        });
+        return visibleItems
+            .map(item => item.getAttribute('value') || '')
+            .filter(value => value !== '');
+    }
+    /**
+     * Determines if the toggle all button should be shown in options mode.
+     * @returns {boolean} True if there are visible items and no "No results found" message
+     */
+    shouldShowToggleAllOptionsButton() {
+        if (!this.options)
+            return false; // Only for options mode
+        return this.enableSelectAll && this.hasFilterResults;
+    }
+    /**
+     * Gets the checkbox state for the select all checkbox in options mode.
+     * @returns {'checked' | 'unchecked' | 'indeterminate'} The checkbox state
+     */
+    getSelectAllCheckboxStateOptions() {
+        if (!this.options)
+            return 'unchecked';
+        // Get visible and enabled option values from DOM
+        const visibleOptionValues = this.getVisibleEnabledOptionItems();
+        if (visibleOptionValues.length === 0)
+            return 'unchecked';
+        const selectedVisibleOptions = visibleOptionValues.filter(value => this.value.includes(value));
+        if (selectedVisibleOptions.length === 0)
+            return 'unchecked';
+        if (selectedVisibleOptions.length === visibleOptionValues.length)
+            return 'checked';
+        return 'indeterminate';
+    }
+    /**
+     * Gets the checkbox state for the select all checkbox in slots mode.
+     * @returns {'checked' | 'unchecked' | 'indeterminate'} The checkbox state
+     */
+    getSelectAllCheckboxStateSlots() {
+        if (this.options)
+            return 'unchecked';
+        // Get all visible and enabled items
+        const items = this.getVisibleEnabledSlotItems();
+        if (items.length === 0)
+            return 'unchecked';
+        const selectedItems = items.filter(item => {
+            const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
+            return itemValue !== '' && this.value.includes(itemValue);
+        });
+        if (selectedItems.length === 0)
+            return 'unchecked';
+        if (selectedItems.length === items.length)
+            return 'checked';
+        return 'indeterminate';
+    }
+    /**
+     * Determines if the toggle all button should be shown in slots mode.
+     * @returns {boolean} True if there are visible items and no "No results found" message
+     */
+    shouldShowToggleAllSlotButton() {
+        if (this.options)
+            return false; // Only for slots mode
+        return this.enableSelectAll && this.hasFilterResults;
+    }
+    /**
+     * Initializes the value array from checked slotted nv-fielddropdownitemcheck elements (slots mode only).
+     */
+    initializeValueFromSlots() {
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
+        // Values from checked slot children
+        const checkedValues = items
+            .filter(item => item.hasAttribute('checked'))
+            .map(item => item.getAttribute('value') || item.getAttribute('label') || '');
+        // Combine with current this.value (set by code), ensuring uniqueness
+        this.value = Array.from(new Set([...(this.value || []), ...checkedValues]));
+        console.info('[initializeValueFromSlots] checkedValues:', checkedValues, 'combined value:', this.value);
+    }
     /**
      * Renders description and error description sections
      * @returns {any} The JSX for descriptions