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

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvDialogfooterDocs = {
     component: 'nv-dialogfooter',
-    skip: true,
+    parentGroup: 'Dialog/nv-dialog',
+    subcomponents: ['nv-dialog', 'nv-button', 'nv-dialogheader'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-dialog", { open: true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("nv-dialogheader", null, "Dialog Header"), h("p", null, "Dialog content"), h("nv-dialogfooter", { "data-storybook-args": true }, h("nv-button", null, "Cancel"), h("nv-button", null, "Confirm")))),
+        },
+    ],
 };
 export default NvDialogfooterDocs;

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

@@ -18,12 +18,14 @@ export class NvDialogfooter {
         this.undismissable = false;
         /**
          * Sets the leading icon for the primary button.
+         * @icon
          */
-        this.leadingIcon = '';
+        this.leadingIcon = null;
         /**
          * Sets the trailing icon for the primary button.
+         * @icon
          */
-        this.trailingIcon = '';
+        this.trailingIcon = null;
         /**
          * Sets the danger state for the primary button.
          */
@@ -71,7 +73,7 @@ export class NvDialogfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'a5148c3e41ad6d7c5e54e2b29b8452707d5c2b2b' }, h("slot", { key: 'e5fcf66789eac1c6b0118403c33e7e80fb974c71' }, h(Fragment, { key: '9255d264f559322bebbcc874d91802bbaaeac2d6' }, !this.undismissable && (h("nv-button", { key: 'e8d6085fbbcf5bbdbad7b23d65660debb296a332', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { key: '8a6963f12e89860c3bb1e17eeed60cf9b6d81bc3', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { key: '59dc3f909f7366a0d0e05ab089d34b9d222f43ed', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { key: 'e2be736da129cf7720dad6e1a443eb55a182b2dd', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
+        return (h(Host, { key: 'a66631cca8c689b702dbaca327d432013a01d5a9' }, h("slot", { key: 'b11ebee7ba1cf0d54ea14061adfc2aa652a8f320' }, h(Fragment, { key: 'b476090b330740be2903f0f8baaf2af37ce9f4b9' }, !this.undismissable && (h("nv-button", { key: '7fbcf88d375443143b6c51e4374d2c8aab0a138c', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { key: '45ea2b382870b4a94033e609b5bc57d0af7cad93', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { key: 'c021c5db17e94c0fa320824335ad3cf3507fc47e', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { key: '3b3f4ebf29a35d901228d46ce799ff722a874272', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
     }
     static get is() { return "nv-dialogfooter"; }
     static get formAssociated() { return true; }
@@ -131,41 +133,61 @@ export class NvDialogfooter {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "`${IconName}` | null",
+                    "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",
+                            "path": "../nv-icon/nv-icons",
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
                     "text": "Sets the leading icon for the primary button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "leading-icon",
-                "defaultValue": "''"
+                "defaultValue": "null"
             },
             "trailingIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "`${IconName}` | null",
+                    "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",
+                            "path": "../nv-icon/nv-icons",
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
                     "text": "Sets the trailing icon for the primary button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "trailing-icon",
-                "defaultValue": "''"
+                "defaultValue": "null"
             },
             "danger": {
                 "type": "boolean",

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvDialogheaderDocs = {
     component: 'nv-dialogheader',
-    skip: true,
+    parentGroup: 'Dialog/nv-dialog',
+    subcomponents: ['nv-dialog', 'nv-button', 'nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-dialog", { open: true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("nv-dialogheader", { "data-storybook-args": true }, "Dialog Header"), h("p", null, "Dialog content"))),
+        },
+    ],
 };
 export default NvDialogheaderDocs;

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

@@ -15,7 +15,7 @@ export class NvDialogheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8577fd5a719adf8764d85f667495701cb1514df2' }, h("slot", { key: '5858bd8fff71db135f69a76cb298343f0590f853' }, h(Fragment, { key: '81ac703e205f1b8587144213c7f57c9fd7ba9657' }, h("div", { key: '5a12e1facef605d96338b31468c8d8109379e2d1', class: "heading" }, this.heading), h("div", { key: '1a559041968e2b2b92a987c014e41380fe6f8616', class: "subheading" }, this.subheading)))));
+        return (h(Host, { key: '791850365cf2de9d1a5395083e01ee927e9fcfac' }, h("slot", { key: '2641c425dc10b7d748365fa0fa3d86a6784e129b' }, h(Fragment, { key: '7c8ef96b9c7e0ba03e374cc7e74d1f8f24d94c5b' }, h("div", { key: '53d09670dc9779101b3e79adea03bc34870df028', class: "heading" }, this.heading), h("div", { key: '624861c0ecac1de23ac1a4b558dea9de6acf5706', class: "subheading" }, this.subheading)))));
     }
     static get is() { return "nv-dialogheader"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvDrawerDocs = {
     component: 'nv-drawer',
+    parentGroup: 'Dialog/nv-drawer',
     subcomponents: [
         'nv-drawerheader',
         'nv-drawerfooter',

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

@@ -424,7 +424,7 @@ export class NvDrawer {
     render() {
         const hasForm = this.form || this.el.querySelector('form');
         const state = this.open ? 'open' : 'closed';
-        return (h(Host, { key: 'e8ae3c1b5adcd23622f97d0f405fd8607e51b3e4' }, h("slot", { key: 'c94efef46482ef65c9a907d5f23e2306cc88c9af', name: "trigger" }), h("dialog", { key: '8b12d8885f4a7f987985b4be49aace1f48b66949', ref: el => (this.dialogElement = el), onClose: this.handleDrawerClose, onClick: this.handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-header", "aria-describedby": "drawer-content", class: clsx({ [`side-${this.side}`]: true }), "data-state": state }, h("div", { key: '5fc00bd8e28cf26c92e3c3888941e6209e03fb65', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: '7eb5e3335a15a3821fa4c62160a313bddf34e3b2', class: clsx('content', `size-${this.size}`), ref: el => (this.contentElement = el), "data-state": state, "data-side": this.side, style: this.width ? { width: this.width } : {} }, !this.undismissable && (h("nv-button", { key: 'c284d6cea03806890603d71d27d642961eab4423', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, h("nv-icon", { key: 'daf2c3af54c3eaede4835b100200632e644b7cc6', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-drawerheader", { id: "drawer-header" })), h("div", { key: '90ffef76d60a3522ae5daf10554a3f8a487c5f76', class: "content-body", id: "drawer-content" }, h("slot", { key: 'd66e675a68c27819f7ca146afc27e63d05ad5603' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-drawerfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDrawerCanceled: this.handleDrawerClose, undismissable: this.undismissable })))))));
+        return (h(Host, { key: '6ca026b67705704b891c9bca8293dde501c0dc7d' }, h("slot", { key: 'ce9a79e0fe385b774aeac0106929343d6a053394', name: "trigger" }), h("dialog", { key: '49f9c71fd04de256f05d82d671b7664cf1ab3563', ref: el => (this.dialogElement = el), onClose: this.handleDrawerClose, onClick: this.handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-header", "aria-describedby": "drawer-content", class: clsx({ [`side-${this.side}`]: true }), "data-state": state }, h("div", { key: '9c113486255925e4c7520c1f040b95ec253625d8', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: 'e5b32ffe6785c27eef326f37b23478b9993f451a', class: clsx('content', `size-${this.size}`), ref: el => (this.contentElement = el), "data-state": state, "data-side": this.side, style: this.width ? { width: this.width } : {} }, !this.undismissable && (h("nv-button", { key: 'ac89f7d87b1f307fd809e518cfb88ceb82a074af', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, h("nv-icon", { key: '47d0888ea54efdf3f82cfd0b39bda5c1141074ba', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-drawerheader", { id: "drawer-header" })), h("div", { key: '77a08ee8fcda500d45c9426de8d0b6fb9e960142', class: "content-body", id: "drawer-content" }, h("slot", { key: 'fc40bc3ecb66c95c188b1984431788e8d3bb66e2' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-drawerfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDrawerCanceled: this.handleDrawerClose, undismissable: this.undismissable })))))));
     }
     static get is() { return "nv-drawer"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvDrawerfooterDocs = {
     component: 'nv-drawerfooter',
-    skip: true,
+    parentGroup: 'Dialog/nv-drawer',
+    subcomponents: ['nv-drawer', 'nv-button', 'nv-drawerheader'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-drawer", { open: true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("nv-drawerheader", null, "Drawer Header"), h("p", null, "Drawer content"), h("nv-drawerfooter", { "data-storybook-args": true }, h("nv-button", null, "Cancel"), h("nv-button", null, "Save")))),
+        },
+    ],
 };
 export default NvDrawerfooterDocs;

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

@@ -18,10 +18,12 @@ export class NvDrawerfooter {
         this.undismissable = false;
         /**
          * Sets the leading icon for the primary button.
+         * @icon
          */
         this.leadingIcon = null;
         /**
          * Sets the trailing icon for the primary button.
+         * @icon
          */
         this.trailingIcon = null;
         /**
@@ -76,7 +78,7 @@ export class NvDrawerfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c83bba64c28cf284847c2b726e2d1bb9deb86152' }, h("slot", { key: '89e9a548f3cee3c45b8e7874e9d8618b469ce94a' }, h(Fragment, { key: 'ef18a333ef7c5de05891a265a8ccb85b6913237a' }, !this.undismissable && (h("nv-button", { key: 'd69eab0d344bdfb9f2454cc18d953f50b9d65aa2', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { key: '8329da9bcbb41cb972c2b2527334086c47a10f93', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { key: '86ac92ef44afe20e540422d3cd0ee45c04c233bc', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { key: '3a48543e903d060ff77d1100df4984db04c0d2cb', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
+        return (h(Host, { key: '280e30ae22c734269f8181a96ac0418d2c3bd5db' }, h("slot", { key: '9e435bc05507e06906121b49b4b486daff032ade' }, h(Fragment, { key: '1b38093cb1e7af2a16f5c465b9f7d0d79e39ea58' }, !this.undismissable && (h("nv-button", { key: 'a341887eb32885c375c393a8a13064c38b99cd48', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), h("nv-button", { key: '58ec1ef9f3e2e4647cea49bd89455da601976aff', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (h("nv-icon", { key: '4ade73bea4bf75f845b07418e0dc3f5c032cff2e', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (h("nv-icon", { key: '02e4cba8e8f39664cf0ee052fe8d5df4ef580949', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
     }
     static get is() { return "nv-drawerfooter"; }
     static get formAssociated() { return true; }
@@ -136,14 +138,24 @@ export class NvDrawerfooter {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "`${IconName}` | null",
+                    "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",
+                            "path": "../nv-icon/nv-icons",
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
                     "text": "Sets the leading icon for the primary button."
                 },
                 "getter": false,
@@ -156,14 +168,24 @@ export class NvDrawerfooter {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "`${IconName}` | null",
+                    "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",
+                            "path": "../nv-icon/nv-icons",
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
                     "text": "Sets the trailing icon for the primary button."
                 },
                 "getter": false,

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvDrawerheaderDocs = {
     component: 'nv-drawerheader',
-    skip: true,
+    parentGroup: 'Dialog/nv-drawer',
+    subcomponents: ['nv-drawer', 'nv-button', 'nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-drawer", { open: true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("nv-drawerheader", { "data-storybook-args": true }, "Drawer Header"), h("p", null, "Drawer content"))),
+        },
+    ],
 };
 export default NvDrawerheaderDocs;

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',
     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: 'd5ca4e3d2166b89cd92aecd2b393f03d0d78b769', 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, tabindex: this.el.tabIndex, ...(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: 'b51e2d55382e69519d3764f4f9c7087ccfd24235', class: "icon" }, this.checked && !this.indeterminate && (h("slot", { key: 'cd70b0132a720ebf866fe21d1b53bbab89cda62f', name: "checked-icon" }, h("svg", { key: 'f1a9166fa75cbd37c2a0f1850b937de00f77a51e', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '2886dee16859f19b7dc630a100cbfd110c2e9eb7', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (h("slot", { key: '68eb14e2bbf5726a27023714f67de50d8e24ad83', name: "indeterminate-icon" }, h("svg", { key: '671dc1afed5b3b9d71efff519009c8384da49ec1', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, h("path", { key: '956838789fbac27422e0db8f13c4e2a8abc64c74', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("slot", { key: 'a93af1189444b1c96ea689eff29b7fa1e5b726c6' }), h("div", { key: '1bd695cb83a2010267d6ce1ce8dc6902dd62adf4', class: "text-container" }, h("slot", { key: 'b4e3088cf9469842b403d0eeb3122a85d08ce710', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'f5326d69a430d60577fac4cbb6229cd26292cb6f', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '56e52bbf5e0fed0e49b255a23a1c7fdabf69df13', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ca56f06cc4c3493e27d31de804f695bbe8a77231', class: "description" }, h("slot", { key: '46bd6a8deed8dfa6390b0994776a5c31aca16fdf', name: "description" }, this.description)))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c1a5b14f4397a495e6ad340a6ae3a45e9f2c82fa', hidden: !this.error, class: "error-description" }, h("slot", { key: 'b8e10251f26ec1d541a1acad5d6bda0fc57b589d', 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',
     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-fielddate/styles/nv-fielddate.css

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

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

@@ -122,6 +122,7 @@ const getDateRangeShortcuts = () => [
 ];
 const NvFielddaterangeDocs = {
     component: 'nv-fielddaterange',
+    parentGroup: 'Fields',
     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-fielddaterange/styles/nv-fielddaterange.css

@@ -237,6 +237,9 @@ nv-fielddaterange .error-description {
   line-height: var(--form-description-line-height);
   color: var(--components-form-text-description-error);
 }
+nv-fielddaterange .error-description[hidden] {
+  display: none;
+}
 nv-fielddaterange .range-inputs {
   display: flex;
   align-items: center;

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/NvFielddropdown',
     subcomponents: [
         'nv-fielddropdownitem',
         'nv-avatar',