@nova-design-system/nova-webcomponents 3.20.0 → 3.21.1-beta.0

package/dist/components/nv-sidebarnavitem.js

@@ -0,0 +1,335 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5829b9f7.js';
+import { d as defineCustomElement$3 } from './p-743b3452.js';
+import { d as defineCustomElement$2 } from './p-82c9b7cc.js';
+
+const nvSidebarnavitemCss = "nv-sidebarnavitem{display:flex;flex-direction:column;gap:0}nv-sidebarnavitem .nv-sidebarnavitem-trigger{display:flex;align-items:center;gap:var(--sidebar-primary-item-gap-x);padding:var(--sidebar-primary-item-padding-y) var(--sidebar-primary-item-padding-x);border-radius:var(--sidebar-primary-item-radius);cursor:pointer;transition:all 0.15s ease;font-size:var(--sidebar-primary-item-font-size);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-low-text);background:var(--color-interaction-container-neutral-background);text-decoration:none;--nv-component-background:var(--color-interaction-container-neutral-background);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-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-primary-item-icon-size);height:var(--sidebar-primary-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-primary-notification-bullet-size-reduced:calc(\n    var(--sidebar-primary-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;width:100%}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 NvSidebarnavitemStyle0 = nvSidebarnavitemCss;
+
+const NvSidebarnavitem$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarnavitem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * 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 (h(Host, { key: 'c0c9c63cb295441389b5ced9a4b0a0d5a1af99cd', role: "listitem" }, 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 && (h("div", { key: '25f703e9fb7375b8b562be54f080120ae037dd9f', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: '1a4e345c90afcec159890db6c6b0e22d53dd673d', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '15b69d1a2325daed7d6583ed10906fe4e91809e5', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: 'c717c09f39eab07616de419a35b11a5b7dfce5d1', class: "nv-sidebarnavitem-content" }, h("slot", { key: '9f8687f151fd082a6737e7fbe6036cc3ebff3cc2' })), h("div", { key: 'b2c3d7a4c30ce96273731a05a1d361f5654582de', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: 'acf2dddbbbc7d2e83703c731a244237e0dc81153', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: 'adca5c7418a3b58afa5ef21ddd3fa9b2d880a56c', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: 'a4a4369d4ba76f567cca439d1b4c7e95ad5ba98c', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (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();
+                            }
+                        });
+                    }
+                }
+            } }, h("slot", { key: 'f0ffb970aa2d84580205ba110858d3f1c27875a3', name: "subitems" })))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "open": ["onOpenChanged"]
+    }; }
+    static get style() { return NvSidebarnavitemStyle0; }
+}, [4, "nv-sidebarnavitem", {
+        "icon": [513],
+        "active": [1540],
+        "collapsible": [516],
+        "open": [1540],
+        "notificationCount": [514, "notification-count"],
+        "hasSubitems": [32],
+        "isSidebarCollapsed": [32]
+    }, undefined, {
+        "open": ["onOpenChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-sidebarnavitem", "nv-icon", "nv-notification-bullet"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-sidebarnavitem":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvSidebarnavitem$1);
+            }
+            break;
+        case "nv-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nv-notification-bullet":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvSidebarnavitem = NvSidebarnavitem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvSidebarnavitem, defineCustomElement };
+
+//# sourceMappingURL=nv-sidebarnavitem.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-sidebarnavitem.js","mappings":"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","names":["NvSidebarnavitem"],"sources":["src/components/nv-sidebarnavitem/styles/nv-sidebarnavitem.scss?tag=nv-sidebarnavitem","src/components/nv-sidebarnavitem/nv-sidebarnavitem.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-sidebarnavitem {\n  @include navitem-container();\n\n  .nv-sidebarnavitem-trigger {\n    @include navitem-trigger();\n  }\n\n  &[active] .nv-sidebarnavitem-trigger {\n    @include navitem-active();\n  }\n\n  .nv-sidebarnavitem-icon {\n    @include navitem-icon();\n    position: relative;\n\n    // Position notification bullet on icon when sidebar is collapsed\n    nv-sidebar[collapsed] & {\n      overflow: visible; // Allow cross-border backdrop to be visible\n      margin: 0;\n      justify-content: center;\n      \n      nv-notification-bullet {\n        position: absolute;\n        // Position at top-right corner of the icon container\n        // top: 0;\n        // right: 0;\n        // Transform to center the bullet on the corner\n        // Move it up and right by half its size to center it on the corner\n        transform: translate(50%, -50%);\n        z-index: 1;\n        // Increase size proportionally to icon (about 40% of icon size for better visibility)\n        --sidebar-primary-notification-bullet-size-reduced: calc(\n          var(--sidebar-primary-item-icon-size) * 0.4\n        );\n      }\n    }\n  }\n\n  .nv-sidebarnavitem-content {\n    @include navitem-content();\n\n    a {\n      color: inherit !important;\n      text-decoration: none !important;\n      font-weight: var(--font-weight-medium-emphasis) !important;\n      flex: 1;\n    }\n  }\n\n  .nv-sidebarnavitem-trailing {\n    @include navitem-trailing();\n  }\n\n  .nv-sidebarnavitem-chevron {\n    @include navitem-chevron();\n  }\n\n  &[open] .nv-sidebarnavitem-chevron {\n    @include navitem-chevron-open();\n  }\n\n  .nv-sidebarnavitem-subitems {\n    @include navitem-subitems();\n  }\n\n  &[open] .nv-sidebarnavitem-subitems {\n    @include navitem-subitems-open();\n  }\n\n  // Collapsed state handled by parent sidebar\n  nv-sidebar[collapsed] & {\n    .nv-sidebarnavitem-trigger {\n      justify-content: center;\n      gap: 0;\n      width: 100%;\n    }\n\n    .nv-sidebarnavitem-content {\n      display: none;\n    }\n\n    .nv-sidebarnavitem-trailing,\n    .nv-sidebarnavitem-chevron {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, State, Element, Watch, h } from '@stencil/core';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * A navigation item in the sidebar. Can be a simple link or a collapsible parent with sub-items.\n * @slot default - The link or content of the item (usually an <a> tag).\n * @slot subitems - Sub-navigation items (nv-sidebarnavsubitem elements). Automatically assigned.\n * @slot trailing - Optional content displayed at the end of the item (e.g., badges, icons, chevron).\n */\n@Component({\n  tag: 'nv-sidebarnavitem',\n  styleUrl: 'styles/nv-sidebarnavitem.scss',\n  shadow: false,\n})\nexport class NvSidebarnavitem {\n  @Element() el: HTMLNvSidebarnavitemElement;\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Optional icon to display before the label.\n   */\n  @Prop({ reflect: true })\n  readonly icon?: IconName;\n\n  /**\n   * Whether this item represents the active/current page.\n   * Can be set automatically when a sub-item becomes active.\n   */\n  @Prop({ reflect: true, mutable: true })\n  active: boolean = false;\n\n  /**\n   * Whether this item can be collapsed/expanded (has sub-items).\n   */\n  @Prop({ reflect: true })\n  readonly collapsible: boolean = false;\n\n  /**\n   * Whether the collapsible item is currently open (showing sub-items).\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Number of notifications to display. When provided, a notification bullet will be automatically rendered.\n   * The bullet will be positioned in the trailing slot when sidebar is open, and on the icon when collapsed.\n   */\n  @Prop({ reflect: true })\n  readonly notificationCount?: number;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region STATE\n  @State()\n  private hasSubitems: boolean = false;\n\n  @State()\n  private isSidebarCollapsed: boolean = false;\n\n  private mutationObserver?: MutationObserver;\n  private subitemsMutationObserver?: MutationObserver;\n  private wasActiveFromSubitem: boolean = false; // Track if active was set by subitem logic\n  //#endregion STATE\n  /****************************************************************************/\n  //#region METHODS\n  private handleToggle = (event: MouseEvent) => {\n    // Ignore clicks that originated from subitems (they bubble up but shouldn't toggle)\n    const target = event.target as HTMLElement;\n    if (target.closest('nv-sidebarnavsubitem')) {\n      return; // Let the subitem's link handle navigation normally\n    }\n\n    // In collapsed sidebar mode, navigate to the main link instead of toggling\n    if (this.isSidebarCollapsed) {\n      // Find the first link that is NOT inside subitems\n      const link = this.el.querySelector(\n        '.nv-sidebarnavitem-content a, :scope > a',\n      ) as HTMLAnchorElement;\n      if (link?.href) {\n        // Check if click was directly on the link - if so, let it handle naturally\n        if (target.closest('a')) {\n          return;\n        }\n        // Trigger navigation by clicking the link programmatically\n        link.click();\n      }\n      return;\n    }\n\n    // Only handle toggle for collapsible items when sidebar is expanded\n    if (this.collapsible) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.open = !this.open;\n    }\n    // For non-collapsible items in expanded mode, let the link handle the navigation\n    // Don't prevent default or stop propagation - allow the link to work normally\n  };\n\n  private subitemsRef?: HTMLDivElement;\n  private isAnimating: boolean = false;\n  private hasInitializedHeight: boolean = false;\n  /** Tracks the last open state that was animated to, to prevent redundant animations */\n  private lastAnimatedOpenState: boolean | null = null;\n\n  private updateSubitemsHeight = (force: boolean = false) => {\n    if (!this.subitemsRef) return;\n\n    // Skip animation if we're already in the target state (prevents animation on active change)\n    // Only animate if:\n    // 1. forced (explicit toggle by user via @Watch)\n    // 2. OR this is the first animation (lastAnimatedOpenState is null)\n    // 3. OR the open state has actually changed since last animation\n    if (\n      !force &&\n      this.lastAnimatedOpenState !== null &&\n      this.lastAnimatedOpenState === this.open\n    ) {\n      return;\n    }\n\n    // Don't re-animate if already animating and not forced\n    if (this.isAnimating && !force) {\n      return;\n    }\n\n    this.isAnimating = true;\n    this.lastAnimatedOpenState = this.open;\n\n    if (this.open) {\n      // Calculate real height and animate to it\n      this.subitemsRef.style.transition = 'none';\n      this.subitemsRef.style.maxHeight = '0px';\n      void this.subitemsRef.offsetHeight; // Force reflow\n      requestAnimationFrame(() => {\n        if (this.subitemsRef) {\n          this.subitemsRef.style.transition =\n            'max-height 0.3s ease, opacity 0.2s ease';\n          this.subitemsRef.style.maxHeight =\n            this.subitemsRef.scrollHeight + 'px';\n          // Reset animation flag after animation completes\n          setTimeout(() => {\n            this.isAnimating = false;\n          }, 300); // Match animation duration\n        }\n      });\n    } else {\n      // Animate to 0\n      this.subitemsRef.style.transition = 'none';\n      this.subitemsRef.style.maxHeight = this.subitemsRef.scrollHeight + 'px';\n      void this.subitemsRef.offsetHeight; // Force reflow\n      requestAnimationFrame(() => {\n        if (this.subitemsRef) {\n          this.subitemsRef.style.transition =\n            'max-height 0.3s ease, opacity 0.2s ease';\n          this.subitemsRef.style.maxHeight = '0px';\n          // Reset animation flag after animation completes\n          setTimeout(() => {\n            this.isAnimating = false;\n          }, 300); // Match animation duration\n        }\n      });\n    }\n  };\n  private checkSidebarCollapsed = () => {\n    const sidebar = this.el.closest('nv-sidebar');\n    const wasCollapsed = this.isSidebarCollapsed;\n    this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;\n\n    // When sidebar collapse state changes, update active state based on subitems\n    if (wasCollapsed !== this.isSidebarCollapsed) {\n      this.updateActiveFromSubitems();\n    }\n  };\n\n  /**\n   * Checks if any sub-item is active and updates parent active state.\n   * - When sidebar is collapsed: if a sub-item is active, parent should be active\n   * - When sidebar is expanded: if a sub-item is active AND parent is not open, parent should be active\n   *   (because sub-items are hidden, we need to indicate the parent contains an active child)\n   */\n  private updateActiveFromSubitems = () => {\n    if (!this.hasSubitems) return;\n\n    // Find all sub-items\n    const subItems = Array.from(\n      this.el.querySelectorAll('nv-sidebarnavsubitem'),\n    ) as HTMLNvSidebarnavsubitemElement[];\n\n    // Check if any sub-item is active\n    const hasActiveSubitem = subItems.some(subItem => subItem.active);\n\n    if (this.isSidebarCollapsed) {\n      // When sidebar is collapsed AND a sub-item is active, make parent active\n      if (hasActiveSubitem) {\n        this.active = true;\n        this.wasActiveFromSubitem = true;\n      } else {\n        // When collapsed and no sub-item is active, remove active state only if we set it\n        if (this.wasActiveFromSubitem) {\n          this.active = false;\n          this.wasActiveFromSubitem = false;\n        }\n      }\n    } else {\n      // When sidebar is expanded\n      if (hasActiveSubitem && !this.open) {\n        // If a sub-item is active AND parent is not open (sub-items hidden),\n        // make parent active to indicate it contains an active child\n        this.active = true;\n        this.wasActiveFromSubitem = true;\n      } else if (hasActiveSubitem && this.open) {\n        // If a sub-item is active BUT parent is open (sub-items visible),\n        // remove active state from parent (only sub-item should be active)\n        if (this.wasActiveFromSubitem) {\n          this.active = false;\n          this.wasActiveFromSubitem = false;\n        }\n      } else {\n        // No active sub-item, remove active state if we set it\n        if (this.wasActiveFromSubitem) {\n          this.active = false;\n          this.wasActiveFromSubitem = false;\n        }\n      }\n      // Note: activePath logic in nv-sidebar can also manage parent active state\n      // (when parent href matches activePath exactly)\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  componentWillLoad() {\n    // Check if there are sub-items in any slot\n    const subItems = Array.from(this.el.children).filter(\n      child => child.tagName.toLowerCase() === 'nv-sidebarnavsubitem',\n    );\n    this.hasSubitems = subItems.length > 0;\n\n    // Move sub-items to the subitems slot\n    if (this.hasSubitems) {\n      subItems.forEach(item => {\n        item.setAttribute('slot', 'subitems');\n      });\n    }\n\n    // Check sidebar collapsed state\n    this.checkSidebarCollapsed();\n\n    // Watch for sidebar state changes\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      this.mutationObserver = new MutationObserver(() => {\n        this.checkSidebarCollapsed();\n      });\n      this.mutationObserver.observe(sidebar, {\n        attributes: true,\n        attributeFilter: ['collapsed'],\n      });\n    }\n\n    // Watch for sub-items active state changes\n    if (this.hasSubitems) {\n      // Observe the subitems container for changes (including new sub-items being added)\n      // Using subtree: true to catch all attribute changes in descendants\n      const subitemsContainer = this.el.querySelector(\n        '.nv-sidebarnavitem-subitems',\n      );\n      if (subitemsContainer) {\n        this.subitemsMutationObserver = new MutationObserver(() => {\n          this.updateActiveFromSubitems();\n        });\n\n        // Observe the container for child list changes and attribute changes in descendants\n        this.subitemsMutationObserver.observe(subitemsContainer, {\n          childList: true,\n          subtree: true,\n          attributes: true,\n          attributeFilter: ['active'],\n        });\n      } else {\n        // If container doesn't exist yet (not collapsible or not rendered), observe the element itself\n        // This handles cases where sub-items are direct children\n        this.subitemsMutationObserver = new MutationObserver(() => {\n          this.updateActiveFromSubitems();\n        });\n\n        this.subitemsMutationObserver.observe(this.el, {\n          childList: true,\n          subtree: true,\n          attributes: true,\n          attributeFilter: ['active'],\n        });\n      }\n    }\n\n    // Initial check for active subitems\n    this.updateActiveFromSubitems();\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n    if (this.subitemsMutationObserver) {\n      this.subitemsMutationObserver.disconnect();\n    }\n  }\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region WATCHERS\n  @Watch('open')\n  onOpenChanged(newValue: boolean, oldValue: boolean) {\n    // Only animate if the value actually changed (prevents false triggers from React re-renders)\n    if (newValue === oldValue) {\n      return;\n    }\n    // Force update when open state changes (user clicked toggle)\n    this.updateSubitemsHeight(true);\n    // Update active state based on subitems when open state changes\n    this.updateActiveFromSubitems();\n  }\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    const showNotificationBullet =\n      this.notificationCount !== undefined && this.notificationCount > 0;\n    const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';\n\n    return (\n      <Host role=\"listitem\">\n        <div\n          class=\"nv-sidebarnavitem-trigger\"\n          onClick={this.handleToggle}\n          aria-expanded={this.collapsible ? String(this.open) : undefined}\n          aria-current={this.active && !this.collapsible ? 'page' : undefined}\n        >\n          {this.icon && (\n            <div class=\"nv-sidebarnavitem-icon\">\n              <nv-icon name={this.icon} size=\"md\"></nv-icon>\n              {showNotificationBullet && this.isSidebarCollapsed && (\n                <nv-notification-bullet\n                  count={this.notificationCount}\n                  size={notificationSize}\n                  contrastingBorder\n                ></nv-notification-bullet>\n              )}\n            </div>\n          )}\n          <div class=\"nv-sidebarnavitem-content\">\n            <slot></slot>\n          </div>\n          <div class=\"nv-sidebarnavitem-trailing\">\n            <slot name=\"trailing\"></slot>\n            {showNotificationBullet && !this.isSidebarCollapsed && (\n              <nv-notification-bullet\n                count={this.notificationCount}\n                size={notificationSize}\n              ></nv-notification-bullet>\n            )}\n            {this.collapsible && (\n              <nv-icon\n                name=\"chevron-down\"\n                size=\"sm\"\n                class=\"nv-sidebarnavitem-chevron\"\n              ></nv-icon>\n            )}\n          </div>\n        </div>\n        {this.collapsible && this.hasSubitems && (\n          <div\n            class=\"nv-sidebarnavitem-subitems\"\n            ref={el => {\n              // Only update ref and initialize if element changed or not yet initialized\n              if (el !== this.subitemsRef) {\n                this.subitemsRef = el;\n                if (el && !this.hasInitializedHeight) {\n                  // Initialize height only on first mount, not on re-renders\n                  this.hasInitializedHeight = true;\n                  requestAnimationFrame(() => {\n                    // Only animate if item is open, otherwise it will animate when opened\n                    if (this.open) {\n                      this.updateSubitemsHeight();\n                    }\n                  });\n                }\n              }\n            }}\n          >\n            <slot name=\"subitems\"></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-sidebarnavsubitem.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvSidebarnavsubitem extends Components.NvSidebarnavsubitem, HTMLElement {}
+export const NvSidebarnavsubitem: {
+    prototype: NvSidebarnavsubitem;
+    new (): NvSidebarnavsubitem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-sidebarnavsubitem.js

@@ -0,0 +1,53 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5829b9f7.js';
+
+const nvSidebarnavsubitemCss = "nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--list-dropdown-sub-item-padding-left);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-primary-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-orange-600);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 NvSidebarnavsubitemStyle0 = nvSidebarnavsubitemCss;
+
+const NvSidebarnavsubitem$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarnavsubitem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /****************************************************************************/
+        //#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 (h(Host, { key: '8ae8c5e2038145bd458a35d237495a06fde97294', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: '559a99d72973f7af43091c5c920e77d8cad3944c', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: '204c7ad681d51310f43b618ef14a12d0ccc93ddc', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: 'f4717aee216fbeac4dbfe0d98b34fe7e83476701' })), h("div", { key: 'b5db84c75ae4e51d8a048000a49697eaf4b20f1d', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: 'b6d0afcd6b4ace60b32f531f414b70aba513a274', name: "trailing" }))));
+    }
+    static get style() { return NvSidebarnavsubitemStyle0; }
+}, [4, "nv-sidebarnavsubitem", {
+        "active": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-sidebarnavsubitem"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-sidebarnavsubitem":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvSidebarnavsubitem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvSidebarnavsubitem = NvSidebarnavsubitem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvSidebarnavsubitem, defineCustomElement };
+
+//# sourceMappingURL=nv-sidebarnavsubitem.js.map

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

@@ -0,0 +1 @@
+{"file":"nv-sidebarnavsubitem.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,sxEAAsxE,CAAC;AACtzE,kCAAe,sBAAsB;;MCWxBA,qBAAmB;IALhC;;;;;;;;QAYW,WAAM,GAAY,KAAK,CAAC;KAwBlC;;;;;;;;;;IAdC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,kBAAe,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,IAClE,4DAAK,KAAK,EAAC,gCAAgC,GAAO,EAClD,4DAAK,KAAK,EAAC,8BAA8B,IACvC,8DAAa,CACT,EACN,4DAAK,KAAK,EAAC,+BAA+B,IACxC,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvSidebarnavsubitem"],"sources":["src/components/nv-sidebarnavsubitem/styles/nv-sidebarnavsubitem.scss?tag=nv-sidebarnavsubitem","src/components/nv-sidebarnavsubitem/nv-sidebarnavsubitem.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-sidebarnavsubitem {\n  @include subitem-container();\n\n  .nv-sidebarnavsubitem-indicator {\n    @include subitem-indicator();\n  }\n\n  .nv-sidebarnavsubitem-content {\n    @include subitem-content();\n\n    a {\n      color: inherit !important;\n      text-decoration: none !important;\n      font-weight: var(--font-weight-medium-emphasis) !important;\n      flex: 1;\n    }\n  }\n\n  &:hover .nv-sidebarnavsubitem-content {\n    @include subitem-content-hover();\n  }\n\n  &[active] {\n    background-color: var(--color-interaction-container-neutral-background-active);\n    --nv-component-background: var(--color-interaction-container-neutral-background-active);\n    \n    .nv-sidebarnavsubitem-content {\n      @include subitem-content-active();\n    }\n  }\n\n  .nv-sidebarnavsubitem-trailing {\n    @include subitem-trailing();\n  }\n\n  nv-sidebar[collapsed] & {\n    .nv-sidebarnavsubitem-content {\n      max-width: 0;\n      opacity: 0;\n      margin: 0;\n      overflow: hidden;\n      transition:\n        opacity 0.2s ease,\n        max-width 0.2s ease;\n    }\n\n    .nv-sidebarnavsubitem-indicator {\n      margin-right: 0;\n      width: var(--spacing-6);\n      justify-content: center;\n    }\n\n    .nv-sidebarnavsubitem-trailing {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * A sub-item in the sidebar navigation, typically used as a child of nv-sidebarnavitem.\n * @slot default - The link or content of the sub-item (usually an <a> tag).\n * @slot trailing - Optional content displayed at the end of the sub-item (e.g., badges, icons).\n */\n@Component({\n  tag: 'nv-sidebarnavsubitem',\n  styleUrl: 'styles/nv-sidebarnavsubitem.scss',\n  shadow: false,\n})\nexport class NvSidebarnavsubitem {\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Whether this sub-item represents the active/current page.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  // Note: We no longer use stopPropagation() here because it prevents React Router\n  // (and other SPA routers) from receiving the click event due to event delegation.\n  // Instead, the parent nv-sidebarnavitem checks if clicks originate from subitems.\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host role=\"listitem\" aria-current={this.active ? 'page' : undefined}>\n        <div class=\"nv-sidebarnavsubitem-indicator\"></div>\n        <div class=\"nv-sidebarnavsubitem-content\">\n          <slot></slot>\n        </div>\n        <div class=\"nv-sidebarnavsubitem-trailing\">\n          <slot name=\"trailing\"></slot>\n        </div>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-split.js

@@ -321,7 +321,7 @@ const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd0bcb4330d157fa239289fa7176c502bfe01d0b8', "data-dragging": this.isDragging.toString() }, h("slot", { key: '490799f805f0833e5a33b480e205c8deb65f215b', name: "pane" }), h("slot", { key: '69d05ed6f6bbeac1f123ac100c753cf78ced3f08', name: "gutter" })));
+        return (h(Host, { key: 'df6a2141e14d1f691af162d1eae2e2763ffad014', "data-dragging": this.isDragging.toString() }, h("slot", { key: 'ce9d941bc73fa6e12161f334d4cd86e9045f6271', name: "pane" }), h("slot", { key: 'a70c14b0989a758ad35dc3c611563f7d03be0d02', name: "gutter" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/nv-stack.js

@@ -20,7 +20,7 @@ const NvStack$1 = /*@__PURE__*/ proxyCustomElement(class NvStack extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
+        return (h(Host, { key: 'fbdaf5b2fb134b050883a512b4aeb96b070017c1', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '6c7c231b8ff2575a1b509539d227468629fae6ab' })));
     }
     static get style() { return NvStackStyle0; }
 }, [4, "nv-stack", {

package/dist/components/nv-table.js

@@ -233,7 +233,7 @@ const NvTable$1 = /*@__PURE__*/ proxyCustomElement(class NvTable extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, h("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
+        return (h(Host, { key: 'ec194bed7ec58642be9f6b52a737e2f9375a152e' }, h("slot", { key: '009ce0f20491156ca93141c85683f0be499a9938' })));
     }
     get host() { return this; }
     static get style() { return NvTableStyle0; }

package/dist/components/nv-tableheader.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NvTableheader extends Components.NvTableheader, HTMLElement {}
+export const NvTableheader: {
+    prototype: NvTableheader;
+    new (): NvTableheader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nv-tableheader.js

@@ -0,0 +1,112 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5829b9f7.js';
+import { d as defineCustomElement$4 } from './p-743b3452.js';
+import { d as defineCustomElement$3 } from './p-7214f13f.js';
+import { d as defineCustomElement$2 } from './p-996438a2.js';
+
+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 NvTableheader$1 = /*@__PURE__*/ proxyCustomElement(class NvTableheader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.sortDirectionChanged = createEvent(this, "sortDirectionChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Will render the header as sortable with the corresponding icon button.
+         * Allows the header to be tabbed, and trigger sorting via click or keyboard
+         * navigation
+         */
+        this.sortable = false;
+        /**
+         * The current sort direction of the header. Will be 'none' if the header is
+         * not sortable or if the sort direction is not set.
+         */
+        this.sortDirection = 'none';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    cycleSortDirection(e) {
+        if (!this.sortable)
+            return;
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        const next = {
+            none: 'asc',
+            asc: 'desc',
+            desc: 'none',
+        };
+        this.sortDirection = next[this.sortDirection];
+        this.sortDirectionChanged.emit(this.sortDirection);
+    }
+    handleKeyDown(event) {
+        if (!this.sortable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.cycleSortDirection();
+        }
+    }
+    get ariaSort() {
+        const sortMap = {
+            none: 'none',
+            asc: 'ascending',
+            desc: 'descending',
+        };
+        if (!this.sortable)
+            return sortMap.none;
+        return sortMap[this.sortDirection];
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '6719336a9812b1d1abd161b955b841c1459fb584', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, h("slot", { key: 'd559e3b7c74f6dcf8197e2d082310660a23291d6' }), this.sortable && (h("span", { key: '540c8c8cf3cccac47a3ece7d9be4e97c4e283690', class: "sort-icon-wrap", "aria-hidden": "true" }, h("nv-iconbutton", { key: 'ac713c7af3b5b2e452f02d0d77cb64398b0febd4', 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',
+                'is-desc': this.sortDirection === 'desc',
+            } })))));
+    }
+    static get style() { return NvTableheaderStyle0; }
+}, [4, "nv-tableheader", {
+        "sortable": [516],
+        "sortDirection": [1537, "sort-direction"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-tableheader", "nv-icon", "nv-iconbutton", "nv-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-tableheader":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvTableheader$1);
+            }
+            break;
+        case "nv-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "nv-iconbutton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nv-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvTableheader = NvTableheader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvTableheader, defineCustomElement };
+
+//# sourceMappingURL=nv-tableheader.js.map