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

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

@@ -0,0 +1,70 @@
+/**
+ * Generates a pagination range with page numbers and ellipsis items.
+ * @param {PaginationRangeConfig} config Pagination configuration.
+ * @returns {PaginationRangeItem[]} Ordered range items.
+ */
+export function calculatePaginationRange({ currentPage, totalCount, pageSize, numStartZoneButtons, numEndZoneButtons, numMiddleButtons, showMiddleZone, }) {
+    const totalPageCount = Math.ceil(totalCount / pageSize);
+    const paginationRange = [];
+    const totalVisibleButtons = numStartZoneButtons + numEndZoneButtons;
+    if (totalPageCount <= totalVisibleButtons) {
+        for (let i = 1; i <= totalPageCount; i++) {
+            paginationRange.push(i);
+        }
+        return paginationRange;
+    }
+    const startZoneEnd = numStartZoneButtons;
+    const endZoneStart = totalPageCount - numEndZoneButtons + 1;
+    if (!showMiddleZone) {
+        const isInNaturalStartZone = currentPage <= numStartZoneButtons;
+        const isInNaturalEndZone = currentPage >= totalPageCount - numEndZoneButtons + 1;
+        if (!isInNaturalStartZone && !isInNaturalEndZone) {
+            const middlePoint = Math.floor(totalPageCount / 2);
+            if (currentPage <= middlePoint) {
+                const startIndex = currentPage - numStartZoneButtons + 1;
+                for (let i = startIndex; i <= currentPage; i++) {
+                    paginationRange.push(i);
+                }
+                paginationRange.push('...');
+                for (let i = endZoneStart; i <= totalPageCount; i++) {
+                    paginationRange.push(i);
+                }
+                return paginationRange;
+            }
+            for (let i = 1; i <= numStartZoneButtons; i++) {
+                paginationRange.push(i);
+            }
+            paginationRange.push('...');
+            const endIndex = Math.min(currentPage + numEndZoneButtons - 1, totalPageCount);
+            for (let i = currentPage; i <= endIndex; i++) {
+                paginationRange.push(i);
+            }
+            return paginationRange;
+        }
+    }
+    const isInStartZone = currentPage <= startZoneEnd;
+    const isInEndZone = currentPage >= endZoneStart;
+    for (let i = 1; i <= startZoneEnd; i++) {
+        paginationRange.push(i);
+    }
+    if (showMiddleZone &&
+        !isInStartZone &&
+        !isInEndZone &&
+        endZoneStart > startZoneEnd + 1) {
+        paginationRange.push('...');
+        const halfMiddle = Math.floor(numMiddleButtons / 2);
+        const middleStart = Math.max(startZoneEnd + 1, currentPage - halfMiddle);
+        const middleEnd = Math.min(endZoneStart - 1, currentPage + halfMiddle);
+        for (let i = middleStart; i <= middleEnd; i++) {
+            paginationRange.push(i);
+        }
+        paginationRange.push('...');
+    }
+    else if (endZoneStart > startZoneEnd + 1) {
+        paginationRange.push('...');
+    }
+    for (let i = endZoneStart; i <= totalPageCount; i++) {
+        paginationRange.push(i);
+    }
+    return paginationRange;
+}

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

