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

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.css

@@ -207,4 +207,7 @@ nv-fieldpassword .error-description {
   font-style: normal;
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
+}
+nv-fieldpassword .error-description[hidden] {
+  display: none;
 }

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',
     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',
     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',
     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-fieldselect/styles/nv-fieldselect.css

@@ -357,4 +357,7 @@ nv-fieldselect .error-description {
   font-style: normal;
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
+}
+nv-fieldselect .error-description[hidden] {
+  display: none;
 }

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',
     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.css

@@ -201,4 +201,7 @@ nv-fieldtext > .error-description {
   font-style: normal;
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
+}
+nv-fieldtext > .error-description[hidden] {
+  display: none;
 }

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',
     subcomponents: ['nv-badge', 'nv-button', 'nv-icon'],
     stories: [
         // Default
@@ -217,7 +218,8 @@ const NvFieldtextDocs = {
             description: 'Deprecated: Use errorDescription and set the error prop instead. Add the message to the validation state.',
             args: {
                 label: 'Validation (Deprecated)',
-                validation: 'This is a validation message',
+                error: true,
+                errorDescription: 'This is a validation message',
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },

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

@@ -148,11 +148,11 @@ export class NvFieldtext {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '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.css

@@ -205,4 +205,7 @@ nv-fieldtextarea .error-description {
   font-style: normal;
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
+}
+nv-fieldtextarea .error-description[hidden] {
+  display: none;
 }

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',
     subcomponents: ['nv-badge', 'nv-button'],
     stories: [
         // Default

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

@@ -215,11 +215,11 @@ export class NvFieldtextarea {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '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 && {
+        return (h(Host, { key: 'e5dd85ced6fd9c2349937818b1bd3020918ec5a6' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '6f74a85203873163ff01ff1f9711c432a6e3cb7d', htmlFor: this.inputId }, h("slot", { key: 'b921ef64985f5a72aa4b6cb3828af99fd07e3982', name: "label" }, this.label))), h("div", { key: '422b0b20edb0f60bd3fc4050c885eabb71f0d4dc', class: "textarea-wrapper" }, h("div", { key: '8c22c47b74a97467ed399da53337b1c2904af395', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '63dbbf09f0abbed5ec62d024b45a783adc3e4069', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 '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: '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)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '75b575de27e1ad876c2036f379e7254e20259c23', class: "description" }, h("slot", { key: 'b54458f20c187207d5c69e4f74c3708970c1b6ff', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b34156ab4b08871d3474316b0dd75393de070ef7', hidden: !this.error, class: "error-description" }, h("slot", { key: '630487e5097436909753f6ddad8d8b0edca94199', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }

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

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

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

@@ -162,19 +162,20 @@ export class NvFieldtime {
     /****************************************************************************/
     //#region WATCHERS
     handleValueChange(newValue) {
-        // Parse the new value and ensure it's in the correct format
+        // Parse the new value and update internal state (hours, minutes, seconds)
+        // so the input fields reflect the new value
         if (newValue) {
             const components = parseValueByFormat(newValue, this.format);
             const formattedValue = reconstructTimeByFormat(components, this.format);
-            // Only emit if the formatted value is different from what we received
-            // This prevents infinite loops while ensuring format consistency
+            // Update internal state from parsed components
+            this.hours = components.hours;
+            this.minutes = components.minutes;
+            this.seconds = components.seconds;
+            // Ensure format consistency by correcting the value if needed
             if (formattedValue !== newValue) {
                 this.value = formattedValue;
-                return; // The watcher will be called again with the formatted value
             }
         }
-        // Emit the value in the correct format
-        this.valueChanged.emit(newValue);
     }
     handleOpenChange(newOpen) {
         // React to external changes, e.g., highlight current time on open
@@ -232,8 +233,9 @@ export class NvFieldtime {
         }
         // Reconstruct time from inputs in the correct format
         const reconstructedValue = this.reconstructTime();
-        // Update the value, which will trigger the watcher and emit the event
+        // Update the value and emit the event
         this.value = reconstructedValue;
+        this.valueChanged.emit(this.value);
     }
     handleHoursChange(inputValue, type) {
         const isHHFormat = this.format.startsWith('HH');
@@ -511,6 +513,7 @@ export class NvFieldtime {
         // Reconstruct time in the correct format and update value
         const reconstructedTime = this.reconstructTime();
         this.value = reconstructedTime;
+        this.valueChanged.emit(this.value);
     }
     handleInputBlur() {
         // Use a delay to check if the focus is still within the popover
@@ -871,9 +874,9 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: 'a02fbea3aa9b46d22978cececd750548c16c79cf', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '0ec36fbb4e2e810455e35537277496b600b8bd72', htmlFor: this.inputId }, h("slot", { key: '5ab4bca171c9d68fbb592c378b0db30139e23642', name: "label" }, this.label))), h("nv-popover", { key: '962705b7347af233d00ad7c33ea8777403e32534', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: '16e06fbf7003cfdf29e019cd4dfcd33c3b4a12e4', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '64c31ef85a92430ac348e9ff06405f682ceb7a98', name: "before-input" }), h("div", { key: '291130925798643a0c034719fc46a5ee391ec487', class: "input-container" }, h("slot", { key: '823f17b06aeb798216a46631655513bef79f7508', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '4e87bc2c19494f43cb4ac7dfb3b370eac6edab0b', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'a5c97446025ee0b571f3fe2223dfd759ed69f9ca', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '475f240e74459e16e5a9dd3bea0df21f32949e18', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '696be862dee53acc18c311fe2ea26f4ec099c62e', name: "after-input" })), h("div", { key: '75e7e8ad1c1bc7be602d633946b3845007a3b1c5', class: "time-dropdown", slot: "content" }, h("div", { key: '89898000bb7005ef687372d1016b5b93f02a43bc', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'a0bddd8851b21c57637fbe8f9d8a83d62ff43bdf', class: "description" }, h("slot", { key: '133c39ce0065b8f95a932d12c5150af595eab460', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'de3a537dd418c1c218eceb8062fd925c0ea06bba', hidden: !this.error, class: "error-description" }, h("slot", { key: '97e2865ce647f2e4e32697acf5154fc94be9eab7', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '59c076ed360d59fe366374d22d05f7c30fdd4efd', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '7cae0b1839180516de2ba8339503f4e5b19178b1', htmlFor: this.inputId }, h("slot", { key: '029688233c5a436191f767921f3c1e127e7786af', name: "label" }, this.label))), h("nv-popover", { key: '98c5ff80b83ac3cba41d57f4fc1c1d14dcc587d6', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: 'd313a5cde67d348b0f657f9cc6aedb8013ab606d', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'ada8a25275a2549048055528db4d24a258079147', name: "before-input" }), h("div", { key: 'c397cf2d2d73ffc0f481808a536b016d4bac891d', class: "input-container" }, h("slot", { key: 'e42c36e64a027a87db5f2b641daa063d8b81dac6', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '81d8f917c49209dfe4fb7b1322855cff67e0f417', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '075775e8912d1027f0c404523bff3f18dd521dbf', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'ae6c334e9900ff4e0d95276911d93ba5b235c513', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '293dadc5492be6a9b45d1f91d1b46dff34e76167', name: "after-input" })), h("div", { key: '35f18e81eebc1c58900a15d3f1054e91205173b4', class: "time-dropdown", slot: "content" }, h("div", { key: 'aacd26f7556d59f483c471648199d81dda8f215e', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '9a5d4692f22002666cf94145e9627ecbb60e33c8', class: "description" }, h("slot", { key: '9aa402c8732e6cf18990acf6a89e79935a3e30d6', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '76254a0fd326a71f69ad23f61e9cc4fdc545bbe1', hidden: !this.error, class: "error-description" }, h("slot", { key: '4c813cb95e17e4d8280edef288a6e1a35119c0c4', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }

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

@@ -264,6 +264,9 @@ nv-fieldtime .error-description {
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
 }
+nv-fieldtime .error-description[hidden] {
+  display: none;
+}
 nv-fieldtime hr {
   border: none;
   border-top: 1px solid var(--dropdown-divider-color, #ccc);

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

@@ -3,6 +3,7 @@ import { iconNames } from "./nv-icons";
 import { nameof } from "../../utils/class.utils";
 const NvIconDocs = {
     component: 'nv-icon',
+    parentGroup: 'Icon',
     stories: [
         // Default
         {

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

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

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

@@ -88,6 +88,7 @@ export const iconNames = [
     'bulb',
     'cake',
     'calendar-time',
+    'calendar-week',
     'calendar',
     'camera-off',
     'camera',
@@ -124,6 +125,7 @@ export const iconNames = [
     'chevrons-right',
     'circle-caret-right',
     'circle-check',
+    'circle-minus',
     'circle-x',
     'circuit-alternate',
     'circuit-ground-digital',
@@ -292,6 +294,8 @@ export const iconNames = [
     'keyboard-hide',
     'keyboard-show',
     'keyboard',
+    'layers-intersect',
+    'layers-off',
     'layout-board-split',
     'layout-dashboard',
     'layout-grid',

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

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

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

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

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

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

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

@@ -16,7 +16,7 @@ export class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (h(Host, { key: '5449f31fff78e9aabb1a6af11b99247cdf9fd4f3', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: 'a80c59f9585654352e1b48e1a245e94172e1e533', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get is() { return "nv-loader"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvMenuDocs = {
     component: 'nv-menu',
+    parentGroup: 'Menu',
     subcomponents: ['nv-menuitem', 'nv-iconbutton'],
     composedComponents: ['nv-menuitem'],
     stories: [