@nova-design-system/nova-webcomponents 3.24.0 → 3.26.0

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: '187f0ebbf10b6fc51015e35bf3906eebb4009877' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'bf48decdda3cb09bdc3bb66777d9681ca7fe000d', htmlFor: this.inputId }, h("slot", { key: '115f1c66b1b6daa01e5677f83129044244b79a02', name: "label" }, this.label))), h("div", { key: 'bb1f612364948b42c1e46c0e068f0fae46200ba8', class: "input-wrapper" }, h("slot", { key: '2d7a1398a3a72bf4d30fee5b15f0d4f82671f1de', name: "before-input" }), h("div", { key: '900aab152e49d7071c3c886decc7d18d2d04f6ca', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '0ff288dbda29b8b9b19a535f5ef0d9b96e7a7c3a', name: "leading-input" }), h("input", { key: 'ef08440e8ac74bbe6d7af446317d1a1baa632770', 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: '0022e7c0b9529f4cd6840732a12bdfd7af178c4d' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ac8eebc87258b3ff220809e1304c69c657d91a6e', htmlFor: this.inputId }, h("slot", { key: '0385f62cef83b64170ffbe796163407e7f5a5ab5', name: "label" }, this.label))), h("div", { key: 'a4b02b838c72a5f5c263919bb56ec2f601f9b2af', class: "input-wrapper" }, h("slot", { key: 'fbcfea7b266fc54c29583ada4f0007984a2c4e05', name: "before-input" }), h("div", { key: '83ca16802319a42e59718c1836b9692da0f34fc9', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '996aceac450cf9ab7e0c0a96061b06212ed95ca0', name: "leading-input" }), h("input", { key: '2d23175d6a47ee52e2a3dbae88a989e13fe5ea02', 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: '3f17aa2d7e3f2a05663b952ea104adbc193100bd', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: 'f2c5ba947f6284877a4a67b82fac2e66ef722ab2', 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: '1c12ce6f14e1dd8dbc5cc22620688d92c275ba15', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0432c059f5a3c9eacdcde93177a398f4b27b8a88', class: "description" }, h("slot", { key: '4a5b18c7a1df0e8d7e6435ebf731a3025ccd5861', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'ba4986e81220fa41481dc699a52d05ad0b22adc4', hidden: !this.error, class: "error-description" }, h("slot", { key: 'af1b29bb3575f3985f788769a97d5ae38ab26fd9', 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: '388170ed995039b69b2b3db523b2c7ba33e8fd87', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: '92567a64f653423e351bb558456233318461a0e0', 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: '929d2faa36c128bd5d163beb8a06f40c008981e9', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ddd0ed40de645fae289d3e1b60db0067e219fd78', class: "description" }, h("slot", { key: '17122748a9a401a50d43d3fd556c20809dfb9bc2', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '1ef139333591257d3a13e9506be0721cee1fd4f1', hidden: !this.error, class: "error-description" }, h("slot", { key: '631bf31a710d0ace20cd7d631d6218101ac896b0', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldpassword"; }
     static get formAssociated() { return true; }
@@ -520,12 +520,13 @@ export class NvFieldpassword {
                 "mutable": false,
                 "complexType": {
                     "original": "`${TextInputAutocomplete}`",
-                    "resolved": "\"on\" | \"off\" | \"section-*\" | \"shipping\" | \"billing\" | \"home\" | \"work\" | \"mobile\" | \"fax\" | \"pager\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-extension\" | \"email\" | \"impp\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"url\" | \"photo\"",
+                    "resolved": "\"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"billing\" | \"cc-additional-name\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"email\" | \"family-name\" | \"fax\" | \"given-name\" | \"home\" | \"honorific-prefix\" | \"honorific-suffix\" | \"impp\" | \"language\" | \"mobile\" | \"name\" | \"new-password\" | \"nickname\" | \"off\" | \"on\" | \"one-time-code\" | \"organization\" | \"organization-title\" | \"pager\" | \"photo\" | \"postal-code\" | \"section-*\" | \"sex\" | \"shipping\" | \"street-address\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-national\" | \"transaction-amount\" | \"transaction-currency\" | \"url\" | \"username\" | \"work\"",
                     "references": {
                         "TextInputAutocomplete": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::TextInputAutocomplete"
+                            "id": "src/utils/constants.ts::TextInputAutocomplete",
+                            "referenceLocation": "TextInputAutocomplete"
                         }
                     }
                 },
@@ -657,4 +658,3 @@ export class NvFieldpassword {
             }];
     }
 }
-//# sourceMappingURL=nv-fieldpassword.js.map

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

@@ -178,4 +178,3 @@ const NvFieldradioDocs = {
     ],
 };
 export default NvFieldradioDocs;
-//# sourceMappingURL=nv-fieldradio.docs.js.map

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

@@ -83,9 +83,9 @@ export class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '3fceb787d8e778b5724361f0a240a63375117941', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: 'a61213ca3fb3251cd02a3716859a0182a07428d7', 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: '4faca6c7d131897671d307053e28ade9e5f398f8', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ab93b19fa1fd36d6d0fdae08ac4f935c82d0f355', htmlFor: this.inputId }, h("slot", { key: 'f914379ab7738b7ce2856be0738796da23c130c6', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'fc0d08ba7178252f8ba0c8f958a080f44b8e8a19', class: "description" }, h("slot", { key: '2d7936a1322ea9798998900fa92cfac1f574685c', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '39e27f0156df7ec64324012dc815cba251992d6f', hidden: !this.error, class: "error-description" }, h("slot", { key: '1d408d03c05c3eeba238aea59c5e6393c3befd82', name: "error-description" }, this.errorDescription))))));
+        return (h(Host, { key: '07d9225a6a3af28efa5885b5bb02a3f512708a97', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '2b5afcf255bc442914f9225537987d331000883d', 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: '8fc76a826e8a8ef51a80173b950ab460cf0ff8f3', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '4578fccf241e9470a7f514761b3141d3fad77a88', htmlFor: this.inputId }, h("slot", { key: 'f6d9f4961d07525175bd51fa4a4b546d62e74d4e', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '17d029eb709c443e8a68a5d6bdd1265400ae35d2', class: "description" }, h("slot", { key: 'e4485b5ed253c6fc45508947387fa43f0492f654', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'cde01e850752c1a2b4a3b2559f2052167409a605', hidden: !this.error, class: "error-description" }, h("slot", { key: 'f9d9f08be6506a495a5b42bcc9ebd2db49e749d5', name: "error-description" }, this.errorDescription))))));
     }
     static get is() { return "nv-fieldradio"; }
     static get formAssociated() { return true; }
