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

package/dist/esm/nv-sidebarlogo.entry.js.map

@@ -1 +0,0 @@
-{"file":"nv-sidebarlogo.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,gmCAAgmC,CAAC;AAC1nC,4BAAe,gBAAgB;;MCUlB,aAAa;IAL1B;;;;;;QA+BmB,gBAAW,GAC1B,u/BAAu/B,CAAC;;QAGz+B,yBAAoB,GACnC,u/BAAu/B,CAAC;KA2B3/B;;;;IAvBC,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;QAC9C,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,oBAAoB,CAAC;QAEzE,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,4DACE,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,EACzB,KAAK,EAAC,qBAAqB,GAC3B,EACF,4DACE,GAAG,EAAE,gBAAgB,EACrB,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,EACzB,KAAK,EAAC,0BAA0B,GAChC,EACD,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjE,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/nv-sidebarlogo/styles/nv-sidebarlogo.scss?tag=nv-sidebarlogo","src/components/nv-sidebarlogo/nv-sidebarlogo.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-sidebarlogo {\n  @include logo-container-styles();\n\n  .nv-sidebarlogo-container {\n    @include logo-inner-container();\n  }\n\n  .nv-sidebarlogo-full,\n  .nv-sidebarlogo-collapsed {\n    @include logo-image();\n  }\n\n  .nv-sidebarlogo-collapsed {\n    @include logo-collapsed-hidden();\n  }\n\n  .nv-sidebarlogo-title {\n    @include logo-title();\n  }\n\n  nv-sidebar[collapsed] & {\n    .nv-sidebarlogo-full {\n      @include logo-collapsed-hidden();\n    }\n\n    .nv-sidebarlogo-collapsed {\n      @include logo-collapsed-visible();\n    }\n\n    .nv-sidebarlogo-title {\n      @include logo-title-collapsed();\n    }\n\n    .nv-sidebarlogo-container {\n      @include logo-collapsed-centered();\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * Displays the logo and title at the top of the sidebar.\n * Automatically switches between full and collapsed logos based on the sidebar state.\n */\n@Component({\n  tag: 'nv-sidebarlogo',\n  styleUrl: 'styles/nv-sidebarlogo.scss',\n  shadow: false,\n})\nexport class NvSidebarlogo {\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * The label/name to display next to the logo.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * URL of the full logo image (shown when sidebar is expanded).\n   * If not provided, uses a default Nova logo.\n   */\n  @Prop({ reflect: true })\n  readonly logo?: string;\n\n  /**\n   * URL of the collapsed logo image (shown when sidebar is collapsed).\n   * If not provided, uses a default Nova icon.\n   */\n  @Prop({ reflect: true })\n  readonly collapsedLogo?: string;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region CONSTANTS\n  // Default Nova logo SVG (expanded - icon only, text comes from label prop)\n  private readonly defaultLogo =\n    'data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class=\"cls-1\" d=\"M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z\"/%3E%3Cpath class=\"cls-1\" d=\"M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z\"/%3E%3C/svg%3E';\n\n  // Default Nova icon (collapsed - same logo but will be displayed smaller)\n  private readonly defaultCollapsedLogo =\n    'data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class=\"cls-1\" d=\"M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z\"/%3E%3Cpath class=\"cls-1\" d=\"M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z\"/%3E%3C/svg%3E';\n  //#endregion CONSTANTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    const logoSrc = this.logo || this.defaultLogo;\n    const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;\n\n    return (\n      <Host>\n        <div class=\"nv-sidebarlogo-container\">\n          <img\n            src={logoSrc}\n            alt={this.label || 'Logo'}\n            class=\"nv-sidebarlogo-full\"\n          />\n          <img\n            src={collapsedLogoSrc}\n            alt={this.label || 'Logo'}\n            class=\"nv-sidebarlogo-collapsed\"\n          />\n          {this.label && <span class=\"nv-sidebarlogo-title\">{this.label}</span>}\n        </div>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/esm/nv-sidebarnavitem.entry.js

@@ -1,295 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-dc2723f3.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 = class {
-    constructor(hostRef) {
-        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 (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 getElement(this); }
-    static get watchers() { return {
-        "open": ["onOpenChanged"]
-    }; }
-};
-NvSidebarnavitem.style = NvSidebarnavitemStyle0;
-
-export { NvSidebarnavitem as nv_sidebarnavitem };
-
-//# sourceMappingURL=nv-sidebarnavitem.entry.js.map

package/dist/esm/nv-sidebarnavitem.entry.js.map

@@ -1 +0,0 @@
-{"file":"nv-sidebarnavitem.entry.js","mappings":"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","names":[],"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/esm/nv-sidebarnavsubitem.entry.js

@@ -1,33 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-dc2723f3.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 = class {
-    constructor(hostRef) {
-        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 (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" }))));
-    }
-};
-NvSidebarnavsubitem.style = NvSidebarnavsubitemStyle0;
-
-export { NvSidebarnavsubitem as nv_sidebarnavsubitem };
-
-//# sourceMappingURL=nv-sidebarnavsubitem.entry.js.map

package/dist/esm/nv-sidebarnavsubitem.entry.js.map

@@ -1 +0,0 @@
-{"file":"nv-sidebarnavsubitem.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,sxEAAsxE,CAAC;AACtzE,kCAAe,sBAAsB;;MCWxB,mBAAmB;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":[],"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/native/p-02debfd0.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as n}from"./p-3060df80.js";const i="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 t=i;const r=class{constructor(e){a(this,e);this.active=false}render(){return e(n,{key:"8ae8c5e2038145bd458a35d237495a06fde97294",role:"listitem","aria-current":this.active?"page":undefined},e("div",{key:"559a99d72973f7af43091c5c920e77d8cad3944c",class:"nv-sidebarnavsubitem-indicator"}),e("div",{key:"204c7ad681d51310f43b618ef14a12d0ccc93ddc",class:"nv-sidebarnavsubitem-content"},e("slot",{key:"f4717aee216fbeac4dbfe0d98b34fe7e83476701"})),e("div",{key:"b5db84c75ae4e51d8a048000a49697eaf4b20f1d",class:"nv-sidebarnavsubitem-trailing"},e("slot",{key:"b6d0afcd6b4ace60b32f531f414b70aba513a274",name:"trailing"})))}};r.style=t;export{r as nv_sidebarnavsubitem};
-//# sourceMappingURL=p-02debfd0.entry.js.map

package/dist/native/p-02debfd0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvSidebarnavsubitemCss","NvSidebarnavsubitemStyle0","NvSidebarnavsubitem","constructor","hostRef","this","active","render","h","Host","key","role","undefined","class","name"],"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"],"mappings":"kDAAA,MAAMA,EAAyB,uxEAC/B,MAAAC,EAAeD,E,MCWFE,EAAmB,MALhC,WAAAC,CAAAC,G,UAYWC,KAAAC,OAAkB,K,CAU3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,WAAU,eAAeN,KAAKC,OAAS,OAASM,WACzDJ,EAAA,OAAAE,IAAA,2CAAKG,MAAM,mCACXL,EAAA,OAAAE,IAAA,2CAAKG,MAAM,gCACTL,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CAAKG,MAAM,iCACTL,EAAA,QAAAE,IAAA,2CAAMI,KAAK,c","ignoreList":[]}

package/dist/native/p-2ba7b6f2.entry.js

@@ -1,2 +0,0 @@
-import{r as i,h as e,H as t,g as a}from"./p-3060df80.js";const n="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 s=n;const r=class{constructor(e){i(this,e);this.active=false;this.collapsible=false;this.open=false;this.hasSubitems=false;this.isSidebarCollapsed=false;this.wasActiveFromSubitem=false;this.handleToggle=i=>{const e=i.target;if(e.closest("nv-sidebarnavsubitem")){return}if(this.isSidebarCollapsed){const i=this.el.querySelector(".nv-sidebarnavitem-content a, :scope > a");if(i===null||i===void 0?void 0:i.href){if(e.closest("a")){return}i.click()}return}if(this.collapsible){i.preventDefault();i.stopPropagation();this.open=!this.open}};this.isAnimating=false;this.hasInitializedHeight=false;this.lastAnimatedOpenState=null;this.updateSubitemsHeight=(i=false)=>{if(!this.subitemsRef)return;if(!i&&this.lastAnimatedOpenState!==null&&this.lastAnimatedOpenState===this.open){return}if(this.isAnimating&&!i){return}this.isAnimating=true;this.lastAnimatedOpenState=this.open;if(this.open){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";setTimeout((()=>{this.isAnimating=false}),300)}}))}else{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";setTimeout((()=>{this.isAnimating=false}),300)}}))}};this.checkSidebarCollapsed=()=>{var i;const e=this.el.closest("nv-sidebar");const t=this.isSidebarCollapsed;this.isSidebarCollapsed=(i=e===null||e===void 0?void 0:e.hasAttribute("collapsed"))!==null&&i!==void 0?i:false;if(t!==this.isSidebarCollapsed){this.updateActiveFromSubitems()}};this.updateActiveFromSubitems=()=>{if(!this.hasSubitems)return;const i=Array.from(this.el.querySelectorAll("nv-sidebarnavsubitem"));const e=i.some((i=>i.active));if(this.isSidebarCollapsed){if(e){this.active=true;this.wasActiveFromSubitem=true}else{if(this.wasActiveFromSubitem){this.active=false;this.wasActiveFromSubitem=false}}}else{if(e&&!this.open){this.active=true;this.wasActiveFromSubitem=true}else if(e&&this.open){if(this.wasActiveFromSubitem){this.active=false;this.wasActiveFromSubitem=false}}else{if(this.wasActiveFromSubitem){this.active=false;this.wasActiveFromSubitem=false}}}}}componentWillLoad(){const i=Array.from(this.el.children).filter((i=>i.tagName.toLowerCase()==="nv-sidebarnavsubitem"));this.hasSubitems=i.length>0;if(this.hasSubitems){i.forEach((i=>{i.setAttribute("slot","subitems")}))}this.checkSidebarCollapsed();const e=this.el.closest("nv-sidebar");if(e){this.mutationObserver=new MutationObserver((()=>{this.checkSidebarCollapsed()}));this.mutationObserver.observe(e,{attributes:true,attributeFilter:["collapsed"]})}if(this.hasSubitems){const i=this.el.querySelector(".nv-sidebarnavitem-subitems");if(i){this.subitemsMutationObserver=new MutationObserver((()=>{this.updateActiveFromSubitems()}));this.subitemsMutationObserver.observe(i,{childList:true,subtree:true,attributes:true,attributeFilter:["active"]})}else{this.subitemsMutationObserver=new MutationObserver((()=>{this.updateActiveFromSubitems()}));this.subitemsMutationObserver.observe(this.el,{childList:true,subtree:true,attributes:true,attributeFilter:["active"]})}}this.updateActiveFromSubitems()}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect()}if(this.subitemsMutationObserver){this.subitemsMutationObserver.disconnect()}}onOpenChanged(i,e){if(i===e){return}this.updateSubitemsHeight(true);this.updateActiveFromSubitems()}render(){const i=this.notificationCount!==undefined&&this.notificationCount>0;const a=this.isSidebarCollapsed?"reduced":"default";return e(t,{key:"c0c9c63cb295441389b5ced9a4b0a0d5a1af99cd",role:"listitem"},e("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&&e("div",{key:"25f703e9fb7375b8b562be54f080120ae037dd9f",class:"nv-sidebarnavitem-icon"},e("nv-icon",{key:"1a4e345c90afcec159890db6c6b0e22d53dd673d",name:this.icon,size:"md"}),i&&this.isSidebarCollapsed&&e("nv-notification-bullet",{key:"15b69d1a2325daed7d6583ed10906fe4e91809e5",count:this.notificationCount,size:a,contrastingBorder:true})),e("div",{key:"c717c09f39eab07616de419a35b11a5b7dfce5d1",class:"nv-sidebarnavitem-content"},e("slot",{key:"9f8687f151fd082a6737e7fbe6036cc3ebff3cc2"})),e("div",{key:"b2c3d7a4c30ce96273731a05a1d361f5654582de",class:"nv-sidebarnavitem-trailing"},e("slot",{key:"acf2dddbbbc7d2e83703c731a244237e0dc81153",name:"trailing"}),i&&!this.isSidebarCollapsed&&e("nv-notification-bullet",{key:"adca5c7418a3b58afa5ef21ddd3fa9b2d880a56c",count:this.notificationCount,size:a}),this.collapsible&&e("nv-icon",{key:"a4a4369d4ba76f567cca439d1b4c7e95ad5ba98c",name:"chevron-down",size:"sm",class:"nv-sidebarnavitem-chevron"}))),this.collapsible&&this.hasSubitems&&e("div",{key:"2d4fadb0b547eb369a702bb8210b3312dde505b2",class:"nv-sidebarnavitem-subitems",ref:i=>{if(i!==this.subitemsRef){this.subitemsRef=i;if(i&&!this.hasInitializedHeight){this.hasInitializedHeight=true;requestAnimationFrame((()=>{if(this.open){this.updateSubitemsHeight()}}))}}}},e("slot",{key:"f0ffb970aa2d84580205ba110858d3f1c27875a3",name:"subitems"})))}get el(){return a(this)}static get watchers(){return{open:["onOpenChanged"]}}};r.style=s;export{r as nv_sidebarnavitem};
-//# sourceMappingURL=p-2ba7b6f2.entry.js.map

