@nova-design-system/nova-webcomponents 3.16.0 → 3.17.0

package/dist/types/components.d.ts

@@ -2667,6 +2667,53 @@ export namespace Components {
     }
     interface NvRow {
     }
+    /**
+     * 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.
+     */
+    interface NvSplit {
+        /**
+          * Collapse a specific pane to 0 size.
+          * @param index Index of the pane to collapse.
+          * @returns
+         */
+        "collapse": (index: number) => Promise<void>;
+        /**
+          * Destroy the split instance: removes gutters and resets layout state.
+          * @returns
+         */
+        "destroy": () => Promise<void>;
+        /**
+          * Direction of the split layout. - `horizontal`: panes side by side - `vertical`: panes stacked
+         */
+        "direction": 'horizontal' | 'vertical';
+        /**
+          * Returns the current pane sizes.
+          * @returns Array of pane sizes in percentages.
+         */
+        "getSizes": () => Promise<number[]>;
+        /**
+          * Width or height of the gutter (in px) depending on the split direction. Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.
+         */
+        "gutterSize": number;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "gutter-size"?: number;
+        /**
+          * Minimum sizes (in px) for each pane. Example: `[100, 200]` => first pane min 100px, second min 200px. Explicitly `reflect: false` (array) for framework compatibility.
+         */
+        "minSizes"?: number[];
+        /**
+          * Programmatically set pane sizes.
+          * @param sizes Array of pane sizes in percentages.
+          * @returns
+         */
+        "setSizes": (sizes: number[]) => Promise<void>;
+        /**
+          * Initial sizes of the panes in percentages. Example: `[50, 50]` means two equal panes. Explicitly `reflect: false` (array) for framework compatibility.
+         */
+        "sizes": number[];
+    }
     /**
      * @deprecated Please use tailwind classes instead
      */
@@ -2928,6 +2975,10 @@ export interface NvPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvPopoverElement;
 }
+export interface NvSplitCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvSplitElement;
+}
 export interface NvToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvToggleElement;
@@ -3579,6 +3630,26 @@ declare global {
         prototype: HTMLNvRowElement;
         new (): HTMLNvRowElement;
     };
