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

package/dist/cjs/nv-sidebar.entry-96HyTMt9.js

@@ -0,0 +1,355 @@
+'use strict';
+
+var index = require('./index-DXwd3F_r.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarCss = () => `nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--components-sidebar-background);border-right:var(--sidebar-divider-size) solid var(--components-sidebar-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-width-collapsed)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}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;flex:1;overflow:hidden;padding:var(--sidebar-padding-y) var(--sidebar-padding-x);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--sidebar-collapsible-button-position-top);right:calc(-1 * var(--sidebar-collapsible-button-position-right));display:flex;align-items:center;justify-content:center;padding:var(--sidebar-collapsible-button-padding);background-color:var(--components-sidebar-background);border:1px solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-interaction-container-neutral-background-hover)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-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)}`;
+
+const KEYBOARD_STEP = 8;
+const NvSidebar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged", 3);
+        this.widthChanged = index.createEvent(this, "widthChanged", 3);
+        this.resizeStartX = 0;
+        this.resizeStartWidth = 0;
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The type of sidebar behavior.
+         * - collapsible: Can be toggled open/closed
+         * - persistent: Always visible
+         */
+        this.type = 'persistent';
+        /**
+         * Whether the sidebar is currently open (only applies to collapsible type).
+         */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.open = true;
+        /**
+         * Determines the type of notification bullets in the sidebar.
+         * - neutral: Uses neutral colors (gray)
+         * - brand: Uses brand colors (orange/teal depending on theme)
+         */
+        this.notificationIntention = 'brand';
+        /**
+         * Determines the emphasis of notification bullets in the sidebar.
+         * - high: More prominent appearance
+         * - 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
+        this.handleToggle = () => {
+            if (this.type === 'collapsible') {
+                // Changing open will trigger @Watch which emits the event
+                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
+         */
+        this.setActiveNavItems = () => {
+            if (!this.activePath)
+                return;
+            // First, check all subitems to find if any matches exactly
+            const activeSubitemHrefs = new Set();
+            this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {
+                const link = subItem.querySelector('a');
+                const href = link?.getAttribute('href');
+                if (href) {
+                    const isActive = this.activePath === href;
+                    subItem.active = isActive;
+                    if (isActive) {
+                        activeSubitemHrefs.add(href);
+                    }
+                }
+            });
+            // Then, set nav items active only if:
+            // 1. Exact match with activePath AND no subitem matches
+            // 2. OR the navitem has no subitems and activePath starts with its href
+            this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {
+                const link = navItem.querySelector(':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a');
+                const href = link?.getAttribute('href');
+                const hasSubitems = navItem.querySelector('nv-sidebarnavsubitem') !== null;
+                if (href) {
+                    if (hasSubitems) {
+                        // Parent with subitems: only active if exact match (not when subitem is active)
+                        navItem.active = this.activePath === href;
+                    }
+                    else {
+                        // Item without subitems: active on exact match
+                        navItem.active = this.activePath === href;
+                    }
+                }
+            });
+        };
+        this.pendingActiveUpdate = null;
+        /**
+         * Sets up the MutationObserver to watch for changes in child elements.
+         * Only triggers on new nav items being added, not on attribute changes.
+         */
+        this.setupMutationObserver = () => {
+            this.mutationObserver = new MutationObserver(mutations => {
+                // Only react to new nav items being added, ignore other mutations
+                const hasNewNavItems = mutations.some(mutation => {
+                    if (mutation.type !== 'childList')
+                        return false;
+                    return Array.from(mutation.addedNodes).some(node => {
+                        if (node.nodeType !== Node.ELEMENT_NODE)
+                            return false;
+                        const el = node;
+                        return (el.tagName.toLowerCase() === 'nv-sidebarnavitem' ||
+                            el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' ||
+                            el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem'));
+                    });
+                });
+                if (hasNewNavItems) {
+                    // Debounce to prevent multiple rapid calls
+                    if (this.pendingActiveUpdate) {
+                        clearTimeout(this.pendingActiveUpdate);
+                    }
+                    this.pendingActiveUpdate = window.setTimeout(() => {
+                        this.setActiveNavItems();
+                        this.pendingActiveUpdate = null;
+                    }, 50);
+                }
+            });
+            this.mutationObserver.observe(this.el, {
+                childList: true,
+                subtree: true,
+            });
+        };
+    }
+    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;
+        }
+        this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {
+            navItem.open = false;
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    onActivePathChanged() {
+        this.setActiveNavItems();
+    }
+    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
+    componentWillLoad() {
+        this.setActiveNavItems();
+        this.setupMutationObserver();
+        this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);
+        this.applyWidthStyle();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+        if (this.pendingActiveUpdate) {
+            clearTimeout(this.pendingActiveUpdate);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const isCollapsed = this.type === 'collapsible' && !this.open;
+        const showResizeHandle = this.resizable && !isCollapsed;
+        const [ariaValueMin, ariaValueMax] = this.getBounds();
+        return (index.h(index.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 }, index.h("div", { key: 'c9d15e38ab0b18c34858fca91376439f300e2f61', class: "nv-sidebar-container" }, index.h("slot", { key: 'fe732ec38f8848dfc3516ee2a601d8ceb313b559' })), this.type === 'collapsible' && (index.h("button", { key: '53f9de5d7318cdea02abe6928dda4b488d43e0a8', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: 'ea42dca24abed9ec5981027b0f5ac5ae9aaa3b1f', name: this.open
+                ? 'layout-sidebar-left-collapse'
+                : 'layout-sidebar-right-collapse', size: "sm" }))), showResizeHandle && (index.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 }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "activePath": [{
+                "onActivePathChanged": 0
+            }],
+        "open": [{
+                "onOpenChanged": 0
+            }],
+        "width": [{
+                "onWidthChanged": 0
+            }],
+        "minWidth": [{
+                "onBoundsChanged": 0
+            }],
+        "maxWidth": [{
+                "onBoundsChanged": 0
+            }],
+        "resizable": [{
+                "onResizableChanged": 0
+            }]
+    }; }
+};
+NvSidebar.style = nvSidebarCss();
+
+exports.nv_sidebar = NvSidebar;

