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

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

@@ -1,67 +0,0 @@
-'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-tooltip.entry-BfViGE_U.js

@@ -1,55 +0,0 @@
-'use strict';
-
-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 NvTooltip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        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
-         * it's position on the axis to fit on the screen, so users can always see it.
-         */
-        this.placement = 'bottom';
-        /**
-         * 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.
-         */
-        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
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        if (!this.triggerElement)
-            this.triggerElement = Array.from(this.el.children).find(child => {
-                return child.getAttribute('slot') === null;
-            });
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        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 = nvTooltipCss;
-
-exports.nv_tooltip = NvTooltip;