npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.23.0 → 3.24.0 - Mend

@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (792) hide show

package/dist/components/nv-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-menu.js","mappings":"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","names":["NvMenu","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n\n &:has([fluid]:not([fluid=\"false\"])) {\n display: block;\n }\n}\n\n@mixin content-styles() {\n padding: var(--menu-contextual-padding-y)\n var(--menu-contextual-padding-x);\n border-radius: var(--menu-contextual-radius);\n gap: var(--menu-contextual-gap-y);\n background-color: var(--components-menu-contextual-background);\n border-color: var(--components-menu-contextual-border);\n display: flex;\n flex-direction: column;\n}\n\n@mixin separator-styles() {\n display: block;\n margin: var(--menu-contextual-divider-padding-top)\n var(--menu-contextual-divider-padding-x)\n var(--menu-contextual-divider-padding-bottom)\n var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n @include root-styles();\n\n nv-popover {\n display: unset;\n\n [data-scope=popover]{\n background-color: transparent !important;\n padding: 0 !important;\n }\n }\n\n [slot=\"content\"] {\n @include content-styles();\n }\n\n nv-menu[open]:not([open=\"false\"]) {\n > nv-menuitem {\n @include nv-menuitem.focused-styles();\n }\n }\n\n hr {\n @include separator-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n @slot trigger - The button element that toggles the menu popover\n * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements\n /\n@Component({\n tag: 'nv-menu',\n styleUrl: 'nv-menu.scss',\n shadow: false,\n})\nexport class NvMenu {\n @Element() el: HTMLNvMenuElement;\n private triggerElement!: HTMLElement;\n private popoverElement!: HTMLNvPopoverElement;\n private isHandlingKeyDown: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Use this to toggle the initial visibility of the menu, by default the menu\n * is hidden.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Use this if the menu is nested inside another menu. This will prevent the\n * parent menu from closing when the child menu is opened.\n /\n @Prop({ reflect: true })\n readonly nested: boolean = false;\n\n /\n Use this to disable the menu from closing automatically when a menu item is\n * selected.\n /\n @Prop({ reflect: true })\n readonly disableCloseOnSelect: boolean = false;\n\n /\n Decides where the menu shows up next to the button it's linked to (above,\n * below, to the sides). If there isn't enough room, it will adjust its\n * position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom-start';\n\n /\n List of items used to automatically generate dropdown items. This\n * provides an alternative to using the slot manually.\n \n @example\n * items = [{\n * \"label\": \"Option 1\",\n * \"value\": \"option1\",\n * },\n * {\n * \"label\": \"Option 2\",\n * \"value\": \"option2\",\n * }]\n /\n @Prop({ reflect: true })\n readonly items?: {\n /\n The label of the menu item.\n /\n label: string;\n /\n The value of the menu item.\n /\n value?: string;\n /\n Whether the menu item is disabled.\n /\n disabled?: boolean;\n /\n Whether the menu item has a submenu.\n /\n hasSubmenu?: boolean;\n /\n The icon of the menu item.\n /\n icon?: string;\n /\n The shortcut of the menu item.\n /\n shortcut?: string;\n /\n Whether the menu item is nested.\n /\n nested?: boolean;\n /\n The submenu items of the menu item.\n /\n submenuItems?: InstanceType<typeof NvMenu>['items'];\n }[];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens the menu.\n /\n @Method()\n async show() {\n this.open = true;\n }\n\n /\n Closes the menu.\n /\n @Method()\n async close() {\n this.open = false;\n }\n\n private focusFirstItem() {\n const firstButton = this.popoverElement.querySelector('nv-menuitem');\n if (firstButton) {\n requestAnimationFrame(() => firstButton.focus());\n }\n }\n\n private handleOpenChanged(event: CustomEvent<boolean>) {\n this.open = event.detail;\n const triggerHasFocus = this.triggerElement === document.activeElement;\n const triggerHasFocusVisible =\n this.triggerElement.matches(':focus-visible');\n if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted from nv-menuitem elements with the corresponding id and name when\n * selected (via click or keyboard). This event listener can be attached to\n * either the nv-menu or the nv-menuitem element.\n /\n @Event({ bubbles: false })\n menuitemSelected: EventEmitter<\n HTMLNvMenuitemElementEventMap['menuitemSelected']\n >;\n\n //#endregion EVENTS\n /**************************************************************************/\n //#region LISTENERS\n\n / eslint-disable nova/native-event-listener /\n @Listen('menuitemSelected')\n handleMenuItemSelect(\n event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n ) {\n if (this.disableCloseOnSelect) return;\n if (event.detail.hasSubmenu) return;\n this.open = false;\n }\n / eslint-enable nova/native-event-listener /\n\n @Listen('keydown', { passive: false })\n handleKeydown(event: KeyboardEvent) {\n // If the menu is not open, check if the trigger is focused\n // and the user presses Enter or ArrowDown, open the menu\n if (!this.open) {\n if (\n (event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === ' ') &&\n document.activeElement === this.triggerElement\n ) {\n event.preventDefault();\n this.show();\n this.focusFirstItem();\n // Then, put the focus on the first menuitem\n const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n if (firstMenuItem) {\n requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n }\n }\n return;\n }\n\n if (this.isHandlingKeyDown) return;\n this.isHandlingKeyDown = true;\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight' \|\|\n event.key === 'Escape'\n ) {\n event.preventDefault();\n }\n\n if (event.key === 'Escape' && !this.nested) {\n this.close();\n this.triggerElement.focus();\n this.isHandlingKeyDown = false;\n return;\n }\n\n const menuContent = this.el.querySelector('[slot=\"content\"]');\n const menuItems = (\n Array.from(menuContent.childNodes) as Array<\n HTMLNvMenuitemElement \| HTMLNvMenuElement\n >\n ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n let currentIndex = menuItems.indexOf(\n document.activeElement as HTMLNvMenuitemElement,\n );\n if (currentIndex === -1)\n currentIndex = menuItems.indexOf(\n document.activeElement.parentElement as HTMLNvMenuitemElement,\n );\n if (\n currentIndex === -1 &&\n menuItems.find(item => item.matches('nv-menu[open]'))\n ) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n menuItems.forEach(item => {\n if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n });\n }\n\n if (event.key === 'ArrowDown') {\n let nextIndex = (currentIndex + 1) % menuItems.length;\n while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n nextIndex = (nextIndex + 1) % menuItems.length;\n }\n const nextFocusable = menuItems[nextIndex];\n if (nextFocusable.matches('nv-menuitem')) {\n nextFocusable.focus();\n } else if (nextFocusable.matches('nv-menu')) {\n nextFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowUp') {\n let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n }\n const prevFocusable = menuItems[prevIndex];\n if (prevFocusable.matches('nv-menuitem')) {\n prevFocusable.focus();\n } else if (prevFocusable.matches('nv-menu')) {\n prevFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowRight') {\n const submenu = menuItems[currentIndex];\n if (!submenu.matches('nv-menu')) {\n this.isHandlingKeyDown = false;\n return;\n }\n (submenu as HTMLNvMenuElement).show();\n }\n\n if (event.key === 'ArrowLeft' && this.nested) {\n if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n this.isHandlingKeyDown = false;\n return;\n }\n this.close();\n this.triggerElement.focus();\n }\n\n this.isHandlingKeyDown = false;\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n /\n * Generates menu items from the `items` property.\n * @param {MenuItem[]} items - The items to display in the menu.\n * @returns {HTMLElement[]} The rendered items.\n */\n private renderMenuItems = () => {\n return this.items.map(item => {\n if (item.hasSubmenu && item.submenuItems?.length > 0) {\n return (\n <nv-menu nested placement=\"right-start\" items={item.submenuItems}>\n <nv-menuitem\n slot=\"trigger\"\n hasSubmenu\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\n ></nv-menuitem>\n </nv-menu>\n );\n }\n return (\n <nv-menuitem\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\n ></nv-menuitem>\n );\n });\n };\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"click\"\n triggerElement={this.triggerElement}\n placement={this.placement}\n nested={this.nested}\n open={this.open}\n onOpenChanged={this.handleOpenChanged.bind(this)}\n >\n {this.items ? (\n <ul slot=\"content\">{this.renderMenuItems()}</ul>\n ) : (\n <slot name=\"content\"></slot>\n )}\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-menu.js","mappings":"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","names":["NvMenu","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n display: inline-block;\n position: relative;\n\n &:has([fluid]:not([fluid=\"false\"])) {\n display: block;\n }\n}\n\n@mixin content-styles() {\n padding: var(--menu-contextual-padding-y)\n var(--menu-contextual-padding-x);\n border-radius: var(--menu-contextual-radius);\n gap: var(--menu-contextual-gap-y);\n background-color: var(--components-menu-contextual-background);\n border-color: var(--components-menu-contextual-border);\n display: flex;\n flex-direction: column;\n}\n\n@mixin separator-styles() {\n display: block;\n margin: var(--menu-contextual-divider-padding-top)\n var(--menu-contextual-divider-padding-x)\n var(--menu-contextual-divider-padding-bottom)\n var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n @include root-styles();\n\n nv-popover {\n display: unset;\n\n [data-scope=popover]{\n background-color: transparent !important;\n padding: 0 !important;\n }\n }\n\n [slot=\"content\"] {\n @include content-styles();\n }\n\n nv-menu[open]:not([open=\"false\"]) {\n > nv-menuitem {\n @include nv-menuitem.focused-styles();\n }\n }\n\n hr {\n @include separator-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n @slot trigger - The button element that toggles the menu popover\n * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements\n /\n@Component({\n tag: 'nv-menu',\n styleUrl: 'nv-menu.scss',\n shadow: false,\n})\nexport class NvMenu {\n @Element() el: HTMLNvMenuElement;\n private triggerElement!: HTMLElement;\n private popoverElement!: HTMLNvPopoverElement;\n private isHandlingKeyDown: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Use this to toggle the initial visibility of the menu, by default the menu\n * is hidden.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Use this if the menu is nested inside another menu. This will prevent the\n * parent menu from closing when the child menu is opened.\n /\n @Prop({ reflect: true })\n readonly nested: boolean = false;\n\n /\n Use this to disable the menu from closing automatically when a menu item is\n * selected.\n /\n @Prop({ reflect: true })\n readonly disableCloseOnSelect: boolean = false;\n\n /\n Decides where the menu shows up next to the button it's linked to (above,\n * below, to the sides). If there isn't enough room, it will adjust its\n * position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom-start';\n\n /\n List of items used to automatically generate dropdown items. This\n * provides an alternative to using the slot manually.\n \n @example\n * items = [{\n * \"label\": \"Option 1\",\n * \"value\": \"option1\",\n * },\n * {\n * \"label\": \"Option 2\",\n * \"value\": \"option2\",\n * }]\n /\n @Prop({ reflect: true })\n readonly items?: {\n /\n The label of the menu item.\n /\n label: string;\n /\n The value of the menu item.\n /\n value?: string;\n /\n Whether the menu item is disabled.\n /\n disabled?: boolean;\n /\n Whether the menu item has a submenu.\n /\n hasSubmenu?: boolean;\n /\n The icon of the menu item.\n /\n icon?: string;\n /\n The shortcut of the menu item.\n /\n shortcut?: string;\n /\n Whether the menu item is nested.\n /\n nested?: boolean;\n /\n The submenu items of the menu item.\n /\n submenuItems?: InstanceType<typeof NvMenu>['items'];\n }[];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens the menu.\n /\n @Method()\n async show() {\n this.open = true;\n }\n\n /\n Closes the menu.\n /\n @Method()\n async close() {\n this.open = false;\n }\n\n private focusFirstItem() {\n const firstButton = this.popoverElement.querySelector('nv-menuitem');\n if (firstButton) {\n requestAnimationFrame(() => firstButton.focus());\n }\n }\n\n private handleOpenChanged(event: CustomEvent<boolean>) {\n this.open = event.detail;\n const triggerHasFocus = this.triggerElement === document.activeElement;\n const triggerHasFocusVisible =\n this.triggerElement.matches(':focus-visible');\n if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted from nv-menuitem elements with the corresponding id and name when\n * selected (via click or keyboard). This event listener can be attached to\n * either the nv-menu or the nv-menuitem element.\n /\n @Event({ bubbles: false })\n menuitemSelected: EventEmitter<\n HTMLNvMenuitemElementEventMap['menuitemSelected']\n >;\n\n //#endregion EVENTS\n /**************************************************************************/\n //#region LISTENERS\n\n / eslint-disable nova/native-event-listener /\n @Listen('menuitemSelected')\n handleMenuItemSelect(\n event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n ) {\n if (this.disableCloseOnSelect) return;\n if (event.detail.hasSubmenu) return;\n this.open = false;\n }\n / eslint-enable nova/native-event-listener /\n\n @Listen('keydown', { passive: false })\n handleKeydown(event: KeyboardEvent) {\n // If the menu is not open, check if the trigger is focused\n // and the user presses Enter or ArrowDown, open the menu\n if (!this.open) {\n if (\n (event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === ' ') &&\n document.activeElement === this.triggerElement\n ) {\n event.preventDefault();\n this.show();\n this.focusFirstItem();\n // Then, put the focus on the first menuitem\n const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n if (firstMenuItem) {\n requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n }\n }\n return;\n }\n\n if (this.isHandlingKeyDown) return;\n this.isHandlingKeyDown = true;\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight' \|\|\n event.key === 'Escape'\n ) {\n event.preventDefault();\n }\n\n if (event.key === 'Escape' && !this.nested) {\n this.close();\n this.triggerElement.focus();\n this.isHandlingKeyDown = false;\n return;\n }\n\n const menuContent = this.el.querySelector('[slot=\"content\"]');\n const menuItems = (\n Array.from(menuContent.childNodes) as Array<\n HTMLNvMenuitemElement \| HTMLNvMenuElement\n >\n ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n let currentIndex = menuItems.indexOf(\n document.activeElement as HTMLNvMenuitemElement,\n );\n if (currentIndex === -1)\n currentIndex = menuItems.indexOf(\n document.activeElement.parentElement as HTMLNvMenuitemElement,\n );\n if (\n currentIndex === -1 &&\n menuItems.find(item => item.matches('nv-menu[open]'))\n ) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n menuItems.forEach(item => {\n if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n });\n }\n\n if (event.key === 'ArrowDown') {\n let nextIndex = (currentIndex + 1) % menuItems.length;\n while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n nextIndex = (nextIndex + 1) % menuItems.length;\n }\n const nextFocusable = menuItems[nextIndex];\n if (nextFocusable.matches('nv-menuitem')) {\n nextFocusable.focus();\n } else if (nextFocusable.matches('nv-menu')) {\n nextFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowUp') {\n let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n }\n const prevFocusable = menuItems[prevIndex];\n if (prevFocusable.matches('nv-menuitem')) {\n prevFocusable.focus();\n } else if (prevFocusable.matches('nv-menu')) {\n prevFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowRight') {\n const submenu = menuItems[currentIndex];\n if (!submenu.matches('nv-menu')) {\n this.isHandlingKeyDown = false;\n return;\n }\n (submenu as HTMLNvMenuElement).show();\n }\n\n if (event.key === 'ArrowLeft' && this.nested) {\n if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n this.isHandlingKeyDown = false;\n return;\n }\n this.close();\n this.triggerElement.focus();\n }\n\n this.isHandlingKeyDown = false;\n }\n\n //#endregion LISTENERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n /\n * Generates menu items from the `items` property.\n * @param {MenuItem[]} items - The items to display in the menu.\n * @returns {HTMLElement[]} The rendered items.\n */\n private renderMenuItems = () => {\n return this.items.map(item => {\n if (item.hasSubmenu && item.submenuItems?.length > 0) {\n return (\n <nv-menu nested placement=\"right-start\" items={item.submenuItems}>\n <nv-menuitem\n slot=\"trigger\"\n hasSubmenu\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\n ></nv-menuitem>\n </nv-menu>\n );\n }\n return (\n <nv-menuitem\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n onMenuitemSelected={e => this.menuitemSelected.emit(e.detail)}\n ></nv-menuitem>\n );\n });\n };\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"click\"\n triggerElement={this.triggerElement}\n placement={this.placement}\n nested={this.nested}\n open={this.open}\n onOpenChanged={this.handleOpenChanged.bind(this)}\n >\n {this.items ? (\n <ul slot=\"content\">{this.renderMenuItems()}</ul>\n ) : (\n <slot name=\"content\"></slot>\n )}\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-menuitem.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NvMenuitem$1, d as defineCustomElement$1 } from './p-CBvZjfqs.js';
+import { N as NvMenuitem$1, d as defineCustomElement$1 } from './p-C2QAWGhf.js';
 const NvMenuitem = NvMenuitem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-notification-bullet.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NvNotificationBullet$1, d as defineCustomElement$1 } from './p-CBF8V1L7.js';
+import { N as NvNotificationBullet$1, d as defineCustomElement$1 } from './p-tyaJ-nGV.js';
 const NvNotificationBullet = NvNotificationBullet$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-notification.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { u as useFade } from './p-9xYwU7ku.js';
 import './p-Dz1GUhVy.js';
 import { u as useSlide } from './p-D2otK4Ce.js';
 import { p as parallel } from './p-CgHCo_Ho.js';
-import { d as defineCustomElement$2 } from './p-CBOuqJTb.js';
+import { d as defineCustomElement$2 } from './p-nfYynlVq.js';
 import { v as v4 } from './p-BdYh22OP.js';
 const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container] [data-scope=icon]{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}nv-notification[feedback=information] [data-scope=container]{background-color:var(--components-notification-information-background);border-color:var(--components-notification-information-border)}nv-notification[feedback=information] [data-scope=container] [data-scope=icon]{color:var(--components-notification-information-icon)}nv-notification[feedback=information]>[data-scope=close]:focus,nv-notification[feedback=information]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=warning] [data-scope=container]{background-color:var(--components-notification-warning-background);border-color:var(--components-notification-warning-border)}nv-notification[feedback=warning] [data-scope=container] [data-scope=icon]{color:var(--components-notification-warning-icon)}nv-notification[feedback=warning]>[data-scope=close]:focus,nv-notification[feedback=warning]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=error] [data-scope=container]{background-color:var(--components-notification-error-background);border-color:var(--components-notification-error-border)}nv-notification[feedback=error] [data-scope=container] [data-scope=icon]{color:var(--components-notification-error-icon)}nv-notification[feedback=error]>[data-scope=close]:focus,nv-notification[feedback=error]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=success] [data-scope=container]{background-color:var(--components-notification-success-background);border-color:var(--components-notification-success-border)}nv-notification[feedback=success] [data-scope=container] [data-scope=icon]{color:var(--components-notification-success-icon)}nv-notification[feedback=success]>[data-scope=close]:focus,nv-notification[feedback=success]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=neutral] [data-scope=container]{background-color:var(--components-notification-neutral-background);border-color:var(--components-notification-neutral-border)}nv-notification[feedback=neutral] [data-scope=container] [data-scope=icon]{color:var(--components-notification-neutral-icon)}nv-notification[feedback=neutral]>[data-scope=close]:focus,nv-notification[feedback=neutral]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}";
