@nova-design-system/nova-react 3.25.0 → 3.26.0

package/dist/cjs/{nv-split.entry-BYIsE2wp.js → nv-split.entry-DdtzktvN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUlunl9a.js');
+var index = require('./index-BeFrXZol.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -326,7 +326,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '5419c070ac8e17c640987c5016c6cbd18cb12266', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '4e9c7080adbd6e9efbf5807a517ff7002d540567', name: "pane" }), index.h("slot", { key: '910e3ffca9f3f12849f6d18ba8407c45153b7769', name: "gutter" })));
+        return (index.h(index.Host, { key: 'ab2b75b963d3cee109e90fe22e0dfe356a384706', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: 'a7a8258a976029f91ffbce3fa1f90f7ed35409ef', name: "pane" }), index.h("slot", { key: '9af34cb299ff061bec6ba7dfe6e969e093aeb3bc', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-stack.entry-DgE5ASGH.js → nv-stack.entry-BMLt30Nt.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUlunl9a.js');
+var index = require('./index-BeFrXZol.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 require('@stencil/react-output-target/runtime');
 require('react');
@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4aefa1b0d60c640edb266797c59e4311af87bd09', class: clsxChV9xqsO.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: '0521c6172ffb133a6e9f5ca216e13970b83e7de5' })));
+        return (index.h(index.Host, { key: '1fe102ad734149231a7058af441e5ee77ef97ca3', class: clsxChV9xqsO.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: 'f7ed597dabd90182887096441ff1258812dfe9fc' })));
     }
 };
 NvStack.style = nvStackCss();

package/dist/cjs/{nv-table.entry-DHXBu2n1.js → nv-table.entry-RTiqKRKM.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUlunl9a.js');
+var index = require('./index-BeFrXZol.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -116,6 +116,8 @@ function releasePointerCapture(cell, pointerId) {
  * @param {boolean} prevent - Whether to prevent selection
  */
 function setUserSelectPrevention(prevent) {
+    if (!document)
+        return; // SSR & node env fallback safety
     document.body.style.userSelect = prevent ? 'none' : '';
 }
 /**
@@ -234,7 +236,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c6bb094eb2c2300af460f9acd91a8a5121958ded' }, index.h("slot", { key: 'de523656c119a6338558c48cf46ea25df9c446fd' })));
+        return (index.h(index.Host, { key: '0d5518a54b41c67bdd7c73d5147fd954fb53d388' }, index.h("slot", { key: '8ab65d5dd1ce751fd357b275b84db042b1d9ce2e' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{nv-tableheader.entry-BijgOxcO.js → nv-tableheader.entry-Ci4qo8eY.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUlunl9a.js');
+var index = require('./index-BeFrXZol.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -62,7 +62,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'f704401884c7620a37c932f1aba53c5587e3c0c3', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: 'e4fce0b4226dde922d621abf7fbf76efa6b0ceeb' }), this.sortable && (index.h("span", { key: '25cf7526f27eb5e4621434bdadcf169ef60811ab', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '39745ade1343e6d1e339b4d451abc3a69d644913', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: '95447cd8ccde74d09226bcdbf645eed309be0fa8', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '4e26aa21f080cf23ce42fb72d6777463bd079991' }), this.sortable && (index.h("span", { key: '666254c197e97226d2f1c6830d1216b9457c4acc', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '11b2de5c4c270740857094ec8a39f1d392d7246a', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

package/dist/cjs/nv-toggle.entry-s8B7-8P7.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var index = require('./index-BeFrXZol.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvToggleCss = () => `@charset "UTF-8";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)}@media print{nv-toggle .input-container input[type=checkbox]::after{content:"●";top:calc(50% - 3.5px);width:auto;height:auto;background:none;color:var(--components-toggle-border-default);font-size:calc(var(--form-toggle-switch-dot-default) * 3);line-height:1}nv-toggle .input-container input[type=checkbox]:checked{background:transparent;border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:"●";top:calc(50% - 3.5px);width:auto;height:auto;left:75%;background:none;color:var(--components-toggle-border-default-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 NvToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
+        /****************************************************************************/
+        //#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 = v4BdYh22OP.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: '38dd2a460c82599e2c2bfd6b039eafff0dc6fc67', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4d6bf742f548cc5f92ae84497f12569d9680dcef', class: "input-container" }, index.h("input", { key: '97f54363c17cde48ec226680ee58da012e590b69', 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: 'e4576a0884f02731a3e6d2d20537cfabf411a8fe', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '4744036b0d1e73f350bbc4b6f6e7664bb9361d1e', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '44a2aeb86c840246473bc47e0ba01269af77ef06', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e5c3d1721c9db3cffd019c9274294c40793daf0', class: "description" }, index.h("slot", { key: '87c3d35c78ded085cd1ddb5b2874dfae7bd99842', name: "description" }, this.description))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": [{
+                "onCheckedChanged": 0
+            }]
+    }; }
+};
+NvToggle.style = nvToggleCss();
+
+exports.nv_toggle = NvToggle;

