@nova-design-system/nova-react 3.11.0 → 3.12.0

package/dist/cjs/{nv-menu.entry-Dj2paHp_.js → nv-menu.entry-D7bORqXp.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9kW3hkgy.js');
+var index = require('./index-jBgPO7HC.js');
 require('react');
 
 const nvMenuCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-menu{display:inline-block;position:relative}nv-menu:has([fluid]:not([fluid=false])){display:block}nv-menu nv-popover{display:unset}nv-menu nv-popover [data-scope=popover]{background-color:transparent !important;padding:0 !important}nv-menu [slot=content]{padding:var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);border-radius:var(--menu-contextual-radius);gap:var(--menu-contextual-gap-y);background-color:var(--components-menu-contextual-background);border-color:var(--components-menu-contextual-border);display:flex;flex-direction:column}nv-menu nv-menu[open]:not([open=false])>nv-menuitem{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menu hr{display:block;margin:var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x)}";

package/dist/cjs/{nv-menuitem.entry-DbV-21bC.js → nv-menuitem.entry-CaN6qNoB.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9kW3hkgy.js');
+var index = require('./index-jBgPO7HC.js');
 require('react');
 
 const nvMenuitemCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";

package/dist/cjs/{nv-popover.entry-mefWRuFR.js → nv-popover.entry-DGeXSyhZ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9kW3hkgy.js');
+var index = require('./index-jBgPO7HC.js');
 var stylefire_es74da334a = require('./stylefire.es-74da334a-y0piPjlz.js');
 var fade_animation71e8e34c = require('./fade.animation-71e8e34c-BAw_TYsB.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
@@ -1647,7 +1647,7 @@ const createStore = (defaultState, shouldUpdate) => {
     return map;
 };
 
-const nvPopoverCss = "nv-popover{display:inline-block;position:relative}nv-popover:has([fluid]:not([fluid=false])){display:block}nv-popover>[data-scope=popover]{width:max-content;background-color:var(--components-popover-background);border-color:var(--components-popover-border);font-weight:var(--font-weight-medium-emphasis);border-width:1px;border-style:solid;border-radius:var(--popover-radius);padding:var(--popover-padding-y) var(--popover-padding-x);position:absolute;top:0;left:0;z-index:1;box-shadow:var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity)}nv-popover>[data-scope=popover][hidden]:not([hidden=false]){display:none}nv-popover>[data-scope=popover]>[data-scope=arrow]{background-color:var(--components-popover-background);position:absolute;border-color:var(--components-popover-border);border-width:1px;border-style:solid;border-bottom-color:transparent;border-right-color:transparent;width:8px;height:8px;transform:rotate(45deg);border-radius:1px}nv-popover>[data-scope=popover]>[slot=content]{position:relative;z-index:1}nv-popover>slot-fb{display:none}";
+const nvPopoverCss = "nv-popover{display:inline-block;position:relative}nv-popover:has([fluid]:not([fluid=false])){display:block}nv-popover[strategy=fixed]{position:static}nv-popover>[data-scope=popover]{width:max-content;background-color:var(--components-popover-background);border-color:var(--components-popover-border);font-weight:var(--font-weight-medium-emphasis);border-width:1px;border-style:solid;border-radius:var(--popover-radius);padding:var(--popover-padding-y) var(--popover-padding-x);position:absolute;top:0;left:0;z-index:1;box-shadow:var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity)}nv-popover>[data-scope=popover][hidden]:not([hidden=false]){display:none}nv-popover>[data-scope=popover][data-strategy=fixed]{position:fixed;z-index:9999}nv-popover>[data-scope=popover]>[data-scope=arrow]{background-color:var(--components-popover-background);position:absolute;border-color:var(--components-popover-border);border-width:1px;border-style:solid;border-bottom-color:transparent;border-right-color:transparent;width:8px;height:8px;transform:rotate(45deg);border-radius:1px}nv-popover>[data-scope=popover]>[slot=content]{position:relative;z-index:1}nv-popover>slot-fb{display:none}";
 const NvPopoverStyle0 = nvPopoverCss;
 
 const { state } = createStore({
@@ -1675,6 +1675,15 @@ const NvPopover = class {
          * Defines where the popover appears relative to the trigger.
          */
         this.placement = 'bottom';
+        /**
+         * Sets the positioning strategy for the popover. Options include:
+         * - `absolute`: Positions the popover relative to the trigger element
+         *   (default).
+         * - `fixed`: Positions the popover relative to the viewport, useful when you
+         *   need the popover to break out of overflow hidden containers, it will not
+         *   scroll inside a scroll container due to the fixed positioning.
+         */
+        this.strategy = 'absolute';
         /**
          * Adjust the gap between the popover and its trigger element by setting how
          * many pixels they should be apart.
@@ -1819,6 +1828,7 @@ const NvPopover = class {
             return;
         computePosition(this.triggerElement, this.popoverElement, {
             placement: this.placement,
+            strategy: this.strategy,
             middleware: [
                 offset(this.offset),
                 !this.disableFlip &&
@@ -1830,10 +1840,11 @@ const NvPopover = class {
                 shift({ padding: this.shiftPadding }),
                 this.hasArrow && arrow({ element: this.arrowElement }),
             ],
-        }).then(({ x, y, placement, middlewareData }) => {
+        }).then(({ x, y, placement, middlewareData, strategy }) => {
             Object.assign(this.popoverElement.style, {
                 left: `${x}px`,
                 top: `${y}px`,
+                position: strategy,
             });
             if (this.hasArrow) {
                 const staticSide = {
@@ -1906,6 +1917,11 @@ const NvPopover = class {
         this.isAnimating = false;
         this.openChanged.emit(open);
     }
+    handleStrategyChange() {
+        if (this.open) {
+            this.positionPopover();
+        }
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -1951,11 +1967,12 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '14f8a4ffc146664a2fd00bbfc413494929eec492' }, index.h("slot", { key: 'aaf84cb70beb8f63f030c16c47b41340c238a47c', name: "trigger" }), index.h("div", { key: 'e75b6f6a1131ae9bd39d3a10a1a9801a8c14d756', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '98233b5961fe5476062b671db8274f6802afa700', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '5bf731ff7007e4e1128405a22b9f0c8a16305228', name: "content" }))));
+        return (index.h(index.Host, { key: '290f9c76a0a4db0648061ce3778bec21b5926ae4' }, index.h("slot", { key: 'ca90cba5de160880308dfc12b1f82f0047c57b75', name: "trigger" }), index.h("div", { key: 'f9b5e11a4a6fd63fe1a640acd936cf883fc91563', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '39f7287b5614326cc5eb29be9b94c70f1574671b', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '45ac045f3669f3ebe3e8200bff75b26284e609a6', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "open": ["handleOpenChange"]
+        "open": ["handleOpenChange"],
+        "strategy": ["handleStrategyChange"]
     }; }
 };
 NvPopover.style = NvPopoverStyle0;

package/dist/cjs/{nv-row.entry-Ds7BSvjO.js → nv-row.entry-B17DsCjM.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9kW3hkgy.js');
+var index = require('./index-jBgPO7HC.js');
 require('react');
 
 const nvRowCss = "nv-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--spacing-4) * -1);margin-left:calc(var(--spacing-4) * -1);row-gap:var(--spacing-4)}";

package/dist/cjs/{nv-stack.entry-vlegAAKj.js → nv-stack.entry-Dv3YU4nJ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9kW3hkgy.js');
+var index = require('./index-jBgPO7HC.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 

package/dist/cjs/{nv-table.entry-CiZvYc93.js → nv-table.entry-BILyG-43.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9kW3hkgy.js');
+var index = require('./index-jBgPO7HC.js');
 var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
 require('react');
 

package/dist/cjs/{nv-tablecolumn.entry-ChUzCWVu.js → nv-tablecolumn.entry-II6Z_gdO.js}

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

package/dist/cjs/{nv-toggle.entry-CLY7TxJv.js → nv-toggle.entry-5Wmww2Cd.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-9kW3hkgy.js');
+var index = require('./index-jBgPO7HC.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 
-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:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;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-form-field-border-default);background:var(--components-form-field-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-form-shape-foreground-switch-dot);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-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-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);z-index:111}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-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-form-shape-foreground-default);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-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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 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:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;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-form-field-border-default);background:var(--components-form-field-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-form-shape-foreground-switch-dot);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-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-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-form-field-background-checked);border-color:var(--components-form-field-background-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-form-shape-foreground-default);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-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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 {

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('./index-jBgPO7HC.js');
+require('react');
+
+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);font-size:var(--button-xs-font-size);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=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}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);font-size:var(--button-sm-font-size);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=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}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);font-size:var(--button-md-font-size);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=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}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);font-size:var(--button-lg-font-size);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[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}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 NvTogglebuttonStyle0 = nvTogglebuttonCss;
+
+const NvTogglebutton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggled = index.createEvent(this, "toggled");
+        /****************************************************************************/
+        //#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 EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '81e773d6bafc0fd451fb7e71cb14ca709af2d07e', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '4cec2d6ae5388cdfd285ab15af356e9833b0ccb3' })));
+    }
+};
+NvTogglebutton.style = NvTogglebuttonStyle0;
+
+exports.nv_togglebutton = NvTogglebutton;

package/dist/cjs/{nv-togglebuttongroup.entry-JZNZk6j2.js → nv-togglebuttongroup.entry-C9mplQcb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9kW3hkgy.js');
+var index = require('./index-jBgPO7HC.js');
 require('react');
 
 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)}";

package/dist/cjs/{nv-tooltip.entry-BhwdNKUk.js → nv-tooltip.entry-CcUQrjAv.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9kW3hkgy.js');
+var index = require('./index-jBgPO7HC.js');
 require('react');
 
 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}";
@@ -19,9 +19,18 @@ const NvTooltip = class {
         /**
          * Controls how long (in milliseconds) the tooltip waits to show after you
          * hover over or focus on an element. If you move away before the delay is up,
-         * the tooltip won’t appear.
+         * the tooltip won't appear.
          */
         this.enterDelay = 0;
+        /**
+         * Sets the positioning strategy for the tooltip. Options include:
+         * - `absolute`: Positions the tooltip relative to the trigger element
+         *   (default).
+         * - `fixed`: Positions the tooltip relative to the viewport, useful when you
+         *   need the tooltip to break out of overflow hidden containers, it will not
+         *   scroll inside a scroll container due to the fixed positioning.
+         */
+        this.strategy = 'absolute';
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -36,7 +45,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd4ee448b0dddf4229d3d845d86758a1e794c35e8' }, index.h("slot", { key: '5d24c99b18925e44a8dedd868922227339638e73' }), index.h("nv-popover", { key: '4ee6f08994042689a628c238905484b1aa9de555', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e8ac1f3f739f3b12172884e298494dede993b888', slot: "content" }, this.message), index.h("slot", { key: '96c2e3f5d9b72f5311ebe89e8ebe18274b2bfb13', name: "content" }))));
+        return (index.h(index.Host, { key: '02f95c0f1f41fe11785859fc8f1bf585cbe35af5' }, index.h("slot", { key: '338049b6a5ce354b5ddcba1f183488e2f6b2116e' }), index.h("nv-popover", { key: 'f2e82343908d4e59a3ecf93f791c2756f29714ae', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'ee35eff1233d1d03accdff3260b6d71ef0815d47', slot: "content" }, this.message), index.h("slot", { key: '1a5cdc8a671ea9f3f84cb0414579b9a85a183630', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/generated/components.server.js

@@ -652,6 +652,7 @@ export const NvPopover = createComponent({
         open: 'open',
         triggerMode: 'trigger-mode',
         placement: 'placement',
+        strategy: 'strategy',
         groupName: 'group-name',
         offset: 'offset',
         hasArrow: 'has-arrow',
@@ -747,7 +748,8 @@ export const NvTooltip = createComponent({
     properties: {
         message: 'message',
         placement: 'placement',
-        enterDelay: 'enter-delay'
+        enterDelay: 'enter-delay',
+        strategy: 'strategy'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './generated/components';
+export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './generated/components';
+export * from '@nova-design-system/nova-webcomponents/constants';
 export { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.11.0",
+  "version": "3.12.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",
@@ -33,12 +33,14 @@
     "clean": "rimraf dist lib/generated",
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
+  "dependencies": {
+    "@nova-design-system/nova-webcomponents": "*"
+  },
   "devDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "nova-utils": "*",
     "nova-storybook-utils": "*",
-    "@nova-design-system/nova-webcomponents": "*",
     "@rollup/plugin-commonjs": "28.0.2",
     "@rollup/plugin-node-resolve": "16.0.0",
     "@rollup/plugin-typescript": "12.1.2"