@@ -86,12 +86,10 @@ const NvNotification$1 = /*@__PURE__*/ proxyCustomElement(class NvNotification e
         await this.showAnimation();
     }
     getDefaultIcon() {
-        var _a;
-        return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
+        return this.iconByFeedback[this.feedback] ?? 'info-circle';
     }
     getAriaRole() {
-        var _a;
-        return (_a = this.roleByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'status';
+        return this.roleByFeedback[this.feedback] ?? 'status';
     }
     getAriaLive() {
         return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';
@@ -134,9 +132,9 @@ const NvNotification$1 = /*@__PURE__*/ proxyCustomElement(class NvNotification e
         }
     }
     async dismissAnimation() {
-        var _a;
-        const position = (_a = this.el
-            .closest('nv-notificationcontainer')) === null || _a === void 0 ? void 0 : _a.getAttribute('position');
+        const position = this.el
+            .closest('nv-notificationcontainer')
+            ?.getAttribute('position');
         const destination = this.getSlideDestination(position);
         const { fadeOut } = useFade(this.container, { duration: 300 });
         const { slideX, slideY, setSlideReset } = useSlide(this.container, {
@@ -168,8 +166,7 @@ const NvNotification$1 = /*@__PURE__*/ proxyCustomElement(class NvNotification e
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a, _b, _c;
-        return (h(Host, { key: 'cf0f39e0565a264b676e0ca569ec79169771d269', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, h("div", { key: 'ed2a5e50f0a6975c652f658e62a271c0b476f7d2', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '9eccf1b9f29f581bf77255b9e2bebebfdc233302', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: '73890097ad80af4d86646bb83f2ae99878164db4', name: "x", size: "sm" }))), h("nv-icon", { key: 'c852478c25ae05d5219453234db95a420b5c5a1e', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: 'b06042bf55e8bedc07a60f23a27b07160776c0e0', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: '7666dfb18169cdfea8eb8c603b20a5ba7075824c', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: 'f6e651737cf630bb89d40b7664329596355a8ea0', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: 'ae5d89db2b36c4c81c7b46aada5f50bd6eb4aa90', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: '24d01abd694f7f9a316345f9d88716d1c0a47234', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: 'a1aa0bcc33a42d7b36bcd364a155d41f527cc96a', "data-scope": "actions" }, h("slot", { key: 'b09c21bed0fd559bf2f694f861385444c2ddbbf0', name: "actions" })))))));
+        return (h(Host, { key: '64c79843ff7bdd1a4ae001a60a8db540947b8412', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: 'b51c9c3829b122476564726e20a1da112059035b', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '3ee952fb7dc41f54fa35c88d12d4d512b96eece1', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: '4fa53d42ff6ea7b5e90a01cfcffec167368aece6', name: "x", size: "sm" }))), h("nv-icon", { key: 'e116c962672fb2237382b7dc2d3c6feae62bfced', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: '62a1da7ac952aa704965aca61ba6f98eb12341a2', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: '4ddc91bc5568f54c6f8f3114720c0821c103f1c3', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: 'b7b7c678c995d68be52ca6711e55e5a8fa43fe68', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '5e02782e07e7e2720cef3ec8c7f06321ce53940d', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: '4886e5e490c5f1baf429c48666fd715f43113a71', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '1d75b6276a8622bc607cf296336abc734e02320a', "data-scope": "actions" }, h("slot", { key: '6cab1b879e9b0582a415edd5d096a2b794b82ea4', name: "actions" })))))));
     }
     get el() { return this; }
     static get style() { return nvNotificationCss; }

