@nova-design-system/nova-react 3.21.1-beta.0 → 3.23.0

package/dist/cjs/{nv-table.entry-quaVnLru.js → nv-table.entry-DkbNgxtI.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
@@ -180,7 +181,6 @@ function updateCellWidthFromResize(state, event, minWidth = TABLE_CONSTANTS.MIN_
 }
 
 const nvTableCss = "nv-table table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;background:var(--color-level-00-background)}nv-table table thead{background:var(--components-datagrid-header-background)}nv-table table tbody tr:hover td{background:var(--components-datagrid-body-background-hover)}nv-table table tbody tr[data-selected]{background:var(--components-datagrid-body-background-active)}nv-table table td{height:var(--spacing-16);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x) var(--spacing-2) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);background:var(--components-datagrid-body-background-default);border-bottom:1px solid var(--components-datagrid-body-border)}nv-table table th{position:relative;text-align:left;padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-right) var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);padding-right:calc(var(--datagrid-cell-header-padding-right) + 12px);color:var(--color-content-low-text);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-high-emphasis);line-height:var(--line-height-base);min-width:40px;border-bottom:1px solid var(--components-datagrid-header-border);background:var(--components-datagrid-header-background)}nv-table table th::after{content:\"\";position:absolute;top:0;right:0;width:12px;height:50%;transform:translateY(50%);cursor:col-resize;background:linear-gradient(90deg, transparent 0%, transparent calc(50% - 1px), var(--components-datagrid-header-border), calc(50% - 1px), var(--components-datagrid-header-border) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);opacity:0;transition:opacity 0.05s ease-in-out}nv-table table th[data-grow]{width:unset}nv-table table th:hover::after{opacity:1}nv-table table th[data-no-resize]::after{display:none}nv-table [data-sticky-left]{position:sticky;z-index:1;background:var(--color-level-00-background);left:0;top:0}nv-table [data-sticky-right]{position:sticky;z-index:1;background:var(--color-level-00-background);right:0;top:0}nv-table [data-sticky-top] th{position:sticky;z-index:1;background:var(--color-level-00-background);top:0}";
-const NvTableStyle0 = nvTableCss;
 
 const NvTable = class {
     constructor(hostRef) {
@@ -240,6 +240,6 @@ const NvTable = class {
     }
     get host() { return index.getElement(this); }
 };
-NvTable.style = NvTableStyle0;
+NvTable.style = nvTableCss;
 
 exports.nv_table = NvTable;

package/dist/cjs/{nv-tableheader.entry-DTBE2XQO.js → nv-tableheader.entry-CRVFTQA-.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvTableheaderCss = "nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}";
-const NvTableheaderStyle0 = nvTableheaderCss;
+const nvTableheaderCss = "nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}";
 
 const NvTableheader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sortDirectionChanged = index.createEvent(this, "sortDirectionChanged");
+        this.sortDirectionChanged = index.createEvent(this, "sortDirectionChanged", 3);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -62,7 +62,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '6719336a9812b1d1abd161b955b841c1459fb584', 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: 'd559e3b7c74f6dcf8197e2d082310660a23291d6' }), this.sortable && (index.h("span", { key: '540c8c8cf3cccac47a3ece7d9be4e97c4e283690', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: 'ac713c7af3b5b2e452f02d0d77cb64398b0febd4', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: '89ea12419a6f07d3b945a2dec3ca40a169d1bf85', 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: '447c9f44b779cb7003209c3965127433e33f1ea9' }), this.sortable && (index.h("span", { key: 'bb4d1545d83b5fd2ce0b6860cdabbe22fe0f8ed0', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '03b14162d5a1f2e8cccc5fa2e49af9cdd247d4e7', 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',
@@ -70,6 +70,6 @@ const NvTableheader = class {
             } })))));
     }
 };
-NvTableheader.style = NvTableheaderStyle0;
+NvTableheader.style = nvTableheaderCss;
 
 exports.nv_tableheader = NvTableheader;

