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

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

@@ -192,7 +192,7 @@ export class NvMenu {
         this.triggerElement = this.el.querySelector('[slot="trigger"]');
     }
     render() {
-        return (h(Host, { key: '470d14ed698cc0064a24bf02e5fac3b32d64601a' }, h("slot", { key: '2dd81fbe5a23b5225fc464fe528ff08983959b7f', name: "trigger" }), h("nv-popover", { key: '68634d33954033dbd997c8a7f7ed711c6a17470b', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: 'b8154f4e215984b0dbb106b44dcad72eacb140e1' }, h("slot", { key: 'cddcea9afd3324d39168f3879cdbb0839f3e432a', name: "trigger" }), h("nv-popover", { key: '2e20e3b97279c27e16b0eef4eb2d327a1e22c3b3', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
     }
     static get is() { return "nv-menu"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,24 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvMenuitemDocs = {
     component: 'nv-menuitem',
-    skip: true,
+    parentGroup: 'Menu',
+    subcomponents: ['nv-menu', 'nv-iconbutton', 'nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-menu", { "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { "data-storybook-args": true, icon: "user", label: "Profile" }), h("nv-menuitem", { icon: "settings", label: "Settings" })))),
+        },
+        {
+            name: nameof(x => x.icon),
+            args: { icon: 'user' },
+            template: (h("nv-menu", { "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { "data-storybook-args": true, label: "With Icon" })))),
+        },
+        {
+            name: nameof(x => x.shortcut),
+            args: { shortcut: '⌘K' },
+            template: (h("nv-menu", { "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { "data-storybook-args": true, icon: "search", label: "Search" })))),
+        },
+    ],
 };
 export default NvMenuitemDocs;

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

@@ -43,7 +43,7 @@ export class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'aac708fbf246c1083c3c4666e97b421485dd44a6', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '3b37a8661321152859dbc4247b299e60e909fe34', name: this.icon }), h("slot", { key: 'e690d7574f8960c44bee2e3f20b1150b578a49da' }), this.label && h("span", { key: '32d487f8ec9c1d6a910734c825382899982a23a5', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'cefcda06f7cb217348e5027ee6a38f8731421d6e' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '1085e47ae40ac38f87fca10dfbecbf32db95bace', name: "chevron-right" })));
+        return (h(Host, { key: '0099a12f8103b381df6892e0cbebf8e25eebab5f', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '469a58bde78f58b0cb3684afe402ccc4a5c7c540', name: this.icon }), h("slot", { key: 'fd285713bcfb464ceed4bfc65cc7a13ce0733606' }), this.label && h("span", { key: '8a0539f81fa903ec8ed817c5bda8d9ffc76ef2db', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'ff2a00962610c05587d685d3c57ec8898d9ec993' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '3f85d0a3b1a5553b8893d3a15f3aef8cd23af8e8', name: "chevron-right" })));
     }
     static get is() { return "nv-menuitem"; }
     static get originalStyleUrls() {
@@ -82,7 +82,7 @@ export class NvMenuitem {
                 "mutable": false,
                 "complexType": {
                     "original": "`${IconName}`",
-                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"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-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\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
+                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"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",
@@ -95,7 +95,10 @@ export class NvMenuitem {
                 "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-notification/nv-notification.docs.js

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

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

@@ -158,7 +158,7 @@ export class NvNotification {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '3c5025f664fcfc1e68856c003cd31ff10b8efdd9', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: 'a26032a0b0ac9818b5da1f6e815a8c96f096ed46', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: 'f660bc8b5e5d8df073b69fb60d1ed0b11ec75c6f', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'dbeea84ab7f1c965eae3a8ae74b7afca98453705', name: "x", size: "sm" }))), h("nv-icon", { key: '0cbcee4f8667579b38ea205bdd747aabf6bdca8c', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: 'aed13fae98256180ff8d453c9f9d108eab429952', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'a2964d1c4dc744765ed916fe74d6cc167164eaf4', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '2eee0bd4a73fd92ea283ae6cd50af2d1edc01f0c', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '2f7e9b5429b9fa27bc4088b5d26955b8360695c1', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'f1b3dbe8722c8750231b4fb18fdc120ecfd04c54', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '56a881b3a53bb68a214f8db560805c726930b8d4', "data-scope": "actions" }, h("slot", { key: 'ece50671721f12e58dfd03df09545cb456d00a9c', name: "actions" })))))));
+        return (h(Host, { key: 'e3f03dd6b580e9f19ac6908fc7d417c148317538', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: '42d46d24c47909e381482aeb66e6aa5d2f1fcc92', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: 'dc47d41d40988dab9e63c6c5e794940826233400', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'f1f83c98845ed3df1a85c03c8262f15d2148131b', name: "x", size: "sm" }))), h("nv-icon", { key: 'adf0fe6170343387ce6316e17f0ef614f44130e1', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: '7e16202e3f42cf3abd47ac9e58812bd8de829fbd', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'f0e80aae320de33fe91e5fb4e573c6eacdaafa8c', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '54007f5cf01b74bb04bb2f48a0e482aa4c0522a5', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '249324e6ea951587ace619d6df0fff422e6eee40', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: '2ae08bc1526aaf12b26a2202d33b85f9cfa69f74', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '36e930834c39b0552d203630baffa593542ff631', "data-scope": "actions" }, h("slot", { key: '15c1fa42b17f907962c6b6396afe384ba5e1c98f', name: "actions" })))))));
     }
     static get is() { return "nv-notification"; }
     static get originalStyleUrls() {
@@ -289,14 +289,24 @@ export class NvNotification {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "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",
+                            "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": "Icon associated with the notification, defaults vary based on the feedback\ntype."
                 },
                 "getter": false,

package/dist/collection/components/nv-notification-bullet/nv-notification-bullet.docs.js

@@ -3,6 +3,7 @@ import { nameof } from "../../utils/class.utils";
 const NvNotificationBulletDocs = {
     component: 'nv-notification-bullet',
     badge: 'new',
+    parentGroup: 'Notification/nv-notification',
     stories: [
         // Default
         {

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

@@ -1,6 +1,29 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvNotificationcontainerDocs = {
     component: 'nv-notificationcontainer',
     badge: 'beta',
-    skip: true,
+    parentGroup: 'Notification/nv-notification',
+    subcomponents: ['nv-notification'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Container for managing notification placement (experimental beta feature)',
+            template: (h("nv-notificationcontainer", { "data-storybook-args": true }, h("nv-notification", { heading: "Notification 1", message: "This is the first notification.", feedback: "information", dismissible: true }), h("nv-notification", { heading: "Notification 2", message: "This is the second notification.", feedback: "success", dismissible: true }))),
+        },
+        // position
+        {
+            name: nameof(x => x.position),
+            description: 'Different positions for notification container',
+            template: (h("div", null, h("p", { "data-class": "mb-4" }, "Top Right (default):"), h("nv-notificationcontainer", { "data-storybook-args": true, position: "top-right" }, h("nv-notification", { heading: "Top Right", message: "Notification in top-right corner.", feedback: "information", dismissible: true })), h("p", { "data-class": "mb-4 mt-6" }, "Top Left:"), h("nv-notificationcontainer", { "data-storybook-args": true, position: "top-left" }, h("nv-notification", { heading: "Top Left", message: "Notification in top-left corner.", feedback: "success", dismissible: true })), h("p", { "data-class": "mb-4 mt-6" }, "Bottom Right:"), h("nv-notificationcontainer", { "data-storybook-args": true, position: "bottom-right" }, h("nv-notification", { heading: "Bottom Right", message: "Notification in bottom-right corner.", feedback: "warning", dismissible: true })), h("p", { "data-class": "mb-4 mt-6" }, "Bottom Left:"), h("nv-notificationcontainer", { "data-storybook-args": true, position: "bottom-left" }, h("nv-notification", { heading: "Bottom Left", message: "Notification in bottom-left corner.", feedback: "error", dismissible: true })))),
+        },
+        // MultipleNotifications
+        {
+            name: 'MultipleNotifications',
+            description: 'Container with multiple stacked notifications',
+            template: (h("nv-notificationcontainer", { position: "top-right" }, h("nv-notification", { heading: "First Notification", message: "This is the first notification in the stack.", feedback: "information", dismissible: true }), h("nv-notification", { heading: "Second Notification", message: "This is the second notification in the stack.", feedback: "success", dismissible: true }), h("nv-notification", { heading: "Third Notification", message: "This is the third notification in the stack.", feedback: "warning", dismissible: true }))),
+        },
+    ],
 };
 export default NvNotificationcontainerDocs;

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

@@ -1,7 +1,5 @@
 import { Host, h } from "@stencil/core";
 /**
- * @deprecated [EXPERIMENTAL]
- * @experimental - Container for notifications TODO: add animations etc...
  * @slot default - Child content of the component.
  */
 export class NvNotificationContainer {
@@ -15,21 +13,9 @@ export class NvNotificationContainer {
     }
     //#endregion PROPERTIES
     /****************************************************************************/
-    //#region METHODS
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region WATCHERS
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region EVENTS
-    //#endregion EVENTS
-    /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '97882d6391db2e1c9db884a84469db78136765e4', class: `position-${this.position}` }, h("slot", { key: '0a0c52f26006ebd186862634b7b5470c7410c976' })));
+        return (h(Host, { key: 'd2c471aaac0f76edade303331718d2b0f7c6bb39', class: `position-${this.position}` }, h("slot", { key: '48bbc563523bfb107bbbd2cc60561ccb87f9968c' })));
     }
     static get is() { return "nv-notificationcontainer"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-pagination-nav/nv-pagination-nav.js

@@ -104,7 +104,7 @@ export class NvPaginationNav {
     render() {
         const isFirstPage = this.currentPage === 1;
         const isLastPage = this.currentPage === this.totalPages;
-        return (h(Host, { key: '536c7d2fd28a365ae3d637f7e67512832ffce284' }, h("nav", { key: 'ad98b2592c2702e9592316e03a0b0119d9da601c', "data-scope": "pagination-nav", "aria-label": "Pagination navigation" }, this.isOnlyIcon ? (h("nv-iconbutton", { name: "chevron-left", size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-iconbutton", "aria-label": this.previousButtonLabel })) : (h("nv-button", { size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-button" }, h("nv-icon", { slot: "leading-icon", name: "chevron-left" }), this.previousButtonLabel)), h("ol", { key: 'd52f16484737c5ea06c8bd1512e367beb4cd35b1', "data-scope": "page-list" }, calculatePaginationRange({
+        return (h(Host, { key: 'b2255fce4e03cee8ff370086aac31df5c69d275d' }, h("nav", { key: 'a136b7193f9b00a68e6ee626802dee19fd762531', "data-scope": "pagination-nav", "aria-label": "Pagination navigation" }, this.isOnlyIcon ? (h("nv-iconbutton", { name: "chevron-left", size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-iconbutton", "aria-label": this.previousButtonLabel })) : (h("nv-button", { size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-button" }, h("nv-icon", { slot: "leading-icon", name: "chevron-left" }), this.previousButtonLabel)), h("ol", { key: '5bebe0e3f5c8f1799ed8980752fbed7aadbcac01', "data-scope": "page-list" }, calculatePaginationRange({
             currentPage: this.currentPage,
             totalCount: this.totalCount,
             pageSize: this.pageSize,

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvPaginationtableDocs = {
     component: 'nv-paginationtable',
+    parentGroup: 'Table',
     subcomponents: ['nv-iconbutton', 'nv-fieldselect'],
     badge: 'beta',
     stories: [

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

@@ -143,7 +143,7 @@ export class NvPaginationtable {
         const pageLabel = interpolate(this.labelPage, { pageIndex: this.pageIndex + 1, pageCount: this.pageCount }, 'Page {pageIndex} of {pageCount}');
         const totalLabel = interpolate(this.labelTotal, { rowCount: this.rowCount }, 'Total: {rowCount} rows');
         const pageSizeOptions = generatePageSizeOptions(this.labelPageSizeOption ?? '{pageSize} per page');
-        return (h(Host, { key: 'c4410c8e459e488c7e6dfab19baa0dace783bed7' }, !this.hideControls && (h("div", { key: 'd17f9712b070ce79ab367406ef58e251f9fd8ef1', "data-scope": "controls" }, !this.hideFirstLast && (h("nv-iconbutton", { key: '8326bd2a9bffaddfa5ab0f1bf385ef2d435d1304', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: 'e05379b57d34060934946098fdc1790afc7060f5', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: '9be2a29cc9bdca82b5214ce9f3802a4c397702f8', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (h("nv-iconbutton", { key: '39e9bac5ebc85c1956295a4213777fd769cab5c9', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), h("span", { key: 'bef5172038e7bec7a56ffe2d75697641227c5bbc', "data-scope": "page-label" }, pageLabel), h("span", { key: '4711e8fa8ae6814a6b90cef6906f58475ab48317', "data-scope": "total" }, totalLabel), h("div", { key: '46244978c8c8be83195a0a96b8fd9879b3d087fa', "data-scope": "per-page" }, h("nv-fieldselect", { key: '8c194d51d13839825f34f2b004468472ba652064', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), h("slot", { key: 'ff066bce5da6b738f2d7954fb4ae393824f69f34' })));
+        return (h(Host, { key: '0556d5f0dc69faa503b504ec87c47819f92d565d' }, !this.hideControls && (h("div", { key: 'b097a2bda8c09b88db038c1039133a7ec2571247', "data-scope": "controls" }, !this.hideFirstLast && (h("nv-iconbutton", { key: '29841590c99ee7534d1d41933c4eb155a9b9a9db', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: '9d075e5ea8ee0f1b77de4da5072862d076579778', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: '712ebb3f14e02945b20d57b85a891550a1e09e95', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (h("nv-iconbutton", { key: '1982d2de200284b3bc70dd51bea9c452b2791038', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), h("span", { key: '8c2f7473c47f4fcb9a8373c8b7030a7f56e8b682', "data-scope": "page-label" }, pageLabel), h("span", { key: '527cd649cf4e8ba1d62451d6910401076d555b86', "data-scope": "total" }, totalLabel), h("div", { key: '2bf99bd31d9d46059fc6ab52f6e20878ce2dea64', "data-scope": "per-page" }, h("nv-fieldselect", { key: '4f55796d8cccdf9f50792eb3ff3d448cdae8de07', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), h("slot", { key: '9b1dc7edf5dd4ed4be02705a11a3c04f5bcc81bd' })));
     }
     static get is() { return "nv-paginationtable"; }
     static get originalStyleUrls() {

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

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

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

@@ -311,7 +311,7 @@ export class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'f45908c500d83bbc4cc2e2bfa71d08297bb353e0' }, h("slot", { key: 'b0d692a8f25dca9d400b4ebac81bbcff895abe58', name: "trigger" }), h("div", { key: '500fdf54d35104a48936b1c31643c04ca92be8b5', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '9d3e96672c6e904ded03bb6338f5e70a18f8bf0c', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'ce8436ba395b75b42facc362503d272b8852308a', name: "content" }))));
+        return (h(Host, { key: '8f9429a26146be5feff838bff9861c8016bcae72' }, h("slot", { key: '507917d729f202d0ec29e2011b0aae958a4474b5', name: "trigger" }), h("div", { key: 'cc85ae4610b0554b2cddd2fb62a8e8df5b8de21f', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'e53a79dc2a4d439271d55391ad087c0db8abaf19', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'ef72627c588727dff2f558133d46e1689a89fc24', name: "content" }))));
     }
     static get is() { return "nv-popover"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,9 @@
 import { h } from "@stencil/core";
 const NvRowDocs = {
     component: 'nv-row',
+    parentGroup: 'Grid/Row',
     subcomponents: ['nv-col'],
+    badge: 'deprecated',
     stories: [
         // Default
         {

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

@@ -1,12 +1,13 @@
 import { Host, h } from "@stencil/core";
 /**
  * @slot default - The row content.
+ * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
  */
 export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '07ad630aa3951fe325d4c767bec1d1008b8efa65' }, h("slot", { key: '50fafeac8db8bd0a34ad61196aa259dab2528b18' })));
+        return (h(Host, { key: '18964229751804689bc422177dcd5649ef9af68f' }, h("slot", { key: 'd2d331afe7dbcf2caded4dc6131512520472b716' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {

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

@@ -3,6 +3,7 @@ import { nameof } from "../../utils/class.utils";
 const NvSidebarDocs = {
     component: 'nv-sidebar',
     badge: 'beta',
+    parentGroup: 'Sidebar',
     subcomponents: [
         'nv-sidebarlogo',
         'nv-sidebarheader',

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

@@ -156,7 +156,7 @@ export class NvSidebar {
     //#region RENDER
     render() {
         const isCollapsed = this.type === 'collapsible' && !this.open;
-        return (h(Host, { key: '51a4f51b720a97eb58cad32cb2c92c3afe5e7a04', role: "navigation", collapsed: isCollapsed ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, h("div", { key: '30f2aa66cbdfc7bdc8c5d494dfe41debee565fac', class: "nv-sidebar-container" }, h("slot", { key: '519d25d1d5d8c4a5820f5b6c7655430004be542a' })), this.type === 'collapsible' && (h("button", { key: '70abdc10fed5b87dba34e7ff8cacfa44c00044b0', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: 'ad693d6d1f95f41eb86d0f4cdf1ff04190cd5288', name: this.open
+        return (h(Host, { key: '7c77dc107335664b3844b38579f53c8805de09ca', role: "navigation", collapsed: isCollapsed ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, h("div", { key: '00e9958d45d311168ab3024eda4d0a45813a8152', class: "nv-sidebar-container" }, h("slot", { key: '047f6bda1730f65c403f6aefe52b7c06192001c3' })), this.type === 'collapsible' && (h("button", { key: '51174b4f74614dc1eb1bfc78aacc542d8c938a02', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: '75fc4ce9ac319be982534d502d5c019ff7d8ebdf', name: this.open
                 ? 'layout-sidebar-left-collapse'
                 : 'layout-sidebar-right-collapse', size: "sm" })))));
     }

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

@@ -1,5 +1,18 @@
+import { h } from "@stencil/core";
 const NvSidebarcontentDocs = {
     component: 'nv-sidebarcontent',
-    skip: true,
+    parentGroup: 'Sidebar',
+    subcomponents: [
+        'nv-sidebar',
+        'nv-sidebarlogo',
+        'nv-sidebargroup',
+        'nv-sidebarnavitem',
+    ],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-sidebar", null, h("nv-sidebarlogo", { label: "Nova" }), h("nv-sidebarcontent", { "data-storybook-args": true }, h("nv-sidebargroup", { label: "Navigation" }, h("nv-sidebarnavitem", { icon: "home" }, h("a", { href: "#" }, "Dashboard")))))),
+        },
+    ],
 };
 export default NvSidebarcontentDocs;

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

@@ -7,7 +7,7 @@ export class NvSidebarcontent {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'ad8dd37a6bce098af0ce3350c1a3035f62241d19', role: "list" }, h("slot", { key: 'c9cf80529ea060e8345929cacad2313fbb3daa17' })));
+        return (h(Host, { key: '1892ab4b2c7698bb6c0e2baae242650f3a967947', role: "list" }, h("slot", { key: 'a971f991f52e65f4bd83dafeee2cbdf7c4b6de51' })));
     }
     static get is() { return "nv-sidebarcontent"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,19 @@
+import { h } from "@stencil/core";
 const NvSidebardividerDocs = {
     component: 'nv-sidebardivider',
-    skip: true,
+    parentGroup: 'Sidebar',
+    subcomponents: [
+        'nv-sidebar',
+        'nv-sidebarlogo',
+        'nv-sidebarcontent',
+        'nv-sidebargroup',
+        'nv-sidebarnavitem',
+    ],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-sidebar", null, h("nv-sidebarlogo", { label: "Nova" }), h("nv-sidebarcontent", null, h("nv-sidebargroup", { label: "Main" }, h("nv-sidebarnavitem", { icon: "home" }, h("a", { href: "#" }, "Dashboard"))), h("nv-sidebardivider", { "data-storybook-args": true }), h("nv-sidebargroup", { label: "Settings" }, h("nv-sidebarnavitem", { icon: "settings" }, h("a", { href: "#" }, "Settings")))))),
+        },
+    ],
 };
 export default NvSidebardividerDocs;

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

@@ -6,7 +6,7 @@ export class NvSidebardivider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return h(Host, { key: '8fd03ba4a4d6a6bb876a0f0eea367fe5f70e4a6d', role: "separator", "aria-orientation": "horizontal" });
+        return h(Host, { key: 'f8b607a8376e9e27d33ff13da96765bf46231cc0', role: "separator", "aria-orientation": "horizontal" });
     }
     static get is() { return "nv-sidebardivider"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvSidebarfooterDocs = {
     component: 'nv-sidebarfooter',
-    skip: true,
+    parentGroup: 'Sidebar',
+    subcomponents: ['nv-sidebar', 'nv-sidebarlogo', 'nv-sidebarcontent'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-sidebar", null, h("nv-sidebarlogo", { label: "Nova" }), h("nv-sidebarcontent", null), h("nv-sidebarfooter", { "data-storybook-args": true }, h("p", null, "Footer Content")))),
+        },
+    ],
 };
 export default NvSidebarfooterDocs;

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

@@ -8,7 +8,7 @@ export class NvSidebarfooter {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '073019b05fc2bd13af8db145b4d7bcb8d7b20d34' }, h("slot", { key: '41905c616f7e74dcd9c578a68693b4e95cd4ccd7' })));
+        return (h(Host, { key: '4ef8bb09df1cca9008062f4dc8f0252472da6a66' }, h("slot", { key: 'b30037ecc79272287a5ad134b1b17ce9516d14c7' })));
     }
     static get is() { return "nv-sidebarfooter"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,19 @@
+import { h } from "@stencil/core";
 const NvSidebargroupDocs = {
     component: 'nv-sidebargroup',
-    skip: true,
+    parentGroup: 'Sidebar',
+    subcomponents: [
+        'nv-sidebar',
+        'nv-sidebarlogo',
+        'nv-sidebarcontent',
+        'nv-sidebarnavitem',
+    ],
+    stories: [
+        {
+            name: 'Default',
+            args: { label: 'Navigation' },
+            template: (h("nv-sidebar", null, h("nv-sidebarlogo", { label: "Nova" }), h("nv-sidebarcontent", null, h("nv-sidebargroup", { "data-storybook-args": true }, h("nv-sidebarnavitem", { icon: "home" }, h("a", { href: "#" }, "Dashboard")), h("nv-sidebarnavitem", { icon: "user" }, h("a", { href: "#" }, "Profile")))))),
+        },
+    ],
 };
 export default NvSidebargroupDocs;

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

@@ -8,7 +8,7 @@ export class NvSidebargroup {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e599aa76d560f3e30b6a45b75500372bea3b6be0', role: "group", "aria-label": this.label }, this.label && h("div", { key: 'c918bdde6cb461dad11977a29f6e5385505bbbcb', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '7980eeada701c3b87be062e9728bacc0f9fc502c' })));
+        return (h(Host, { key: 'e23656515b0882eaeed7a9a3b5c772deab41cd9c', role: "group", "aria-label": this.label }, this.label && h("div", { key: '41600406fb5fd8f3845464260ccbcb3845d52b37', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '14303ef78c5da82c9a6d94d09a1e9341ade5bee4' })));
     }
     static get is() { return "nv-sidebargroup"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,13 @@
+import { h } from "@stencil/core";
 const NvSidebarheaderDocs = {
     component: 'nv-sidebarheader',
-    skip: true,
+    parentGroup: 'Sidebar',
+    subcomponents: ['nv-sidebar', 'nv-sidebarlogo', 'nv-sidebarcontent'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-sidebar", null, h("nv-sidebarlogo", { label: "Nova" }), h("nv-sidebarheader", { "data-storybook-args": true }, h("p", null, "Header Content")), h("nv-sidebarcontent", null))),
+        },
+    ],
 };
 export default NvSidebarheaderDocs;

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

@@ -8,7 +8,7 @@ export class NvSidebarheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8aff0fd7b73d0762cd8861f8d9043f494104ddfd' }, h("slot", { key: 'f9d643f352a36bf7397d5c2d81be4620641dead4' })));
+        return (h(Host, { key: '5e0b6bdc78618f3e434b62b6f6e4d60c220895ce' }, h("slot", { key: 'ae0f11bea6f4f9bbe5376d0870453648dc4acc77' })));
     }
     static get is() { return "nv-sidebarheader"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,14 @@
+import { h } from "@stencil/core";
 const NvSidebarlogoDocs = {
     component: 'nv-sidebarlogo',
-    skip: true,
+    parentGroup: 'Sidebar',
+    subcomponents: ['nv-sidebar', 'nv-sidebarcontent'],
+    stories: [
+        {
+            name: 'Default',
+            args: { label: 'Nova' },
+            template: (h("nv-sidebar", null, h("nv-sidebarlogo", { "data-storybook-args": true }), h("nv-sidebarcontent", null))),
+        },
+    ],
 };
 export default NvSidebarlogoDocs;

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

@@ -21,7 +21,7 @@ export class NvSidebarlogo {
     render() {
         const logoSrc = this.logo || this.defaultLogo;
         const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
-        return (h(Host, { key: 'f4e0fe830c5fa5ef90d279c19336bd51e2e7e586' }, h("div", { key: '85d9516e1b140aa9a7bf16ca0722f35081702d19', class: "nv-sidebarlogo-container" }, h("img", { key: '82c1e3e9e47cd570a4f9aa64d120a5239c9e487c', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: '113d60ca21ec36c9f8106276f8d7abb85753c1a9', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), h("slot", { key: '6c164d8f46d994980a4061e0a5df41fef11929b6', name: "label" }), this.label && h("span", { key: '12a5bb8deff9b73dc4c41c27aa1e5839beb46f32', class: "nv-sidebarlogo-title" }, this.label))));
+        return (h(Host, { key: '4a4ce90770480c97bbe8d940cf30f75b838de6c4' }, h("div", { key: '0ff88ef0a319410b0162f79738c13b3eb304fccb', class: "nv-sidebarlogo-container" }, h("img", { key: '6e94515fac21420295752374392e24de5079f013', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: '88f326b233a44c0e4bbc1efbeabfa619f27366a2', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), h("slot", { key: 'bb09f8c0b8df53e8e3a47cc70235ca1599420ec1', name: "label" }), this.label && h("span", { key: 'b711afc9977d86decc2f475b457e8a8d6ed507f0', class: "nv-sidebarlogo-title" }, this.label))));
     }
     static get is() { return "nv-sidebarlogo"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,20 @@
+import { h } from "@stencil/core";
 const NvSidebarnavitemDocs = {
     component: 'nv-sidebarnavitem',
-    skip: true,
+    parentGroup: 'Sidebar',
+    subcomponents: [
+        'nv-sidebar',
+        'nv-sidebarlogo',
+        'nv-sidebarcontent',
+        'nv-sidebargroup',
+        'nv-icon',
+    ],
+    stories: [
+        {
+            name: 'Default',
+            args: { icon: 'home' },
+            template: (h("nv-sidebar", null, h("nv-sidebarlogo", { label: "Nova" }), h("nv-sidebarcontent", null, h("nv-sidebargroup", { label: "Navigation" }, h("nv-sidebarnavitem", { "data-storybook-args": true }, h("a", { href: "#" }, "Dashboard")))))),
+        },
+    ],
 };
 export default NvSidebarnavitemDocs;