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

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

@@ -88,6 +88,13 @@ export class NvFielddropdown {
          * 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.
@@ -181,10 +188,35 @@ export class NvFielddropdown {
             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
@@ -200,12 +232,12 @@ export class NvFielddropdown {
                 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() ??
@@ -262,8 +294,13 @@ export class NvFielddropdown {
             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))
@@ -320,6 +357,32 @@ export class NvFielddropdown {
             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
@@ -348,6 +411,21 @@ export class NvFielddropdown {
             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])'));
@@ -592,16 +670,10 @@ export class NvFielddropdown {
     }
     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
     /****************************************************************************/
@@ -619,7 +691,9 @@ export class NvFielddropdown {
     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();
         }
     }
@@ -658,11 +732,14 @@ export class NvFielddropdown {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: 'a0a129aeee7140680b618e20e0ba2557835d3aee', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'e84b1cb668cc910b8fe4f81a4939eb6109829983', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, h("slot", { key: 'b1e59b97c865e87559f7bad61019a05184d27623', name: "label" }, this.label))), h("nv-popover", { key: '31e5b57856dfb48b5c6f212f0f29a95b05eefe06', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("div", { key: 'b828839bf1b2c957afee3aaa1a9c9faf34c15bce', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'a0d2cc5c6806ed2694310b2e20fa5d4d218194e1', name: "before-input" }), h("div", { key: '812cbc43ba84748db9cbc49eb0f0c22995ac0285', class: "input-container" }, h("slot", { key: '0e79dfcd550c09a9cf45ed9cdae36e15a72be285', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: '83aecee12e5f0fea2ddc293f1631dc4e55ab3764', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'adfef46ef0163fb3c902df5df70b5c591a6dd7e1', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, h("slot", { key: 'ed6bd8cc6fcace8604f934ba197c31589bf5e296', name: "label" }, this.label))), h("nv-popover", { key: '9dfa5dd021c2d0803a35b79fd58dd70422dbe6f0', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("div", { key: '62024e3fae662f316a932cce628e58e6917fc624', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '61fe57f847075dc6e1447cc377e7e8f828700b43', name: "before-input" }), h("div", { key: '8139ffe5b0b7d37781c2b435ed1b9c94f2eea9de', class: "input-container" }, h("slot", { key: 'ab2515724a53a1b9e4081bd1944130cd435a0a92', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (h("nv-iconbutton", { key: 'd84df53cffb3eb54d8263f8b83ea325e1806d036', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: 'aa47af71684d1143d49acea9f652a75af721ea42', name: "alert-circle", class: "validation", size: "md" })), 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 })), h("slot", { key: '1186748c136a4738a40bedbd9d4e55ce34d43600', name: "after-input" })), h("div", { key: 'af5fd84039c5a319b0301e41d42eca46ec599a6d', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (h("ul", { key: 'b28fae6234d2b5a6d5a350fc91070f2a59c19939' }, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), h("slot", { key: '1036fac674f016670b916c09f7892d1600c3998a', name: "content" }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'a047c7a480de216be1c83f84e7f52220cc174cc6', class: "description" }, h("slot", { key: '01a54b2fd7f5086c7c7247d5b11628e3012d63dd', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '4cff548c666ea082738bd7f66878c564126dc60c', hidden: !this.error, class: "error-description" }, h("slot", { key: '553170d5254e4841d91eee119756a5466663c5c0', name: "error-description" }, this.errorDescription)))));
+            }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.clearable &&
+            !this.disabled &&
+            !this.readonly &&
+            (this.value || (this.filterable && this.filterText)) && (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 && (h("nv-icon", { key: '2c05d617da93adddd4994c3063b0e6fe7be017c7', name: "alert-circle", class: "validation", size: "md" })), 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 })), h("slot", { key: '95db16c591f0bf7dec95550260b9d6bcd7e084a9', name: "after-input" })), h("div", { key: '46372589dee8ff8509570bd1a3cc33763cf17869', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, (this.options?.length ?? 0) > 0 && (h("ul", { key: 'dc2840ef3e798291e49ae179a978c5b3d277ffa2' }, this.options?.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), h("slot", { key: '750ef13e5911fe9bfc9a277b24150a1d3e631d4d', name: "content" }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '34e1fbd85f790f0ea38502d10daadabf2c26c493', class: "description" }, h("slot", { key: '248779124cefa199c5ee3b664c1a26ddfab0d849', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'dff99dce8c08ca76a620cf199147a72a0624b3be', hidden: !this.error, class: "error-description" }, h("slot", { key: 'fcdbc2a466f9d13593a5fb6d7a2ba719b0df19dd', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fielddropdown"; }
     static get formAssociated() { return true; }
@@ -1014,6 +1091,26 @@ export class NvFielddropdown {
                 "attribute": "filterable",
                 "defaultValue": "false"
             },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the inline clear (\u00D7) button when a value is selected (or when\nfilterable and the user has typed). The programmatic `clear()` method\nworks regardless of this prop \u2014 leave it off when you want to manage\nclearing the selection from outside the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
             "openOnSelect": {
                 "type": "boolean",
                 "mutable": false,
@@ -1352,6 +1449,21 @@ export class NvFielddropdown {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "cleared",
+                "name": "cleared",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the field is cleared via the inline clear button or the\nprogrammatic `clear()` method. Useful for reacting to user-initiated\nclears without subscribing to every `valueChanged` emission."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "openChanged",
                 "name": "openChanged",
@@ -1413,6 +1525,23 @@ export class NvFielddropdown {
                     "tags": []
                 }
             },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the current selection. Resets the value to an empty string,\nremoves the selected state from items, clears the filter text (when\nfilterable) and emits `valueChanged` (and `filterTextChanged` when the\nfilter was reset). Emits `cleared` when anything was actually reset.",
+                    "tags": []
+                }
+            },
             "toggleDropdown": {
                 "complexType": {
                     "signature": "(open?: boolean) => Promise<void>",

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

@@ -9,13 +9,13 @@ const NvFielddropdownitemDocs = {
         {
             name: 'Default',
             description: 'Basic dropdown item within a fielddropdown',
-            template: (h("nv-fielddropdown", { label: "Select an option" }, h("nv-fielddropdownitem", { "data-storybook-args": true, value: "item1" }, "Item 1"), h("nv-fielddropdownitem", { value: "item2" }, "Item 2"), h("nv-fielddropdownitem", { value: "item3" }, "Item 3"))),
+            template: (h("nv-fielddropdown", { label: "Select an option" }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { "data-storybook-args": true, value: "item1" }, "Item 1"), h("nv-fielddropdownitem", { value: "item2" }, "Item 2"), h("nv-fielddropdownitem", { value: "item3" }, "Item 3")))),
         },
         // value
         {
             name: nameof(x => x.value),
             description: 'Dropdown item with a specific value',
-            template: (h("nv-fielddropdown", { label: "Select a city" }, h("nv-fielddropdownitem", { value: "paris" }, "Paris"), h("nv-fielddropdownitem", { "data-storybook-args": true, value: "london" }, "London"), h("nv-fielddropdownitem", { value: "tokyo" }, "Tokyo"))),
+            template: (h("nv-fielddropdown", { label: "Select a city" }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { value: "paris" }, "Paris"), h("nv-fielddropdownitem", { "data-storybook-args": true, value: "london" }, "London"), h("nv-fielddropdownitem", { value: "tokyo" }, "Tokyo")))),
         },
         // disabled
         {
@@ -24,7 +24,7 @@ const NvFielddropdownitemDocs = {
             args: {
                 disabled: true,
             },
-            template: (h("nv-fielddropdown", { label: "Select an option" }, h("nv-fielddropdownitem", { value: "item1" }, "Item 1"), h("nv-fielddropdownitem", { "data-storybook-args": true, value: "item2", disabled: true }, "Item 2 (Disabled)"), h("nv-fielddropdownitem", { value: "item3" }, "Item 3"))),
+            template: (h("nv-fielddropdown", { label: "Select an option" }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { value: "item1" }, "Item 1"), h("nv-fielddropdownitem", { "data-storybook-args": true, value: "item2", disabled: true }, "Item 2 (Disabled)"), h("nv-fielddropdownitem", { value: "item3" }, "Item 3")))),
         },
         // detached
         {
@@ -33,25 +33,25 @@ const NvFielddropdownitemDocs = {
             args: {
                 detached: true,
             },
-            template: (h("nv-fielddropdown", { label: "Search items", filterable: true }, h("nv-fielddropdownitem", { "data-storybook-args": true, value: "all", detached: true }, "All Items"), h("nv-fielddropdownitem", { value: "item1" }, "Item 1"), h("nv-fielddropdownitem", { value: "item2" }, "Item 2"), h("nv-fielddropdownitem", { value: "item3" }, "Item 3"))),
+            template: (h("nv-fielddropdown", { label: "Search items", filterable: true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { "data-storybook-args": true, value: "all", detached: true }, "All Items"), h("nv-fielddropdownitem", { value: "item1" }, "Item 1"), h("nv-fielddropdownitem", { value: "item2" }, "Item 2"), h("nv-fielddropdownitem", { value: "item3" }, "Item 3")))),
         },
         // WithIcon
         {
             name: 'WithIcon',
             description: 'Dropdown item with leading icon',
-            template: (h("nv-fielddropdown", { label: "Select with icons" }, h("nv-fielddropdownitem", { value: "home" }, h("nv-icon", { slot: "leading-icon", name: "home" }), "Home"), h("nv-fielddropdownitem", { value: "user" }, h("nv-icon", { slot: "leading-icon", name: "user" }), "Profile"), h("nv-fielddropdownitem", { value: "settings" }, h("nv-icon", { slot: "leading-icon", name: "settings" }), "Settings"))),
+            template: (h("nv-fielddropdown", { label: "Select with icons" }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { value: "home" }, h("nv-icon", { slot: "leading-icon", name: "home" }), "Home"), h("nv-fielddropdownitem", { value: "user" }, h("nv-icon", { slot: "leading-icon", name: "user" }), "Profile"), h("nv-fielddropdownitem", { value: "settings" }, h("nv-icon", { slot: "leading-icon", name: "settings" }), "Settings")))),
         },
         // WithAvatar
         {
             name: 'WithAvatar',
             description: 'Dropdown item with avatar',
-            template: (h("nv-fielddropdown", { label: "Select user" }, h("nv-fielddropdownitem", { value: "user1" }, h("nv-avatar", { slot: "leading-icon", initials: "JD", size: "xs" }), "John Doe"), h("nv-fielddropdownitem", { value: "user2" }, h("nv-avatar", { slot: "leading-icon", initials: "JS", size: "xs" }), "Jane Smith"))),
+            template: (h("nv-fielddropdown", { label: "Select user" }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { value: "user1" }, h("nv-avatar", { slot: "leading-icon", initials: "JD", size: "xs" }), "John Doe"), h("nv-fielddropdownitem", { value: "user2" }, h("nv-avatar", { slot: "leading-icon", initials: "JS", size: "xs" }), "Jane Smith")))),
         },
         // WithBadge
         {
             name: 'WithBadge',
             description: 'Dropdown item with trailing badge',
-            template: (h("nv-fielddropdown", { label: "Select status" }, h("nv-fielddropdownitem", { value: "active" }, "Active", h("nv-badge", { slot: "trailing-icon", color: "success", label: "New" })), h("nv-fielddropdownitem", { value: "pending" }, "Pending", h("nv-badge", { slot: "trailing-icon", color: "warning", label: "3" })), h("nv-fielddropdownitem", { value: "inactive" }, "Inactive"))),
+            template: (h("nv-fielddropdown", { label: "Select status" }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { value: "active" }, "Active", h("nv-badge", { slot: "trailing-icon", color: "success", label: "New" })), h("nv-fielddropdownitem", { value: "pending" }, "Pending", h("nv-badge", { slot: "trailing-icon", color: "warning", label: "3" })), h("nv-fielddropdownitem", { value: "inactive" }, "Inactive")))),
         },
     ],
 };

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

