@nova-design-system/nova-webcomponents 3.26.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: '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: '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-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: '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: '507041a8331236632f2dc12e94ca7c87465e8312' }, h("slot", { key: '3bef8f23cdc72e42467dc0407b9d2693f15638d7' })));
+        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: '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: '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: 'e88e1557fbfa8ec74391dc11b6073eecb4d97685', role: "list" }, h("slot", { key: 'ccaf985cc498a5729600316135d750190a514582' })));
+        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: 'e2288aab359dff9087f7758e53a476e4715b0742', 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: 'ac36a47c2f96070779b7b05134303604e3ef7676' }, h("slot", { key: '295d26a47fa386deade3799a02686afe6ef42ce0' })));
+        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: '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: '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: '8dd986cfb2cd89557955c6eb61ebfbad0eb1dbcc' }, h("slot", { key: 'ee7808c81f750f5c46da9ed0bfd3b9fcb18d393d' })));
+        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: '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: '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() {