@nova-design-system/nova-react 3.22.0 → 3.23.0

package/dist/cjs/nv-sidebarnavitem.entry-DglvcCOD.js

@@ -0,0 +1,297 @@
+'use strict';
+
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarnavitemCss = "nv-sidebarnavitem{display:flex;flex-direction:column;gap:0}nv-sidebarnavitem .nv-sidebarnavitem-trigger{display:flex;align-items:center;gap:var(--sidebar-item-gap-x);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x);border-radius:var(--sidebar-item-radius);cursor:pointer;transition:all 0.15s ease;font-size:var(--sidebar-item-font-size);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-low-text);background:var(--components-sidebar-background);text-decoration:none;--nv-component-background:var(--components-sidebar-background);--nv-sidebarnavitem-background:var(--components-sidebar-background)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:hover{background-color:var(--color-interaction-container-neutral-background-hover);color:var(--color-content-medium-text);--nv-component-background:var(--color-interaction-container-neutral-background-hover);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus,nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-within{outline:none}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-visible,nv-sidebarnavitem .nv-sidebarnavitem-trigger:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavitem[active] .nv-sidebarnavitem-trigger{background-color:var(--color-interaction-container-neutral-background-active);color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-medium-emphasis);--nv-component-background:var(--color-interaction-container-neutral-background-active);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavitem .nv-sidebarnavitem-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;width:var(--sidebar-item-icon-size);height:var(--sidebar-item-icon-size);position:relative}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon{overflow:visible;margin:0;justify-content:center}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon nv-notification-bullet{position:absolute;transform:translate(50%, -50%);z-index:1;--sidebar-notification-bullet-size-reduced:calc(\n    var(--sidebar-item-icon-size) * 0.4\n  )}nv-sidebarnavitem .nv-sidebarnavitem-content{flex:1;display:flex;align-items:center}nv-sidebarnavitem .nv-sidebarnavitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavitem .nv-sidebarnavitem-trailing{display:flex;align-items:center;gap:var(--spacing-2);margin-left:auto}nv-sidebarnavitem .nv-sidebarnavitem-chevron{transition:transform 0.2s ease;color:inherit}nv-sidebarnavitem[open] .nv-sidebarnavitem-chevron{transform:rotate(180deg)}nv-sidebarnavitem .nv-sidebarnavitem-subitems{display:flex;flex-direction:column;gap:0;max-height:0;overflow:hidden;opacity:0;transition:max-height 0.3s ease, opacity 0.2s ease;padding-left:0}nv-sidebarnavitem[open] .nv-sidebarnavitem-subitems{opacity:1;margin-top:var(--spacing-1)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trigger{justify-content:center;gap:0;padding:var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-content{display:none}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trailing,nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-chevron{display:none}";
+
+const NvSidebarnavitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Whether this item represents the active/current page.
+         * Can be set automatically when a sub-item becomes active.
+         */
+        this.active = false;
+        /**
+         * Whether this item can be collapsed/expanded (has sub-items).
+         */
+        this.collapsible = false;
+        /**
+         * Whether the collapsible item is currently open (showing sub-items).
+         */
+        this.open = false;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        this.hasSubitems = false;
+        this.isSidebarCollapsed = false;
+        this.wasActiveFromSubitem = false; // Track if active was set by subitem logic
+        //#endregion STATE
+        /****************************************************************************/
+        //#region METHODS
+        this.handleToggle = (event) => {
+            // Ignore clicks that originated from subitems (they bubble up but shouldn't toggle)
+            const target = event.target;
+            if (target.closest('nv-sidebarnavsubitem')) {
+                return; // Let the subitem's link handle navigation normally
+            }
+            // In collapsed sidebar mode, navigate to the main link instead of toggling
+            if (this.isSidebarCollapsed) {
+                // Find the first link that is NOT inside subitems
+                const link = this.el.querySelector('.nv-sidebarnavitem-content a, :scope > a');
+                if (link === null || link === void 0 ? void 0 : link.href) {
+                    // Check if click was directly on the link - if so, let it handle naturally
+                    if (target.closest('a')) {
+                        return;
+                    }
+                    // Trigger navigation by clicking the link programmatically
+                    link.click();
+                }
+                return;
+            }
+            // Only handle toggle for collapsible items when sidebar is expanded
+            if (this.collapsible) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.open = !this.open;
+            }
+            // For non-collapsible items in expanded mode, let the link handle the navigation
+            // Don't prevent default or stop propagation - allow the link to work normally
+        };
+        this.isAnimating = false;
+        this.hasInitializedHeight = false;
+        /** Tracks the last open state that was animated to, to prevent redundant animations */
+        this.lastAnimatedOpenState = null;
+        this.updateSubitemsHeight = (force = false) => {
+            if (!this.subitemsRef)
+                return;
+            // Skip animation if we're already in the target state (prevents animation on active change)
+            // Only animate if:
+            // 1. forced (explicit toggle by user via @Watch)
+            // 2. OR this is the first animation (lastAnimatedOpenState is null)
+            // 3. OR the open state has actually changed since last animation
+            if (!force &&
+                this.lastAnimatedOpenState !== null &&
+                this.lastAnimatedOpenState === this.open) {
+                return;
+            }
+            // Don't re-animate if already animating and not forced
+            if (this.isAnimating && !force) {
+                return;
+            }
+            this.isAnimating = true;
+            this.lastAnimatedOpenState = this.open;
+            if (this.open) {
+                // Calculate real height and animate to it
+                this.subitemsRef.style.transition = 'none';
+                this.subitemsRef.style.maxHeight = '0px';
+                requestAnimationFrame(() => {
+                    if (this.subitemsRef) {
+                        this.subitemsRef.style.transition =
+                            'max-height 0.3s ease, opacity 0.2s ease';
+                        this.subitemsRef.style.maxHeight =
+                            this.subitemsRef.scrollHeight + 'px';
+                        // Reset animation flag after animation completes
+                        setTimeout(() => {
+                            this.isAnimating = false;
+                        }, 300); // Match animation duration
+                    }
+                });
+            }
+            else {
+                // Animate to 0
+                this.subitemsRef.style.transition = 'none';
+                this.subitemsRef.style.maxHeight = this.subitemsRef.scrollHeight + 'px';
+                requestAnimationFrame(() => {
+                    if (this.subitemsRef) {
+                        this.subitemsRef.style.transition =
+                            'max-height 0.3s ease, opacity 0.2s ease';
+                        this.subitemsRef.style.maxHeight = '0px';
+                        // Reset animation flag after animation completes
+                        setTimeout(() => {
+                            this.isAnimating = false;
+                        }, 300); // Match animation duration
+                    }
+                });
+            }
+        };
+        this.checkSidebarCollapsed = () => {
+            var _a;
+            const sidebar = this.el.closest('nv-sidebar');
+            const wasCollapsed = this.isSidebarCollapsed;
+            this.isSidebarCollapsed = (_a = sidebar === null || sidebar === void 0 ? void 0 : sidebar.hasAttribute('collapsed')) !== null && _a !== void 0 ? _a : false;
+            // When sidebar collapse state changes, update active state based on subitems
+            if (wasCollapsed !== this.isSidebarCollapsed) {
+                this.updateActiveFromSubitems();
+            }
+        };
+        /**
+         * Checks if any sub-item is active and updates parent active state.
+         * - When sidebar is collapsed: if a sub-item is active, parent should be active
+         * - When sidebar is expanded: if a sub-item is active AND parent is not open, parent should be active
+         *   (because sub-items are hidden, we need to indicate the parent contains an active child)
+         */
+        this.updateActiveFromSubitems = () => {
+            if (!this.hasSubitems)
+                return;
+            // Find all sub-items
+            const subItems = Array.from(this.el.querySelectorAll('nv-sidebarnavsubitem'));
+            // Check if any sub-item is active
+            const hasActiveSubitem = subItems.some(subItem => subItem.active);
+            if (this.isSidebarCollapsed) {
+                // When sidebar is collapsed AND a sub-item is active, make parent active
+                if (hasActiveSubitem) {
+                    this.active = true;
+                    this.wasActiveFromSubitem = true;
+                }
+                else {
+                    // When collapsed and no sub-item is active, remove active state only if we set it
+                    if (this.wasActiveFromSubitem) {
+                        this.active = false;
+                        this.wasActiveFromSubitem = false;
+                    }
+                }
+            }
+            else {
+                // When sidebar is expanded
+                if (hasActiveSubitem && !this.open) {
+                    // If a sub-item is active AND parent is not open (sub-items hidden),
+                    // make parent active to indicate it contains an active child
+                    this.active = true;
+                    this.wasActiveFromSubitem = true;
+                }
+                else if (hasActiveSubitem && this.open) {
+                    // If a sub-item is active BUT parent is open (sub-items visible),
+                    // remove active state from parent (only sub-item should be active)
+                    if (this.wasActiveFromSubitem) {
+                        this.active = false;
+                        this.wasActiveFromSubitem = false;
+                    }
+                }
+                else {
+                    // No active sub-item, remove active state if we set it
+                    if (this.wasActiveFromSubitem) {
+                        this.active = false;
+                        this.wasActiveFromSubitem = false;
+                    }
+                }
+                // Note: activePath logic in nv-sidebar can also manage parent active state
+                // (when parent href matches activePath exactly)
+            }
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        // Check if there are sub-items in any slot
+        const subItems = Array.from(this.el.children).filter(child => child.tagName.toLowerCase() === 'nv-sidebarnavsubitem');
+        this.hasSubitems = subItems.length > 0;
+        // Move sub-items to the subitems slot
+        if (this.hasSubitems) {
+            subItems.forEach(item => {
+                item.setAttribute('slot', 'subitems');
+            });
+        }
+        // Check sidebar collapsed state
+        this.checkSidebarCollapsed();
+        // Watch for sidebar state changes
+        const sidebar = this.el.closest('nv-sidebar');
+        if (sidebar) {
+            this.mutationObserver = new MutationObserver(() => {
+                this.checkSidebarCollapsed();
+            });
+            this.mutationObserver.observe(sidebar, {
+                attributes: true,
+                attributeFilter: ['collapsed'],
+            });
+        }
+        // Watch for sub-items active state changes
+        if (this.hasSubitems) {
+            // Observe the subitems container for changes (including new sub-items being added)
+            // Using subtree: true to catch all attribute changes in descendants
+            const subitemsContainer = this.el.querySelector('.nv-sidebarnavitem-subitems');
+            if (subitemsContainer) {
+                this.subitemsMutationObserver = new MutationObserver(() => {
+                    this.updateActiveFromSubitems();
+                });
+                // Observe the container for child list changes and attribute changes in descendants
+                this.subitemsMutationObserver.observe(subitemsContainer, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['active'],
+                });
+            }
+            else {
+                // If container doesn't exist yet (not collapsible or not rendered), observe the element itself
+                // This handles cases where sub-items are direct children
+                this.subitemsMutationObserver = new MutationObserver(() => {
+                    this.updateActiveFromSubitems();
+                });
+                this.subitemsMutationObserver.observe(this.el, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['active'],
+                });
+            }
+        }
+        // Initial check for active subitems
+        this.updateActiveFromSubitems();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+        if (this.subitemsMutationObserver) {
+            this.subitemsMutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region WATCHERS
+    onOpenChanged(newValue, oldValue) {
+        // Only animate if the value actually changed (prevents false triggers from React re-renders)
+        if (newValue === oldValue) {
+            return;
+        }
+        // Force update when open state changes (user clicked toggle)
+        this.updateSubitemsHeight(true);
+        // Update active state based on subitems when open state changes
+        this.updateActiveFromSubitems();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
+        const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
+        return (index.h(index.Host, { key: 'c0c9c63cb295441389b5ced9a4b0a0d5a1af99cd', role: "listitem" }, index.h("div", { key: '6673c3f4c14762bff8512ecc430febddfa74b307', 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: '25f703e9fb7375b8b562be54f080120ae037dd9f', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '1a4e345c90afcec159890db6c6b0e22d53dd673d', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '15b69d1a2325daed7d6583ed10906fe4e91809e5', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'c717c09f39eab07616de419a35b11a5b7dfce5d1', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: '9f8687f151fd082a6737e7fbe6036cc3ebff3cc2' })), index.h("div", { key: 'b2c3d7a4c30ce96273731a05a1d361f5654582de', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: 'acf2dddbbbc7d2e83703c731a244237e0dc81153', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: 'adca5c7418a3b58afa5ef21ddd3fa9b2d880a56c', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: 'a4a4369d4ba76f567cca439d1b4c7e95ad5ba98c', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: '2d4fadb0b547eb369a702bb8210b3312dde505b2', 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;
+                    if (el && !this.hasInitializedHeight) {
+                        // Initialize height only on first mount, not on re-renders
+                        this.hasInitializedHeight = true;
+                        requestAnimationFrame(() => {
+                            // Only animate if item is open, otherwise it will animate when opened
+                            if (this.open) {
+                                this.updateSubitemsHeight();
+                            }
+                        });
+                    }
+                }
+            } }, index.h("slot", { key: 'f0ffb970aa2d84580205ba110858d3f1c27875a3', name: "subitems" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["onOpenChanged"]
+    }; }
+};
+NvSidebarnavitem.style = nvSidebarnavitemCss;
+
+exports.nv_sidebarnavitem = NvSidebarnavitem;

package/dist/cjs/nv-sidebarnavsubitem.entry-Dt1jKmC-.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarnavsubitemCss = "nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x) var(--sidebar-item-padding-y) calc(var(--sidebar-sub-item-padding-left) + var(--sidebar-item-padding-x));cursor:pointer;transition:all 0.15s ease;position:relative;min-height:var(--spacing-10);background-color:var(--color-interaction-container-neutral-background);border-radius:var(--sidebar-item-radius);--nv-component-background:var(--color-interaction-container-neutral-background)}nv-sidebarnavsubitem:hover{background-color:var(--color-interaction-container-neutral-background-hover);--nv-component-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavsubitem:focus,nv-sidebarnavsubitem:focus-within{outline:none}nv-sidebarnavsubitem:focus-visible,nv-sidebarnavsubitem:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{display:none}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{flex:1;display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-content-medium-text);text-decoration:none;font-weight:var(--font-weight-medium-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavsubitem:hover .nv-sidebarnavsubitem-content{color:var(--color-content-medium-text)}nv-sidebarnavsubitem[active]{background-color:var(--color-interaction-container-neutral-background-active);--nv-component-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavsubitem[active] .nv-sidebarnavsubitem-content{color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-high-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:flex;align-items:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{max-width:0;opacity:0;margin:0;overflow:hidden;transition:opacity 0.2s ease, max-width 0.2s ease}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{margin-right:0;width:var(--spacing-6);justify-content:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:none}";
+
+const NvSidebarnavsubitem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Whether this sub-item represents the active/current page.
+         */
+        this.active = false;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    // Note: We no longer use stopPropagation() here because it prevents React Router
+    // (and other SPA routers) from receiving the click event due to event delegation.
+    // Instead, the parent nv-sidebarnavitem checks if clicks originate from subitems.
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '8ae8c5e2038145bd458a35d237495a06fde97294', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: '559a99d72973f7af43091c5c920e77d8cad3944c', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '204c7ad681d51310f43b618ef14a12d0ccc93ddc', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'f4717aee216fbeac4dbfe0d98b34fe7e83476701' })), index.h("div", { key: 'b5db84c75ae4e51d8a048000a49697eaf4b20f1d', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: 'b6d0afcd6b4ace60b32f531f414b70aba513a274', name: "trailing" }))));
+    }
+};
+NvSidebarnavsubitem.style = nvSidebarnavsubitemCss;
+
+exports.nv_sidebarnavsubitem = NvSidebarnavsubitem;