package/dist/cjs/{nv-toggle.entry-CxUwF0pb.js → nv-toggle.entry-oC9TVkr1.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+var index = require('./index-CtjeeUI-.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 NvToggleStyle0 = nvToggleCss;
 
 const NvToggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -21,7 +21,7 @@ const NvToggle = class {
          * automatically generated to ensure unique identification, facilitating
          * proper label association and accessibility.
          */
-        this.inputId = v4A79185f4.v4();
+        this.inputId = v4BdYh22OP.v4();
         /**
          * Hides the label visually while still keeping it available for screen
          * readers.
@@ -66,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '1a217a31999750cb1c8f26af5407ef2d7277600c', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '35e39e8df6475ffa41cd8b811948454ba956e814', class: "input-container" }, index.h("input", { key: '359a584d868d37affcb7b5fe5c24fef71eae209e', 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: '3bc4c7d7ef8bca23391ede4b08eb596bab68289a', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '61be38f883222b69807c0e8b8540f6ad20ed0cf4', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'e5ad1f81fc6e98794931b5e6dc811d9cc6aa9c73', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f1f0d41c28be40b24e17d9f6f29224fbb2f9f05e', class: "description" }, index.h("slot", { key: '5418c3c3195045200e9ad0eb4bc6438eee453fd9', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: 'afeeed468bea015c59cdab86f85ee3b0145f8b11', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'fd56a2b878f063549315f5b48fe1eb7b249a3503', class: "input-container" }, index.h("input", { key: '8e0a260d2c80bb303ff9b1f1921290060ef5c92c', 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: '906d8bd545bffcc8f2e4deee3f760ae1366aa8b2', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fa2e7120d3f8f0dedd7ef953a7648aa1dca80ec4', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '598eb4b920bbc37c6dba5862e65221b586714728', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'fb4769f30a05fe2e953759990ff8922ebc906452', class: "description" }, index.h("slot", { key: '1e847c839e147d3a9aff41296e5d1d84266be9f5', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -75,6 +75,6 @@ const NvToggle = class {
         "checked": ["onCheckedChanged"]
     }; }
 };
-NvToggle.style = NvToggleStyle0;
+NvToggle.style = nvToggleCss;
 
 exports.nv_toggle = NvToggle;

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

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvTogglebuttonCss = "nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-xs-button-radius));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-sm-button-radius));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-md-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-md-button-radius));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - 1px);padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - 1px);border-radius:calc(var(--togglegroup-lg-button-radius));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}";
+
+const NvTogglebutton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggled = index.createEvent(this, "toggled", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Determines how large or small the togglebutton appears, allowing for
+         * customization of the togglebutton's dimensions to fit different design
+         * specifications and user needs.
+         */
+        this.size = 'md';
+        /**
+         * Prevents all interaction, rendering the toggle in a non-interactive state.
+         */
+        this.disabled = false;
+        /**
+         * Whether the button is active or not. Will not toggle automatically but
+         * needs to be controlled externally.
+         */
+        this.active = false;
+        /**
+         * Make it more or less visually prominent to users.
+         */
+        this.emphasis = 'high';
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.toggled.emit({
+                value: this.value,
+                active: this.active,
+            });
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LISTENERS
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.el.click();
+        }
+    }
+    /* eslint-enable nova/event-bubbling */
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '0285637cb14c292c67d767dc83b72f52c5368269', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'a84f303e76070b99ff2c01e5ec400f2e78503b19' })));
+    }
+    get el() { return index.getElement(this); }
+};
+NvTogglebutton.style = nvTogglebuttonCss;
+
+exports.nv_togglebutton = NvTogglebutton;

