@nova-design-system/nova-react 3.0.0 → 3.2.0

package/dist/cjs/{nv-menuitem.entry-CFkXoZ_r.js → nv-menuitem.entry-fhnYI91K.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 require('react');
 
 const nvMenuitemCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";
@@ -49,7 +49,7 @@ const NvMenuitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd736bc00759cb97fe52d2d6dc091667057a5585c', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: 'cf29c75feedcb61d16d33433f834751c821a4256', name: this.icon }), index.h("slot", { key: '0ebe8b2faac9981023c224e3c5cd4f131e088c0e' }), this.label && index.h("span", { key: 'd2659aceb0ecc1cad794ae16d15432379677012c', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: '7d7772b6efda6faccafc425772c905d4aabd2ef5' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'c756d3ceffc907fa0c37338595a7fd09f8238a7b', name: "chevron-right" })));
+        return (index.h(index.Host, { key: 'b1eeb8aaaab3daf8e247d2ca60ca4ea91828dc25', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '48a9145eec4d5fd701fa975000bf29e4f8e7b018', name: this.icon }), index.h("slot", { key: 'a3212c6b899ce3dd2f538d8ea2163355ced9a57e' }), this.label && index.h("span", { key: '9b64bfabd9c2d2e25702e1e06f53dd76a1405a0e', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'adca0ce4f6c9c53f965d0d71b7f0a9d7675091b4' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '5d55fc8fe1b1fc32fef9ee38b8dd53d7617ed0e0', name: "chevron-right" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-popover.entry-KT1iQUJk.js → nv-popover.entry-CYqBaVbr.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
 require('react');
@@ -1950,7 +1950,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '830051c35f7e10dfa4e31d401663bd5727ac988f' }, index.h("slot", { key: 'a49852a712bf6ab9c8557035ca4618d007939f03', name: "trigger" }), index.h("div", { key: '6d9cd4bd873cb92b1716a8ea88a3877a029cbe9c', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'f935c9248b602aa1c39e7d28c5503a24067fb744', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '6b682de05037b2d3b60c9139c448620fab963ea1', name: "content" }))));
+        return (index.h(index.Host, { key: 'af402e7713ddfed886a9965c0bde847be7399f7e' }, index.h("slot", { key: 'bdef517573a37c420109712631120377fb862ab1', name: "trigger" }), index.h("div", { key: '8c2004b6d92bb09a1d19ea1f709b2f104695e111', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '11d1b809fcdfddf55b471e12618ec4b8735d4a31', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '989d8f02e4044d4963d3152f137f691fd80ef818', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-row.entry-Cs2GDrcu.js → nv-row.entry-BUheLufV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 require('react');
 
 const nvRowCss = "nv-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--spacing-4) * -1);margin-left:calc(var(--spacing-4) * -1);row-gap:var(--spacing-4)}";
@@ -13,7 +13,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7daaa109808165553e69707c72550f284e087011' }, index.h("slot", { key: 'a00fd8c81352b485d8508f9bd68af4dd81d959e1' })));
+        return (index.h(index.Host, { key: 'f5e01b297dcede0d11045bc52f7f75278bc66c43' }, index.h("slot", { key: '158a47218c5edff393c19207dbb7987a25779e6d' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/{nv-stack.entry-Ci7pxGSo.js → nv-stack.entry-DNPce51E.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 
@@ -22,7 +22,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '02e184fbc9e9ddd4b02b107baf093047fa3697b0', 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: '1a501fcc419f97f2714be822120072b49590e5ea' })));
+        return (index.h(index.Host, { key: 'bc18faae4116df9b3a2f944b97c5e5cf096654ae', 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: 'fe3a07a01bd3a5898bcd1533c7966241cff21b44' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/{nv-table.entry-N4MV8Y6E.js → nv-table.entry-DXQM8l3t.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
 require('react');
 
@@ -314,14 +314,14 @@ const NvTable = class {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (index.h(index.Host, { key: 'b2962fba4d5a12aa660d0c0f69298c93947ef592' }, index.h("div", { key: 'f60e5c09d57c0ccf5cb9996ca85fcc8792270b85', class: "hidden" }, index.h("slot", { key: '9c4aefff542478535b3f342b1c75f68d717c3bf8' })), index.h("slot", { key: 'bfd0f5406187bcad69d9ed41e2f294314a3572f1', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
+        return (index.h(index.Host, { key: 'b1df9cabce9289f174177a6b28851c3fa4788529' }, index.h("div", { key: '5e27d3ad0d34f64c9e9b5c9f43ac025603c08530', class: "hidden" }, index.h("slot", { key: 'aaef162487498f64c21fb1071b2863e8fa4e5a5c' })), index.h("slot", { key: '34325af8079d76a7599c1c4516fa8f371ce2fe75', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (index.h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), index.h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (index.h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (index.h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), index.h("slot", { key: 'e0039c9af9506bc8f2ded8cc81bbd2667ee1f2c1', name: "after" })));
+        })))))))), index.h("slot", { key: '49cdd7614ab002f5a3de09d414df6bb46c72a28f', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tablecolumn.entry-CTz4jsZl.js → nv-tablecolumn.entry-DROQK_0c.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 require('react');
 
 const NvTablecolumn = class {

package/dist/cjs/{nv-toggle.entry-m10-ncYR.js → nv-toggle.entry-fMzTrdte.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -65,8 +65,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e80390a43bab3d55373f6b05db1516210f90c3b5', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '66156f05cc18bb63a8625cdff72d9c177e4cf86b', class: "input-container" }, index.h("input", { key: 'db0c2c078c23431605befb8dd972a29bfdefb16f', 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: '576df464b48fa11bf8a46bede5f1d822db569636', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'f529b009876a5de5061747f78372a66ccfdcac61', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '3ace029242d920b783fe0038f8721b416f54633f', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '2eeb41266ee52ef40c1600750084fda0fac8dc6f', class: "description" }, index.h("slot", { key: '605541594fcc7f3192766a5395c5a81f42de7728', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: 'cb88cfea301859b05adedf15690027b21cd4837e', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '307011c7dcbbe5a6dfc9b2bc1a5bd9842b99f68c', class: "input-container" }, index.h("input", { key: 'ff87395a3a737a1daaae243176975856a571cac1', 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: 'c190ac33b861a5f92869c83249b441e243b2ee21', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'cfd87cc4e3c68bedf4729a0b62f192077c4b4813', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '81de13cc0e98b4bdb494cc20fb1af59be66952b0', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '69647c010b34a94afb215f9e56b5fba0bd114581', class: "description" }, index.h("slot", { key: 'ecf7b68b862976907c2d4605a65ee24875b926d3', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-tooltip.entry-B6aRDto3.js → nv-tooltip.entry-yB2Ek1Cz.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 require('react');
 
-const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [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 [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
+const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [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 [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
 const NvTooltipStyle0 = nvTooltipCss;
 
 const NvTooltip = class {
@@ -35,7 +35,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8309e08944469fad76997a6dfcb8b434461aa5a3' }, index.h("slot", { key: 'f3da94e2f2f581f7b8c93f4b3e70de67e305508a' }), index.h("nv-popover", { key: 'a28c50f59f9a781afd8a8ab60260d065dcadf96d', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '76f63a5f220de640f4eeada8aeba97e9ead73fc9', slot: "content" }, this.message), index.h("slot", { key: 'f55f71b357b23c29b40b9c022a5a1718c4c8c8fb', name: "content" }))));
+        return (index.h(index.Host, { key: '893071a64f973b33dccbf3acec95db46e592b717' }, index.h("slot", { key: '010776550ed5f942c02540b12756f0c0f64e31c4' }), index.h("nv-popover", { key: '21a669333da9e55b697f8a0b0962a8328beac55a', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'ed89d0bfe1e9e8d12e33e3d7fb0f5b7f2685bbb9', slot: "content" }, this.message), index.h("slot", { key: 'fa2d9602e003f1da5c3d23156db7b2ac482966bd', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/generated/components.js

@@ -23,6 +23,7 @@ import { NvFieldnumber as NvFieldnumberElement, defineCustomElement as defineNvF
 import { NvFieldpassword as NvFieldpasswordElement, defineCustomElement as defineNvFieldpassword } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldpassword.js";
 import { NvFieldradio as NvFieldradioElement, defineCustomElement as defineNvFieldradio } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldradio.js";
 import { NvFieldselect as NvFieldselectElement, defineCustomElement as defineNvFieldselect } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldselect.js";
+import { NvFieldslider as NvFieldsliderElement, defineCustomElement as defineNvFieldslider } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldslider.js";
 import { NvFieldtext as NvFieldtextElement, defineCustomElement as defineNvFieldtext } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtext.js";
 import { NvFieldtextarea as NvFieldtextareaElement, defineCustomElement as defineNvFieldtextarea } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtextarea.js";
 import { NvFieldtime as NvFieldtimeElement, defineCustomElement as defineNvFieldtime } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtime.js";
@@ -111,7 +112,10 @@ export const NvDatagrid = createComponent({
     tagName: 'nv-datagrid',
     elementClass: NvDatagridElement,
     react: React,
-    events: { onAction: 'action' },
+    events: {
+        onAction: 'action',
+        onSelectedRows: 'selectedRows'
+    },
     defineCustomElement: defineNvDatagrid
 });
 export const NvDatagridcolumn = createComponent({
@@ -228,6 +232,13 @@ export const NvFieldselect = createComponent({
     events: { onValueChanged: 'valueChanged' },
     defineCustomElement: defineNvFieldselect
 });
+export const NvFieldslider = createComponent({
+    tagName: 'nv-fieldslider',
+    elementClass: NvFieldsliderElement,
+    react: React,
+    events: { onValueChanged: 'valueChanged' },
+    defineCustomElement: defineNvFieldslider
+});
 export const NvFieldtext = createComponent({
     tagName: 'nv-fieldtext',
     elementClass: NvFieldtextElement,

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

@@ -1,4 +1,4 @@
-import { type ActionEvent, type DateRange, type NvAlertCustomEvent, type NvBadgeCustomEvent, type NvCalendarCustomEvent, type NvDatagridCustomEvent, type NvFielddaterangeCustomEvent, type NvFielddropdownCustomEvent, type NvMenuCustomEvent, type NvMenuitemCustomEvent, type NvTableCustomEvent } from "@nova-design-system/nova-webcomponents";
+import { type NvCalendarCustomEvent, type NvFielddaterangeCustomEvent, type NvFielddropdownCustomEvent, type NvMenuCustomEvent, type NvMenuitemCustomEvent } from "@nova-design-system/nova-webcomponents";
 import { NvAlert as NvAlertElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-alert.js";
 import { NvAvatar as NvAvatarElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-avatar.js";
 import { NvBadge as NvBadgeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-badge.js";
@@ -23,6 +23,7 @@ import { NvFieldnumber as NvFieldnumberElement } from "@nova-design-system/nova-
 import { NvFieldpassword as NvFieldpasswordElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldpassword.js";
 import { NvFieldradio as NvFieldradioElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldradio.js";
 import { NvFieldselect as NvFieldselectElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldselect.js";
+import { NvFieldslider as NvFieldsliderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldslider.js";
 import { NvFieldtext as NvFieldtextElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtext.js";
 import { NvFieldtextarea as NvFieldtextareaElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtextarea.js";
 import { NvFieldtime as NvFieldtimeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtime.js";
@@ -42,13 +43,13 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
 type NvAlertEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
     onHiddenChangedComplete: EventName<CustomEvent<boolean>>;
-    onCloseClicked: EventName<NvAlertCustomEvent<MouseEvent>>;
+    onCloseClicked: EventName<CustomEvent<void>>;
 };
 export declare const NvAlert: StencilReactComponent<NvAlertElement, NvAlertEvents>;
 type NvAvatarEvents = NonNullable<unknown>;
 export declare const NvAvatar: StencilReactComponent<NvAvatarElement, NvAvatarEvents>;
 type NvBadgeEvents = {
-    onCloseClicked: EventName<NvBadgeCustomEvent<MouseEvent>>;
+    onCloseClicked: EventName<CustomEvent<void>>;
     onHiddenChanged: EventName<CustomEvent<boolean>>;
     onHiddenChangedComplete: EventName<CustomEvent<boolean>>;
 };
@@ -61,13 +62,17 @@ type NvButtonEvents = NonNullable<unknown>;
 export declare const NvButton: StencilReactComponent<NvButtonElement, NvButtonEvents>;
 type NvCalendarEvents = {
     onSingleDateChange: EventName<CustomEvent<string>>;
-    onRangeDateChange: EventName<NvCalendarCustomEvent<DateRange>>;
+    onRangeDateChange: EventName<NvCalendarCustomEvent<HTMLNvCalendarElement['rangeValue']>>;
 };
 export declare const NvCalendar: StencilReactComponent<NvCalendarElement, NvCalendarEvents>;
 type NvColEvents = NonNullable<unknown>;
 export declare const NvCol: StencilReactComponent<NvColElement, NvColEvents>;
 type NvDatagridEvents = {
-    onAction: EventName<NvDatagridCustomEvent<ActionEvent>>;
+    onAction: EventName<CustomEvent<{
+        keyAction: string;
+        details: any;
+    }>>;
+    onSelectedRows: EventName<CustomEvent<any[]>>;
 };
 export declare const NvDatagrid: StencilReactComponent<NvDatagridElement, NvDatagridEvents>;
 type NvDatagridcolumnEvents = NonNullable<unknown>;
@@ -94,7 +99,7 @@ type NvFielddateEvents = {
 };
 export declare const NvFielddate: StencilReactComponent<NvFielddateElement, NvFielddateEvents>;
 type NvFielddaterangeEvents = {
-    onDateRangeChange: EventName<NvFielddaterangeCustomEvent<DateRange>>;
+    onDateRangeChange: EventName<NvFielddaterangeCustomEvent<HTMLNvCalendarElementEventMap['rangeDateChange']>>;
 };
 export declare const NvFielddaterange: StencilReactComponent<NvFielddaterangeElement, NvFielddaterangeEvents>;
 type NvFielddropdownEvents = {
@@ -138,6 +143,10 @@ type NvFieldselectEvents = {
     onValueChanged: EventName<CustomEvent<string>>;
 };
 export declare const NvFieldselect: StencilReactComponent<NvFieldselectElement, NvFieldselectEvents>;
+type NvFieldsliderEvents = {
+    onValueChanged: EventName<CustomEvent<string>>;
+};
+export declare const NvFieldslider: StencilReactComponent<NvFieldsliderElement, NvFieldsliderEvents>;
 type NvFieldtextEvents = {
     onValueChanged: EventName<CustomEvent<string>>;
 };
@@ -177,7 +186,10 @@ export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
 type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
 type NvTableEvents = {
-    onAction: EventName<NvTableCustomEvent<ActionEvent>>;
+    onAction: EventName<CustomEvent<{
+        keyAction: string;
+        details: any;
+    }>>;
 };
 export declare const NvTable: StencilReactComponent<NvTableElement, NvTableEvents>;
 type NvTablecolumnEvents = NonNullable<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.0.0",
+  "version": "3.2.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",

package/dist/cjs/nv-badge_2.entry-BsI3B8Rr.js

@@ -1,195 +0,0 @@
-'use strict';
-
-var index = require('./index-Byv3Vmev.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var timeline_animation1b88f052 = require('./timeline.animation-1b88f052-B8-vCVrY.js');
-var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
-require('react');
-
-const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge.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-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background);border-color:var(--color-rainbow-3-border)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background);border-color:var(--color-rainbow-4-border)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background);border-color:var(--color-rainbow-7-border)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background);border-color:var(--color-rainbow-10-border)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
-const NvBadgeStyle0 = nvBadgeCss;
-
-const NvBadge = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.closeClicked = index.createEvent(this, "closeClicked");
-        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
-        this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete");
-        /****************************************************************************/
-        //#region DEPRECATED
-        /**
-         * Whether the badge is dismissible.
-         * @deprecated use dismissible instead.
-         */
-        this.dismissal = false;
-        //#endregion DEPRECATED
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * The color of the badge. Use a string between 1 to 10
-         */
-        this.color = '1';
-        /**
-         * Main content of the badge.
-         */
-        this.label = null;
-        /**
-         * The lead icon of the badge.
-         */
-        this.leadIcon = null;
-        /**
-         * Whether the badge is dismissible.
-         */
-        this.dismissible = false;
-        /**
-         * Controls the visibility of the badge. Will animate with fade and collapse.
-         */
-        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
-        /**
-         * When true, the alert does not automatically close upon dismissing.
-         * Useful for externally controlled component behavior.
-         */
-        this.preventAutoClose = false;
-        //#endregion LIFECYCLE
-        /****************************************************************************/
-        //#region METHODS
-        /**
-         * Handles the close button click.
-         * @param {MouseEvent} originalEvent - The original event.
-         */
-        this.handleClose = (originalEvent) => {
-            if (!this.preventAutoClose) {
-                this.hidden = true;
-            }
-            this.closeClicked.emit(originalEvent);
-        };
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    /**
-     * Handles the dismissal prop change.
-     * @param {boolean} dismissal - The new dismissal value.
-     */
-    handleDismissalChange(dismissal) {
-        this.dismissible = dismissal;
-    }
-    /**
-     * Handles the icon prop change.
-     * @param {string} icon - The new icon value.
-     */
-    handleIconChange(icon) {
-        this.leadIcon = icon;
-    }
-    /**
-     * Handles the hidden prop change.
-     * @param {boolean} hidden - The new hidden value.
-     */
-    async handleHiddenChange(hidden) {
-        this.hiddenChanged.emit(hidden);
-        if (this._isHidden === true)
-            this._isHidden = hidden;
-        const { fadeIn, fadeOut } = fade_animation2a077983.useFade(this.ref, { duration: 150 });
-        const { collapse, expand } = timeline_animation1b88f052.useCollapse(this.ref, { duration: 150 });
-        if (hidden === true)
-            await timeline_animation1b88f052.timeline(fadeOut, collapse).start();
-        if (hidden === false)
-            await timeline_animation1b88f052.timeline(expand, fadeIn).start();
-        this.hiddenChangedComplete.emit(hidden);
-        if (this._isHidden === false)
-            this._isHidden = hidden;
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    /**
-     * Component will load.
-     */
-    componentWillLoad() {
-        if (this.dismissal) {
-            this.dismissible = this.dismissal;
-        }
-        if (this.icon != null && this.icon != '') {
-            this.leadIcon = this.icon;
-        }
-        if (this.hidden) {
-            this._isHidden = true;
-            const { setCollapsed } = timeline_animation1b88f052.useCollapse(this.ref);
-            const { setFadeOut } = fade_animation2a077983.useFade(this.ref);
-            setCollapsed();
-            setFadeOut();
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '8d97eed4a84f2f913e4f8cd64d08c806d9724f33', class: clsx297c1ffe.clsx(`badge-${this.color}`, {
-                'has-close': this.dismissible,
-                'with-gap': this.dismissible || this.label,
-                'visually-hidden': this._isHidden,
-            }) }, index.h("slot", { key: '34c2c387727e6b68d37fe2b2ac68c82799356e3d', name: "leading-icon" }, this.leadIcon && index.h("nv-icon", { key: '0c23dd58e48fce39d7935549c6289f87f1fb66af', name: this.leadIcon, size: "sm" })), index.h("slot", { key: '7485f570aa3cf519b030bedfa8ccf6a6d37d2c1b' }, this.label && index.h("span", { key: 'eb7afa0eb52582c6d782d2383dfe2eeb41a9649b' }, this.label)), this.dismissible && (index.h("button", { key: 'bc07eed3e1328a8009cb2c8add026a7f8a5335da', onClick: this.handleClose, class: "close", type: "button" }, index.h("nv-icon", { key: 'ab0b2c6224f4b8b147e8158856acbf1ab987b392', name: "x", size: "sm" })))));
-    }
-    get ref() { return index.getElement(this); }
-    static get watchers() { return {
-        "dismissal": ["handleDismissalChange"],
-        "icon": ["handleIconChange"],
-        "hidden": ["handleHiddenChange"]
-    }; }
-};
-NvBadge.style = NvBadgeStyle0;
-
-const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck{cursor:pointer;display:flex;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);border-radius:var(--list-dropdown-item-radius)}nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck:hover{background-color:var(--components-list-dropdown-item-background-hover)}";
-const NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
-
-const NvFielddropdownitemcheck = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.itemChecked = index.createEvent(this, "itemChecked");
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Indicates whether the checkbox is selected.
-         */
-        this.checked = false;
-        /**
-         * Disables the item, preventing any user interaction.
-         */
-        this.disabled = false;
-        /**
-         * when the child <nv-fieldcheckbox> change its `checked` state,
-         * update `this.checked` and emit `itemChecked`.
-         * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.
-         */
-        this.onFieldcheckboxChanged = (event) => {
-            if (this.disabled)
-                return;
-            // NvFieldcheckbox has emitted checkedChanged
-            this.checked = event.detail; // get the new state
-            this.itemChecked.emit({
-                value: this.value,
-                checked: this.checked,
-                group: this.group,
-            });
-        };
-        /** Make sure the checkbox is checked when clicked anywhere in the item. */
-        this.handleClick = () => {
-            if (this.disabled)
-                return;
-            if (this.el.querySelector('input').checked) {
-                this.checked = false;
-            }
-            else {
-                this.checked = true;
-            }
-        };
-    }
-    render() {
-        return (index.h(index.Host, { key: '93a97fb36d69bd837b27cdbfa31adc5a7a71dab4', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '7afd9b55ce6911c327fae658304fa313fc908d45', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
-    }
-    get el() { return index.getElement(this); }
-};
-NvFielddropdownitemcheck.style = NvFielddropdownitemcheckStyle0;
-
-exports.nv_badge = NvBadge;
-exports.nv_fielddropdownitemcheck = NvFielddropdownitemcheck;