package/dist/native/p-2ba7b6f2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvSidebarnavitemCss","NvSidebarnavitemStyle0","NvSidebarnavitem","constructor","hostRef","this","active","collapsible","open","hasSubitems","isSidebarCollapsed","wasActiveFromSubitem","handleToggle","event","target","closest","link","el","querySelector","href","click","preventDefault","stopPropagation","isAnimating","hasInitializedHeight","lastAnimatedOpenState","updateSubitemsHeight","force","subitemsRef","style","transition","maxHeight","requestAnimationFrame","scrollHeight","setTimeout","checkSidebarCollapsed","sidebar","wasCollapsed","_a","hasAttribute","updateActiveFromSubitems","subItems","Array","from","querySelectorAll","hasActiveSubitem","some","subItem","componentWillLoad","children","filter","child","tagName","toLowerCase","length","forEach","item","setAttribute","mutationObserver","MutationObserver","observe","attributes","attributeFilter","subitemsContainer","subitemsMutationObserver","childList","subtree","disconnectedCallback","disconnect","onOpenChanged","newValue","oldValue","render","showNotificationBullet","notificationCount","undefined","notificationSize","h","Host","key","role","class","onClick","String","icon","name","size","count","contrastingBorder","ref"],"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"],"mappings":"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","ignoreList":[]}

