@nova-design-system/nova-react 3.30.0 → 3.31.0

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-accordion-item.entry-CTbduehY.js → nv-accordion-item.entry-DWi_bEQx.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
 require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-accordion.entry-DeaPwIUP.js → nv-accordion.entry-Bgn2CRYE.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-alert.entry-B5k8RXXD.js → nv-alert.entry-tkzdxYo4.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.js');
 var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');

package/dist/cjs/{nv-avatar.entry-CJh9bGfN.js → nv-avatar.entry-C6xqQhws.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-badge_2.entry-BnPPW4rW.js → nv-badge_2.entry-poMKx9km.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
 var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');

package/dist/cjs/{nv-breadcrumb.entry-DS5GJVCJ.js → nv-breadcrumb.entry-BTBUN3X8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 require('@stencil/react-output-target/runtime');
 require('react');

package/dist/cjs/{nv-breadcrumbs.entry-CJ835Ba8.js → nv-breadcrumbs.entry-DXdb_Gzf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-button.entry-8U0o_X3d.js → nv-button.entry-IYrV4dVV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.js');
 require('@stencil/react-output-target/runtime');
 require('react');

package/dist/cjs/{nv-buttongroup.entry-D5I5d9y0.js → nv-buttongroup.entry-DpMhGqzQ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-calendar.entry-C0ggIM3A.js → nv-calendar.entry-Clp-qYdU.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.js');
 var _commonjsHelpersB85MJLTf = require('./_commonjsHelpers-B85MJLTf-CFO10eej.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-col.entry-tIk723nS.js → nv-col.entry-BgIpEdn6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 require('@stencil/react-output-target/runtime');
 require('react');

package/dist/cjs/{nv-datagrid.entry-Cal_usTi.js → nv-datagrid.entry-CmnSlQEN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var dom_utilsCuXVGECR = require('./dom.utils-CuXVGECR-8VY5SfMZ.js');
 var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-datagridcolumn.entry-BLbpwW7Q.js → nv-datagridcolumn.entry-CfaOqHSs.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-datetest.entry-NQzySOox.js → nv-datetest.entry-DL0WPAUH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var novaDatetimeCyL2J6O4 = require('./nova-datetime-CyL2J6O4-0Y9g3rfI.js');
 require('@stencil/react-output-target/runtime');
 require('react');

package/dist/cjs/{nv-datetimetest.entry-Br6j4eAR.js → nv-datetimetest.entry-DoABznI1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-dialog.entry-GTDQJaoQ.js → nv-dialog.entry-C95UrJIU.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var index_esmD3eWMME9 = require('./index.esm-D3eWMME9-CG1TVKfu.js');
 var events_utilsB6GgGra_ = require('./events.utils-B6GgGra--01N__3wY.js');
 var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');

package/dist/cjs/{nv-dialogfooter_2.entry-CHY36NHl.js → nv-dialogfooter_2.entry-Ccml86Uw.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.js');
 require('@stencil/react-output-target/runtime');
 require('react');

package/dist/cjs/{nv-drawer.entry-C-TZDi4-.js → nv-drawer.entry-cXCjYVTV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var index_esmD3eWMME9 = require('./index.esm-D3eWMME9-CG1TVKfu.js');
 var events_utilsB6GgGra_ = require('./events.utils-B6GgGra--01N__3wY.js');
 var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');

package/dist/cjs/{nv-drawerfooter_2.entry-DTY4qAnd.js → nv-drawerfooter_2.entry-Dq0IblnH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.js');
 require('@stencil/react-output-target/runtime');
 require('react');

package/dist/cjs/{nv-fieldcheckbox.entry-Qf4gdEnq.js → nv-fieldcheckbox.entry-CnP54xin.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-fielddate.entry-D1aJmKbh.js → nv-fielddate.entry-DZY75-mm.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var inputmaskCSo292ul = require('./inputmask-CSo292ul-DlvupPk6.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-fielddaterange.entry-Vc-gHwf8.js → nv-fielddaterange.entry-DkouN3iA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var inputmaskCSo292ul = require('./inputmask-CSo292ul-DlvupPk6.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-fielddropdown.entry-BVVsM71m.js → nv-fielddropdown.entry-Bc3bobvr.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var i18n_utilsCR9MpYzU = require('./i18n.utils-CR9MpYzU-ku0bScip.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');
@@ -14,6 +14,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 */
@@ -85,6 +86,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.
@@ -178,10 +186,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
@@ -197,12 +230,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() ??
@@ -259,8 +292,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))
@@ -317,6 +355,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
@@ -345,6 +409,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])'));
@@ -589,16 +668,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
     /****************************************************************************/
@@ -616,7 +689,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();
         }
     }
@@ -655,11 +730,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.entry-DTRonCZJ.js → nv-fielddropdownitem.entry-CmdskK1s.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -60,7 +60,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.entry-Cvsh_jn7.js → nv-fieldmultiselect.entry-Bc6YFUA_.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var i18n_utilsCR9MpYzU = require('./i18n.utils-CR9MpYzU-ku0bScip.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');

package/dist/cjs/{nv-fieldnumber.entry-jVFZ0wj3.js → nv-fieldnumber.entry-DwvjJfV9.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');
 require('react');

package/dist/cjs/{nv-fieldpassword.entry-CQKbWqMe.js → nv-fieldpassword.entry-CUI2Jm-V.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');
 require('react');

package/dist/cjs/{nv-fieldradio.entry-FPGOqFBo.js → nv-fieldradio.entry-CnLCvLBh.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DXwd3F_r.js');
+var index = require('./index-BRxlcrvE.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');