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

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

@@ -158,7 +158,7 @@ export class NvNotification {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e3f03dd6b580e9f19ac6908fc7d417c148317538', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: '42d46d24c47909e381482aeb66e6aa5d2f1fcc92', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: 'dc47d41d40988dab9e63c6c5e794940826233400', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'f1f83c98845ed3df1a85c03c8262f15d2148131b', name: "x", size: "sm" }))), h("nv-icon", { key: 'adf0fe6170343387ce6316e17f0ef614f44130e1', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: '7e16202e3f42cf3abd47ac9e58812bd8de829fbd', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'f0e80aae320de33fe91e5fb4e573c6eacdaafa8c', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '54007f5cf01b74bb04bb2f48a0e482aa4c0522a5', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '249324e6ea951587ace619d6df0fff422e6eee40', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: '2ae08bc1526aaf12b26a2202d33b85f9cfa69f74', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '36e930834c39b0552d203630baffa593542ff631', "data-scope": "actions" }, h("slot", { key: '15c1fa42b17f907962c6b6396afe384ba5e1c98f', name: "actions" })))))));
+        return (h(Host, { key: '32af1308aa22ce8228416fcce23ce5b75111895b', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: 'e63deeef95ae6c0e3fe1d8ce178c5dbe9d82f88c', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '1b66875001f685293d83bbe90a85b297b335c024', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'b1be8798751f60f41925ea92e40df697eb15fa42', name: "x", size: "sm" }))), h("nv-icon", { key: 'a922d93bddb729fa7674199d438833544d48da2e', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: 'a55e449e8e17560a70d3d40ff3b9e7e2855fbbac', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'd4c7b85c8b9c5c488b86ba4c8f0c456b8ea3ca2d', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: 'e1ef0d24ae77ee788c63d66bed7fee308f3f9d13', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: 'cd7d469058230fec03311e485da0360766633dd0', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'cd5000e571c1a7b19bbb0f59e58e938ee4e51361', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: 'b0a19b512cc2fbce22907ac28828429202378e75', "data-scope": "actions" }, h("slot", { key: 'd40e04eb94154b319c8e212c76f1d932942137d0', name: "actions" })))))));
     }
     static get is() { return "nv-notification"; }
     static get originalStyleUrls() {

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

@@ -15,7 +15,7 @@ export class NvNotificationContainer {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd2c471aaac0f76edade303331718d2b0f7c6bb39', class: `position-${this.position}` }, h("slot", { key: '48bbc563523bfb107bbbd2cc60561ccb87f9968c' })));
+        return (h(Host, { key: '3618bd72eb82ee09c8c971d83ea3e0dbb58f6fbf', class: `position-${this.position}` }, h("slot", { key: 'ed0d1b37dd23e984365a92d45c6ecae31a5bbac9' })));
     }
     static get is() { return "nv-notificationcontainer"; }
     static get originalStyleUrls() {

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

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

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

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-import { interpolate, isFirstPage, isLastPage, generatePageSizeOptions, } from "./nv-paginationtable.utils";
+import { interpolate, isFirstPage, isLastPage, getDisplayPageNumber, generatePageSizeOptions, } from "./nv-paginationtable.utils";
 /**
  * @slot default - Child content of the component.
  */
@@ -140,10 +140,13 @@ export class NvPaginationtable {
         const atFirstPage = isFirstPage(this.pageIndex);
         const atLastPage = isLastPage(this.pageIndex, this.pageCount);
         // Use fallback values to handle undefined props (can happen when frameworks pass undefined explicitly)
-        const pageLabel = interpolate(this.labelPage, { pageIndex: this.pageIndex + 1, pageCount: this.pageCount }, 'Page {pageIndex} of {pageCount}');
+        const pageLabel = interpolate(this.labelPage, {
+            pageIndex: getDisplayPageNumber(this.pageIndex, this.pageCount),
+            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: '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' })));
+        return (h(Host, { key: '5f0e4d93600b77cf9b54b99a1ccffb1048c389fe', role: "navigation", "aria-label": "Pagination" }, !this.hideControls && (h("div", { key: '5226510a0d4cabba98d7aafaa7e3cd7d413b2d8a', "data-scope": "controls" }, !this.hideFirstLast && (h("nv-iconbutton", { key: 'bdcb8d93cdf24821ab5cdedc0413a77f163e19a1', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: '822cfe5bd177ebbdce436f0f850fad9a86aae1c5', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: 'fd0aa10dee6b72d816b6801c03e5be7fb9a3698d', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (h("nv-iconbutton", { key: 'a5b8fa71a51d0157dc37b908f972c0d830b44b00', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), h("span", { key: '0b09d7507a9d1f3dbabbb37265d6949243290b1b', "data-scope": "page-label" }, pageLabel), h("span", { key: '275c4a1ca625a0afc68bfff46fc3e2872e0f76c3', "data-scope": "total" }, totalLabel), h("div", { key: '8a329ccc7baaac9f580aed7d2a53ed7f940c123a', "data-scope": "per-page" }, h("nv-fieldselect", { key: '83c644de7d30e63e0a96ccccaefb311acdd7617c', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), h("slot", { key: '190b8c8587c25ca449339a6ea1bbd85bed06d35f' })));
     }
     static get is() { return "nv-paginationtable"; }
     static get originalStyleUrls() {

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

@@ -33,6 +33,19 @@ export function interpolate(template, values, fallback) {
 export function isFirstPage(pageIndex) {
     return pageIndex === 0;
 }
+/**
+ * Returns the 1-based page number to show in the page label.
+ * When there are no pages (empty/filtered-to-zero dataset), returns 0 so
+ * the label reads e.g. "Page 0 of 0" instead of "Page 1 of 0".
+ * @param {number} pageIndex - Current page index (zero-based)
+ * @param {number} pageCount - Total number of pages
+ * @returns {number} The page number to display (1-based, or 0 when no pages)
+ */
+export function getDisplayPageNumber(pageIndex, pageCount) {
+    if (pageCount <= 0)
+        return 0;
+    return pageIndex + 1;
+}
 /**
  * Checks if navigation to the last/next page is possible
  * @param {number} pageIndex - Current page index (zero-based)

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { interpolate, isFirstPage, isLastPage, DEFAULT_PAGE_SIZES, generatePageSizeOptions, } from "../nv-paginationtable.utils";
+import { interpolate, isFirstPage, isLastPage, getDisplayPageNumber, DEFAULT_PAGE_SIZES, generatePageSizeOptions, } from "../nv-paginationtable.utils";
 /**
  * Comprehensive tests for nv-paginationtable utilities
  *
@@ -168,6 +168,26 @@ describe('nv-paginationtable.utils - Comprehensive Tests', () => {
             expect(isLastPage(0, 1)).toBe(true);
         });
     });
+    describe('getDisplayPageNumber', () => {
+        it('should return 0 when there are no pages (empty or filtered-to-zero dataset)', () => {
+            expect(getDisplayPageNumber(0, 0)).toBe(0);
+        });
+        it('should return 0 when page count is negative (defensive)', () => {
+            expect(getDisplayPageNumber(0, -1)).toBe(0);
+        });
+        it('should return 1-based page number when there are pages', () => {
+            expect(getDisplayPageNumber(0, 5)).toBe(1);
+            expect(getDisplayPageNumber(2, 5)).toBe(3);
+            expect(getDisplayPageNumber(4, 5)).toBe(5);
+        });
+        it('should produce a "Page 0 of 0" label when interpolated with empty state', () => {
+            const pageLabel = interpolate('Page {pageIndex} of {pageCount}', {
+                pageIndex: getDisplayPageNumber(0, 0),
+                pageCount: 0,
+            });
+            expect(pageLabel).toBe('Page 0 of 0');
+        });
+    });
     describe('DEFAULT_PAGE_SIZES', () => {
         it('should have correct number of sizes', () => {
             expect(DEFAULT_PAGE_SIZES).toHaveLength(4);
@@ -292,7 +312,12 @@ describe('nv-paginationtable.utils - Comprehensive Tests', () => {
             const pageIndex = 0;
             const pageCount = 0;
             const rowCount = 0;
+            const pageLabel = interpolate('Page {pageIndex} of {pageCount}', {
+                pageIndex: getDisplayPageNumber(pageIndex, pageCount),
+                pageCount,
+            });
             const totalLabel = interpolate('Total: {rowCount} rows', { rowCount });
+            expect(pageLabel).toBe('Page 0 of 0');
             expect(totalLabel).toBe('Total: 0 rows');
             expect(isFirstPage(pageIndex)).toBe(true);
             expect(isLastPage(pageIndex, pageCount)).toBe(true);

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

@@ -311,7 +311,7 @@ export class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        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" }))));
+        return (h(Host, { key: '01b6cff8203a7e1ffe5b05aeea7f8e35238ac9bb' }, h("slot", { key: '63264f349fbc817a8b4efe7272715942fc307863', name: "trigger" }), h("div", { key: '0a251a4447bbe7481a71465ac2402aeb156ba537', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'c958f8cd4c8f19d4ac7e8779cb4555a5b9dbfc01', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '72d516982d54945924c88372a54d19ba568a4e4a', name: "content" }))));
     }
     static get is() { return "nv-popover"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '18964229751804689bc422177dcd5649ef9af68f' }, h("slot", { key: 'd2d331afe7dbcf2caded4dc6131512520472b716' })));
+        return (h(Host, { key: '6363fba1008818b66f1eeb4ade8949f56c7c23b0' }, h("slot", { key: '2a2399121ac20fb577a29c93ba764f196352a9b8' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {

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

@@ -49,6 +49,13 @@ const NvSidebarDocs = {
             args: { notificationIntention: 'neutral' },
             template: (h("nv-sidebar", { "data-storybook-args": true }, h("nv-sidebarlogo", { label: "nova" }), h("nv-sidebarcontent", null, h("nv-sidebarnavitem", { icon: "home" }, h("a", { href: "#" }, "Home"), h("nv-badge", { slot: "trailing", color: "error" }, "5")), h("nv-sidebarnavitem", { icon: "settings" }, h("a", { href: "#" }, "Settings"))))),
         },
+        // resizable
+        {
+            name: nameof(x => x.resizable),
+            description: 'When true, the sidebar exposes a drag handle on its right edge. Drag to resize between `minWidth` and `maxWidth`. Keyboard users can focus the handle and press Arrow Left/Right (8px step) or Home/End to jump to bounds.',
+            args: { resizable: true, minWidth: 220, maxWidth: 480 },
+            template: (h("nv-sidebar", { "data-storybook-args": true }, h("nv-sidebarlogo", { label: "nova" }), h("nv-sidebarcontent", null, h("nv-sidebarnavitem", { icon: "home" }, h("a", { href: "#" }, "Home")), h("nv-sidebarnavitem", { icon: "layout-dashboard" }, h("a", { href: "#" }, "Dashboard")), h("nv-sidebarnavitem", { icon: "settings" }, h("a", { href: "#" }, "Settings"))))),
+        },
         // notificationEmphasis
         {
             name: nameof(x => x.notificationEmphasis),

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

@@ -1,10 +1,13 @@
 import { Host, h, } from "@stencil/core";
+const KEYBOARD_STEP = 8;
 /**
  * Main sidebar container for navigation. Supports collapsible and persistent modes.
  * @slot default - All sidebar components (logo, header, content, footer).
  */
 export class NvSidebar {
     constructor() {
+        this.resizeStartX = 0;
+        this.resizeStartWidth = 0;
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -30,6 +33,23 @@ export class NvSidebar {
          * - low: Less prominent appearance
          */
         this.notificationEmphasis = 'high';
+        /**
+         * When true, the sidebar can be resized horizontally by dragging its right edge.
+         * Only active when the sidebar is open (not collapsed).
+         */
+        this.resizable = false;
+        /**
+         * Minimum width in pixels when resizing.
+         */
+        this.minWidth = 200;
+        /**
+         * Maximum width in pixels when resizing.
+         */
+        this.maxWidth = 480;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        this.resizing = false;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -39,6 +59,81 @@ export class NvSidebar {
                 this.open = !this.open;
             }
         };
+        this.handleResizeStart = (event) => {
+            if (event.button !== 0)
+                return;
+            if (this.resizing)
+                return;
+            if (!this.canResize())
+                return;
+            event.preventDefault();
+            this.resizing = true;
+            this.resizeStartX = event.clientX;
+            // clientWidth excludes the border, matching the CSS width that drives `--sidebar-width`
+            this.resizeStartWidth = this.el.clientWidth;
+            // Pointer capture routes subsequent pointer events to the handle even when
+            // the pointer leaves it, so releasing outside the window still fires pointerup
+            event.currentTarget.setPointerCapture(event.pointerId);
+        };
+        this.handleResizeMove = (event) => {
+            if (!this.resizing || !this.canResize())
+                return;
+            const delta = event.clientX - this.resizeStartX;
+            this.width = this.clampWidth(this.resizeStartWidth + delta);
+        };
+        this.handleResizeEnd = (event) => {
+            if (!this.resizing)
+                return;
+            this.releasePointerCapture(event);
+            this.resizing = false;
+            if (this.width != null) {
+                this.widthChanged.emit(this.width);
+            }
+        };
+        this.handleResizeCancel = (event) => {
+            // Pointer cancel means the interaction was aborted (browser gesture, system
+            // event). Release capture and drop the drag, but do not emit widthChanged
+            // since the value was not committed by the user.
+            if (!this.resizing)
+                return;
+            this.releasePointerCapture(event);
+            this.resizing = false;
+        };
+        this.cancelResize = () => {
+            if (!this.resizing)
+                return;
+            this.resizing = false;
+        };
+        this.handleResizeKeyDown = (event) => {
+            if (!this.canResize())
+                return;
+            const [min, max] = this.getBounds();
+            const current = this.width ?? this.el.clientWidth;
+            let next = null;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    next = current - KEYBOARD_STEP;
+                    break;
+                case 'ArrowRight':
+                    next = current + KEYBOARD_STEP;
+                    break;
+                case 'Home':
+                    next = min;
+                    break;
+                case 'End':
+                    next = max;
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            const currentClamped = this.clampWidth(current);
+            const nextClamped = this.clampWidth(next);
+            if (nextClamped === currentClamped)
+                return;
+            this.width = nextClamped;
+            this.widthChanged.emit(this.width);
+        };
         /**
          * Sets the active state of navigation items based on activePath
          */
@@ -114,6 +209,48 @@ export class NvSidebar {
             });
         };
     }
+    getBounds() {
+        // Fall back to the built-in defaults if a consumer passes a non-finite bound
+        const rawMin = Number.isFinite(this.minWidth) ? this.minWidth : 200;
+        const rawMax = Number.isFinite(this.maxWidth) ? this.maxWidth : 480;
+        return [Math.min(rawMin, rawMax), Math.max(rawMin, rawMax)];
+    }
+    clampWidth(value) {
+        const [min, max] = this.getBounds();
+        return Math.round(Math.min(Math.max(value, min), max));
+    }
+    canResize() {
+        return this.resizable && !(this.type === 'collapsible' && !this.open);
+    }
+    getAriaValueNow() {
+        if (this.width != null)
+            return this.clampWidth(this.width);
+        const [min] = this.getBounds();
+        return this.clampWidth(this.el?.clientWidth || min);
+    }
+    applyWidthStyle() {
+        if (this.width == null) {
+            this.el.style.removeProperty('--sidebar-width');
+            return;
+        }
+        if (!Number.isFinite(this.width)) {
+            // Guard against NaN/Infinity which would otherwise loop through @Watch('width') forever
+            this.width = undefined;
+            return;
+        }
+        const clamped = this.clampWidth(this.width);
+        if (clamped !== this.width) {
+            this.width = clamped;
+            return; // @Watch('width') will re-enter and apply the clamped value
+        }
+        this.el.style.setProperty('--sidebar-width', `${clamped}px`);
+    }
+    releasePointerCapture(event) {
+        const target = event.currentTarget;
+        if (target?.hasPointerCapture(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+        }
+    }
     handleCollapsedSideEffects(isCollapsed) {
         if (!isCollapsed) {
             return;
@@ -130,11 +267,32 @@ export class NvSidebar {
     }
     onOpenChanged(newValue, oldValue) {
         this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);
+        // Cancel any in-progress resize if the sidebar is programmatically collapsed
+        if (this.type === 'collapsible' && !newValue) {
+            this.cancelResize();
+        }
         // Only emit event when open state actually changes (not on re-render with same value)
         if (this.type === 'collapsible' && newValue !== oldValue) {
             this.openChanged.emit(newValue);
         }
     }
+    onWidthChanged() {
+        this.applyWidthStyle();
+    }
+    onBoundsChanged() {
+        // Re-clamp the current width against the new bounds so visuals and ARIA stay within range
+        if (this.width != null) {
+            const clamped = this.clampWidth(this.width);
+            if (clamped !== this.width) {
+                this.width = clamped;
+            }
+        }
+    }
+    onResizableChanged(newValue) {
+        if (!newValue) {
+            this.cancelResize();
+        }
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -142,6 +300,7 @@ export class NvSidebar {
         this.setActiveNavItems();
         this.setupMutationObserver();
         this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);
+        this.applyWidthStyle();
     }
     disconnectedCallback() {
         if (this.mutationObserver) {
@@ -156,9 +315,11 @@ export class NvSidebar {
     //#region RENDER
     render() {
         const isCollapsed = this.type === 'collapsible' && !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
+        const showResizeHandle = this.resizable && !isCollapsed;
+        const [ariaValueMin, ariaValueMax] = this.getBounds();
+        return (h(Host, { key: '24fa9b232e27fe864d6984bf947d9720ffd1804d', role: "navigation", collapsed: isCollapsed ? true : undefined, resizing: this.resizing ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, h("div", { key: 'c9d15e38ab0b18c34858fca91376439f300e2f61', class: "nv-sidebar-container" }, h("slot", { key: 'fe732ec38f8848dfc3516ee2a601d8ceb313b559' })), this.type === 'collapsible' && (h("button", { key: '53f9de5d7318cdea02abe6928dda4b488d43e0a8', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: 'ea42dca24abed9ec5981027b0f5ac5ae9aaa3b1f', name: this.open
                 ? 'layout-sidebar-left-collapse'
-                : 'layout-sidebar-right-collapse', size: "sm" })))));
+                : 'layout-sidebar-right-collapse', size: "sm" }))), showResizeHandle && (h("div", { key: '1f28ce72b3eb61223d708d519761ab9eef182f2e', class: "nv-sidebar-resize-handle", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize sidebar", "aria-valuenow": this.getAriaValueNow(), "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, tabIndex: 0, onPointerDown: this.handleResizeStart, onPointerMove: this.handleResizeMove, onPointerUp: this.handleResizeEnd, onPointerCancel: this.handleResizeCancel, onKeyDown: this.handleResizeKeyDown }))));
     }
     static get is() { return "nv-sidebar"; }
     static get originalStyleUrls() {
@@ -271,9 +432,93 @@ export class NvSidebar {
                 "reflect": true,
                 "attribute": "notification-emphasis",
                 "defaultValue": "'high'"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the sidebar can be resized horizontally by dragging its right edge.\nOnly active when the sidebar is open (not collapsed)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "resizable",
+                "defaultValue": "false"
+            },
+            "minWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum width in pixels when resizing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "min-width",
+                "defaultValue": "200"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width in pixels when resizing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-width",
+                "defaultValue": "480"
+            },
+            "width": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current sidebar width in pixels. When set (or while resizing), overrides\nthe default CSS token width. Updated as the user drags the resize handle.\nNot reflected to the attribute to avoid DOM churn on every pointer move."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
             }
         };
     }
+    static get states() {
+        return {
+            "resizing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "openChanged",
@@ -293,6 +538,21 @@ export class NvSidebar {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "widthChanged",
+                "name": "widthChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sidebar width changes via the resize handle.\nFires at the end of a drag, or after each keyboard adjustment."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -303,6 +563,18 @@ export class NvSidebar {
             }, {
                 "propName": "open",
                 "methodName": "onOpenChanged"
+            }, {
+                "propName": "width",
+                "methodName": "onWidthChanged"
+            }, {
+                "propName": "minWidth",
+                "methodName": "onBoundsChanged"
+            }, {
+                "propName": "maxWidth",
+                "methodName": "onBoundsChanged"
+            }, {
+                "propName": "resizable",
+                "methodName": "onResizableChanged"
             }];
     }
 }

package/dist/collection/components/nv-sidebar/styles/nv-sidebar.css

@@ -31,6 +31,9 @@ nv-sidebar[collapsed] [data-hide-on-collapsed] {
 nv-sidebar[collapsed] .nv-sidebar-container {
   padding: var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed);
 }
+nv-sidebar[resizing] {
+  transition: none;
+}
 nv-sidebar .nv-sidebar-container {
   display: flex;
   flex-direction: column;
@@ -71,4 +74,27 @@ nv-sidebar .nv-sidebar-toggle nv-icon {
 }
 nv-sidebar .nv-sidebar-toggle nv-icon:hover {
   color: var(--color-interaction-container-neutral-icon-hover);
+}
+nv-sidebar .nv-sidebar-resize-handle {
+  position: absolute;
+  top: 0;
+  right: calc(-1 * var(--sidebar-divider-size));
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+  transition: background-color 0.15s ease;
+  z-index: 9;
+  user-select: none;
+  touch-action: none;
+}
+nv-sidebar .nv-sidebar-resize-handle:hover, nv-sidebar .nv-sidebar-resize-handle:focus-visible {
+  background-color: var(--color-interaction-container-branded-high-background);
+}
+nv-sidebar .nv-sidebar-resize-handle:focus, nv-sidebar .nv-sidebar-resize-handle:focus-within {
+  outline: none;
+}
+nv-sidebar .nv-sidebar-resize-handle:focus-visible, nv-sidebar .nv-sidebar-resize-handle:has(:focus-visible) {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
 }

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

@@ -7,7 +7,7 @@ export class NvSidebarcontent {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '1892ab4b2c7698bb6c0e2baae242650f3a967947', role: "list" }, h("slot", { key: 'a971f991f52e65f4bd83dafeee2cbdf7c4b6de51' })));
+        return (h(Host, { key: '85b6fd48dca4c6889c16453ba53e6bdcb692782a', role: "list" }, h("slot", { key: 'f2a2860c6bcd8a1196f191f6af2f3be28713d792' })));
     }
     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: 'f8b607a8376e9e27d33ff13da96765bf46231cc0', role: "separator", "aria-orientation": "horizontal" });
+        return h(Host, { key: '31125496c90eb141cd70a69ac24f5d2b2165821c', 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: '4ef8bb09df1cca9008062f4dc8f0252472da6a66' }, h("slot", { key: 'b30037ecc79272287a5ad134b1b17ce9516d14c7' })));
+        return (h(Host, { key: '1d281299e81cf2081b6e77f3a47e75c8efe699fa' }, h("slot", { key: 'd0211b2b36ae6dc31f1a63e82eb8cc7c58c8e56a' })));
     }
     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: 'e23656515b0882eaeed7a9a3b5c772deab41cd9c', role: "group", "aria-label": this.label }, this.label && h("div", { key: '41600406fb5fd8f3845464260ccbcb3845d52b37', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '14303ef78c5da82c9a6d94d09a1e9341ade5bee4' })));