package/dist/native/p-35263b61.entry.js

@@ -1,2 +0,0 @@
-import{r as i,h as t,H as n,g as o}from"./p-3060df80.js";const e='nv-notification-bullet{display:inline-flex;align-items:center;position:relative;}nv-notification-bullet .nv-notification-bullet{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-primary-notification-bullet-size);max-width:var(--sidebar-primary-notification-bullet-size);min-height:var(--sidebar-primary-notification-bullet-size);max-height:var(--sidebar-primary-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-primary-notification-bullet-font-size);font-weight:var(--sidebar-primary-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-brand-500);color:var(--color-feedback-error-high-contrast-title)}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-brand-50);color:var(--color-brand-600);border:1px solid var(--color-brand-600)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text)}nv-notification-bullet.nv-notification-bullet-with-cross-border::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size) * 1.5);border-radius:var(--radius-rounded-full);background-color:var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));z-index:-1;pointer-events:none}nv-sidebar[collapsed] nv-notification-bullet.nv-notification-bullet-with-cross-border::before{width:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);height:calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5)}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet{min-width:var(--sidebar-primary-notification-bullet-size-reduced);max-width:var(--sidebar-primary-notification-bullet-size-reduced);min-height:var(--sidebar-primary-notification-bullet-size-reduced);max-height:var(--sidebar-primary-notification-bullet-size-reduced);padding:0;font-size:0;}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced.nv-notification-bullet-with-border,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border{}';const r=e;const a=class{constructor(t){i(this,t);this.size="default";this.contrastingBorder=false}getIntention(){if(this.intention){return this.intention}const i=this.el.closest("nv-sidebar");if(i){const t=i.getAttribute("notification-intention");if(t==="neutral"||t==="brand"){return t}}return"brand"}getEmphasis(){if(this.emphasis){return this.emphasis}const i=this.el.closest("nv-sidebar");if(i){const t=i.getAttribute("notification-emphasis");if(t==="high"||t==="low"){return t}}return"high"}render(){var i;const o=(i=this.count)!==null&&i!==void 0?i:0;const e=o>99?"99+":String(o);if(o<=0){return null}const r=this.size==="reduced"?"nv-notification-bullet-reduced":"";const a=this.getIntention();const l=this.getEmphasis();const c=`nv-notification-bullet-${a}`;const s=`nv-notification-bullet-${l}`;const b=this.contrastingBorder?"nv-notification-bullet-with-border":"";return t(n,{class:`${c} ${b?"nv-notification-bullet-with-cross-border":""}`},t("span",{class:`nv-notification-bullet ${s} ${r} ${b}`,"aria-label":`${o} notifications`},e))}get el(){return o(this)}};a.style=r;export{a as nv_notification_bullet};
-//# sourceMappingURL=p-35263b61.entry.js.map

