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

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

@@ -0,0 +1,339 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93d3b2f8.js');
+
+const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--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%}";
+const NvSplitStyle0 = nvSplitCss;
+
+const NvSplit = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sizesChanged = index.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 (index.h(index.Host, { key: 'e3b158ff1b4f665862079d245c219102d8b8ccda', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: 'baa8105a05bf8446d7a31a23cd5276edb320ea2f', name: "pane" }), index.h("slot", { key: '44afe4f4a220aff45f802218f2618e9305141a9f', name: "gutter" })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "sizes": ["onSizesChanged"],
+        "direction": ["onDirectionChanged"]
+    }; }
+};
+NvSplit.style = NvSplitStyle0;
+
+exports.nv_split = NvSplit;
+
+//# sourceMappingURL=nv-split.cjs.entry.js.map

package/dist/cjs/nv-split.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nv-split.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/nv-split/styles/nv-split.scss?tag=nv-split","src/components/nv-split/nv-split.tsx"],"sourcesContent":["@use './mixins' as *;\n@use './variables' as *;\n\nnv-split {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: relative;\n\n  &[direction='horizontal'] {\n    flex-direction: row;\n  }\n\n  &[direction='vertical'] {\n    flex-direction: column;\n  }\n\n  .nv-split-gutter {\n    @include split-gutter-base;\n  }\n\n  &[direction='horizontal'] > .nv-split-gutter {\n    @include split-gutter-horizontal;\n  }\n\n  &[direction='vertical'] > .nv-split-gutter {\n    @include split-gutter-vertical;\n  }\n\n  &[data-dragging='true'] > .nv-split-gutter::after {\n    background: $nv-split-line-active-color;\n  }\n\n  > [slot='pane'] {\n    flex: 1 1 auto;\n    overflow: hidden;\n    min-width: 0;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  > [slot='pane'] > nv-split {\n    flex: 1 1 auto;\n    width: 100%;\n    height: 100%;\n  }\n}\n","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()\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"],"version":3}

package/dist/cjs/nv-stack.cjs.entry.js

@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', class: clsx.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') }, index.h("slot", { key: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
+        return (index.h(index.Host, { key: '5922efd8652a14d73e812e85dd6770101e22fe46', class: clsx.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') }, index.h("slot", { key: '71daf4ee34bd57d785203f98799b6ea7c66ffa3b' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/nv-table.cjs.entry.js

@@ -236,7 +236,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, index.h("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
+        return (index.h(index.Host, { key: '16b564cc29e8987d8b3fda3a84c0b19882a733bd' }, index.h("slot", { key: '1305cbc6d29caa60df55bfa01a39a3417a27ec01' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/nv-toggle.cjs.entry.js

@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '65222149af4edb9f8fd2da7efe9a01e15dec4722', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '7edd5587281b5610269f1ac09826ce379abfae24', class: "input-container" }, index.h("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 })), index.h("div", { key: 'a8a6d3c2774560b7d43cda75882d90cc564f4c54', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fe980a07df4901081fda42df758236da0b8a11d0', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '723cec5914c6c0bed7e14e61e2f64e83c8e8b7b8', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f811065ed06f0816d8f0f1f65d4c659cbde3f683', class: "description" }, index.h("slot", { key: '541946e3f33a315bf667999c30a44fd93fc5f07f', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '0f440b59ac0c32d9abe9577668d7045081819b49', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4289435e34eb31a8e59e00cefcba2e17e98bd03a', class: "input-container" }, index.h("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 })), index.h("div", { key: '6d78d7e80eb790bbead21bba6108329f9ded3746', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '524a2c2542a45945bddb688c5dff6c9426d58570', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '59eda4b826602062620e7167acf3c8de0f77ebef', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e8412879ed60fc6806464432348bd52483e3567', class: "description" }, index.h("slot", { key: '85a876130569a5a4051e271eaf1cf49593a014a6', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-togglebutton.cjs.entry.js

@@ -48,7 +48,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c4b698b1fb80f0dcca5d7a77bc20d22db1cbf538', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '605385f07f32b989685983cfd1a082525741fba4' })));
+        return (index.h(index.Host, { key: 'b9e37fc1cb34272bca476c7b61db173ab2a9d238', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'cf9cf3445fd93873def1f9fa9cbec46c35600025' })));
     }
 };
 NvTogglebutton.style = NvTogglebuttonStyle0;

package/dist/cjs/nv-togglebuttongroup.cjs.entry.js

@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ab91ff1817e3388508ed1da7a9ed57a79cf8c4bc' }, index.h("slot", { key: '4a3280db78c1f0cd120a0cb32d95eabaf69995a6' })));
+        return (index.h(index.Host, { key: '7aad0160ae8e093765ba42649293e27d7b93ab75' }, index.h("slot", { key: '39364122a5e65b1a454bd782a5daacc7edfee8b0' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-tooltip.cjs.entry.js

@@ -46,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c2fdcd47be909554e31a3a7d77cd94dcb07c0d6e' }, index.h("slot", { key: '2305f6b7175d0ba84819351f60f2a4d76d117df9' }), index.h("nv-popover", { key: 'e388730b5858671d08981c6bbf72588a5084edbf', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '73f548a1c822f7c6d5a97bb4ef8da0d335cf049e', slot: "content" }, this.message), index.h("slot", { key: 'abb7a2dfa6a327122732802a867c5d4057fd1616', name: "content" }))));
+        return (index.h(index.Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, index.h("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), index.h("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), index.h("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -40,6 +40,7 @@
     "components/nv-notificationcontainer/nv-notificationcontainer.js",
     "components/nv-popover/nv-popover.js",
     "components/nv-row/nv-row.js",
+    "components/nv-split/nv-split.js",
     "components/nv-stack/nv-stack.js",
     "components/nv-table/nv-table.js",
     "components/nv-toggle/nv-toggle.js",

package/dist/collection/components/nv-button/nv-button.js

@@ -107,12 +107,6 @@ export class NvButton {
             this.el.click();
         }
     }
-    handleTouchStart(event) {
-        if (event.touches.length > 1)
-            return;
-        event.preventDefault();
-        this.el.click();
-    }
     //#endregion EVENTS
     /****************************************************************************/
     //#region WATCHERS
@@ -140,7 +134,7 @@ export class NvButton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '54c0b3351f4d8a180058a03e61a562882fb98498', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: '21315e4af4111bcf47c67e65a9a58a1d7121a43e', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: 'f37683ddaa2c11c5b7accfc99429c930f5a3dcf6', name: "leading-icon" }), h("slot", { key: 'd17ebe7505d9027c6c58f930a8ea9b097561cead' }), h("slot", { key: '2cd6c9756cc7540417041adf5830b734291b2ab5', name: "trailing-icon" })));
+        return (h(Host, { key: '42488f71ad33233c839cd70b3ea57aee50b143b3', role: "button", tabindex: "0", onClick: this.handleButtonClick }, this.loading && (h("nv-loader", { key: 'a30c71eebb8f0476bcca5acbc8e7ac7f6377740c', size: this.size === ButtonSize.Large ? 'sm' : 'xs' })), h("slot", { key: '4bbcee81ef7236ae35471c649971c122e4b468f3', name: "leading-icon" }), h("slot", { key: '82203f6aed911e61aef2438bba3b3e664ffb9f76' }), h("slot", { key: 'c97a5ce78c15556b8c1a91a4d06eb6bc9a9cd255', name: "trailing-icon" })));
     }
     static get is() { return "nv-button"; }
     static get formAssociated() { return true; }
@@ -372,12 +366,6 @@ export class NvButton {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "touchstart",
-                "method": "handleTouchStart",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }

package/dist/collection/components/nv-button/nv-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn't interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  @Listen('touchstart', { passive: false })\n  handleTouchStart(event: TouchEvent) {\n    if (event.touches.length > 1) return;\n    event.preventDefault();\n    this.el.click();\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-button.js","sourceRoot":"","sources":["../../../src/components/nv-button/nv-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Listen,\n  Host,\n  h,\n  Prop,\n  AttachInternals,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Content of the button.\n * @slot leading-icon - Icon before the label.\n * @slot trailing-icon - Icon after the label.\n */\n@Component({\n  tag: 'nv-button',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'styles/nv-button.scss',\n})\nexport class NvButton {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvButtonElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Determines how large or small the button appears, allowing for\n   * customization of the button's dimensions to fit different design\n   * specifications and user needs.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${ButtonSize}` = 'md';\n\n  /**\n   * Adjusts the button's emphasis to make it more or less visually prominent\n   * to users. Use this to draw attention to important actions or reduce focus\n   * on less critical ones\n   */\n  @Prop({ reflect: true })\n  readonly emphasis: `${ButtonEmphasis}` = 'high';\n\n  /**\n   * Use this prop to highlight the button when it represents the current page\n   * or active selection. This helps users understand their navigation context.\n   */\n  @Prop({ reflect: true })\n  readonly active: boolean = false;\n\n  /**\n   * Applies styling that visually indicates the button represents a dangerous\n   * action.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Set this to true to show a spinner on the button, letting users know that\n   * their action is being processed. It helps improve user experience by\n   * indicating ongoing activities.\n   */\n  @Prop({ reflect: true, mutable: true })\n  loading: boolean = false;\n\n  /**\n   * Disables the button, preventing user interaction.\n   */\n  @Prop({ reflect: true, mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Allows the button to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  /**\n   * Sets the button type to control its function in forms. Use 'submit' to send\n   * form data, 'reset' to clear the form, or 'button' for a standard button\n   * that doesn't interact with form submission by default.\n   */\n  @Prop({ reflect: true })\n  readonly type: `${ButtonType}` = 'button';\n\n  /**\n   * Sets the form associated with the button in case the (submit) button is not a child of a form.\n   * Matches the native HTML button 'form' attribute behavior.\n   */\n  @Prop({ reflect: true })\n  readonly form: string;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles button click events, managing form actions and disabled states.\n   * Prevents default behavior when button is disabled or loading, and\n   * processes form submissions/resets when appropriate.\n   * @param {Event} event - The click event.\n   */\n  private handleButtonClick = (event: Event): void => {\n    if (this.loading || this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    if (\n      this.type !== ButtonType.Button &&\n      (this.form || this.internals?.form)\n    ) {\n      this.processFormAction();\n    } else if (this.form && this.type === ButtonType.Button) {\n      console.warn(\n        'Button has a form id but is not of type submit or reset so no form action will be processed.',\n        `Button:`,\n        this.el,\n      );\n    }\n  };\n\n  /**\n   * Processes form-related actions by finding the associated form element\n   * and triggering the appropriate action (submit/reset) based on button type.\n   * Falls back to ElementInternals form if no explicit form ID is provided.\n   */\n  private processFormAction = (): void => {\n    const formElement = this.form\n      ? (document.getElementById(this.form) as HTMLFormElement)\n      : this.internals?.form;\n\n    if (!formElement) {\n      console.warn(\n        'No form element found.',\n        `Form ID: ${this.form || 'Not provided'}`,\n        `Internals form:`,\n        this.internals?.form,\n      );\n      return;\n    }\n\n    switch (this.type) {\n      case ButtonType.Submit:\n        formElement.requestSubmit();\n        break;\n      case ButtonType.Reset:\n        formElement.reset();\n        break;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  @Listen('keydown', { passive: false })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.el.click();\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('loading')\n  handleLoadingChange(loading: boolean) {\n    this.loading = loading;\n    this.disabled = loading;\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(disabled: boolean) {\n    if (this.loading) {\n      this.disabled = this.loading;\n    } else {\n      this.disabled = disabled;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.loading) {\n      this.disabled = this.loading;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\" onClick={this.handleButtonClick}>\n        {this.loading && (\n          <nv-loader\n            size={this.size === ButtonSize.Large ? 'sm' : 'xs'}\n          ></nv-loader>\n        )}\n\n        <slot name=\"leading-icon\"></slot>\n        <slot></slot>\n        <slot name=\"trailing-icon\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-split/nv-split.docs.js

@@ -0,0 +1,41 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvSplitDocs = {
+    component: 'nv-split',
+    subcomponents: ['nv-alert'],
+    badge: 'beta',
+    stories: [
+        {
+            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-500" }, "Left pane"), h("div", { slot: "pane", class: "bg-orange-500" }, "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"))),
+        },
+        {
+            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"))),
+        },
+        {
+            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-500" }, "Top"), h("div", { slot: "pane", class: "bg-orange-500" }, h("nv-split", { direction: "horizontal", sizes: [20, 80] }, h("div", { slot: "pane", class: "bg-red-500" }, "Left"), h("div", { slot: "pane", class: "bg-yellow-500" }, "center"), h("div", { slot: "pane", class: "bg-green-500" }, "Right")))))),
+        },
+        {
+            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")))))))),
+        },
+    ],
+};
+export default NvSplitDocs;
+//# sourceMappingURL=nv-split.docs.js.map

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

@@ -0,0 +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-500\">\n            Left pane\n          </div>\n          <div slot=\"pane\" class=\"bg-orange-500\">\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-500\">\n              Top\n            </div>\n            <div slot=\"pane\" class=\"bg-orange-500\">\n              <nv-split direction=\"horizontal\" sizes={[20, 80]}>\n                <div slot=\"pane\" class=\"bg-red-500\">\n                  Left\n                </div>\n                <div slot=\"pane\" class=\"bg-yellow-500\">\n                  center\n                </div>\n                <div slot=\"pane\" class=\"bg-green-500\">\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"]}