@nova-design-system/nova-webcomponents 3.15.0 → 3.17.0

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, 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-dc2723f3.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-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-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}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 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:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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:var(--font-weight-medium-emphasis);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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);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-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}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:var(--font-weight-medium-emphasis);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:var(--font-family-default), var(--font-family-fallback), 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:var(--font-family-default), var(--font-family-fallback), 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 {
@@ -10,6 +10,8 @@ const NvFieldmultiselect = class {
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.filterTextChanged = createEvent(this, "filterTextChanged", 7);
         this.isBulkOperation = false;
+        // Add the flag to the class
+        this.preventBlurClose = false;
         /**
          * 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
@@ -115,11 +117,6 @@ const NvFieldmultiselect = class {
          * Controls the visibility of the select all section.
          */
         this.isSelectAllSectionVisible = true;
-        // Add the flag to the class
-        this.preventBlurClose = false;
-        this.handleMouseDownPreventBlur = () => {
-            this.preventBlurClose = true;
-        };
         /**
          * Handle badge close for options mode.
          */
@@ -163,17 +160,16 @@ const NvFieldmultiselect = class {
             if (this.isHandlingEscape) {
                 return;
             }
-            // Reset filter if needed, but preserve the filter text
-            if (this.filterable) {
-                this.resetFilter();
-            }
+            // Filter reset is handled in handleOpenChanged; no need to repeat
         };
         /**
          * Clear the filter text
          */
         this.clearFilterText = () => {
-            this.filterText = '';
-            this.filterTextChanged.emit('');
+            if (this.filterText !== '') {
+                this.filterText = '';
+                this.filterTextChanged.emit('');
+            }
             this.resetFilter();
             this.hasFilterResults = true;
         };
@@ -187,11 +183,9 @@ const NvFieldmultiselect = class {
                     return; // Don't close the popover
                 }
                 if (!this.el.contains(document.activeElement)) {
-                    // Close the popover without affecting the divider
-                    this.open = false;
-                    // Clear filter text when focus is lost
+                    this.open = false; // Close the popover on blur
                     if (this.filterable) {
-                        this.clearFilterText();
+                        this.clearFilterText(); // Clear filter text on blur
                     }
                 }
             }, 150);
