@nova-design-system/nova-react 3.22.0 → 3.24.0

package/dist/cjs/{nv-table.entry-DevWJBnL.js → nv-table.entry-DH85n8Mc.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-kU2nW5aN.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
@@ -67,7 +68,7 @@ function calculateNewWidth(startWidth, delta, minWidth = TABLE_CONSTANTS.MIN_W)
  * @returns {element is HTMLTableCellElement} Type guard for table cell elements
  */
 function isValidTableCell(element) {
-    return (element === null || element === void 0 ? void 0 : element.tagName) === 'TH' || (element === null || element === void 0 ? void 0 : element.tagName) === 'TD';
+    return element?.tagName === 'TH' || element?.tagName === 'TD';
 }
 /**
  * Finds the closest table cell element from an event target
@@ -87,12 +88,11 @@ function getClosestTableCell(target) {
  * @returns {boolean} True if capture was successfully set
  */
 function setPointerCapture(cell, pointerId) {
-    var _a;
     try {
-        (_a = cell.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        cell.setPointerCapture?.(pointerId);
         return true;
     }
-    catch (_b) {
+    catch {
         return false;
     }
 }
@@ -103,12 +103,11 @@ function setPointerCapture(cell, pointerId) {
  * @returns {boolean} True if release was successful
  */
 function releasePointerCapture(cell, pointerId) {
-    var _a;
     try {
-        (_a = cell.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
+        cell.releasePointerCapture?.(pointerId);
         return true;
     }
-    catch (_b) {
+    catch {
         return false;
     }
 }
@@ -180,7 +179,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) {
@@ -236,10 +234,10 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '684a51e016d83eeb0ab76f07fe6d26a06bf00457' }, index.h("slot", { key: '420b9cbcb641692ed95d54ec2e0af1c0b09776c3' })));
+        return (index.h(index.Host, { key: '6d13efcd059cca60b2f6bc092b75b65e36738913' }, index.h("slot", { key: '33c715acec9e561586c9059f20e77b403307c134' })));
     }
     get host() { return index.getElement(this); }
 };
-NvTable.style = NvTableStyle0;
+NvTable.style = nvTableCss;
 
 exports.nv_table = NvTable;

package/dist/cjs/{nv-tableheader.entry-Hs7nUSOC.js → nv-tableheader.entry-CKfocdxD.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-kU2nW5aN.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
         /**
@@ -31,7 +31,7 @@ const NvTableheader = class {
     cycleSortDirection(e) {
         if (!this.sortable)
             return;
-        e === null || e === void 0 ? void 0 : e.preventDefault();
+        e?.preventDefault();
         const next = {
             none: 'asc',
             asc: 'desc',
@@ -62,7 +62,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '03d7e74c19c0c1ef54f4d6f53eab0964af821f57', 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: '7408d11ba38b59f05bcdcffcb55d11ae36f93a34' }), this.sortable && (index.h("span", { key: 'c76ddbf61861d9cd45eb7b0d8c59095947677135', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '6d59b4b14dfe588142ccba2e1dc452754ea5a2f7', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: 'ae56ba389e554b3b555a1f29dba6a2c434e4a0ea', 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: '55efe6331ebcbde6b9b37f7d8dec610e444dc4b1' }), this.sortable && (index.h("span", { key: 'ecde17447218e6d462504cb10bdc8b95266ce402', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: 'c6e18e4149d2805cb16d5a79ec29db85a656b42c', 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-Eje9d--6.js → nv-toggle.entry-BHUl76Im.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+var index = require('./index-kU2nW5aN.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: 'c4307e84431894271a4fbe3ccd236f8b26d8d499', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'edb8c0ba8d92aa3864ff778a037bfb148601663a', class: "input-container" }, index.h("input", { key: 'f8be6f1936b390acdfaab0a87acea69d479e7a5a', 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: 'c9dae62cda7d33fcd3dc4e1a2fd8173295a32ed3', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '365ed61ccd3ca72372998b4a3fc58d36de944f3a', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '77ee33f84756787e0f34507da294abb9514b703d', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5076c7b3cbf9f820592bb339df3251e280a9be9c', class: "description" }, index.h("slot", { key: '75f461109ac021aa51e6717ab56b1319a2b7f6ca', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: 'bf104d1513a3cf741c6b42ab48554c40d19263d1', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '8c7e9684887e0d454a69101fb83f290d26236841', class: "input-container" }, index.h("input", { key: '5771d8999e03247600a2b98d0eae985ff0345e28', 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: '8c95821037235c2eab053bce5bb7a0dc15173ea4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '36c1d110f4c9151e1d05c665546f01f323999b15', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '4fe3f5fab8c1a20480c9eba085221afc36caae73', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '63dc983d3b09327f57bd62feb7a25865f90390a7', class: "description" }, index.h("slot", { key: 'e85b616e8bf1301e53f62a2c4e1ea87675b1dcff', 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-D_9COjY-.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.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) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));border-radius:var(--togglegroup-xs-button-radius);height:calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));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) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-sm-button-radius) + 1px);height:calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));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) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-md-button-radius) + 1px);height:calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));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) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-lg-button-radius) + 1px);height:calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));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: 'af68f5f4887be35f48bb74f15f597e7fe575b3fd', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '624ab0edc86bf9b5686f3f99097adf82ea972764' })));
+    }
+    get el() { return index.getElement(this); }
+};
+NvTogglebutton.style = nvTogglebuttonCss;
+
+exports.nv_togglebutton = NvTogglebutton;

package/dist/cjs/{nv-togglebuttongroup.entry-CWN_Ucry.js → nv-togglebuttongroup.entry-C0NLbsq7.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-kU2nW5aN.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 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);height:var(--togglegroup-xs-height)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius);height:var(--togglegroup-sm-height)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius);height:var(--togglegroup-md-height)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);height:var(--togglegroup-lg-height)}";
 
 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.
          */
@@ -38,11 +38,10 @@ const NvTogglebuttongroup = class {
          */
         this.setActiveToggleButtons = () => {
             this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {
-                var _a;
                 const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);
                 if (!btn)
                     return;
-                btn.active = ((_a = this.value) !== null && _a !== void 0 ? _a : []).includes(btn.value);
+                btn.active = (this.value ?? []).includes(btn.value);
             });
         };
         /**
@@ -113,7 +112,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 +139,7 @@ const NvTogglebuttongroup = class {
         }
         this.value = [...valueSet];
     }
+    /* eslint-enable nova/native-event-listener */
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -156,7 +158,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8b42c5392c429b249ccc8be4f97fa6eccf4e2383' }, index.h("slot", { key: '78046dc23352a3fab760cc3c1b53edc47e16d48b' })));
+        return (index.h(index.Host, { key: '2d4f46a06045c84018b0a5c296b2eb19c2803d7a' }, index.h("slot", { key: '4f387071fe030057df13c6b3ff5e6f480fcd339b' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -165,6 +167,6 @@ const NvTogglebuttongroup = class {
         "size": ["onSizeChanged"]
     }; }
 };
-NvTogglebuttongroup.style = NvTogglebuttongroupStyle0;
+NvTogglebuttongroup.style = nvTogglebuttongroupCss;
 
 exports.nv_togglebuttongroup = NvTogglebuttongroup;

package/dist/cjs/{nv-tooltip.entry-BGkKDEFg.js → nv-tooltip.entry-BfViGE_U.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
+var index = require('./index-kU2nW5aN.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: 'f0560549d1168fed22c4e48a2e11be5dda49f005' }, index.h("slot", { key: '698227e9bea7ea94eff00ff72f124656ed11624d' }), index.h("nv-popover", { key: 'df4ddd77e40b4998a32e166710a2ff27a1e0c216', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'b8fc42997671fafc15173bce2fdf7dec667d76e5', slot: "content" }, this.message), index.h("slot", { key: '5b8a27ff474367ba2e5771deb62137e40f5d911d', name: "content" }))));
+        return (index.h(index.Host, { key: '3b0a7e6159b2e0a23af58ad0e8e3567f05373954' }, index.h("slot", { key: 'bfb982166e2f6f96c11cc745905a3c0ffd8f575e' }), index.h("nv-popover", { key: 'c14b0fa83f861ae828b14ab16cbd562dde6032ba', 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: '67701f81afc4c2e36f8ab7266aee3f2e457a4755', slot: "content" }, this.message), index.h("slot", { key: 'c57c2463744e2e2afc5bbd64c4838a733a77aca9', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };
-NvTooltip.style = NvTooltipStyle0;
+NvTooltip.style = nvTooltipCss;
 
 exports.nv_tooltip = NvTooltip;

package/dist/cjs/slide.animation-CmH5d1of-BZuw607U.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+var styleValueTypes_esXlgmw4x8 = require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+
+const useSlide = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = fade_animationDcRL9lcm.index(node);
+    /**
+     * Will animate the translateX property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateX property.
+     * @param {number} options.to - The ending value for the translateX property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
+     */
+    const slideX = (options = { from: 0, to: 100 }) => () => {
+        return new Promise(resolve => {
+            styleValueTypes_esXlgmw4x8.animate({
+                from: { x: options.from },
+                to: { x: options.to },
+                ease: styleValueTypes_esXlgmw4x8.easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    };
+    /**
+     * Will animate the translateY property.
+     *
+     * @param {object} options - The options for the animation.
+     * @param {number} options.from - The starting value for the translateY property.
+     * @param {number} options.to - The ending value for the translateY property.
+     * @returns {Promise<void>} - A promise that resolves when the animation is
+     * complete.
+     */
+    const slideY = (options = { from: 0, to: 100 }) => () => {
+        return new Promise(resolve => {
+            styleValueTypes_esXlgmw4x8.animate({
+                from: { y: options.from },
+                to: { y: options.to },
+                ease: styleValueTypes_esXlgmw4x8.easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateY(${latest.y}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    };
+    /**
+     * Applies the slideX styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideX styles.
+     */
+    const setSlideX = (amount = 100) => nodeStyler.set({ transform: `translateX(${amount}%)` });
+    /**
+     * Applies the slideY styles without animating, useful when initial state
+     * is slid out.
+     *
+     * @param {number} amount - The amount to translate the element by.
+     * @returns {function} - A function that applies the slideY styles.
+     */
+    const setSlideY = (amount = 100) => nodeStyler.set({ transform: `translateY(${amount}%)` });
+    /**
+     * Applies the slideIn styles without animating, useful when initial state
+     * is slid in.
+     */
+    function setSlideReset() {
+        nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });
+    }
+    return {
+        slideX,
+        slideY,
+        setSlideX,
+        setSlideY,
+        setSlideReset,
+    };
+};
+
+exports.useSlide = useSlide;

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
 };