package/dist/cjs/{nv-split.entry-CYP2bTTM.js → nv-split.entry-mzg2F66T.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--nv-color-neutral-400, #ccc);border-radius:2px;transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--nv-color-brand-primary, #0066cc)}nv-split .nv-split-gutter::before{content:\"\";position:absolute;background-repeat:no-repeat;background-position:center;opacity:0.4;transition:opacity 0.2s ease;pointer-events:none}nv-split .nv-split-gutter:hover::before{opacity:0.7}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--nv-split-gutter-size, 24px);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:2px;height:60%;left:50%;top:20%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter::before{width:16px;height:16px}nv-split[direction=vertical]>.nv-split-gutter{height:var(--nv-split-gutter-size, 24px);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:2px;width:60%;top:50%;left:20%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter::before{width:16px;height:16px}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--nv-color-neutral-500, #9ca3af)}nv-split>[slot=pane]{flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
-const NvSplitStyle0 = nvSplitCss;
+const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:\"\";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
 
 const NvSplit = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sizesChanged = index.createEvent(this, "sizesChanged");
+        this.sizesChanged = index.createEvent(this, "sizesChanged", 3);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -324,7 +324,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '6b1fd4447295f209a9b0ea95b7d2a07200204504', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '67089b66457c4ad64abb80749d64ca67c881a1c0', name: "pane" }), index.h("slot", { key: '2fe9da5dd2aa2ff5b14bdd9ea99e9f0fa027931d', name: "gutter" })));
+        return (index.h(index.Host, { key: '2266f982349909b08637721e0bf5d8792fa2f3aa', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '0b0845ae2f93bb137692fd570beaa2e26816c1c9', name: "pane" }), index.h("slot", { key: 'ac322712eb7024dde9efc41dac946196fd15a786', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -332,6 +332,6 @@ const NvSplit = class {
         "direction": ["onDirectionChanged"]
     }; }
 };
-NvSplit.style = NvSplitStyle0;
+NvSplit.style = nvSplitCss;
 
 exports.nv_split = NvSplit;

package/dist/cjs/{nv-stack.entry-D35-75Vw.js → nv-stack.entry-nnvjTrBy.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var index = require('./index-CtjeeUI-.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvStackCss = "nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";
-const NvStackStyle0 = nvStackCss;
 
 const NvStack = class {
     constructor(hostRef) {
@@ -23,9 +23,9 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '65adeb492f9eb9b709c809d65b52f4447d1c938d', class: clsx297c1ffe.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: '09773d6affbc9bf3c18e75162d9c096dd31a48e7' })));
+        return (index.h(index.Host, { key: 'fbdaf5b2fb134b050883a512b4aeb96b070017c1', 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: '6c7c231b8ff2575a1b509539d227468629fae6ab' })));
     }
 };