@@ -233,7 +233,8 @@ export class NvFieldradio {
                         "LabelPlacement": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::LabelPlacement"
+                            "id": "src/utils/constants.ts::LabelPlacement",
+                            "referenceLocation": "LabelPlacement"
                         }
                     }
                 },
@@ -412,4 +413,3 @@ export class NvFieldradio {
             }];
     }
 }
-//# sourceMappingURL=nv-fieldradio.js.map

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 nv-fieldradio {
   --nv-fieldradio-border-default: var(--components-form-field-border-default);
   --nv-fieldradio-border-hover: var(--components-form-field-border-hover);
@@ -106,6 +107,25 @@ nv-fieldradio input[type=radio]:disabled:hover {
   border-color: var(--nv-fieldradio-border-default);
   background: var(--nv-fieldradio-background-disabled);
 }
+@media print {
+  nv-fieldradio input[type=radio]:checked {
+    background: transparent;
+    border-color: var(--nv-fieldradio-background-checked);
+  }
+  nv-fieldradio input[type=radio]:checked::before {
+    content: "●";
+    position: absolute;
+    top: calc(50% - 2px);
+    left: calc(50% - 4.5px);
+    transform: translate(-50%, -50%);
+    width: auto;
+    height: auto;
+    background: none;
+    color: var(--nv-fieldradio-background-checked);
+    font-size: calc(var(--form-radio-inner-circle-size) * 3);
+    line-height: 1;
+  }
+}
 nv-fieldradio .description {
   align-self: stretch;
   color: var(--components-form-text-description-default);

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

@@ -289,4 +289,3 @@ const NvFieldselectDocs = {
     ],
 };
 export default NvFieldselectDocs;
-//# sourceMappingURL=nv-fieldselect.docs.js.map

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

@@ -372,15 +372,15 @@ export class NvFieldselect {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '40714f4af41b7d652d1a468e56849fe1debe8d60' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3cbb3c5d86df0272ae035e4d55137b2abceed7df', htmlFor: this.inputId }, h("slot", { key: '91c991cc47389ff46346df6616733e205a5cbea7', name: "label" }, this.label))), h("div", { key: '42dfb725f9ff9caf8c00f4b1189f22d229269156', class: "select-wrapper" }, h("slot", { key: 'bbe11ade568532183c52ec56c9d2b8ab667e9d5c', name: "before-input" }), h("div", { key: '8cfe703cd711c2f4831655d616345f06a6f358b0', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '1c4194d8e9d98467e7c37400cf0434993e8ea91e', name: "leading-input" }), this.internalReadonly && (h("input", { key: '2c2caf1d45e6d68a644539ded3c7add991abf300', 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: '14b1a2aa45b0c68539234e57dfcce39422d6d23b' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a9c3a454574d65358d28f8e72049d82b5667b0cb', htmlFor: this.inputId }, h("slot", { key: 'ead692187041569b918d65afd775e1f4050d54e7', name: "label" }, this.label))), h("div", { key: '1707389d32a34a16a141990a9ab133c0e39fdd11', class: "select-wrapper" }, h("slot", { key: 'd8ac565ec1a564f1e451f8d0f80ad12c4b25a70d', name: "before-input" }), h("div", { key: '4c0edadba8462c36ea4f315971842796fb59852f', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '68442a898f7321d584d7fff62452af2b37ee3467', name: "leading-input" }), this.internalReadonly && (h("input", { key: '997d8e04f32826d65f4a1a138b008f69910fa6d2', 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: '744913ecd27a2d33996b13f685679467fc837c30', 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: '732a7a11d9547ea4f6b3322781bc34be18b6b77e', 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: '891676c5a9d755b49fd375fba8f193c990d41cfa', class: "select-icons" }, this.error && (h("nv-icon", { key: '2d4528dba1eccbc1acc39d2bfb54a13d03913b9b', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '035768470154e3e529921741802ae74f1b56b29c', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: '23a1006cc1f1dfa9862af41e64d5d57539bff127', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '5f899c5426e304c1d83b046317eaf732d919cb55', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0f78de9aa808a625dc6a8f0148a43450992b787e', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '72d96f2909d0b793dcd24fe939b58ebc5e9c7de1', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c10fdcc3592d36fea37f283835abcf8790a99010', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: 'c8783f8f94d1c9f082e60e38b061dae49e5b5584', 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: 'f4675290f5ee76afb1020f40e70c19e2f33b9292', class: "select-icons" }, this.error && (h("nv-icon", { key: '246f1fd624270c5f2cfdfc5fc31ff1e63c0aa99f', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'ff06df43b44ceb423c2dd3be999e553a62953d84', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: 'fee5dd8d3268d6ad00389b2ace10eaffa81fb0c0', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: 'debcb059b6fc7a3667009af11539a98778812064', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c64ad4587fe24de32391e730a02d34138e9dd55d', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '7bee964467a46ea037d3be6733a04a08979fbebb', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'd759750f8a90a8a41d2b42ac1cc4a297ae14e571', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: 'df17b5135b5f8bbf991895f11cc1bb74c7e665a6', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldselect"; }
     static get formAssociated() { return true; }
@@ -839,4 +839,3 @@ export class NvFieldselect {
             }];
     }
 }
-//# sourceMappingURL=nv-fieldselect.js.map

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

@@ -200,7 +200,6 @@ nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear
   height: 0;
 }
 nv-fieldselect .select-wrapper .select-container input:read-only {
-  opacity: 0.5;
   background-color: var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));
   border-color: var(--nv-field-border-readonly);
 }
@@ -217,6 +216,7 @@ nv-fieldselect .select-wrapper .select-container select {
   font-weight: var(--font-weight-medium-emphasis);
   height: var(--form-field-line-height);
   padding: var(--form-field-padding-y) var(--form-field-padding-x);
+  padding-right: 36px;
   box-sizing: content-box;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -235,13 +235,96 @@ nv-fieldselect .select-wrapper .select-container select::placeholder {
   font-weight: var(--font-weight-low-emphasis);
   line-height: var(--form-field-line-height);
 }
+nv-fieldselect .select-wrapper .select-container select hr {
+  border-color: var(--components-list-select-hr, var(--color-content-low-border));
+}
+nv-fieldselect .select-wrapper .select-container select {
+  appearance: base-select;
+}
+nv-fieldselect .select-wrapper .select-container select::picker(select) {
+  appearance: base-select;
+  background-color: var(--components-popover-background);
+  border-color: var(--components-popover-border);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--popover-radius);
+  padding: var(--popover-padding-y) var(--popover-padding-x);
+  margin-top: var(--spacing-2);
+  box-shadow: var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity);
+}
+nv-fieldselect .select-wrapper .select-container select::picker-icon {
+  display: none;
+}
 nv-fieldselect .select-wrapper .select-container select option {
-  font-size: var(--form-field-font-size, 16px);
-  font-style: normal;
-  font-weight: var(--font-weight-medium-emphasis);
-  line-height: var(--form-field-line-height, 24px);
-  background-color: var(--color-level-05-background);
-  color: var(--components-form-field-content-text);
+  display: flex;
+  gap: var(--list-select-gap-y);
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  background-color: var(--components-list-select-option-background-default);
+  padding: var(--list-select-option-padding);
+  font-weight: var(--menu-contextual-item-font-weight);
+  font-size: var(--list-select-font-size);
+  line-height: var(--list-select-line-height);
+  color: var(--components-list-select-option-content-default);
+  border-radius: var(--list-select-option-radius);
+  transition: background-color 150ms ease-out, color 150ms ease-out;
+  cursor: pointer;
+}
+nv-fieldselect .select-wrapper .select-container select option:not(:first-of-type) {
+  margin-top: var(--list-select-gap-y);
+}
+nv-fieldselect .select-wrapper .select-container select option:hover, nv-fieldselect .select-wrapper .select-container select option:focus, nv-fieldselect .select-wrapper .select-container select option:focus-within {
+  background-color: var(--components-list-select-option-background-hover);
+  color: var(--components-list-select-option-content-hover);
+}
+nv-fieldselect .select-wrapper .select-container select option:checked {
+  background-color: var(--components-list-select-option-background-active);
+  color: var(--components-list-select-option-content-active);
+}
+nv-fieldselect .select-wrapper .select-container select option:checked::after {
+  order: 1;
+  margin-left: auto;
+  content: "";
+  display: inline-block;
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+nv-fieldselect .select-wrapper .select-container select option::checkmark {
+  display: none;
+}
+nv-fieldselect .select-wrapper .select-container select option:disabled, nv-fieldselect .select-wrapper .select-container select option:checked:disabled {
+  color: var(--components-list-select-option-content-disabled);
+  background-color: var(--components-list-select-option-background-default);
+}
+nv-fieldselect .select-wrapper .select-container select optgroup {
+  appearance: base-select;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  color: var(--components-list-select-optgroup-content);
+  gap: var(--list-select-optgroup-gap);
+  padding-top: var(--list-select-optgroup-padding-y, 8px);
+  padding-bottom: var(--list-select-optgroup-padding-y, 8px);
+}
+nv-fieldselect .select-wrapper .select-container select optgroup:hover {
+  color: var(--components-list-select-optgroup-content);
+}
+nv-fieldselect .select-wrapper .select-container select optgroup option {
+  padding-left: var(--list-select-optgroup-option-padding-left);
+}
+nv-fieldselect .select-wrapper .select-container select optgroup option:first-child {
+  margin-top: var(--list-select-optgroup-option-margin-top, 4px);
 }
 nv-fieldselect .select-wrapper .select-container select.hidden {
   display: none;

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

@@ -368,4 +368,3 @@ const NvFieldsliderDocs = {
     ],
 };
 export default NvFieldsliderDocs;
-//# sourceMappingURL=nv-fieldslider.docs.js.map

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

@@ -464,11 +464,11 @@ export class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '554f94dc79adf1edbfa80bdc17bb41af26da871c' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '98ffb9c9332a9fef9c37088b48b80eaec2930417', htmlFor: this.startInputId }, h("slot", { key: '084d8c1fbdc91d8bd26016489b6ef86a3c334a6b', name: "label" }, this.label))), h("div", { key: 'ce62bedafa8b20ce952944b61638f61585fc7044', 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: 'd4dd3f3cc00a19b166b27158c30f193096553127', class: "track-container" }, h("div", { key: 'd37bd4c7463d3a987d300082f2db4519af7fd652', 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: '0c3b4b90851cb8cf80b3803fbb5e85f8e3d98aed', 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: '34ffffbcfefbeac4050ced2db000a32f67222376' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'b07225ad89ae0f85d3cd2b1ee203b30e6abd7e57', htmlFor: this.startInputId }, h("slot", { key: 'b1f39009872c4a38dae38286a036bb69f8ba6f62', name: "label" }, this.label))), h("div", { key: '0013570dd6edbcb7c0f4a6ea32a550b6d9432271', 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: 'ca639497db1b588fcf0d4fad5f548a53ff1ee353', class: "track-container" }, h("div", { key: '6a8d1eb4bddff4d5ca9760729cfa1ce27b887a65', 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: '134bf7de84a7572b1f033e4e17e0e435e841eb42', 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: '7674d49cfe01b7ac5be21c3cbc2ff4e625c27298', class: "description" }, this.success && (h("nv-icon", { key: '7342bca8ef60d227cd630affc37815bafa9736f7', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'c9221aadf6e2328bc5781d74c044b6911221dbe8', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b0188dce4fe8718a90715049d2af71fff7e9c512', class: "description" }, this.success && (h("nv-icon", { key: 'cd2fd95080cd96ed516f9caa3b078ad481ee9912', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'd5dbc5f8bb6b66cef814a58e00aa07e7b9e07a23', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '34f339f8e25ffb2c481b2472939d9ef14292c2f9', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '6a941595fc494afb7e580a98f968a628371b1a33', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: 'c77b3881b302a65c43098479aa445751314c2714', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '67a78749af19d44d553581ff0042e40c067dd44c', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '4aac6d31b273cee32d235b7c53fd4cac6af4c253', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: '9faa92d59e9fde524d1fb41e30b30178d9c12c4b', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldslider"; }
     static get formAssociated() { return true; }
@@ -1044,4 +1044,3 @@ export class NvFieldslider {
             }];
     }
 }
-//# sourceMappingURL=nv-fieldslider.js.map

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

@@ -118,4 +118,3 @@ export function formatValueForDisplay(value, step) {
     }
     return String(value);
 }
-//# sourceMappingURL=nv-fieldslider.utils.js.map

package/dist/collection/components/nv-fieldslider/partials/field-input.js

@@ -40,4 +40,3 @@ export const FieldInput = props => {
     };
     return hasField ? (h("div", { class: clsx(!hasField && 'hidden-input') }, h("nv-fieldnumber", { id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName, ...dataAttrs, onInput: e => e.stopPropagation(), onValueChanged: handleValueChanged }, labelBeforeValue && (h("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)), labelAfterValue && (h("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
 };
-//# sourceMappingURL=field-input.js.map

package/dist/collection/components/nv-fieldslider/partials/range-thumb.js

@@ -31,4 +31,3 @@ export const RangeThumb = props => {
         h("div", { class: "thumb thumb-right", style: { left: `${rightPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rightValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "right", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, h("div", { class: "thumb-tooltip" }, labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)), formatValueForDisplay(rightValue, step), labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))),
     ];
 };
-//# sourceMappingURL=range-thumb.js.map

package/dist/collection/components/nv-fieldslider/partials/single-thumb.js

@@ -15,4 +15,3 @@ export const SingleThumb = props => {
     const percent = valueToPercent(displayPosition, min, max);
     return (h("div", { class: "thumb", style: { left: `${percent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, h("div", { class: "thumb-tooltip" }, labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)), formatValueForDisplay(value, step), labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))));
 };
-//# sourceMappingURL=single-thumb.js.map

package/dist/collection/components/nv-fieldslider/partials/tick-marks.js

@@ -15,4 +15,3 @@ export const TickMarks = props => {
         return (h("div", { class: "track-tick", style: { left: `${percent}%` } }, tick.label && h("div", { class: "tick-label" }, tick.label)));
     })));
 };
