@nova-design-system/nova-react 3.13.0 → 3.14.0-beta.0

package/dist/cjs/{nv-menuitem.entry-PBCNIzPI.js → nv-menuitem.entry-SQBrWIYf.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
+var index = require('./index-CJDePE8Z.js');
 require('react');
+require('react-dom');
 
 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)}";
 const NvMenuitemStyle0 = nvMenuitemCss;

package/dist/cjs/nv-notification.entry-DnCew-lG.js

@@ -0,0 +1,262 @@
+'use strict';
+
+var index = require('./index-CJDePE8Z.js');
+var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
+var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
+var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
+var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
+var timeline_animation79215cd4 = require('./timeline.animation-79215cd4-KteJaZPb.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+require('react-dom');
+
+const useSlide = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = fade_animation9b939939.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_esF5d10b79.animate({
+                from: { x: options.from },
+                to: { x: options.to },
+                ease: styleValueTypes_esF5d10b79.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_esF5d10b79.animate({
+                from: { y: options.from },
+                to: { y: options.to },
+                ease: styleValueTypes_esF5d10b79.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,
+    };
+};
+
+const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container] [data-scope=icon]{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:500;line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}nv-notification[feedback=information] [data-scope=container]{background-color:var(--components-notification-information-background);border-color:var(--components-notification-information-border)}nv-notification[feedback=information] [data-scope=container] [data-scope=icon]{color:var(--components-notification-information-icon)}nv-notification[feedback=information]>[data-scope=close]:focus,nv-notification[feedback=information]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=warning] [data-scope=container]{background-color:var(--components-notification-warning-background);border-color:var(--components-notification-warning-border)}nv-notification[feedback=warning] [data-scope=container] [data-scope=icon]{color:var(--components-notification-warning-icon)}nv-notification[feedback=warning]>[data-scope=close]:focus,nv-notification[feedback=warning]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=error] [data-scope=container]{background-color:var(--components-notification-error-background);border-color:var(--components-notification-error-border)}nv-notification[feedback=error] [data-scope=container] [data-scope=icon]{color:var(--components-notification-error-icon)}nv-notification[feedback=error]>[data-scope=close]:focus,nv-notification[feedback=error]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=success] [data-scope=container]{background-color:var(--components-notification-success-background);border-color:var(--components-notification-success-border)}nv-notification[feedback=success] [data-scope=container] [data-scope=icon]{color:var(--components-notification-success-icon)}nv-notification[feedback=success]>[data-scope=close]:focus,nv-notification[feedback=success]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=neutral] [data-scope=container]{background-color:var(--components-notification-neutral-background);border-color:var(--components-notification-neutral-border)}nv-notification[feedback=neutral] [data-scope=container] [data-scope=icon]{color:var(--components-notification-neutral-icon)}nv-notification[feedback=neutral]>[data-scope=close]:focus,nv-notification[feedback=neutral]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}";
+const NvNotificationStyle0 = nvNotificationCss;
+
+const NvNotification = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Set a unique ID for the notification. Used for aria attributes and managing
+         * multiple notifications.
+         */
+        this.uid = v4A79185f4.v4();
+        /**
+         * Specifies the notification type which determines the color and default icon.
+         */
+        this.feedback = 'information';
+        /**
+         * Adjusts the emphasis to make the notification more or less visually
+         * prominent to users. Use this to draw attention to important actions or
+         * reduce focus on less critical ones
+         */
+        this.emphasis = 'medium';
+        /**
+         * Allows the notification to be dismissed via a close button (x). The
+         * notification is not dismissible unless explicitly enabled.
+         */
+        this.dismissible = false;
+        /**
+         * Controls the visibility of the notification.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        /**
+         * When true, the notification will be hidden initially, but internal changes
+         * will not be in a controlled state. Good for animating the notification in.
+         */
+        this.initiallyHidden = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region INTERNAL
+        this.iconByFeedback = {
+            [constants69bafca2.FeedbackColors.Warning]: 'alert-circle',
+            [constants69bafca2.FeedbackColors.Information]: 'info-circle',
+            [constants69bafca2.FeedbackColors.Success]: 'circle-check',
+            [constants69bafca2.FeedbackColors.Error]: 'alert-triangle',
+            [constants69bafca2.FeedbackColors.Neutral]: 'help',
+        };
+        this.roleByFeedback = {
+            [constants69bafca2.FeedbackColors.Error]: 'alert',
+            [constants69bafca2.FeedbackColors.Warning]: 'alert',
+            [constants69bafca2.FeedbackColors.Information]: 'status',
+            [constants69bafca2.FeedbackColors.Success]: 'status',
+            [constants69bafca2.FeedbackColors.Neutral]: 'status',
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Dismisses the notification with an animation, after the animation is
+     * complete, the hiddenChanged event will be emitted with the value of true,
+     * and the hidden prop will be set to true.
+     */
+    async dismiss() {
+        await this.dismissAnimation();
+    }
+    /**
+     * Sets the hidden prop to false, and shows the notification with an
+     * animation, after the animation is complete, the hiddenChanged event will be
+     * emitted with the value of false.
+     */
+    async show() {
+        await this.showAnimation();
+    }
+    getDefaultIcon() {
+        var _a;
+        return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
+    }
+    getAriaRole() {
+        var _a;
+        return (_a = this.roleByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'status';
+    }
+    getAriaLive() {
+        return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';
+    }
+    getHeadingId() {
+        return this.heading ? `nv-notification-${this.uid}-heading` : null;
+    }
+    getMessageId() {
+        return this.message ? `nv-notification-${this.uid}-message` : null;
+    }
+    async showAnimation() {
+        this.hidden = false;
+        const { setFadeIn } = fade_animation9b939939.useFade(this.container);
+        const { expand } = collapse_animation6e0b08df.useCollapse(this.el, {
+            duration: 300,
+            overflow: 'visible',
+        });
+        const { slideY, setSlideY } = useSlide(this.container, {
+            duration: 300,
+        });
+        setSlideY(-100);
+        setFadeIn();
+        await timeline_animation79215cd4.parallel(slideY({ from: -100, to: 0 }), expand).start();
+        this.hiddenChanged.emit(false);
+    }
+    getSlideDestination(pos) {
+        switch (pos) {
+            case constants69bafca2.NotificationPosition.TopRight:
+            case constants69bafca2.NotificationPosition.BottomRight:
+                return { axis: 'x', to: 100 }; // right
+            case constants69bafca2.NotificationPosition.TopLeft:
+            case constants69bafca2.NotificationPosition.BottomLeft:
+                return { axis: 'x', to: -100 }; // left
+            case constants69bafca2.NotificationPosition.TopCenter:
+                return { axis: 'y', to: -100 }; // up
+            case constants69bafca2.NotificationPosition.BottomCenter:
+                return { axis: 'y', to: 100 }; // down
+            default:
+                return { axis: 'x', to: 100 }; // fallback
+        }
+    }
+    async dismissAnimation() {
+        var _a;
+        const position = (_a = this.el
+            .closest('nv-notificationcontainer')) === null || _a === void 0 ? void 0 : _a.getAttribute('position');
+        const destination = this.getSlideDestination(position);
+        const { fadeOut } = fade_animation9b939939.useFade(this.container, { duration: 300 });
+        const { slideX, slideY, setSlideReset } = useSlide(this.container, {
+            duration: 500,
+        });
+        const { collapse } = collapse_animation6e0b08df.useCollapse(this.el, {
+            duration: 500,
+            overflow: 'visible',
+        });
+        const slide = destination.axis === 'x'
+            ? slideX({ from: 0, to: destination.to })
+            : slideY({ from: 0, to: destination.to });
+        setSlideReset();
+        await timeline_animation79215cd4.parallel(fadeOut, slide, collapse).start();
+        this.hidden = true;
+        this.hiddenChanged.emit(true);
+    }
+    //#endregion INTERNAL
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.headingSlot = this.el.querySelector('[slot="heading"]');
+        this.messageSlot = this.el.querySelector('[slot="content"]');
+        this.actionsSlot = this.el.querySelector('[slot="actions"]');
+        if (this.initiallyHidden)
+            this.hidden = true;
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        var _a, _b, _c;
+        return (index.h(index.Host, { key: '6e0b8abd9cbcb62b0b133db77520aa5aaa4173c9', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, index.h("div", { key: '41b2ad35bf5220333e132d61f8843d1136cb1f40', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '63116f239f7108ae945845c247c712827d8ae8a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: 'dc19bf166c6d2eccd3d40384d43206457f0d03f0', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'e673ac1cc78300bc3425018a0cdfc4b90c679796', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: '95cb6ec06d89cda8e5170f9ff0f863b6b0b7e32d', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: 'ed654c0271d2ff8538295d8f7bf58a9754abb4c9', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: '00cc14a709059b9caf2117174ef7fcc310f5965f', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: 'c7c0bcbc2b54fdfdf8280af6a377929bf17fd688', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '946db5aeb667b67f52f51adbb1b8f600325f937e', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: 'd94560b658507a515a1360057121e933b95e6fe6', "data-scope": "actions" }, index.h("slot", { key: 'db185d3924c7d1fbeb30578992f2375e92a0d4bc', name: "actions" })))))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvNotification.style = NvNotificationStyle0;
+
+exports.nv_notification = NvNotification;

package/dist/cjs/nv-notificationcontainer.entry-Dwlv9s1v.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var index = require('./index-CJDePE8Z.js');
+require('react');
+require('react-dom');
+
+const nvNotificationcontainerCss = "nv-notificationcontainer{position:fixed;display:flex;flex-direction:column;padding:var(--spacing-2);padding-top:0;z-index:9999;pointer-events:none;width:100%;max-width:512px}nv-notificationcontainer.position-top-right{top:0;right:0}nv-notificationcontainer.position-top-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-top-left{top:0;left:0}nv-notificationcontainer.position-top-left nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-top-center{top:0;left:50%;transform:translateX(-50%)}nv-notificationcontainer.position-top-center nv-notification{margin-bottom:var(--spacing-2)}nv-notificationcontainer.position-bottom-right{bottom:0;right:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-right nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-left{bottom:0;left:0;flex-direction:column-reverse}nv-notificationcontainer.position-bottom-left nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer.position-bottom-center{bottom:0;left:50%;transform:translateX(-50%);flex-direction:column-reverse}nv-notificationcontainer.position-bottom-center nv-notification{margin-top:var(--spacing-2)}nv-notificationcontainer>*{pointer-events:auto}";
+const NvNotificationcontainerStyle0 = nvNotificationcontainerCss;
+
+const NvNotificationContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Position of the notification container on the screen.
+         */
+        this.position = 'top-right';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region EVENTS
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'db4005459b926bcfef55e76f61bff0b5635f2872', class: `position-${this.position}` }, index.h("slot", { key: '518909541ca3e9e82168436a43d5362c414c0ec3' })));
+    }
+};
+NvNotificationContainer.style = NvNotificationcontainerStyle0;
+
+exports.nv_notificationcontainer = NvNotificationContainer;

package/dist/cjs/{nv-popover.entry-ttESQMgj.js → nv-popover.entry-DOu6rhco.js}

@@ -1,13 +1,14 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
-var fade_animationEb454088 = require('./fade.animation-eb454088-Bma0SpTf.js');
+var index = require('./index-CJDePE8Z.js');
+var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
 var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
 require('react');
+require('react-dom');
 
 const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
-    const nodeStyler = fade_animationEb454088.index(node);
+    const nodeStyler = fade_animation9b939939.index(node);
     /**
      * Will animate the scale and optionally the opacity to make the element grow and fade in,
      * and removes the scale and opacity style attributes once complete.
@@ -1902,7 +1903,7 @@ const NvPopover = class {
             duration: isOtherMemberOpen ? 0 : 100,
             amount: 0.85,
         });
-        const { fadeOut } = fade_animationEb454088.useFade(this.popoverElement, {
+        const { fadeOut } = fade_animation9b939939.useFade(this.popoverElement, {
             duration: isOtherMemberOpen ? 0 : 100,
         });
         if (open === true) {
@@ -1939,7 +1940,7 @@ const NvPopover = class {
             setGrowOut();
         }
         else {
-            const { setFadeIn } = fade_animationEb454088.useFade(this.popoverElement);
+            const { setFadeIn } = fade_animation9b939939.useFade(this.popoverElement);
             setFadeIn();
             this.popoverElement.removeAttribute('hidden');
         }
@@ -1967,7 +1968,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'dc7ef1862f1a1da4b32e02bee827f81545df73d1' }, index.h("slot", { key: '7535c2ba2b1f600c237602c68a04c85fd9d6d98b', name: "trigger" }), index.h("div", { key: '8e7907e2fda20d35b00642eca0507aa20e56f7cb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '4e081e84e9597b69351253d1c1b89c115cdcfd9a', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '5bcd80588e9746db974cee69c5963b698665d105', name: "content" }))));
+        return (index.h(index.Host, { key: '1af6f61d4b3d87e30d2311708fcd61979170aa96' }, index.h("slot", { key: '113813292e083fa4b188f3e5750549a08fc8c3aa', name: "trigger" }), index.h("div", { key: '7687d6ae12b24ed575843f0d171d911eb0994675', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '162f1f50be23da7fadac8f76507e6d8d058fb58b', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '57ecf69ef395a045cb35e7db9f380027dfceff6e', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-row.entry-DPEGaFeS.js → nv-row.entry-Tx_yvWTJ.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
+var index = require('./index-CJDePE8Z.js');
 require('react');
+require('react-dom');
 
 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)}";
 const NvRowStyle0 = nvRowCss;
@@ -13,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
+        return (index.h(index.Host, { key: '9623a4c73a5a2557b2ba7eb346ae0740ca7291c5' }, index.h("slot", { key: '502ea804deec9e91057bfaf6f2fa4fdb4a5822c3' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/{nv-stack.entry-CTPwlz23.js → nv-stack.entry-Cn0JrM2N.js}

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
+var index = require('./index-CJDePE8Z.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
+require('react-dom');
 
 const nvStackCss = "nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";
 const NvStackStyle0 = nvStackCss;
@@ -22,7 +23,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '66123f22ad4a6ebefe8663c795274eb900d2c178', class: clsx297c1ffe.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
+        return (index.h(index.Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', class: clsx297c1ffe.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/{nv-table.entry-Dv1mZKcu.js → nv-table.entry-D-uKGKnp.js}

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
+var index = require('./index-CJDePE8Z.js');
 var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
 require('react');
+require('react-dom');
 
 const nvTableCss = "nv-table{display:block}nv-table .hidden{display:none}nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-table th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-table td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-table tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";
 const NvTableStyle0 = nvTableCss;
@@ -314,14 +315,14 @@ const NvTable = class {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (index.h(index.Host, { key: 'ea0b3237145fbc199d356010f1e001797afc52d6' }, index.h("div", { key: 'd3bf41bad48e549d1799b2c8e55a308a7d767973', class: "hidden" }, index.h("slot", { key: '8263220ebd266240b16228b67f8d215d7d56afd7' })), index.h("slot", { key: '36d43d6870cf9a6021521579c0507afd1fe85081', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
+        return (index.h(index.Host, { key: '08082f0800c32a59606968aa2a80cfa3c2f07960' }, index.h("div", { key: 'f55f5409f45d90ef072abb09006ef6366e7e8c95', class: "hidden" }, index.h("slot", { key: '0b5326e8c7c6f97f419819744a132335d4435bb4' })), index.h("slot", { key: '07d4538957b466ed332cd598e2c132d85a801979', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (index.h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), index.h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (index.h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (index.h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), index.h("slot", { key: '233b61e9099f58ca0eeeb7d0f7fdc7bd71bc9065', name: "after" })));
+        })))))))), index.h("slot", { key: '1f505261da2c2e05511940ec90f7375981cb0823', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tablecolumn.entry-DrAaeHm-.js → nv-tablecolumn.entry-BsJzXKCk.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
+var index = require('./index-CJDePE8Z.js');
 require('react');
+require('react-dom');
 
 const NvTablecolumn = class {
     constructor(hostRef) {

package/dist/cjs/{nv-toggle.entry-D2TRd371.js → nv-toggle.entry-DuDRh-Ww.js}

@@ -1,9 +1,10 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
+var index = require('./index-CJDePE8Z.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 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:\"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;
@@ -65,8 +66,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'db161d2edfcf7f83381b6431c8bc70a22c04fbf3', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '086d6c429b4b7bcaa23093b13d30cf6ba21912f8', class: "input-container" }, index.h("input", { key: 'e83f407f2c3643c245198131a7991545b73dde78', 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: 'eb5af410d1c643c70a4364948bf8fad9d54e74df', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '54793fd81258bee7676801f23da4f5fb554242bf', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '6af650d9677d1eb0f8cfa77cbcd6318f2d6f8aaf', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '2c157429288779ad6cc18d4e318e64830a657c54', class: "description" }, index.h("slot", { key: 'fcfae2a0d7cdcc76d4b23c4b376c8e2496e11bb5', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '0f440b59ac0c32d9abe9577668d7045081819b49', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4289435e34eb31a8e59e00cefcba2e17e98bd03a', class: "input-container" }, index.h("input", { key: '1b7d05f77fd32cece9eed2e6cf79c7e2e707f64c', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '6d78d7e80eb790bbead21bba6108329f9ded3746', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '524a2c2542a45945bddb688c5dff6c9426d58570', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '59eda4b826602062620e7167acf3c8de0f77ebef', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e8412879ed60fc6806464432348bd52483e3567', class: "description" }, index.h("slot", { key: '85a876130569a5a4051e271eaf1cf49593a014a6', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-togglebutton.entry-D95qOQ1K.js → nv-togglebutton.entry-DAlky3tO.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
+var index = require('./index-CJDePE8Z.js');
 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);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;
@@ -47,7 +48,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'cb15a84c7e7cc27a80773613f31b98168eee8475', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '32d6b9394088d88c4671fb7809ad6aa85b240fff' })));
+        return (index.h(index.Host, { key: 'b9e37fc1cb34272bca476c7b61db173ab2a9d238', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'cf9cf3445fd93873def1f9fa9cbec46c35600025' })));
     }
 };
 NvTogglebutton.style = NvTogglebuttonStyle0;

package/dist/cjs/{nv-togglebuttongroup.entry-BNvyZgbh.js → nv-togglebuttongroup.entry-DTadjqMQ.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
+var index = require('./index-CJDePE8Z.js');
 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;
@@ -155,7 +156,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ce185699fabd71bb5c22e5a0d73df88067acb9d6' }, index.h("slot", { key: 'a1e375fb1e8660f3fdb75d96f18db20735a3a64d' })));
+        return (index.h(index.Host, { key: 'edb5b3bb7651b482cd02625038e36cdb35743453' }, index.h("slot", { key: '2b0bc4891b885ecf7febdce7062fc02b120ec939' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tooltip.entry-oOw6EmyL.js → nv-tooltip.entry-BWzlP6gC.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Jgn7NELT.js');
+var index = require('./index-CJDePE8Z.js');
 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;
@@ -45,7 +46,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e0b68e5ade824e2b0f9c5e5cac140349412c919d' }, index.h("slot", { key: 'd61a58d034818fdba87b4ab17ce903bbb13a47ff' }), index.h("nv-popover", { key: '408df675045f95adf270025f83285b2e125873c5', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e4f860f09f5e5ef83b5e704c271781f41a643e59', slot: "content" }, this.message), index.h("slot", { key: '2e2e4dcae68651d734696e718c59389f712562df', name: "content" }))));
+        return (index.h(index.Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, index.h("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), index.h("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), index.h("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/generated/components.js

@@ -36,6 +36,7 @@ import { NvLoader as NvLoaderElement, defineCustomElement as defineNvLoader } fr
 import { NvMenu as NvMenuElement, defineCustomElement as defineNvMenu } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
 import { NvMenuitem as NvMenuitemElement, defineCustomElement as defineNvMenuitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
 import { NvNotification as NvNotificationElement, defineCustomElement as defineNvNotification } from "@nova-design-system/nova-webcomponents/dist/components/nv-notification.js";
+import { NvNotificationcontainer as NvNotificationcontainerElement, defineCustomElement as defineNvNotificationcontainer } from "@nova-design-system/nova-webcomponents/dist/components/nv-notificationcontainer.js";
 import { NvPopover as NvPopoverElement, defineCustomElement as defineNvPopover } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
 import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
 import { NvStack as NvStackElement, defineCustomElement as defineNvStack } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
@@ -334,6 +335,13 @@ export const NvNotification = createComponent({
     events: { onHiddenChanged: 'hiddenChanged' },
     defineCustomElement: defineNvNotification
 });
+export const NvNotificationcontainer = createComponent({
+    tagName: 'nv-notificationcontainer',
+    elementClass: NvNotificationcontainerElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvNotificationcontainer
+});
 export const NvPopover = createComponent({
     tagName: 'nv-popover',
     elementClass: NvPopoverElement,

package/dist/generated/components.server.js

@@ -658,11 +658,18 @@ export const NvNotification = createComponent({
         message: 'message',
         icon: 'icon',
         dismissible: 'dismissible',
-        hidden: 'hidden'
+        hidden: 'hidden',
+        initiallyHidden: 'initially-hidden'
     },
     hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
     serializeShadowRoot
 });
+export const NvNotificationcontainer = createComponent({
+    tagName: 'nv-notificationcontainer',
+    properties: { position: 'position' },
+    hydrateModule: import('@nova-design-system/nova-webcomponents/hydrate'),
+    serializeShadowRoot
+});
 export const NvPopover = createComponent({
     tagName: 'nv-popover',
     properties: {

package/dist/index.js

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