@@ -304,17 +298,14 @@ const NvFieldmultiselect = class {
          */
         this.handleInputBlurSlots = () => {
             setTimeout(() => {
-                // Honor preventBlurClose to avoid closing when interacting inside the popover
                 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;
-                    // Clear filter text when focus is lost
+                    this.open = false; // Close the popover on blur
                     if (this.filterable) {
-                        this.clearFilterText();
+                        this.clearFilterText(); // Clear filter text on blur
                     }
                 }
             }, 150);
@@ -441,6 +432,9 @@ const NvFieldmultiselect = class {
             const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
             this.toggleSelectAllSlots(shouldSelectAll);
         };
+        this.handleMouseDownPreventBlur = () => {
+            this.preventBlurClose = true;
+        };
         //#endregion METHODS
         /****************************************************************************/
         //#region RENDER
@@ -449,7 +443,8 @@ const NvFieldmultiselect = class {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            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: {
+            var _a, _b, _c, _d;
+            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" }), (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0, label: `${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) || 0} ${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',
@@ -458,14 +453,15 @@ const NvFieldmultiselect = class {
                 }, 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.handleMouseDownPreventBlur, 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.handleMouseDownPreventBlur, onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, 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.handleMouseDownPreventBlur, 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()));
+                    : this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, 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 }, (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: {
+            var _a, _b, _c, _d;
+            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" }), (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0, label: `${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) || 0} ${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',
@@ -485,7 +481,7 @@ const NvFieldmultiselect = class {
             return;
         // 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) {
+        if (!this.value || this.value.length === 0) {
             this.value = newValue
                 .filter(option => option.checked)
                 .map(option => option.value);
@@ -493,7 +489,7 @@ const NvFieldmultiselect = class {
         else {
             // If value is set, ensure checked states in options match value
             newValue.forEach(option => {
-                option.checked = this.value.includes(option.value);
+                option.checked = (this.value || []).includes(option.value);
             });
         }
         this.reorderOptionsContent();
@@ -510,10 +506,24 @@ const NvFieldmultiselect = class {
         // Also, update options checked state if options exist
         if (this.options) {
             this.options.forEach(option => {
-                option.checked = this.value.includes(option.value);
+                option.checked = (this.value || []).includes(option.value);
             });
         }
     }
+    handleOpenChange(newOpen) {
+        // React to external changes, e.g., reorder or filter
+        if (newOpen) {
+            if (this.options) {
+                this.reorderOptionsContent();
+            }
+            else {
+                this.reorderSlotContent();
+            }
+            if (this.filterText) {
+                this.filterItems();
+            }
+        }
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LISTENERS
@@ -524,23 +534,33 @@ const NvFieldmultiselect = class {
     handleOpenChanged(event) {
         // Stop propagation to prevent the event from affecting parent components like dialogs
         event.stopPropagation();
-        // Update `open` based on the popover state
-        this.open = event.detail;
-        if (this.open) {
-            // Filter items only if there is filter text
-            if (this.filterText) {
-                this.filterItems();
+        // Only update if the event comes from our popover
+        if (event.target === this.popoverElement) {
+            // Only update if open state differs to avoid redundant actions
+            if (this.open !== event.detail) {
+                this.open = event.detail;
+                if (this.open) {
+                    // Filter items only if there is filter text
+                    if (this.filterText) {
+                        this.filterItems();
+                    }
+                }
+                else {
+                    // Clear filter text on close if filterable
+                    if (this.filterable) {
+                        this.clearFilterText();
+                    }
+                    this.handlePopoverClose();
+                }
+                // Reorder content as needed
+                if (this.options) {
+                    this.reorderOptionsContent();
+                }
+                else {
+                    this.reorderSlotContent();
+                }
             }
         }
-        else {
-            this.handlePopoverClose();
-        }
-        if (this.options) {
-            this.reorderOptionsContent();
-        }
-        else {
-            this.reorderSlotContent();
-        }
     }
     /**
      * Listen for the `itemChecked` event emitted by child items.
@@ -553,7 +573,7 @@ const NvFieldmultiselect = class {
         }
         const { value, checked } = event.detail;
         if (value !== undefined && value !== null) {
-            const newValue = [...this.value];
+            const newValue = [...(this.value || [])];
             const valueIndex = newValue.indexOf(value);
             let hasChanged = false;
             if (checked && valueIndex === -1) {
@@ -590,6 +610,86 @@ const NvFieldmultiselect = class {
             });
         }
     }
+    /**
+     * Handle keyboard events & arrow key navigation.
+     * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.
+     * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.
+     * @param {KeyboardEvent} event - The keyboard event.
+     */
+    async handleKeyDown(event) {
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                // Focus on the first item if the list is not filterable
+                if (!this.filterable) {
+                    requestAnimationFrame(() => {
+                        this.focusFirstItem();
+                    });
+                }
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])'));
+        if (items.length === 0) {
+            console.warn('No visible items found to navigate');
+            return;
+        }
+        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            currentIndex =
+                currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            currentIndex =
+                currentIndex === -1
+                    ? items.length - 1
+                    : (currentIndex - 1 + items.length) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'Enter' && currentIndex >= 0) {
+            event.preventDefault();
+            const selectedItem = items[currentIndex];
+            // Toggle the checked state
+            const isCurrentlyChecked = selectedItem.hasAttribute('checked');
+            selectedItem.checked = !isCurrentlyChecked;
+            // Trigger a click event to ensure proper event handling
+            selectedItem.dispatchEvent(new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: true,
+            }));
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation(); // Prevent the event from propagating to the popover
+            // Do the reorder and wait a bit before closing
+            const handleEscape = async () => {
+                this.isHandlingEscape = true; // Disable the hide listener
+                if (this.options) {
+                    this.reorderOptionsContent();
+                }
+                else {
+                    this.reorderSlotContent();
+                }
+                // Wait for the reorder to be applied
+                await new Promise(resolve => setTimeout(resolve, 100));
+                // Reactivate the hide listener after a short delay
+                setTimeout(() => {
+                    this.isHandlingEscape = false;
+                    this.open = false;
+                }, 150);
+                if (this.inputElement) {
+                    this.inputElement.blur();
+                }
+            };
+            await handleEscape();
+        }
+    }
     //#endregion LISTENERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -686,8 +786,8 @@ const NvFieldmultiselect = class {
             if (emptyMessage)
                 emptyMessage.remove();
             // Reorder with divider if needed
-            const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
-            const unselectedItems = items.filter(item => !this.value.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);
             }
@@ -772,8 +872,8 @@ const NvFieldmultiselect = class {
             return;
         }
         // Separate checked vs unchecked
-        const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
-        const unselectedItems = items.filter(item => !this.value.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
@@ -799,8 +899,8 @@ const NvFieldmultiselect = class {
         if (!ul)
             return;
         const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
-        const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
-        const unselectedItems = items.filter(item => !this.value.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));
@@ -836,8 +936,8 @@ const NvFieldmultiselect = class {
             }
             // Reorder with divider
             const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
-            const selectedItems = items.filter(item => this.value.includes(item.getAttribute('value') || ''));
-            const unselectedItems = items.filter(item => !this.value.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;
         }
@@ -858,8 +958,8 @@ const NvFieldmultiselect = class {
             });
             // Manage the divider with the visible items
             const visibleItems = items.filter(item => item.style.display !== 'none');
-            const visibleSelected = visibleItems.filter(item => this.value.includes(item.getAttribute('value') || ''));
-            const visibleUnselected = visibleItems.filter(item => !this.value.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 {
@@ -899,31 +999,39 @@ const NvFieldmultiselect = class {
         const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
         // Reset items if the filter text is empty
         if (!this.filterText.trim()) {
-            // Remove the empty message if it exists
             this.removeEmptyMessageOption(ul);
-            items.forEach(item => (item.style.display = ''));
-            this.reorderOptionsContent(); // Reorder after reset
-            this.hasFilterResults = true; // Reset filter means we have results
+            items.forEach(item => {
+                item.style.display = '';
+                item.removeAttribute('aria-hidden'); // Ensure accessibility
+            });
+            this.reorderOptionsContent();
+            this.hasFilterResults = true;
             return;
         }
         // Filter the items
         items.forEach(item => {
-            const label = item.getAttribute('label') || '';
-            const value = item.getAttribute('value') || '';
-            const matchesFilter = this.normalizeText(label).includes(normalizedFilter) ||
-                this.normalizeText(value).includes(normalizedFilter);
-            item.style.display = matchesFilter ? '' : 'none';
-            if (matchesFilter)
-                hasVisibleItems = true;
+            const option = this.options.find(opt => opt.value === item.getAttribute('value'));
+            if (option && !option.isDivider) {
+                const matchesFilter = this.normalizeText(option.label).includes(normalizedFilter) ||
+                    this.normalizeText(option.value).includes(normalizedFilter);
+                item.style.display = matchesFilter ? '' : 'none';
+                item.setAttribute('aria-hidden', matchesFilter ? 'false' : 'true'); // Update accessibility
+                if (matchesFilter)
+                    hasVisibleItems = true;
+            }
+            else {
+                item.style.display = 'none'; // Hide dividers during filtering
+                item.setAttribute('aria-hidden', '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') || ''));
-        const visibleUnselected = visibleItems.filter(item => !this.value.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
+        // Add or remove the empty message
         if (!hasVisibleItems) {
             this.addEmptyMessageOption(ul);
         }
@@ -972,8 +1080,8 @@ const NvFieldmultiselect = class {
         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') || ''));
-        this.manageDivider(ul, visibleSelectedItems, visibleItems.filter(item => !this.value.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');
@@ -1014,86 +1122,6 @@ const NvFieldmultiselect = class {
         }
         this.open = false;
     }
-    /**
-     * Handle keyboard events & arrow key navigation.
-     * If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.
-     * If the multiselect is open, handles arrow key navigation and closes it if the focus is outside the component.
-     * @param {KeyboardEvent} event - The keyboard event.
-     */
-    async handleKeyDown(event) {
-        if (!this.open) {
-            if (event.key === 'ArrowDown') {
-                this.open = true;
-                // Focus on the first item if the list is not filterable
-                if (!this.filterable) {
-                    requestAnimationFrame(() => {
-                        this.focusFirstItem();
-                    });
-                }
-                event.preventDefault();
-                return;
-            }
-            return;
-        }
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])'));
-        if (items.length === 0) {
-            console.warn('No visible items found to navigate');
-            return;
-        }
-        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
-        if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            currentIndex =
-                currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
-            this.updateHighlightedItem(items, currentIndex);
-        }
-        else if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            currentIndex =
-                currentIndex === -1
-                    ? items.length - 1
-                    : (currentIndex - 1 + items.length) % items.length;
-            this.updateHighlightedItem(items, currentIndex);
-        }
-        else if (event.key === 'Enter' && currentIndex >= 0) {
-            event.preventDefault();
-            const selectedItem = items[currentIndex];
-            // Toggle the checked state
-            const isCurrentlyChecked = selectedItem.hasAttribute('checked');
-            selectedItem.checked = !isCurrentlyChecked;
-            // Trigger a click event to ensure proper event handling
-            selectedItem.dispatchEvent(new MouseEvent('click', {
-                view: window,
-                bubbles: true,
-                cancelable: true,
-            }));
-        }
-        else if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation(); // Prevent the event from propagating to the popover
-            // Do the reorder and wait a bit before closing
-            const handleEscape = async () => {
-                this.isHandlingEscape = true; // Disable the hide listener
-                if (this.options) {
-                    this.reorderOptionsContent();
-                }
-                else {
-                    this.reorderSlotContent();
-                }
-                // Wait for the reorder to be applied
-                await new Promise(resolve => setTimeout(resolve, 100));
-                // Reactivate the hide listener after a short delay
-                setTimeout(() => {
-                    this.isHandlingEscape = false;
-                    this.open = false;
-                }, 150);
-                if (this.inputElement) {
-                    this.inputElement.blur();
-                }
-            };
-            await handleEscape();
-        }
-    }
     /**
      * Updates the highlighted item in the dropdown list.
      *
@@ -1183,7 +1211,7 @@ const NvFieldmultiselect = class {
         items.forEach(item => {
             // Get the effective value: use explicit value if present, otherwise use label
             const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
-            const shouldBeChecked = this.value.includes(itemValue);
+            const shouldBeChecked = (this.value || []).includes(itemValue);
             // Only update if the checked state differs to avoid triggering unnecessary events
             if (item.checked !== shouldBeChecked) {
                 // Set attribute and property, but avoid triggering itemChecked during bulk
@@ -1223,8 +1251,10 @@ const NvFieldmultiselect = class {
     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');
+            const isHidden = item.style.display === 'none' ||
+                item.getAttribute('aria-hidden') === 'true';
+            const isDisabled = item.hasAttribute('disabled') ||
+                item.getAttribute('disabled') === 'true';
             return !isHidden && !isDisabled;
         });
         return visibleItems
@@ -1251,7 +1281,7 @@ const NvFieldmultiselect = class {
         const visibleOptionValues = this.getVisibleEnabledOptionItems();
         if (visibleOptionValues.length === 0)
             return 'unchecked';
-        const selectedVisibleOptions = visibleOptionValues.filter(value => this.value.includes(value));
+        const selectedVisibleOptions = visibleOptionValues.filter(value => (this.value || []).includes(value));
         if (selectedVisibleOptions.length === 0)
             return 'unchecked';
         if (selectedVisibleOptions.length === visibleOptionValues.length)
@@ -1271,7 +1301,7 @@ const NvFieldmultiselect = class {
             return 'unchecked';
         const selectedItems = items.filter(item => {
             const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
-            return itemValue !== '' && this.value.includes(itemValue);
+            return itemValue !== '' && (this.value || []).includes(itemValue);
         });
         if (selectedItems.length === 0)
             return 'unchecked';
@@ -1322,7 +1352,8 @@ const NvFieldmultiselect = class {
     get el() { return getElement(this); }
     static get watchers() { return {
         "options": ["handleOptionsChange"],
-        "value": ["watchValueHandler"]
+        "value": ["watchValueHandler"],
+        "open": ["handleOpenChange"]
     }; }
 };
 NvFieldmultiselect.style = NvFieldmultiselectStyle0;