-NvStack.style = NvStackStyle0;
+NvStack.style = nvStackCss;
 
 exports.nv_stack = NvStack;

package/dist/cjs/{nv-table.entry-DevWJBnL.js → nv-table.entry-DkbNgxtI.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
@@ -180,7 +181,6 @@ function updateCellWidthFromResize(state, event, minWidth = TABLE_CONSTANTS.MIN_
 }
 
 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 td{background:var(--components-datagrid-body-background-hover)}nv-table table tbody tr[data-selected]{background:var(--components-datagrid-body-background-active)}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 NvTableStyle0 = nvTableCss;
 
 const NvTable = class {
     constructor(hostRef) {
@@ -236,10 +236,10 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '684a51e016d83eeb0ab76f07fe6d26a06bf00457' }, index.h("slot", { key: '420b9cbcb641692ed95d54ec2e0af1c0b09776c3' })));
+        return (index.h(index.Host, { key: 'ec194bed7ec58642be9f6b52a737e2f9375a152e' }, index.h("slot", { key: '009ce0f20491156ca93141c85683f0be499a9938' })));
     }
     get host() { return index.getElement(this); }
 };
-NvTable.style = NvTableStyle0;
+NvTable.style = nvTableCss;
 
 exports.nv_table = NvTable;

package/dist/cjs/{nv-tableheader.entry-Hs7nUSOC.js → nv-tableheader.entry-CRVFTQA-.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvTableheaderCss = "nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}";
-const NvTableheaderStyle0 = nvTableheaderCss;
+const nvTableheaderCss = "nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}";
 
 const NvTableheader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sortDirectionChanged = index.createEvent(this, "sortDirectionChanged");
+        this.sortDirectionChanged = index.createEvent(this, "sortDirectionChanged", 3);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -62,7 +62,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '03d7e74c19c0c1ef54f4d6f53eab0964af821f57', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '7408d11ba38b59f05bcdcffcb55d11ae36f93a34' }), this.sortable && (index.h("span", { key: 'c76ddbf61861d9cd45eb7b0d8c59095947677135', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '6d59b4b14dfe588142ccba2e1dc452754ea5a2f7', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: '89ea12419a6f07d3b945a2dec3ca40a169d1bf85', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '447c9f44b779cb7003209c3965127433e33f1ea9' }), this.sortable && (index.h("span", { key: 'bb4d1545d83b5fd2ce0b6860cdabbe22fe0f8ed0', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '03b14162d5a1f2e8cccc5fa2e49af9cdd247d4e7', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',
@@ -70,6 +70,6 @@ const NvTableheader = class {
             } })))));
     }
 };