package/dist/components/nv-notification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-notification.js","mappings":"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","names":["NvNotification","__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/nv-notification/styles/nv-notification.scss?tag=nv-notification","src/components/nv-notification/nv-notification.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"./mixins\" as ;\n@use \"../../../styles/focus-ring\" as focus;\n\nnv-notification {\n @include root-styles();\n\n [data-scope=\"container\"] {\n @include container-styles();\n\n [data-scope=\"icon\"] {\n @include icon-styles();\n }\n\n [data-scope=\"dismiss\"] {\n @include dismiss-btn-styles();\n }\n\n [data-scope=\"content\"] {\n @include content-styles();\n\n [data-scope=\"heading\"] {\n @include header-styles();\n }\n\n [data-scope=\"message\"] {\n @include message-styles();\n }\n\n [data-scope=\"actions\"] {\n @include actions-styles();\n }\n }\n }\n\n @each $feedback in $feedback-variants {\n &[feedback=\"#{$feedback}\"] {\n [data-scope=\"container\"] {\n @include feedback-color($feedback);\n\n [data-scope=\"icon\"] {\n @include icon-color($feedback);\n }\n }\n\n & > [data-scope=\"close\"] {\n @include focus.focus-ring(map.get($border-color-map, $feedback));\n }\n }\n }\n\n @each $emphasis in $emphasis-variants {\n &[emphasis=\"#{$emphasis}\"] {\n [data-scope=\"container\"] {\n @include emphasis-styles($emphasis);\n }\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n FeedbackColors,\n NotificationEmphasis,\n NotificationPosition,\n} from '../../utils/constants';\nimport { type IconName } from '../nv-icon/nv-icons';\nimport { useCollapse, useFade, useSlide, parallel } from '../../animations';\n\ntype AriaRole = 'status' \| 'alert';\ntype AriaLive = 'polite' \| 'assertive';\n\n/\n @slot heading - Use this slot to insert HTML as the notification title.\n * @slot content - Use this slot to insert HTML as the notification message.\n * @slot actions - Use this slot for custom actions.\n /\n@Component({\n tag: 'nv-notification',\n styleUrl: 'styles/nv-notification.scss',\n shadow: false,\n})\nexport class NvNotification {\n @Element() el: HTMLNvNotificationElement;\n private container: HTMLElement;\n private headingSlot: HTMLElement;\n private messageSlot: HTMLElement;\n private actionsSlot: HTMLElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Set a unique ID for the notification. Used for aria attributes and managing\n * multiple notifications.\n /\n @Prop({ reflect: true })\n readonly uid: string = uuidv4();\n\n /\n Specifies the notification type which determines the color and default icon.\n /\n @Prop({ reflect: true })\n readonly feedback: `${FeedbackColors}` = 'information';\n\n /\n Adjusts the emphasis to make the notification more or less visually\n * prominent to users. Use this to draw attention to important actions or\n * reduce focus on less critical ones\n /\n @Prop({ reflect: true })\n readonly emphasis: `${NotificationEmphasis}` = 'medium';\n\n /\n Short and concise text for the notification title.\n /\n @Prop({ reflect: true })\n readonly heading: string;\n\n /\n Main content for the notification. For more complex content, use the\n * content slot instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Icon associated with the notification, defaults vary based on the feedback\n * type.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n Allows the notification to be dismissed via a close button (x). The\n * notification is not dismissible unless explicitly enabled.\n /\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\n\n /\n Controls the visibility of the notification.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n /\n When true, the notification will be hidden initially, but internal changes\n * will not be in a controlled state. Good for animating the notification in.\n /\n @Prop({ reflect: true })\n readonly initiallyHidden: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Dismisses the notification with an animation, after the animation is\n * complete, the hiddenChanged event will be emitted with the value of true,\n * and the hidden prop will be set to true.\n /\n @Method()\n async dismiss() {\n await this.dismissAnimation();\n }\n\n /\n Sets the hidden prop to false, and shows the notification with an\n * animation, after the animation is complete, the hiddenChanged event will be\n * emitted with the value of false.\n /\n @Method()\n async show() {\n await this.showAnimation();\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\n /\n @Event({ bubbles: false })\n hiddenChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region INTERNAL\n\n private iconByFeedback: Record<FeedbackColors, IconName> = {\n [FeedbackColors.Warning]: 'alert-circle',\n [FeedbackColors.Information]: 'info-circle',\n [FeedbackColors.Success]: 'circle-check',\n [FeedbackColors.Error]: 'alert-triangle',\n [FeedbackColors.Neutral]: 'help',\n };\n\n private roleByFeedback: Record<FeedbackColors, AriaRole> = {\n [FeedbackColors.Error]: 'alert',\n [FeedbackColors.Warning]: 'alert',\n [FeedbackColors.Information]: 'status',\n [FeedbackColors.Success]: 'status',\n [FeedbackColors.Neutral]: 'status',\n };\n\n private getDefaultIcon(): IconName {\n return this.iconByFeedback[this.feedback] ?? 'info-circle';\n }\n\n private getAriaRole(): AriaRole {\n return this.roleByFeedback[this.feedback] ?? 'status';\n }\n\n private getAriaLive(): AriaLive {\n return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';\n }\n\n private getHeadingId(): string \| null {\n return this.heading ? `nv-notification-${this.uid}-heading` : null;\n }\n\n private getMessageId(): string \| null {\n return this.message ? `nv-notification-${this.uid}-message` : null;\n }\n\n private async showAnimation() {\n this.hidden = false;\n\n const { setFadeIn } = useFade(this.container);\n const { expand } = useCollapse(this.el, {\n duration: 300,\n overflow: 'visible',\n });\n const { slideY, setSlideY } = useSlide(this.container, {\n duration: 300,\n });\n\n setSlideY(-100);\n setFadeIn();\n await parallel(slideY({ from: -100, to: 0 }), expand).start();\n\n this.hiddenChanged.emit(false);\n }\n\n private getSlideDestination(pos?: NotificationPosition): {\n / The axis to slide. /\n axis: 'x' \| 'y';\n /* The destination value. /\n to: number;\n } {\n switch (pos) {\n case NotificationPosition.TopRight:\n case NotificationPosition.BottomRight:\n return { axis: 'x', to: 100 }; // right\n case NotificationPosition.TopLeft:\n case NotificationPosition.BottomLeft:\n return { axis: 'x', to: -100 }; // left\n case NotificationPosition.TopCenter:\n return { axis: 'y', to: -100 }; // up\n case NotificationPosition.BottomCenter:\n return { axis: 'y', to: 100 }; // down\n default:\n return { axis: 'x', to: 100 }; // fallback\n }\n }\n\n private async dismissAnimation() {\n const position = this.el\n .closest('nv-notificationcontainer')\n ?.getAttribute('position') as NotificationPosition \| undefined;\n\n const destination = this.getSlideDestination(position);\n\n const { fadeOut } = useFade(this.container, { duration: 300 });\n const { slideX, slideY, setSlideReset } = useSlide(this.container, {\n duration: 500,\n });\n const { collapse } = useCollapse(this.el, {\n duration: 500,\n overflow: 'visible',\n });\n const slide =\n destination.axis === 'x'\n ? slideX({ from: 0, to: destination.to })\n : slideY({ from: 0, to: destination.to });\n\n setSlideReset();\n await parallel(fadeOut, slide, collapse).start();\n\n this.hidden = true;\n this.hiddenChanged.emit(true);\n }\n\n //#endregion INTERNAL\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.headingSlot = this.el.querySelector('[slot=\"heading\"]');\n this.messageSlot = this.el.querySelector('[slot=\"content\"]');\n this.actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n\n if (this.initiallyHidden) this.hidden = true;\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role={this.getAriaRole()}\n aria-live={this.getAriaLive()}\n aria-atomic\n aria-labelledby={this.getHeadingId() ?? null}\n aria-describedby={this.getMessageId() ?? null}\n tabindex=\"-1\"\n >\n <div data-scope=\"container\" ref={el => (this.container = el)}>\n {this.dismissible && (\n <button\n data-scope=\"dismiss\"\n type=\"button\"\n onClick={this.dismiss.bind(this)}\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n size=\"md\"\n data-scope=\"icon\"\n ></nv-icon>\n\n <div data-scope=\"content\">\n {(this.heading \|\| this.headingSlot) && (\n <p id={this.getHeadingId()} data-scope=\"heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </p>\n )}\n {(this.message \|\| this.messageSlot) && (\n <p id={this.getMessageId()} data-scope=\"message\">\n <slot name=\"content\">{this.message}</slot>\n </p>\n )}\n\n {this.actionsSlot && (\n <div data-scope=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-notification.js","mappings":"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","names":["NvNotification","__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/nv-notification/styles/nv-notification.scss?tag=nv-notification","src/components/nv-notification/nv-notification.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"./mixins\" as ;\n@use \"../../../styles/focus-ring\" as focus;\n\nnv-notification {\n @include root-styles();\n\n [data-scope=\"container\"] {\n @include container-styles();\n\n [data-scope=\"icon\"] {\n @include icon-styles();\n }\n\n [data-scope=\"dismiss\"] {\n @include dismiss-btn-styles();\n }\n\n [data-scope=\"content\"] {\n @include content-styles();\n\n [data-scope=\"heading\"] {\n @include header-styles();\n }\n\n [data-scope=\"message\"] {\n @include message-styles();\n }\n\n [data-scope=\"actions\"] {\n @include actions-styles();\n }\n }\n }\n\n @each $feedback in $feedback-variants {\n &[feedback=\"#{$feedback}\"] {\n [data-scope=\"container\"] {\n @include feedback-color($feedback);\n\n [data-scope=\"icon\"] {\n @include icon-color($feedback);\n }\n }\n\n & > [data-scope=\"close\"] {\n @include focus.focus-ring(map.get($border-color-map, $feedback));\n }\n }\n }\n\n @each $emphasis in $emphasis-variants {\n &[emphasis=\"#{$emphasis}\"] {\n [data-scope=\"container\"] {\n @include emphasis-styles($emphasis);\n }\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n FeedbackColors,\n NotificationEmphasis,\n NotificationPosition,\n} from '../../utils/constants';\nimport { type IconName } from '../nv-icon/nv-icons';\nimport { useCollapse, useFade, useSlide, parallel } from '../../animations';\n\ntype AriaRole = 'status' \| 'alert';\ntype AriaLive = 'polite' \| 'assertive';\n\n/\n @slot heading - Use this slot to insert HTML as the notification title.\n * @slot content - Use this slot to insert HTML as the notification message.\n * @slot actions - Use this slot for custom actions.\n /\n@Component({\n tag: 'nv-notification',\n styleUrl: 'styles/nv-notification.scss',\n shadow: false,\n})\nexport class NvNotification {\n @Element() el: HTMLNvNotificationElement;\n private container: HTMLElement;\n private headingSlot: HTMLElement;\n private messageSlot: HTMLElement;\n private actionsSlot: HTMLElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Set a unique ID for the notification. Used for aria attributes and managing\n * multiple notifications.\n /\n @Prop({ reflect: true })\n readonly uid: string = uuidv4();\n\n /\n Specifies the notification type which determines the color and default icon.\n /\n @Prop({ reflect: true })\n readonly feedback: `${FeedbackColors}` = 'information';\n\n /\n Adjusts the emphasis to make the notification more or less visually\n * prominent to users. Use this to draw attention to important actions or\n * reduce focus on less critical ones\n /\n @Prop({ reflect: true })\n readonly emphasis: `${NotificationEmphasis}` = 'medium';\n\n /\n Short and concise text for the notification title.\n /\n @Prop({ reflect: true })\n readonly heading: string;\n\n /\n Main content for the notification. For more complex content, use the\n * content slot instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Icon associated with the notification, defaults vary based on the feedback\n * type.\n /\n @Prop({ reflect: true })\n readonly icon: string;\n\n /\n Allows the notification to be dismissed via a close button (x). The\n * notification is not dismissible unless explicitly enabled.\n /\n @Prop({ reflect: true })\n readonly dismissible: boolean = false;\n\n /\n Controls the visibility of the notification.\n /\n @Prop({ reflect: true, mutable: true })\n hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n /\n When true, the notification will be hidden initially, but internal changes\n * will not be in a controlled state. Good for animating the notification in.\n /\n @Prop({ reflect: true })\n readonly initiallyHidden: boolean = false;\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Dismisses the notification with an animation, after the animation is\n * complete, the hiddenChanged event will be emitted with the value of true,\n * and the hidden prop will be set to true.\n /\n @Method()\n async dismiss() {\n await this.dismissAnimation();\n }\n\n /\n Sets the hidden prop to false, and shows the notification with an\n * animation, after the animation is complete, the hiddenChanged event will be\n * emitted with the value of false.\n /\n @Method()\n async show() {\n await this.showAnimation();\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n * Passes hidden value to the detail.\n * @bind hidden\n /\n @Event({ bubbles: false })\n hiddenChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region INTERNAL\n\n private iconByFeedback: Record<FeedbackColors, IconName> = {\n [FeedbackColors.Warning]: 'alert-circle',\n [FeedbackColors.Information]: 'info-circle',\n [FeedbackColors.Success]: 'circle-check',\n [FeedbackColors.Error]: 'alert-triangle',\n [FeedbackColors.Neutral]: 'help',\n };\n\n private roleByFeedback: Record<FeedbackColors, AriaRole> = {\n [FeedbackColors.Error]: 'alert',\n [FeedbackColors.Warning]: 'alert',\n [FeedbackColors.Information]: 'status',\n [FeedbackColors.Success]: 'status',\n [FeedbackColors.Neutral]: 'status',\n };\n\n private getDefaultIcon(): IconName {\n return this.iconByFeedback[this.feedback] ?? 'info-circle';\n }\n\n private getAriaRole(): AriaRole {\n return this.roleByFeedback[this.feedback] ?? 'status';\n }\n\n private getAriaLive(): AriaLive {\n return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';\n }\n\n private getHeadingId(): string \| null {\n return this.heading ? `nv-notification-${this.uid}-heading` : null;\n }\n\n private getMessageId(): string \| null {\n return this.message ? `nv-notification-${this.uid}-message` : null;\n }\n\n private async showAnimation() {\n this.hidden = false;\n\n const { setFadeIn } = useFade(this.container);\n const { expand } = useCollapse(this.el, {\n duration: 300,\n overflow: 'visible',\n });\n const { slideY, setSlideY } = useSlide(this.container, {\n duration: 300,\n });\n\n setSlideY(-100);\n setFadeIn();\n await parallel(slideY({ from: -100, to: 0 }), expand).start();\n\n this.hiddenChanged.emit(false);\n }\n\n private getSlideDestination(pos?: NotificationPosition): {\n / The axis to slide. /\n axis: 'x' \| 'y';\n /* The destination value. /\n to: number;\n } {\n switch (pos) {\n case NotificationPosition.TopRight:\n case NotificationPosition.BottomRight:\n return { axis: 'x', to: 100 }; // right\n case NotificationPosition.TopLeft:\n case NotificationPosition.BottomLeft:\n return { axis: 'x', to: -100 }; // left\n case NotificationPosition.TopCenter:\n return { axis: 'y', to: -100 }; // up\n case NotificationPosition.BottomCenter:\n return { axis: 'y', to: 100 }; // down\n default:\n return { axis: 'x', to: 100 }; // fallback\n }\n }\n\n private async dismissAnimation() {\n const position = this.el\n .closest('nv-notificationcontainer')\n ?.getAttribute('position') as NotificationPosition \| undefined;\n\n const destination = this.getSlideDestination(position);\n\n const { fadeOut } = useFade(this.container, { duration: 300 });\n const { slideX, slideY, setSlideReset } = useSlide(this.container, {\n duration: 500,\n });\n const { collapse } = useCollapse(this.el, {\n duration: 500,\n overflow: 'visible',\n });\n const slide =\n destination.axis === 'x'\n ? slideX({ from: 0, to: destination.to })\n : slideY({ from: 0, to: destination.to });\n\n setSlideReset();\n await parallel(fadeOut, slide, collapse).start();\n\n this.hidden = true;\n this.hiddenChanged.emit(true);\n }\n\n //#endregion INTERNAL\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.headingSlot = this.el.querySelector('[slot=\"heading\"]');\n this.messageSlot = this.el.querySelector('[slot=\"content\"]');\n this.actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n\n if (this.initiallyHidden) this.hidden = true;\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role={this.getAriaRole()}\n aria-live={this.getAriaLive()}\n aria-atomic\n aria-labelledby={this.getHeadingId() ?? null}\n aria-describedby={this.getMessageId() ?? null}\n tabindex=\"-1\"\n >\n <div data-scope=\"container\" ref={el => (this.container = el)}>\n {this.dismissible && (\n <button\n data-scope=\"dismiss\"\n type=\"button\"\n onClick={this.dismiss.bind(this)}\n >\n <nv-icon name=\"x\" size=\"sm\" />\n </button>\n )}\n\n <nv-icon\n name={this.icon ?? this.getDefaultIcon()}\n size=\"md\"\n data-scope=\"icon\"\n ></nv-icon>\n\n <div data-scope=\"content\">\n {(this.heading \|\| this.headingSlot) && (\n <p id={this.getHeadingId()} data-scope=\"heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </p>\n )}\n {(this.message \|\| this.messageSlot) && (\n <p id={this.getMessageId()} data-scope=\"message\">\n <slot name=\"content\">{this.message}</slot>\n </p>\n )}\n\n {this.actionsSlot && (\n <div data-scope=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n // #endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-notificationcontainer.js CHANGED Viewed

@@ -31,7 +31,7 @@ const NvNotificationContainer = /*@__PURE__*/ proxyCustomElement(class NvNotific
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'bf0b7cd02e0d214516f352eb7016d6060d6959c5', class: `position-${this.position}` }, h("slot", { key: 'f042e3f11b4d2af4b47aadeba04a332c57889616' })));
+        return (h(Host, { key: '5dee0dc22cb8917d8134e2f256996118e3e30b42', class: `position-${this.position}` }, h("slot", { key: '14664d70fb1840877d80eda1b3c7804457ffa67f' })));
     }
     static get style() { return nvNotificationcontainerCss; }
 }, [260, "nv-notificationcontainer", {

package/dist/components/nv-popover.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as NvPopover$1, d as defineCustomElement$1 } from './p-B-3kAnun.js';
+import { N as NvPopover$1, d as defineCustomElement$1 } from './p-B9i3m6rk.js';
 const NvPopover = NvPopover$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-row.js CHANGED Viewed

@@ -12,7 +12,7 @@ const NvRow$1 = /*@__PURE__*/ proxyCustomElement(class NvRow extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
+        return (h(Host, { key: 'fda91377821b426a6cbc6ade6f253144a388fb62' }, h("slot", { key: '5d7cc9aa4d4ad0b251aa5c028adfddade4e4d1c4' })));
     }
     static get style() { return nvRowCss; }
 }, [260, "nv-row"]);