@@ -0,0 +1,66 @@
+import { describe, it, expect } from "vitest";
+import { calculatePaginationRange } from "../nv-pagination-nav.utils";
+describe('nv-pagination-nav -> utils', () => {
+    describe('calculatePaginationRange', () => {
+        const baseConfig = {
+            pageSize: 10,
+            numStartZoneButtons: 2,
+            numEndZoneButtons: 2,
+            numMiddleButtons: 3,
+        };
+        it('returns all pages when total pages are less than or equal to visible buttons', () => {
+            const range = calculatePaginationRange({
+                ...baseConfig,
+                currentPage: 2,
+                totalCount: 40,
+                showMiddleZone: false,
+            });
+            expect(range).toEqual([1, 2, 3, 4]);
+        });
+        it('returns one ellipsis when current page is in natural start zone', () => {
+            const range = calculatePaginationRange({
+                ...baseConfig,
+                currentPage: 1,
+                totalCount: 100,
+                showMiddleZone: false,
+            });
+            expect(range).toEqual([1, 2, '...', 9, 10]);
+        });
+        it('slides start zone to include current page in first half when middle zone is disabled', () => {
+            const range = calculatePaginationRange({
+                ...baseConfig,
+                currentPage: 5,
+                totalCount: 200,
+                showMiddleZone: false,
+            });
+            expect(range).toEqual([4, 5, '...', 19, 20]);
+        });
+        it('slides end zone to include current page in second half when middle zone is disabled', () => {
+            const range = calculatePaginationRange({
+                ...baseConfig,
+                currentPage: 15,
+                totalCount: 200,
+                showMiddleZone: false,
+            });
+            expect(range).toEqual([1, 2, '...', 15, 16]);
+        });
+        it('shows middle zone with two ellipses when enabled', () => {
+            const range = calculatePaginationRange({
+                ...baseConfig,
+                currentPage: 10,
+                totalCount: 200,
+                showMiddleZone: true,
+            });
+            expect(range).toEqual([1, 2, '...', 9, 10, 11, '...', 19, 20]);
+        });
+        it('keeps one ellipsis when middle zone is enabled but current page is in end zone', () => {
+            const range = calculatePaginationRange({
+                ...baseConfig,
+                currentPage: 20,
+                totalCount: 200,
+                showMiddleZone: true,
+            });
+            expect(range).toEqual([1, 2, '...', 19, 20]);
+        });
+    });
+});

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: '1ca51049fc16cc949fe38c80ceabc7a72f189279' }, !this.hideControls && (h("div", { key: '6962c8ee324aa42f5eb5defceb48cbb6b5a6ed0a', "data-scope": "controls" }, !this.hideFirstLast && (h("nv-iconbutton", { key: 'faa193b020c69f274fd7024a9fbc736661500152', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: 'dfa8731f6389768a659207bac3752b9ac674c9e8', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: 'a546e95f9921f4b6b0848ce1eaee929ac223949a', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (h("nv-iconbutton", { key: 'f59fac8c7ee04c37779089aa8de8980d5ca51d04', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), h("span", { key: '32079d8ea98a2918eee76c0176515eba13ac24a0', "data-scope": "page-label" }, pageLabel), h("span", { key: '21c38d9e335ce7c9d952f5ef8201d51f1d486b76', "data-scope": "total" }, totalLabel), h("div", { key: 'e981f5e869c08bdd52639b35ac6bec3deec8577c', "data-scope": "per-page" }, h("nv-fieldselect", { key: 'ac22a50b68b7a75f0560d19641c159a5d771bceb', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), h("slot", { key: '784a6edbfbf83b76ef7e49e881591ba16e9da064' })));
+        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: '8d6cfba040e2e29705a6e9fd3c1044c9e0b668b1' }, h("slot", { key: '1ea59e4037bf56ced06ad652c9c55bbc56556fd5', name: "trigger" }), h("div", { key: '7023f506e410e44a85c4683ebccfe10fdaf45c10', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'b336819de26b0ae8899dbd378272a6a5a30517d6', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'fd9aad00f57cb5bab850983f2b28ea80b4cdd7fb', 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,6 +1,7 @@
 import { h } from "@stencil/core";
 const NvRowDocs = {
     component: 'nv-row',
+    parentGroup: 'Grid/Row',
     subcomponents: ['nv-col'],
     stories: [
         // Default

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

@@ -6,7 +6,7 @@ export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '507041a8331236632f2dc12e94ca7c87465e8312' }, h("slot", { key: '3bef8f23cdc72e42467dc0407b9d2693f15638d7' })));
+        return (h(Host, { key: 'fa7853dd84c1d35ff72147a7b622f62fe89ee29b' }, h("slot", { key: '48edd35ada0b2df00b61a2522ac8ff33063b7831' })));
     }
     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: 'a22074a54f9d51c5a60dd698573a95862e9df0a8', 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: 'f19453d0dbbad812f27f188ef198b895d37e8ad2', class: "nv-sidebar-container" }, h("slot", { key: '7194ae2a2a655716f3f1db89d9c38dc4b0ab9df0' })), this.type === 'collapsible' && (h("button", { key: '4f7a1805932f6e1783fbcf63dc54d3260464eab0', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: '76d84d1c07d3f841808950c6805aa7bcaa63cf85', 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: 'e88e1557fbfa8ec74391dc11b6073eecb4d97685', role: "list" }, h("slot", { key: 'ccaf985cc498a5729600316135d750190a514582' })));
+        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: 'e2288aab359dff9087f7758e53a476e4715b0742', 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: 'ac36a47c2f96070779b7b05134303604e3ef7676' }, h("slot", { key: '295d26a47fa386deade3799a02686afe6ef42ce0' })));
+        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: 'efeaa9f861a41ad96b5f1878510bb1bbbd4a5404', role: "group", "aria-label": this.label }, this.label && h("div", { key: '75816b463eeb0cf7687f2b0bca271db560cfafa6', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '614116b7997561766949124e56f3cb66addd419b' })));
+        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: '8dd986cfb2cd89557955c6eb61ebfbad0eb1dbcc' }, h("slot", { key: 'ee7808c81f750f5c46da9ed0bfd3b9fcb18d393d' })));
+        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