+        return (h(Host, { key: '039c251fd46c3c178d1fc5329cbf676947f9f736', role: "group", "aria-label": this.label }, this.label && h("div", { key: 'f2fc7cbbe469ab8f71caa86ec62ed98347c1072a', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '67cf9ff6aa2f61feaf1c3966e7975fbf5273229c' })));
     }
     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: '5e0b6bdc78618f3e434b62b6f6e4d60c220895ce' }, h("slot", { key: 'ae0f11bea6f4f9bbe5376d0870453648dc4acc77' })));
+        return (h(Host, { key: 'f29fff2d903edbcea70de45e3aca5e7049872464' }, h("slot", { key: 'e5854558583d51d0dba078da41311fedcaeb9bc5' })));
     }
     static get is() { return "nv-sidebarheader"; }
     static get originalStyleUrls() {

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

@@ -21,7 +21,7 @@ export class NvSidebarlogo {
     render() {
         const logoSrc = this.logo || this.defaultLogo;
         const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
-        return (h(Host, { key: '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))));
+        return (h(Host, { key: '6c8f69d79da3f6f308489b440951c4c70bbf1607' }, h("div", { key: '614c4925f8e26fbcb53387f0d166d51435a67759', class: "nv-sidebarlogo-container" }, h("img", { key: 'e6e6d3b5a024179c7e0042a3fd2be330379fd1c5', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: 'f58059a9ec0ddc7840e77fcd3ec64d1e30b87a13', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), h("slot", { key: '2f895cfb6487af387d501bb0d22f39967a08b83a', name: "label" }), this.label && h("span", { key: 'df6039eb0a010bc547a3017ca50be61b9929337d', class: "nv-sidebarlogo-title" }, this.label))));
     }
     static get is() { return "nv-sidebarlogo"; }
     static get originalStyleUrls() {