package/dist/components/nv-sidebar.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-import { d as defineCustomElement$2 } from './p-CBOuqJTb.js';
+import { d as defineCustomElement$2 } from './p-nfYynlVq.js';
 const nvSidebarCss = "nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--components-sidebar-background);border-right:var(--sidebar-divider-size) solid var(--components-sidebar-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-width-collapsed)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed)}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--sidebar-padding-y) var(--sidebar-padding-x);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--sidebar-collapsible-button-position-top);right:calc(-1 * var(--sidebar-collapsible-button-position-right));display:flex;align-items:center;justify-content:center;padding:var(--sidebar-collapsible-button-padding);background-color:var(--components-sidebar-background);border:1px solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-interaction-container-neutral-background-hover)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-icon)}nv-sidebar .nv-sidebar-toggle nv-icon:hover{color:var(--color-interaction-container-neutral-icon-hover)}";
@@ -54,7 +54,7 @@ const NvSidebar$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebar extends H {
             const activeSubitemHrefs = new Set();
             this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {
                 const link = subItem.querySelector('a');
-                const href = link === null || link === void 0 ? void 0 : link.getAttribute('href');
+                const href = link?.getAttribute('href');
                 if (href) {
                     const isActive = this.activePath === href;
                     subItem.active = isActive;
@@ -68,7 +68,7 @@ const NvSidebar$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebar extends H {
             // 2. OR the navitem has no subitems and activePath starts with its href
             this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {
                 const link = navItem.querySelector(':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a');
-                const href = link === null || link === void 0 ? void 0 : link.getAttribute('href');
+                const href = link?.getAttribute('href');
                 const hasSubitems = navItem.querySelector('nv-sidebarnavsubitem') !== null;
                 if (href) {
                     if (hasSubitems) {
@@ -161,7 +161,7 @@ const NvSidebar$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebar extends H {
     //#region RENDER
     render() {
         const isCollapsed = this.type === 'collapsible' && !this.open;
-        return (h(Host, { key: '79f262f95af40b330d5640273f7a6059f672068b', role: "navigation", collapsed: isCollapsed ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, h("div", { key: '348023343f71ba232b82c21f968c0a8bbb170eca', class: "nv-sidebar-container" }, h("slot", { key: 'b634857cb88c12975de9641e154b669de8ce8726' })), this.type === 'collapsible' && (h("button", { key: '0b398d6738536aad4d4e96ad5ca1f04dd543ee1b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: '44b5eb0c9b3239750956c7da09eb9a22e5d0939f', name: this.open
+        return (h(Host, { key: 'ac14d7b4027c06d1aa19b1b6c7de3f0d2e231b1a', role: "navigation", collapsed: isCollapsed ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, h("div", { key: 'e567303c87a2308747290fae95d7ade9971cd67a', class: "nv-sidebar-container" }, h("slot", { key: '0b2e0e1b1721aae3c0f910500bde3c2db92f879b' })), this.type === 'collapsible' && (h("button", { key: '493204449f3bb9aedd5a34cb238242aadd61324b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, h("nv-icon", { key: '0e389c1c6c92f02f7c1e39fc07ef17a469b1e0f2', name: this.open
                 ? 'layout-sidebar-left-collapse'
                 : 'layout-sidebar-right-collapse', size: "sm" })))));
     }

package/dist/components/nv-sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nv-sidebar.js","mappings":"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","names":["NvSidebar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-sidebar/styles/nv-sidebar.scss?tag=nv-sidebar","src/components/nv-sidebar/nv-sidebar.tsx"],"sourcesContent":["@use \"./mixins\" as ;\n@use \"./global-overrides\";\n\nnv-sidebar {\n @include sidebar-container();\n @include sidebar-width(\"expanded\");\n\n &[collapsed] {\n @include sidebar-width(\"collapsed\");\n\n [data-hide-on-collapsed] {\n display: none !important;\n }\n\n // Collapsed mode: different padding\n .nv-sidebar-container {\n padding: var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed);\n }\n }\n\n .nv-sidebar-container {\n @include sidebar-inner-container();\n }\n\n .nv-sidebar-toggle {\n @include sidebar-toggle-button();\n }\n}\n","import {\n Component,\n Host,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n h,\n} from '@stencil/core';\n\n/\n Main sidebar container for navigation. Supports collapsible and persistent modes.\n * @slot default - All sidebar components (logo, header, content, footer).\n /\n@Component({\n tag: 'nv-sidebar',\n styleUrl: 'styles/nv-sidebar.scss',\n shadow: false,\n})\nexport class NvSidebar {\n @Element() el!: HTMLNvSidebarElement;\n private mutationObserver: MutationObserver;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The type of sidebar behavior.\n * - collapsible: Can be toggled open/closed\n * - persistent: Always visible\n /\n @Prop({ reflect: true })\n readonly type: 'collapsible' \| 'persistent' = 'persistent';\n\n /\n Whether the sidebar is currently open (only applies to collapsible type).\n /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop({ reflect: true, mutable: true })\n open: boolean = true;\n\n /\n The current active path. Used to automatically set the active state of nav items.\n * Example: \"/dashboard\" or \"/settings/profile\"\n /\n @Prop({ reflect: true })\n readonly activePath?: string;\n\n /\n Determines the type of notification bullets in the sidebar.\n * - neutral: Uses neutral colors (gray)\n * - brand: Uses brand colors (orange/teal depending on theme)\n /\n @Prop({ reflect: true })\n readonly notificationIntention: 'neutral' \| 'brand' = 'brand';\n\n /\n Determines the emphasis of notification bullets in the sidebar.\n * - high: More prominent appearance\n * - low: Less prominent appearance\n /\n @Prop({ reflect: true })\n readonly notificationEmphasis: 'high' \| 'low' = 'high';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the open state changes.\n * @bind open\n /\n @Event({ bubbles: false })\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n private handleToggle = () => {\n if (this.type === 'collapsible') {\n // Changing open will trigger @Watch which emits the event\n this.open = !this.open;\n }\n };\n\n private handleCollapsedSideEffects(isCollapsed: boolean) {\n if (!isCollapsed) {\n return;\n }\n\n this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {\n (navItem as HTMLNvSidebarnavitemElement).open = false;\n });\n }\n\n /\n * Sets the active state of navigation items based on activePath\n /\n private setActiveNavItems = () => {\n if (!this.activePath) return;\n\n // First, check all subitems to find if any matches exactly\n const activeSubitemHrefs = new Set<string>();\n this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {\n const link = subItem.querySelector('a');\n const href = link?.getAttribute('href');\n\n if (href) {\n const isActive = this.activePath === href;\n subItem.active = isActive;\n if (isActive) {\n activeSubitemHrefs.add(href);\n }\n }\n });\n\n // Then, set nav items active only if:\n // 1. Exact match with activePath AND no subitem matches\n // 2. OR the navitem has no subitems and activePath starts with its href\n this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {\n const link = navItem.querySelector(\n ':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a',\n );\n const href = link?.getAttribute('href');\n const hasSubitems =\n navItem.querySelector('nv-sidebarnavsubitem') !== null;\n\n if (href) {\n if (hasSubitems) {\n // Parent with subitems: only active if exact match (not when subitem is active)\n navItem.active = this.activePath === href;\n } else {\n // Item without subitems: active on exact match\n navItem.active = this.activePath === href;\n }\n }\n });\n };\n\n private pendingActiveUpdate: number \| null = null;\n\n /\n Sets up the MutationObserver to watch for changes in child elements.\n * Only triggers on new nav items being added, not on attribute changes.\n /\n private setupMutationObserver = (): void => {\n this.mutationObserver = new MutationObserver(mutations => {\n // Only react to new nav items being added, ignore other mutations\n const hasNewNavItems = mutations.some(mutation => {\n if (mutation.type !== 'childList') return false;\n return Array.from(mutation.addedNodes).some(node => {\n if (node.nodeType !== Node.ELEMENT_NODE) return false;\n const el = node as Element;\n return (\n el.tagName.toLowerCase() === 'nv-sidebarnavitem' \|\|\n el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' \|\|\n el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem')\n );\n });\n });\n\n if (hasNewNavItems) {\n // Debounce to prevent multiple rapid calls\n if (this.pendingActiveUpdate) {\n clearTimeout(this.pendingActiveUpdate);\n }\n this.pendingActiveUpdate = window.setTimeout(() => {\n this.setActiveNavItems();\n this.pendingActiveUpdate = null;\n }, 50);\n }\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('activePath')\n onActivePathChanged() {\n this.setActiveNavItems();\n }\n\n @Watch('open')\n protected onOpenChanged(newValue: boolean, oldValue: boolean) {\n this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);\n // Only emit event when open state actually changes (not on re-render with same value)\n if (this.type === 'collapsible' && newValue !== oldValue) {\n this.openChanged.emit(newValue);\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.setActiveNavItems();\n this.setupMutationObserver();\n this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n if (this.pendingActiveUpdate) {\n clearTimeout(this.pendingActiveUpdate);\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n const isCollapsed = this.type === 'collapsible' && !this.open;\n\n return (\n <Host\n role=\"navigation\"\n collapsed={isCollapsed ? true : undefined}\n notification-intention={this.notificationIntention}\n notification-emphasis={this.notificationEmphasis}\n aria-expanded={\n this.type === 'collapsible' ? String(this.open) : undefined\n }\n >\n <div class=\"nv-sidebar-container\">\n <slot></slot>\n </div>\n {this.type === 'collapsible' && (\n <button\n class=\"nv-sidebar-toggle\"\n onClick={this.handleToggle}\n aria-label={this.open ? 'Collapse sidebar' : 'Expand sidebar'}\n >\n <nv-icon\n name={\n this.open\n ? 'layout-sidebar-left-collapse'\n : 'layout-sidebar-right-collapse'\n }\n size=\"sm\"\n ></nv-icon>\n </button>\n )}\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"version":3}
1	+ {"file":"nv-sidebar.js","mappings":"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","names":["NvSidebar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/nv-sidebar/styles/nv-sidebar.scss?tag=nv-sidebar","src/components/nv-sidebar/nv-sidebar.tsx"],"sourcesContent":["@use \"./mixins\" as ;\n@use \"./global-overrides\";\n\nnv-sidebar {\n @include sidebar-container();\n @include sidebar-width(\"expanded\");\n\n &[collapsed] {\n @include sidebar-width(\"collapsed\");\n\n [data-hide-on-collapsed] {\n display: none !important;\n }\n\n // Collapsed mode: different padding\n .nv-sidebar-container {\n padding: var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed);\n }\n }\n\n .nv-sidebar-container {\n @include sidebar-inner-container();\n }\n\n .nv-sidebar-toggle {\n @include sidebar-toggle-button();\n }\n}\n","import {\n Component,\n Host,\n Prop,\n Event,\n EventEmitter,\n Element,\n Watch,\n h,\n} from '@stencil/core';\n\n/\n Main sidebar container for navigation. Supports collapsible and persistent modes.\n * @slot default - All sidebar components (logo, header, content, footer).\n /\n@Component({\n tag: 'nv-sidebar',\n styleUrl: 'styles/nv-sidebar.scss',\n shadow: false,\n})\nexport class NvSidebar {\n @Element() el!: HTMLNvSidebarElement;\n private mutationObserver: MutationObserver;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The type of sidebar behavior.\n * - collapsible: Can be toggled open/closed\n * - persistent: Always visible\n /\n @Prop({ reflect: true })\n readonly type: 'collapsible' \| 'persistent' = 'persistent';\n\n /\n Whether the sidebar is currently open (only applies to collapsible type).\n /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop({ reflect: true, mutable: true })\n open: boolean = true;\n\n /\n The current active path. Used to automatically set the active state of nav items.\n * Example: \"/dashboard\" or \"/settings/profile\"\n /\n @Prop({ reflect: true })\n readonly activePath?: string;\n\n /\n Determines the type of notification bullets in the sidebar.\n * - neutral: Uses neutral colors (gray)\n * - brand: Uses brand colors (orange/teal depending on theme)\n /\n @Prop({ reflect: true })\n readonly notificationIntention: 'neutral' \| 'brand' = 'brand';\n\n /\n Determines the emphasis of notification bullets in the sidebar.\n * - high: More prominent appearance\n * - low: Less prominent appearance\n /\n @Prop({ reflect: true })\n readonly notificationEmphasis: 'high' \| 'low' = 'high';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the open state changes.\n * @bind open\n /\n @Event({ bubbles: false })\n openChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n private handleToggle = () => {\n if (this.type === 'collapsible') {\n // Changing open will trigger @Watch which emits the event\n this.open = !this.open;\n }\n };\n\n private handleCollapsedSideEffects(isCollapsed: boolean) {\n if (!isCollapsed) {\n return;\n }\n\n this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {\n (navItem as HTMLNvSidebarnavitemElement).open = false;\n });\n }\n\n /\n * Sets the active state of navigation items based on activePath\n /\n private setActiveNavItems = () => {\n if (!this.activePath) return;\n\n // First, check all subitems to find if any matches exactly\n const activeSubitemHrefs = new Set<string>();\n this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {\n const link = subItem.querySelector('a');\n const href = link?.getAttribute('href');\n\n if (href) {\n const isActive = this.activePath === href;\n subItem.active = isActive;\n if (isActive) {\n activeSubitemHrefs.add(href);\n }\n }\n });\n\n // Then, set nav items active only if:\n // 1. Exact match with activePath AND no subitem matches\n // 2. OR the navitem has no subitems and activePath starts with its href\n this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {\n const link = navItem.querySelector(\n ':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a',\n );\n const href = link?.getAttribute('href');\n const hasSubitems =\n navItem.querySelector('nv-sidebarnavsubitem') !== null;\n\n if (href) {\n if (hasSubitems) {\n // Parent with subitems: only active if exact match (not when subitem is active)\n navItem.active = this.activePath === href;\n } else {\n // Item without subitems: active on exact match\n navItem.active = this.activePath === href;\n }\n }\n });\n };\n\n private pendingActiveUpdate: number \| null = null;\n\n /\n Sets up the MutationObserver to watch for changes in child elements.\n * Only triggers on new nav items being added, not on attribute changes.\n /\n private setupMutationObserver = (): void => {\n this.mutationObserver = new MutationObserver(mutations => {\n // Only react to new nav items being added, ignore other mutations\n const hasNewNavItems = mutations.some(mutation => {\n if (mutation.type !== 'childList') return false;\n return Array.from(mutation.addedNodes).some(node => {\n if (node.nodeType !== Node.ELEMENT_NODE) return false;\n const el = node as Element;\n return (\n el.tagName.toLowerCase() === 'nv-sidebarnavitem' \|\|\n el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' \|\|\n el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem')\n );\n });\n });\n\n if (hasNewNavItems) {\n // Debounce to prevent multiple rapid calls\n if (this.pendingActiveUpdate) {\n clearTimeout(this.pendingActiveUpdate);\n }\n this.pendingActiveUpdate = window.setTimeout(() => {\n this.setActiveNavItems();\n this.pendingActiveUpdate = null;\n }, 50);\n }\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('activePath')\n onActivePathChanged() {\n this.setActiveNavItems();\n }\n\n @Watch('open')\n protected onOpenChanged(newValue: boolean, oldValue: boolean) {\n this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);\n // Only emit event when open state actually changes (not on re-render with same value)\n if (this.type === 'collapsible' && newValue !== oldValue) {\n this.openChanged.emit(newValue);\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.setActiveNavItems();\n this.setupMutationObserver();\n this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n if (this.pendingActiveUpdate) {\n clearTimeout(this.pendingActiveUpdate);\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n const isCollapsed = this.type === 'collapsible' && !this.open;\n\n return (\n <Host\n role=\"navigation\"\n collapsed={isCollapsed ? true : undefined}\n notification-intention={this.notificationIntention}\n notification-emphasis={this.notificationEmphasis}\n aria-expanded={\n this.type === 'collapsible' ? String(this.open) : undefined\n }\n >\n <div class=\"nv-sidebar-container\">\n <slot></slot>\n </div>\n {this.type === 'collapsible' && (\n <button\n class=\"nv-sidebar-toggle\"\n onClick={this.handleToggle}\n aria-label={this.open ? 'Collapse sidebar' : 'Expand sidebar'}\n >\n <nv-icon\n name={\n this.open\n ? 'layout-sidebar-left-collapse'\n : 'layout-sidebar-right-collapse'\n }\n size=\"sm\"\n ></nv-icon>\n </button>\n )}\n </Host>\n );\n }\n //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-sidebarcontent.js CHANGED Viewed

@@ -12,7 +12,7 @@ const NvSidebarcontent$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarconte
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd960a2c2abe06db605980bf35d2c7cc74f4e0dba', role: "list" }, h("slot", { key: '7c0b0ad872d1afc279bfd9c9d381097207f055e2' })));
+        return (h(Host, { key: 'c72a3de4460c4de37c2008ec4d777771d8771d32', role: "list" }, h("slot", { key: '8d08c073aebf079dbb9062bb183370e4dc4d9fe8' })));
     }
     static get style() { return nvSidebarcontentCss; }
 }, [260, "nv-sidebarcontent"]);

package/dist/components/nv-sidebardivider.js CHANGED Viewed

@@ -12,7 +12,7 @@ const NvSidebardivider$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebardivid
     /****************************************************************************/
     //#region RENDER
     render() {
-        return h(Host, { key: 'a4328b357b750232920c8b5e24e91503bba7e235', role: "separator", "aria-orientation": "horizontal" });
+        return h(Host, { key: '157045ee7209aa55574c54c2392f1e53d6cdba1e', role: "separator", "aria-orientation": "horizontal" });
     }
     static get style() { return nvSidebardividerCss; }
 }, [256, "nv-sidebardivider"]);

package/dist/components/nv-sidebarfooter.js CHANGED Viewed

@@ -12,7 +12,7 @@ const NvSidebarfooter$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarfooter
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '73ce5246f93d982caf0d65f2cde8156dfbe565da' }, h("slot", { key: '92a297a59988ce6e70875eedd50227cdf011d4bf' })));
+        return (h(Host, { key: 'be19b80fc56a296999532d986d477dcbd817a9f2' }, h("slot", { key: '55b3e91dab40b923d67eb140be42fd2483951254' })));
     }
     static get style() { return nvSidebarfooterCss; }
 }, [260, "nv-sidebarfooter"]);

package/dist/components/nv-sidebargroup.js CHANGED Viewed

@@ -13,7 +13,7 @@ const NvSidebargroup$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebargroup e
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c7b4e34d8237dc93adaa33f12d7cfda36a8ac269', role: "group", "aria-label": this.label }, this.label && h("div", { key: '7cafdf840b12c89604efda7895b764331c8054b7', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: 'b6567a223f7cc05ce2874a632d38d6665c255659' })));
+        return (h(Host, { key: '64b17f621fef826a4105dfa39fbc57013bad0abc', role: "group", "aria-label": this.label }, this.label && h("div", { key: '48e36725296ecc87da7d15606977fbe616dd4aa3', class: "nv-sidebargroup-label" }, this.label), h("slot", { key: '61aaf8541e9372220df24dcf9cf0b5b43e22e19b' })));
     }
     static get style() { return nvSidebargroupCss; }
 }, [260, "nv-sidebargroup", {

package/dist/components/nv-sidebarheader.js CHANGED Viewed

@@ -12,7 +12,7 @@ const NvSidebarheader$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarheader
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '42d91f8325df19e8208ab045a057657c97bf3ff4' }, h("slot", { key: '42b4e5952fd55b95fe2934297929cef3bd1b226c' })));
+        return (h(Host, { key: '2c9c0c109138ed3a23cb8f1a2fb78f29f93a4056' }, h("slot", { key: 'a928008023c6ce8a77aafbe0042ec8ed72e9c32d' })));
     }
     static get style() { return nvSidebarheaderCss; }
 }, [260, "nv-sidebarheader"]);