-//# sourceMappingURL=tick-marks.js.map

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

@@ -197,4 +197,3 @@ describe('nv-fieldslider -> utils', () => {
         });
     });
 });
-//# sourceMappingURL=nv-fieldslider.utils.test.js.map

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

@@ -311,4 +311,3 @@ const NvFieldtextDocs = {
     ],
 };
 export default NvFieldtextDocs;
-//# sourceMappingURL=nv-fieldtext.docs.js.map

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: '95643ae488ca32bc792ac572fd127f358f881894' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '35d52de7041b6297af9feca3c0b19f480cacac54', htmlFor: this.inputId }, h("slot", { key: 'd866c825300faf563ded34e1a9960f14522d201f', name: "label" }, this.label))), h("div", { key: '923c5a4f9f8c9c2bf269a58896f070e3dba2be08', class: "input-wrapper" }, h("slot", { key: '933e05c2a3e4ec0429c90dfd8fc799250b8c8fed', name: "before-input" }), h("div", { key: '7cde9f8dd874269ddfca691946de52764764cbb2', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '55a6c1302a71fc5c5ea75708e09751407e3dfd10', name: "leading-input" }), h("input", { key: '324c57a9c6c590edb178a8821444842b55f19f2e', 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: '0baf2e0b76bd06018a819a60d2d3a271474d8b26' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '915a355b200bb2eebb44b60b46715c0be57af927', htmlFor: this.inputId }, h("slot", { key: 'e915661a6fdf9d7a489b39ac9c41ae368c64764c', name: "label" }, this.label))), h("div", { key: '33109ed1f7ddfc38de2606d7b3ac273678a71a82', class: "input-wrapper" }, h("slot", { key: 'a93db4a91c9fb313031680c7cd992f501930b5da', name: "before-input" }), h("div", { key: '1c56222cf9e1ad0b4242548bb3133b502b890ea7', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'bcff7d46918f5069e8c512412a6d7120e3204f1f', name: "leading-input" }), h("input", { key: '16f7a7230799cccdec45dc5a53939f5fc78f4e24', 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: 'cd9558b2939d1b935ac342eef24729a88425dcc9', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'd7834369c4b8d7bd095f9f602e176fe8fea0a92e', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '3e6714d10d4d21d6cc4912ea074810e3c11fa0a9', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: 'db6e9212d31d2f8b0d4f1379df6d8c41da96d587', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '829f38f3fa67e7bed5d08f6c9f416fbe39e807b6', class: "description" }, h("slot", { key: 'a3c63f1903fcdc25be26725b1f0b0b09dabe54a5', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c2150b17c0385a5b2019db64eba7358ed07f62a4', hidden: !this.error, class: "error-description" }, h("slot", { key: 'a43078cd173e92fa7b17b0f72f302a3196acd1ba', 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: '446a2dcd683ba6caeb9f1f715890a38cb084d341', name: "trailing-input" }), this.error && (h("nv-icon", { key: '2e2787b8ac5c39db8a8212dffb7ed545b2d35084', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '88e507f5003fc9d2967968b6938b51731dbb5d09', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '3d471559b8630cfbcb39b17477beb62bf707bea7', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '5e6bb278db247a1f94e27f6401519821a9fc571b', class: "description" }, h("slot", { key: '13483a478681d97b00d06664fee40c35f81eb29f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c91425b592a094661d4c76316b060877861d85f5', hidden: !this.error, class: "error-description" }, h("slot", { key: 'f371e111411bf60d331e3a0762135d62010ad06c', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }
@@ -585,12 +585,13 @@ export class NvFieldtext {
                 "mutable": false,
                 "complexType": {
                     "original": "`${TextInputAutocomplete}`",
-                    "resolved": "\"on\" | \"off\" | \"section-*\" | \"shipping\" | \"billing\" | \"home\" | \"work\" | \"mobile\" | \"fax\" | \"pager\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-extension\" | \"email\" | \"impp\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"url\" | \"photo\"",
+                    "resolved": "\"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"billing\" | \"cc-additional-name\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"email\" | \"family-name\" | \"fax\" | \"given-name\" | \"home\" | \"honorific-prefix\" | \"honorific-suffix\" | \"impp\" | \"language\" | \"mobile\" | \"name\" | \"new-password\" | \"nickname\" | \"off\" | \"on\" | \"one-time-code\" | \"organization\" | \"organization-title\" | \"pager\" | \"photo\" | \"postal-code\" | \"section-*\" | \"sex\" | \"shipping\" | \"street-address\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-national\" | \"transaction-amount\" | \"transaction-currency\" | \"url\" | \"username\" | \"work\"",
                     "references": {
                         "TextInputAutocomplete": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::TextInputAutocomplete"
+                            "id": "src/utils/constants.ts::TextInputAutocomplete",
+                            "referenceLocation": "TextInputAutocomplete"
                         }
                     }
                 },
@@ -690,4 +691,3 @@ export class NvFieldtext {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=nv-fieldtext.js.map

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

@@ -168,6 +168,20 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // maxAutoHeight
+        {
+            name: nameof(x => x.maxAutoHeight),
+            description: 'Sets a maximum height (in pixels) when autosize is enabled. Content beyond this height will overflow with a scrollbar, useful for chat-style inputs.',
+            args: {
+                label: 'Textarea Max Auto Height',
+                autosize: true,
+                maxAutoHeight: 120,
+                rows: 2,
+                value: faker.lorem.paragraph(10),
+                resize: 'none',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
         // autofocus
         {
             name: nameof(x => x.autofocus),
@@ -249,4 +263,3 @@ const NvFieldtextareaDocs = {
     ],
 };
 export default NvFieldtextareaDocs;
-//# sourceMappingURL=nv-fieldtextarea.docs.js.map

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

@@ -71,7 +71,7 @@ export class NvFieldtextarea {
         /**
          * Enable this to make the textarea automatically resize as the user types,
          * adjusting the height to fit the content. For the best experience, avoid
-         * vertical resizing, as it’s controlled by this feature. Horizontal resizing
+         * vertical resizing, as it's controlled by this feature. Horizontal resizing
          * can still be allowed if desired.
          */
         this.autosize = false;
@@ -133,35 +133,37 @@ export class NvFieldtextarea {
     adjustTextareaHeight() {
         if (this.textareaElement && this.autosize) {
             /**
-             * The first requestAnimationFrame ensures that the DOM has applied any
+             * A single requestAnimationFrame ensures that the DOM has applied any
              * pending changes (e.g., value updates or attribute changes) before
-             * proceeding to the next frame.
+             * measuring. All style reads and writes happen synchronously within
+             * this callback so the browser never paints the intermediate
+             * "height: auto" state, avoiding a visible flash.
              */
             requestAnimationFrame(() => {
-                /**
-                 * The second requestAnimationFrame ensures that the browser has fully
-                 * recalculated layout and styles based on the updated DOM, such as
-                 * recalculating scrollHeight for the textarea after the new value is
-                 * rendered.
-                 */
-                requestAnimationFrame(() => {
-                    this.textareaElement.style.height = 'auto';
-                    const computedStyle = window.getComputedStyle(this.textareaElement);
-                    const lineHeight = parseFloat(computedStyle.lineHeight);
-                    const paddingTop = parseFloat(computedStyle.paddingTop);
-                    const paddingBottom = parseFloat(computedStyle.paddingBottom);
-                    const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
-                    const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
-                    // Calculate min-height based on rows
-                    const minHeight = lineHeight * this.rows +
-                        paddingTop +
-                        paddingBottom +
-                        borderTopWidth +
-                        borderBottomWidth;
-                    this.textareaElement.style.minHeight = `${minHeight}px`;
+                this.textareaElement.style.height = 'auto';
+                const computedStyle = window.getComputedStyle(this.textareaElement);
+                const lineHeight = parseFloat(computedStyle.lineHeight);
+                const paddingTop = parseFloat(computedStyle.paddingTop);
+                const paddingBottom = parseFloat(computedStyle.paddingBottom);
+                const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+                const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+                // Calculate min-height based on rows
+                const minHeight = lineHeight * this.rows +
+                    paddingTop +
+                    paddingBottom +
+                    borderTopWidth +
+                    borderBottomWidth;
+                this.textareaElement.style.minHeight = `${minHeight}px`;
+                if (this.maxAutoHeight &&
+                    this.textareaElement.scrollHeight > this.maxAutoHeight) {
+                    this.textareaElement.style.height = `${this.maxAutoHeight}px`;
+                    this.textareaElement.style.overflowY = 'auto';
+                }
+                else {
                     this.textareaElement.style.height =
                         this.textareaElement.scrollHeight + 'px';
-                });
+                    this.textareaElement.style.overflowY = 'hidden';
+                }
             });
         }
     }
@@ -213,11 +215,11 @@ export class NvFieldtextarea {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '0800e702f2212313aba04685710981ea5c9f1e13' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'e5978fdc5f8588aba9e04571e0beb772d6c1843e', htmlFor: this.inputId }, h("slot", { key: 'f846862e07c1196e8f7d2c007846f40f90dea6c1', name: "label" }, this.label))), h("div", { key: 'a61a7551075e23adf63bb62c8a44b22fc78af72d', class: "textarea-wrapper" }, h("div", { key: '0e57bca81abbad3752875f3acfad7e94b1aa8f8e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '9348dedab4d701980656c180d197db720061964a', 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: '9d7aed8625b1cfa103e275495d40116b8f1314c3' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '6609cc39f3809b833a4c9755c487ba3eef05a5c4', htmlFor: this.inputId }, h("slot", { key: '277484af20e4054be5491576ffdfb95ca0f23a79', name: "label" }, this.label))), h("div", { key: '6224c47beaee1e15ea9277a1f69f4ac5ea496cb6', class: "textarea-wrapper" }, h("div", { key: '6dd7868aa65091dd79c34497dec020945d56f925', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '2548dab5d8b387d37036a07c4a76b567c84a8b59', 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: '75e01c35855b9275c45546bbe8f1b9129365e208', class: "description" }, h("slot", { key: 'a0ecbbcef8a51b4d0dfaf14f3781a2e6d3d7cac3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '8fc8170fa84865844cb544bfbd202b459707247a', hidden: !this.error, class: "error-description" }, h("slot", { key: '58d1774d57bf08c42e7c953b9606c5d9b0954ffc', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '10ba44a9c4b83db00d00c2a4e791c68836413aac', class: "description" }, h("slot", { key: '5015686b48e185707376008306c204432199cde1', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '312502a84e08fdacbe77cc55f4e91e0b4122c82b', hidden: !this.error, class: "error-description" }, h("slot", { key: 'b837f0784d75b8d0df04e025ee8f9a309c6f46d3', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }
@@ -636,7 +638,7 @@ export class NvFieldtextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable this to make the textarea automatically resize as the user types,\nadjusting the height to fit the content. For the best experience, avoid\nvertical resizing, as it\u2019s controlled by this feature. Horizontal resizing\ncan still be allowed if desired."
+                    "text": "Enable this to make the textarea automatically resize as the user types,\nadjusting the height to fit the content. For the best experience, avoid\nvertical resizing, as it's controlled by this feature. Horizontal resizing\ncan still be allowed if desired."
                 },
                 "getter": false,
                 "setter": false,
@@ -644,6 +646,25 @@ export class NvFieldtextarea {
                 "attribute": "autosize",
                 "defaultValue": "false"
             },
+            "maxAutoHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets a maximum height (in pixels) for the textarea when autosize is\nenabled. Once the content exceeds this height the textarea will stop\ngrowing and the content will overflow with a scrollbar. This is useful\nfor chat-style inputs where unlimited growth is undesirable. Only\napplies when `autosize` is `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-auto-height"
+            },
             "autofocus": {
                 "type": "boolean",
                 "mutable": false,
@@ -721,4 +742,3 @@ export class NvFieldtextarea {
             }];
     }
 }
-//# sourceMappingURL=nv-fieldtextarea.js.map

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

@@ -162,4 +162,3 @@ const NvFieldtimeDocs = {
     ],
 };
 export default NvFieldtimeDocs;
-//# sourceMappingURL=nv-fieldtime.docs.js.map