@@ -2,6 +2,8 @@ import { Host, h } from "@stencil/core";
 /**
  * Displays the logo and title at the top of the sidebar.
  * Automatically switches between full and collapsed logos based on the sidebar state.
+ *
+ * @slot label - The label/name to display next to the logo. Make sure to add the class nv-sidebarlogo-title to the slot.
  */
 export class NvSidebarlogo {
     constructor() {
@@ -19,7 +21,7 @@ export class NvSidebarlogo {
     render() {
         const logoSrc = this.logo || this.defaultLogo;
         const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
-        return (h(Host, { key: '6a1df67b6c23e0c2b4cd4da481dcd7a708062963' }, h("div", { key: 'e974e75054b93aac6d417a5fa1c527ca75b0f417', class: "nv-sidebarlogo-container" }, h("img", { key: '51bb65b380cc18252a3ea6c16741485a61f0cf12', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: '0cee540a20ffb605ea2efa38c5b5942505ada7db', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), this.label && h("span", { key: '10ffc4e62a39c5ecfffd9f115c5929057901222a', 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;

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

@@ -54,9 +54,16 @@ export class NvSidebarnavitem {
                 event.preventDefault();
                 event.stopPropagation();
                 this.open = !this.open;
+                return;
+            }
+            // For non-collapsible items in expanded mode, if the click didn't originate
+            // from the link itself (e.g. clicked the icon or padding), trigger the link.
+            if (!target.closest('a')) {
+                const link = this.el.querySelector('.nv-sidebarnavitem-content a, :scope > a');
+                if (link) {
+                    link.click();
+                }
             }
-            // For non-collapsible items in expanded mode, let the link handle the navigation
-            // Don't prevent default or stop propagation - allow the link to work normally
         };
         this.isAnimating = false;
         this.hasInitializedHeight = false;
@@ -268,7 +275,7 @@ export class NvSidebarnavitem {
     render() {
         const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
         const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
-        return (h(Host, { key: '0809fb5e4f1663571199bd75e3f2d69d09eabc2f', role: "listitem" }, h("div", { key: '6885fbc8e01fd60f32d56a8b750398a772ee1169', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (h("div", { key: '515ea7bb25f83fb3a645531ade9370357b1a3cc3', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: '718f35787fcd979dd305bcf985a51a9bf7f21a8b', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: 'c99767c829bf878d30345933d1bdf9f7c79fc778', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: 'd2cfe856fb91a7d15232ff30c73a6709b6adffbf', class: "nv-sidebarnavitem-content" }, h("slot", { key: 'dbcc77aaf798efdca11714c0a6c9109c112ea314' })), h("div", { key: 'bf0136c15af7ac1c4bb98c9415ef0a37760cf4e1', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: 'b84329d00c08ba2e7dc1a783b65d309fbf45a4da', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '8a5b9447b80a59c38f006d86fe0d6bd655e02735', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: '47348e1ad810f7abd022dc510bfd11caeb8d8c71', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: 'ba5160e5ea9cac822afdf9ed75f3e00807615304', class: "nv-sidebarnavitem-subitems", ref: el => {
+        return (h(Host, { key: '9fe0814616178746b91e3fd1ed085b69a24c5a59', role: "listitem" }, h("div", { key: 'ab54bdb0b6ef411626cc7c12656f6dced81f4140', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (h("div", { key: '11c80c2443e30989b15b3439281794ef822b8a1a', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: '2254b2be9015f66e42f8bf3c7b81d26469d230aa', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: 'bbf6f175b464a195886d8df1bde3f87fbaa56931', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: 'a9b148ef62b4a58cb17ef63ab89dd1772ec10334', class: "nv-sidebarnavitem-content" }, h("slot", { key: 'ad8cc1679a186eedfe2d04100b5312cca5eab311' })), h("div", { key: '0716bcb01d00275d03d3780163d1c404a37bb0d4', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: 'c714d7e45b82dbd964d522402a62afc4ca65852d', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: 'd854b2a57aaf1975bf01e5c7688d690ebf0d0b81', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: '3bafbebf228375155a6dc010982211cdda6ad455', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: '710a6a6c3437dc74bd1f380cc5428e23f3fa7967', class: "nv-sidebarnavitem-subitems", ref: el => {
                 // Only update ref and initialize if element changed or not yet initialized
                 if (el !== this.subitemsRef) {
                     this.subitemsRef = el;
@@ -283,7 +290,7 @@ export class NvSidebarnavitem {
                         });
                     }
                 }
-            } }, h("slot", { key: '4cd023b2af51cf8941d29cb2728cdd1c6b2ea8ed', name: "subitems" })))));
+            } }, h("slot", { key: '0fbabb90cc3df4b7cea085eb108dfd7898929a8a', name: "subitems" })))));
     }
     static get is() { return "nv-sidebarnavitem"; }
     static get originalStyleUrls() {
@@ -303,7 +310,7 @@ export class NvSidebarnavitem {
                 "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",

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

@@ -1,5 +1,19 @@
+import { h } from "@stencil/core";
 const NvSidebarnavsubitemDocs = {
     component: 'nv-sidebarnavsubitem',
-    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: "Navigation" }, h("nv-sidebarnavitem", { icon: "folder", collapsible: true }, h("span", null, "Reports"), h("nv-sidebarnavsubitem", { "data-storybook-args": true }, h("a", { href: "#" }, "Monthly Reports")), h("nv-sidebarnavsubitem", null, h("a", { href: "#" }, "Annual Reports"))))))),
+        },
+    ],
 };
 export default NvSidebarnavsubitemDocs;

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

@@ -23,7 +23,7 @@ export class NvSidebarnavsubitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e5b353c32937bbf45c455593693b58d7177879f9', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: 'ebe7894659ae59538adc96043621b37a3145ef1a', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: '2054d9f16623e2611652274f4872b6bcdc78c44c', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: 'fa1db84fbb2fcbc3cd6729146b6962445bbba2be' })), h("div", { key: 'd3399e26472f48809c2b4fd824402827330b9b11', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: '5ee8b8b8198854ed658272032855e3cf18f21a25', name: "trailing" }))));
+        return (h(Host, { key: '05f74ef3cf6f93804e4446fe23977d8773deb7e2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: 'f1f2db51fbff9c2f58ba317cb5fcbe1805cd189b', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: 'c476dfbda77ee7bcca1338ef8d8b103806e6e3a7', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: 'b80cb20a4f13b691cbd31c344d442f8a23585a26' })), h("div", { key: '383dc01158c4752506a6069be9abe2e20b83b9e4', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: '2c63f696dd64ef8f680f3b85959d756952fd8db4', name: "trailing" }))));
     }
     static get is() { return "nv-sidebarnavsubitem"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvSplitDocs = {
     component: 'nv-split',
+    parentGroup: 'Split',
     subcomponents: ['nv-alert'],
     badge: 'beta',
     stories: [

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

@@ -321,7 +321,7 @@ export class NvSplit {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'ab2b75b963d3cee109e90fe22e0dfe356a384706', "data-dragging": this.isDragging.toString() }, h("slot", { key: 'a7a8258a976029f91ffbce3fa1f90f7ed35409ef', name: "pane" }), h("slot", { key: '9af34cb299ff061bec6ba7dfe6e969e093aeb3bc', name: "gutter" })));
+        return (h(Host, { key: '8ad8bebda77f9868b9715280c0157f247057026d', "data-dragging": this.isDragging.toString() }, h("slot", { key: '8ca002feab0c3cd7755a5f1f53864e4e20585420', name: "pane" }), h("slot", { key: 'f7f7352ed8c326ec263f6d617bcd84fea02689ea', name: "gutter" })));
     }
     static get is() { return "nv-split"; }
     static get originalStyleUrls() {

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

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