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/collection/components/nv-split/nv-split.docs.js CHANGED Viewed

@@ -5,36 +5,72 @@ const NvSplitDocs = {
     subcomponents: ['nv-alert'],
     badge: 'beta',
     stories: [
+        // Default
         {
             name: 'Default',
             args: {
                 direction: 'horizontal',
                 sizes: [50, 50],
             },
-            template: (h("nv-split", { class: "h-96 w-full", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-turquoise-50 p-6" }, "Left pane"), h("div", { slot: "pane", class: "bg-orange-50 p-6" }, "Right pane"))),
+            template: (h("nv-split", { class: "h-96 w-full", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-turquoise-50" }, "Left pane"), h("div", { slot: "pane", class: "bg-orange-50" }, "Right pane"))),
+        },
+        // direction
+        {
+            name: nameof(x => x.minSizes),
+            description: 'Minimum pane sizes in px to clamp gutter movement.',
+            args: {
+                direction: 'horizontal',
+                sizes: [50, 50],
+                minSizes: [20, 20],
+            },
+            template: (h("nv-split", { class: "h-96 w-full", "data-storybook-args": true }, h("div", { slot: "pane" }, h("div", { class: "bg-turquoise-50 p-6 h-full" }, "Left pane")), h("div", { slot: "pane" }, h("div", { class: "bg-orange-50 p-6 h-full" }, "Right pane")))),
         },
         {
             name: nameof(x => x.direction),
             args: { direction: 'vertical', sizes: [70, 30] },
             template: (h("nv-split", { class: "h-screen w-full", "data-storybook-args": true }, h("div", { slot: "pane" }, "Top pane"), h("div", { slot: "pane" }, "Bottom pane"))),
         },
+        // gutterSize
         {
             name: nameof(x => x.gutterSize),
             args: { gutterSize: 8, sizes: [50, 50] },
             template: (h("nv-split", { class: "h-screen w-full", "data-storybook-args": true }, h("div", { slot: "pane" }, "Pane A"), h("div", { slot: "pane" }, "Pane B"))),
         },
+        // sizes
+        {
+            name: nameof(x => x.sizes),
+            description: 'Initial sizes of the panes in percentages. Example: [50, 50] means two equal panes.',
+            args: { sizes: [30, 70] },
+            template: (h("nv-split", { class: "h-96 w-full", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-turquoise-500" }, "30% pane"), h("div", { slot: "pane", class: "bg-orange-500" }, "70% pane"))),
+        },
+        // complex
         {
             name: 'complex',
             description: 'Note: Only the parent nv-split responds to Storybook controls. Nested nv-split components have hardcoded values.',
             args: { gutterSize: 8, sizes: [50, 50], direction: 'vertical' },
-            template: (h("div", { class: "flex flex-col gap-4 h-screen w-full" }, h("nv-alert", { feedback: "warning", class: "m-4" }, "Only the parent nv-split responds to Storybook controls. The nested nv-split has hardcoded values."), h("nv-split", { class: "flex-1", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-turquoise-50 p-6" }, "Top"), h("div", { slot: "pane", class: "bg-orange-50 p-6" }, h("nv-split", { direction: "horizontal", sizes: [20, 80] }, h("div", { slot: "pane", class: "bg-red-50 p-6" }, "Left"), h("div", { slot: "pane", class: "bg-yellow-50 p-6" }, "center"), h("div", { slot: "pane", class: "bg-green-50 p-6" }, "Right")))))),
+            template: (h("div", { class: "flex flex-col gap-4 h-screen w-full" }, h("nv-alert", { feedback: "warning", class: "m-4" }, "Only the parent nv-split responds to Storybook controls. The nested nv-split has hardcoded values."), h("nv-split", { class: "flex-1", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-turquoise-50" }, "Top"), h("div", { slot: "pane", class: "bg-orange-50" }, h("nv-split", { direction: "horizontal", sizes: [20, 80] }, h("div", { slot: "pane", class: "bg-red-50" }, "Left"), h("div", { slot: "pane", class: "bg-yellow-50" }, "center"), h("div", { slot: "pane", class: "bg-green-50" }, "Right")))))),
         },
+        // NestedSplit
         {
             name: 'NestedSplit',
             description: 'Note: Only the root nv-split responds to Storybook controls. All nested nv-split components have hardcoded values.',
             args: { gutterSize: 8, sizes: [10, 90], direction: 'horizontal' },
             template: (h("div", { class: "flex flex-col gap-4 h-screen w-full" }, h("nv-alert", { feedback: "warning", class: "m-4" }, "Only the root nv-split responds to Storybook controls. All nested nv-split components have hardcoded values."), h("nv-split", { class: "flex-1", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-purple-300" }, "Sidebar"), h("div", { slot: "pane", class: "bg-gray-200" }, h("nv-split", { direction: "vertical", sizes: [10, 90], class: "h-full w-full" }, h("div", { slot: "pane", class: "bg-pink-300" }, "Top Content"), h("div", { slot: "pane", class: "bg-cyan-300" }, h("nv-split", { direction: "horizontal", sizes: [10, 90], class: "h-full w-full" }, h("div", { slot: "pane", class: "bg-lime-300" }, "Bottom Left"), h("div", { slot: "pane", class: "bg-orange-300" }, "Bottom Right")))))))),
         },
+        // SlotPane
+        {
+            name: 'SlotPane',
+            description: 'Content of each split pane. Use multiple <div slot="pane"> elements.',
+            args: { sizes: [50, 50] },
+            template: (h("nv-split", { class: "h-96 w-full", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-turquoise-500" }, "First pane content"), h("div", { slot: "pane", class: "bg-orange-500" }, "Second pane content"))),
+        },
+        // SlotGutter
+        {
+            name: 'SlotGutter',
+            description: 'Optional custom content inside every gutter handle.',
+            args: { sizes: [50, 50] },
+            template: (h("nv-split", { class: "h-96 w-full", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-turquoise-500" }, "Left pane"), h("div", { slot: "pane", class: "bg-orange-500" }, "Right pane"), h("div", { slot: "gutter", class: "flex items-center justify-center" }, h("span", { class: "text-xs" }, "\u22EE\u22EE")))),
+        },
     ],
 };
 export default NvSplitDocs;

package/dist/collection/components/nv-split/nv-split.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-split.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-split/nv-split.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvSplitDocs: NovaDocs<Components.NvSplit> = {\n component: 'nv-split',\n subcomponents: ['nv-alert'],\n badge: 'beta',\n stories: [\n {\n name: 'Default',\n args: {\n direction: 'horizontal',\n sizes: [50, 50],\n },\n template: (\n <nv-split class=\"h-96 w-full\" data-storybook-args>\n <div slot=\"pane\" class=\"bg-turquoise-50 p-6\">\n Left pane\n </div>\n <div slot=\"pane\" class=\"bg-orange-50 p-6\">\n Right pane\n </div>\n </nv-split>\n ),\n },\n {\n name: nameof<Components.NvSplit>(x => x.direction),\n args: { direction: 'vertical', sizes: [70, 30] },\n template: (\n <nv-split class=\"h-screen w-full\" data-storybook-args>\n <div slot=\"pane\">Top pane</div>\n <div slot=\"pane\">Bottom pane</div>\n </nv-split>\n ),\n },\n {\n name: nameof<Components.NvSplit>(x => x.gutterSize),\n args: { gutterSize: 8, sizes: [50, 50] },\n template: (\n <nv-split class=\"h-screen w-full\" data-storybook-args>\n <div slot=\"pane\">Pane A</div>\n <div slot=\"pane\">Pane B</div>\n </nv-split>\n ),\n },\n {\n name: 'complex',\n description:\n 'Note: Only the parent nv-split responds to Storybook controls. Nested nv-split components have hardcoded values.',\n args: { gutterSize: 8, sizes: [50, 50], direction: 'vertical' },\n template: (\n <div class=\"flex flex-col gap-4 h-screen w-full\">\n <nv-alert feedback=\"warning\" class=\"m-4\">\n Only the parent nv-split responds to Storybook controls. The nested\n nv-split has hardcoded values.\n </nv-alert>\n <nv-split class=\"flex-1\" data-storybook-args>\n <div slot=\"pane\" class=\"bg-turquoise-50 p-6\">\n Top\n </div>\n <div slot=\"pane\" class=\"bg-orange-50 p-6\">\n <nv-split direction=\"horizontal\" sizes={[20, 80]}>\n <div slot=\"pane\" class=\"bg-red-50 p-6\">\n Left\n </div>\n <div slot=\"pane\" class=\"bg-yellow-50 p-6\">\n center\n </div>\n <div slot=\"pane\" class=\"bg-green-50 p-6\">\n Right\n </div>\n </nv-split>\n </div>\n </nv-split>\n </div>\n ),\n },\n {\n name: 'NestedSplit',\n description:\n 'Note: Only the root nv-split responds to Storybook controls. All nested nv-split components have hardcoded values.',\n args: { gutterSize: 8, sizes: [10, 90], direction: 'horizontal' },\n template: (\n <div class=\"flex flex-col gap-4 h-screen w-full\">\n <nv-alert feedback=\"warning\" class=\"m-4\">\n Only the root nv-split responds to Storybook controls. All nested\n nv-split components have hardcoded values.\n </nv-alert>\n <nv-split class=\"flex-1\" data-storybook-args>\n <div slot=\"pane\" class=\"bg-purple-300\">\n Sidebar\n </div>\n <div slot=\"pane\" class=\"bg-gray-200\">\n <nv-split\n direction=\"vertical\"\n sizes={[10, 90]}\n class=\"h-full w-full\"\n >\n <div slot=\"pane\" class=\"bg-pink-300\">\n Top Content\n </div>\n <div slot=\"pane\" class=\"bg-cyan-300\">\n <nv-split\n direction=\"horizontal\"\n sizes={[10, 90]}\n class=\"h-full w-full\"\n >\n <div slot=\"pane\" class=\"bg-lime-300\">\n Bottom Left\n </div>\n <div slot=\"pane\" class=\"bg-orange-300\">\n Bottom Right\n </div>\n </nv-split>\n </div>\n </nv-split>\n </div>\n </nv-split>\n </div>\n ),\n },\n ],\n};\n\nexport default NvSplitDocs;\n"]}
1	+ {"version":3,"file":"nv-split.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-split/nv-split.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvSplitDocs: NovaDocs<Components.NvSplit> = {\n component: 'nv-split',\n subcomponents: ['nv-alert'],\n badge: 'beta',\n stories: [\n // Default\n {\n name: 'Default',\n args: {\n direction: 'horizontal',\n sizes: [50, 50],\n },\n template: (\n <nv-split class=\"h-96 w-full\" data-storybook-args>\n <div slot=\"pane\" class=\"bg-turquoise-50\">\n Left pane\n </div>\n <div slot=\"pane\" class=\"bg-orange-50\">\n Right pane\n </div>\n </nv-split>\n ),\n },\n // direction\n {\n name: nameof<Components.NvSplit>(x => x.minSizes),\n description: 'Minimum pane sizes in px to clamp gutter movement.',\n args: {\n direction: 'horizontal',\n sizes: [50, 50],\n minSizes: [20, 20],\n },\n template: (\n <nv-split class=\"h-96 w-full\" data-storybook-args>\n <div slot=\"pane\">\n <div class=\"bg-turquoise-50 p-6 h-full\">Left pane</div>\n </div>\n <div slot=\"pane\">\n <div class=\"bg-orange-50 p-6 h-full\">Right pane</div>\n </div>\n </nv-split>\n ),\n },\n {\n name: nameof<Components.NvSplit>(x => x.direction),\n args: { direction: 'vertical', sizes: [70, 30] },\n template: (\n <nv-split class=\"h-screen w-full\" data-storybook-args>\n <div slot=\"pane\">Top pane</div>\n <div slot=\"pane\">Bottom pane</div>\n </nv-split>\n ),\n },\n // gutterSize\n {\n name: nameof<Components.NvSplit>(x => x.gutterSize),\n args: { gutterSize: 8, sizes: [50, 50] },\n template: (\n <nv-split class=\"h-screen w-full\" data-storybook-args>\n <div slot=\"pane\">Pane A</div>\n <div slot=\"pane\">Pane B</div>\n </nv-split>\n ),\n },\n // sizes\n {\n name: nameof<Components.NvSplit>(x => x.sizes),\n description:\n 'Initial sizes of the panes in percentages. Example: [50, 50] means two equal panes.',\n args: { sizes: [30, 70] },\n template: (\n <nv-split class=\"h-96 w-full\" data-storybook-args>\n <div slot=\"pane\" class=\"bg-turquoise-500\">\n 30% pane\n </div>\n <div slot=\"pane\" class=\"bg-orange-500\">\n 70% pane\n </div>\n </nv-split>\n ),\n },\n // complex\n {\n name: 'complex',\n description:\n 'Note: Only the parent nv-split responds to Storybook controls. Nested nv-split components have hardcoded values.',\n args: { gutterSize: 8, sizes: [50, 50], direction: 'vertical' },\n template: (\n <div class=\"flex flex-col gap-4 h-screen w-full\">\n <nv-alert feedback=\"warning\" class=\"m-4\">\n Only the parent nv-split responds to Storybook controls. The nested\n nv-split has hardcoded values.\n </nv-alert>\n <nv-split class=\"flex-1\" data-storybook-args>\n <div slot=\"pane\" class=\"bg-turquoise-50\">\n Top\n </div>\n <div slot=\"pane\" class=\"bg-orange-50\">\n <nv-split direction=\"horizontal\" sizes={[20, 80]}>\n <div slot=\"pane\" class=\"bg-red-50\">\n Left\n </div>\n <div slot=\"pane\" class=\"bg-yellow-50\">\n center\n </div>\n <div slot=\"pane\" class=\"bg-green-50\">\n Right\n </div>\n </nv-split>\n </div>\n </nv-split>\n </div>\n ),\n },\n // NestedSplit\n {\n name: 'NestedSplit',\n description:\n 'Note: Only the root nv-split responds to Storybook controls. All nested nv-split components have hardcoded values.',\n args: { gutterSize: 8, sizes: [10, 90], direction: 'horizontal' },\n template: (\n <div class=\"flex flex-col gap-4 h-screen w-full\">\n <nv-alert feedback=\"warning\" class=\"m-4\">\n Only the root nv-split responds to Storybook controls. All nested\n nv-split components have hardcoded values.\n </nv-alert>\n <nv-split class=\"flex-1\" data-storybook-args>\n <div slot=\"pane\" class=\"bg-purple-300\">\n Sidebar\n </div>\n <div slot=\"pane\" class=\"bg-gray-200\">\n <nv-split\n direction=\"vertical\"\n sizes={[10, 90]}\n class=\"h-full w-full\"\n >\n <div slot=\"pane\" class=\"bg-pink-300\">\n Top Content\n </div>\n <div slot=\"pane\" class=\"bg-cyan-300\">\n <nv-split\n direction=\"horizontal\"\n sizes={[10, 90]}\n class=\"h-full w-full\"\n >\n <div slot=\"pane\" class=\"bg-lime-300\">\n Bottom Left\n </div>\n <div slot=\"pane\" class=\"bg-orange-300\">\n Bottom Right\n </div>\n </nv-split>\n </div>\n </nv-split>\n </div>\n </nv-split>\n </div>\n ),\n },\n // SlotPane\n {\n name: 'SlotPane',\n description:\n 'Content of each split pane. Use multiple <div slot=\"pane\"> elements.',\n args: { sizes: [50, 50] },\n template: (\n <nv-split class=\"h-96 w-full\" data-storybook-args>\n <div slot=\"pane\" class=\"bg-turquoise-500\">\n First pane content\n </div>\n <div slot=\"pane\" class=\"bg-orange-500\">\n Second pane content\n </div>\n </nv-split>\n ),\n },\n // SlotGutter\n {\n name: 'SlotGutter',\n description: 'Optional custom content inside every gutter handle.',\n args: { sizes: [50, 50] },\n template: (\n <nv-split class=\"h-96 w-full\" data-storybook-args>\n <div slot=\"pane\" class=\"bg-turquoise-500\">\n Left pane\n </div>\n <div slot=\"pane\" class=\"bg-orange-500\">\n Right pane\n </div>\n <div slot=\"gutter\" class=\"flex items-center justify-center\">\n <span class=\"text-xs\">⋮⋮</span>\n </div>\n </nv-split>\n ),\n },\n ],\n};\n\nexport default NvSplitDocs;\n"]}

package/dist/collection/components/nv-split/nv-split.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 /**
- * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
+ * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.
  * @slot pane - Content of each split pane. Use multiple `<div slot="pane">` elements.
  * @slot gutter - Optional custom content inside every gutter handle.
  */
@@ -33,7 +33,7 @@ export class NvSplit {
         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
@@ -54,18 +54,20 @@ export class NvSplit {
     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
@@ -113,13 +115,12 @@ export class NvSplit {
      * @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
     /****************************************************************************/
@@ -194,15 +195,14 @@ export class NvSplit {
             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();
     }
@@ -224,7 +224,6 @@ export class NvSplit {
      * 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)
@@ -232,7 +231,7 @@ export class NvSplit {
         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';
@@ -241,68 +240,70 @@ export class NvSplit {
                 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();
     }
     /**
@@ -314,12 +315,13 @@ export class NvSplit {
         this.isDragging = false;
         this.dragIndex = -1;
         this.detachDocumentListeners();
+        this.sizesChanged.emit([...this.sizes]);
     }
     //#endregion
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2266f982349909b08637721e0bf5d8792fa2f3aa', "data-dragging": this.isDragging.toString() }, h("slot", { key: '0b0845ae2f93bb137692fd570beaa2e26816c1c9', name: "pane" }), h("slot", { key: 'ac322712eb7024dde9efc41dac946196fd15a786', name: "gutter" })));
+        return (h(Host, { key: '850cf8fb9d492e1da39da0037c1fd8d414960d28', "data-dragging": this.isDragging.toString() }, h("slot", { key: '4d2f540ca147abe4778bcc0d02be2e87ee2cf3b4', name: "pane" }), h("slot", { key: '1ceb2dc6375c50fe7786ba03fb2a753f852980ba', name: "gutter" })));
     }
     static get is() { return "nv-split"; }
     static get originalStyleUrls() {
@@ -428,7 +430,7 @@ export class NvSplit {
                             "name": "bind",
                             "text": "sizes"
                         }],
-                    "text": "Emitted when pane sizes are updated (either via dragging or programmatically)."
+                    "text": "Emitted when pane sizes are updated (drag start/stop or programmatically)."
                 },
                 "complexType": {
                     "original": "number[]",

package/dist/collection/components/nv-split/nv-split.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-split.js","sourceRoot":"","sources":["../../../../src/components/nv-split/nv-split.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n State,\n Watch,\n} from '@stencil/core';\n\n/*\n The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.\n * @slot pane - Content of each split pane. Use multiple `<div slot=\"pane\">` elements.\n * @slot gutter - Optional custom content inside every gutter handle.\n /\n@Component({\n tag: 'nv-split',\n styleUrl: 'styles/nv-split.scss',\n shadow: false,\n})\nexport class NvSplit {\n @Element() el: HTMLNvSplitElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Direction of the split layout.\n * - `horizontal`: panes side by side\n * - `vertical`: panes stacked\n /\n @Prop({ reflect: true })\n readonly direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Initial sizes of the panes in percentages.\n * Example: `[50, 50]` means two equal panes.\n * Explicitly `reflect: false` (array) for framework compatibility.\n /\n @Prop({ mutable: true, reflect: false })\n sizes: number[] = [];\n\n /\n Minimum sizes (in px) for each pane.\n * Example: `[100, 200]` => first pane min 100px, second min 200px.\n * Explicitly `reflect: false` (array) for framework compatibility.\n /\n @Prop({ reflect: false })\n readonly minSizes?: number[];\n\n /\n Width or height of the gutter (in px) depending on the split direction.\n * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.\n /\n @Prop({ reflect: true })\n readonly gutterSize: number = 24;\n\n //#endregion\n /*************************************************************************/\n //#region STATE\n\n @State()\n private isDragging: boolean = false;\n\n private dragIndex: number = -1;\n private startPos: number = 0;\n private startSizes: number[] = [];\n private ro?: ResizeObserver;\n\n // Handlers stored to be able to detach them\n private onDocMove = (ev: MouseEvent) => this.handleMouseMove(ev);\n private onDocUp = () => this.stopDragging();\n\n //#endregion\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when pane sizes are updated (either via dragging or programmatically).\n * @bind sizes\n /\n @Event({ bubbles: false })\n sizesChanged: EventEmitter<number[]>;\n\n //#endregion\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('sizes')\n protected onSizesChanged(): void {\n // Re-apply sizes if modified from the outside\n this.applySizes();\n }\n\n @Watch('direction')\n protected onDirectionChanged(): void {\n // Update the orientation and the cursors of the gutters\n this.ensureGutters();\n this.applySizes();\n }\n\n //#endregion\n /************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad(): void {\n // Initialization (once)\n this.ensureGutters();\n this.applySizes();\n this.positionGutters();\n\n // Observer: reposition gutters when resized (nested or parent split changes)\n this.ro = new ResizeObserver(() => this.positionGutters());\n this.ro.observe(this.el);\n\n window.addEventListener('resize', () => this.positionGutters());\n }\n\n disconnectedCallback(): void {\n // Security cleanup (in case a drag was in progress)\n this.detachDocumentListeners();\n this.ro?.disconnect();\n this.ro = undefined;\n }\n\n //#endregion\n /************************************************************************/\n //#region PUBLIC METHODS\n\n /\n * Programmatically set pane sizes.\n * @param {Array<number>} sizes Array of pane sizes in percentages.\n * @returns {Promise<void>}\n /\n @Method()\n async setSizes(sizes: number[]): Promise<void> {\n this.sizes = [...sizes];\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /\n Returns the current pane sizes.\n * @returns {Promise<number[]>} Array of pane sizes in percentages.\n /\n @Method()\n async getSizes(): Promise<number[]> {\n return [...this.sizes];\n }\n\n /\n Collapse a specific pane to 0 size.\n * @param {number} index Index of the pane to collapse.\n * @returns {Promise<void>}\n /\n @Method()\n async collapse(index: number): Promise<void> {\n const panes = this.getPanes();\n if (index < 0 \|\| index >= panes.length) return;\n\n // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor\n const next = new Array(panes.length).fill(0);\n const target = index < panes.length - 1 ? index + 1 : index - 1;\n if (target >= 0) next[target] = 100;\n\n this.sizes = next;\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /\n Destroy the split instance: removes gutters and resets layout state.\n * @returns {Promise<void>}\n /\n @Method()\n async destroy(): Promise<void> {\n this.sizes = [];\n this.isDragging = false;\n this.dragIndex = -1;\n this.removeOwnGutters();\n this.detachDocumentListeners();\n this.ro?.disconnect();\n }\n\n //#endregion\n /*************************************************************************/\n //#region INTERNAL HELPERS\n\n /\n * Returns the panes of the split.\n * @returns {HTMLElement[]} The panes of the split.\n /\n private getPanes(): HTMLElement[] {\n // Only the direct children slot=\"pane\"\n return Array.from(\n this.el.querySelectorAll<HTMLElement>(':scope > [slot=\"pane\"]'),\n );\n }\n\n /\n Returns the own gutters of the split.\n * @returns {HTMLElement[]} The own gutters of the split.\n /\n private getOwnGutters(): HTMLElement[] {\n // Only the direct gutters of THIS instance\n return Array.from(\n this.el.querySelectorAll<HTMLElement>(\n ':scope > .nv-split-gutter[data-auto=\"true\"]',\n ),\n );\n }\n\n /\n Removes the own gutters of the split.\n /\n private removeOwnGutters(): void {\n this.getOwnGutters().forEach(g => g.remove());\n }\n\n /\n Ensures the gutters of the split.\n /\n private ensureGutters(): void {\n const panes = this.getPanes();\n\n // 1) Clean ONLY the old direct gutters of THIS instance\n this.removeOwnGutters();\n\n if (panes.length <= 1) return;\n\n // 2) Add the gutters (directs) between the panes\n panes.forEach((pane, i) => {\n if (i >= panes.length - 1) return;\n\n const g = document.createElement('div');\n g.className = 'nv-split-gutter';\n g.setAttribute('data-auto', 'true');\n\n if (this.direction === 'horizontal') {\n g.style.width = `${this.gutterSize}px`;\n g.style.cursor = 'col-resize';\n } else {\n g.style.height = `${this.gutterSize}px`;\n g.style.cursor = 'row-resize';\n }\n\n // Customizable internal slot\n const slotEl = document.createElement('slot');\n slotEl.name = 'gutter';\n g.appendChild(slotEl);\n\n // Listener drag (index = gutter between pane i and i+1)\n g.addEventListener('mousedown', (ev: MouseEvent) =>\n this.startDragging(ev, i),\n );\n\n // Insert just after the pane\n pane.insertAdjacentElement('afterend', g);\n });\n\n this.positionGutters();\n }\n\n /\n Applies the sizes to the panes.\n /\n private applySizes(): void {\n const panes = this.getPanes();\n const n = panes.length;\n if (n === 0) return;\n\n // Default values if inconsistent\n if (!this.sizes \|\| this.sizes.length !== n) {\n this.sizes = Array(n).fill(100 / n);\n }\n\n panes.forEach((pane, i) => {\n const size = Math.max(0, this.sizes[i] ?? 100 / n);\n // Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)\n pane.style.flex = `0 0 ${size}%`;\n pane.style.minWidth = '0';\n pane.style.minHeight = '0';\n pane.style.overflow = 'hidden'; // let a nv-split child extend\n pane.style.display = 'flex';\n pane.style.flexDirection = 'column';\n });\n\n this.positionGutters();\n }\n\n /\n Attaches the document listeners.\n /\n private attachDocumentListeners(): void {\n document.addEventListener('mousemove', this.onDocMove);\n document.addEventListener('mouseup', this.onDocUp);\n }\n\n /\n Detaches the document listeners.\n /\n private detachDocumentListeners(): void {\n document.removeEventListener('mousemove', this.onDocMove);\n document.removeEventListener('mouseup', this.onDocUp);\n }\n\n /\n Positions the gutters based on the current sizes of the panes.\n /\n private positionGutters(): void {\n const panes = this.getPanes();\n const gutters = this.getOwnGutters();\n if (panes.length <= 1 \|\| gutters.length === 0) return;\n\n const horizontal = this.direction === 'horizontal';\n let cumPct = 0;\n\n for (let i = 0; i < gutters.length; i++) {\n const sizePct = this.sizes?.[i] ?? 100 / panes.length;\n cumPct += sizePct;\n\n const g = gutters[i];\n g.style.position = 'absolute';\n\n if (horizontal) {\n g.style.left = `${cumPct}%`;\n g.style.top = '0';\n g.style.bottom = '0';\n g.style.height = '100%';\n } else {\n g.style.top = `${cumPct}%`;\n g.style.left = '0';\n g.style.right = '0';\n g.style.width = '100%';\n }\n }\n }\n\n /\n Starts the dragging process.\n * @param {MouseEvent} ev - The mouse event.\n * @param {number} index - The index of the gutter.\n /\n private startDragging(ev: MouseEvent, index: number): void {\n this.isDragging = true;\n this.dragIndex = index;\n this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;\n this.startSizes = [...this.sizes];\n this.attachDocumentListeners();\n }\n\n /\n Handles the mouse movement during dragging.\n * @param {MouseEvent} ev - The mouse event.\n /\n private handleMouseMove(ev: MouseEvent): void {\n if (!this.isDragging \|\| this.dragIndex < 0) return;\n\n const panes = this.getPanes();\n if (panes.length < 2) return;\n\n const rect = this.el.getBoundingClientRect();\n\n // Ensure we never divide by zero if the element has zero width/height\n const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;\n const totalPx = Math.max(rawSize, 1);\n\n const deltaPx =\n (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -\n this.startPos;\n const deltaPct = (deltaPx / totalPx) 100;\n\n const i = this.dragIndex;\n const j = i + 1;\n\n let left = this.startSizes[i] + deltaPct;\n let right = this.startSizes[j] - deltaPct;\n\n // minSizes (px) -> %\n const minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;\n const minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;\n\n left = Math.max(left, minLeftPct);\n right = Math.max(right, minRightPct);\n\n // Keep the sum of the pair i/j constant\n const pairSum = left + right;\n const targetSum = this.startSizes[i] + this.startSizes[j];\n if (Math.abs(pairSum - targetSum) > 0.0001) {\n const k = targetSum / (pairSum \|\| 1);\n left = k;\n right = k;\n }\n\n const next = [...this.startSizes];\n next[i] = left;\n next[j] = right;\n\n this.sizes = next;\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /*\n Stops the dragging process.\n /\n private stopDragging(): void {\n if (!this.isDragging) return;\n this.isDragging = false;\n this.dragIndex = -1;\n this.detachDocumentListeners();\n }\n\n //#endregion\n /*************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host data-dragging={this.isDragging.toString()}>\n <slot name=\"pane\"></slot>\n <slot name=\"gutter\"></slot>\n </Host>\n );\n }\n\n //#endregion\n /**************************************************************************/\n}\n"]}
1	+ {"version":3,"file":"nv-split.js","sourceRoot":"","sources":["../../../../src/components/nv-split/nv-split.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n State,\n Watch,\n} from '@stencil/core';\n\n/*\n The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself.\n * @slot pane - Content of each split pane. Use multiple `<div slot=\"pane\">` elements.\n * @slot gutter - Optional custom content inside every gutter handle.\n /\n@Component({\n tag: 'nv-split',\n styleUrl: 'styles/nv-split.scss',\n shadow: false,\n})\nexport class NvSplit {\n @Element() el: HTMLNvSplitElement;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Direction of the split layout.\n * - `horizontal`: panes side by side\n * - `vertical`: panes stacked\n /\n @Prop({ reflect: true })\n readonly direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Initial sizes of the panes in percentages.\n * Example: `[50, 50]` means two equal panes.\n * Explicitly `reflect: false` (array) for framework compatibility.\n /\n @Prop({ mutable: true, reflect: false })\n sizes: number[] = [];\n\n /\n Minimum sizes (in px) for each pane.\n * Example: `[100, 200]` => first pane min 100px, second min 200px.\n * Explicitly `reflect: false` (array) for framework compatibility.\n /\n @Prop({ reflect: false })\n readonly minSizes?: number[];\n\n /\n Width or height of the gutter (in px) depending on the split direction.\n * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.\n /\n @Prop({ reflect: true })\n readonly gutterSize: number = 24;\n\n //#endregion\n /*************************************************************************/\n //#region STATE\n\n @State()\n private isDragging: boolean = false;\n\n private dragIndex: number = -1;\n private startPos: number = 0;\n private startSizes: number[] = [];\n private ro?: ResizeObserver;\n\n // Handlers stored to be able to detach them\n private onDocMove = (e: MouseEvent) => this.handleMouseMove(e);\n private onDocUp = () => this.stopDragging();\n\n //#endregion\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when pane sizes are updated (drag start/stop or programmatically).\n * @bind sizes\n /\n @Event({ bubbles: false })\n sizesChanged: EventEmitter<number[]>;\n\n //#endregion\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('sizes')\n protected onSizesChanged(): void {\n // Re-apply sizes if modified from the outside\n this.applySizes();\n }\n\n @Watch('direction')\n protected onDirectionChanged(): void {\n // Update the orientation and the cursors of the gutters\n this.ensureGutters();\n this.applySizes();\n }\n\n //#endregion\n /************************************************************************/\n //#region LIFECYCLE\n\n componentDidLoad(): void {\n // Initialization (once)\n this.ensureGutters();\n\n // Defer applySizes to ensure CSS (margins, padding) is computed\n requestAnimationFrame(() => {\n this.applySizes();\n this.positionGutters();\n });\n\n // Observer: reposition gutters when resized\n this.ro = new ResizeObserver(() => this.positionGutters());\n this.ro.observe(this.el);\n\n window.addEventListener('resize', () => this.positionGutters());\n }\n\n disconnectedCallback(): void {\n // Security cleanup (in case a drag was in progress)\n this.detachDocumentListeners();\n this.ro?.disconnect();\n this.ro = undefined;\n }\n\n //#endregion\n /************************************************************************/\n //#region PUBLIC METHODS\n\n /\n * Programmatically set pane sizes.\n * @param {Array<number>} sizes Array of pane sizes in percentages.\n * @returns {Promise<void>}\n /\n @Method()\n async setSizes(sizes: number[]): Promise<void> {\n this.sizes = [...sizes];\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /\n Returns the current pane sizes.\n * @returns {Promise<number[]>} Array of pane sizes in percentages.\n /\n @Method()\n async getSizes(): Promise<number[]> {\n return [...this.sizes];\n }\n\n /\n Collapse a specific pane to 0 size.\n * @param {number} index Index of the pane to collapse.\n * @returns {Promise<void>}\n /\n @Method()\n async collapse(index: number): Promise<void> {\n const panes = this.getPanes();\n if (index < 0 \|\| index >= panes.length) return;\n\n // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor\n const next = new Array(panes.length).fill(0);\n const target = index < panes.length - 1 ? index + 1 : index - 1;\n if (target >= 0) next[target] = 100;\n\n this.sizes = next;\n this.applySizes();\n this.sizesChanged.emit([...this.sizes]);\n this.positionGutters();\n }\n\n /\n Destroy the split instance: removes gutters and resets layout state.\n * @returns {Promise<void>}\n /\n @Method()\n async destroy(): Promise<void> {\n this.sizes = [];\n this.isDragging = false;\n this.dragIndex = -1;\n this.removeOwnGutters();\n this.detachDocumentListeners();\n this.ro?.disconnect();\n }\n\n //#endregion\n /*************************************************************************/\n //#region INTERNAL HELPERS\n\n /\n * Returns the panes of the split.\n * @returns {HTMLElement[]} The panes of the split.\n /\n private getPanes(): HTMLElement[] {\n // Only the direct children slot=\"pane\"\n return Array.from(\n this.el.querySelectorAll<HTMLElement>(':scope > [slot=\"pane\"]'),\n );\n }\n\n /\n Returns the own gutters of the split.\n * @returns {HTMLElement[]} The own gutters of the split.\n /\n private getOwnGutters(): HTMLElement[] {\n // Only the direct gutters of THIS instance\n return Array.from(\n this.el.querySelectorAll<HTMLElement>(\n ':scope > .nv-split-gutter[data-auto=\"true\"]',\n ),\n );\n }\n\n /\n Removes the own gutters of the split.\n /\n private removeOwnGutters(): void {\n this.getOwnGutters().forEach(g => g.remove());\n }\n\n /\n Ensures the gutters of the split.\n /\n private ensureGutters(): void {\n const panes = this.getPanes();\n\n // 1) Clean ONLY the old direct gutters of THIS instance\n this.removeOwnGutters();\n\n if (panes.length <= 1) return;\n\n // 2) Add the gutters (directs) between the panes\n panes.forEach((pane, i) => {\n if (i >= panes.length - 1) return;\n\n const g = document.createElement('div');\n g.className = 'nv-split-gutter';\n g.setAttribute('data-auto', 'true');\n\n if (this.direction === 'horizontal') {\n g.style.width = `${this.gutterSize}px`;\n g.style.cursor = 'col-resize';\n } else {\n g.style.height = `${this.gutterSize}px`;\n g.style.cursor = 'row-resize';\n }\n\n // Customizable internal slot\n const slotEl = document.createElement('slot');\n slotEl.name = 'gutter';\n g.appendChild(slotEl);\n\n // Listener drag (index = gutter between pane i and i+1)\n g.addEventListener('mousedown', (ev: MouseEvent) =>\n this.startDragging(ev, i),\n );\n\n // Insert just after the pane\n pane.insertAdjacentElement('afterend', g);\n });\n\n this.positionGutters();\n }\n\n /\n Applies the sizes to the panes.\n /\n private applySizes(): void {\n const panes = this.getPanes();\n const n = panes.length;\n if (n === 0) return;\n\n // Default values if inconsistent\n if (!this.sizes \|\| this.sizes.length !== n) {\n this.sizes = Array(n).fill(100 / n);\n }\n\n panes.forEach((pane, i) => {\n const size = Math.max(0, this.sizes[i] ?? 100 / n);\n pane.style.flex = `0 0 ${size}%`;\n pane.style.minWidth = '0';\n pane.style.minHeight = '0';\n pane.style.overflow = 'hidden';\n pane.style.display = 'flex';\n pane.style.flexDirection = 'column';\n pane.style.boxSizing = 'border-box';\n });\n\n this.positionGutters();\n }\n\n /\n Attaches the document listeners.\n /\n private attachDocumentListeners(): void {\n document.addEventListener('mousemove', this.onDocMove);\n document.addEventListener('mouseup', this.onDocUp);\n }\n\n /\n Detaches the document listeners.\n /\n private detachDocumentListeners(): void {\n document.removeEventListener('mousemove', this.onDocMove);\n document.removeEventListener('mouseup', this.onDocUp);\n }\n\n /\n Positions the gutters based on the current sizes of the panes.\n /\n private positionGutters(): void {\n const panes = this.getPanes();\n const gutters = this.getOwnGutters();\n if (panes.length <= 1 \|\| gutters.length === 0) return;\n\n const horizontal = this.direction === 'horizontal';\n let cumPct = 0;\n\n for (let i = 0; i < gutters.length; i++) {\n const sizePct = this.sizes?.[i] ?? 100 / panes.length;\n cumPct += sizePct;\n\n const g = gutters[i];\n g.style.position = 'absolute';\n\n if (horizontal) {\n g.style.left = `${cumPct}%`;\n g.style.top = '0';\n g.style.bottom = '0';\n g.style.height = '100%';\n g.style.transform = 'translateX(-50%)';\n } else {\n g.style.top = `${cumPct}%`;\n g.style.left = '0';\n g.style.right = '0';\n g.style.width = '100%';\n g.style.transform = 'translateY(-50%)';\n }\n }\n }\n\n /\n Starts the dragging process.\n * @param {MouseEvent} e - The mouse event.\n * @param {number} index - The index of the gutter.\n /\n private startDragging(e: MouseEvent, index: number): void {\n e.preventDefault();\n this.isDragging = true;\n this.dragIndex = index;\n this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;\n this.startSizes = [...this.sizes];\n this.attachDocumentListeners();\n this.sizesChanged.emit([...this.sizes]);\n }\n\n /\n Handles the mouse movement during dragging.\n * @param {MouseEvent} e - The mouse event.\n /\n private handleMouseMove(e: MouseEvent): void {\n if (!this.isDragging \|\| this.dragIndex < 0) return;\n\n const panes = this.getPanes();\n if (panes.length < 2) return;\n\n const rect = this.el.getBoundingClientRect();\n const horizontal = this.direction === 'horizontal';\n const totalPx = Math.max(horizontal ? rect.width : rect.height, 1);\n\n const deltaPx = (horizontal ? e.clientX : e.clientY) - this.startPos;\n const deltaPct = (deltaPx / totalPx) 100;\n\n const i = this.dragIndex;\n const j = i + 1;\n\n const startLeft = this.startSizes[i];\n const startRight = this.startSizes[j];\n\n // minSizes (px) -> %\n let minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;\n let minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;\n\n const minSum = minLeftPct + minRightPct;\n const availableSum = startLeft + startRight;\n if (minSum > availableSum) {\n const scale = availableSum / minSum;\n minLeftPct = scale;\n minRightPct = scale;\n }\n\n const minDelta = minLeftPct - startLeft;\n const maxDelta = startRight - minRightPct;\n const clampedDelta = Math.min(Math.max(deltaPct, minDelta), maxDelta);\n\n const left = startLeft + clampedDelta;\n const right = startRight - clampedDelta;\n\n const next = [...this.startSizes];\n next[i] = left;\n next[j] = right;\n\n this.sizes = next;\n this.applySizes();\n this.positionGutters();\n }\n\n /*\n Stops the dragging process.\n /\n private stopDragging(): void {\n if (!this.isDragging) return;\n this.isDragging = false;\n this.dragIndex = -1;\n this.detachDocumentListeners();\n this.sizesChanged.emit([...this.sizes]);\n }\n\n //#endregion\n /*************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host data-dragging={this.isDragging.toString()}>\n <slot name=\"pane\"></slot>\n <slot name=\"gutter\"></slot>\n </Host>\n );\n }\n\n //#endregion\n /**************************************************************************/\n}\n"]}

package/dist/collection/components/nv-split/styles/nv-split.css CHANGED Viewed

@@ -112,12 +112,14 @@ 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;

package/dist/collection/components/nv-stack/nv-stack.docs.js CHANGED Viewed

@@ -4,36 +4,49 @@ const NvStackDocs = {
     component: 'nv-stack',
     subcomponents: ['nv-button'],
     stories: [
+        // Default
         {
             name: 'Default',
             args: { gutter: 2 },
             template: (h("nv-stack", { "data-storybook-args": true }, h("nv-button", null, "Button"), h("nv-button", null, "Button"), h("nv-button", null, "Button"))),
         },
+        // fill
         {
             name: nameof(x => x.fill),
             args: { fill: true },
             template: (h("nv-stack", { vertical: true, gutter: 2 }, h("nv-stack", { "data-storybook-args": true, class: "h-20" }, h("nv-button", null, "Button"), h("nv-button", null, "Button")), h("nv-stack", { "data-storybook-args": true, vertical: true }, h("nv-button", null, "Button"), h("nv-button", null, "Button")))),
         },
+        // flex
         {
             name: nameof(x => x.flex),
             args: { flex: true },
             template: (h("nv-stack", { "data-storybook-args": true }, h("nv-button", null, "Button"), h("nv-button", null, "Button"), h("nv-button", null, "Button"))),
         },
+        // full
         {
             name: nameof(x => x.full),
             args: { full: true },
             template: (h("nv-stack", { "data-storybook-args": true }, h("nv-button", null, "Button"), h("nv-button", null, "Button"), h("nv-button", null, "Button"))),
         },
+        // gutter
         {
             name: nameof(x => x.gutter),
             args: { gutter: 4 },
             template: (h("nv-stack", { "data-storybook-args": true }, h("nv-button", null, "Button"), h("nv-button", null, "Button"), h("nv-button", null, "Button"))),
         },
+        // vertical
         {
             name: nameof(x => x.vertical),
             args: { vertical: true },
             template: (h("nv-stack", { "data-storybook-args": true }, h("nv-button", null, "Button"), h("nv-button", null, "Button"), h("nv-button", null, "Button"))),
         },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Default slot for stack content.',
+            args: { gutter: 2 },
+            template: (h("nv-stack", { "data-storybook-args": true }, h("nv-button", null, "Button 1"), h("nv-button", null, "Button 2"), h("nv-button", null, "Button 3"))),
+        },
     ],
 };
 export default NvStackDocs;

package/dist/collection/components/nv-stack/nv-stack.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-stack.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-stack/nv-stack.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,WAAW,GAAiC;IAChD,SAAS,EAAE,UAAU;IACrB,aAAa,EAAE,CAAC,WAAW,CAAC;IAC5B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACnB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACpB,QAAQ,EAAE,CACR,gBAAU,QAAQ,QAAC,MAAM,EAAE,CAAC;gBAC1B,6CAA8B,KAAK,EAAC,MAAM;oBACxC,8BAA6B;oBAC7B,8BAA6B,CACpB;gBACX,6CAA8B,QAAQ;oBACpC,8BAA6B;oBAC7B,8BAA6B,CACpB,CACF,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACpB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACpB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACnB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACjD,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;KACF;CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvStackDocs: NovaDocs<Components.NvStack> = {\n component: 'nv-stack',\n subcomponents: ['nv-button'],\n stories: [\n {\n name: 'Default',\n args: { gutter: 2 },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n {\n name: nameof<Components.NvStack>(x => x.fill),\n args: { fill: true },\n template: (\n <nv-stack vertical gutter={2}>\n <nv-stack data-storybook-args class=\"h-20\">\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n <nv-stack data-storybook-args vertical>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n </nv-stack>\n ),\n },\n {\n name: nameof<Components.NvStack>(x => x.flex),\n args: { flex: true },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n {\n name: nameof<Components.NvStack>(x => x.full),\n args: { full: true },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n {\n name: nameof<Components.NvStack>(x => x.gutter),\n args: { gutter: 4 },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n {\n name: nameof<Components.NvStack>(x => x.vertical),\n args: { vertical: true },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n ],\n};\n\nexport default NvStackDocs;\n"]}
1	+ {"version":3,"file":"nv-stack.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-stack/nv-stack.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,WAAW,GAAiC;IAChD,SAAS,EAAE,UAAU;IACrB,aAAa,EAAE,CAAC,WAAW,CAAC;IAC5B,OAAO,EAAE;QACP,UAAU;QACV;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACnB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;QACD,OAAO;QACP;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACpB,QAAQ,EAAE,CACR,gBAAU,QAAQ,QAAC,MAAM,EAAE,CAAC;gBAC1B,6CAA8B,KAAK,EAAC,MAAM;oBACxC,8BAA6B;oBAC7B,8BAA6B,CACpB;gBACX,6CAA8B,QAAQ;oBACpC,8BAA6B;oBAC7B,8BAA6B,CACpB,CACF,CACZ;SACF;QACD,OAAO;QACP;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACpB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;QACD,OAAO;QACP;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;YACpB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;QACD,SAAS;QACT;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACnB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;QACD,WAAW;QACX;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACjD,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,CACR;gBACE,8BAA6B;gBAC7B,8BAA6B;gBAC7B,8BAA6B,CACpB,CACZ;SACF;QACD,cAAc;QACd;YACE,IAAI,EAAE,aAAa;YACnB,WAAW,EAAE,iCAAiC;YAC9C,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACnB,QAAQ,EAAE,CACR;gBACE,gCAA+B;gBAC/B,gCAA+B;gBAC/B,gCAA+B,CACtB,CACZ;SACF;KACF;CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvStackDocs: NovaDocs<Components.NvStack> = {\n component: 'nv-stack',\n subcomponents: ['nv-button'],\n stories: [\n // Default\n {\n name: 'Default',\n args: { gutter: 2 },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n // fill\n {\n name: nameof<Components.NvStack>(x => x.fill),\n args: { fill: true },\n template: (\n <nv-stack vertical gutter={2}>\n <nv-stack data-storybook-args class=\"h-20\">\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n <nv-stack data-storybook-args vertical>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n </nv-stack>\n ),\n },\n // flex\n {\n name: nameof<Components.NvStack>(x => x.flex),\n args: { flex: true },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n // full\n {\n name: nameof<Components.NvStack>(x => x.full),\n args: { full: true },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n // gutter\n {\n name: nameof<Components.NvStack>(x => x.gutter),\n args: { gutter: 4 },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n // vertical\n {\n name: nameof<Components.NvStack>(x => x.vertical),\n args: { vertical: true },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n <nv-button>Button</nv-button>\n </nv-stack>\n ),\n },\n // SlotDefault\n {\n name: 'SlotDefault',\n description: 'Default slot for stack content.',\n args: { gutter: 2 },\n template: (\n <nv-stack data-storybook-args>\n <nv-button>Button 1</nv-button>\n <nv-button>Button 2</nv-button>\n <nv-button>Button 3</nv-button>\n </nv-stack>\n ),\n },\n ],\n};\n\nexport default NvStackDocs;\n"]}

package/dist/collection/components/nv-stack/nv-stack.js CHANGED Viewed

@@ -18,7 +18,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'fbdaf5b2fb134b050883a512b4aeb96b070017c1', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '6c7c231b8ff2575a1b509539d227468629fae6ab' })));
+        return (h(Host, { key: '7b44b30e42b8df1c456f70b1f3be986e2fce1617', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'd38b6f0c043959ed97b3e90d21309ab832713b4e' })));
     }
     static get is() { return "nv-stack"; }
     static get originalStyleUrls() {