package/dist/cjs/{nv-sidebarcontent.entry-llnRwVuj.js → nv-sidebarcontent.entry-RCkZZp9I.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,7 @@ const NvSidebarcontent = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '1892ab4b2c7698bb6c0e2baae242650f3a967947', role: "list" }, index.h("slot", { key: 'a971f991f52e65f4bd83dafeee2cbdf7c4b6de51' })));
+        return (index.h(index.Host, { key: '85b6fd48dca4c6889c16453ba53e6bdcb692782a', role: "list" }, index.h("slot", { key: 'f2a2860c6bcd8a1196f191f6af2f3be28713d792' })));
     }
 };
 NvSidebarcontent.style = nvSidebarcontentCss();

package/dist/cjs/{nv-sidebardivider.entry--rQv8d5T.js → nv-sidebardivider.entry-DY25WqI7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,7 @@ const NvSidebardivider = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return index.h(index.Host, { key: 'f8b607a8376e9e27d33ff13da96765bf46231cc0', role: "separator", "aria-orientation": "horizontal" });
+        return index.h(index.Host, { key: '31125496c90eb141cd70a69ac24f5d2b2165821c', role: "separator", "aria-orientation": "horizontal" });
     }
 };
 NvSidebardivider.style = nvSidebardividerCss();

package/dist/cjs/{nv-sidebarfooter.entry-C5R0sUI_.js → nv-sidebarfooter.entry-9BFpNPLP.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,7 @@ const NvSidebarfooter = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4ef8bb09df1cca9008062f4dc8f0252472da6a66' }, index.h("slot", { key: 'b30037ecc79272287a5ad134b1b17ce9516d14c7' })));
+        return (index.h(index.Host, { key: '1d281299e81cf2081b6e77f3a47e75c8efe699fa' }, index.h("slot", { key: 'd0211b2b36ae6dc31f1a63e82eb8cc7c58c8e56a' })));
     }
 };
 NvSidebarfooter.style = nvSidebarfooterCss();

package/dist/cjs/{nv-sidebargroup.entry-DdrpLbU7.js → nv-sidebargroup.entry-Cj52DXba.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -15,7 +15,7 @@ const NvSidebargroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e23656515b0882eaeed7a9a3b5c772deab41cd9c', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '41600406fb5fd8f3845464260ccbcb3845d52b37', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '14303ef78c5da82c9a6d94d09a1e9341ade5bee4' })));
+        return (index.h(index.Host, { key: '039c251fd46c3c178d1fc5329cbf676947f9f736', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: 'f2fc7cbbe469ab8f71caa86ec62ed98347c1072a', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '67cf9ff6aa2f61feaf1c3966e7975fbf5273229c' })));
     }
 };
 NvSidebargroup.style = nvSidebargroupCss();