package/dist/native/p-35263b61.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvNotificationBulletCss","NvNotificationBulletStyle0","NvNotificationBullet","constructor","hostRef","this","size","contrastingBorder","getIntention","intention","sidebar","el","closest","sidebarIntention","getAttribute","getEmphasis","emphasis","sidebarEmphasis","render","displayCount","_a","count","displayText","String","sizeClass","intentionClass","emphasisClass","borderClass","h","Host","class"],"sources":["src/components/nv-notification-bullet/styles/nv-notification-bullet.scss?tag=nv-notification-bullet","src/components/nv-notification-bullet/nv-notification-bullet.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-notification-bullet {\n  display: inline-flex;\n  align-items: center;\n  position: relative; // Needed for cross-border pseudo-element positioning\n\n  /* Base notification bullet styles */\n  .nv-notification-bullet {\n    @include bullet-base-styles();\n  }\n\n  /* Intention: brand */\n  &.nv-notification-bullet-brand {\n    .nv-notification-bullet {\n      &.nv-notification-bullet-high {\n        @include bullet-brand-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-brand-low();\n      }\n    }\n  }\n\n  /* Intention: neutral */\n  &.nv-notification-bullet-neutral {\n    .nv-notification-bullet {\n      &.nv-notification-bullet-high {\n        @include bullet-neutral-high();\n      }\n      &.nv-notification-bullet-low {\n        @include bullet-neutral-low();\n      }\n    }\n  }\n\n  /* Contrasting border (cross-border backdrop) - creates a larger circle behind the bullet */\n  /* The cross-border intelligently inherits the background color from the parent (nv-sidebarnavitem-trigger) */\n  &.nv-notification-bullet-with-cross-border::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: calc(var(--sidebar-primary-notification-bullet-size) * 1.5);\n    height: calc(var(--sidebar-primary-notification-bullet-size) * 1.5);\n    border-radius: var(--radius-rounded-full);\n    /* Intelligently inherits background color from parent via CSS variable */\n    /* Supports multiple parent types: --nv-component-background (generic) or --nv-sidebarnavitem-background (sidebar specific) */\n    background-color: var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));\n    z-index: -1;\n    pointer-events: none;\n  }\n  \n  /* Cross-border for reduced size (when sidebar is collapsed) */\n  nv-sidebar[collapsed] &.nv-notification-bullet-with-cross-border::before {\n    width: calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);\n    height: calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);\n  }\n  \n  /* Apply cross-border mixin (empty now, but kept for structure) */\n  .nv-notification-bullet.nv-notification-bullet-with-border {\n    @include bullet-with-border();\n  }\n\n  /* Size: reduced */\n  .nv-notification-bullet.nv-notification-bullet-reduced,\n  /* When inside a collapsed sidebar, use reduced size automatically */\n  nv-sidebar[collapsed] & .nv-notification-bullet {\n    @include bullet-styles-reduced();\n    \n    /* Apply reduced cross-border backdrop when size is reduced */\n    &.nv-notification-bullet-with-border {\n      @include bullet-with-border-reduced();\n    }\n  }\n}\n\n","import { Component, Host, Prop, Element, h } from '@stencil/core';\n\n/**\n * Notification bullet component for displaying notification counts in the sidebar.\n * Automatically adapts its size when the sidebar is collapsed.\n * Inherits intention and emphasis from parent nv-sidebar if not explicitly set.\n */\n@Component({\n  tag: 'nv-notification-bullet',\n  styleUrl: 'styles/nv-notification-bullet.scss',\n  shadow: false,\n})\nexport class NvNotificationBullet {\n  @Element() el: HTMLNvNotificationBulletElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * The number of notifications to display.\n   * If 0 or not provided, the component will not be visible.\n   */\n  @Prop({ reflect: true })\n  readonly count?: number;\n\n  /**\n   * Determines the type of the notification.\n   * - neutral: Uses neutral colors (gray)\n   * - brand: Uses brand colors (orange/teal depending on theme)\n   * If not set, inherits from parent nv-sidebar's notificationIntention prop.\n   * @deprecated Use notificationIntention prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly intention?: 'neutral' | 'brand';\n\n  /**\n   * Determines the emphasis and importance of the notification.\n   * - high: More prominent appearance\n   * - low: Less prominent appearance\n   * If not set, inherits from parent nv-sidebar's notificationEmphasis prop.\n   * @deprecated Use notificationEmphasis prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis?: 'high' | 'low';\n\n  /**\n   * Determines the size of the notification bullet.\n   * - default: Normal size with text visible\n   * - reduced: Smaller size, text hidden (just a dot)\n   */\n  @Prop({ reflect: true })\n  readonly size: 'default' | 'reduced' = 'default';\n\n  /**\n   * Allows to add a border to add contrast on background.\n   */\n  @Prop({ reflect: true })\n  readonly contrastingBorder: boolean = false;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  private getIntention(): 'neutral' | 'brand' {\n    if (this.intention) {\n      return this.intention;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarIntention = sidebar.getAttribute('notification-intention');\n      if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {\n        return sidebarIntention;\n      }\n    }\n    return 'brand'; // Default fallback\n  }\n\n  private getEmphasis(): 'high' | 'low' {\n    if (this.emphasis) {\n      return this.emphasis;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');\n      if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {\n        return sidebarEmphasis;\n      }\n    }\n    return 'high'; // Default fallback\n  }\n  //#region RENDER\n  render() {\n    const displayCount = this.count ?? 0;\n    const displayText = displayCount > 99 ? '99+' : String(displayCount);\n\n    if (displayCount <= 0) {\n      return null;\n    }\n\n    const sizeClass =\n      this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';\n    const intention = this.getIntention();\n    const emphasis = this.getEmphasis();\n    const intentionClass = `nv-notification-bullet-${intention}`;\n    const emphasisClass = `nv-notification-bullet-${emphasis}`;\n    const borderClass = this.contrastingBorder\n      ? 'nv-notification-bullet-with-border'\n      : '';\n\n    return (\n      <Host\n        class={`${intentionClass} ${\n          borderClass ? 'nv-notification-bullet-with-cross-border' : ''\n        }`}\n      >\n        <span\n          class={`nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`}\n          aria-label={`${displayCount} notifications`}\n        >\n          {displayText}\n        </span>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"],"mappings":"yDAAA,MAAMA,EAA0B,27FAChC,MAAAC,EAAeD,E,MCWFE,EAAoB,MALjC,WAAAC,CAAAC,G,UA2CWC,KAAAC,KAA8B,UAM9BD,KAAAE,kBAA6B,K,CAI9B,YAAAC,GACN,GAAIH,KAAKI,UAAW,CAClB,OAAOJ,KAAKI,S,CAGd,MAAMC,EAAUL,KAAKM,GAAGC,QAAQ,cAChC,GAAIF,EAAS,CACX,MAAMG,EAAmBH,EAAQI,aAAa,0BAC9C,GAAID,IAAqB,WAAaA,IAAqB,QAAS,CAClE,OAAOA,C,EAGX,MAAO,O,CAGD,WAAAE,GACN,GAAIV,KAAKW,SAAU,CACjB,OAAOX,KAAKW,Q,CAGd,MAAMN,EAAUL,KAAKM,GAAGC,QAAQ,cAChC,GAAIF,EAAS,CACX,MAAMO,EAAkBP,EAAQI,aAAa,yBAC7C,GAAIG,IAAoB,QAAUA,IAAoB,MAAO,CAC3D,OAAOA,C,EAGX,MAAO,M,CAGT,MAAAC,G,MACE,MAAMC,GAAeC,EAAAf,KAAKgB,SAAK,MAAAD,SAAA,EAAAA,EAAI,EACnC,MAAME,EAAcH,EAAe,GAAK,MAAQI,OAAOJ,GAEvD,GAAIA,GAAgB,EAAG,CACrB,OAAO,I,CAGT,MAAMK,EACJnB,KAAKC,OAAS,UAAY,iCAAmC,GAC/D,MAAMG,EAAYJ,KAAKG,eACvB,MAAMQ,EAAWX,KAAKU,cACtB,MAAMU,EAAiB,0BAA0BhB,IACjD,MAAMiB,EAAgB,0BAA0BV,IAChD,MAAMW,EAActB,KAAKE,kBACrB,qCACA,GAEJ,OACEqB,EAACC,EAAI,CACHC,MAAO,GAAGL,KACRE,EAAc,2CAA6C,MAG7DC,EAAA,QACEE,MAAO,0BAA0BJ,KAAiBF,KAAaG,IAAa,aAChE,GAAGR,mBAEdG,G","ignoreList":[]}

package/dist/native/p-6005ff69.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as r}from"./p-3060df80.js";const i="nv-sidebargroup{display:flex;flex-direction:column;gap:var(--spacing-1)}nv-sidebargroup .nv-sidebargroup-label{display:block;font-size:var(--font-size-sm);line-height:var(--line-height-sm);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-lower-text);letter-spacing:0;padding:var(--sidebar-primary-title-padding-y) var(--sidebar-primary-title-padding-x)}nv-sidebar[collapsed] nv-sidebargroup .nv-sidebargroup-label{display:none}";const s=i;const d=class{constructor(e){a(this,e)}render(){return e(r,{key:"c7b4e34d8237dc93adaa33f12d7cfda36a8ac269",role:"group","aria-label":this.label},this.label&&e("div",{key:"7cafdf840b12c89604efda7895b764331c8054b7",class:"nv-sidebargroup-label"},this.label),e("slot",{key:"b6567a223f7cc05ce2874a632d38d6665c255659"}))}};d.style=s;export{d as nv_sidebargroup};
-//# sourceMappingURL=p-6005ff69.entry.js.map

