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/cjs/nv-row.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
+        return (index.h(index.Host, { key: 'fda91377821b426a6cbc6ade6f253144a388fb62' }, index.h("slot", { key: '5d7cc9aa4d4ad0b251aa5c028adfddade4e4d1c4' })));
     }
 };
 NvRow.style = nvRowCss;

package/dist/cjs/nv-sidebar.cjs.entry.js CHANGED Viewed

@@ -52,7 +52,7 @@ const NvSidebar = class {
             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;
@@ -66,7 +66,7 @@ const NvSidebar = class {
             // 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) {
@@ -159,7 +159,7 @@ const NvSidebar = class {
     //#region RENDER
     render() {
         const isCollapsed = this.type === 'collapsible' && !this.open;
-        return (index.h(index.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 }, index.h("div", { key: '348023343f71ba232b82c21f968c0a8bbb170eca', class: "nv-sidebar-container" }, index.h("slot", { key: 'b634857cb88c12975de9641e154b669de8ce8726' })), this.type === 'collapsible' && (index.h("button", { key: '0b398d6738536aad4d4e96ad5ca1f04dd543ee1b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '44b5eb0c9b3239750956c7da09eb9a22e5d0939f', name: this.open
+        return (index.h(index.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 }, index.h("div", { key: 'e567303c87a2308747290fae95d7ade9971cd67a', class: "nv-sidebar-container" }, index.h("slot", { key: '0b2e0e1b1721aae3c0f910500bde3c2db92f879b' })), this.type === 'collapsible' && (index.h("button", { key: '493204449f3bb9aedd5a34cb238242aadd61324b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '0e389c1c6c92f02f7c1e39fc07ef17a469b1e0f2', name: this.open
                 ? 'layout-sidebar-left-collapse'
                 : 'layout-sidebar-right-collapse', size: "sm" })))));
     }

package/dist/cjs/nv-sidebar.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-sidebar.entry.cjs.js","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"],"names":["h","Host"],"mappings":"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"}
1	+ {"version":3,"file":"nv-sidebar.entry.cjs.js","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"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/nv-sidebarcontent.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const NvSidebarcontent = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd960a2c2abe06db605980bf35d2c7cc74f4e0dba', role: "list" }, index.h("slot", { key: '7c0b0ad872d1afc279bfd9c9d381097207f055e2' })));
+        return (index.h(index.Host, { key: 'c72a3de4460c4de37c2008ec4d777771d8771d32', role: "list" }, index.h("slot", { key: '8d08c073aebf079dbb9062bb183370e4dc4d9fe8' })));
     }
 };
 NvSidebarcontent.style = nvSidebarcontentCss;

package/dist/cjs/nv-sidebardivider.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const NvSidebardivider = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return index.h(index.Host, { key: 'a4328b357b750232920c8b5e24e91503bba7e235', role: "separator", "aria-orientation": "horizontal" });
+        return index.h(index.Host, { key: '157045ee7209aa55574c54c2392f1e53d6cdba1e', role: "separator", "aria-orientation": "horizontal" });
     }
 };
 NvSidebardivider.style = nvSidebardividerCss;

package/dist/cjs/nv-sidebarfooter.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const NvSidebarfooter = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '73ce5246f93d982caf0d65f2cde8156dfbe565da' }, index.h("slot", { key: '92a297a59988ce6e70875eedd50227cdf011d4bf' })));
+        return (index.h(index.Host, { key: 'be19b80fc56a296999532d986d477dcbd817a9f2' }, index.h("slot", { key: '55b3e91dab40b923d67eb140be42fd2483951254' })));
     }
 };
 NvSidebarfooter.style = nvSidebarfooterCss;

package/dist/cjs/nv-sidebargroup.cjs.entry.js CHANGED Viewed

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

package/dist/cjs/nv-sidebarheader.cjs.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const NvSidebarheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '42d91f8325df19e8208ab045a057657c97bf3ff4' }, index.h("slot", { key: '42b4e5952fd55b95fe2934297929cef3bd1b226c' })));
+        return (index.h(index.Host, { key: '2c9c0c109138ed3a23cb8f1a2fb78f29f93a4056' }, index.h("slot", { key: 'a928008023c6ce8a77aafbe0042ec8ed72e9c32d' })));
     }
 };
 NvSidebarheader.style = nvSidebarheaderCss;