@@ -53,7 +53,7 @@ export class NvFielddropdownitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '9931decf5664d77d8c164859bc4046ca313e13a9', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, h("slot", { key: '21c6457187f8d5d561e2783b212d5230e85a8f8c' }, h("div", { key: '751615833fcb1d200abd526d9c80822d7bda30b4', class: "text-wrapper" }, h("span", { key: '67a7bcb31cdf32eee18e419e85f28b53b74a4f82', "data-scope": "text" }, this.label))), this.selected && (h("nv-icon", { key: '09b1b6f5366f89ca8d03fe51738c627b899bb454', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (h(Host, { key: '9931decf5664d77d8c164859bc4046ca313e13a9', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, this.selected && (h("nv-icon", { key: 'aba64f319fb37bc8f471ebd65d00d0f17158fe41', name: "check", "aria-hidden": "true", "data-scope": "selected" })), h("slot", { key: 'ffafa2e39d704caa576d59bba459503be10f4ffc' }, h("div", { key: '065293dca56bfaec8f89910f88b92a52907fcf28', class: "text-wrapper" }, h("span", { key: '2f85b57db26203bc19b32047707f9281a6d906a0', "data-scope": "text" }, this.label)))));
     }
     static get is() { return "nv-fielddropdownitem"; }
     static get originalStyleUrls() {

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

@@ -197,6 +197,17 @@ const NvFieldselectDocs = {
             },
             template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"))),
         },
+        // clearable
+        {
+            name: nameof(x => x.clearable),
+            description: 'When set, an inline clear (×) button appears whenever a value is selected so users can wipe the selection in one click. The programmatic `clear()` method works regardless of this prop.',
+            args: {
+                label: 'Select with clear button',
+                value: '2',
+                clearable: true,
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"))),
+        },
         // Placeholder
         {
             name: 'Placeholder',

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

@@ -68,6 +68,12 @@ export class NvFieldselect {
          * 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.
@@ -121,6 +127,21 @@ export class NvFieldselect {
                 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
     /****************************************************************************/
@@ -252,6 +273,19 @@ export class NvFieldselect {
             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
@@ -372,15 +406,18 @@ export class NvFieldselect {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: 'ee72e67a671b7061d3af5f76796d09c0372b38fa' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8bec44fa26d9360b585e0a5bccd4fdd7ed8cfc92', htmlFor: this.inputId }, h("slot", { key: '35b2a393d88b37141a6dd7ea90f860fcee1d840e', name: "label" }, this.label))), h("div", { key: '151b1e03cd50911b024ae692fa7eb25e5c7c8938', class: "select-wrapper" }, h("slot", { key: 'b82c37856a7a616a9addb1bd5a4d79aeeb2587b4', name: "before-input" }), h("div", { key: 'cf5713c682e4ea9e08bb0ee6db5ab369cdaaf713', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '4fc79bed93ab1dfdf31a18805b5e72c5b35cd641', name: "leading-input" }), this.internalReadonly && (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 (h(Host, { key: '94e1f6453200ac25c9a8bb1161da1332fe964a88' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'cddbd8dcb267c3931f2a97d2409732e203e60d42', htmlFor: this.inputId }, h("slot", { key: 'bfbae02481c4bdac23e2c7c69044c171c2e4c627', name: "label" }, this.label))), h("div", { key: '1070a34841596517c2803aa529b875c86e1cace7', class: "select-wrapper" }, h("slot", { key: '8a36b232f72dcf98aaa0fd1d3fe0ee4a77102254', name: "before-input" }), h("div", { key: '716bd6d6f489b1b23d4f97ddf8b404c9b06cbb6d', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '282b5103ab923c70d66fb5cbf68bb741f2f9c436', name: "leading-input" }), this.internalReadonly && (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` })), 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` })), 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 => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: 'df1132a8bb20d35d94daec1b7e32f5769c9e6ec8', class: "select-icons" }, this.error && (h("nv-icon", { key: '39825cc8efd80f89b29644525d4e9fe9ae9e5edb', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'c9123ff11d354283e53470991a4d8755cc89b552', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: '7f6dacc97b04100c4ddbbc503d16f31282365232', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '61b4d062cc94f90ebe02113950f02940a2765d36', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0685de6f40b839ea062c6088c60a10d72490fab0', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '1d15fa435a00efef9a75295149c44dfc407fcc63', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '623d7af55f6b523e834159769a2f783fb63052f7', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: '2f2c9b6ea72ae9093ccd5735813bc5c3415a39cc', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: 'e04e676525522d40410815ea8da80f9c18730e3f', class: "select-icons" }, this.clearable &&
+            !this.disabled &&
+            !this.internalReadonly &&
+            this.value && (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 && (h("nv-icon", { key: '7eef5e80d744b7bfbcfb3fc857837c58e6ce4e54', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '68085ced60e2c9aa70aa26db8fa96f0a5407d3c4', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: 'c1e85cc79e3438f20ae891fb439b77ba694d8db8', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '5534a2610d76d6d23e91ca3010b29f331501c923', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'eda00100479bb6325a49db62933f7d325e559491', class: "description", id: `${this.inputId}-description` }, h("slot", { key: 'f976d87998ef48b7e1e493f6064547efa1c212c3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '28d55210a573fe85b57752873ca14f0adc65a404', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: 'ac95ef49e88372d3b69456affbbdaad753a5e5c4', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldselect"; }
     static get formAssociated() { return true; }
@@ -713,6 +750,26 @@ export class NvFieldselect {
                 "attribute": "multiple",
                 "defaultValue": "false"
             },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the inline clear (\u00D7) button when a value is selected. The\nprogrammatic `clear()` method works regardless of this prop \u2014 leave\nit off when you want to manage clearing from outside the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -820,8 +877,44 @@ export class NvFieldselect {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "cleared",
+                "name": "cleared",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the field is cleared via the inline clear button or the\nprogrammatic `clear()` method. Useful for reacting to user-initiated\nclears without subscribing to every `valueChanged` emission."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
+    static get methods() {
+        return {
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the current selection. Resets the value to an empty string and\nemits `valueChanged` and `cleared` when the value actually changed.\nThe `@Watch('value')` watcher takes care of syncing the underlying\nnative `<select>` options and the form value.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

@@ -164,6 +164,9 @@ nv-fieldselect .select-wrapper .select-container > .select-icons > nv-iconbutton
   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;

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

@@ -464,11 +464,11 @@ export class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '1251891d0796093b0b199218304444cb5e530367' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'dfb2f64d6b289ad18ac9b5a8ca6e445bf591add9', htmlFor: this.startInputId }, h("slot", { key: '96cce5982bf52a76f92afcf027277955fe30ce2e', name: "label" }, this.label))), h("div", { key: '84d9150d80d5a971180f04872fb2de07817e2e90', class: "slider-container" }, this.range ? (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, h("div", { key: 'acea0634b80251ef76b91e85a447dcafa636924d', class: "track-container" }, h("div", { key: 'b323a5da0449af8ca8f9463bbfbceac3e9310796', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (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 })) : (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 }))), h(TickMarks, { key: 'b3fdbe669889f22309a6f6a717f850b117a91cc8', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (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 })) : (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 (h(Host, { key: '6426519f29a4a345a2371ef6ba05c6e2f59fd01f' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '83583c4f6610032c5ba3b2b6e0d58a1ce6117f8a', htmlFor: this.startInputId }, h("slot", { key: '91bf1a9106d9044e8180b6115510764904d39c15', name: "label" }, this.label))), h("div", { key: 'f5154fb1aa800cda282c924e2ff036df6ba70969', class: "slider-container" }, this.range ? (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, h("div", { key: '3a11f56bc52e1bb2ff0fb82e14488173dffa5d48', class: "track-container" }, h("div", { key: '48065424f96d4bff452bfb122217a30767563219', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (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 })) : (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 }))), h(TickMarks, { key: '3c03a6c0bb8e8f24d076f29c178bd71eaf9cda0e', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (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 })) : (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"]')) && (h("div", { key: '53b4e7236c469b87d96a666c4711b0fd9f060be9', class: "description" }, this.success && (h("nv-icon", { key: '332161c24c7aa882de0d07e0e7c4264bf5dc02b0', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'd0ab58883e0d3d079511738835eba8a6c5caebd8', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '7f2adaba3d758f14acc45e04636daca743264b53', class: "description" }, this.success && (h("nv-icon", { key: 'd499915841c2fb34e26af179e5fe1a592306c6ce', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'bdd412849474b4ffaf5473005c1dad19cc9bb2ee', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '8ead9d45a545ba2e1abad6a855e88c655bbc5254', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '09d224201d747651dcd0f0ce22d9d81a784e75eb', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: '8c8a0e621a54dcf67569ad4e6818b3a4bc0a3a19', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b24b65aed4437a953fba34820a3cd6c385c246b7', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '76c21755d1f90aa3f2f64f03b20a57249f5ea568', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: '59d05da46df9e86b62f65db1d7ed967bb640675a', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldslider"; }
     static get formAssociated() { return true; }

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

@@ -148,11 +148,11 @@ export class NvFieldtext {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '63089724e21e6c1e216a11a2638f30fee689c82e' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'c6cd68f868bd971708c5e95a5fef80de9dc6512d', htmlFor: this.inputId }, h("slot", { key: '5cf94a89c4229b78a79778ff7aade534ff72e507', name: "label" }, this.label))), h("div", { key: '28c17fd690a3a2bb0e55585d946677d8a3681a0e', class: "input-wrapper" }, h("slot", { key: 'd870c9740c1d9ba4386d963892de1e66778e1bfa', name: "before-input" }), h("div", { key: '09b3bff856699402e949ba15015c21229fafb029', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '86fdcb7cad564aa79deb5007fc443b2ed5c2bcdf', name: "leading-input" }), h("input", { key: '6b11e70de402487f3bd16c3b4229313d242c905e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: '90ac165e82d023f829f92a29c96752034c23c9f2' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'f530f667afb8d7ca92b08091ed56334344a143f2', htmlFor: this.inputId }, h("slot", { key: 'fc47f6054630cabc3ad1990b015aa092f4aa4340', name: "label" }, this.label))), h("div", { key: '1e391ffe7dcf66df1ca71b0bdac6b2f6e1db0bbd', class: "input-wrapper" }, h("slot", { key: '10b6c0ba26cfa5746f49b5306fa50e9621abef2c', name: "before-input" }), h("div", { key: 'b4b09153ca8604d1b3e0196468fa76cc2a8f9241', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '0eeca77278eafbc0387e70e4aa2393f094ac011c', name: "leading-input" }), h("input", { key: '6fe1319ef9d8b6f6adad33c6d7aa3fda31bdcbe3', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: 'a0dc3bc46517a3457c0d3d8681a4078d23b2c2ea', name: "trailing-input" }), this.error && (h("nv-icon", { key: '240fc71f78572d94a5e4c5645f2531c58dd9762f', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '027784ee5c9d4bc37bfab78b991afd6c462bce37', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '4fc38f97f3b24b008589e5ba77a6d99c1dfb903d', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '9a784d007b8b94cf426d1b9e6090e37890859dce', class: "description" }, h("slot", { key: '1269822c641095aab99334f969d57a2850568a50', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'e5b3bb57e05350d65af0a333936cd8a0e91c42c2', hidden: !this.error, class: "error-description" }, h("slot", { key: '70a6d5cbe96d13deb808b3bbed64bb4e935636fa', name: "error-description" }, this.errorDescription)))));
+            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: '8371a6e3dda9c4d61a99246e675826c44b102f85', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'a36ff6b50c314255cb0ff141d199da1da14c0d4e', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'b51a8059483bbc78d383b7cf71b5a90bfd2633a4', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '6b7eb32b47c9b74e6a567a359617668e7256efcb', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ce97f38d7d31b18df36a92d75cd4dd7dd44063ab', class: "description" }, h("slot", { key: '92cc67f9b9c277e91316236c977e1bc9bd63a0c7', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '44711fb351ac1da5da1a0f0630a1d7596957664d', hidden: !this.error, class: "error-description" }, h("slot", { key: '4645cc36a7383587f6baa8db0bb2b664f252768c', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }

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

@@ -215,11 +215,11 @@ export class NvFieldtextarea {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '8d31a9e4c294a58a02040dddb427c94caecf4d2e' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '4352374d8078448ce5f877d20b526a6725219f76', htmlFor: this.inputId }, h("slot", { key: '1f5dca95213c848f105fe8d4aec5e7a363cfd468', name: "label" }, this.label))), h("div", { key: '831c87ed454b2b7a6dfc84daf903c6bc3e7581f4', class: "textarea-wrapper" }, h("div", { key: '1a3dd73ca1a4f650f02309211154e3fcee02824c', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '97454b0c1845a4ed8f1e2f99285f363affff7c7c', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: '1cddc37522161a4316ae8f82d3daf285ffb785b5' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '0c351922af13d881f90b17cea5d482fd45a34e65', htmlFor: this.inputId }, h("slot", { key: '665bee53de0fd1a1f076ecfcba06be68919881e0', name: "label" }, this.label))), h("div", { key: '22fc452a7657ea9b13a867d57b4242268dde2bca', class: "textarea-wrapper" }, h("div", { key: '333aace09346fae421a7a6654b1f6024fa0f87f7', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '69172853551f5cbb2fc739a13fa5299142b191c1', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
             }), maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'd70c40f382d8d8a369e1ce584e4c050e6f6704b4', class: "description" }, h("slot", { key: '2287c2a52e18557f104ff6b2ceab876c41f7d666', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '3bc7bdb991381398ff622c10929848d4f6527533', hidden: !this.error, class: "error-description" }, h("slot", { key: '061f5fba67f18750f50090a78f53a5229e384343', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '91fc165e6275f96547eea666d643f9bd5184d06f', class: "description" }, h("slot", { key: '996a87505c112d9cb5c1a6d7877e6bc88ab14556', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '3d105e76819ca671aa6c23722344ba9acfe90f38', hidden: !this.error, class: "error-description" }, h("slot", { key: '7d721e77b392dbb0bdcf6892f4237f0d8d944c64', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }