@nova-design-system/nova-webcomponents 3.27.0 → 3.29.0

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-BCjiE1MF.js';
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-DU3Vhh_k.js';
 import { I as Inputmask } from './inputmask-CSo292ul.js';
 import { v as v4 } from './v4-BdYh22OP.js';
 import './_commonjsHelpers-B85MJLTf.js';
 
-const nvFielddaterangeCss = () => `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-fielddaterange{--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-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[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-fielddaterange[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-fielddaterange[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--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-success)}nv-fielddaterange[required]:not([required=false]) label::after,nv-fielddaterange[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddaterange 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-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto;z-index:2}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{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}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container: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-fielddaterange .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{box-shadow:none;border-color:var(--nv-field-border-default)}nv-fielddaterange .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:calc(var(--form-field-padding-y) - 1px) 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%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::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-fielddaterange .input-wrapper .input-container input{}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input{width:100%}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .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-fielddaterange .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)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:0;width:100%}nv-fielddaterange .range-inputs:focus-within{z-index:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}`;
+const nvFielddaterangeCss = () => `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-fielddaterange{--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-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[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-fielddaterange[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-fielddaterange[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--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-success)}nv-fielddaterange[required]:not([required=false]) label::after,nv-fielddaterange[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddaterange 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-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto;z-index:2}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{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}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container: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-fielddaterange .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{box-shadow:none;border-color:var(--nv-field-border-default)}nv-fielddaterange .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:calc(var(--form-field-padding-y) - 1px) 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%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::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-fielddaterange .input-wrapper .input-container input{}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input{width:100%}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .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-fielddaterange .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)}nv-fielddaterange .error-description[hidden]{display:none}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:0;width:100%}nv-fielddaterange .range-inputs:focus-within{z-index:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}`;
 
 const NvFielddaterange = class {
     constructor(hostRef) {
@@ -556,16 +556,16 @@ const NvFielddaterange = class {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: 'ff398fcfbbe95e5665b774fe43350acbbc348fe9' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: '2b1909b93047611192bb66f574bdda3b206e2385', htmlFor: this.startInputId }, h("slot", { key: '8195acf71bec4897fca7c4617eb0de096e88b191', name: "label" }, this.label))), h("nv-popover", { key: 'ba36048cf5a34974f4f4deb66fb0d735988e5b53', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '14b6d78ac81001bd174bad38172a8a1a1f347731', slot: "trigger", class: "input-wrapper" }, h("slot", { key: 'fb016c89c6f8f99ae3c67917fc623bd5ebfd55fc', name: "before-input" }), h("div", { key: 'ba782a5e283e468467ccdb9b571046cd2f4852e9', class: "input-container" }, h("slot", { key: '2adfa150e03b07b3fc68dcf58e8033b7945161a0', name: "leading-input" }), h("div", { key: '0276764deeb85f4211ac741f3eb5fef2f9fbcb43', class: "range-inputs" }, h("input", { key: 'b752bb09fefcd173403cb11db40d0aabd25e1388', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
+        return (h(Host, { key: '659fbd943d7f088b0dde4ad6ae9eac2fd719d58d' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: '5ec3a4df845c445ce2c4b45798677c9ba1c79f04', htmlFor: this.startInputId }, h("slot", { key: 'ac22f1a6d6f49a2feb2a92a1ff9045422785ef64', name: "label" }, this.label))), h("nv-popover", { key: 'd4ac345011bce61f263df887fa9eebc210659145', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '6f13372e3bea5b40ed7bc82ffea0fa4f85f6e450', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '4403b049058b231017eea3be6a1045312d805d75', name: "before-input" }), h("div", { key: 'df2603a90a1e7740311c8a4b1a85a051ed8efff0', class: "input-container" }, h("slot", { key: '37554324ba2bb1f25446c97db50546e0a33b5af8', name: "leading-input" }), h("div", { key: '0e99431473e98409bdf883acfd7e50823e6fc3c2', class: "range-inputs" }, h("input", { key: '7077a4a95fd264466c44f4f96fd9b6236887b731', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
                 this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), h("div", { key: 'd5be46903d09c3b189dc4e7ee8ddad170c0f6286', class: "range-separator" }), h("input", { key: '11b9a3838149854e68ae7c9d96aedbaaba84a90d', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
+            }), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), h("div", { key: '8f84668eb682306ff6751044fb715dfbccc38e6b', class: "range-separator" }), h("input", { key: '1e7045f9501a04e14d4f726171abd07cbce0e004', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
                 this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (h("nv-icon", { key: '26b42abdeafd75930a5ca607d24337b6b3c10ac2', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '1af99ccf21b9f8089204e9e97c2453b2bdeffd29', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: '38b70d2b9f4ec16ff1707dc2b05ceae806646541', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '2ab6a03f44f04595763f4a6cbb8bc142578e1b3a', name: "after-input" })), h("div", { key: '1fc0213d712a8560dee995c4d26c7d9944af650b', slot: "content" }, h("nv-calendar", { key: 'd883272405391bec569516321fd2eae93dac817a', ref: el => (this.calendarElement = el), onRangeDateChange: this.handleRangeDateChange.bind(this), onValueChanged: this.handleCalendarValueChanged.bind(this), onSingleDateChange: this.handleCancelDateChange.bind(this), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'd0f9852ccd37202db9653b338cf850ba44365ddf', class: "description" }, h("slot", { key: 'cff092ce15f1f90f246de859fea30d3714fd4520', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c9dfd25d6784cca037337e7ffe28fc4ac1d33fd5', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '8123f07bf03ae219917f2e9f8146142bd8781bd4' })));
+            }), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (h("nv-icon", { key: 'a82a7ea123f900eda3eb82cb1a70796ffc0248da', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '176e92373cb84d7cd873637818eba98b51a69646', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'd7069a77fa7fdca3b8202fed9fdfe8af082fdaf6', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '1ef543db2799a3242ed0a9ef8a5058b002fb885b', name: "after-input" })), h("div", { key: 'b47f6bbc98772ba7b0aa680737bf278b716aa237', slot: "content" }, h("nv-calendar", { key: '6008dda7daff3c40f20475996f8215ae8b6c457a', ref: el => (this.calendarElement = el), onRangeDateChange: this.handleRangeDateChange.bind(this), onValueChanged: this.handleCalendarValueChanged.bind(this), onSingleDateChange: this.handleCancelDateChange.bind(this), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'bd3c9e7650cea0ae6e30418c1ed15e2e21241576', class: "description" }, h("slot", { key: 'c87eb17e1b5624c7d3b5b31644919c4a473ea135', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'e9cb169a418080a3c374f5d36fdc7c09845a52f6', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: 'ea7d3580a7007bcdc85eb096ccdbf683d7a1d906' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-BCjiE1MF.js';
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-DU3Vhh_k.js';
 import { F as FUZZY_DEBOUNCE_DELAY, f as buildIndex, k as getEffectiveFilterMode, q as shouldUseWorker, l as isWorkerSupported, S as SearchWorkerClient, h as clampMaxResults, s as search, i as clampWorkerThreshold } from './worker-client-BaF3Tuua.js';
 import { g as getTruncatedResultsText, f as formatTruncatedResults } from './i18n.utils-CR9MpYzU.js';
 import { v as v4 } from './v4-BdYh22OP.js';
 
-const nvFielddropdownCss = () => `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-fielddropdown{--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-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after,nv-fielddropdown[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown 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-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;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-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{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}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container: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-fielddropdown .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container{position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container 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:calc(var(--form-field-padding-y) - 1px) 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%}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container 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-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{}nv-fielddropdown .input-container input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container p.non-filterable-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;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-fielddropdown .input-container p.non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .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-fielddropdown .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)}`;
+const nvFielddropdownCss = () => `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-fielddropdown{--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-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after,nv-fielddropdown[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown 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-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;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-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{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}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container: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-fielddropdown .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container{position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container 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:calc(var(--form-field-padding-y) - 1px) 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%}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container 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-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{}nv-fielddropdown .input-container input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container p.non-filterable-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;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-fielddropdown .input-container p.non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .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-fielddropdown .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)}nv-fielddropdown .error-description[hidden]{display:none}`;
 
 const NvFielddropdown = class {
     constructor(hostRef) {
@@ -651,11 +651,11 @@ const NvFielddropdown = class {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: 'fc83e8834e38142ad102d17495b5978283699576', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '5a1eb965296909556869a025a6e4da609f2cbf90', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, h("slot", { key: 'd5d4f3607e07e248c4083c3ea934a3bd1d7a7467', name: "label" }, this.label))), h("nv-popover", { key: '17e42a4d729dbc735db49f398ec14e0c296ff8ee', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("div", { key: 'a665ff2d2142acf5335d52e9a304ea2995750e5f', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'bddb24c6404ea0ea7da33485f8d497d0a635f3e2', name: "before-input" }), h("div", { key: '7275a9a99c9b4476b405f3966f128ce9ce92801a', class: "input-container" }, h("slot", { key: 'ede3c4442f365377eb83524f5d70d2922cd2a38b', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: 'b41a60470da47b175fac17a8bc88b8719b56cc14', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'adf93f21febb5404b931b821595eed91b24da55b', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, h("slot", { key: 'c8b8256e6e06695a3b6778cec0a696bc0713e6dc', name: "label" }, this.label))), h("nv-popover", { key: '66895b00c801a5c1889da8bc73d9f519d3fe4b70', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("div", { key: 'e468646cb1d08f7f26a8c427040d14f843279fd0', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'd5567eb82b1e9230507963ed7ca76656f1415855', name: "before-input" }), h("div", { key: '872a8f01aeba95f52209e8dbe2bb1cff3c65c46f', class: "input-container" }, h("slot", { key: 'f8038d509899b3dbe895c9f042f39a1274d1b681', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (h("nv-iconbutton", { key: 'd1aa81c5d14601ea85cec133a94f2b071ca98358', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: 'd49e30222d63ffdcc4d952d959a98946b943685f', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: '6e157ce63f3f6faa08df5b7b9b7e6fd3ae9d0c31', "data-scope": "toggle-dropdown", ref: el => (this.toggleElement = el), name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.syncToggleDropdown.bind(this), tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '665519b43abbd562ea1c3e36355b15ffb3e6fea2', name: "after-input" })), h("div", { key: 'da97b6498e93d5f6c427bec6963db697c41c2d9a', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (h("ul", { key: '0db57a711680aad61c32993b5f3afe304ec9066f' }, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), h("slot", { key: '5c7643c6436c42efa63bab75f416b684b662812b', name: "content" }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0ade462a96a16bb0cf6fb9d49d4ead0d98a6234b', class: "description" }, h("slot", { key: 'bb2d0c3340bdc0d0b3ac77feab8bc70a73b89a00', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c04c2329d71e088b262a46441bb3bd9592d304e8', hidden: !this.error, class: "error-description" }, h("slot", { key: 'b85d769f12c4bf2a2ba5aba69c20566d17801f0a', name: "error-description" }, this.errorDescription)))));
+            }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (h("nv-iconbutton", { key: 'b5b48972a2529eee9dd2fd68871859bf289d472a', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: '2cca314634242b1e697ba2b26298b095f0742582', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'eac277cbb66ac82547d5c4c6a6aec3443f2fb593', "data-scope": "toggle-dropdown", ref: el => (this.toggleElement = el), name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.syncToggleDropdown.bind(this), tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '25f05b5425937ca89e1c8c4f2be9fbde2e39959a', name: "after-input" })), h("div", { key: '064a1701a6f4678e1443d7e028f3681e2e41dfd9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (h("ul", { key: 'a9e489d4eb5551044f43a5aacaed94457ddbcacc' }, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), h("slot", { key: '4dda850901378ea3416260e1c0adda7af9a153c7', name: "content" }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'a878da5beb9572bc8d3a318d3879517ee84c7bac', class: "description" }, h("slot", { key: '04618e824a1b5d67a4ccbe70f13d9ca818f607bd', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '007314310806e8dcc5b2b48af65bc66de4ba9f7a', hidden: !this.error, class: "error-description" }, h("slot", { key: '237a4e37e5869f8b66c631559027ec6551005ec6', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-BCjiE1MF.js';
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-DU3Vhh_k.js';
 
 const nvFielddropdownitemCss = () => `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-fielddropdownitem{display:flex;gap:var(--list-select-gap-y);flex-wrap:wrap;align-items:center;width:100%;background-color:var(--components-list-select-option-background-default);padding:var(--list-select-option-padding);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-select-font-size);line-height:var(--list-select-line-height);color:var(--components-list-select-option-content-default);border-radius:var(--list-select-option-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:not(:first-of-type){margin-top:var(--list-select-gap-y)}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-select-option-background-hover);color:var(--components-list-select-option-content-hover)}nv-fielddropdownitem:checked{background-color:var(--components-list-select-option-background-active);color:var(--components-list-select-option-content-active)}nv-fielddropdownitem:checked::after{order:1;margin-left:auto;content:"";display:inline-block;width:var(--spacing-5);height:var(--spacing-5);background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");mask-repeat:no-repeat;mask-position:center;mask-size:contain}nv-fielddropdownitem::checkmark{display:none}nv-fielddropdownitem:disabled,nv-fielddropdownitem:checked:disabled{color:var(--components-list-select-option-content-disabled);background-color:var(--components-list-select-option-background-default)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;word-break:break-word;overflow-wrap:break-word;padding-right:var(--spacing-5)}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto;position:absolute;right:var(--list-dropdown-item-padding-y)}`;
 
@@ -55,7 +55,7 @@ const NvFielddropdownitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6d50463d72a8e2dde08ba3d7bc6f3ba21021163e', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, h("slot", { key: 'b38c59fc95f124c3395ff1ab0b7dfc4ecc27823b' }, h("div", { key: 'a5ba5d4b636847e5ce6c1bab6cbbce418b70a1af', class: "text-wrapper" }, h("span", { key: 'f01a0aa5ee475a9640c7abefe321f605ea5e7cdf', "data-scope": "text" }, this.label))), this.selected && (h("nv-icon", { key: '9cd1b5532a4d2f5c2546e9432262f483bd5c8d69', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (h(Host, { key: '40733c82ff3f46a260e536b8a5cfe95a06a5ef4c', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, h("slot", { key: 'a0fcbde0a3d70e8493d9c38428ea14d36d71fb84' }, h("div", { key: 'a88818483f7fe88d5e7d562bccf9c247c8189442', class: "text-wrapper" }, h("span", { key: '80cbccdb3cf0d86c22130a399f6cf70c7bc8c32b', "data-scope": "text" }, this.label))), this.selected && (h("nv-icon", { key: 'b89ab45c47eb08b37c29f93c78036121a33ab041', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, a as createEvent, h, F as Fragment, d as Host, e as getElement } from './index-BCjiE1MF.js';
+import { r as registerInstance, a as createEvent, h, F as Fragment, d as Host, e as getElement } from './index-DU3Vhh_k.js';
 import { k as getEffectiveFilterMode, h as clampMaxResults, f as buildIndex, q as shouldUseWorker, l as isWorkerSupported, S as SearchWorkerClient, s as search, i as clampWorkerThreshold } from './worker-client-BaF3Tuua.js';
 import { g as getTruncatedResultsText, f as formatTruncatedResults } from './i18n.utils-CR9MpYzU.js';
 import { v as v4 } from './v4-BdYh22OP.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,nv-fieldmultiselect[aria-required=true] 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]{min-width:100%;width:max-content;max-width:400px;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]::-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 nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}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}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){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{position:relative;width:100%;min-height:40px}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:calc(var(--form-field-padding-y) - 1px) 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%}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,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{}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 input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}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 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,nv-fieldmultiselect[aria-required=true]>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]{min-width:100%;width:max-content;max-width:400px;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]::-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 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] ul[role=listbox]{display:flex;flex-direction:column}nv-fieldmultiselect nv-popover div[slot=content] ul[role=listbox]>*:not(nv-fielddropdownitemcheck):not(hr.multiselect-divider){order:40}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}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){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{position:relative;width:100%;min-height:40px}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:calc(var(--form-field-padding-y) - 1px) 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%}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,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{}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 input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}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)}nv-fieldmultiselect .error-description[hidden]{display:none}.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;flex-shrink: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 NvFieldmultiselect = class {
     constructor(hostRef) {
@@ -238,23 +238,6 @@ const NvFieldmultiselect = class {
             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)) {
-                    this.open = false; // Close the popover on blur
-                    if (this.filterable) {
-                        this.clearFilterText(); // Clear filter text on blur
-                    }
-                }
-            }, 150);
-        };
         /**
          * Handle click on the input container for options mode.
          * @param {MouseEvent} event - The click event.
@@ -358,23 +341,6 @@ const NvFieldmultiselect = class {
             }
             this.open = true;
         };
-        /**
-         * Handle input blur for slots mode.
-         */
-        this.handleInputBlurSlots = () => {
-            setTimeout(() => {
-                if (this.preventBlurClose) {
-                    this.preventBlurClose = false;
-                    return; // Don't close the popover
-                }
-                if (!this.el.contains(document.activeElement)) {
-                    this.open = false; // Close the popover on blur
-                    if (this.filterable) {
-                        this.clearFilterText(); // Clear filter text on blur
-                    }
-                }
-            }, 150);
-        };
         /**
          * Toggle the multiselect popover for options mode.
          */
@@ -499,6 +465,17 @@ const NvFieldmultiselect = class {
         };
         this.handleMouseDownPreventBlur = () => {
             this.preventBlurClose = true;
+            // Scope the flag to the immediate click cycle only. Synchronous focus
+            // events fired during this click (mousedown → focusout → mouseup → click)
+            // run before the next macrotask, so any focusout that *should* be
+            // suppressed will already have consumed the flag by the time this clears.
+            // Without this cleanup, a click on a non-focus-taking target (e.g. the
+            // chevron when nothing inside the host had focus, or the tabindex="-1"
+            // clear-filter button) leaves the flag set and the user's next Tab-out
+            // gets silently swallowed instead of closing the popover.
+            setTimeout(() => {
+                this.preventBlurClose = false;
+            }, 0);
         };
         //#endregion METHODS
         /****************************************************************************/
@@ -513,7 +490,7 @@ const NvFieldmultiselect = class {
                     : undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
                     undefined && {
                     'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
-                }), 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: {
+                }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, 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',
@@ -534,7 +511,7 @@ const NvFieldmultiselect = class {
                     : undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
                     undefined && {
                     'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
-                }), 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: {
+                }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, 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',
@@ -649,6 +626,31 @@ const NvFieldmultiselect = class {
             });
         }
     }
+    /**
+     * Close the dropdown when keyboard focus leaves the component.
+     * Uses focusout (which bubbles) so it covers every internal focusable
+     * (filter input, hidden input, trigger `<p>`, chevron iconbutton,
+     * clear-filter iconbutton, dropdown items, badge close button) without
+     * needing per-element onBlur wiring.
+     * @param {FocusEvent} event - The focus event.
+     */
+    handleFocusOut(event) {
+        if (this.preventBlurClose) {
+            this.preventBlurClose = false;
+            return;
+        }
+        // Focus moved to another element inside the component → keep open.
+        if (event.relatedTarget instanceof Node &&
+            this.el.contains(event.relatedTarget)) {
+            return;
+        }
+        // Focus moved outside the component (external element, body, or
+        // programmatic blur where relatedTarget is null) → close the popover.
+        this.open = false;
+        if (this.filterable) {
+            this.clearFilterText();
+        }
+    }
     /**
      * 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.
@@ -656,6 +658,8 @@ const NvFieldmultiselect = class {
      * @param {KeyboardEvent} event - The keyboard event.
      */
     async handleKeyDown(event) {
+        if (this.disabled || this.readonly)
+            return;
         if (event.key === 'Escape') {
             this.open = false;
             return;
@@ -674,12 +678,22 @@ const NvFieldmultiselect = class {
             }
             return;
         }
-        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])'));
+        // Sort by computed flex `order` so arrow keys follow the visual order
+        // (selected items first), with DOM order as tie-breaker.
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])')).sort((a, b) => {
+            const orderA = parseInt(window.getComputedStyle(a).order || '0', 10);
+            const orderB = parseInt(window.getComputedStyle(b).order || '0', 10);
+            if (orderA !== orderB)
+                return orderA - orderB;
+            return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
+                ? -1
+                : 1;
+        });
         if (items.length === 0) {
             console.warn('No visible items found to navigate');
             return;
         }
-        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        let currentIndex = items.findIndex(item => item.getAttribute('data-state') === 'highlighted');
         if (event.key === 'ArrowDown') {
             event.preventDefault();
             currentIndex =
@@ -694,7 +708,15 @@ const NvFieldmultiselect = class {
                     : (currentIndex - 1 + items.length) % items.length;
             this.updateHighlightedItem(items, currentIndex);
         }
-        else if (event.key === 'Enter' && currentIndex >= 0) {
+        else if ((event.key === 'Enter' || event.key === ' ') &&
+            currentIndex >= 0) {
+            // If the key event came from the chevron toggle button, nv-iconbutton
+            // has already handled open/close via its own keydown listener. Do not
+            // also toggle the highlighted item — that is a double-action bug.
+            const target = event.target;
+            if (target?.closest?.('[data-scope="toggle-dropdown"]')) {
+                return;
+            }
             event.preventDefault();
             const selectedItem = items[currentIndex];
             // Toggle the checked state
@@ -898,7 +920,9 @@ const NvFieldmultiselect = class {
         }
     }
     /**
-     * Reorder the content of the slot.
+     * Reorder the content of the slot using CSS flex `order` so the
+     * underlying DOM order is preserved (clearing the selection restores
+     * the original visual order automatically).
      */
     reorderSlotContent() {
         if (this.options)
@@ -906,50 +930,47 @@ const NvFieldmultiselect = class {
         const ul = this.el.querySelector('ul');
         if (!ul)
             return;
-        // Remove all existing <hr class="multiselect-divider">
-        ul.querySelectorAll('hr.multiselect-divider').forEach(divider => divider.remove());
         // Retrieve all items (not hidden)
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
-        // If you possibly have a "No results" message:
+        // If a "No results" message is currently shown, hide the divider
+        // and skip the per-item ordering work.
         const hasEmptyMessage = ul.querySelector('[data-empty]');
         if (hasEmptyMessage) {
-            // if there is a "No results found" message, do not reorder
+            this.manageDivider(ul, [], []);
             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') || ''));
-        // Reinsert CHECKED items FIRST
-        // appendChild() moves the element without recreating it
-        // this is not trigger a re-rendering of the component in the platforms
-        selectedItems.forEach(item => {
-            ul.appendChild(item); // <-- The <li> (or <nv-fielddropdownitemcheck>) is just "moved" to the end of the list
-        });
-        // Add a divider if needed
-        if (selectedItems.length > 0 && unselectedItems.length > 0) {
-            const divider = document.createElement('hr');
-            divider.className = 'multiselect-divider';
-            ul.appendChild(divider);
-        }
-        // Reinsert UNCHECKED items at the end
-        unselectedItems.forEach(item => {
-            ul.appendChild(item);
+        const selectedItems = [];
+        const unselectedItems = [];
+        items.forEach(item => {
+            const isSelected = (this.value || []).includes(item.getAttribute('value') || '');
+            item.style.order = isSelected ? '10' : '30';
+            if (isSelected)
+                selectedItems.push(item);
+            else
+                unselectedItems.push(item);
         });
+        this.manageDivider(ul, selectedItems, unselectedItems);
     }
     /**
-     * Reorder the content for options mode with async handling
+     * Reorder the content for options mode using CSS flex `order` so the
+     * underlying DOM order is preserved (clearing the selection restores
+     * the original visual order automatically).
      */
     reorderOptionsContent() {
         const ul = this.el.querySelector('ul');
         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') || ''));
-        // Reorder the elements
-        selectedItems.forEach(item => ul.appendChild(item));
-        unselectedItems.forEach(item => ul.appendChild(item));
-        // Manage the divider after the reordering
+        const selectedItems = [];
+        const unselectedItems = [];
+        items.forEach(item => {
+            const isSelected = (this.value || []).includes(item.getAttribute('value') || '');
+            item.style.order = isSelected ? '10' : '30';
+            if (isSelected)
+                selectedItems.push(item);
+            else
+                unselectedItems.push(item);
+        });
         this.manageDivider(ul, selectedItems, unselectedItems);
     }
     /**
@@ -1031,6 +1052,8 @@ const NvFieldmultiselect = class {
             emptyMessage.setAttribute('data-empty', 'true');
             emptyMessage.textContent = this.emptyResult;
             emptyMessage.classList.add('no-results-message');
+            // Keep the message after any item rows under the flex `order` projection.
+            emptyMessage.style.order = '40';
             ul.appendChild(emptyMessage);
         }
         else if (result.truncated) {
@@ -1166,6 +1189,8 @@ const NvFieldmultiselect = class {
         truncatedItem.setAttribute('data-truncated', 'true');
         truncatedItem.className = 'truncated-message no-results-message';
         truncatedItem.textContent = formatTruncatedResults(textTemplate, shown, total);
+        // Keep the message after any item rows under the flex `order` projection.
+        truncatedItem.style.order = '40';
         ul.appendChild(truncatedItem);
     }
     handleClickOutside(event) {
@@ -1184,7 +1209,7 @@ const NvFieldmultiselect = class {
     updateHighlightedItem(items, index) {
         items.forEach((item, i) => {
             if (i === index) {
-                item.classList.add('highlighted');
+                item.setAttribute('data-state', 'highlighted');
                 item.setAttribute('tabindex', '0');
                 item.scrollIntoView({ block: 'nearest' });
                 // Focus on the nv-fieldcheckbox inside
@@ -1194,19 +1219,30 @@ const NvFieldmultiselect = class {
                 }
             }
             else {
-                item.classList.remove('highlighted');
+                item.removeAttribute('data-state');
                 item.setAttribute('tabindex', '-1');
             }
         });
     }
     /**
-     * Focus on the first item in the dropdown list.
+     * Focus on the first item in the dropdown list (visual order).
      */
     focusFirstItem() {
-        const firstItem = this.el.querySelector('nv-fielddropdownitemcheck:not([style*="display: none"])');
+        // Sort by computed flex `order` so the "first" item is the first one
+        // visually (selected items are projected to the top via `order: 10`).
+        const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])')).sort((a, b) => {
+            const orderA = parseInt(window.getComputedStyle(a).order || '0', 10);
+            const orderB = parseInt(window.getComputedStyle(b).order || '0', 10);
+            if (orderA !== orderB)
+                return orderA - orderB;
+            return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
+                ? -1
+                : 1;
+        });
+        const firstItem = items[0];
         if (firstItem) {
             firstItem.setAttribute('tabindex', '0');
-            firstItem.classList.add('highlighted');
+            firstItem.setAttribute('data-state', 'highlighted');
             firstItem.scrollIntoView({ block: 'nearest' });
             // Focus on the nv-fieldcheckbox inside
             const checkbox = firstItem.querySelector('nv-fieldcheckbox');
@@ -1225,16 +1261,9 @@ const NvFieldmultiselect = class {
             divider.className = 'multiselect-divider';
             ul.appendChild(divider);
         }
-        const shouldShowDivider = selectedItems.length > 0 && unselectedItems.length > 0;
-        if (shouldShowDivider) {
-            // Place the divider after the last selected item
-            const lastSelectedItem = selectedItems[selectedItems.length - 1];
-            lastSelectedItem.after(divider);
-            divider.style.display = '';
-        }
-        else {
-            divider.style.display = 'none';
-        }
+        divider.style.order = '20';
+        const shouldShow = selectedItems.length > 0 && unselectedItems.length > 0;
+        divider.style.display = shouldShow ? '' : 'none';
     }
     /**
      * Synchronizes the checked state of all child nv-fielddropdownitemcheck components