@nova-design-system/nova-react 3.17.0 → 3.18.0

package/dist/cjs/{nv-iconbutton_2.entry-iinBJBb6.js → nv-iconbutton_2.entry-WTj2sSR7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');
@@ -124,7 +124,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '21aa46431d8a9f64cfc6fba04a04b72de31c74a4', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx297c1ffe.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'c2df9292a9c49f178e6e160dedeac3fe99776322', size: this.size }), !this.loading && index.h("nv-icon", { key: 'b7053d9e3a71a1464b41b021f41fe36c6591f114', name: this.name, size: this.size }), index.h("slot", { key: '70e8576ea565651df7dca6221cfed4160f86f025' })));
+        return (index.h(index.Host, { key: '4cda6f8b0c762c08964c5a4a882331d84eaa4514', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx297c1ffe.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'f433d942bad470a376ef8164e73b7025d15bd39e', size: this.size }), !this.loading && index.h("nv-icon", { key: '1ceebfa6b5907dac279efff65a0f6d977d062453', name: this.name, size: this.size }), index.h("slot", { key: 'd7f882e9c8dc0fcdb1bbb9ff783f7d387036d043' })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -155,7 +155,7 @@ const NvLoader = class {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (index.h(index.Host, { key: '932c76ef978e21bdab5a3502daadcdd7ecd05af4', class: clsx297c1ffe.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (index.h(index.Host, { key: '4692310e37f31424602a1592cb0648e9bf95a609', class: clsx297c1ffe.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
 };
 NvLoader.style = NvLoaderStyle0;

package/dist/cjs/{nv-menu.entry-BTW4XauN.js → nv-menu.entry-DnHSkRkc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 require('react');
 require('react-dom');
 
@@ -207,7 +207,7 @@ const NvMenu = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '9c580e2085804dead07f60f3ce4494bed123a58e' }, index.h("slot", { key: '87740cf4b003379eb7a4d011b2b80640e9d7c24f', name: "trigger" }), index.h("nv-popover", { key: '102ebedefdc1b6ac5f10900a82c904b12e4cddb1', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (index.h("ul", { slot: "content" }, this.renderMenuItems())) : (index.h("slot", { name: "content" })))));
+        return (index.h(index.Host, { key: 'e563f1a78be7cd37b0fe353882cd5874f3a12e60' }, index.h("slot", { key: 'd91afe28b83121707e752532d349fdc9b983ea71', name: "trigger" }), index.h("nv-popover", { key: '90c1fc4e30d9cd7b02bd5ad620b3eb824f82d058', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (index.h("ul", { slot: "content" }, this.renderMenuItems())) : (index.h("slot", { name: "content" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-menuitem.entry-CIT2_Fbe.js → nv-menuitem.entry-BMThBD-z.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 require('react');
 require('react-dom');
 
@@ -50,7 +50,7 @@ const NvMenuitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '254c76878476b6b22ea2278b86f0608c60a62660', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: 'f7bcdce916a8b0f4026eecd9a6ed060b7f16bcff', name: this.icon }), index.h("slot", { key: '8557bad8db4a35cbe346e7e1e91d4ab1cde9d30b' }), this.label && index.h("span", { key: '1ee543ddfec0e1ff91976ca9739de9f054aa6a5b', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'a51ca5b1c20591550e7481228ad4184246a1330e' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'f726623c78ea54091f7161c3261db3c22f2d3783', name: "chevron-right" })));
+        return (index.h(index.Host, { key: '96933ba797e263a6c56e4b079227498eff19989e', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '17fd121521b54f2065b91a0921d7a2573139086e', name: this.icon }), index.h("slot", { key: 'e503e3667ee008f6c370d928c2ba0781b1240200' }), this.label && index.h("span", { key: '521f094eb6e3a4015424ef1516a10d6fa454d8ab', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'e27628004929e519503dac10f7c278b8a9330176' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'c706e459412f628a397f1b4d38010c5de23d643f', name: "chevron-right" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-notification.entry-CVyzCsSh.js → nv-notification.entry-BgORwEc6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
 var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
@@ -253,7 +253,7 @@ const NvNotification = class {
     //#region RENDER
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '6e0b8abd9cbcb62b0b133db77520aa5aaa4173c9', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, index.h("div", { key: '41b2ad35bf5220333e132d61f8843d1136cb1f40', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '63116f239f7108ae945845c247c712827d8ae8a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'dc19bf166c6d2eccd3d40384d43206457f0d03f0', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'e673ac1cc78300bc3425018a0cdfc4b90c679796', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '95cb6ec06d89cda8e5170f9ff0f863b6b0b7e32d', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: 'ed654c0271d2ff8538295d8f7bf58a9754abb4c9', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '00cc14a709059b9caf2117174ef7fcc310f5965f', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: 'c7c0bcbc2b54fdfdf8280af6a377929bf17fd688', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '946db5aeb667b67f52f51adbb1b8f600325f937e', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: 'd94560b658507a515a1360057121e933b95e6fe6', "data-scope": "actions" }, index.h("slot", { key: 'db185d3924c7d1fbeb30578992f2375e92a0d4bc', name: "actions" })))))));
+        return (index.h(index.Host, { key: '6e0908c4dc5bbd289b756703f19e932165da7eeb', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, index.h("div", { key: 'c14fb6bcbfc7048bd1d2171e489e2b1d4a8d3486', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: 'dbc3162958edc2655d59e770b1e27f8226b2a2ec', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: '8ddb1a6ec22c343f5df6158418a4bf434b1d1169', name: "x", size: "sm" }))), index.h("nv-icon", { key: '29e12bb41102cedf3f0b7d8680a265535b69ff23', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '996b53cdfa47b14769a08d23b9971475521b94e0', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: '110046b680b485d323c49f0836589235aa695ff0', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: 'f256cd10825ee24b4caef51c46ac8e9f7af152c0', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: '73573a91e4cea1acdf12b428f217562eb4df5cf3', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '9bb41cd075367cc9c223ccd4fdb0ff47871941a6', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: '7fff75429d22bf9344f077672c18bfe583e99301', "data-scope": "actions" }, index.h("slot", { key: 'e77b1c3e310db84e3965f097e595f11a8b32ebc3', name: "actions" })))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-notificationcontainer.entry-CqoyGWAa.js → nv-notificationcontainer.entry-C3D52xHp.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 require('react');
 require('react-dom');
 
@@ -33,7 +33,7 @@ const NvNotificationContainer = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'db4005459b926bcfef55e76f61bff0b5635f2872', class: `position-${this.position}` }, index.h("slot", { key: '518909541ca3e9e82168436a43d5362c414c0ec3' })));
+        return (index.h(index.Host, { key: '23a42b8ff4be4ca749656567ad5cbc64bba70466', class: `position-${this.position}` }, index.h("slot", { key: '48a48d6b6e2580f072918192cf59e73cd3dfc1f5' })));
     }
 };
 NvNotificationContainer.style = NvNotificationcontainerStyle0;

package/dist/cjs/{nv-popover.entry-Bf5ihsdq.js → nv-popover.entry-Bc5Hs_ZA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
 var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
@@ -1974,7 +1974,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0644e319053ca1f216aac89f5737805008b097be' }, index.h("slot", { key: '7f03080c300378be09e6fce9a44fa2a4a8730f40', name: "trigger" }), index.h("div", { key: '801b7f1dd8c87db5eb06bcabddda8936c89a6ab2', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'd8e40589a4c53d4ac0c313f3d97cf61ef928f56d', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'af0743b1a94c44dd161712e080dbf54a69c9d4a4', name: "content" }))));
+        return (index.h(index.Host, { key: '8fdb18b1233e2f988d16b85927bbf5b1f7f47630' }, index.h("slot", { key: '3dfc19787da335fa0e6b38fe2aebfa1a9df04ea8', name: "trigger" }), index.h("div", { key: 'd529ca4a2efb62d6bfab679d85acbfb8002e1442', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'bb187c48e62a9653af8649c1a0670534499f6060', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'b60efb50e864ac0f530fcb7b9fc52c53924f29b1', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-row.entry-Chp5QzjD.js → nv-row.entry-rTFsRQhn.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 require('react');
 require('react-dom');
 
@@ -14,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '9623a4c73a5a2557b2ba7eb346ae0740ca7291c5' }, index.h("slot", { key: '502ea804deec9e91057bfaf6f2fa4fdb4a5822c3' })));
+        return (index.h(index.Host, { key: '664375922c55485e6b297f0e64950db684ecffa3' }, index.h("slot", { key: '194e45ce439cadb2bdba17072070d3926a746d3f' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/{nv-split.entry-DSB_HMU-.js → nv-split.entry-CEkdVB0d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 require('react');
 require('react-dom');
 
@@ -324,7 +324,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e3b158ff1b4f665862079d245c219102d8b8ccda', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: 'baa8105a05bf8446d7a31a23cd5276edb320ea2f', name: "pane" }), index.h("slot", { key: '44afe4f4a220aff45f802218f2618e9305141a9f', name: "gutter" })));
+        return (index.h(index.Host, { key: 'b0874368ed8b3c1b5cd0676a1c8181e827369ad7', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: 'a0e35a851390bf1f0ffcf065fdeb23cba3c75c9c', name: "pane" }), index.h("slot", { key: 'a80dbbc4862c3a30aac9e89d6b80a19245083c42', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-stack.entry-D6L6830W.js → nv-stack.entry-DFWmiZRf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 require('react-dom');
@@ -23,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '5922efd8652a14d73e812e85dd6770101e22fe46', 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: '71daf4ee34bd57d785203f98799b6ea7c66ffa3b' })));
+        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' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/{nv-table.entry-B-UuWaI5.js → nv-table.entry-Drf8wXN5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 require('react');
 require('react-dom');
 
@@ -236,7 +236,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '16b564cc29e8987d8b3fda3a84c0b19882a733bd' }, index.h("slot", { key: '1305cbc6d29caa60df55bfa01a39a3417a27ec01' })));
+        return (index.h(index.Host, { key: '37c5e773664fc7bc324d46c003057f322e118c0d' }, index.h("slot", { key: '28decbb3d75da3471a95d9130fdb8206df811270' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{nv-toggle.entry-AG7sAORg.js → nv-toggle.entry-D3jHT0co.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0f440b59ac0c32d9abe9577668d7045081819b49', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4289435e34eb31a8e59e00cefcba2e17e98bd03a', class: "input-container" }, index.h("input", { key: '1b7d05f77fd32cece9eed2e6cf79c7e2e707f64c', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '6d78d7e80eb790bbead21bba6108329f9ded3746', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '524a2c2542a45945bddb688c5dff6c9426d58570', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '59eda4b826602062620e7167acf3c8de0f77ebef', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e8412879ed60fc6806464432348bd52483e3567', class: "description" }, index.h("slot", { key: '85a876130569a5a4051e271eaf1cf49593a014a6', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '3e1eecaddeab51801343663989a1554ae62794be', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'a67b9c8c0159d6b2a1f87d06d536116475fd9683', class: "input-container" }, index.h("input", { key: '2ce5d01313da8fe74cdac78616c051236aa3102e', 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: '0e7e1960fc3cd8ff1c79b3c8d4fc306e2b761bfc', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '0325700fc58d39878821a4b1871cb433eda18199', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '4b627dbbad2f52446a0ebb4eacdfe3d6d5ccdbb0', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'db7d0a200c66e234142b455686afdd409337b336', class: "description" }, index.h("slot", { key: '171bb20b639a07bda52cb788fb367a51d6dbe7f8', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-togglebutton.entry-Btlxm5gO.js → nv-togglebutton.entry-zN93TaA9.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 require('react');
 require('react-dom');
 
@@ -48,7 +48,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b9e37fc1cb34272bca476c7b61db173ab2a9d238', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'cf9cf3445fd93873def1f9fa9cbec46c35600025' })));
+        return (index.h(index.Host, { key: '6965d7bd520347f5236cca32ca674875a9a4fd2f', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '45ddd14b67904252c2e78b6357fbd33790facf23' })));
     }
 };
 NvTogglebutton.style = NvTogglebuttonStyle0;

package/dist/cjs/{nv-togglebuttongroup.entry-CM3nWiUU.js → nv-togglebuttongroup.entry-D4dUkodA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 require('react');
 require('react-dom');
 
@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7aad0160ae8e093765ba42649293e27d7b93ab75' }, index.h("slot", { key: '39364122a5e65b1a454bd782a5daacc7edfee8b0' })));
+        return (index.h(index.Host, { key: '4e075360c060e6de5af80325f7b91e7573f89b16' }, index.h("slot", { key: '7b361c2d608b17cb91814d279aac842e666fda5a' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tooltip.entry-m4AYXhW3.js → nv-tooltip.entry-DqFRA9_B.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0fvq6nd.js');
+var index = require('./index-_oq_uffl.js');
 require('react');
 require('react-dom');
 
@@ -46,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, index.h("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), index.h("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), index.h("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
+        return (index.h(index.Host, { key: 'bbf9407ca59c3e6122cbdc7c9e3aefe56b64311d' }, index.h("slot", { key: 'b13ae1307843e66cd018ce204c94147b53a26649' }), index.h("nv-popover", { key: '12d9bdca8d68eff93f6aa80304535df3be127c32', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '6f4e64e97cc644f9da030e30b1069150c47c2985', slot: "content" }, this.message), index.h("slot", { key: '2b55d3b0c1279ce0a8bf165be1b26fe854e91d47', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/components/NvDatatable.js

@@ -1,7 +1,12 @@
-import React, { useMemo } from 'react';
-import { flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
+import React, { useMemo, useState, useEffect, useRef, } from 'react';
+import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable, } from '@tanstack/react-table';
 import { NvTable } from '../generated/components';
-const NvDatatable = ({ columns, rows, ...htmlProps }) => {
+const NvDatatable = ({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }) => {
+    const [paginationState, setPaginationState] = useState({
+        pageIndex: 0,
+        pageSize: pagination?.initialPageSize || 10,
+    });
+    const lastRowRef = useRef(null);
     const tableColumns = useMemo(() => columns
         .filter((col) => !col.hidden)
         .map((col) => ({
@@ -24,22 +29,120 @@ const NvDatatable = ({ columns, rows, ...htmlProps }) => {
             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())))))))))));
+    const tableConfig = useMemo(() => {
+        const baseConfig = {
+            data: rows,
+            columns: tableColumns,
+            getCoreRowModel: getCoreRowModel(),
+        };
+        if (!pagination) {
+            return baseConfig;
+        }
+        if (pagination.mode === 'client') {
+            return {
+                ...baseConfig,
+                getPaginationRowModel: getPaginationRowModel(),
+                initialState: {
+                    pagination: {
+                        pageIndex: 0,
+                        pageSize: pagination.initialPageSize || 10,
+                    },
+                },
+            };
+        }
+        if (pagination.mode === 'server') {
+            const pageSize = paginationState.pageSize;
+            let pageCount = -1;
+            if (pagination.totalPageCount !== undefined) {
+                pageCount = pagination.totalPageCount;
+            }
+            else if (pagination.totalRowCount !== undefined) {
+                pageCount = Math.ceil(pagination.totalRowCount / pageSize);
+            }
+            return {
+                ...baseConfig,
+                manualPagination: true,
+                pageCount,
+                state: {
+                    pagination: paginationState,
+                },
+                onPaginationChange: setPaginationState,
+            };
+        }
+        return baseConfig;
+    }, [rows, tableColumns, pagination, paginationState]);
+    const table = useReactTable(tableConfig);
+    useEffect(() => {
+        if (pagination?.mode === 'server' && pagination.onPaginationChange) {
+            pagination.onPaginationChange({
+                pageIndex: paginationState.pageIndex,
+                pageSize: paginationState.pageSize,
+            });
+        }
+    }, [paginationState, pagination]);
+    useEffect(() => {
+        if (pagination?.mode !== 'infinite' || !lastRowRef.current) {
+            return;
+        }
+        const threshold = pagination.loadMoreThreshold || 500;
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry.isIntersecting &&
+                pagination.hasMore &&
+                !pagination.isLoading &&
+                pagination.onLoadMore) {
+                pagination.onLoadMore();
+            }
+        }, {
+            rootMargin: `${threshold}px`,
+            root: null,
+        });
+        observer.observe(lastRowRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [rows, pagination]);
+    const tablePaginationState = table.getState().pagination;
+    const paginationAPI = useMemo(() => {
+        if (!pagination) {
+            return null;
+        }
+        const pageCount = table.getPageCount();
+        const rowCount = pagination.mode === 'server'
+            ? pagination.totalRowCount || rows.length
+            : rows.length;
+        return {
+            pageIndex: tablePaginationState.pageIndex,
+            pageSize: tablePaginationState.pageSize,
+            pageCount,
+            rowCount,
+            firstPage: () => table.setPageIndex(0),
+            previousPage: () => table.previousPage(),
+            nextPage: () => table.nextPage(),
+            lastPage: () => table.setPageIndex(pageCount - 1),
+            setPageIndex: (index) => table.setPageIndex(index),
+            setPageSize: (size) => table.setPageSize(size),
+            canPreviousPage: table.getCanPreviousPage(),
+            canNextPage: table.getCanNextPage(),
+            isLoading: pagination.mode === 'infinite' ? pagination.isLoading : undefined,
+            hasMore: pagination.mode === 'infinite' ? pagination.hasMore : undefined,
+        };
+    }, [pagination, table, rows.length, tablePaginationState]);
+    const tableRows = table.getRowModel().rows;
+    const isInfiniteScroll = pagination?.mode === 'infinite';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(NvTable, { ...htmlProps },
+            React.createElement("table", null,
+                React.createElement("thead", { "data-sticky-top": stickyHeader ? 'true' : undefined }, 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, tableRows.map((row, index) => {
+                    const isLastRow = isInfiniteScroll && index === tableRows.length - 1;
+                    return (React.createElement("tr", { key: row.id, "data-testid": `datatable-row-${row.id}`, ref: isLastRow ? lastRowRef : undefined }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id, "data-testid": `datatable-cell-${cell.id}` }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
+                })))),
+        paginationAPI && renderPagination && renderPagination(paginationAPI)));
 };
 NvDatatable.displayName = 'NvDatatable';
 export { NvDatatable };

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

@@ -1,13 +1,47 @@
 import React, { type ComponentProps } from 'react';
 declare const NvDatatable: {
-    <T extends NvDatatableRow = NvDatatableRow>({ columns, rows, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
+    <T extends NvDatatableRow = NvDatatableRow>({ columns, rows, pagination, renderPagination, stickyHeader, ...htmlProps }: NvDatatableProps<T>): React.JSX.Element;
     displayName: string;
 };
 export { NvDatatable };
 export type NvDatatableProps<T> = {
     columns: Array<NvDatatableColumn<T>>;
     rows: Array<T>;
+    pagination?: NvDatatablePaginationConfig;
+    renderPagination?: (api: NvDatatableRenderPaginationAPI) => React.ReactNode;
+    stickyHeader?: boolean;
 } & Pick<ComponentProps<'div'>, 'className' | 'style'>;
+export interface NvDatatablePaginationConfig {
+    mode: 'client' | 'server' | 'infinite';
+    initialPageSize?: number;
+    pageSizeOptions?: number[];
+    totalRowCount?: number;
+    totalPageCount?: number;
+    onPaginationChange?: (state: {
+        pageIndex: number;
+        pageSize: number;
+    }) => void;
+    hasMore?: boolean;
+    isLoading?: boolean;
+    loadMoreThreshold?: number;
+    onLoadMore?: () => void;
+}
+export interface NvDatatableRenderPaginationAPI {
+    pageIndex: number;
+    pageSize: number;
+    pageCount: number;
+    rowCount: number;
+    firstPage: () => void;
+    previousPage: () => void;
+    nextPage: () => void;
+    lastPage: () => void;
+    setPageIndex: (index: number) => void;
+    setPageSize: (size: number) => void;
+    canPreviousPage: boolean;
+    canNextPage: boolean;
+    isLoading?: boolean;
+    hasMore?: boolean;
+}
 export interface NvDatatableColumn<T> {
     field: keyof T;
     headerName?: string;

package/package.json

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