-NvTableheader.style = NvTableheaderStyle0;
+NvTableheader.style = nvTableheaderCss;
 
 exports.nv_tableheader = NvTableheader;

package/dist/cjs/{nv-toggle.entry-Eje9d--6.js → nv-toggle.entry-oC9TVkr1.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+var index = require('./index-CtjeeUI-.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-toggle-border-default);background:var(--components-toggle-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default-checked);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
-const NvToggleStyle0 = nvToggleCss;
 
 const NvToggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -21,7 +21,7 @@ const NvToggle = class {
          * automatically generated to ensure unique identification, facilitating
          * proper label association and accessibility.
          */
-        this.inputId = v4A79185f4.v4();
+        this.inputId = v4BdYh22OP.v4();
         /**
          * Hides the label visually while still keeping it available for screen
          * readers.
@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c4307e84431894271a4fbe3ccd236f8b26d8d499', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'edb8c0ba8d92aa3864ff778a037bfb148601663a', class: "input-container" }, index.h("input", { key: 'f8be6f1936b390acdfaab0a87acea69d479e7a5a', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'c9dae62cda7d33fcd3dc4e1a2fd8173295a32ed3', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '365ed61ccd3ca72372998b4a3fc58d36de944f3a', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '77ee33f84756787e0f34507da294abb9514b703d', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5076c7b3cbf9f820592bb339df3251e280a9be9c', class: "description" }, index.h("slot", { key: '75f461109ac021aa51e6717ab56b1319a2b7f6ca', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: 'afeeed468bea015c59cdab86f85ee3b0145f8b11', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'fd56a2b878f063549315f5b48fe1eb7b249a3503', class: "input-container" }, index.h("input", { key: '8e0a260d2c80bb303ff9b1f1921290060ef5c92c', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '906d8bd545bffcc8f2e4deee3f760ae1366aa8b2', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fa2e7120d3f8f0dedd7ef953a7648aa1dca80ec4', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '598eb4b920bbc37c6dba5862e65221b586714728', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'fb4769f30a05fe2e953759990ff8922ebc906452', class: "description" }, index.h("slot", { key: '1e847c839e147d3a9aff41296e5d1d84266be9f5', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -75,6 +75,6 @@ const NvToggle = class {
         "checked": ["onCheckedChanged"]
     }; }
 };
-NvToggle.style = NvToggleStyle0;
+NvToggle.style = nvToggleCss;
 
 exports.nv_toggle = NvToggle;

package/dist/cjs/nv-togglebutton.entry-BTWCzbS9.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-xs-button-radius));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-sm-button-radius));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-md-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-md-button-radius));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-lg-button-radius));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
+
+const NvTogglebutton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggled = index.createEvent(this, "toggled", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Determines how large or small the togglebutton appears, allowing for
+         * customization of the togglebutton's dimensions to fit different design
+         * specifications and user needs.
+         */
+        this.size = 'md';
+        /**
+         * Prevents all interaction, rendering the toggle in a non-interactive state.
+         */
+        this.disabled = false;
+        /**
+         * Whether the button is active or not. Will not toggle automatically but
+         * needs to be controlled externally.
+         */
+        this.active = false;
+        /**
+         * Make it more or less visually prominent to users.
+         */
+        this.emphasis = 'high';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.toggled.emit({
+                value: this.value,
+                active: this.active,
+            });
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LISTENERS
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.el.click();
+        }
+    }
+    /* eslint-enable nova/event-bubbling */
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '0285637cb14c292c67d767dc83b72f52c5368269', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'a84f303e76070b99ff2c01e5ec400f2e78503b19' })));
+    }
+    get el() { return index.getElement(this); }
+};
+NvTogglebutton.style = nvTogglebuttonCss;
+
+exports.nv_togglebutton = NvTogglebutton;