@nova-design-system/nova-react 3.14.0 → 3.16.0

package/dist/cjs/{nv-stack.entry-CifEjR2g.js → nv-stack.entry-C3DF9jJZ.js}

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-CKAZvszR.js');
+var index = require('./index-7K7BV1CP.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
+require('react-dom');
 
 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%}";
 const NvStackStyle0 = nvStackCss;
@@ -22,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '66123f22ad4a6ebefe8663c795274eb900d2c178', class: clsx297c1ffe.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: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
+        return (index.h(index.Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', class: clsx297c1ffe.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' })));
     }
 };
 NvStack.style = NvStackStyle0;

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

@@ -0,0 +1,245 @@
+'use strict';
+
+var index = require('./index-7K7BV1CP.js');
+require('react');
+require('react-dom');
+
+/**
+ * Table utility functions and constants for nv-table component
+ *
+ * This module contains pure utility functions for table column resizing logic,
+ * pointer event handling calculations, and related helper functions.
+ */
+/**
+ * Constants for table column resizing behavior
+ */
+const TABLE_CONSTANTS = Object.freeze({
+    /** Handle width for fine pointers (mouse) in pixels */
+    HANDLE_W: 12,
+    /** Handle width for coarse pointers (touch) in pixels */
+    HANDLE_W_TOUCH: 24,
+    /** Minimum column width in pixels */
+    MIN_W: 40,
+});
+/**
+ * Determines the appropriate handle width based on the current pointer type
+ * @returns {number} Handle width in pixels (10px for fine pointers, 24px for coarse/touch)
+ */
+function getHandleWidthForCurrentPointer() {
+    // Match the CSS media query: wider handle on coarse pointers (touch)
+    return matchMedia('(pointer: coarse)').matches
+        ? TABLE_CONSTANTS.HANDLE_W_TOUCH
+        : TABLE_CONSTANTS.HANDLE_W;
+}
+/**
+ * Calculates the pointer's horizontal offset within a table cell
+ * @param {PointerEvent} event - The pointer event
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @returns {number} The horizontal offset from the left edge of the cell
+ */
+function getPointerOffsetInCell(event, cell) {
+    const rect = cell.getBoundingClientRect();
+    return event.clientX - rect.left;
+}
+/**
+ * Determines if the pointer is within the resize handle area of a table cell
+ * @param {number} offsetX - Horizontal offset within the cell
+ * @param {number} cellWidth - Total width of the cell
+ * @param {number} handleWidth - Width of the resize handle area
+ * @returns {boolean} True if the pointer is in the resize handle area
+ */
+function isInResizeHandle(offsetX, cellWidth, handleWidth) {
+    return offsetX >= cellWidth - handleWidth;
+}
+/**
+ * Calculates the new column width based on resize delta and constraints
+ * @param {number} startWidth - Original width of the column
+ * @param {number} delta - Change in pixels from the start position
+ * @param {number} minWidth - Minimum allowed width for the column
+ * @returns {number} The calculated new width, constrained by minimum
+ */
+function calculateNewWidth(startWidth, delta, minWidth = TABLE_CONSTANTS.MIN_W) {
+    return Math.max(minWidth, startWidth + delta);
+}
+/**
+ * Validates that a table cell element is suitable for resizing
+ * @param {HTMLElement | null} element - The element to check
+ * @returns {element is HTMLTableCellElement} Type guard for table cell elements
+ */
+function isValidTableCell(element) {
+    return (element === null || element === void 0 ? void 0 : element.tagName) === 'TH' || (element === null || element === void 0 ? void 0 : element.tagName) === 'TD';
+}
+/**
+ * Finds the closest table cell element from an event target
+ * @param {EventTarget | null} target - The event target
+ * @returns {HTMLTableCellElement | null} The closest table cell or null
+ */
+function getClosestTableCell(target) {
+    if (!(target instanceof HTMLElement))
+        return null;
+    const cell = target.closest('th, td');
+    return isValidTableCell(cell) ? cell : null;
+}
+/**
+ * Sets up pointer capture for consistent drag behavior across browsers
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @param {number} pointerId - The pointer ID from the pointer event
+ * @returns {boolean} True if capture was successfully set
+ */
+function setPointerCapture(cell, pointerId) {
+    var _a;
+    try {
+        (_a = cell.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        return true;
+    }
+    catch (_b) {
+        return false;
+    }
+}
+/**
+ * Releases pointer capture
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @param {number} pointerId - The pointer ID from the pointer event
+ * @returns {boolean} True if release was successful
+ */
+function releasePointerCapture(cell, pointerId) {
+    var _a;
+    try {
+        (_a = cell.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        return true;
+    }
+    catch (_b) {
+        return false;
+    }
+}
+/**
+ * Prevents text selection during drag operations
+ * @param {boolean} prevent - Whether to prevent selection
+ */
+function setUserSelectPrevention(prevent) {
+    document.body.style.userSelect = prevent ? 'none' : '';
+}
+/**
+ * Gets the current width of a table cell element
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @returns {number} The current width in pixels
+ */
+function getCellWidth(cell) {
+    return cell.offsetWidth;
+}
+/**
+ * Applies a width to a table cell element
+ * @param {HTMLTableCellElement} cell - The table cell element
+ * @param {number} width - The width to apply in pixels
+ */
+function setCellWidth(cell, width) {
+    cell.style.width = `${width}px`;
+}
+/**
+ * Calculates the delta (change) in horizontal position between two pointer events
+ * @param {number} currentX - Current clientX position
+ * @param {number} startX - Starting clientX position
+ * @returns {number} The horizontal delta
+ */
+function calculatePointerDelta(currentX, startX) {
+    return currentX - startX;
+}
+/**
+ * Creates a new resize state object
+ * @param {HTMLTableCellElement} cell - The cell being resized
+ * @param {PointerEvent} event - The initiating pointer event
+ * @returns {ResizeState} A new resize state object
+ */
+function createResizeState(cell, event) {
+    return {
+        resizingCell: cell,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startWidth: getCellWidth(cell),
+    };
+}
+/**
+ * Validates that a resize state is active and matches the given pointer event
+ * @param {ResizeState | null} state - The current resize state
+ * @param {PointerEvent} event - The pointer event to validate against
+ * @returns {boolean} True if the state is valid for this event
+ */
+function isValidResizeState(state, event) {
+    return state !== null && state.pointerId === event.pointerId;
+}
+/**
+ * Updates the width of a cell during a resize operation
+ * @param {ResizeState} state - The current resize state
+ * @param {PointerEvent} event - The current pointer event
+ * @param {number} minWidth - Minimum width constraint
+ */
+function updateCellWidthFromResize(state, event, minWidth = TABLE_CONSTANTS.MIN_W) {
+    const delta = calculatePointerDelta(event.clientX, state.startX);
+    const newWidth = calculateNewWidth(state.startWidth, delta, minWidth);
+    setCellWidth(state.resizingCell, newWidth);
+}
+
+const nvTableCss = "nv-table table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;background:var(--color-level-00-background)}nv-table table thead{background:var(--components-datagrid-header-background)}nv-table table tbody tr:hover td{background:var(--components-datagrid-body-background-hover)}nv-table table tbody tr[data-selected]{background:var(--components-datagrid-body-background-active)}nv-table table td{height:var(--spacing-16);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x) var(--spacing-2) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);background:var(--components-datagrid-body-background-default);border-bottom:1px solid var(--components-datagrid-body-border)}nv-table table th{position:relative;text-align:left;padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-right) var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);padding-right:calc(var(--datagrid-cell-header-padding-right) + 12px);color:var(--color-content-low-text);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-high-emphasis);line-height:var(--line-height-base);min-width:40px;border-bottom:1px solid var(--components-datagrid-header-border);background:var(--components-datagrid-header-background)}nv-table table th::after{content:\"\";position:absolute;top:0;right:0;width:12px;height:50%;transform:translateY(50%);cursor:col-resize;background:linear-gradient(90deg, transparent 0%, transparent calc(50% - 1px), var(--components-datagrid-header-border), calc(50% - 1px), var(--components-datagrid-header-border) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);opacity:0;transition:opacity 0.05s ease-in-out}nv-table table th[data-grow]{width:unset}nv-table table th:hover::after{opacity:1}nv-table table th[data-no-resize]::after{display:none}nv-table [data-sticky-left]{position:sticky;z-index:1;background:var(--color-level-00-background);left:0;top:0}nv-table [data-sticky-right]{position:sticky;z-index:1;background:var(--color-level-00-background);right:0;top:0}nv-table [data-sticky-top] th{position:sticky;z-index:1;background:var(--color-level-00-background);top:0}";
+const NvTableStyle0 = nvTableCss;
+
+const NvTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.resizeState = null;
+    }
+    /****************************************************************************/
+    //#region PROPERTIES
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LISTENERS
+    onPointerDown(ev) {
+        const th = getClosestTableCell(ev.target);
+        if (!th)
+            return;
+        // Skip resize if the cell has data-no-resize attribute
+        if (th.hasAttribute('data-no-resize'))
+            return;
+        const offsetX = getPointerOffsetInCell(ev, th);
+        const handleWidth = getHandleWidthForCurrentPointer();
+        const cellWidth = getCellWidth(th);
+        // Start only if we're in the resize handle area
+        if (!isInResizeHandle(offsetX, cellWidth, handleWidth))
+            return;
+        this.resizeState = createResizeState(th, ev);
+        // Capture so move/up still fire even if the finger leaves the th
+        setPointerCapture(th, ev.pointerId);
+        // Prevent scrolling/selection during drag
+        setUserSelectPrevention(true);
+    }
+    onPointerMove(ev) {
+        if (!isValidResizeState(this.resizeState, ev))
+            return;
+        updateCellWidthFromResize(this.resizeState, ev, TABLE_CONSTANTS.MIN_W);
+    }
+    onPointerUp(ev) {
+        if (!isValidResizeState(this.resizeState, ev))
+            return;
+        releasePointerCapture(this.resizeState.resizingCell, this.resizeState.pointerId);
+        this.resizeState = null;
+        setUserSelectPrevention(false);
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region EVENTS
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, index.h("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
+    }
+    get host() { return index.getElement(this); }
+};
+NvTable.style = NvTableStyle0;
+
+exports.nv_table = NvTable;

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

@@ -0,0 +1,80 @@
+'use strict';
+
+var index = require('./index-7K7BV1CP.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+require('react-dom');
+
+const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-toggle-border-default);background:var(--components-toggle-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default-checked);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
+const NvToggleStyle0 = nvToggleCss;
+
+const NvToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the radio button’s input element and the for attribute of
+         * the associated label. If no ID is provided, a random one will be
+         * automatically generated to ensure unique identification, facilitating
+         * proper label association and accessibility.
+         */
+        this.inputId = v4A79185f4.v4();
+        /**
+         * Hides the label visually while still keeping it available for screen
+         * readers.
+         */
+        this.hideLabel = false;
+        /** Indicates whether the toggle is checked or not. */
+        this.checked = false;
+        /** Disables the toggle, preventing user interaction. */
+        this.disabled = false;
+        /**
+         * Sets the toggle to read-only, preventing user changes but still allowing
+         * focus and selection of text.
+         */
+        this.readonly = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    /**
+     * Listens for the change event on the toggle input element and updates the checked state.
+     * the checked state of the host elements.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.type === 'checkbox' && target.id === this.inputId) {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '65222149af4edb9f8fd2da7efe9a01e15dec4722', class: clsx297c1ffe.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: clsx297c1ffe.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))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvToggle.style = NvToggleStyle0;
+
+exports.nv_toggle = NvToggle;

package/dist/cjs/{nv-togglebutton.entry-X4eLeP-C.js → nv-togglebutton.entry-DE7CKmeN.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-CKAZvszR.js');
+var index = require('./index-7K7BV1CP.js');
 require('react');
+require('react-dom');
 
 const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size);padding-top:calc(var(--togglegroup-xs-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-xs-button-radius));border-width:0}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size);padding-top:calc(var(--togglegroup-sm-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-sm-button-radius));border-width:0}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size);padding-top:calc(var(--togglegroup-md-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-md-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-md-button-radius));border-width:0}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size);padding-top:calc(var(--togglegroup-lg-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-lg-button-radius));border-width:0}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
 const NvTogglebuttonStyle0 = nvTogglebuttonCss;
@@ -47,7 +48,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'cb15a84c7e7cc27a80773613f31b98168eee8475', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '32d6b9394088d88c4671fb7809ad6aa85b240fff' })));
+        return (index.h(index.Host, { key: 'c4b698b1fb80f0dcca5d7a77bc20d22db1cbf538', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '605385f07f32b989685983cfd1a082525741fba4' })));
     }
 };
 NvTogglebutton.style = NvTogglebuttonStyle0;

package/dist/cjs/{nv-togglebuttongroup.entry-BYO58vql.js → nv-togglebuttongroup.entry-BJPjdmHD.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-CKAZvszR.js');
+var index = require('./index-7K7BV1CP.js');
 require('react');
+require('react-dom');
 
 const nvTogglebuttongroupCss = "nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius)}";
 const NvTogglebuttongroupStyle0 = nvTogglebuttongroupCss;
@@ -155,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ce185699fabd71bb5c22e5a0d73df88067acb9d6' }, index.h("slot", { key: 'a1e375fb1e8660f3fdb75d96f18db20735a3a64d' })));
+        return (index.h(index.Host, { key: 'ab91ff1817e3388508ed1da7a9ed57a79cf8c4bc' }, index.h("slot", { key: '4a3280db78c1f0cd120a0cb32d95eabaf69995a6' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tooltip.entry-DaxjQSt1.js → nv-tooltip.entry-D9-Fga6C.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-CKAZvszR.js');
+var index = require('./index-7K7BV1CP.js');
 require('react');
+require('react-dom');
 
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 const NvTooltipStyle0 = nvTooltipCss;
@@ -45,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e0b68e5ade824e2b0f9c5e5cac140349412c919d' }, index.h("slot", { key: 'd61a58d034818fdba87b4ab17ce903bbb13a47ff' }), index.h("nv-popover", { key: '408df675045f95adf270025f83285b2e125873c5', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e4f860f09f5e5ef83b5e704c271781f41a643e59', slot: "content" }, this.message), index.h("slot", { key: '2e2e4dcae68651d734696e718c59389f712562df', name: "content" }))));
+        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" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/components/NvDatatable.js

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
+import { NvTable } from '../generated/components';
+const NvDatatable = ({ columns, rows, ...htmlProps }) => {
+    const tableColumns = useMemo(() => columns
+        .filter((col) => !col.hidden)
+        .map((col) => ({
+        accessorKey: col.field,
+        header: col.headerName || String(col.field),
+        size: col.width,
+        enableResizing: col.resizable ?? true,
+        cell: (context) => {
+            const value = context.getValue();
+            const row = context.row.original;
+            const rowIndex = context.row.index;
+            if (col.renderCell) {
+                return col.renderCell({
+                    value,
+                    row,
+                    field: col.field,
+                    rowIndex,
+                });
+            }
+            return value;
+        },
+    })), [columns]);
+    const table = useReactTable({
+        data: rows,
+        columns: tableColumns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return (React.createElement(NvTable, { ...htmlProps },
+        React.createElement("table", null,
+            React.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => (React.createElement("th", { key: header.id, "data-testid": `datatable-header-${header.id}`, style: {
+                    width: header.column.columnDef.size + 'px',
+                }, "data-no-resize": header.column.columnDef.enableResizing ? null : true }, header.isPlaceholder
+                ? null
+                : flexRender(header.column.columnDef.header, header.getContext())))))))),
+            React.createElement("tbody", null, table.getRowModel().rows.map((row) => (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${row.id}` }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.id}`, style: {
+                    padding: '8px',
+                    borderBottom: '1px solid #eee',
+                } }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
+};
+NvDatatable.displayName = 'NvDatatable';
+export { NvDatatable };

package/dist/generated/components.js

@@ -36,11 +36,11 @@ import { NvLoader as NvLoaderElement, defineCustomElement as defineNvLoader } fr
 import { NvMenu as NvMenuElement, defineCustomElement as defineNvMenu } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement, defineCustomElement as defineNvMenuitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
 import { NvNotification as NvNotificationElement, defineCustomElement as defineNvNotification } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
+import { NvNotificationcontainer as NvNotificationcontainerElement, defineCustomElement as defineNvNotificationcontainer } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement, defineCustomElement as defineNvPopover } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement, defineCustomElement as defineNvStack } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
 import { NvTable as NvTableElement, defineCustomElement as defineNvTable } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
-import { NvTablecolumn as NvTablecolumnElement, defineCustomElement as defineNvTablecolumn } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablecolumn.js";
 import { NvToggle as NvToggleElement, defineCustomElement as defineNvToggle } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTogglebutton as NvTogglebuttonElement, defineCustomElement as defineNvTogglebutton } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
 import { NvTogglebuttongroup as NvTogglebuttongroupElement, defineCustomElement as defineNvTogglebuttongroup } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
@@ -51,7 +51,7 @@ export const NvAccordion = createComponent({
     tagName: 'nv-accordion',
     elementClass: NvAccordionElement,
     react: React,
-    events: { onOpenChanged: 'openChanged' },
+    events: { onOpenIndexesChanged: 'openIndexesChanged' },
     defineCustomElement: defineNvAccordion
 });
 export const NvAccordionItem = createComponent({
@@ -334,6 +334,13 @@ export const NvNotification = createComponent({
     events: { onHiddenChanged: 'hiddenChanged' },
     defineCustomElement: defineNvNotification
 });
+export const NvNotificationcontainer = createComponent({
+    tagName: 'nv-notificationcontainer',
+    elementClass: NvNotificationcontainerElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvNotificationcontainer
+});
 export const NvPopover = createComponent({
     tagName: 'nv-popover',
     elementClass: NvPopoverElement,
@@ -359,15 +366,8 @@ export const NvTable = createComponent({
     tagName: 'nv-table',
     elementClass: NvTableElement,
     react: React,
-    events: { onAction: 'action' },
-    defineCustomElement: defineNvTable
-});
-export const NvTablecolumn = createComponent({
-    tagName: 'nv-tablecolumn',
-    elementClass: NvTablecolumnElement,
-    react: React,
     events: {},
-    defineCustomElement: defineNvTablecolumn
+    defineCustomElement: defineNvTable
 });
 export const NvToggle = createComponent({
     tagName: 'nv-toggle',

package/dist/generated/components.server.js

@@ -658,11 +658,18 @@ export const NvNotification = createComponent({
         message: 'message',
         icon: 'icon',
         dismissible: 'dismissible',
-        hidden: 'hidden'
+        hidden: 'hidden',
+        initiallyHidden: 'initially-hidden'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+export const NvNotificationcontainer = createComponent({
+    tagName: 'nv-notificationcontainer',
+    properties: { position: 'position' },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvPopover = createComponent({
     tagName: 'nv-popover',
     properties: {
@@ -701,22 +708,7 @@ export const NvStack = createComponent({
 });
 export const NvTable = createComponent({
     tagName: 'nv-table',
-    properties: {
-        dataJson: 'data-json',
-        columnsConfigJson: 'columns-config-json',
-        fallbackValue: 'fallback-value',
-        noDataMessage: 'no-data-message',
-        noColumnsNoDataMessage: 'no-columns-no-data-message'
-    },
-    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
-    serializeShadowRoot
-});
-export const NvTablecolumn = createComponent({
-    tagName: 'nv-tablecolumn',
-    properties: {
-        name: 'name',
-        header: 'header'
-    },
+    properties: {},
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });

package/dist/index.js

@@ -1,3 +1,5 @@
 export * from './generated/components';
 export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+export { useNotifications, NotificationProvider, } from './providers/NotificationProvider';
+export * from './components/NvDatatable';