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

package/dist/collection/components/nv-fielddropdown/nv-fielddropdown.js

@@ -658,11 +658,11 @@ export class NvFielddropdown {
             ? 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 is() { return "nv-fielddropdown"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fielddropdown/styles/nv-fielddropdown.css

@@ -285,4 +285,7 @@ nv-fielddropdown .error-description {
   font-style: normal;
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
+}
+nv-fielddropdown .error-description[hidden] {
+  display: none;
 }

package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.docs.js

@@ -1,5 +1,58 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvFielddropdownitemDocs = {
     component: 'nv-fielddropdownitem',
-    skip: true,
+    parentGroup: 'Fields/NvFielddropdown',
+    subcomponents: ['nv-fielddropdown', 'nv-icon', 'nv-avatar', 'nv-badge'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Basic dropdown item within a fielddropdown',
+            template: (h("nv-fielddropdown", { label: "Select an option" }, h("nv-fielddropdownitem", { "data-storybook-args": true, value: "item1" }, "Item 1"), h("nv-fielddropdownitem", { value: "item2" }, "Item 2"), h("nv-fielddropdownitem", { value: "item3" }, "Item 3"))),
+        },
+        // value
+        {
+            name: nameof(x => x.value),
+            description: 'Dropdown item with a specific value',
+            template: (h("nv-fielddropdown", { label: "Select a city" }, h("nv-fielddropdownitem", { value: "paris" }, "Paris"), h("nv-fielddropdownitem", { "data-storybook-args": true, value: "london" }, "London"), h("nv-fielddropdownitem", { value: "tokyo" }, "Tokyo"))),
+        },
+        // disabled
+        {
+            name: nameof(x => x.disabled),
+            description: 'Disabled dropdown item that cannot be selected',
+            args: {
+                disabled: true,
+            },
+            template: (h("nv-fielddropdown", { label: "Select an option" }, h("nv-fielddropdownitem", { value: "item1" }, "Item 1"), h("nv-fielddropdownitem", { "data-storybook-args": true, value: "item2", disabled: true }, "Item 2 (Disabled)"), h("nv-fielddropdownitem", { value: "item3" }, "Item 3"))),
+        },
+        // detached
+        {
+            name: nameof(x => x.detached),
+            description: 'Detached dropdown item that remains visible when filtering',
+            args: {
+                detached: true,
+            },
+            template: (h("nv-fielddropdown", { label: "Search items", filterable: true }, h("nv-fielddropdownitem", { "data-storybook-args": true, value: "all", detached: true }, "All Items"), h("nv-fielddropdownitem", { value: "item1" }, "Item 1"), h("nv-fielddropdownitem", { value: "item2" }, "Item 2"), h("nv-fielddropdownitem", { value: "item3" }, "Item 3"))),
+        },
+        // WithIcon
+        {
+            name: 'WithIcon',
+            description: 'Dropdown item with leading icon',
+            template: (h("nv-fielddropdown", { label: "Select with icons" }, h("nv-fielddropdownitem", { value: "home" }, h("nv-icon", { slot: "leading-icon", name: "home" }), "Home"), h("nv-fielddropdownitem", { value: "user" }, h("nv-icon", { slot: "leading-icon", name: "user" }), "Profile"), h("nv-fielddropdownitem", { value: "settings" }, h("nv-icon", { slot: "leading-icon", name: "settings" }), "Settings"))),
+        },
+        // WithAvatar
+        {
+            name: 'WithAvatar',
+            description: 'Dropdown item with avatar',
+            template: (h("nv-fielddropdown", { label: "Select user" }, h("nv-fielddropdownitem", { value: "user1" }, h("nv-avatar", { slot: "leading-icon", initials: "JD", size: "xs" }), "John Doe"), h("nv-fielddropdownitem", { value: "user2" }, h("nv-avatar", { slot: "leading-icon", initials: "JS", size: "xs" }), "Jane Smith"))),
+        },
+        // WithBadge
+        {
+            name: 'WithBadge',
+            description: 'Dropdown item with trailing badge',
+            template: (h("nv-fielddropdown", { label: "Select status" }, h("nv-fielddropdownitem", { value: "active" }, "Active", h("nv-badge", { slot: "trailing-icon", color: "success", label: "New" })), h("nv-fielddropdownitem", { value: "pending" }, "Pending", h("nv-badge", { slot: "trailing-icon", color: "warning", label: "3" })), h("nv-fielddropdownitem", { value: "inactive" }, "Inactive"))),
+        },
+    ],
 };
 export default NvFielddropdownitemDocs;

package/dist/collection/components/nv-fielddropdownitem/nv-fielddropdownitem.js

@@ -53,7 +53,7 @@ export class NvFielddropdownitem {
     /****************************************************************************/
     //#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" }))));
     }
     static get is() { return "nv-fielddropdownitem"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.css

@@ -8,6 +8,6 @@ nv-fielddropdownitemcheck {
   padding: var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);
   border-radius: var(--list-dropdown-item-radius);
 }
-nv-fielddropdownitemcheck:hover {
+nv-fielddropdownitemcheck:hover, nv-fielddropdownitemcheck[data-state=highlighted] {
   background-color: var(--components-list-dropdown-item-background-hover);
 }

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.js

@@ -1,5 +1,46 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvFielddropdownitemcheckDocs = {
     component: 'nv-fielddropdownitemcheck',
-    skip: true,
+    parentGroup: 'Fields/NvFielddropdown',
+    subcomponents: ['nv-fielddropdown', 'nv-icon'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Checkbox dropdown item for multi-select',
+            template: (h("nv-fielddropdown", { label: "Select multiple options" }, h("nv-fielddropdownitemcheck", { "data-storybook-args": true, value: "option1" }, "Option 1"), h("nv-fielddropdownitemcheck", { value: "option2" }, "Option 2"), h("nv-fielddropdownitemcheck", { value: "option3" }, "Option 3"))),
+        },
+        // value
+        {
+            name: nameof(x => x.value),
+            description: 'Checkbox item with specific value',
+            template: (h("nv-fielddropdown", { label: "Select features" }, h("nv-fielddropdownitemcheck", { value: "feature1" }, "Feature 1"), h("nv-fielddropdownitemcheck", { "data-storybook-args": true, value: "feature2" }, "Feature 2"), h("nv-fielddropdownitemcheck", { value: "feature3" }, "Feature 3"))),
+        },
+        // disabled
+        {
+            name: nameof(x => x.disabled),
+            description: 'Disabled checkbox item',
+            args: {
+                disabled: true,
+            },
+            template: (h("nv-fielddropdown", { label: "Select options" }, h("nv-fielddropdownitemcheck", { value: "option1" }, "Option 1"), h("nv-fielddropdownitemcheck", { "data-storybook-args": true, value: "option2", disabled: true }, "Option 2 (Disabled)"), h("nv-fielddropdownitemcheck", { value: "option3" }, "Option 3"))),
+        },
+        // checked
+        {
+            name: nameof(x => x.checked),
+            description: 'Pre-checked checkbox item',
+            args: {
+                checked: true,
+            },
+            template: (h("nv-fielddropdown", { label: "Select options" }, h("nv-fielddropdownitemcheck", { "data-storybook-args": true, value: "option1", checked: true }, "Option 1 (Pre-selected)"), h("nv-fielddropdownitemcheck", { value: "option2" }, "Option 2"), h("nv-fielddropdownitemcheck", { value: "option3" }, "Option 3"))),
+        },
+        // WithIcon
+        {
+            name: 'WithIcon',
+            description: 'Checkbox item with icon',
+            template: (h("nv-fielddropdown", { label: "Select with icons" }, h("nv-fielddropdownitemcheck", { value: "email" }, h("nv-icon", { slot: "leading-icon", name: "mail" }), "Email"), h("nv-fielddropdownitemcheck", { value: "sms" }, h("nv-icon", { slot: "leading-icon", name: "message" }), "SMS"), h("nv-fielddropdownitemcheck", { value: "push" }, h("nv-icon", { slot: "leading-icon", name: "bell" }), "Push Notification"))),
+        },
+    ],
 };
 export default NvFielddropdownitemcheckDocs;

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js

@@ -52,7 +52,7 @@ export class NvFielddropdownitemcheck {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6c5bc9f6060ac711a1360dd45da58dddf7d7d563', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: 'f3efe64e5f03411f1fe7433821a46c50cd18e10e', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: 'e603490efb497f0ef62049e7b44c34d91c8989d2' }), h("slot", { key: '6774a2ab5bf182297929afbcec8c489bf620bcab', name: "main" }), h("slot", { key: '5ca19cd56a5917ed125eb20c6713e25dc512fb45', name: "label" }), h("slot", { key: '847864bfbc3302bb07088f77d9c2d200fac8b505', name: "description" }))));
+        return (h(Host, { key: '52f3eeee8d22ab9b45723403c58edc3f16905a07', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: 'b06def71aa859fca784140d5c961ffa6cd8cdccc', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: 'cc53d2732969cb2812d08f978b3d7eeb5cdaa02a' }), h("slot", { key: '67336141a3dcfdab0bdc749e1937797222eaaded', name: "main" }), h("slot", { key: '165a860ee2dbd1783d4bf391c3a07da6756d7013', name: "label" }), h("slot", { key: '27c6e04f85b608a267ef2b280326d125c22dd970', name: "description" }))));
     }
     static get is() { return "nv-fielddropdownitemcheck"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.docs.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldmultiselectDocs = {
     component: 'nv-fieldmultiselect',
+    parentGroup: 'Fields',
     subcomponents: [
         'nv-fielddropdownitemcheck',
         'nv-badge',

package/dist/collection/components/nv-fieldmultiselect/nv-fieldmultiselect.js

@@ -241,23 +241,6 @@ export class NvFieldmultiselect {
             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.
@@ -361,23 +344,6 @@ export class NvFieldmultiselect {
             }
             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.
          */
@@ -502,6 +468,17 @@ export class NvFieldmultiselect {
         };
         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
         /****************************************************************************/
@@ -516,7 +493,7 @@ export class NvFieldmultiselect {
                     : 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',
@@ -537,7 +514,7 @@ export class NvFieldmultiselect {
                     : 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',
@@ -652,6 +629,31 @@ export class NvFieldmultiselect {
             });
         }
     }
+    /**
+     * 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.
@@ -659,6 +661,8 @@ export class NvFieldmultiselect {
      * @param {KeyboardEvent} event - The keyboard event.
      */
     async handleKeyDown(event) {
+        if (this.disabled || this.readonly)
+            return;
         if (event.key === 'Escape') {
             this.open = false;
             return;
@@ -677,12 +681,22 @@ export class NvFieldmultiselect {
             }
             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 =
@@ -697,7 +711,15 @@ export class NvFieldmultiselect {
                     : (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
@@ -901,7 +923,9 @@ export class NvFieldmultiselect {
         }
     }
     /**
-     * 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)
@@ -909,50 +933,47 @@ export class NvFieldmultiselect {
         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);
     }
     /**
@@ -1034,6 +1055,8 @@ export class NvFieldmultiselect {
             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) {
@@ -1169,6 +1192,8 @@ export class NvFieldmultiselect {
         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) {
@@ -1187,7 +1212,7 @@ export class NvFieldmultiselect {
     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
@@ -1197,19 +1222,30 @@ export class NvFieldmultiselect {
                 }
             }
             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');
@@ -1228,16 +1264,9 @@ export class NvFieldmultiselect {
             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
@@ -2381,6 +2410,12 @@ export class NvFieldmultiselect {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": true,
+                "passive": true
             }, {
                 "name": "keydown",
                 "method": "handleKeyDown",

package/dist/collection/components/nv-fieldmultiselect/styles/nv-fieldmultiselect.css

@@ -77,12 +77,12 @@ nv-fieldmultiselect[error]:not([error=false]) {
   --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 {
+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 {
+nv-fieldmultiselect > label {
   display: flex;
   align-items: center;
   gap: var(--form-label-gap);
@@ -132,6 +132,13 @@ nv-fieldmultiselect nv-popover div[slot=content] {
   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;
@@ -284,6 +291,9 @@ nv-fieldmultiselect .error-description {
   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;
@@ -299,6 +309,7 @@ nv-fieldmultiselect .error-description {
   background-color: var(--components-list-dropdown-separator);
   margin: var(--list-dropdown-item-padding-y) 0;
   border: 0;
+  flex-shrink: 0;
 }
 
 .select-all-container {

package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.css

@@ -246,4 +246,7 @@ nv-fieldnumber .error-description {
   font-style: normal;
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
+}
+nv-fieldnumber .error-description[hidden] {
+  display: none;
 }

package/dist/collection/components/nv-fieldnumber/nv-fieldnumber.docs.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldnumberDocs = {
     component: 'nv-fieldnumber',
+    parentGroup: 'Fields',
     subcomponents: ['nv-button', 'nv-badge'],
     stories: [
         // Default