package/dist/components/nv-sidebarlogo.js CHANGED Viewed

@@ -22,7 +22,7 @@ const NvSidebarlogo$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarlogo ext
     render() {
         const logoSrc = this.logo || this.defaultLogo;
         const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
-        return (h(Host, { key: 'ec2aba08293e4def2fe083c311b69cafe005cf5e' }, h("div", { key: '3a24d832a0bb5aa44264fe1fc3091878556649bd', class: "nv-sidebarlogo-container" }, h("img", { key: 'a9a08e7c5dd51902d9ffbda0d9216a4ffb186756', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: 'daef311e11c8d5ee6b823a4896be36ea5bd696cc', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), this.label && h("span", { key: '9685e4c110e7bb7356f5d49b615105033a32a736', class: "nv-sidebarlogo-title" }, this.label))));
+        return (h(Host, { key: '0d14763dcb7b1b961f2b32a7be44d8a8116087bb' }, h("div", { key: '78c2a6578cc48298aa88baf946954d79d36894db', class: "nv-sidebarlogo-container" }, h("img", { key: 'd4dd86b4d4a00bedfab84fd987d46e5e83fcb5a6', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), h("img", { key: 'c0382d6fb18fbc17a21bb411fde64dcd255f42a5', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), this.label && h("span", { key: 'f75152415bb2569698a5cae856c6b26a202f8c7d', class: "nv-sidebarlogo-title" }, this.label))));
     }
     static get style() { return nvSidebarlogoCss; }
 }, [256, "nv-sidebarlogo", {

package/dist/components/nv-sidebarnavitem.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-C63Xpg9a.js';
-import { d as defineCustomElement$3 } from './p-CBOuqJTb.js';
-import { d as defineCustomElement$2 } from './p-CBF8V1L7.js';
+import { d as defineCustomElement$3 } from './p-nfYynlVq.js';
+import { d as defineCustomElement$2 } from './p-tyaJ-nGV.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-item-gap-x);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x);border-radius:var(--sidebar-item-radius);cursor:pointer;transition:all 0.15s ease;font-size:var(--sidebar-item-font-size);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-low-text);background:var(--components-sidebar-background);text-decoration:none;--nv-component-background:var(--components-sidebar-background);--nv-sidebarnavitem-background:var(--components-sidebar-background)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:hover{background-color:var(--color-interaction-container-neutral-background-hover);color:var(--color-content-medium-text);--nv-component-background:var(--color-interaction-container-neutral-background-hover);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus,nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-within{outline:none}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-visible,nv-sidebarnavitem .nv-sidebarnavitem-trigger:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavitem[active] .nv-sidebarnavitem-trigger{background-color:var(--color-interaction-container-neutral-background-active);color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-medium-emphasis);--nv-component-background:var(--color-interaction-container-neutral-background-active);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavitem .nv-sidebarnavitem-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;width:var(--sidebar-item-icon-size);height:var(--sidebar-item-icon-size);position:relative}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon{overflow:visible;margin:0;justify-content:center}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon nv-notification-bullet{position:absolute;transform:translate(50%, -50%);z-index:1;--sidebar-notification-bullet-size-reduced:calc(\n    var(--sidebar-item-icon-size) * 0.4\n  )}nv-sidebarnavitem .nv-sidebarnavitem-content{flex:1;display:flex;align-items:center}nv-sidebarnavitem .nv-sidebarnavitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavitem .nv-sidebarnavitem-trailing{display:flex;align-items:center;gap:var(--spacing-2);margin-left:auto}nv-sidebarnavitem .nv-sidebarnavitem-chevron{transition:transform 0.2s ease;color:inherit}nv-sidebarnavitem[open] .nv-sidebarnavitem-chevron{transform:rotate(180deg)}nv-sidebarnavitem .nv-sidebarnavitem-subitems{display:flex;flex-direction:column;gap:0;max-height:0;overflow:hidden;opacity:0;transition:max-height 0.3s ease, opacity 0.2s ease;padding-left:0}nv-sidebarnavitem[open] .nv-sidebarnavitem-subitems{opacity:1;margin-top:var(--spacing-1)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trigger{justify-content:center;gap:0;padding:var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-content{display:none}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trailing,nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-chevron{display:none}";
@@ -42,7 +42,7 @@ const NvSidebarnavitem$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarnavit
             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) {
+                if (link?.href) {
                     // Check if click was directly on the link - if so, let it handle naturally
                     if (target.closest('a')) {
                         return;
@@ -119,10 +119,9 @@ const NvSidebarnavitem$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarnavit
             }
         };
         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;
+            this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;
             // When sidebar collapse state changes, update active state based on subitems
             if (wasCollapsed !== this.isSidebarCollapsed) {
                 this.updateActiveFromSubitems();
@@ -270,7 +269,7 @@ const NvSidebarnavitem$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarnavit
     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 => {
+        return (h(Host, { key: '7a3523c68080b90ef262a2fa3fa63f1f34baaaf1', role: "listitem" }, h("div", { key: '21abd8cf4e5d4a368b25db79306cb0ac747edfce', 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: '8255f2f75b751e5005b4bbb7178e553123c7c109', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: '5396567c08fc46084f085b544aeee3f874b7b439', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '63dfbd2a986124a9c1ba1741e4d1079ec2b38a18', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: 'a4d8df28b532018d6961d6d779d77ba88bbea756', class: "nv-sidebarnavitem-content" }, h("slot", { key: '7394c3534de567f9230ff872b57b4211939bc142' })), h("div", { key: 'c8f8451e9ebc42e6ee16407a5ba9c6f6c32f4a66', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: '2e901538498c62fe5a5bc21c76c66b493c215e32', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '9a7c172f0b7dbf78068135344e469d261b80d368', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: 'f1caa3750edb35376d8b45121ffb443b033735d4', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: '4b141fd9639afd78351b01df146866d4d091381f', 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;
@@ -285,7 +284,7 @@ const NvSidebarnavitem$1 = /*@__PURE__*/ proxyCustomElement(class NvSidebarnavit
                         });
                     }
                 }
-            } }, h("slot", { key: 'f0ffb970aa2d84580205ba110858d3f1c27875a3', name: "subitems" })))));
+            } }, h("slot", { key: '6a38e07d0559b6eaf2fafb4c9928047a9cfd19b4', name: "subitems" })))));
     }
     get el() { return this; }
     static get watchers() { return {