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

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

@@ -19,7 +19,7 @@ export class NvDrawerheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8ada9e8c2b69a74b61b079de6def10bc7504d7f5' }, h("slot", { key: '29c79bb789bed32bb395f1d5a8ebccf4838e3f45' }, h(Fragment, { key: '688bb835bd87de992f5bc4a63f2a857b7f806120' }, h("div", { key: '2638fa0871f356cc5ec6e8b72f9812cdbc93ff03', class: "heading" }, this.heading), h("div", { key: 'a3c2b292bfc359e2d09ae4d9a88857bc9fa0d8cb', class: "subheading" }, this.subheading)))));
+        return (h(Host, { key: '7f7a5091089b48e34ca8161d37062a760d04cb04' }, h("slot", { key: '32a03c7930e82a38a3e26d6cd1726dd1ac9f246c' }, h(Fragment, { key: 'ef9d6e52ac2918691ec04df4cb7e7703d5e3d0ee' }, h("div", { key: '2a4c59cf0e68d17014b977dbcd15d7b76b63b396', class: "heading" }, this.heading), h("div", { key: '70820933a33c13e39db4bb3178d270ddb780afdf', class: "subheading" }, this.subheading)))));
     }
     static get is() { return "nv-drawerheader"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldcheckboxDocs = {
     component: 'nv-fieldcheckbox',
+    parentGroup: 'Fields/nv-fieldcheckbox',
     subcomponents: ['nv-icon'],
     stories: [
         // Default

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

@@ -155,15 +155,15 @@ export class NvFieldcheckbox {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '6ee6fed9bb078e32a40ac2d6c1c4baf2f1825be1', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: '21b122c2c36382824eea7e66f2382cd333c0831c', class: "input-container" }, h("input", { key: '727fd8a8321e4259d44a8ffe362aa23bdb2e640e', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !useNativeRequired, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: 'd7af71859fcbf45833c17977e7f524d12d7ec516', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("div", { key: 'c636a80f3d538843e76b48f4bc6387064fdbcb6f', class: "input-container" }, h("input", { key: '4e721f36cb3c6137f0a05b981e22fda0e17dc8a3', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !useNativeRequired, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
             }), indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } }), h("span", { key: '74e19f64867b671e2f632780726f8cab9c6e485e', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: '960d296f7caa4abe6f4268c41c09b29b4c0454da', name: "checked-icon" }, h("svg", { key: '5a6875f34252b36490daabfdc600b4aa748c6f2e', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '8acd040c77cb913d2904daaac86038171e338761', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '42163fea08858131d3a4e74c119565e70d850cf2', name: "indeterminate-icon" }, h("svg", { key: '86d0ce5504ea9e8a82ba6c85b7729ce8161aaecf', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'ce47ed03186447bc90321a2aa8343a3377a6ade7', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("slot", { key: 'b41cb04185643e5dada6da24e5fc325905b53d08' }), h("div", { key: '57509a30441ab9de0c1949f6392dab34674ce91c', class: "text-container" }, h("slot", { key: '81ee7728a5a814371dab853d377e249afb5eab7e', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'f428aeaedd1e70f7b9626c54f3995b2998cde140', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'e36c574ba6041b7ab0dee5c02a025370f21d947a', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'fed901aef5e5ac91b5ac04fc8751585b55031666', class: "description" }, h("slot", { key: '84fdd3bd94f0249f3ed821e1849be6a6f192fb72', name: "description" }, this.description)))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'fc0526ddbbd84e08c18ee27c0b4be0533af0fe22', hidden: !this.error, class: "error-description" }, h("slot", { key: 'd288116644ed450bdab0be20a3e7def7481e6c8b', name: "error-description" }, this.errorDescription))))));
+            } }), h("span", { key: '8d2900a5541c0920e18ec6274558aeb88e290139', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: '3a80b2db6b84836d1b5ceb72abe0d45dc9f9d3f5', name: "checked-icon" }, h("svg", { key: 'cf5f36827d3470b6279bfb985cbe9fbf35d8773e', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: 'b4b49d0ee3e2207fdfa00ff29d3ccfd63744b313', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '3a5ceee36c94ee66b4104373a1ab9a8dcae635f4', name: "indeterminate-icon" }, h("svg", { key: '11e3599cdda5c3055f7f18f7800b4b82747863a9', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '4b8eecd39e9cfc73a340980f8e438b855a64e2de', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("slot", { key: 'd5f707b058e44ea577a37714994ddd16933e5e5b' }), h("div", { key: 'e60d0a559d0069074e5a7973e94d9dc212a659d5', class: "text-container" }, h("slot", { key: '3ba66c529955b680c16a94a8dd36955ebc7563aa', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'be5232898d0209130626ae3d27af0fd6f2d79327', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'ec0886e8605d7cdd2494134831d729bc7687f542', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0de7768b857c85b8b54cd4edaeaf60fa8130005a', class: "description" }, h("slot", { key: 'b6c3a2f467934d5bdaa913cc7dccc9b2677c49e5', name: "description" }, this.description)))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '2c286387dbdc2e8f98c6fc4ae62c63c57e85a972', hidden: !this.error, class: "error-description" }, h("slot", { key: '3d0eeb3caee84399792cfe9484902c6d5a36e226', name: "error-description" }, this.errorDescription))))));
     }
     static get is() { return "nv-fieldcheckbox"; }
     static get formAssociated() { return true; }

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

@@ -51,6 +51,7 @@ const formatStories = formats.map(format => ({
 }));
 const NvFielddateDocs = {
     component: 'nv-fielddate',
+    parentGroup: 'Fields/nv-fielddate',
     subcomponents: [
         'nv-badge',
         'nv-button',

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

@@ -404,15 +404,15 @@ export class NvFielddate {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '3c13437365ba5c194e382050d83a01c2610f901d' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: '82bccae1ff2044e8b099789e4403857772f8449c', htmlFor: this.inputId }, h("slot", { key: '3a2065e072ba6acb2ca5a162b877d05d30f93815', name: "label" }, this.label))), h("nv-popover", { key: 'afd5fc8f78a46562b318f2f2d48306efa2275fac', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '748395cd864e8ee8f224460a420379b9f8ea362e', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '8c1f2baa6a33861d83c9497ee39a6a2a08b27d2e', name: "before-input" }), h("div", { key: '91dfd2e870fc59e0949ff1ae2b66e0a3c89ec203', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '7e7a11aacf727512ccbf4c5fd149f9ccbf161c0d', name: "leading-input" }), h("input", { key: '47b9d83bb4942604c3e8244995d032743ad84e78', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
+        return (h(Host, { key: '373ddbc08a6b5d6ca6f2ac368f0ec84067539313' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: '8373d2e38786f41bda23dd8fe9d345d24fb27710', htmlFor: this.inputId }, h("slot", { key: '8ded993892e5eef5caec76081eff5d3ed2db695a', name: "label" }, this.label))), h("nv-popover", { key: '0a394aab113c9a964f7495481d728416b1b7b041', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: 'ae7e1a4d7454b09969335a4772e77ba137a12389', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '7b744ada5b12dca2ffaca4690f27a9a77240ea55', name: "before-input" }), h("div", { key: '9eb02599b7d7b6ee1835756525d8646d8a50be73', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '882a358dd1f0865a0c46ca5d9c5f8fe4689de616', name: "leading-input" }), h("input", { key: '2f8603d625b8fbfe8a5287e5512fdb2b7309004b', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
                 this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (h("nv-icon", { key: '0c8badb4887475f3ce278db7dd1bb9d4f4db1948', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '908c9595d2858b5915ea9625b365d98c9076175d', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: '2acbfe40a0db4b070491e91fa69b9a21fee5111d', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+            }), autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (h("nv-icon", { key: 'ae611c7990a9ee817fcd8fec5c3c6068b995310d', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '3fa08699f440d9dcbd9612965a3f1cf88b17a83c', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'ee781c688e8bc62d17250dd4ec198e5706641cf7', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: 'fb9ae11ed575835053e11a28136c545fefa1f185', name: "after-input" })), h("div", { key: '4ed455b92288d64e1d243e0d2268251f183523c9', slot: "content" }, h("nv-calendar", { key: '1af9d63edd9c95414ddcba5e3988a1bf42fae4bb', onSingleDateChange: this.handleSingleDateChange.bind(this), dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '3a124e7dd1d5216ac586893eb2d7ae8383051cdc', class: "description" }, h("slot", { key: '13f0b8e29875e369734799370fbd54c27becebfb', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '78dbbd76ada0c99907c9725fc82f2edfea41830c', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '2c7f702581d6645cb9e6e0e94effa2ea067f049a' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: 'ab360fe2a6d5ceb48899ba05e404548995348e96', name: "after-input" })), h("div", { key: '8379e7defd054c642fe0d25cd8f3890c351811b1', slot: "content" }, h("nv-calendar", { key: '316df6f492d8d684ba91429fe5e499330329d0a7', onSingleDateChange: this.handleSingleDateChange.bind(this), dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '9bad6d56684e9fea1298b5338ed32c04f3ab364c', class: "description" }, h("slot", { key: '180f3d6aac34ed02bf7ac351319327d701d4a419', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b62cfbae2fec4d1e4c6d15f3bd3cf8e0936ec28f', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '6c4f47488a757c5808ed1bbe8bcedaa5dce60da2' })));
     }
     static get is() { return "nv-fielddate"; }
     static get originalStyleUrls() {

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

@@ -122,6 +122,7 @@ const getDateRangeShortcuts = () => [
 ];
 const NvFielddaterangeDocs = {
     component: 'nv-fielddaterange',
+    parentGroup: 'Fields/nv-fielddaterange',
     subcomponents: [
         'nv-button',
         'nv-iconbutton',

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

@@ -560,16 +560,16 @@ export class NvFielddaterange {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: 'ff398fcfbbe95e5665b774fe43350acbbc348fe9' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (h("label", { key: '2b1909b93047611192bb66f574bdda3b206e2385', htmlFor: this.startInputId }, h("slot", { key: '8195acf71bec4897fca7c4617eb0de096e88b191', name: "label" }, this.label))), h("nv-popover", { key: 'ba36048cf5a34974f4f4deb66fb0d735988e5b53', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '14b6d78ac81001bd174bad38172a8a1a1f347731', slot: "trigger", class: "input-wrapper" }, h("slot", { key: 'fb016c89c6f8f99ae3c67917fc623bd5ebfd55fc', name: "before-input" }), h("div", { key: 'ba782a5e283e468467ccdb9b571046cd2f4852e9', class: "input-container" }, h("slot", { key: '2adfa150e03b07b3fc68dcf58e8033b7945161a0', name: "leading-input" }), h("div", { key: '0276764deeb85f4211ac741f3eb5fef2f9fbcb43', class: "range-inputs" }, h("input", { key: 'b752bb09fefcd173403cb11db40d0aabd25e1388', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
+        return (h(Host, { key: '659fbd943d7f088b0dde4ad6ae9eac2fd719d58d' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (h("label", { key: '5ec3a4df845c445ce2c4b45798677c9ba1c79f04', htmlFor: this.startInputId }, h("slot", { key: 'ac22f1a6d6f49a2feb2a92a1ff9045422785ef64', name: "label" }, this.label))), h("nv-popover", { key: 'd4ac345011bce61f263df887fa9eebc210659145', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '6f13372e3bea5b40ed7bc82ffea0fa4f85f6e450', slot: "trigger", class: "input-wrapper" }, h("slot", { key: '4403b049058b231017eea3be6a1045312d805d75', name: "before-input" }), h("div", { key: 'df2603a90a1e7740311c8a4b1a85a051ed8efff0', class: "input-container" }, h("slot", { key: '37554324ba2bb1f25446c97db50546e0a33b5af8', name: "leading-input" }), h("div", { key: '0e99431473e98409bdf883acfd7e50823e6fc3c2', class: "range-inputs" }, h("input", { key: '7077a4a95fd264466c44f4f96fd9b6236887b731', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
                 this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), h("div", { key: 'd5be46903d09c3b189dc4e7ee8ddad170c0f6286', class: "range-separator" }), h("input", { key: '11b9a3838149854e68ae7c9d96aedbaaba84a90d', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
+            }), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), h("div", { key: '8f84668eb682306ff6751044fb715dfbccc38e6b', class: "range-separator" }), h("input", { key: '1e7045f9501a04e14d4f726171abd07cbce0e004', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
                 this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (h("nv-icon", { key: '26b42abdeafd75930a5ca607d24337b6b3c10ac2', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '1af99ccf21b9f8089204e9e97c2453b2bdeffd29', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: '38b70d2b9f4ec16ff1707dc2b05ceae806646541', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '2ab6a03f44f04595763f4a6cbb8bc142578e1b3a', name: "after-input" })), h("div", { key: '1fc0213d712a8560dee995c4d26c7d9944af650b', slot: "content" }, h("nv-calendar", { key: 'd883272405391bec569516321fd2eae93dac817a', ref: el => (this.calendarElement = el), onRangeDateChange: this.handleRangeDateChange.bind(this), onValueChanged: this.handleCalendarValueChanged.bind(this), onSingleDateChange: this.handleCancelDateChange.bind(this), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'd0f9852ccd37202db9653b338cf850ba44365ddf', class: "description" }, h("slot", { key: 'cff092ce15f1f90f246de859fea30d3714fd4520', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c9dfd25d6784cca037337e7ffe28fc4ac1d33fd5', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: '8123f07bf03ae219917f2e9f8146142bd8781bd4' })));
+            }), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (h("nv-icon", { key: 'a82a7ea123f900eda3eb82cb1a70796ffc0248da', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '176e92373cb84d7cd873637818eba98b51a69646', name: "circle-check", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'd7069a77fa7fdca3b8202fed9fdfe8af082fdaf6', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '1ef543db2799a3242ed0a9ef8a5058b002fb885b', name: "after-input" })), h("div", { key: 'b47f6bbc98772ba7b0aa680737bf278b716aa237', slot: "content" }, h("nv-calendar", { key: '6008dda7daff3c40f20475996f8215ae8b6c457a', ref: el => (this.calendarElement = el), onRangeDateChange: this.handleRangeDateChange.bind(this), onValueChanged: this.handleCalendarValueChanged.bind(this), onSingleDateChange: this.handleCancelDateChange.bind(this), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'bd3c9e7650cea0ae6e30418c1ed15e2e21241576', class: "description" }, h("slot", { key: 'c87eb17e1b5624c7d3b5b31644919c4a473ea135', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'e9cb169a418080a3c374f5d36fdc7c09845a52f6', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (h("slot", { name: "error-description" })) : (this.errorDescription))), h("slot", { key: 'ea7d3580a7007bcdc85eb096ccdbf683d7a1d906' })));
     }
     static get is() { return "nv-fielddaterange"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFielddropdownDocs = {
     component: 'nv-fielddropdown',
+    parentGroup: 'Fields/nv-fielddropdown',
     subcomponents: [
         'nv-fielddropdownitem',
         'nv-avatar',

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

@@ -658,11 +658,11 @@ export class NvFielddropdown {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: 'fc83e8834e38142ad102d17495b5978283699576', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '5a1eb965296909556869a025a6e4da609f2cbf90', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, h("slot", { key: 'd5d4f3607e07e248c4083c3ea934a3bd1d7a7467', name: "label" }, this.label))), h("nv-popover", { key: '17e42a4d729dbc735db49f398ec14e0c296ff8ee', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("div", { key: 'a665ff2d2142acf5335d52e9a304ea2995750e5f', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'bddb24c6404ea0ea7da33485f8d497d0a635f3e2', name: "before-input" }), h("div", { key: '7275a9a99c9b4476b405f3966f128ce9ce92801a', class: "input-container" }, h("slot", { key: 'ede3c4442f365377eb83524f5d70d2922cd2a38b', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: 'b41a60470da47b175fac17a8bc88b8719b56cc14', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'adf93f21febb5404b931b821595eed91b24da55b', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, h("slot", { key: 'c8b8256e6e06695a3b6778cec0a696bc0713e6dc', name: "label" }, this.label))), h("nv-popover", { key: '66895b00c801a5c1889da8bc73d9f519d3fe4b70', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("div", { key: 'e468646cb1d08f7f26a8c427040d14f843279fd0', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'd5567eb82b1e9230507963ed7ca76656f1415855', name: "before-input" }), h("div", { key: '872a8f01aeba95f52209e8dbe2bb1cff3c65c46f', class: "input-container" }, h("slot", { key: 'f8038d509899b3dbe895c9f042f39a1274d1b681', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (h("nv-iconbutton", { key: 'd1aa81c5d14601ea85cec133a94f2b071ca98358', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: 'd49e30222d63ffdcc4d952d959a98946b943685f', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: '6e157ce63f3f6faa08df5b7b9b7e6fd3ae9d0c31', "data-scope": "toggle-dropdown", ref: el => (this.toggleElement = el), name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.syncToggleDropdown.bind(this), tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '665519b43abbd562ea1c3e36355b15ffb3e6fea2', name: "after-input" })), h("div", { key: 'da97b6498e93d5f6c427bec6963db697c41c2d9a', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (h("ul", { key: '0db57a711680aad61c32993b5f3afe304ec9066f' }, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), h("slot", { key: '5c7643c6436c42efa63bab75f416b684b662812b', name: "content" }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0ade462a96a16bb0cf6fb9d49d4ead0d98a6234b', class: "description" }, h("slot", { key: 'bb2d0c3340bdc0d0b3ac77feab8bc70a73b89a00', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c04c2329d71e088b262a46441bb3bd9592d304e8', hidden: !this.error, class: "error-description" }, h("slot", { key: 'b85d769f12c4bf2a2ba5aba69c20566d17801f0a', name: "error-description" }, this.errorDescription)))));
+            }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (h("nv-iconbutton", { key: 'b5b48972a2529eee9dd2fd68871859bf289d472a', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (h("nv-icon", { key: '2cca314634242b1e697ba2b26298b095f0742582', name: "alert-circle", class: "validation", size: "md" })), h("nv-iconbutton", { key: 'eac277cbb66ac82547d5c4c6a6aec3443f2fb593', "data-scope": "toggle-dropdown", ref: el => (this.toggleElement = el), name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.syncToggleDropdown.bind(this), tabIndex: this.disabled ? -1 : 0 })), h("slot", { key: '25f05b5425937ca89e1c8c4f2be9fbde2e39959a', name: "after-input" })), h("div", { key: '064a1701a6f4678e1443d7e028f3681e2e41dfd9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (h("ul", { key: 'a9e489d4eb5551044f43a5aacaed94457ddbcacc' }, this.options.map(option => (h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), h("slot", { key: '4dda850901378ea3416260e1c0adda7af9a153c7', name: "content" }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'a878da5beb9572bc8d3a318d3879517ee84c7bac', class: "description" }, h("slot", { key: '04618e824a1b5d67a4ccbe70f13d9ca818f607bd', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '007314310806e8dcc5b2b48af65bc66de4ba9f7a', hidden: !this.error, class: "error-description" }, h("slot", { key: '237a4e37e5869f8b66c631559027ec6551005ec6', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fielddropdown"; }
     static get formAssociated() { return true; }

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

@@ -1,5 +1,58 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvFielddropdownitemDocs = {
     component: 'nv-fielddropdownitem',
-    skip: true,
+    parentGroup: 'Fields/nv-fielddropdown',
+    subcomponents: ['nv-fielddropdown', 'nv-icon', 'nv-avatar', 'nv-badge'],
+    stories: [
+        // Default
+        {
+            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"))),
+        },
+        // 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"))),
+        },
+        // disabled
+        {
+            name: nameof(x => x.disabled),
+            description: 'Disabled dropdown item that cannot be selected',
+            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"))),
+        },
+        // detached
+        {
+            name: nameof(x => x.detached),
+            description: 'Detached dropdown item that remains visible when filtering',
+            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"))),
+        },
+        // 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"))),
+        },
+        // 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"))),
+        },
+        // 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"))),
+        },
+    ],
 };
 export default NvFielddropdownitemDocs;

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

@@ -53,7 +53,7 @@ export class NvFielddropdownitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6d50463d72a8e2dde08ba3d7bc6f3ba21021163e', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, h("slot", { key: 'b38c59fc95f124c3395ff1ab0b7dfc4ecc27823b' }, h("div", { key: 'a5ba5d4b636847e5ce6c1bab6cbbce418b70a1af', class: "text-wrapper" }, h("span", { key: 'f01a0aa5ee475a9640c7abefe321f605ea5e7cdf', "data-scope": "text" }, this.label))), this.selected && (h("nv-icon", { key: '9cd1b5532a4d2f5c2546e9432262f483bd5c8d69', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        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" }))));
     }
     static get is() { return "nv-fielddropdownitem"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,46 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvFielddropdownitemcheckDocs = {
     component: 'nv-fielddropdownitemcheck',
-    skip: true,
+    parentGroup: 'Fields/nv-fielddropdown',
+    subcomponents: ['nv-fielddropdown', 'nv-icon'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Checkbox dropdown item for multi-select',
+            template: (h("nv-fielddropdown", { label: "Select multiple options" }, h("nv-fielddropdownitemcheck", { "data-storybook-args": true, value: "option1" }, "Option 1"), h("nv-fielddropdownitemcheck", { value: "option2" }, "Option 2"), h("nv-fielddropdownitemcheck", { value: "option3" }, "Option 3"))),
+        },
+        // value
+        {
+            name: nameof(x => x.value),
+            description: 'Checkbox item with specific value',
+            template: (h("nv-fielddropdown", { label: "Select features" }, h("nv-fielddropdownitemcheck", { value: "feature1" }, "Feature 1"), h("nv-fielddropdownitemcheck", { "data-storybook-args": true, value: "feature2" }, "Feature 2"), h("nv-fielddropdownitemcheck", { value: "feature3" }, "Feature 3"))),
+        },
+        // disabled
+        {
+            name: nameof(x => x.disabled),
+            description: 'Disabled checkbox item',
+            args: {
+                disabled: true,
+            },
+            template: (h("nv-fielddropdown", { label: "Select options" }, h("nv-fielddropdownitemcheck", { value: "option1" }, "Option 1"), h("nv-fielddropdownitemcheck", { "data-storybook-args": true, value: "option2", disabled: true }, "Option 2 (Disabled)"), h("nv-fielddropdownitemcheck", { value: "option3" }, "Option 3"))),
+        },
+        // checked
+        {
+            name: nameof(x => x.checked),
+            description: 'Pre-checked checkbox item',
+            args: {
+                checked: true,
+            },
+            template: (h("nv-fielddropdown", { label: "Select options" }, h("nv-fielddropdownitemcheck", { "data-storybook-args": true, value: "option1", checked: true }, "Option 1 (Pre-selected)"), h("nv-fielddropdownitemcheck", { value: "option2" }, "Option 2"), h("nv-fielddropdownitemcheck", { value: "option3" }, "Option 3"))),
+        },
+        // WithIcon
+        {
+            name: 'WithIcon',
+            description: 'Checkbox item with icon',
+            template: (h("nv-fielddropdown", { label: "Select with icons" }, h("nv-fielddropdownitemcheck", { value: "email" }, h("nv-icon", { slot: "leading-icon", name: "mail" }), "Email"), h("nv-fielddropdownitemcheck", { value: "sms" }, h("nv-icon", { slot: "leading-icon", name: "message-square" }), "SMS"), h("nv-fielddropdownitemcheck", { value: "push" }, h("nv-icon", { slot: "leading-icon", name: "bell" }), "Push Notification"))),
+        },
+    ],
 };
 export default NvFielddropdownitemcheckDocs;

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

@@ -52,7 +52,7 @@ export class NvFielddropdownitemcheck {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6c5bc9f6060ac711a1360dd45da58dddf7d7d563', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: 'f3efe64e5f03411f1fe7433821a46c50cd18e10e', 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: 'e603490efb497f0ef62049e7b44c34d91c8989d2' }), h("slot", { key: '6774a2ab5bf182297929afbcec8c489bf620bcab', name: "main" }), h("slot", { key: '5ca19cd56a5917ed125eb20c6713e25dc512fb45', name: "label" }), h("slot", { key: '847864bfbc3302bb07088f77d9c2d200fac8b505', name: "description" }))));
+        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" }))));
     }
     static get is() { return "nv-fielddropdownitemcheck"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldmultiselectDocs = {
     component: 'nv-fieldmultiselect',
+    parentGroup: 'Fields/nv-fieldmultiselect',
     subcomponents: [
         'nv-fielddropdownitemcheck',
         'nv-badge',

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldnumberDocs = {
     component: 'nv-fieldnumber',
+    parentGroup: 'Fields/nv-fieldnumber',
     subcomponents: ['nv-button', 'nv-badge'],
     stories: [
         // Default

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: '1e36baa7bada38760fc9363329cb133d92aad28b' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '7c47d4417b1a26dd35e0e566451c3e8386803611', htmlFor: this.inputId }, h("slot", { key: '6aeedee63b8d2fbe2d7df6f567cb6d81020efe98', name: "label" }, this.label))), h("div", { key: '4507a0ec037b3822a396ad89d86b62d1adcf0011', class: "input-wrapper" }, h("slot", { key: '7f469b67aa088cea2967e430d1e257097f84ae84', name: "before-input" }), h("div", { key: 'c3c5a0e713e5cd94ab6d9c6414cf33a1bd91daee', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '8c6b3952d186bf4873470fc7fa67768e4d76d561', name: "leading-input" }), h("input", { key: 'f413f4c3cd77a0a872b0038bbf8e61ce780c3f78', 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: '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 && {
                 '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: 'af60594f2c536e5527478a66b72ad96bedcdcbd7', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'd1ac93ad90cf44304581e4c1516e50a9ccdfa13a', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '13e5220090b3841c6dcc688e89ad99df8df1fc65', name: "circle-check", class: "validation", size: "md" })), h("div", { key: '4823aa102f38909d488cde22f3c8e5607a6dad36', class: "stepper" }, h("nv-iconbutton", { key: 'beb7246372406a126f5eeb10f36532e6727e29db', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h("nv-iconbutton", { key: 'f17eef8a17252962ee0f282ece0e402cc71a231d', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h("slot", { key: '54e427210db1972f194a7e60a5523038615e2889', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b74c0ecd5d63a072a47b841294614d9f7cfb1371', class: "description" }, h("slot", { key: '3feddef8e3658097a3137dbdbd872e72c527f5f8', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '4b6956f6ae94393d37b94703401dc6ab62657fdf', hidden: !this.error, class: "error-description" }, h("slot", { key: '37c04247cf7842d623ee36b1144f9656af651768', 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: '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)))));
     }
     static get is() { return "nv-fieldnumber"; }
     static get formAssociated() { return true; }

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldpasswordDocs = {
     component: 'nv-fieldpassword',
+    parentGroup: 'Fields/nv-fieldpassword',
     subcomponents: ['nv-button', 'nv-badge'],
     stories: [
         // Default

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: '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 && {
+        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 && {
                 '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: '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)))));
+            }), 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)))));
     }
     static get is() { return "nv-fieldpassword"; }
     static get formAssociated() { return true; }

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldradioDocs = {
     component: 'nv-fieldradio',
+    parentGroup: 'Fields/nv-fieldradio',
     stories: [
         // Default
         {

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

@@ -83,9 +83,9 @@ export class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        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))))));
+        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))))));
     }
     static get is() { return "nv-fieldradio"; }
     static get formAssociated() { return true; }

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldselectDocs = {
     component: 'nv-fieldselect',
+    parentGroup: 'Fields/nv-fieldselect',
     subcomponents: ['nv-badge', 'nv-button'],
     stories: [
         // Default

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: '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
+        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
                 ? `${this.inputId}-error`
-                : `${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 && {
+                : `${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 && {
                 '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: '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)))));
+                : `${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)))));
     }
     static get is() { return "nv-fieldselect"; }
     static get formAssociated() { return true; }

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldsliderDocs = {
     component: 'nv-fieldslider',
+    parentGroup: 'Fields/nv-fieldslider',
     stories: [
         // Default
         {

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

@@ -464,11 +464,11 @@ export class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        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 ||
+        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 ||
             this.description ||
-            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.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.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)))));
+            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)))));
     }
     static get is() { return "nv-fieldslider"; }
     static get formAssociated() { return true; }

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldtextDocs = {
     component: 'nv-fieldtext',
+    parentGroup: 'Fields/nv-fieldtext',
     subcomponents: ['nv-badge', 'nv-button', 'nv-icon'],
     stories: [
         // Default

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: '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 && {
+        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 && {
                 '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: '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)))));
+            }), 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)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }

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

@@ -3,6 +3,7 @@ import { nameof } from "../../utils/class.utils";
 import { faker } from "@faker-js/faker";
 const NvFieldtextareaDocs = {
     component: 'nv-fieldtextarea',
+    parentGroup: 'Fields/nv-fieldtextarea',
     subcomponents: ['nv-badge', 'nv-button'],
     stories: [
         // Default