package/dist/cjs/{nv-togglebuttongroup.entry-UbrE8y7a.js → nv-togglebuttongroup.entry-BYXX5ejg.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvTogglebuttongroupCss = "nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius)}";
-const NvTogglebuttongroupStyle0 = nvTogglebuttongroupCss;
 
 const NvTogglebuttongroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChanged = index.createEvent(this, "valueChanged");
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
         /**
          * Activates single-selection mode so only one button can be active at a time.
          */
@@ -113,7 +113,9 @@ const NvTogglebuttongroup = class {
     onSizeChanged() {
         this.setSizeToggleButtons();
     }
+    /* eslint-disable nova/native-event-listener */
     onToggled(event) {
+        event.stopPropagation();
         const valueSet = new Set(this.value);
         if (this.exclusive && this.enforceValue) {
             this.value = [event.detail.value];
@@ -138,6 +140,7 @@ const NvTogglebuttongroup = class {
         }
         this.value = [...valueSet];
     }
+    /* eslint-enable nova/native-event-listener */
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -156,7 +159,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b7c5cb46244f10a93330dc601d0347e3cb53c276' }, index.h("slot", { key: '0808ec94f479f52f60b50ac14ce1a4eb989e5778' })));
+        return (index.h(index.Host, { key: '0ed4a7f3ddaaebf6747e8f0798913cca4117f2cb' }, index.h("slot", { key: '8ea87065c312f52a1f23873d19724d57147e80b2' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -165,6 +168,6 @@ const NvTogglebuttongroup = class {
         "size": ["onSizeChanged"]
     }; }
 };
-NvTogglebuttongroup.style = NvTogglebuttongroupStyle0;
+NvTogglebuttongroup.style = nvTogglebuttongroupCss;
 
 exports.nv_togglebuttongroup = NvTogglebuttongroup;

package/dist/cjs/{nv-tooltip.entry-Dq2bkV33.js → nv-tooltip.entry-OJGxfJEh.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
+var index = require('./index-CtjeeUI-.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 NvTooltipStyle0 = nvTooltipCss;
 
 const NvTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.openChanged = index.createEvent(this, "openChanged");
+        this.openChanged = index.createEvent(this, "openChanged", 3);
         /**
          * Decides where the tooltip shows up next to the element it’s linked to
          * (above, below, to the sides). If there isn’t enough room, it will adjust
@@ -46,10 +46,10 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ff1ca24735ec78d279cdc2f98cb54c0d6a7b4103' }, index.h("slot", { key: '3e0676a49b957ecb6eb3e0e6bfc1d8d8f0d2e02a' }), index.h("nv-popover", { key: '063fb414e47a1a6b722ee8b61f3dd68a61c5b7df', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'a8714211a3a5c723d187acdcb23484610bd91a36', slot: "content" }, this.message), index.h("slot", { key: 'edae83eb3c0f5c57b9b7263ccc139463b044f68e', name: "content" }))));
+        return (index.h(index.Host, { key: '380e3306103dcf66291757972a47ba1ffaf8068c' }, index.h("slot", { key: 'ca3481b10e2ed73751c892711f8482809a274037' }), index.h("nv-popover", { key: 'e89838624b171e3d1eadf764e4ab14e003225dc9', 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: 'c103df8cf9891fef763de2aa706dec5bb90f8346', slot: "content" }, this.message), index.h("slot", { key: '2e2dcc84b21ab1c46cf980a507f0b13e8350b4d6', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };
-NvTooltip.style = NvTooltipStyle0;
+NvTooltip.style = nvTooltipCss;
 
 exports.nv_tooltip = NvTooltip;

package/dist/cjs/{style-value-types.es-f5d10b79-D0QCM8OB.js → style-value-types.es-xlgmw4x8-B1vLqX9m.js}

@@ -14,6 +14,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise */
+
 
 function __rest$1(s, e) {
     var t = {};
@@ -635,6 +637,7 @@ function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {})
 const reverseEasing = easing => p => 1 - easing(1 - p);
 const mirrorEasing = easing => p => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
 const createExpoIn = (power) => p => Math.pow(p, power);
+
 const easeIn = createExpoIn(2);
 const easeOut = reverseEasing(easeIn);
 const easeInOut = mirrorEasing(easeIn);
@@ -837,8 +840,6 @@ const startLoop = () => {
         onNextFrame(processFrame);
 };
 
-const sync$1 = sync;
-
 function loopElapsed(elapsed, duration, delay = 0) {
     return elapsed - duration - delay;
 }
@@ -854,7 +855,7 @@ function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
 const framesync = (update) => {
     const passTimestamp = ({ delta }) => update(delta);
     return {
-        start: () => sync$1.update(passTimestamp, true),
+        start: () => sync.update(passTimestamp, true),
         stop: () => cancelSync.update(passTimestamp),
     };
 };
@@ -947,6 +948,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise */
+
 
 exports.__assign = function() {
     exports.__assign = Object.assign || function __assign(t) {

package/dist/cjs/{v4-a79185f4-2n0dOd_Y.js → v4-BdYh22OP-C1vaJ4yP.js}

@@ -36,7 +36,7 @@ function rng() {
 }
 
 var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const native = {
+var native = {
   randomUUID
 };
 

package/dist/components/NvDatatable/NvDatatable.js

@@ -1,13 +1,39 @@
-import React, { useMemo, useState, useEffect, useRef } from 'react';
-import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import React, { useMemo, useState, useEffect, useRef, useCallback, } from 'react';
+import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
 import { NvTable, NvTableheader } from '../../generated/components';
-function NvDatatable({ columns, rows, pagination, sorting, renderPagination, stickyHeader, ...htmlProps }) {
+function NvDatatable({ columns, rows, pagination, sorting, filtering, renderPagination, renderFiltering, stickyHeader, ...htmlProps }) {
     const [paginationState, setPaginationState] = useState({
         pageIndex: 0,
         pageSize: pagination?.initialPageSize || 10,
     });
     const [sortingState, setSortingState] = useState(sorting?.sortState || []);
+    const [globalFilterState, setGlobalFilterState] = useState(filtering?.filterState);
     const lastRowRef = useRef(null);
+    const debouncedSetFilter = useRef(null);
+    const setGlobalFilterDebounced = useCallback((value) => {
+        const debounceMs = filtering?.debounceMs ?? 300;
+        if (debouncedSetFilter.current) {
+            clearTimeout(debouncedSetFilter.current);
+        }
+        debouncedSetFilter.current = setTimeout(() => {
+            setGlobalFilterState(value);
+            if (filtering?.mode === 'server' && filtering.onFilterChange) {
+                filtering.onFilterChange(value);
+            }
+        }, debounceMs);
+    }, [filtering]);
+    useEffect(() => {
+        return () => {
+            if (debouncedSetFilter.current) {
+                clearTimeout(debouncedSetFilter.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (filtering?.filterState !== undefined) {
+            setGlobalFilterState(filtering.filterState);
+        }
+    }, [filtering?.filterState]);
     const tableColumns = useMemo(() => columns
         .filter((col) => !col.hidden)
         .map((col) => {
@@ -64,6 +90,7 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
             ...(sorting && {
                 state: {
                     sorting: sorting.sortState || sortingState,
+                    ...(filtering && { globalFilter: globalFilterState }),
                 },
                 onSortingChange: sorting.mode === 'server'
                     ? (updater) => {
@@ -83,6 +110,23 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
                 isMultiSortEvent: sorting.enableMultiSort ? () => true : undefined,
                 getSortedRowModel: sorting.mode === 'client' ? getSortedRowModel() : undefined,
             }),
+            ...(filtering && {
+                state: {
+                    ...(sorting && { sorting: sorting.sortState || sortingState }),
+                    globalFilter: globalFilterState,
+                },
+                onGlobalFilterChange: (updater) => {
+                    const newFilter = typeof updater === 'function'
+                        ? updater(globalFilterState)
+                        : updater;
+                    setGlobalFilterState(newFilter);
+                    if (filtering.mode === 'server' && filtering.onFilterChange) {
+                        filtering.onFilterChange(newFilter);
+                    }
+                },
+                globalFilterFn: filtering.globalFilterFn,
+                getFilteredRowModel: filtering.mode === 'client' ? getFilteredRowModel() : undefined,
+            }),
         };
         if (!pagination) {
             return baseConfig;
@@ -120,7 +164,16 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
             };
         }
         return baseConfig;
-    }, [rows, tableColumns, pagination, paginationState, sorting, sortingState]);
+    }, [
+        rows,
+        tableColumns,
+        pagination,
+        paginationState,
+        sorting,
+        sortingState,
+        filtering,
+        globalFilterState,
+    ]);
     const table = useReactTable(tableConfig);
     useEffect(() => {
         if (pagination?.mode === 'server' && pagination.onPaginationChange) {
@@ -180,7 +233,27 @@ function NvDatatable({ columns, rows, pagination, sorting, renderPagination, sti
     }, [pagination, table, rows.length, tablePaginationState]);
     const tableRows = table.getRowModel().rows;
     const isInfiniteScroll = pagination?.mode === 'infinite';
+    const filteringAPI = useMemo(() => {
+        if (!filtering) {
+            return null;
+        }
+        const preFilteredRowModel = table.getPreFilteredRowModel();
+        const filteredRowModel = table.getFilteredRowModel();
+        return {
+            filterState: globalFilterState,
+            setGlobalFilter: setGlobalFilterDebounced,
+            resetFilters: () => {
+                setGlobalFilterState(undefined);
+                if (filtering.onFilterChange) {
+                    filtering.onFilterChange(undefined);
+                }
+            },
+            totalRows: preFilteredRowModel.rows.length,
+            filteredRows: filteredRowModel.rows.length,
+        };
+    }, [filtering, globalFilterState, table, setGlobalFilterDebounced]);
     return (React.createElement(React.Fragment, null,
+        filteringAPI && renderFiltering && renderFiltering(filteringAPI),
         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) => {