package/dist/cjs/nv-sidebarlogo.cjs.entry.js CHANGED Viewed

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

package/dist/cjs/nv-sidebarnavitem.cjs.entry.js CHANGED Viewed

@@ -39,7 +39,7 @@ const NvSidebarnavitem = class {
             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;
@@ -116,10 +116,9 @@ const NvSidebarnavitem = class {
             }
         };
         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();
@@ -267,7 +266,7 @@ const NvSidebarnavitem = class {
     render() {
         const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
         const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
-        return (index.h(index.Host, { key: 'c0c9c63cb295441389b5ced9a4b0a0d5a1af99cd', role: "listitem" }, index.h("div", { key: '6673c3f4c14762bff8512ecc430febddfa74b307', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (index.h("div", { key: '25f703e9fb7375b8b562be54f080120ae037dd9f', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '1a4e345c90afcec159890db6c6b0e22d53dd673d', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '15b69d1a2325daed7d6583ed10906fe4e91809e5', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'c717c09f39eab07616de419a35b11a5b7dfce5d1', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: '9f8687f151fd082a6737e7fbe6036cc3ebff3cc2' })), index.h("div", { key: 'b2c3d7a4c30ce96273731a05a1d361f5654582de', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: 'acf2dddbbbc7d2e83703c731a244237e0dc81153', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: 'adca5c7418a3b58afa5ef21ddd3fa9b2d880a56c', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: 'a4a4369d4ba76f567cca439d1b4c7e95ad5ba98c', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: '2d4fadb0b547eb369a702bb8210b3312dde505b2', class: "nv-sidebarnavitem-subitems", ref: el => {
+        return (index.h(index.Host, { key: '7a3523c68080b90ef262a2fa3fa63f1f34baaaf1', role: "listitem" }, index.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 && (index.h("div", { key: '8255f2f75b751e5005b4bbb7178e553123c7c109', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '5396567c08fc46084f085b544aeee3f874b7b439', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '63dfbd2a986124a9c1ba1741e4d1079ec2b38a18', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'a4d8df28b532018d6961d6d779d77ba88bbea756', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: '7394c3534de567f9230ff872b57b4211939bc142' })), index.h("div", { key: 'c8f8451e9ebc42e6ee16407a5ba9c6f6c32f4a66', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: '2e901538498c62fe5a5bc21c76c66b493c215e32', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '9a7c172f0b7dbf78068135344e469d261b80d368', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: 'f1caa3750edb35376d8b45121ffb443b033735d4', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.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;
@@ -282,7 +281,7 @@ const NvSidebarnavitem = class {
                         });
                     }
                 }
-            } }, index.h("slot", { key: 'f0ffb970aa2d84580205ba110858d3f1c27875a3', name: "subitems" })))));
+            } }, index.h("slot", { key: '6a38e07d0559b6eaf2fafb4c9928047a9cfd19b4', name: "subitems" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-sidebarnavitem.entry.cjs.js.map CHANGED Viewed

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

package/dist/cjs/nv-sidebarnavsubitem.cjs.entry.js CHANGED Viewed

@@ -24,7 +24,7 @@ const NvSidebarnavsubitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8ae8c5e2038145bd458a35d237495a06fde97294', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: '559a99d72973f7af43091c5c920e77d8cad3944c', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '204c7ad681d51310f43b618ef14a12d0ccc93ddc', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'f4717aee216fbeac4dbfe0d98b34fe7e83476701' })), index.h("div", { key: 'b5db84c75ae4e51d8a048000a49697eaf4b20f1d', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: 'b6d0afcd6b4ace60b32f531f414b70aba513a274', name: "trailing" }))));
+        return (index.h(index.Host, { key: '7e9b3aaf42bc7ca19cc3ceeed4afc74058ea48f2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'd865d9cff0e9632dd0ca5f97334e09ae3ad6ddf8', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '28bddb32eea17dbc3b33f2e1c3ef6744e6646cbe', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: '0f58fbe30b054e42ac3f431cb8cafe0374994856' })), index.h("div", { key: '3b1b74c67b1e338e158a67dab828941f40f3a147', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '98ad3fde4a5295f6835ba6b15ac832fc0426b75b', name: "trailing" }))));
     }
 };
 NvSidebarnavsubitem.style = nvSidebarnavsubitemCss;

package/dist/cjs/nv-split.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-B1na8x6M.js');
-const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:\"\";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
+const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:\"\";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{box-sizing:border-box;flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column;margin:0 !important}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
 const NvSplit = class {
     constructor(hostRef) {
@@ -35,7 +35,7 @@ const NvSplit = class {
         this.startPos = 0;
         this.startSizes = [];
         // Handlers stored to be able to detach them
-        this.onDocMove = (ev) => this.handleMouseMove(ev);
+        this.onDocMove = (e) => this.handleMouseMove(e);
         this.onDocUp = () => this.stopDragging();
     }
     //#endregion
@@ -56,18 +56,20 @@ const NvSplit = class {
     componentDidLoad() {
         // Initialization (once)
         this.ensureGutters();
-        this.applySizes();
-        this.positionGutters();
-        // Observer: reposition gutters when resized (nested or parent split changes)
+        // Defer applySizes to ensure CSS (margins, padding) is computed
+        requestAnimationFrame(() => {
+            this.applySizes();
+            this.positionGutters();
+        });
+        // Observer: reposition gutters when resized
         this.ro = new ResizeObserver(() => this.positionGutters());
         this.ro.observe(this.el);
         window.addEventListener('resize', () => this.positionGutters());
     }
     disconnectedCallback() {
-        var _a;
         // Security cleanup (in case a drag was in progress)
         this.detachDocumentListeners();
-        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro?.disconnect();
         this.ro = undefined;
     }
     //#endregion
@@ -115,13 +117,12 @@ const NvSplit = class {
      * @returns {Promise<void>}
      */
     async destroy() {
-        var _a;
         this.sizes = [];
         this.isDragging = false;
         this.dragIndex = -1;
         this.removeOwnGutters();
         this.detachDocumentListeners();
-        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro?.disconnect();
     }
     //#endregion
     /****************************************************************************/
@@ -196,15 +197,14 @@ const NvSplit = class {
             this.sizes = Array(n).fill(100 / n);
         }
         panes.forEach((pane, i) => {
-            var _a;
-            const size = Math.max(0, (_a = this.sizes[i]) !== null && _a !== void 0 ? _a : 100 / n);
-            // Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
+            const size = Math.max(0, this.sizes[i] ?? 100 / n);
             pane.style.flex = `0 0 ${size}%`;
             pane.style.minWidth = '0';
             pane.style.minHeight = '0';
-            pane.style.overflow = 'hidden'; // let a nv-split child extend
+            pane.style.overflow = 'hidden';
             pane.style.display = 'flex';
             pane.style.flexDirection = 'column';
+            pane.style.boxSizing = 'border-box';
         });
         this.positionGutters();
     }
@@ -226,7 +226,6 @@ const NvSplit = class {
      * Positions the gutters based on the current sizes of the panes.
      */
     positionGutters() {
-        var _a, _b;
         const panes = this.getPanes();
         const gutters = this.getOwnGutters();
         if (panes.length <= 1 || gutters.length === 0)
@@ -234,7 +233,7 @@ const NvSplit = class {
         const horizontal = this.direction === 'horizontal';
         let cumPct = 0;
         for (let i = 0; i < gutters.length; i++) {
-            const sizePct = (_b = (_a = this.sizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 100 / panes.length;
+            const sizePct = this.sizes?.[i] ?? 100 / panes.length;
             cumPct += sizePct;
             const g = gutters[i];
             g.style.position = 'absolute';
@@ -243,68 +242,70 @@ const NvSplit = class {
                 g.style.top = '0';
                 g.style.bottom = '0';
                 g.style.height = '100%';
+                g.style.transform = 'translateX(-50%)';
             }
             else {
                 g.style.top = `${cumPct}%`;
                 g.style.left = '0';
                 g.style.right = '0';
                 g.style.width = '100%';
+                g.style.transform = 'translateY(-50%)';
             }
         }
     }
     /**
      * Starts the dragging process.
-     * @param {MouseEvent} ev - The mouse event.
+     * @param {MouseEvent} e - The mouse event.
      * @param {number} index - The index of the gutter.
      */
-    startDragging(ev, index) {
+    startDragging(e, index) {
+        e.preventDefault();
         this.isDragging = true;
         this.dragIndex = index;
-        this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;
+        this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;
         this.startSizes = [...this.sizes];
         this.attachDocumentListeners();
+        this.sizesChanged.emit([...this.sizes]);
     }
     /**
      * Handles the mouse movement during dragging.
-     * @param {MouseEvent} ev - The mouse event.
+     * @param {MouseEvent} e - The mouse event.
      */
-    handleMouseMove(ev) {
-        var _a, _b, _c, _d;
+    handleMouseMove(e) {
         if (!this.isDragging || this.dragIndex < 0)
             return;
         const panes = this.getPanes();
         if (panes.length < 2)
             return;
         const rect = this.el.getBoundingClientRect();
-        // Ensure we never divide by zero if the element has zero width/height
-        const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;
-        const totalPx = Math.max(rawSize, 1);
-        const deltaPx = (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -
-            this.startPos;
+        const horizontal = this.direction === 'horizontal';
+        const totalPx = Math.max(horizontal ? rect.width : rect.height, 1);
+        const deltaPx = (horizontal ? e.clientX : e.clientY) - this.startPos;
         const deltaPct = (deltaPx / totalPx) * 100;
         const i = this.dragIndex;
         const j = i + 1;
-        let left = this.startSizes[i] + deltaPct;
-        let right = this.startSizes[j] - deltaPct;
+        const startLeft = this.startSizes[i];
+        const startRight = this.startSizes[j];
         // minSizes (px) -> %
-        const minLeftPct = (((_b = (_a = this.minSizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 0) / totalPx) * 100;
-        const minRightPct = (((_d = (_c = this.minSizes) === null || _c === void 0 ? void 0 : _c[j]) !== null && _d !== void 0 ? _d : 0) / totalPx) * 100;
-        left = Math.max(left, minLeftPct);
-        right = Math.max(right, minRightPct);
-        // Keep the sum of the pair i/j constant
-        const pairSum = left + right;
-        const targetSum = this.startSizes[i] + this.startSizes[j];
-        if (Math.abs(pairSum - targetSum) > 0.0001) {
-            const k = targetSum / (pairSum || 1);
-            left *= k;
-            right *= k;
+        let minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;
+        let minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;
+        const minSum = minLeftPct + minRightPct;
+        const availableSum = startLeft + startRight;
+        if (minSum > availableSum) {
+            const scale = availableSum / minSum;
+            minLeftPct *= scale;
+            minRightPct *= scale;
         }
+        const minDelta = minLeftPct - startLeft;
+        const maxDelta = startRight - minRightPct;
+        const clampedDelta = Math.min(Math.max(deltaPct, minDelta), maxDelta);
+        const left = startLeft + clampedDelta;
+        const right = startRight - clampedDelta;
         const next = [...this.startSizes];
         next[i] = left;
         next[j] = right;
         this.sizes = next;
         this.applySizes();
-        this.sizesChanged.emit([...this.sizes]);
         this.positionGutters();
     }
     /**
@@ -316,12 +317,13 @@ const NvSplit = class {
         this.isDragging = false;
         this.dragIndex = -1;
         this.detachDocumentListeners();
+        this.sizesChanged.emit([...this.sizes]);
     }
     //#endregion
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '2266f982349909b08637721e0bf5d8792fa2f3aa', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '0b0845ae2f93bb137692fd570beaa2e26816c1c9', name: "pane" }), index.h("slot", { key: 'ac322712eb7024dde9efc41dac946196fd15a786', name: "gutter" })));
+        return (index.h(index.Host, { key: '850cf8fb9d492e1da39da0037c1fd8d414960d28', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '4d2f540ca147abe4778bcc0d02be2e87ee2cf3b4', name: "pane" }), index.h("slot", { key: '1ceb2dc6375c50fe7786ba03fb2a753f852980ba', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {