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

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: '6d43cb441e9477d4146d44af59365848dbbee875', 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: 'f6c58fbbafdb759499dd5a52e45eebc9ed6e5f4a', class: "nv-sidebar-container" }, h("slot", { key: '9ebf341658bb5631858390e3c76e274de72b5448' })), this.type === 'collapsible' && (h("button", { key: '1fd482c9157d47a5852395eb99a65f044f3db76a', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: 'cd0a51cd731fc8c703256c3b781e0f20b14a3e2f', name: this.open
                 ? 'layout-sidebar-left-collapse'
-                : 'layout-sidebar-right-collapse', size: "sm" })))));
+                : 'layout-sidebar-right-collapse', size: "sm" }))), showResizeHandle && (h("div", { key: '75fe0b6d98ad9558b9003c541f255f84a41dbf27', 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: '2460a0659ee45f37e92776ccf05a30a4bd58772f', role: "list" }, h("slot", { key: 'e7f41a9684461e8ee3fbc0388a6e1e80a33894ba' })));
     }
     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: '479568a0cd52812e71cfc721ddd7e2af3da0762d', 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: 'e678899934cfdb9b0c5433d3a22b23e73728ab46' }, h("slot", { key: '39e4a8351deb008e9672a3e90c2f2c51196a2021' })));
     }
     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: 'aa466d5d04f8f349c5f40b2705ce3ca07dcc0733', role: "group", "aria-label": this.label }, this.label && h("div", { key: '4460638eaac697aaba09e634bebc895dfeac43c8', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '4bfb3047dd95cb445797068c6915860b372a0864' })));
     }
     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: '058b1681ff0e0a35d96b3f5b27444853211eb067' }, h("slot", { key: '7b2f91201fe6ae8325dcfd07fae8f71cc15ffea1' })));
     }
     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: '1b61ccdfac0bf190f46b9750c0d64dd594982446' }, h("div", { key: '57e98866efe588eb18a6e9ec89a4bc1a43129598', class: "nv-sidebarlogo-container" }, h("img", { key: 'b682703b4343aa2ab1db7f9d312e238acd2af008', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: '0c01b944f5dabbb3120c890651b40724edbdae29', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), h("slot", { key: '9f6cb193bc61463f827e8bb8a39aaac8c37d3049', name: "label" }), this.label && h("span", { key: '1610d7896bcdce509fd601f3dfb4b6a59fcebac8', class: "nv-sidebarlogo-title" }, this.label))));
     }
     static get is() { return "nv-sidebarlogo"; }
     static get originalStyleUrls() {

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

@@ -275,7 +275,7 @@ export class NvSidebarnavitem {
     render() {
         const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
         const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
-        return (h(Host, { key: '1b2cf1eb2d9c5042aeb24324194feb1b55650ca9', role: "listitem" }, h("div", { key: 'c3dafa7bd8d23dacb986a049b909c799b96aa2a9', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (h("div", { key: '7f5bcd6d41518923d6a83ddca423660eb2a41e6f', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: 'bd910ba67edcd13bacea4cd6c229a20c6cb20911', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: 'cd52de830137aa70411c49d619e0ede95bcaf67f', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: '103b75a710cf47e26143d4821826c95d9b17408c', class: "nv-sidebarnavitem-content" }, h("slot", { key: 'bae51d0b18e157637987b686d9ee021031256290' })), h("div", { key: 'a8eb101fb69af8a4ac279d6a3ad5652e22e22e33', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: '1d797ec2458e3e4abab727cfdb0939f6be082164', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '2d4e477da92c41c7b74e30829bb283b7bb130759', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: '5012ca8ad3b830a2fd57c0382d446a2891d7949a', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: 'f7fd2c3cda2ae781ce10a9bc92cbd74154a18ba1', class: "nv-sidebarnavitem-subitems", ref: el => {
+        return (h(Host, { key: '3fc0030b34570e6a62d5382ed1986d06978e7697', role: "listitem" }, h("div", { key: 'baf4236cf917c60945b1087b822ea62688fce7dd', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (h("div", { key: '43133ba47b9f79e13a1bff41e4bd6164167a324b', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: '48a71113d4ee7e51a6888d24addd541adbb48bdd', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '0a89f49fa31f416b794280477c24c9db8133031d', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: '298e06f2a1649046e45ae7d50d233a43c592bda4', class: "nv-sidebarnavitem-content" }, h("slot", { key: '8c12b2779f0a89b71ecf15f2a29e750eacadf940' })), h("div", { key: 'f2ba7eec185fe210f294568852474df4c5e9bc64', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: '365e7ad5254d49ad453e0da7a6d8fda260f2f6c5', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: 'bf2453a2b92425b9fabbcf285d793da2f091aeb8', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: 'a2e411250b6d2e03c1e5cfc0feaf777be5d386e8', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: '06ad06c721546fcefb86010c10faf213d6881601', class: "nv-sidebarnavitem-subitems", ref: el => {
                 // Only update ref and initialize if element changed or not yet initialized
                 if (el !== this.subitemsRef) {
                     this.subitemsRef = el;
@@ -290,7 +290,7 @@ export class NvSidebarnavitem {
                         });
                     }
                 }
-            } }, h("slot", { key: 'c3d3fb65b3af3550c10c14937dea1a981e3eb010', name: "subitems" })))));
+            } }, h("slot", { key: '21ed17d8ab90541514ae0fa5e441d67f62200b6d', name: "subitems" })))));
     }
     static get is() { return "nv-sidebarnavitem"; }
     static get originalStyleUrls() {
@@ -310,7 +310,7 @@ export class NvSidebarnavitem {
                 "mutable": false,
                 "complexType": {
                     "original": "`${IconName}`",
-                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layers-intersect\" | \"layers-off\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
+                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"exclamation-mark\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"info-small\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layers-intersect\" | \"layers-off\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"question-mark\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"trending-down\" | \"trending-down-2\" | \"trending-down-3\" | \"trending-up\" | \"trending-up-2\" | \"trending-up-3\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
                     "references": {
                         "IconName": {
                             "location": "import",

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

@@ -23,7 +23,7 @@ export class NvSidebarnavsubitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '05f74ef3cf6f93804e4446fe23977d8773deb7e2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: 'f1f2db51fbff9c2f58ba317cb5fcbe1805cd189b', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: 'c476dfbda77ee7bcca1338ef8d8b103806e6e3a7', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: 'b80cb20a4f13b691cbd31c344d442f8a23585a26' })), h("div", { key: '383dc01158c4752506a6069be9abe2e20b83b9e4', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: '2c63f696dd64ef8f680f3b85959d756952fd8db4', name: "trailing" }))));
+        return (h(Host, { key: '4abfe038592a030c9f48e5f62d8fda0552b9eaa0', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: 'c6b5d4ad34ecfa7949c05e83acb5e594654f1e51', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: 'fc0478a26b8963ab9e647e8731c428525b45609e', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: '399e3b85453dd7f69e654080deb27abf833b31f6' })), h("div", { key: '98c5b35c9a275f371f5f0541de6720227a72e08c', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: '8d986d98f276372534beb7eb334cc09f90293042', name: "trailing" }))));
     }
     static get is() { return "nv-sidebarnavsubitem"; }
     static get originalStyleUrls() {

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

@@ -3,6 +3,7 @@ import { Host, h, } from "@stencil/core";
  * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.
  * @slot pane - Content of each split pane. Use multiple `<div slot="pane">` elements.
  * @slot gutter - Optional custom content inside every gutter handle.
+ * @slot default - Placeholder for any auto rendered gutters
  */
 export class NvSplit {
     constructor() {
@@ -321,7 +322,7 @@ export class NvSplit {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8ad8bebda77f9868b9715280c0157f247057026d', "data-dragging": this.isDragging.toString() }, h("slot", { key: '8ca002feab0c3cd7755a5f1f53864e4e20585420', name: "pane" }), h("slot", { key: 'f7f7352ed8c326ec263f6d617bcd84fea02689ea', name: "gutter" })));
+        return (h(Host, { key: 'f50ca6495a138622ac8ab8713329cef7318982a3', "data-dragging": this.isDragging.toString() }, h("slot", { key: 'fbc1a3606da521c05efdc2a5ef0cfbc295379b7a', name: "pane" }), h("slot", { key: '1b3a0df435d2ff8e6457bcead1e9116da84b3140', name: "gutter" }), h("slot", { key: 'b8bbb41801d7a9dd13fd50ddd780a64c2f6e4e7a' })));
     }
     static get is() { return "nv-split"; }
     static get originalStyleUrls() {

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

@@ -18,7 +18,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '861c5eed0b6dc7cdd5bf3a2d07af92127e2025bf', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '4cf3d3fb15fa6c4ed2d7d6bb70334965b0cca457' })));
+        return (h(Host, { key: 'bbbb833714e4855450b93ec56a878969699ffc4a', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'df1ad621d3d9f8834848e8f4c5e717a83ebc8c9d' })));
     }
     static get is() { return "nv-stack"; }
     static get originalStyleUrls() {