@nova-design-system/nova-webcomponents 3.30.0 → 3.31.1-beta.0

package/dist/cjs/nv-drawer.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var index_esm = require('./index.esm-CG1TVKfu.js');
 var events_utils = require('./events.utils-BE6R5q9C.js');
 var fade_animation = require('./fade.animation-BQSqXXOJ.js');

package/dist/cjs/nv-drawerfooter_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var constants = require('./constants-BSdCE1ZF.js');
 
 const nvDrawerfooterCss = () => `nv-drawerfooter{display:flex;padding:var(--drawer-padding-y, var(--dialog-footer-padding-top)) var(--drawer-padding-x, var(--dialog-footer-padding-x)) var(--drawer-padding-y, var(--dialog-footer-padding-bottom)) var(--drawer-padding-x, var(--dialog-footer-padding-x));justify-content:flex-end;align-items:flex-end;gap:var(--drawer-gap-y, var(--dialog-footer-gap-y));align-self:stretch}`;

package/dist/cjs/nv-fieldcheckbox.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 

package/dist/cjs/nv-fielddate.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var inputmask = require('./inputmask-DtXnpVWa.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 require('./_commonjsHelpers-CFO10eej.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var inputmask = require('./inputmask-DtXnpVWa.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 require('./_commonjsHelpers-CFO10eej.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var workerClient = require('./worker-client-ByL3TenE.js');
 var i18n_utils = require('./i18n.utils-BbKpUgYq.js');
 var v4 = require('./v4-C1vaJ4yP.js');
@@ -12,6 +12,7 @@ const NvFielddropdown = class {
         index.registerInstance(this, hostRef);
         this.valueChanged = index.createEvent(this, "valueChanged", 3);
         this.filterTextChanged = index.createEvent(this, "filterTextChanged", 3);
+        this.cleared = index.createEvent(this, "cleared", 3);
         this.openChanged = index.createEvent(this, "openChanged", 3);
         this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 7);
         /** Pre-computed search index for efficient filtering */
@@ -83,6 +84,13 @@ const NvFielddropdown = class {
          * Enables or disables the filtering feature for the dropdown items.
          */
         this.filterable = false;
+        /**
+         * Shows the inline clear (×) button when a value is selected (or when
+         * filterable and the user has typed). The programmatic `clear()` method
+         * works regardless of this prop — leave it off when you want to manage
+         * clearing the selection from outside the component.
+         */
+        this.clearable = false;
         /**
          * When an item is selected by the user, the dropdown will continue to stay
          * open.
@@ -176,10 +184,35 @@ const NvFielddropdown = class {
             if (!this.el?.contains(event.target))
                 this.open = false;
         };
+        /**
+         * Handles clicks on the inline clear button. When a value is already
+         * selected and the user has typed in a filter, clearing should dismiss
+         * the filter and revert the input to the selected label rather than
+         * wipe the selection. Always emits `cleared` so subscribers see one
+         * consistent signal regardless of which path ran.
+         * @param {MouseEvent} [event] - The click event from the clear button.
+         */
+        this.handleClearButtonClick = (event) => {
+            // Keyboard-activated clicks have detail === 0; mouse clicks are >= 1.
+            // We only restore focus on keyboard activation so we don't steal focus
+            // from mouse users (and we don't reopen a closed popover via the focus
+            // listener on mouse clicks).
+            const isKeyboard = event?.detail === 0;
+            if (this.value && this.filterable && this.filterText?.length > 0) {
+                this.clearFilter();
+                this.cleared.emit();
+                if (isKeyboard)
+                    this.focusField();
+                return;
+            }
+            this.clear();
+            if (isKeyboard)
+                this.focusField();
+        };
         this.handleFilterInput = () => {
             this.open = true;
-            this.filterText = this.inputElement.value;
-            this.filterTextChanged.emit(this.inputElement.value);
+            this.filterText = this.inputElement?.value ?? '';
+            this.filterTextChanged.emit(this.filterText);
             clearTimeout(this.debounceTimer);
             // Use longer debounce for fuzzy mode (Fuse.js needs more time)
             // For fuzzy mode, use FUZZY_DEBOUNCE_DELAY (300ms), otherwise use this.debounceDelay
@@ -195,12 +228,12 @@ const NvFielddropdown = class {
                 return '';
             if (this.filterText?.length)
                 return this.filterText;
-            if (this.options?.length > 1) {
-                const matchingItem = this.options.find(option => option.value === this.value);
+            if ((this.options?.length ?? 0) > 1) {
+                const matchingItem = this.options?.find(option => option.value === this.value);
                 return matchingItem?.label ?? matchingItem?.value ?? this.value;
             }
             const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitem'));
-            const matchingItem = items.find(item => item.value === this.value);
+            const matchingItem = this.findItemMatchingValue(items);
             const selectedLabel = matchingItem
                 ? matchingItem.label ??
                     matchingItem.textContent?.trim() ??
@@ -257,8 +290,13 @@ const NvFielddropdown = class {
             event.relatedTarget.tagName.includes('NV-FIELDDROPDOWNITEM')) {
             return;
         }
-        if (event.target != this.toggleElement)
-            this.open = true;
+        // Toggle and clear are inline controls inside the trigger that should
+        // not open the popover when focused (keyboard or otherwise).
+        if (event.target === this.toggleElement)
+            return;
+        if (event.target === this.clearElement)
+            return;
+        this.open = true;
     }
     handleFocusOut(event) {
         if (!(event.relatedTarget instanceof Node))
@@ -315,6 +353,32 @@ const NvFielddropdown = class {
             this.setFilterInputToSelectedValue();
         }, 0);
     }
+    /**
+     * Clears the current selection. Resets the value to an empty string,
+     * removes the selected state from items, clears the filter text (when
+     * filterable) and emits `valueChanged` (and `filterTextChanged` when the
+     * filter was reset). Emits `cleared` when anything was actually reset.
+     */
+    async clear() {
+        const hadValue = Boolean(this.value);
+        const hadFilterText = this.filterable && this.filterText?.length > 0;
+        if (hadValue) {
+            this.value = '';
+            this.valueChanged.emit('');
+        }
+        if (hadFilterText) {
+            this.filterText = '';
+            this.filterTextChanged.emit('');
+            this.filterItems();
+        }
+        if (hadValue || hadFilterText) {
+            this.cleared.emit();
+        }
+        // Wait for wrapper lifecycle to finish before resetting input display.
+        setTimeout(() => {
+            this.setFilterInputToSelectedValue();
+        }, 0);
+    }
     /**
      * Toggles the dropdown popover open state
      * @param {boolean} open - The open state to set, if null, toggles the state
@@ -343,6 +407,21 @@ const NvFielddropdown = class {
             return (this.inputElement.value = '');
         this.inputElement.value = this.getSelectedLabel();
     }
+    /**
+     * Finds the item that matches the current value. Falls back to matching by
+     * label when no item matches by value, so that consumers who pass a value
+     * matching only the label (e.g. `<nv-fielddropdownitem label="Item 2">`
+     * with `value="Item 2"`) still get the correct selected item.
+     * @param {HTMLNvFielddropdownitemElement[]} items - The dropdown items to search.
+     * @returns {HTMLNvFielddropdownitemElement | undefined} The matching item, or undefined if no match is found.
+     */
+    findItemMatchingValue(items) {
+        if (!this.value)
+            return undefined;
+        const value = this.value;
+        return (items.find(item => item.value === value) ??
+            items.find(item => item.label === value));
+    }
     // Will exclude detached items and data-empty
     getFilterableItems() {
         return Array.from(this.el.querySelectorAll('nv-fielddropdownitem:not([data-empty]):not([detached])'));
@@ -587,16 +666,10 @@ const NvFielddropdown = class {
     }
     async updateSelectedItem() {
         const items = this.getAllItems();
-        if (this.value) {
-            items.forEach(item => {
-                if (item.value === this.value) {
-                    item.selected = true;
-                }
-                else {
-                    item.selected = false;
-                }
-            });
-        }
+        const matchingItem = this.findItemMatchingValue(items);
+        items.forEach(item => {
+            item.selected = Boolean(this.value) && item === matchingItem;
+        });
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -614,7 +687,9 @@ const NvFielddropdown = class {
     componentDidRender() {
         // Make sure to show the value when the field is disabled or readonly
         // as we switch to an input instead of a p in that case
-        if (!this.filterable && (this.disabled || this.readonly)) {
+        if (!this.filterable &&
+            (this.disabled || this.readonly) &&
+            this.inputElement) {
             this.inputElement.value = this.getSelectedLabel();
         }
     }
@@ -653,11 +728,14 @@ const NvFielddropdown = class {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (index.h(index.Host, { key: 'a0a129aeee7140680b618e20e0ba2557835d3aee', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'e84b1cb668cc910b8fe4f81a4939eb6109829983', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, index.h("slot", { key: 'b1e59b97c865e87559f7bad61019a05184d27623', name: "label" }, this.label))), index.h("nv-popover", { key: '31e5b57856dfb48b5c6f212f0f29a95b05eefe06', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("div", { key: 'b828839bf1b2c957afee3aaa1a9c9faf34c15bce', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'a0d2cc5c6806ed2694310b2e20fa5d4d218194e1', name: "before-input" }), index.h("div", { key: '812cbc43ba84748db9cbc49eb0f0c22995ac0285', class: "input-container" }, index.h("slot", { key: '0e79dfcd550c09a9cf45ed9cdae36e15a72be285', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.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 (index.h(index.Host, { key: '83aecee12e5f0fea2ddc293f1631dc4e55ab3764', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'adfef46ef0163fb3c902df5df70b5c591a6dd7e1', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, index.h("slot", { key: 'ed6bd8cc6fcace8604f934ba197c31589bf5e296', name: "label" }, this.label))), index.h("nv-popover", { key: '9dfa5dd021c2d0803a35b79fd58dd70422dbe6f0', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("div", { key: '62024e3fae662f316a932cce628e58e6917fc624', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '61fe57f847075dc6e1447cc377e7e8f828700b43', name: "before-input" }), index.h("div", { key: '8139ffe5b0b7d37781c2b435ed1b9c94f2eea9de', class: "input-container" }, index.h("slot", { key: 'ab2515724a53a1b9e4081bd1944130cd435a0a92', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.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 })) : (index.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 && (index.h("nv-iconbutton", { key: 'd84df53cffb3eb54d8263f8b83ea325e1806d036', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: 'aa47af71684d1143d49acea9f652a75af721ea42', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'b3b4f616bfa69a0ec169d38bc4a5997a25bb752a', "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 })), index.h("slot", { key: '1186748c136a4738a40bedbd9d4e55ce34d43600', name: "after-input" })), index.h("div", { key: 'af5fd84039c5a319b0301e41d42eca46ec599a6d', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (index.h("ul", { key: 'b28fae6234d2b5a6d5a350fc91070f2a59c19939' }, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), index.h("slot", { key: '1036fac674f016670b916c09f7892d1600c3998a', name: "content" }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'a047c7a480de216be1c83f84e7f52220cc174cc6', class: "description" }, index.h("slot", { key: '01a54b2fd7f5086c7c7247d5b11628e3012d63dd', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '4cff548c666ea082738bd7f66878c564126dc60c', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '553170d5254e4841d91eee119756a5466663c5c0', name: "error-description" }, this.errorDescription)))));
+            }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (index.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.clearable &&
+            !this.disabled &&
+            !this.readonly &&
+            (this.value || (this.filterable && this.filterText)) && (index.h("nv-iconbutton", { key: 'b467a3949af859fe4e9d19f810a19a8e1d1834c9', ref: el => (this.clearElement = el), "data-scope": "clear", name: "x", size: "md", emphasis: "lower", class: "clear-button", onMouseDown: (e) => e.preventDefault(), onClick: this.handleClearButtonClick, "aria-label": this.value ? 'Clear selection' : 'Clear input', title: this.value ? 'Clear selection' : 'Clear input' })), this.error && (index.h("nv-icon", { key: '2c05d617da93adddd4994c3063b0e6fe7be017c7', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '372a295a58b391a61d240d5133b427c3ddf1edba', "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 })), index.h("slot", { key: '95db16c591f0bf7dec95550260b9d6bcd7e084a9', name: "after-input" })), index.h("div", { key: '46372589dee8ff8509570bd1a3cc33763cf17869', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, (this.options?.length ?? 0) > 0 && (index.h("ul", { key: 'dc2840ef3e798291e49ae179a978c5b3d277ffa2' }, this.options?.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), index.h("slot", { key: '750ef13e5911fe9bfc9a277b24150a1d3e631d4d', name: "content" }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '34e1fbd85f790f0ea38502d10daadabf2c26c493', class: "description" }, index.h("slot", { key: '248779124cefa199c5ee3b664c1a26ddfab0d849', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'dff99dce8c08ca76a620cf199147a72a0624b3be', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'fcdbc2a466f9d13593a5fb6d7a2ba719b0df19dd', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.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)}`;
 
@@ -57,7 +57,7 @@ const NvFielddropdownitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '9931decf5664d77d8c164859bc4046ca313e13a9', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '21c6457187f8d5d561e2783b212d5230e85a8f8c' }, index.h("div", { key: '751615833fcb1d200abd526d9c80822d7bda30b4', class: "text-wrapper" }, index.h("span", { key: '67a7bcb31cdf32eee18e419e85f28b53b74a4f82', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '09b1b6f5366f89ca8d03fe51738c627b899bb454', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (index.h(index.Host, { key: '9931decf5664d77d8c164859bc4046ca313e13a9', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, this.selected && (index.h("nv-icon", { key: 'aba64f319fb37bc8f471ebd65d00d0f17158fe41', name: "check", "aria-hidden": "true", "data-scope": "selected" })), index.h("slot", { key: 'ffafa2e39d704caa576d59bba459503be10f4ffc' }, index.h("div", { key: '065293dca56bfaec8f89910f88b92a52907fcf28', class: "text-wrapper" }, index.h("span", { key: '2f85b57db26203bc19b32047707f9281a6d906a0', "data-scope": "text" }, this.label)))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var workerClient = require('./worker-client-ByL3TenE.js');
 var i18n_utils = require('./i18n.utils-BbKpUgYq.js');
 var v4 = require('./v4-C1vaJ4yP.js');

package/dist/cjs/nv-fieldnumber.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 
 const nvFieldnumberCss = () => `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-fieldnumber{--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-fieldnumber[fluid]:not([fluid=false]){max-width:unset}nv-fieldnumber[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-fieldnumber[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-fieldnumber[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-fieldnumber[required]:not([required=false]) label::after,nv-fieldnumber[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldnumber 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-fieldnumber .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldnumber .input-wrapper .input-container:focus-within,nv-fieldnumber .input-wrapper .input-container:focus-within:hover,nv-fieldnumber .input-wrapper .input-container:focus,nv-fieldnumber .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-fieldnumber .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container{container-type:inline-size;container-name:field-number-input-container;overflow:hidden;position:relative}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container input:focus{outline:none}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container input{}nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldnumber .input-wrapper .input-container input{width:100%;appearance:textfield}nv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button,nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button{appearance:none;margin:0}nv-fieldnumber .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-field-gap)}nv-fieldnumber .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldnumber .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container .stepper{display:flex;border-left:var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly)}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton{border:0px;border-radius:0px}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton{border-radius:0px}@container field-number-input-container (width < 150px){nv-fieldnumber .input-wrapper .input-container .stepper-spacer{display:none}nv-fieldnumber .input-wrapper .input-container .stepper{display:none}}nv-fieldnumber .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-fieldnumber .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-fieldnumber .error-description[hidden]{display:none}`;

package/dist/cjs/nv-fieldpassword.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 
 const nvFieldpasswordCss = () => `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-fieldpassword{--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-fieldpassword[fluid]:not([fluid=false]){max-width:unset}nv-fieldpassword[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-fieldpassword[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-fieldpassword[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-fieldpassword[required]:not([required=false]) label::after,nv-fieldpassword[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container{position:relative}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container input{}nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .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-fieldpassword .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-fieldpassword .error-description[hidden]{display:none}`;

package/dist/cjs/nv-fieldradio.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 

package/dist/cjs/nv-fieldselect.cjs.entry.js

@@ -1,14 +1,15 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 
-const nvFieldselectCss = () => `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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after,nv-fieldselect[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box;background-color:var(--color-level-05-background);border-radius:var(--form-field-radius)}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input{}nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);padding-right:36px;box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select hr{border-color:var(--components-list-select-hr, var(--color-content-low-border))}nv-fieldselect .select-wrapper .select-container select{appearance:base-select}nv-fieldselect .select-wrapper .select-container select::picker(select){appearance:base-select;background-color:var(--components-popover-background);border-color:var(--components-popover-border);border-width:1px;border-style:solid;border-radius:var(--popover-radius);padding:var(--popover-padding-y) var(--popover-padding-x);margin-top:var(--spacing-2);box-shadow:var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity)}nv-fieldselect .select-wrapper .select-container select::picker-icon{display:none}nv-fieldselect .select-wrapper .select-container select option{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-fieldselect .select-wrapper .select-container select option:not(:first-of-type){margin-top:var(--list-select-gap-y)}nv-fieldselect .select-wrapper .select-container select option:hover,nv-fieldselect .select-wrapper .select-container select option:focus,nv-fieldselect .select-wrapper .select-container select option:focus-within{background-color:var(--components-list-select-option-background-hover);color:var(--components-list-select-option-content-hover)}nv-fieldselect .select-wrapper .select-container select option:checked{background-color:var(--components-list-select-option-background-active);color:var(--components-list-select-option-content-active)}nv-fieldselect .select-wrapper .select-container select option: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-fieldselect .select-wrapper .select-container select option::checkmark{display:none}nv-fieldselect .select-wrapper .select-container select option:disabled,nv-fieldselect .select-wrapper .select-container select option:checked:disabled{color:var(--components-list-select-option-content-disabled);background-color:var(--components-list-select-option-background-default)}nv-fieldselect .select-wrapper .select-container select optgroup{appearance:base-select;display:flex;flex-wrap:wrap;align-items:center;width:100%;color:var(--components-list-select-optgroup-content);gap:var(--list-select-optgroup-gap);padding-top:var(--list-select-optgroup-padding-y, 8px);padding-bottom:var(--list-select-optgroup-padding-y, 8px)}nv-fieldselect .select-wrapper .select-container select optgroup:hover{color:var(--components-list-select-optgroup-content)}nv-fieldselect .select-wrapper .select-container select optgroup option{padding-left:var(--list-select-optgroup-option-padding-left)}nv-fieldselect .select-wrapper .select-container select optgroup option:first-child{margin-top:var(--list-select-optgroup-option-margin-top, 4px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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-fieldselect .error-description[hidden]{display:none}`;
+const nvFieldselectCss = () => `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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after,nv-fieldselect[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box;background-color:var(--color-level-05-background);border-radius:var(--form-field-radius)}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton.clear-button{pointer-events:auto}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input{}nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);padding-right:36px;box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select hr{border-color:var(--components-list-select-hr, var(--color-content-low-border))}nv-fieldselect .select-wrapper .select-container select{appearance:base-select}nv-fieldselect .select-wrapper .select-container select::picker(select){appearance:base-select;background-color:var(--components-popover-background);border-color:var(--components-popover-border);border-width:1px;border-style:solid;border-radius:var(--popover-radius);padding:var(--popover-padding-y) var(--popover-padding-x);margin-top:var(--spacing-2);box-shadow:var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity)}nv-fieldselect .select-wrapper .select-container select::picker-icon{display:none}nv-fieldselect .select-wrapper .select-container select option{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-fieldselect .select-wrapper .select-container select option:not(:first-of-type){margin-top:var(--list-select-gap-y)}nv-fieldselect .select-wrapper .select-container select option:hover,nv-fieldselect .select-wrapper .select-container select option:focus,nv-fieldselect .select-wrapper .select-container select option:focus-within{background-color:var(--components-list-select-option-background-hover);color:var(--components-list-select-option-content-hover)}nv-fieldselect .select-wrapper .select-container select option:checked{background-color:var(--components-list-select-option-background-active);color:var(--components-list-select-option-content-active)}nv-fieldselect .select-wrapper .select-container select option: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-fieldselect .select-wrapper .select-container select option::checkmark{display:none}nv-fieldselect .select-wrapper .select-container select option:disabled,nv-fieldselect .select-wrapper .select-container select option:checked:disabled{color:var(--components-list-select-option-content-disabled);background-color:var(--components-list-select-option-background-default)}nv-fieldselect .select-wrapper .select-container select optgroup{appearance:base-select;display:flex;flex-wrap:wrap;align-items:center;width:100%;color:var(--components-list-select-optgroup-content);gap:var(--list-select-optgroup-gap);padding-top:var(--list-select-optgroup-padding-y, 8px);padding-bottom:var(--list-select-optgroup-padding-y, 8px)}nv-fieldselect .select-wrapper .select-container select optgroup:hover{color:var(--components-list-select-optgroup-content)}nv-fieldselect .select-wrapper .select-container select optgroup option{padding-left:var(--list-select-optgroup-option-padding-left)}nv-fieldselect .select-wrapper .select-container select optgroup option:first-child{margin-top:var(--list-select-optgroup-option-margin-top, 4px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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-fieldselect .error-description[hidden]{display:none}`;
 
 const NvFieldselect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        this.cleared = index.createEvent(this, "cleared", 3);
         //#endregion DEPRECATED
         /****************************************************************************/
         //#region STATES
@@ -66,6 +67,12 @@ const NvFieldselect = class {
          * When enabled, allows the select to handle multiple selections.
          */
         this.multiple = false;
+        /**
+         * Shows the inline clear (×) button when a value is selected. The
+         * programmatic `clear()` method works regardless of this prop — leave
+         * it off when you want to manage clearing from outside the component.
+         */
+        this.clearable = false;
         /**
          * The value of the select field.
          * - If `multiple` is `false`, it's a single string.
@@ -119,6 +126,21 @@ const NvFieldselect = class {
                 this.selectElement.focus();
             }
         };
+        /**
+         * Handles a click on the inline clear button. Stops the click from
+         * bubbling up to the select container (which would refocus the select)
+         * and clears the value. On keyboard activation (Enter/Space) it also
+         * moves focus back to the native `<select>` so keyboard users don't
+         * lose their place when the button disappears.
+         * @param {MouseEvent} event - The click event from the clear button.
+         */
+        this.handleClearButtonClick = (event) => {
+            event.stopPropagation();
+            this.clear();
+            // detail === 0 means keyboard-activated; >= 1 means a real mouse click.
+            if (event.detail === 0)
+                this.selectElement?.focus();
+        };
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -250,6 +272,19 @@ const NvFieldselect = class {
             this.selectElement = this.el.querySelector('select');
         }
     }
+    /**
+     * Clears the current selection. Resets the value to an empty string and
+     * emits `valueChanged` and `cleared` when the value actually changed.
+     * The `@Watch('value')` watcher takes care of syncing the underlying
+     * native `<select>` options and the form value.
+     */
+    async clear() {
+        if (!this.value)
+            return;
+        this.value = '';
+        this.valueChanged.emit('');
+        this.cleared.emit();
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -370,15 +405,18 @@ const NvFieldselect = class {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (index.h(index.Host, { key: 'ee72e67a671b7061d3af5f76796d09c0372b38fa' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '8bec44fa26d9360b585e0a5bccd4fdd7ed8cfc92', htmlFor: this.inputId }, index.h("slot", { key: '35b2a393d88b37141a6dd7ea90f860fcee1d840e', name: "label" }, this.label))), index.h("div", { key: '151b1e03cd50911b024ae692fa7eb25e5c7c8938', class: "select-wrapper" }, index.h("slot", { key: 'b82c37856a7a616a9addb1bd5a4d79aeeb2587b4', name: "before-input" }), index.h("div", { key: 'cf5713c682e4ea9e08bb0ee6db5ab369cdaaf713', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '4fc79bed93ab1dfdf31a18805b5e72c5b35cd641', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '316cc1f0bf08ead5f7f5d8d1306cbc02b91fde54', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (index.h(index.Host, { key: '94e1f6453200ac25c9a8bb1161da1332fe964a88' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'cddbd8dcb267c3931f2a97d2409732e203e60d42', htmlFor: this.inputId }, index.h("slot", { key: 'bfbae02481c4bdac23e2c7c69044c171c2e4c627', name: "label" }, this.label))), index.h("div", { key: '1070a34841596517c2803aa529b875c86e1cace7', class: "select-wrapper" }, index.h("slot", { key: '8a36b232f72dcf98aaa0fd1d3fe0ee4a77102254', name: "before-input" }), index.h("div", { key: '716bd6d6f489b1b23d4f97ddf8b404c9b06cbb6d', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '282b5103ab923c70d66fb5cbf68bb741f2f9c436', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: 'a612673aec7e0fb2a63c0d52a68bc2f74332db44', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), index.h("select", { key: '1e1676c50ee4915bd6750677b501f6683d34fa25', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                : `${this.inputId}-description` })), index.h("select", { key: '4fe11669e745846bcc14e3c657160287912351f2', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
             }), multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: 'df1132a8bb20d35d94daec1b7e32f5769c9e6ec8', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '39825cc8efd80f89b29644525d4e9fe9ae9e5edb', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'c9123ff11d354283e53470991a4d8755cc89b552', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: '7f6dacc97b04100c4ddbbc503d16f31282365232', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '61b4d062cc94f90ebe02113950f02940a2765d36', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '0685de6f40b839ea062c6088c60a10d72490fab0', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '1d15fa435a00efef9a75295149c44dfc407fcc63', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '623d7af55f6b523e834159769a2f783fb63052f7', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '2f2c9b6ea72ae9093ccd5735813bc5c3415a39cc', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: 'e04e676525522d40410815ea8da80f9c18730e3f', class: "select-icons" }, this.clearable &&
+            !this.disabled &&
+            !this.internalReadonly &&
+            this.value && (index.h("nv-iconbutton", { key: '176fdf45a3c04290895be367027c38581292c2c0', "data-scope": "clear", name: "x", size: "md", emphasis: "lower", class: "clear-button", onMouseDown: (e) => e.preventDefault(), onClick: this.handleClearButtonClick, "aria-label": "Clear selection", title: "Clear selection" })), this.error && (index.h("nv-icon", { key: '7eef5e80d744b7bfbcfb3fc857837c58e6ce4e54', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '68085ced60e2c9aa70aa26db8fa96f0a5407d3c4', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'c1e85cc79e3438f20ae891fb439b77ba694d8db8', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '5534a2610d76d6d23e91ca3010b29f331501c923', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'eda00100479bb6325a49db62933f7d325e559491', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: 'f976d87998ef48b7e1e493f6064547efa1c212c3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '28d55210a573fe85b57752873ca14f0adc65a404', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: 'ac95ef49e88372d3b69456affbbdaad753a5e5c4', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-fieldslider.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bj9nnTVm.js');
+var index = require('./index-BvJsoRtw.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 
@@ -688,11 +688,11 @@ const NvFieldslider = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '1251891d0796093b0b199218304444cb5e530367' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'dfb2f64d6b289ad18ac9b5a8ca6e445bf591add9', htmlFor: this.startInputId }, index.h("slot", { key: '96cce5982bf52a76f92afcf027277955fe30ce2e', name: "label" }, this.label))), index.h("div", { key: '84d9150d80d5a971180f04872fb2de07817e2e90', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: 'acea0634b80251ef76b91e85a447dcafa636924d', class: "track-container" }, index.h("div", { key: 'b323a5da0449af8ca8f9463bbfbceac3e9310796', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: 'b3fdbe669889f22309a6f6a717f850b117a91cc8', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (index.h(index.Host, { key: '6426519f29a4a345a2371ef6ba05c6e2f59fd01f' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '83583c4f6610032c5ba3b2b6e0d58a1ce6117f8a', htmlFor: this.startInputId }, index.h("slot", { key: '91bf1a9106d9044e8180b6115510764904d39c15', name: "label" }, this.label))), index.h("div", { key: 'f5154fb1aa800cda282c924e2ff036df6ba70969', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: '3a11f56bc52e1bb2ff0fb82e14488173dffa5d48', class: "track-container" }, index.h("div", { key: '48065424f96d4bff452bfb122217a30767563219', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: '3c03a6c0bb8e8f24d076f29c178bd71eaf9cda0e', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '53b4e7236c469b87d96a666c4711b0fd9f060be9', class: "description" }, this.success && (index.h("nv-icon", { key: '332161c24c7aa882de0d07e0e7c4264bf5dc02b0', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: 'd0ab58883e0d3d079511738835eba8a6c5caebd8', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7f2adaba3d758f14acc45e04636daca743264b53', class: "description" }, this.success && (index.h("nv-icon", { key: 'd499915841c2fb34e26af179e5fe1a592306c6ce', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: 'bdd412849474b4ffaf5473005c1dad19cc9bb2ee', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '8ead9d45a545ba2e1abad6a855e88c655bbc5254', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '09d224201d747651dcd0f0ce22d9d81a784e75eb', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: '8c8a0e621a54dcf67569ad4e6818b3a4bc0a3a19', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b24b65aed4437a953fba34820a3cd6c385c246b7', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '76c21755d1f90aa3f2f64f03b20a57249f5ea568', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: '59d05da46df9e86b62f65db1d7ed967bb640675a', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }