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

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

@@ -0,0 +1,359 @@
+import { Host, h, } from "@stencil/core";
+import { calculatePaginationRange } from "./nv-pagination-nav.utils";
+/**
+ * A pagination navigation component that displays page numbers with Previous/Next controls.
+ * Use the isOnlyIcon prop to display Previous/Next as icon buttons for compact layouts.
+ */
+export class NvPaginationNav {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Label for the previous button.
+         */
+        this.previousButtonLabel = 'Previous';
+        /**
+         * Label for the next button.
+         */
+        this.nextButtonLabel = 'Next';
+        /**
+         * Number of page buttons to show at the start of the pagination range.
+         */
+        this.numStartZoneButtons = 2;
+        /**
+         * Number of page buttons to show at the end of the pagination range.
+         */
+        this.numEndZoneButtons = 2;
+        /**
+         * Number of page buttons to show in the middle zone around the current page.
+         */
+        this.numMiddleButtons = 1;
+        /**
+         * Current page number (1-based index).
+         */
+        this.currentPage = 1;
+        /**
+         * Total number of items to paginate.
+         */
+        this.totalCount = 100;
+        /**
+         * Number of items per page.
+         */
+        this.pageSize = 10;
+        /**
+         * If true, the Previous/Next navigation buttons will be displayed as icon buttons.
+         * Page number buttons always use regular buttons.
+         */
+        this.isOnlyIcon = false;
+        /**
+         * If true, shows the middle zone with the current page when it's not in start/end zones.
+         * If false (default), only shows one ellipsis between start and end zones (simpler pagination).
+         */
+        this.showMiddleZone = false;
+        /**
+         * Handles page change events.
+         * @param {number} pageNumber The page number to navigate to.
+         */
+        this.handlePageChange = (pageNumber) => {
+            if (pageNumber < 1 ||
+                pageNumber > this.totalPages ||
+                pageNumber === this.currentPage) {
+                return;
+            }
+            this.currentPage = pageNumber;
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Calculates the total number of pages based on totalCount and pageSize.
+     * @returns {number} The total number of pages.
+     */
+    get totalPages() {
+        return Math.ceil(this.totalCount / this.pageSize);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to currentPage and emits the currentPageChanged event.
+     * @param {number} newValue The new current page value.
+     */
+    onCurrentPageChange(newValue) {
+        // Validate and constrain currentPage
+        const constrainedValue = Math.max(1, Math.min(newValue, this.totalPages));
+        if (constrainedValue !== newValue) {
+            this.currentPage = constrainedValue;
+            return;
+        }
+        this.currentPageChanged.emit(newValue);
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    /**
+     * Renders a single page button.
+     * @param {number} pageNumber The page number to render.
+     * @returns {JSX.Element} The rendered page button element.
+     */
+    renderPageButton(pageNumber) {
+        const isCurrentPage = pageNumber === this.currentPage;
+        return (h("li", { key: pageNumber, "data-scope": "page-button" }, h("nv-button", { size: "md", emphasis: "lower", active: isCurrentPage, onClick: () => this.handlePageChange(pageNumber), "data-page": pageNumber, "data-current": isCurrentPage ? 'true' : undefined }, pageNumber)));
+    }
+    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({
+            currentPage: this.currentPage,
+            totalCount: this.totalCount,
+            pageSize: this.pageSize,
+            numStartZoneButtons: this.numStartZoneButtons,
+            numEndZoneButtons: this.numEndZoneButtons,
+            numMiddleButtons: this.numMiddleButtons,
+            showMiddleZone: this.showMiddleZone,
+        }).map(item => typeof item === 'number' ? (this.renderPageButton(item)) : (h("li", { key: `ellipsis-${item}`, "data-scope": "ellipsis", "aria-hidden": "true" }, h("span", null, item))))), this.isOnlyIcon ? (h("nv-iconbutton", { name: "chevron-right", size: "md", emphasis: "lower", disabled: isLastPage, onClick: () => this.handlePageChange(this.currentPage + 1), "data-scope": "next-iconbutton", "aria-label": this.nextButtonLabel })) : (h("nv-button", { size: "md", emphasis: "lower", disabled: isLastPage, onClick: () => this.handlePageChange(this.currentPage + 1), "data-scope": "next-button" }, this.nextButtonLabel, h("nv-icon", { slot: "trailing-icon", name: "chevron-right" }))))));
+    }
+    static get is() { return "nv-pagination-nav"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-pagination-nav.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-pagination-nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "previousButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the previous button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "previous-button-label",
+                "defaultValue": "'Previous'"
+            },
+            "nextButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the next button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "next-button-label",
+                "defaultValue": "'Next'"
+            },
+            "numStartZoneButtons": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of page buttons to show at the start of the pagination range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "num-start-zone-buttons",
+                "defaultValue": "2"
+            },
+            "numEndZoneButtons": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of page buttons to show at the end of the pagination range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "num-end-zone-buttons",
+                "defaultValue": "2"
+            },
+            "numMiddleButtons": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of page buttons to show in the middle zone around the current page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "num-middle-buttons",
+                "defaultValue": "1"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page number (1-based index)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "totalCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of items to paginate."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "total-count",
+                "defaultValue": "100"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items per page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "page-size",
+                "defaultValue": "10"
+            },
+            "isOnlyIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the Previous/Next navigation buttons will be displayed as icon buttons.\nPage number buttons always use regular buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-only-icon",
+                "defaultValue": "false"
+            },
+            "showMiddleZone": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows the middle zone with the current page when it's not in start/end zones.\nIf false (default), only shows one ellipsis between start and end zones (simpler pagination)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-middle-zone",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "currentPageChanged",
+                "name": "currentPageChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "currentPage"
+                        }],
+                    "text": "Emitted when the current page changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "onCurrentPageChange"
+            }];
+    }
+}

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.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: '1c032ac283f0b259804d05df2d82c496a4ba2590' }, !this.hideControls && (h("div", { key: '3d1bdf1d99583a1dfeef2c9b2f8d120862e5f771', "data-scope": "controls" }, !this.hideFirstLast && (h("nv-iconbutton", { key: '353464b98b5af27b9932f7ada5358a5fe3886ca5', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: '3196094e7ccff072e292c4e7ba7fe1d23d9a74f9', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: 'c9a82233745d41c812ba9d18ac133e54dd183435', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (h("nv-iconbutton", { key: '649b89169098230931ec30f205548104342e4d8c', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), h("span", { key: '3e1311af13227e797ad6914ab70274e554a2f8b2', "data-scope": "page-label" }, pageLabel), h("span", { key: '63d020bd24a353d47dc3097146b2afd9b31de612', "data-scope": "total" }, totalLabel), h("div", { key: '046597be91d6d83551557592aedb799e3d86da4c', "data-scope": "per-page" }, h("nv-fieldselect", { key: '8d661cb40826a34d323d07bb994b5019eb0127fc', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), h("slot", { key: '385e77f742cb4501d26706b08986825d817fd725' })));
+        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' })));
     }
     static get is() { return "nv-paginationtable"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/require-jsdoc */
 import { describe, it, expect } from "vitest";
 import { interpolate, isFirstPage, isLastPage, DEFAULT_PAGE_SIZES, generatePageSizeOptions, } from "../nv-paginationtable.utils";
 /**

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

@@ -311,7 +311,7 @@ export class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd6fef7eff8bcf37038c615eb3a382c2213b8df57' }, h("slot", { key: '849d6563e00d899fe0d1740139e510f5a53a6160', name: "trigger" }), h("div", { key: '3d187af80792aa571039fa5966cc5a38ad65c447', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'cc06755e1ffe17280d847ec78f760fb87e491bea', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '015e92df5937b852b5e9fe4ef5bbf56a4a21e802', name: "content" }))));
+        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" }))));
     }
     static get is() { return "nv-popover"; }
     static get originalStyleUrls() {

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

@@ -6,7 +6,7 @@ export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'a0f1533d6bec697a7a1abed6444b7be7d4141000' }, h("slot", { key: '76b28afb465d755f85e7b297b13aaed00cd65a9e' })));
+        return (h(Host, { key: '07ad630aa3951fe325d4c767bec1d1008b8efa65' }, h("slot", { key: '50fafeac8db8bd0a34ad61196aa259dab2528b18' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {

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: 'b186709db49756c2cbc7266ef9dfb1cdaf63c9bd', 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: '9b415f173b9097aceda8619b061d9e7533030e57', class: "nv-sidebar-container" }, h("slot", { key: 'e60dbe6ea59f72caab1d519bf0a84afe9a9f0829' })), this.type === 'collapsible' && (h("button", { key: 'cc63ad46951876de82efccef404366a04393bb4b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: '7f44dbfe4e1b351c789ea558e735b9da00b03e19', name: 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
                 ? 'layout-sidebar-left-collapse'
                 : 'layout-sidebar-right-collapse', size: "sm" })))));
     }

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

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

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

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

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

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

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

@@ -8,7 +8,7 @@ export class NvSidebargroup {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '44083339d01b3aedaa26340b6e13f8187e731359', role: "group", "aria-label": this.label }, this.label && h("div", { key: '847d06e57d9478e52c0041786ace2ed5891caf0a', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '7511c5bb39cbb64e7615ed32e33de40cf3157183' })));
+        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' })));
     }
     static get is() { return "nv-sidebargroup"; }
     static get originalStyleUrls() {

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

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

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: 'bc083fb598f98c96f382a8bac65e89344dafba94' }, h("div", { key: '6c53e699495efd6dfa71512e21d645844fef178f', class: "nv-sidebarlogo-container" }, h("img", { key: 'e0baaddb610374eacd9b0bb63b4d07b63a2fc41a', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: '508fa312a65f11bed1fe955db9553aa26f600e75', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), this.label && h("span", { key: '78e16fb552eea8a477d785e184e0c4bdbc43c4c6', class: "nv-sidebarlogo-title" }, this.label))));
+        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))));
     }
     static get is() { return "nv-sidebarlogo"; }
     static get originalStyleUrls() {