+    interface HTMLNvSplitElementEventMap {
+        "sizesChanged": number[];
+    }
+    /**
+     * 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.
+     */
+    interface HTMLNvSplitElement extends Components.NvSplit, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvSplitElementEventMap>(type: K, listener: (this: HTMLNvSplitElement, ev: NvSplitCustomEvent<HTMLNvSplitElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvSplitElementEventMap>(type: K, listener: (this: HTMLNvSplitElement, ev: NvSplitCustomEvent<HTMLNvSplitElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvSplitElement: {
+        prototype: HTMLNvSplitElement;
+        new (): HTMLNvSplitElement;
+    };
     /**
      * @deprecated Please use tailwind classes instead
      */
@@ -3708,6 +3779,7 @@ declare global {
         "nv-notificationcontainer": HTMLNvNotificationcontainerElement;
         "nv-popover": HTMLNvPopoverElement;
         "nv-row": HTMLNvRowElement;
+        "nv-split": HTMLNvSplitElement;
         "nv-stack": HTMLNvStackElement;
         "nv-table": HTMLNvTableElement;
         "nv-toggle": HTMLNvToggleElement;
@@ -6515,6 +6587,36 @@ declare namespace LocalJSX {
     }
     interface NvRow {
     }
+    /**
+     * 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.
+     */
+    interface NvSplit {
+        /**
+          * Direction of the split layout. - `horizontal`: panes side by side - `vertical`: panes stacked
+         */
+        "direction"?: 'horizontal' | 'vertical';
+        /**
+          * Width or height of the gutter (in px) depending on the split direction. Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.
+         */
+        "gutterSize"?: number;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "gutter-size"?: number;
+        /**
+          * Minimum sizes (in px) for each pane. Example: `[100, 200]` => first pane min 100px, second min 200px. Explicitly `reflect: false` (array) for framework compatibility.
+         */
+        "minSizes"?: number[];
+        /**
+          * Emitted when pane sizes are updated (either via dragging or programmatically).
+          * @bind sizes
+         */
+        "onSizesChanged"?: (event: NvSplitCustomEvent<number[]>) => void;
+        /**
+          * Initial sizes of the panes in percentages. Example: `[50, 50]` means two equal panes. Explicitly `reflect: false` (array) for framework compatibility.
+         */
+        "sizes"?: number[];
+    }
     /**
      * @deprecated Please use tailwind classes instead
      */
@@ -6730,6 +6832,7 @@ declare namespace LocalJSX {
         "nv-notificationcontainer": NvNotificationcontainer;
         "nv-popover": NvPopover;
         "nv-row": NvRow;
+        "nv-split": NvSplit;
         "nv-stack": NvStack;
         "nv-table": NvTable;
         "nv-toggle": NvToggle;
@@ -6795,6 +6898,10 @@ declare module "@stencil/core" {
             "nv-notificationcontainer": LocalJSX.NvNotificationcontainer & JSXBase.HTMLAttributes<HTMLNvNotificationcontainerElement>;
             "nv-popover": LocalJSX.NvPopover & JSXBase.HTMLAttributes<HTMLNvPopoverElement>;
             "nv-row": LocalJSX.NvRow & JSXBase.HTMLAttributes<HTMLNvRowElement>;
+            /**
+             * 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.
+             */
+            "nv-split": LocalJSX.NvSplit & JSXBase.HTMLAttributes<HTMLNvSplitElement>;
             /**
              * @deprecated Please use tailwind classes instead
              */

package/dist/vscode-data.json

@@ -4878,6 +4878,31 @@
       },
       "attributes": []
     },
+    {
+      "name": "nv-split",
+      "description": {
+        "kind": "markdown",
+        "value": "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."
+      },
+      "attributes": [
+        {
+          "name": "direction",
+          "description": "Direction of the split layout.\n- `horizontal`: panes side by side\n- `vertical`: panes stacked",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "gutter-size",
+          "description": "Width or height of the gutter (in px) depending on the split direction.\nDefault is 24px to meet WCAG 2.2 target size requirements for touch accessibility."
+        }
+      ]
+    },
     {
       "name": "nv-stack",
       "description": {

package/hydrate/index.js

@@ -6345,12 +6345,6 @@ class NvButton {
             this.el.click();
         }
     }
-    handleTouchStart(event) {
-        if (event.touches.length > 1)
-            return;
-        event.preventDefault();
-        this.el.click();
-    }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
@@ -6378,7 +6372,7 @@ class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '54c0b3351f4d8a180058a03e61a562882fb98498', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (hAsync("nv-loader", { key: '21315e4af4111bcf47c67e65a9a58a1d7121a43e', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: 'f37683ddaa2c11c5b7accfc99429c930f5a3dcf6', name: "leading-icon" }), hAsync("slot", { key: 'd17ebe7505d9027c6c58f930a8ea9b097561cead' }), hAsync("slot", { key: '2cd6c9756cc7540417041adf5830b734291b2ab5', name: "trailing-icon" })));
+        return (hAsync(Host, { key: '42488f71ad33233c839cd70b3ea57aee50b143b3', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (hAsync("nv-loader", { key: 'a30c71eebb8f0476bcca5acbc8e7ac7f6377740c', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), hAsync("slot", { key: '4bbcee81ef7236ae35471c649971c122e4b468f3', name: "leading-icon" }), hAsync("slot", { key: '82203f6aed911e61aef2438bba3b3e664ffb9f76' }), hAsync("slot", { key: 'c97a5ce78c15556b8c1a91a4d06eb6bc9a9cd255', name: "trailing-icon" })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -6401,7 +6395,7 @@ class NvButton {
             "type": [513],
             "form": [513]
         },
-        "$listeners$": [[0, "keydown", "handleKeyDown"], [0, "touchstart", "handleTouchStart"]],
+        "$listeners$": [[0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["size", "size"], ["emphasis", "emphasis"], ["active", "active"], ["danger", "danger"], ["loading", "loading"], ["disabled", "disabled"], ["fluid", "fluid"], ["type", "type"], ["form", "form"]]
     }; }
@@ -26945,6 +26939,359 @@ class NvRow {
     }; }
 }
 
+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(--nv-color-neutral-400, #ccc);border-radius:2px;transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--nv-color-brand-primary, #0066cc)}nv-split .nv-split-gutter::before{content:\"\";position:absolute;background-repeat:no-repeat;background-position:center;opacity:0.4;transition:opacity 0.2s ease;pointer-events:none}nv-split .nv-split-gutter:hover::before{opacity:0.7}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--nv-split-gutter-size, 24px);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:2px;height:60%;left:50%;top:20%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter::before{width:16px;height:16px}nv-split[direction=vertical]>.nv-split-gutter{height:var(--nv-split-gutter-size, 24px);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:2px;width:60%;top:50%;left:20%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter::before{width:16px;height:16px}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--nv-color-neutral-500, #9ca3af)}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%}";
+var NvSplitStyle0 = nvSplitCss;
+
+/**
+ * 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 - Content of each split pane. Use multiple `<div slot="pane">` elements.
+ * @slot gutter - Optional custom content inside every gutter handle.
+ */
+class NvSplit {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sizesChanged = createEvent(this, "sizesChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Direction of the split layout.
+         * - `horizontal`: panes side by side
+         * - `vertical`: panes stacked
+         */
+        this.direction = 'horizontal';
+        /**
+         * Initial sizes of the panes in percentages.
+         * Example: `[50, 50]` means two equal panes.
+         * Explicitly `reflect: false` (array) for framework compatibility.
+         */
+        this.sizes = [];
+        /**
+         * Width or height of the gutter (in px) depending on the split direction.
+         * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.
+         */
+        this.gutterSize = 24;
+        //#endregion
+        /****************************************************************************/
+        //#region STATE
+        this.isDragging = false;
+        this.dragIndex = -1;
+        this.startPos = 0;
+        this.startSizes = [];
+        // Handlers stored to be able to detach them
+        this.onDocMove = (ev) => this.handleMouseMove(ev);
+        this.onDocUp = () => this.stopDragging();
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region WATCHERS
+    onSizesChanged() {
+        // Re-apply sizes if modified from the outside
+        this.applySizes();
+    }
+    onDirectionChanged() {
+        // Update the orientation and the cursors of the gutters
+        this.ensureGutters();
+        this.applySizes();
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        // Initialization (once)
+        this.ensureGutters();
+        this.applySizes();
+        this.positionGutters();
+        // Observer: reposition gutters when resized (nested or parent split changes)
+        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 = undefined;
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region PUBLIC METHODS
+    /**
+     * Programmatically set pane sizes.
+     * @param {Array<number>} sizes Array of pane sizes in percentages.
+     * @returns {Promise<void>}
+     */
+    async setSizes(sizes) {
+        this.sizes = [...sizes];
+        this.applySizes();
+        this.sizesChanged.emit([...this.sizes]);
+        this.positionGutters();
+    }
+    /**
+     * Returns the current pane sizes.
+     * @returns {Promise<number[]>} Array of pane sizes in percentages.
+     */
+    async getSizes() {
+        return [...this.sizes];
+    }
+    /**
+     * Collapse a specific pane to 0 size.
+     * @param {number} index Index of the pane to collapse.
+     * @returns {Promise<void>}
+     */
+    async collapse(index) {
+        const panes = this.getPanes();
+        if (index < 0 || index >= panes.length)
+            return;
+        // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor
+        const next = new Array(panes.length).fill(0);
+        const target = index < panes.length - 1 ? index + 1 : index - 1;
+        if (target >= 0)
+            next[target] = 100;
+        this.sizes = next;
+        this.applySizes();
+        this.sizesChanged.emit([...this.sizes]);
+        this.positionGutters();
+    }
+    /**
+     * Destroy the split instance: removes gutters and resets layout state.
+     * @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();
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region INTERNAL HELPERS
+    /**
+     * Returns the panes of the split.
+     * @returns {HTMLElement[]} The panes of the split.
+     */
+    getPanes() {
+        // Only the direct children slot="pane"
+        return Array.from(this.el.querySelectorAll(':scope > [slot="pane"]'));
+    }
+    /**
+     * Returns the own gutters of the split.
+     * @returns {HTMLElement[]} The own gutters of the split.
+     */
+    getOwnGutters() {
+        // Only the direct gutters of THIS instance
+        return Array.from(this.el.querySelectorAll(':scope > .nv-split-gutter[data-auto="true"]'));
+    }
+    /**
+     * Removes the own gutters of the split.
+     */
+    removeOwnGutters() {
+        this.getOwnGutters().forEach(g => g.remove());
+    }
+    /**
+     * Ensures the gutters of the split.
+     */
+    ensureGutters() {
+        const panes = this.getPanes();
+        // 1) Clean ONLY the old direct gutters of THIS instance
+        this.removeOwnGutters();
+        if (panes.length <= 1)
+            return;
+        // 2) Add the gutters (directs) between the panes
+        panes.forEach((pane, i) => {
+            if (i >= panes.length - 1)
+                return;
+            const g = document.createElement('div');
+            g.className = 'nv-split-gutter';
+            g.setAttribute('data-auto', 'true');
+            if (this.direction === 'horizontal') {
+                g.style.width = `${this.gutterSize}px`;
+                g.style.cursor = 'col-resize';
+            }
+            else {
+                g.style.height = `${this.gutterSize}px`;
+                g.style.cursor = 'row-resize';
+            }
+            // Customizable internal slot
+            const slotEl = document.createElement('slot');
+            slotEl.name = 'gutter';
+            g.appendChild(slotEl);
+            // Listener drag (index = gutter between pane i and i+1)
+            g.addEventListener('mousedown', (ev) => this.startDragging(ev, i));
+            // Insert just after the pane
+            pane.insertAdjacentElement('afterend', g);
+        });
+        this.positionGutters();
+    }
+    /**
+     * Applies the sizes to the panes.
+     */
+    applySizes() {
+        const panes = this.getPanes();
+        const n = panes.length;
+        if (n === 0)
+            return;
+        // Default values if inconsistent
+        if (!this.sizes || this.sizes.length !== n) {
+            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)
+            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.display = 'flex';
+            pane.style.flexDirection = 'column';
+        });
+        this.positionGutters();
+    }
+    /**
+     * Attaches the document listeners.
+     */
+    attachDocumentListeners() {
+        document.addEventListener('mousemove', this.onDocMove);
+        document.addEventListener('mouseup', this.onDocUp);
+    }
+    /**
+     * Detaches the document listeners.
+     */
+    detachDocumentListeners() {
+        document.removeEventListener('mousemove', this.onDocMove);
+        document.removeEventListener('mouseup', this.onDocUp);
+    }
+    /**
+     * 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)
+            return;
+        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;
+            cumPct += sizePct;
+            const g = gutters[i];
+            g.style.position = 'absolute';
+            if (horizontal) {
+                g.style.left = `${cumPct}%`;
+                g.style.top = '0';
+                g.style.bottom = '0';
+                g.style.height = '100%';
+            }
+            else {
+                g.style.top = `${cumPct}%`;
+                g.style.left = '0';
+                g.style.right = '0';
+                g.style.width = '100%';
+            }
+        }
+    }
+    /**
+     * Starts the dragging process.
+     * @param {MouseEvent} ev - The mouse event.
+     * @param {number} index - The index of the gutter.
+     */
+    startDragging(ev, index) {
+        this.isDragging = true;
+        this.dragIndex = index;
+        this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;
+        this.startSizes = [...this.sizes];
+        this.attachDocumentListeners();
+    }
+    /**
+     * Handles the mouse movement during dragging.
+     * @param {MouseEvent} ev - The mouse event.
+     */
+    handleMouseMove(ev) {
+        var _a, _b, _c, _d;
+        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 deltaPct = (deltaPx / totalPx) * 100;
+        const i = this.dragIndex;
+        const j = i + 1;
+        let left = this.startSizes[i] + deltaPct;
+        let right = this.startSizes[j] - deltaPct;
+        // 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;
+        }
+        const next = [...this.startSizes];
+        next[i] = left;
+        next[j] = right;
+        this.sizes = next;
+        this.applySizes();
+        this.sizesChanged.emit([...this.sizes]);
+        this.positionGutters();
+    }
+    /**
+     * Stops the dragging process.
+     */
+    stopDragging() {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        this.dragIndex = -1;
+        this.detachDocumentListeners();
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (hAsync(Host, { key: 'e3b158ff1b4f665862079d245c219102d8b8ccda', "data-dragging": this.isDragging.toString() }, hAsync("slot", { key: 'baa8105a05bf8446d7a31a23cd5276edb320ea2f', name: "pane" }), hAsync("slot", { key: '44afe4f4a220aff45f802218f2618e9305141a9f', name: "gutter" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "sizes": ["onSizesChanged"],
+        "direction": ["onDirectionChanged"]
+    }; }
+    static get style() { return NvSplitStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-split",
+        "$members$": {
+            "direction": [513],
+            "sizes": [1040],
+            "minSizes": [16],
+            "gutterSize": [514, "gutter-size"],
+            "isDragging": [32],
+            "setSizes": [64],
+            "getSizes": [64],
+            "collapse": [64],
+            "destroy": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["direction", "direction"], ["gutterSize", "gutter-size"]]
+    }; }
+}
+
 const nvStackCss = "nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";
 var NvStackStyle0 = nvStackCss;
 
@@ -26967,7 +27314,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
+        return (hAsync(Host, { key: '5922efd8652a14d73e812e85dd6770101e22fe46', 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') }, hAsync("slot", { key: '71daf4ee34bd57d785203f98799b6ea7c66ffa3b' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -27221,7 +27568,7 @@ class NvTable {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, hAsync("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
+        return (hAsync(Host, { key: '16b564cc29e8987d8b3fda3a84c0b19882a733bd' }, hAsync("slot", { key: '1305cbc6d29caa60df55bfa01a39a3417a27ec01' })));
     }
     get host() { return getElement(this); }
     static get style() { return NvTableStyle0; }
@@ -27299,8 +27646,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '65222149af4edb9f8fd2da7efe9a01e15dec4722', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '7edd5587281b5610269f1ac09826ce379abfae24', class: "input-container" }, hAsync("input", { key: '30d3db3cbdc263259a5ba1bf8e637225c4db3b4a', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'a8a6d3c2774560b7d43cda75882d90cc564f4c54', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'fe980a07df4901081fda42df758236da0b8a11d0', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '723cec5914c6c0bed7e14e61e2f64e83c8e8b7b8', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'f811065ed06f0816d8f0f1f65d4c659cbde3f683', class: "description" }, hAsync("slot", { key: '541946e3f33a315bf667999c30a44fd93fc5f07f', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: '0f440b59ac0c32d9abe9577668d7045081819b49', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '4289435e34eb31a8e59e00cefcba2e17e98bd03a', class: "input-container" }, hAsync("input", { key: '1b7d05f77fd32cece9eed2e6cf79c7e2e707f64c', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: '6d78d7e80eb790bbead21bba6108329f9ded3746', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '524a2c2542a45945bddb688c5dff6c9426d58570', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '59eda4b826602062620e7167acf3c8de0f77ebef', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '6e8412879ed60fc6806464432348bd52483e3567', class: "description" }, hAsync("slot", { key: '85a876130569a5a4051e271eaf1cf49593a014a6', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -27376,7 +27723,7 @@ class NvTogglebutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c4b698b1fb80f0dcca5d7a77bc20d22db1cbf538', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, hAsync("slot", { key: '605385f07f32b989685983cfd1a082525741fba4' })));
+        return (hAsync(Host, { key: 'b9e37fc1cb34272bca476c7b61db173ab2a9d238', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, hAsync("slot", { key: 'cf9cf3445fd93873def1f9fa9cbec46c35600025' })));
     }
     static get style() { return NvTogglebuttonStyle0; }
     static get cmpMeta() { return {
@@ -27550,7 +27897,7 @@ class NvTogglebuttongroup {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'ab91ff1817e3388508ed1da7a9ed57a79cf8c4bc' }, hAsync("slot", { key: '4a3280db78c1f0cd120a0cb32d95eabaf69995a6' })));
+        return (hAsync(Host, { key: '7aad0160ae8e093765ba42649293e27d7b93ab75' }, hAsync("slot", { key: '39364122a5e65b1a454bd782a5daacc7edfee8b0' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27621,7 +27968,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'c2fdcd47be909554e31a3a7d77cd94dcb07c0d6e' }, hAsync("slot", { key: '2305f6b7175d0ba84819351f60f2a4d76d117df9' }), hAsync("nv-popover", { key: 'e388730b5858671d08981c6bbf72588a5084edbf', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: '73f548a1c822f7c6d5a97bb4ef8da0d335cf049e', slot: "content" }, this.message), hAsync("slot", { key: 'abb7a2dfa6a327122732802a867c5d4057fd1616', name: "content" }))));
+        return (hAsync(Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, hAsync("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), hAsync("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), hAsync("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -27682,6 +28029,7 @@ registerComponents([
   NvNotificationContainer,
   NvPopover,
   NvRow,
+  NvSplit,
   NvStack,
   NvTable,
   NvToggle,