package/dist/native/p-6005ff69.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["nvSidebargroupCss","NvSidebargroupStyle0","NvSidebargroup","render","h","Host","key","role","this","label","class"],"sources":["src/components/nv-sidebargroup/nv-sidebargroup.scss?tag=nv-sidebargroup","src/components/nv-sidebargroup/nv-sidebargroup.tsx"],"sourcesContent":["nv-sidebargroup {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-1);\n\n  .nv-sidebargroup-label {\n    display: block;\n    font-size: var(--font-size-sm);\n    line-height: var(--line-height-sm);\n    font-weight: var(--font-weight-medium-emphasis);\n    color: var(--color-content-lower-text);\n    letter-spacing: 0;\n    padding: var(--sidebar-primary-title-padding-y) var(--sidebar-primary-title-padding-x);\n  }\n\n  nv-sidebar[collapsed] & {\n    .nv-sidebargroup-label {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * Groups navigation items together with an optional label.\n * @slot default - Navigation items (nv-sidebarnavitem) to display in this group.\n */\n@Component({\n  tag: 'nv-sidebargroup',\n  styleUrl: 'nv-sidebargroup.scss',\n  shadow: false,\n})\nexport class NvSidebargroup {\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Optional label to display above the navigation group.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.label}>\n        {this.label && <div class=\"nv-sidebargroup-label\">{this.label}</div>}\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,scAC1B,MAAAC,EAAeD,E,MCUFE,EAAc,M,yBAWzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,QAAO,aAAaC,KAAKC,OACjCD,KAAKC,OAASL,EAAA,OAAAE,IAAA,2CAAKI,MAAM,yBAAyBF,KAAKC,OACxDL,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/native/p-63348887.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as a,H as s,g as t}from"./p-3060df80.js";const n="nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--color-level-00-background);border-right:var(--sidebar-primary-separator-size) solid var(--color-content-low-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-reduced-max-width)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--spacing-6) var(--spacing-5)}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--spacing-6);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--spacing-8);right:calc(var(--spacing-8) / -2);display:flex;align-items:center;justify-content:center;width:var(--spacing-8);height:var(--spacing-8);padding:var(--sidebar-collapsible-button-padding);background-color:var(--color-level-00-background);border:var(--sidebar-primary-separator-size) solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-level-10-background)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-icon)}";const r=n;const o=class{constructor(a){i(this,a);this.openChanged=e(this,"openChanged",7);this.type="persistent";this.open=true;this.notificationIntention="brand";this.notificationEmphasis="high";this.handleToggle=()=>{if(this.type==="collapsible"){this.open=!this.open}};this.setActiveNavItems=()=>{if(!this.activePath)return;const i=new Set;this.el.querySelectorAll("nv-sidebarnavsubitem").forEach((e=>{const a=e.querySelector("a");const s=a===null||a===void 0?void 0:a.getAttribute("href");if(s){const a=this.activePath===s;e.active=a;if(a){i.add(s)}}}));this.el.querySelectorAll("nv-sidebarnavitem").forEach((i=>{const e=i.querySelector(":scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a");const a=e===null||e===void 0?void 0:e.getAttribute("href");const s=i.querySelector("nv-sidebarnavsubitem")!==null;if(a){if(s){i.active=this.activePath===a}else{i.active=this.activePath===a}}}))};this.pendingActiveUpdate=null;this.setupMutationObserver=()=>{this.mutationObserver=new MutationObserver((i=>{const e=i.some((i=>{if(i.type!=="childList")return false;return Array.from(i.addedNodes).some((i=>{if(i.nodeType!==Node.ELEMENT_NODE)return false;const e=i;return e.tagName.toLowerCase()==="nv-sidebarnavitem"||e.tagName.toLowerCase()==="nv-sidebarnavsubitem"||e.querySelector("nv-sidebarnavitem, nv-sidebarnavsubitem")}))}));if(e){if(this.pendingActiveUpdate){clearTimeout(this.pendingActiveUpdate)}this.pendingActiveUpdate=window.setTimeout((()=>{this.setActiveNavItems();this.pendingActiveUpdate=null}),50)}}));this.mutationObserver.observe(this.el,{childList:true,subtree:true})}}handleCollapsedSideEffects(i){if(!i){return}this.el.querySelectorAll("nv-sidebarnavitem[open]").forEach((i=>{i.open=false}))}onActivePathChanged(){this.setActiveNavItems()}componentWillLoad(){this.setActiveNavItems();this.setupMutationObserver();this.handleCollapsedSideEffects(this.type==="collapsible"&&!this.open)}onOpenChanged(i,e){this.handleCollapsedSideEffects(this.type==="collapsible"&&!i);if(this.type==="collapsible"&&i!==e){this.openChanged.emit(i)}}disconnectedCallback(){if(this.mutationObserver){this.mutationObserver.disconnect()}if(this.pendingActiveUpdate){clearTimeout(this.pendingActiveUpdate)}}render(){const i=this.type==="collapsible"&&!this.open;return a(s,{key:"af78cae6f6cd895dbef098e549e63ac8baace243",role:"navigation",collapsed:i?true:undefined,"notification-intention":this.notificationIntention,"notification-emphasis":this.notificationEmphasis,"aria-expanded":this.type==="collapsible"?String(this.open):undefined},a("div",{key:"28a2ec38d36308d803362d361a243dc5c1b6083e",class:"nv-sidebar-container"},a("slot",{key:"c4d85987d256e89508392b6e28fdb74be9140ccb"})),this.type==="collapsible"&&a("button",{key:"a34c2b6a0be9b1bd494ac542db3ed096c81e32f9",class:"nv-sidebar-toggle",onClick:this.handleToggle,"aria-label":this.open?"Collapse sidebar":"Expand sidebar"},a("nv-icon",{key:"8905351a55b339106a4c7bb5cf61582a98dd31a5",name:this.open?"layout-sidebar-left-collapse":"layout-sidebar-right-collapse",size:"sm"})))}get el(){return t(this)}static get watchers(){return{activePath:["onActivePathChanged"],open:["onOpenChanged"]}}};o.style=r;export{o as nv_sidebar};
-//# sourceMappingURL=p-63348887.entry.js.map