package/dist/cjs/{nv-togglebutton.entry-DAPETEmF.js → nv-togglebutton.entry-CyHgU4Wl.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUlunl9a.js');
+var index = require('./index-BeFrXZol.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -57,7 +57,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '91a6205cf5e2dae56a7826c9882bf2899d31321c', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'deea1593ddc2083786e7ff05ce6eafa8daebbee3' })));
+        return (index.h(index.Host, { key: '4af1293d9eb69a3a20d8f30c6b2876c6c29ddc03', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '783fad27c525553cd404c1ffed0ae1305d330de8' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-togglebuttongroup.entry-CzDI1XCr.js → nv-togglebuttongroup.entry-Bn_9DsdP.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DUlunl9a.js');
+var index = require('./index-BeFrXZol.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '98d0fd8820da9b6a5911330a0396b66a911352f2' }, index.h("slot", { key: 'aa202371d4d63d127d69a6a199451f3c97a65c86' })));
+        return (index.h(index.Host, { key: '1116872815229d09e1e286dd1f12a9787218e207' }, index.h("slot", { key: 'fa5363ec707f38830065718b2423dd8493acdd4e' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tooltip.entry-DPoUP9iL.js → nv-tooltip.entry-D6kxXLO-.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-DUlunl9a.js');
+var index = require('./index-BeFrXZol.js');
 require('@stencil/react-output-target/runtime');
 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 nvTooltipCss = () => `nv-tooltip{display:inline-block;vertical-align:top;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover{display:block;height:0;min-height:0;overflow:visible}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 NvTooltip = class {
     constructor(hostRef) {
@@ -47,7 +47,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '1c21198627166da4ff8ad5c0b9cd600587a46d70' }, index.h("nv-popover", { key: '3dfa32fa4789acba5184fefe39d3b82761ede7cb', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: '6e2c16e5e691c27a59938ffc6c5cb075251505f8', slot: "content" }, this.message), index.h("slot", { key: 'aba5c81f04ebf9a94538d384d39da76d9cb74cc2', name: "content" })), index.h("slot", { key: '03697bd2cba4d042c09ed628ee2276ee243004de', ref: el => (this.defaultSlot = el) })));
+        return (index.h(index.Host, { key: 'bda9ba58186add585457f8fdf4a8e1d6389da01a' }, index.h("nv-popover", { key: 'ac67ea44cebbc8abb9ff4e190668093bb7179222', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("p", { key: 'b677689d4a73462b7d16ff7d9f31bfd61e7f47eb', slot: "content" }, this.message), index.h("slot", { key: 'bd1540db065fdeceb89d09d69e1dbf7ad4de728d', name: "content" })), index.h("slot", { key: '648d3c3125b0528cd8e88675122d775ad7cc40d9', ref: el => (this.defaultSlot = el) })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/generated/components.server.js

@@ -1,4 +1,4 @@
-import * as clientComponents from '@nova-design-system/nova-react';
+import * as clientComponents from '@nova-design-system/nova-react/client';
 import { createComponent } from '@stencil/react-output-target/ssr';
 export const serializeShadowRoot = { default: "declarative-shadow-dom" };
 export const NvAccordion = createComponent({
@@ -656,6 +656,7 @@ export const NvFieldtextarea = createComponent({
         rows: 'rows',
         resize: 'resize',
         autosize: 'autosize',
+        maxAutoHeight: 'max-auto-height',
         autofocus: 'autofocus',
         fluid: 'fluid'
     },

package/dist/providers/NotificationProvider.js

@@ -91,14 +91,15 @@ export const NotificationProvider = ({ children, position = DEFAULT_POSITION, ma
     };
     return (React.createElement(NotificationContext.Provider, { value: contextValue },
         children,
-        createPortal(React.createElement(NvNotificationcontainer, { position: position, className: className, "data-testid": "notification-container" }, notifications.map((notification) => (React.createElement(NvNotification, { key: notification.id, uid: notification.id, heading: notification.heading, message: notification.message, dismissible: notification.dismissible, emphasis: notification.emphasis, feedback: notification.feedback, icon: notification.icon, onHiddenChanged: (event) => {
-                if (event.detail) {
-                    handleNotificationClose(notification.id);
-                }
-            }, initiallyHidden: true, ref: notification.ref }, (Boolean(notification.actionSlot) ||
-            Boolean(notification.actions.length)) && (React.createElement("div", { slot: "actions" },
-            notification.actions.map((action) => (React.createElement(NvButton, { key: action.label, emphasis: "low", size: "md", onClick: action.onClick }, action.label))),
-            notification.actionSlot)))))), document.body)));
+        typeof document !== 'undefined' &&
+            createPortal(React.createElement(NvNotificationcontainer, { position: position, className: className, "data-testid": "notification-container" }, notifications.map((notification) => (React.createElement(NvNotification, { key: notification.id, uid: notification.id, heading: notification.heading, message: notification.message, dismissible: notification.dismissible, emphasis: notification.emphasis, feedback: notification.feedback, icon: notification.icon, onHiddenChanged: (event) => {
+                    if (event.detail) {
+                        handleNotificationClose(notification.id);
+                    }
+                }, initiallyHidden: true, ref: notification.ref }, (Boolean(notification.actionSlot) ||
+                Boolean(notification.actions.length)) && (React.createElement("div", { slot: "actions" },
+                notification.actions.map((action) => (React.createElement(NvButton, { key: action.label, emphasis: "low", size: "md", onClick: action.onClick }, action.label))),
+                notification.actionSlot)))))), document.body)));
 };
 export const useNotifications = () => {
     const context = useContext(NotificationContext);

package/dist/types/components/NvDatatable/types.d.ts

@@ -11,6 +11,7 @@ export type NvDatatableProps<T> = {
     renderPagination?: (api: NvDatatableRenderPaginationAPI) => React.ReactNode;
     renderFiltering?: (api: NvDatatableRenderFilteringAPI) => React.ReactNode;
     stickyHeader?: boolean;
+    suppressHydrationWarning?: boolean;
 } & Pick<ComponentProps<'div'>, 'className' | 'style'>;
 export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row[K]> {
     field: K;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.25.0",
+  "version": "3.26.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",
@@ -19,12 +19,15 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/cjs/index.js",
-      "types": "./dist/types/index.d.ts",
-      "node": "./dist/generated/components.server.js"
+      "types": "./dist/types/index.d.ts"
     },
     "./server": {
       "import": "./dist/generated/components.server.js",
       "types": "./dist/types/generated/components.server.d.ts"
+    },
+    "./client": {
+      "import": "./dist/generated/components.js",
+      "types": "./dist/types/generated/components.d.ts"
     }
   },
   "publishConfig": {
@@ -40,7 +43,7 @@
     "tsc:watch": "tsc -p . --outDir ./dist --declarationDir ./dist/types --declaration true --watch",
     "storybook": "storybook dev -p 6006",
     "storybook.build": "storybook build -o ../../storybook-static/react",
-    "clean": "rimraf dist lib/generated lib/stories/generated lib/stories/components/*-migration.mdx lib/stories/components/*-guide.mdx",
+    "clean": "rimraf dist lib/generated lib/stories/generated && shx rm -rf lib/stories/components/*-migration.mdx lib/stories/components/*-guide.mdx",
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "dependencies": {

package/dist/cjs/nv-fieldradio.entry-ZFafNY5_.js

@@ -1,105 +0,0 @@
-'use strict';
-
-var index = require('./index-DUlunl9a.js');
-var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
-var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
-require('@stencil/react-output-target/runtime');
-require('react');
-require('react-dom');
-
-const nvFieldradioCss = () => `nv-fieldradio{--nv-fieldradio-border-default:var(--components-form-field-border-default);--nv-fieldradio-border-hover:var(--components-form-field-border-hover);--nv-fieldradio-border-focus:var(--components-form-field-border-default);--nv-fieldradio-background-default:var(--components-form-field-background-default);--nv-fieldradio-background-checked:var(--components-form-field-background-checked);--nv-fieldradio-background-disabled:var(--components-form-field-background-disabled);--nv-fieldradio-focus-box-shadow:var(--color-focus-brand);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldradio-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x)}nv-fieldradio:not([disabled]) input,nv-fieldradio:not([disabled]) label,nv-fieldradio[disabled=false] input,nv-fieldradio[disabled=false] label{cursor:pointer}nv-fieldradio.error{--nv-fieldradio-border-default:var(--components-form-field-border-error);--nv-fieldradio-border-hover:var(--nv-fieldradio-border-default);--nv-fieldradio-border-focus:var(--components-form-field-border-error);--nv-fieldradio-background-checked:var(--components-form-field-background-error);--nv-fieldradio-focus-box-shadow:var(--color-focus-destructive);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-field-border-error);--nv-fieldradio-outline-color:var(--color-focus-destructive)}nv-fieldradio.label-placement-before{flex-direction:row-reverse}nv-fieldradio[disabled]{opacity:0.5}nv-fieldradio 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(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldradio input[type=radio]{appearance:none;position:relative;display:flex;width:var(--form-radio-size);height:var(--form-radio-size);padding:var(--form-radio-inner-circle-padding);flex-direction:column;align-items:flex-start;border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-default)}nv-fieldradio input[type=radio]:hover{border-color:var(--nv-fieldradio-border-hover)}nv-fieldradio input[type=radio]:focus{border-color:var(--nv-fieldradio-border-focus)}nv-fieldradio input[type=radio]:focus,nv-fieldradio input[type=radio]:focus-within{outline:none}nv-fieldradio input[type=radio]:focus-visible,nv-fieldradio input[type=radio]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldradio-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldradio input[type=radio]:checked{background:var(--nv-fieldradio-background-checked);border-color:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked:hover,nv-fieldradio input[type=radio]:checked:focus{border-color:var(--nv-fieldradio-background-checked);background:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked::before{content:"";position:absolute;top:50%;right:50%;transform:translate(50%, -50%);left:0;width:var(--form-radio-inner-circle-size);height:var(--form-radio-inner-circle-size);flex-shrink:0;border-radius:var(--radius-rounded-full);background:var(--nv-fieldradio-dot-color-checked)}nv-fieldradio input[type=radio]:disabled{border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio input[type=radio]:disabled:checked::before{background:var(--nv-fieldradio-dot-color-disabled)}nv-fieldradio input[type=radio]:disabled:hover{border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio .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:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldradio .error-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:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldradio .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}`;
-
-const NvFieldradio = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
-        /**
-         * Set the label placement to before the input
-         * @deprecated use labelPlacement instead.
-         */
-        this.labelBefore = false;
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#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 = v4BdYh22OP.v4();
-        /**
-         * Highlight the radio button with error styling. It helps users quickly
-         * identify which option needs attention, improving their form-filling
-         * experience by making issues more visible.
-         * @validator error
-         */
-        this.error = false;
-        /**
-         * Controls whether the radio button is selected.
-         */
-        this.checked = false;
-        /**
-         * Disables the radio button, making it un-selectable.
-         */
-        this.disabled = false;
-        /**
-         * Applies focus to the input field as soon as the component is mounted. This
-         * is equivalent to setting the native autofocus attribute on an <input>
-         * element.
-         */
-        this.autofocus = false;
-    }
-    componentWillRender() {
-        if (this.message) {
-            this.description = this.message;
-        }
-        if (this.labelBefore) {
-            this.labelPlacement = 'before';
-        }
-    }
-    //#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.
-     */
-    handleCheckedChange(checked) {
-        this.checkedChanged.emit(checked);
-    }
-    /**
-     * Listens for the change event on the radio button input element and controls
-     * the checked state of the host elements.
-     * @param {Event} event - The change event.
-     */
-    handleChange(event) {
-        const target = event.target;
-        if (target?.type === 'radio') {
-            Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(element => {
-                if (element.name === this.name) {
-                    element.checked = false;
-                }
-            });
-            this.checked = target.checked;
-        }
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: 'bae8d6168e0845413655d8b52c14a2c348832616', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '4d3e7cd78625c3d42025f85be66c8f389501d01e', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), index.h("div", { key: '2d12f20bc8c0cf4bd3d31916bfeed8a8ef13de37', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '91b2080433d987def3d2ddf45c9817cc5852ebee', htmlFor: this.inputId }, index.h("slot", { key: '61c2209353903495e30bc86a281b0460a8d1ee2e', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f33b847894e5ea058ae36bb0fa107c5c28062443', class: "description" }, index.h("slot", { key: '24c4b14000b8dd0738b1c3fdc8c97aebc9f3c03f', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'bcc07ebfaa0d8dcd3c9a813ccd33322096b5aa82', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7cd0cb86be513924ccd83a3a93e4d8871ac21b7b', name: "error-description" }, this.errorDescription))))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "checked": [{
-                "handleCheckedChange": 0
-            }]
-    }; }
-};
-NvFieldradio.style = nvFieldradioCss();
-
-exports.nv_fieldradio = NvFieldradio;

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

@@ -1,82 +0,0 @@
-'use strict';
-
-var index = require('./index-DUlunl9a.js');
-var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
-var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
-require('@stencil/react-output-target/runtime');
-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 NvToggle = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
-        /****************************************************************************/
-        //#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 = v4BdYh22OP.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: '1cc28405c1775d19366fd3a684a834e0ca82cf39', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'cc19babb308cb64a8ff359c68eff673d8486b694', class: "input-container" }, index.h("input", { key: '8222a1abe2196b4e943a7adf338df430df2728fe', 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: '46eddca130efc9e6abcef1d6b376281cc1e0544e', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c9ccfd1fd1e3d896874984943158f9332a7c26b6', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'cd657a7eff81775da798b211f1c0983f18ace953', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'dee3823d764ff864b4f008a43bd0aa8c44b6db13', class: "description" }, index.h("slot", { key: '6dd3815bf94e766b3c3c43be72b6a86ed354987b', name: "description" }, this.description))))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "checked": [{
-                "onCheckedChanged": 0
-            }]
-    }; }
-};
-NvToggle.style = nvToggleCss();
-
-exports.nv_toggle = NvToggle;