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

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: '40733c82ff3f46a260e536b8a5cfe95a06a5ef4c', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, h("slot", { key: 'a0fcbde0a3d70e8493d9c38428ea14d36d71fb84' }, h("div", { key: 'a88818483f7fe88d5e7d562bccf9c247c8189442', class: "text-wrapper" }, h("span", { key: '80cbccdb3cf0d86c22130a399f6cf70c7bc8c32b', "data-scope": "text" }, this.label))), this.selected && (h("nv-icon", { key: 'b89ab45c47eb08b37c29f93c78036121a33ab041', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        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-fielddropdownitemcheck/nv-fielddropdownitemcheck.js

@@ -52,7 +52,7 @@ export class NvFielddropdownitemcheck {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '52f3eeee8d22ab9b45723403c58edc3f16905a07', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: 'b06def71aa859fca784140d5c961ffa6cd8cdccc', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: 'cc53d2732969cb2812d08f978b3d7eeb5cdaa02a' }), h("slot", { key: '67336141a3dcfdab0bdc749e1937797222eaaded', name: "main" }), h("slot", { key: '165a860ee2dbd1783d4bf391c3a07da6756d7013', name: "label" }), h("slot", { key: '27c6e04f85b608a267ef2b280326d125c22dd970', name: "description" }))));
+        return (h(Host, { key: '1b9fc39245d08ca942588b04db9b4f079c459386', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: 'cea008ab80777d31bef8a1877c27c62cec13d84d', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: 'b34dc2b2882ec6f9488e815d99981fe3b34fb52e' }), h("slot", { key: '27490556f5bd70a84b452da828cab5cf6fd9e3e1', name: "main" }), h("slot", { key: '9677f8b7ad71c247771e139fc5ad3c5536cba4d7', name: "label" }), h("slot", { key: '500f11369105c426b3f566b2ea40f2e858fde1cf', name: "description" }))));
     }
     static get is() { return "nv-fielddropdownitemcheck"; }
     static get originalStyleUrls() {

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

@@ -169,11 +169,11 @@ export class NvFieldnumber {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: 'a26895be78d7080e86d761ce0cb3b918f352f1d9' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '2b3f13fa1bb3564b1e384bcf080fa666e480147a', htmlFor: this.inputId }, h("slot", { key: '03d7432458720d231948341a552102c865fe07ff', name: "label" }, this.label))), h("div", { key: '1a01b65d78732da4ef177cf86c4f13ecfde31f1e', class: "input-wrapper" }, h("slot", { key: 'bad1d59a59eecc2f4c45d16818ac521916d71731', name: "before-input" }), h("div", { key: '295e8c0f1953673fedb9a48784f507823f45e7af', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '54a81573b069471adbcda4e1bbaff97fc1fe1eeb', name: "leading-input" }), h("input", { key: '067f32480f74f78a33192a0761e46a7e04bc886b', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: 'bd60dd6875bab03a11f68c8cdeb40503dd11387b' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '9b11d71766cb20870e42e3d86509c30ec0bbc1df', htmlFor: this.inputId }, h("slot", { key: 'b1b84003346a9d9240a9a2072629701545eb8a4e', name: "label" }, this.label))), h("div", { key: 'de3100bb6e5d0befca657857b5011929621c0856', class: "input-wrapper" }, h("slot", { key: 'ae056ee9445d741e449ad926b998614e45268dd1', name: "before-input" }), h("div", { key: 'ec029f917a8472d207776b279e2a9ae2ed3c87d2', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '3156846b24658fb8b033345038ba8a19e5ed39cf', name: "leading-input" }), h("input", { key: '9978de0b82a67650629ccedc7f400d7f3e17810f', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), h("slot", { key: '6e652469a6ef16dd590349db418397626a64e9ba', name: "trailing-input" }), this.error && (h("nv-icon", { key: '2a4eae5e0fd7a26d21315e0d76e09bac7bf22bed', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '7d33539993e294ab5cbc31e60903daa664743ee3', name: "circle-check", class: "validation", size: "md" })), h("div", { key: '33a87b9c4446d718d34ba04faaf3ab0cffaa5941', class: "stepper" }, h("nv-iconbutton", { key: '6830b021b13acc955d0e333ae65bfec4efb8616d', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h("nv-iconbutton", { key: 'c83226f3dbdbf009c9a7748abea950a30b975a77', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h("slot", { key: '1ad95195471abf0962b958cf32088552f4b51205', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b6d229a54b3c88d53b787047d5c94ebfa197d2ab', class: "description" }, h("slot", { key: 'd33c1f6c4015594e0096e70828934b859da40883', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '80e7c2709f0d83d427829f6e92b376dff51dbe87', hidden: !this.error, class: "error-description" }, h("slot", { key: '5fb07dba33795dfb968ad5b5c3d3ae8726c0a754', name: "error-description" }, this.errorDescription)))));
+            }), max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), h("slot", { key: '6a65f9360ac4aae869f47a386f964d7121ee62b7', name: "trailing-input" }), this.error && (h("nv-icon", { key: '3f6d5f2ac11907170c57fffa8e080adaa9f2445d', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'f47db690daa520fe1611a72ef52bd4e8824843e0', name: "circle-check", class: "validation", size: "md" })), h("div", { key: '97d545f25f81e0089fadd33c53caf38aa8dbda85', class: "stepper" }, h("nv-iconbutton", { key: 'fa6e78061e8f90564aaed2416ee27996cbddf794', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h("nv-iconbutton", { key: 'efca8a29e9c5af8136ab557744e9642b60717915', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h("slot", { key: 'b99033fd0ecfbca1c791e1f0ad867fab41fc2716', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'fd843a1bb551f1d706de5045658356582667048d', class: "description" }, h("slot", { key: 'e9e1699a36a6485063eb4d90f920b1b48a03c280', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '7216797fc4a37dee59086111e9160401f5567c09', hidden: !this.error, class: "error-description" }, h("slot", { key: '93cee823eec935644372d062db6cd009a2f16357', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldnumber"; }
     static get formAssociated() { return true; }

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

@@ -146,11 +146,11 @@ export class NvFieldpassword {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '30f853d7d12cd12f4093c3a185e497eb5374fecd' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a0a4557d38448ea9101f255b8080eb298107906e', htmlFor: this.inputId }, h("slot", { key: '76eccd0d2ef97d4a714f9d72f736e7b8a3b1ac9d', name: "label" }, this.label))), h("div", { key: 'd1042d63c628c26614aabe08155848f265dd67d1', class: "input-wrapper" }, h("slot", { key: '1412d40db63a8a1bcea9a941ca0c263d3227cbbc', name: "before-input" }), h("div", { key: '683b678a05a524258ee6924148c2bea9be68690a', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '34f2878c425e6544ab7862cb1e3e892da399c23f', name: "leading-input" }), h("input", { key: '153fa6a7aac31180e6355dcf7a0b3e2fbaa75ce0', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: 'e24affee3586427a9d7b2dbf2205dc4ac62b7491' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3ce9065dc2d72992d5c6e3e856df4c1447717ed2', htmlFor: this.inputId }, h("slot", { key: 'ed16a44bfdcf67f371d0a1f083bc0d6e6009350b', name: "label" }, this.label))), h("div", { key: 'b43e17d340383e0b70bcb4fb5fa061d479baf46a', class: "input-wrapper" }, h("slot", { key: '2f101c6bf63c88fc4a6ad8aee5622097c133245b', name: "before-input" }), h("div", { key: '37fe8f5efd8f4374b9a237f4f5d1ebe9af9f6e05', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '4ca0f2ce27bded082e2fe49598ef6310db1ac0b3', name: "leading-input" }), h("input", { key: '302e86558f7843f44486b47987d37df6ac7f50ac', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (h("nv-icon", { key: '3b024daa690eb7ff8d34da6000d37ce6ae182112', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: 'c8877e4d7d2c106161bfd1b27e3e3dc664cec313', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), h("slot", { key: 'c3b428593383be23101c2dead68421f620e25d38', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '56a5ebc137e6864570626e0ce75aca0fff6314d3', class: "description" }, h("slot", { key: 'eb8c5141c3a79359ca606defea0c0b7dbc0f5bd6', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '4aaf597ca070227517d231b7e673e0db280ccab1', hidden: !this.error, class: "error-description" }, h("slot", { key: '6815df2fc9b2ec36cfe1f88cebaeaf88e11ec882', name: "error-description" }, this.errorDescription)))));
+            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (h("nv-icon", { key: 'c8874ce153ceddb132f9be42178bd3ff150005d2', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: '90b7e1f592e67ea60194b581931fa842af695ef4', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), h("slot", { key: '71add973e9ce73cc172d074492a9dbb2c20caaf9', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c2d8551e86c028619f2c7c810597353df24cf83a', class: "description" }, h("slot", { key: '8ebe471324eba4eb9734ccd5a3aa600cc44512d9', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '71d0c4737a51c030ba8ca859d1fd0b26d5a48772', hidden: !this.error, class: "error-description" }, h("slot", { key: '70e23fc8738958e2f2518079e0289a5a839903cd', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldpassword"; }
     static get formAssociated() { return true; }

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

@@ -83,9 +83,9 @@ export class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '66de1f9bfcf3981e3cfc94ac1bc1c7fa1940676d', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: 'ee32e5617e50888d9064d7d4d00fbdaf55b97e89', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '16f867329f8c9a735c9728a466fd49ff1b9b8e8a', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '50bbb783254086da1f6c4ff3ce6ae432567d5585', htmlFor: this.inputId }, h("slot", { key: 'd6801fd892c2b82c39eb8b2b906ad0d148edd63f', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '6810da8129a5e70a6069a5212b6755017efe9856', class: "description" }, h("slot", { key: '70539fb3789af1183fe92fbd9fdb18520633ef97', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '9c8059dd1f5335c99a28a84eb5db7ed0726933bd', hidden: !this.error, class: "error-description" }, h("slot", { key: 'ec4c1d7a36cb892c2a97593a6e3341f69791a721', name: "error-description" }, this.errorDescription))))));
+        return (h(Host, { key: '53e418bfab22c9019f8efae9e474e6e729532a73', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '85ab7c010dfa893e9e92bebd39b845a604ca0069', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '851587d22af2d0739e5531f361cbefe3e282b914', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '475cad34dea78bd00bf822ccafbfb18ddba4264a', htmlFor: this.inputId }, h("slot", { key: 'd6c84f56f1913d97e71ce79fd112362f4880acd0', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '8e1f4d0e9cbd00630cadde99923f2952d4dd492c', class: "description" }, h("slot", { key: 'dea3d8661dc83a237a8d290e02b365ea47491b51', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'f67d73864db0c32013605343ac22f451b37047e9', hidden: !this.error, class: "error-description" }, h("slot", { key: 'ebd467b48c874db8b3649ec940d950f0d2218417', name: "error-description" }, this.errorDescription))))));
     }
     static get is() { return "nv-fieldradio"; }
     static get formAssociated() { return true; }

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: 'b137c4e0d0db3cda5f0c4ab42315b939f311b163' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'c9809608e4e5ac5618b9790a007939d7769f4c55', htmlFor: this.inputId }, h("slot", { key: '2a0ba344b4f3ad3de25c3d3826d3750f84b82262', name: "label" }, this.label))), h("div", { key: 'ce10e4affb9941f030b832303bd6a7ac6c298f39', class: "select-wrapper" }, h("slot", { key: 'fe3261e1bc772d87487e0332ac645e15f2615ec7', name: "before-input" }), h("div", { key: '9c8b7cdb5c213339e77892356e1d7cf911f9e9d6', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '4e9dc10fed7e6cb137d6ceb9fdeca5f4148f0547', name: "leading-input" }), this.internalReadonly && (h("input", { key: '1575949664305c6f5503833505416e7c6091c519', 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: 'c049ed0b2f977d210b9a742553c772f75f4333c0', 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: '8e0b029b8374189dc97e3835a3790428744b7567', class: "select-icons" }, this.error && (h("nv-icon", { key: '0114760160ce710a20273942cdd2f9fbd1871b8e', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '2deff4438b6617fb8d7de59bbb8cf237981941bb', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: '070d69fc2812ace583d61041536b9148adffde6d', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '4a3bff3a810e4b1248b3b7036eba72bc51fd668b', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'cba88e7ce48085753e17b0278fc63f384493029a', class: "description", id: `${this.inputId}-description` }, h("slot", { key: 'a0ab0527bd1f016ed471bb362309d9d54be80209', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '8d1ad1f4ef096e4183ed2f230e2fbf7d5fa6e963', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: '75a77e48a392229b84a41cb014b6eb00d361f914', 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: '99dc83ee04a8531714fc706204a8f0f7d041335d' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '4f2438a448fdf2b488bcd277bf40ff6645c6c526', htmlFor: this.startInputId }, h("slot", { key: 'd6a272526f313de63d39301a7e7b6fd0dd45bc98', name: "label" }, this.label))), h("div", { key: 'f95047b008d87f60eee6cac74447ae96bdb8a2e7', 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: '087808de2ce793d7c2317cfecd1cd0382c4f58c7', class: "track-container" }, h("div", { key: 'ca08ad86d4b66e93fd4f1482c7a6ebbeafbff700', 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: '2bf097761208511839e3df0d37d0af9b21090e36', 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: '35d6a7f7d9331430504b264dd51c71c4c71e4c71', class: "description" }, this.success && (h("nv-icon", { key: '60fe2a36eff25142617f79f54c719e1d7a001fcf', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'd494185a548c60b39e96accc41739cb77c5f40dc', 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: 'a555a0e343e9f22b7a717afdbf3b7d7d6b965fcb', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: 'a9221bda376b32b8031ff6da8677d04846e84451', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: '7133562b2734136cff58428d88a2ce899245487d', 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: '06b6e9b9451710d472b0bcccf2c359fe39a8aa9c' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'c09e307496887adea2c2e85abb47a2acecf6513e', htmlFor: this.inputId }, h("slot", { key: '992d9092cff24a1f66a727077822d83ba3d66c46', name: "label" }, this.label))), h("div", { key: '3cec57446afc770386e32fc668ad052ed30d4b66', class: "input-wrapper" }, h("slot", { key: '7c1c2e7b6d95a9fff42de4de987226489bd2c42a', name: "before-input" }), h("div", { key: '046de359ca38ac02eaa0f57d68b9cabc8670b0a2', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '2fe103101958bf04f03a33a7a273c1d5166d8d3f', name: "leading-input" }), h("input", { key: '3c9b977101115541230cdbc03f9206ba6dc61e64', 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: '13580eba3b8c7820532bd2d6542450605d289ea4', name: "trailing-input" }), this.error && (h("nv-icon", { key: '9d054f584c4ab3b15af94dde18378d3e1d657118', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'd733d068fb6515fc6df5d140cf539fad9e2d1f0c', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '357d5e8b2f74a289660acca34c65884de3fb82ad', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ee9f1eedf393f177cc67b797dca60e4c7805708b', class: "description" }, h("slot", { key: '3a8f2551be74f0886fb0ed65242c60e47fb8070e', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '96f465b7a489f1b9f34b71c3f23b4d78c2f0a77d', hidden: !this.error, class: "error-description" }, h("slot", { key: 'dcdbbcd9f41cd1d947a789c71c33cd9b8b7ed4e4', 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: 'e5dd85ced6fd9c2349937818b1bd3020918ec5a6' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '6f74a85203873163ff01ff1f9711c432a6e3cb7d', htmlFor: this.inputId }, h("slot", { key: 'b921ef64985f5a72aa4b6cb3828af99fd07e3982', name: "label" }, this.label))), h("div", { key: '422b0b20edb0f60bd3fc4050c885eabb71f0d4dc', class: "textarea-wrapper" }, h("div", { key: '8c22c47b74a97467ed399da53337b1c2904af395', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '63dbbf09f0abbed5ec62d024b45a783adc3e4069', 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: '75b575de27e1ad876c2036f379e7254e20259c23', class: "description" }, h("slot", { key: 'b54458f20c187207d5c69e4f74c3708970c1b6ff', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b34156ab4b08871d3474316b0dd75393de070ef7', hidden: !this.error, class: "error-description" }, h("slot", { key: '630487e5097436909753f6ddad8d8b0edca94199', 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; }

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

@@ -874,9 +874,9 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: '59c076ed360d59fe366374d22d05f7c30fdd4efd', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '7cae0b1839180516de2ba8339503f4e5b19178b1', htmlFor: this.inputId }, h("slot", { key: '029688233c5a436191f767921f3c1e127e7786af', name: "label" }, this.label))), h("nv-popover", { key: '98c5ff80b83ac3cba41d57f4fc1c1d14dcc587d6', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: 'd313a5cde67d348b0f657f9cc6aedb8013ab606d', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'ada8a25275a2549048055528db4d24a258079147', name: "before-input" }), h("div", { key: 'c397cf2d2d73ffc0f481808a536b016d4bac891d', class: "input-container" }, h("slot", { key: 'e42c36e64a027a87db5f2b641daa063d8b81dac6', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '81d8f917c49209dfe4fb7b1322855cff67e0f417', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '075775e8912d1027f0c404523bff3f18dd521dbf', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'ae6c334e9900ff4e0d95276911d93ba5b235c513', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '293dadc5492be6a9b45d1f91d1b46dff34e76167', name: "after-input" })), h("div", { key: '35f18e81eebc1c58900a15d3f1054e91205173b4', class: "time-dropdown", slot: "content" }, h("div", { key: 'aacd26f7556d59f483c471648199d81dda8f215e', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '9a5d4692f22002666cf94145e9627ecbb60e33c8', class: "description" }, h("slot", { key: '9aa402c8732e6cf18990acf6a89e79935a3e30d6', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '76254a0fd326a71f69ad23f61e9cc4fdc545bbe1', hidden: !this.error, class: "error-description" }, h("slot", { key: '4c813cb95e17e4d8280edef288a6e1a35119c0c4', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'b1679a16a6e7461fb69ca54b6e1f8eb77b9b3c08', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ced81e56d8600dbfea8dcef14546c90857e5a186', htmlFor: this.inputId }, h("slot", { key: 'e393b0550cbe5aaef9d89085a5596702b19bb6ef', name: "label" }, this.label))), h("nv-popover", { key: '28dbb3701706b009f3611075cac9365cb82c76a8', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: '28f7ce04dc3b84dd0abf389514aeff992c4ffc2f', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '7e071c82b06bd594d92f8956201f1fec96283ec1', name: "before-input" }), h("div", { key: 'd4e6a32632d55d697bf8d71ca9a7f37929b142aa', class: "input-container" }, h("slot", { key: 'bc38eebb73e18d6adf4b903e9157e8f5fdd573c5', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: 'd2c74dd724f91c8b81a5f5b780e3ac3cdc8fc3bb', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'bad18f64f2d01a4314e8a7801beed221668a86ac', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'c372fd6a7cdca8a36f9267cb4fa6e4edf25fb765', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '1770d964871b2d34ec19244408b7099a05e0a1d2', name: "after-input" })), h("div", { key: 'cfa8c623ab7090505a6c2d75557af0e9d6ceb3ea', class: "time-dropdown", slot: "content" }, h("div", { key: 'f06ea88fc1fb99733f03f47d5e39f50e0d6c0458', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '43c8aa83d745684fbe5c7bde4ae809ed5d190558', class: "description" }, h("slot", { key: '336db7403e47ddca37050340fde22d148e67c83c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '8f4a1a1d8f0c3907f9dc0c2be1357a48b9088693', hidden: !this.error, class: "error-description" }, h("slot", { key: '6ec132e695695f7da3e8910b11f089cbff903498', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }

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

@@ -48,7 +48,7 @@ export class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '5f0e97a44934bf2ac722888e741296080a786707', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: 'aad0c2c5eb6fc4ecf2f2c4bb52eb1bcc3ad9cb97', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '00be1a7d2207ea2c80635977bbb810a4736ce8fd', href: `#nvicon_${this.name}` }))));
+        return (h(Host, { key: '07ecf3e38acec07461bc14ae07cbf0c4c324667c', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '720110902e455843f121411f6d065089b37ec347', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '467bafa0390bd497687d0ae09456fca7d66a04c9', href: `#nvicon_${this.name}` }))));
     }
     static get is() { return "nv-icon"; }
     static get originalStyleUrls() {
@@ -207,7 +207,7 @@ export class NvIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "`${IconName}`",
-                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layers-intersect\" | \"layers-off\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
+                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"exclamation-mark\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"info-small\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layers-intersect\" | \"layers-off\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"question-mark\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"trending-down\" | \"trending-down-2\" | \"trending-down-3\" | \"trending-up\" | \"trending-up-2\" | \"trending-up-3\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
                     "references": {
                         "IconName": {
                             "location": "import",

package/dist/collection/components/nv-icon/nv-icons.js

@@ -196,6 +196,7 @@ export const iconNames = [
     'equal-not',
     'eraser-off',
     'eraser',
+    'exclamation-mark',
     'external-link',
     'eye-check',
     'eye-off',
@@ -291,6 +292,7 @@ export const iconNames = [
     'hourglass',
     'inbox',
     'info-circle',
+    'info-small',
     'keyboard-hide',
     'keyboard-show',
     'keyboard',
@@ -385,6 +387,7 @@ export const iconNames = [
     'puzzle',
     'pylon',
     'qrcode',
+    'question-mark',
     'quotes-open',
     'quotes',
     'radar',
@@ -484,6 +487,12 @@ export const iconNames = [
     'trash',
     'tree',
     'trees',
+    'trending-down-2',
+    'trending-down-3',
+    'trending-down',
+    'trending-up-2',
+    'trending-up-3',
+    'trending-up',
     'truck-delivery',
     'truck',
     'umbrella',