package/dist/cjs/{nv-sidebarheader.entry-HuBPIsyf.js → nv-sidebarheader.entry-_WZgNwoi.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,7 @@ const NvSidebarheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '5e0b6bdc78618f3e434b62b6f6e4d60c220895ce' }, index.h("slot", { key: 'ae0f11bea6f4f9bbe5376d0870453648dc4acc77' })));
+        return (index.h(index.Host, { key: 'f29fff2d903edbcea70de45e3aca5e7049872464' }, index.h("slot", { key: 'e5854558583d51d0dba078da41311fedcaeb9bc5' })));
     }
 };
 NvSidebarheader.style = nvSidebarheaderCss();

package/dist/cjs/{nv-sidebarlogo.entry-TZNPoqnA.js → nv-sidebarlogo.entry-4Zy6k3V5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -24,7 +24,7 @@ const NvSidebarlogo = class {
     render() {
         const logoSrc = this.logo || this.defaultLogo;
         const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
-        return (index.h(index.Host, { key: '4a4ce90770480c97bbe8d940cf30f75b838de6c4' }, index.h("div", { key: '0ff88ef0a319410b0162f79738c13b3eb304fccb', class: "nv-sidebarlogo-container" }, index.h("img", { key: '6e94515fac21420295752374392e24de5079f013', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: '88f326b233a44c0e4bbc1efbeabfa619f27366a2', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), index.h("slot", { key: 'bb09f8c0b8df53e8e3a47cc70235ca1599420ec1', name: "label" }), this.label && index.h("span", { key: 'b711afc9977d86decc2f475b457e8a8d6ed507f0', class: "nv-sidebarlogo-title" }, this.label))));
+        return (index.h(index.Host, { key: '6c8f69d79da3f6f308489b440951c4c70bbf1607' }, index.h("div", { key: '614c4925f8e26fbcb53387f0d166d51435a67759', class: "nv-sidebarlogo-container" }, index.h("img", { key: 'e6e6d3b5a024179c7e0042a3fd2be330379fd1c5', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: 'f58059a9ec0ddc7840e77fcd3ec64d1e30b87a13', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), index.h("slot", { key: '2f895cfb6487af387d501bb0d22f39967a08b83a', name: "label" }), this.label && index.h("span", { key: 'df6039eb0a010bc547a3017ca50be61b9929337d', class: "nv-sidebarlogo-title" }, this.label))));
     }
 };
 NvSidebarlogo.style = nvSidebarlogoCss();

package/dist/cjs/{nv-sidebarnavitem.entry-BWc3mF5I.js → nv-sidebarnavitem.entry-fQ9sqxDj.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -276,7 +276,7 @@ const NvSidebarnavitem = class {
     render() {
         const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
         const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
-        return (index.h(index.Host, { key: '1b2cf1eb2d9c5042aeb24324194feb1b55650ca9', role: "listitem" }, index.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 && (index.h("div", { key: '7f5bcd6d41518923d6a83ddca423660eb2a41e6f', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: 'bd910ba67edcd13bacea4cd6c229a20c6cb20911', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: 'cd52de830137aa70411c49d619e0ede95bcaf67f', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: '103b75a710cf47e26143d4821826c95d9b17408c', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: 'bae51d0b18e157637987b686d9ee021031256290' })), index.h("div", { key: 'a8eb101fb69af8a4ac279d6a3ad5652e22e22e33', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: '1d797ec2458e3e4abab727cfdb0939f6be082164', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '2d4e477da92c41c7b74e30829bb283b7bb130759', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: '5012ca8ad3b830a2fd57c0382d446a2891d7949a', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: 'f7fd2c3cda2ae781ce10a9bc92cbd74154a18ba1', class: "nv-sidebarnavitem-subitems", ref: el => {
+        return (index.h(index.Host, { key: '5d7b7d92812e20fa0ff6765506afc26965bcad19', role: "listitem" }, index.h("div", { key: '080e96026b2b1d8ed1edfe3b291aea27b3ef6a29', 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 && (index.h("div", { key: 'e97b9141eaf73fb363374227b59317bdf40289a3', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '1c7f7bbf4fd36963873b70a65786e4f89463e636', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '53151726d69a262a40e3eae7751757081e7cc70e', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: '1a0a208300d3d17e7c1ecce3db5a307167be730e', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: 'e92c48e3d9c71d767fe7e775c97d6da678f132e5' })), index.h("div", { key: '0f436e17da2cfadb01096eaa7854ad2c2ed2a4b3', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: '71d23bd377b11c2bf5eaf17c25e26df33b4d9b53', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '1d6c4ab8f326d39bd7b452d8b0fe44577369b9f4', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: '13f4eb6174a76790bac429227d05de1beae4b4ee', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: '6d5a87e10c7394663237f466d36871fe7cce48ae', 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;
@@ -291,7 +291,7 @@ const NvSidebarnavitem = class {
                         });
                     }
                 }
-            } }, index.h("slot", { key: 'c3d3fb65b3af3550c10c14937dea1a981e3eb010', name: "subitems" })))));
+            } }, index.h("slot", { key: '6790db049f61ca41292bfd865884548a5a5da5d0', name: "subitems" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-sidebarnavsubitem.entry-DekANwO8.js → nv-sidebarnavsubitem.entry-1iBobkME.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -27,7 +27,7 @@ const NvSidebarnavsubitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '05f74ef3cf6f93804e4446fe23977d8773deb7e2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'f1f2db51fbff9c2f58ba317cb5fcbe1805cd189b', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: 'c476dfbda77ee7bcca1338ef8d8b103806e6e3a7', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'b80cb20a4f13b691cbd31c344d442f8a23585a26' })), index.h("div", { key: '383dc01158c4752506a6069be9abe2e20b83b9e4', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '2c63f696dd64ef8f680f3b85959d756952fd8db4', name: "trailing" }))));
+        return (index.h(index.Host, { key: '868adf5adb19818ca6caab0f866bfd9c2bf1c6f6', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: '212d3e04dde99a698081e8ffc3aa39e696883794', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '2ac964d11cdc914e329a0b6edcc6753d8182e60d', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'be2a8d0b2e81f6f299ae9574c1358cfba28ed1a9' })), index.h("div", { key: '62e4e65e5c502c379851201cf038c6ca49ec051d', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '45cb80e9cbc0ab886ff7124035e781ae7f616f75', name: "trailing" }))));
     }
 };
 NvSidebarnavsubitem.style = nvSidebarnavsubitemCss();

package/dist/cjs/{nv-split.entry-BOwOB8FW.js → nv-split.entry-Dfzpge0r.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -326,7 +326,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8ad8bebda77f9868b9715280c0157f247057026d', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '8ca002feab0c3cd7755a5f1f53864e4e20585420', name: "pane" }), index.h("slot", { key: 'f7f7352ed8c326ec263f6d617bcd84fea02689ea', name: "gutter" })));
+        return (index.h(index.Host, { key: '91f106634a9f04a3b6aced262ea84e75b294255e', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '17fb1041dc82b510d8c303208891a2eb455b885a', name: "pane" }), index.h("slot", { key: '4900d19af850f103a191769ef23c0cd5d2531375', name: "gutter" }), index.h("slot", { key: 'bfad8d859270f46094655103f10182c25c2c94fe' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-stack.entry-CaTiSLGN.js → nv-stack.entry-BnCput1S.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 require('@stencil/react-output-target/runtime');
 require('react');
@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '861c5eed0b6dc7cdd5bf3a2d07af92127e2025bf', class: clsxChV9xqsO.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') }, index.h("slot", { key: '4cf3d3fb15fa6c4ed2d7d6bb70334965b0cca457' })));
+        return (index.h(index.Host, { key: 'fb4c34f7f678b980d4caceb71c420dc6de5d0322', class: clsxChV9xqsO.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') }, index.h("slot", { key: '2a5b1b24802d9527f5d076a316401f2bb403c979' })));
     }
 };
 NvStack.style = nvStackCss();

package/dist/cjs/nv-statusindicator.entry-ClPHcTkz.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var index = require('./index-DXwd3F_r.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvStatusindicatorCss = () => `nv-statusindicator{display:inline-flex;align-items:center;gap:var(--status-indicator-gap-x);padding:var(--status-indicator-padding-y) var(--status-indicator-padding-x);height:var(--status-indicator-height);border-radius:var(--status-indicator-radius);border:1px solid;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--status-indicator-label-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--status-indicator-label-line-height);width:fit-content;vertical-align:middle}nv-statusindicator.status-success{color:var(--color-feedback-success-low-text);border-color:var(--color-feedback-success-low-border)}nv-statusindicator.status-success nv-icon{color:var(--color-feedback-success-low-icon)}nv-statusindicator.status-success.emphasis-high{background-color:var(--color-feedback-success-low-background);border-color:var(--color-feedback-success-low-border-subtle)}nv-statusindicator.status-warning{color:var(--color-feedback-warning-low-text);border-color:var(--color-feedback-warning-low-border)}nv-statusindicator.status-warning nv-icon{color:var(--color-feedback-warning-low-icon)}nv-statusindicator.status-warning.emphasis-high{background-color:var(--color-feedback-warning-low-background);border-color:var(--color-feedback-warning-low-border-subtle)}nv-statusindicator.status-error{color:var(--color-feedback-error-low-text);border-color:var(--color-feedback-error-low-border)}nv-statusindicator.status-error nv-icon{color:var(--color-feedback-error-low-icon)}nv-statusindicator.status-error.emphasis-high{background-color:var(--color-feedback-error-low-background);border-color:var(--color-feedback-error-low-border-subtle)}nv-statusindicator.status-information{color:var(--color-feedback-information-low-text);border-color:var(--color-feedback-information-low-border)}nv-statusindicator.status-information nv-icon{color:var(--color-feedback-information-low-icon)}nv-statusindicator.status-information.emphasis-high{background-color:var(--color-feedback-information-low-background);border-color:var(--color-feedback-information-low-border-subtle)}nv-statusindicator.status-neutral{color:var(--color-feedback-neutral-low-text);border-color:var(--color-feedback-neutral-low-border)}nv-statusindicator.status-neutral nv-icon{color:var(--color-feedback-neutral-low-icon)}nv-statusindicator.status-neutral.emphasis-high{background-color:var(--color-feedback-neutral-low-background);border-color:var(--color-feedback-neutral-low-border-subtle)}nv-statusindicator .nv-statusindicator-label{white-space:nowrap}`;
+
+const STATUS_ICONS = {
+    success: 'circle-check',
+    warning: 'alert-triangle',
+    error: 'alert-circle',
+    information: 'info-circle',
+    neutral: 'help',
+};
+const NvStatusindicator = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The status variant of the indicator.
+         */
+        this.status = 'neutral';
+        /**
+         * The visual emphasis of the indicator.
+         */
+        this.emphasis = 'low';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const hasLabel = Boolean(this.label);
+        return (index.h(index.Host, { key: '2f1e9277152efca4f2f3ba95b44934427555854f', class: clsxChV9xqsO.clsx(`status-${this.status}`, `emphasis-${this.emphasis}`), ...(!hasLabel ? { 'aria-label': this.status } : {}) }, index.h("nv-icon", { key: '55ba1905d8cde217be9156401c4075522b1e022b', name: STATUS_ICONS[this.status], size: "xs", "aria-hidden": "true" }), hasLabel && index.h("span", { key: 'a55382c27c4a40dbf7c800c1f1127f31f47f2852', class: "nv-statusindicator-label" }, this.label)));
+    }
+};
+NvStatusindicator.style = nvStatusindicatorCss();
+
+exports.nv_statusindicator = NvStatusindicator;

package/dist/cjs/{nv-table.entry-LFZaS0Dy.js → nv-table.entry-DsllD6Bz.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DgKzi_Pd.js');
+var index = require('./index-DXwd3F_r.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -180,7 +180,7 @@ function updateCellWidthFromResize(state, event, minWidth = TABLE_CONSTANTS.MIN_
     setCellWidth(state.resizingCell, newWidth);
 }
 
-const nvTableCss = () => `nv-table table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;background:var(--color-level-00-background)}nv-table table thead{background:var(--components-datagrid-header-background)}nv-table table tbody tr.nv-datatable-row-clickable{cursor:pointer}nv-table table tbody tr.nv-datatable-row-clickable td{transition:background-color 120ms ease-in-out}nv-table table tbody tr.nv-datatable-row-clickable:focus-visible{outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-table table tbody tr[data-selected]{background:var(--components-datagrid-body-background-active)}nv-table table[data-row-click-enabled=true] tbody tr.nv-datatable-row-clickable:hover td{background:var(--components-datagrid-body-background-hover)}nv-table table[data-row-click-enabled=false]>tbody>tr:hover:not([data-selected]){background-color:transparent !important;cursor:default}nv-table table[data-row-click-enabled=false]>tbody>tr:hover:not([data-selected])>td{background:var(--components-datagrid-body-background-default) !important}nv-table table td{height:var(--spacing-16);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x) var(--spacing-2) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);background:var(--components-datagrid-body-background-default);border-bottom:1px solid var(--components-datagrid-body-border)}nv-table table th{position:relative;text-align:left;padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-right) var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);padding-right:calc(var(--datagrid-cell-header-padding-right) + 12px);color:var(--color-content-low-text);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-high-emphasis);line-height:var(--line-height-base);min-width:40px;border-bottom:1px solid var(--components-datagrid-header-border);background:var(--components-datagrid-header-background)}nv-table table th::after{content:"";position:absolute;top:0;right:0;width:12px;height:50%;transform:translateY(50%);cursor:col-resize;background:linear-gradient(90deg, transparent 0%, transparent calc(50% - 1px), var(--components-datagrid-header-border), calc(50% - 1px), var(--components-datagrid-header-border) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);opacity:0;transition:opacity 0.05s ease-in-out}nv-table table th[data-grow]{width:unset}nv-table table th:hover::after{opacity:1}nv-table table th[data-no-resize]::after{display:none}nv-table [data-sticky-left]{position:sticky;z-index:1;background:var(--color-level-00-background);left:0;top:0}nv-table [data-sticky-right]{position:sticky;z-index:1;background:var(--color-level-00-background);right:0;top:0}nv-table [data-sticky-top] th{position:sticky;z-index:1;background:var(--color-level-00-background);top:0}`;
+const nvTableCss = () => `nv-table table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;background:var(--color-level-00-background)}nv-table table thead{background:var(--components-datagrid-header-background)}nv-table table tbody tr:hover{background:var(--components-datagrid-body-background-hover)}nv-table table tbody tr[data-selected]{background:var(--components-datagrid-body-background-active)}nv-table table tbody tr[data-selected]:hover{background:var(--components-datagrid-body-background-active)}nv-table table tbody tr.nv-datatable-row-clickable{cursor:pointer}nv-table table tbody tr.nv-datatable-row-clickable td{transition:background-color 120ms ease-in-out}nv-table table tbody tr.nv-datatable-row-clickable:focus-visible{outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-table table tbody tr.nv-datatable-expanded-row>td{padding:0;height:auto;border-bottom:1px solid var(--components-datagrid-expander-border);background:var(--components-datagrid-expander-expander-background)}nv-table table tbody .nv-datatable-expanded-content{position:sticky;left:0;width:0;min-width:100%;padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x);box-sizing:border-box}nv-table table[data-row-click-enabled=true] tbody tr.nv-datatable-row-clickable:hover td{background:var(--components-datagrid-body-background-hover)}nv-table table[data-row-click-enabled=false]>tbody>tr:hover:not([data-selected]){cursor:default}nv-table table[data-row-click-enabled=false]>tbody>tr:hover:not([data-selected])>td{background:var(--components-datagrid-body-background-default) !important}nv-table table td{height:var(--spacing-16);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x) var(--spacing-2) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);background:var(--components-datagrid-body-background-default);border-bottom:1px solid var(--components-datagrid-body-border)}nv-table table th{position:relative;text-align:left;padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-right) var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);padding-right:calc(var(--datagrid-cell-header-padding-right) + 12px);color:var(--color-content-low-text);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-high-emphasis);line-height:var(--line-height-base);min-width:40px;border-bottom:1px solid var(--components-datagrid-header-border);background:var(--components-datagrid-header-background)}nv-table table th::after{content:"";position:absolute;top:0;right:0;width:12px;height:50%;transform:translateY(50%);cursor:col-resize;background:linear-gradient(90deg, transparent 0%, transparent calc(50% - 1px), var(--components-datagrid-header-border), calc(50% - 1px), var(--components-datagrid-header-border) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);opacity:0;transition:opacity 0.05s ease-in-out}nv-table table th[data-grow]{width:unset}nv-table table th:hover::after{opacity:1}nv-table table th[data-no-resize]::after{display:none}nv-table [data-sticky-left]{position:sticky;z-index:1;background:var(--color-level-00-background);left:0;top:0}nv-table [data-sticky-right]{position:sticky;z-index:1;background:var(--color-level-00-background);right:0;top:0}nv-table [data-sticky-top] th{position:sticky;z-index:1;background:var(--color-level-00-background);top:0}`;
 
 const NvTable = class {
     constructor(hostRef) {
@@ -236,7 +236,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'a6882cbcf9b0b12776f6d4be6d9cbfb42aff6833' }, index.h("slot", { key: 'd4d47a2eb77c50ff30109e217ceecd2677b9d28d' })));
+        return (index.h(index.Host, { key: 'bc442df56ece833f6a3b6a4af24e0e67e430aefd' }, index.h("slot", { key: '9f0deb196b2a1bfca8d30a05a752e446068f3f3c' })));
     }
     get host() { return index.getElement(this); }
 };