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

package/dist/cjs/nv-iconbutton_2.entry-CaKCa8NT.js

@@ -1,168 +0,0 @@
-'use strict';
-
-var index = require('./index-CtjeeUI-.js');
-var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
-require('@stencil/react-output-target/runtime');
-require('react');
-require('react-dom');
-
-const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);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)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);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)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);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)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);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)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.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-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.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-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
-
-const NvIconbutton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Determines how large or small the button appears, allowing for
-         * customization of the button's dimensions to fit different design
-         * specifications and user needs.
-         */
-        this.size = 'md';
-        /**
-         * Adjusts the button’s emphasis to make it more or less visually prominent
-         * to users. Use this to draw attention to important actions or reduce focus
-         * on less critical ones.
-         */
-        this.emphasis = 'high';
-        /**
-         * Set this to true to show a spinner on the button, letting users know that
-         * their action is being processed. It helps improve user experience by
-         * indicating ongoing activities. The icon is not displayed when the button
-         * is loading. Also, the button is disabled. If you want to disable the
-         * button, it is not possible. It is automatically disabled when loading.
-         */
-        this.loading = false;
-        /**
-         * Disables the button, preventing user interaction.
-         */
-        this.disabled = false;
-        /**
-         * Makes the button look active when it’s within a compatible component
-         * like a button group.
-         */
-        this.active = false;
-        /**
-         * Sets the button type to control its function in forms. Use 'submit' to send
-         * form data, 'reset' to clear the form, or 'button' for a standard button
-         * that doesn’t interact with form submission by default.
-         */
-        this.type = 'button';
-        /**
-         * Sets the shape of the button. Choose between square and rounded.
-         */
-        this.shape = 'square';
-        /**
-         * Use this to make the button skip-able when users navigate with the keyboard.
-         * The button remains clickable but won’t be reached via the Tab key.
-         */
-        this.disableTabindex = false;
-        //#endregion PROPERTIES
-        /****************************************************************************/
-        //#region METHODS
-        /**
-         * Handles form-related actions when the button is clicked.
-         * - Submits the form if the button type is 'submit'.
-         * - Resets the form if the button type is 'reset'.
-         * @param {Event} event - The click event.
-         */
-        this.handleClick = (event) => {
-            var _a, _b, _c, _d;
-            if (this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            if (this.type === 'submit') {
-                (_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.requestSubmit();
-            }
-            if (this.type === 'reset') {
-                (_d = (_c = this.internals) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.reset();
-            }
-        };
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region WATCHERS
-    handleLoadingChange(loading) {
-        this.loading = loading;
-        this.disabled = loading;
-    }
-    handleDisabledChange(disabled) {
-        if (this.loading) {
-            this.disabled = this.loading;
-        }
-        else {
-            this.disabled = disabled;
-        }
-    }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region EVENTS
-    handleKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            this.el.click();
-        }
-    }
-    handleTouchStart(event) {
-        if (event.touches.length > 1)
-            return;
-        event.preventDefault();
-        this.el.click();
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        if (this.loading) {
-            this.disabled = this.loading;
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '81d7f0bfd1e64ecbb640c2f02b7e73cd7b2d3aa4', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsxChV9xqsO.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'cec3ee02a7fb0882557c8742c8f9d785835e79d0', size: this.size }), !this.loading && index.h("nv-icon", { key: '4892b3b78b291b159403a63ced6a150dd7def1c0', name: this.name, size: this.size }), index.h("slot", { key: 'b1204bf2dd026c1232b5e8209fd29f21a8aa704f' })));
-    }
-    static get formAssociated() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "loading": ["handleLoadingChange"],
-        "disabled": ["handleDisabledChange"]
-    }; }
-};
-NvIconbutton.style = nvIconbuttonCss;
-
-const nvLoaderCss = "@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}nv-loader{display:inline-block;position:relative;aspect-ratio:1/1;border-radius:9999px;color:inherit}nv-loader.size-xs{width:var(--loader-size-xs);height:var(--loader-size-xs)}nv-loader.size-xs::before,nv-loader.size-xs::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xs::before{content:\" \";border:calc(var(--loader-size-xs) / 10) solid;opacity:0.3}nv-loader.size-xs::after{content:\" \";border-top:calc(var(--loader-size-xs) / 10) solid transparent;border-left:calc(var(--loader-size-xs) / 10) solid transparent;border-right:calc(var(--loader-size-xs) / 10) solid transparent;border-bottom:calc(var(--loader-size-xs) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-sm{width:var(--loader-size-sm);height:var(--loader-size-sm)}nv-loader.size-sm::before,nv-loader.size-sm::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-sm::before{content:\" \";border:calc(var(--loader-size-sm) / 10) solid;opacity:0.3}nv-loader.size-sm::after{content:\" \";border-top:calc(var(--loader-size-sm) / 10) solid transparent;border-left:calc(var(--loader-size-sm) / 10) solid transparent;border-right:calc(var(--loader-size-sm) / 10) solid transparent;border-bottom:calc(var(--loader-size-sm) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-md{width:var(--loader-size-md);height:var(--loader-size-md)}nv-loader.size-md::before,nv-loader.size-md::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-md::before{content:\" \";border:calc(var(--loader-size-md) / 10) solid;opacity:0.3}nv-loader.size-md::after{content:\" \";border-top:calc(var(--loader-size-md) / 10) solid transparent;border-left:calc(var(--loader-size-md) / 10) solid transparent;border-right:calc(var(--loader-size-md) / 10) solid transparent;border-bottom:calc(var(--loader-size-md) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-lg{width:var(--loader-size-lg);height:var(--loader-size-lg)}nv-loader.size-lg::before,nv-loader.size-lg::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-lg::before{content:\" \";border:calc(var(--loader-size-lg) / 10) solid;opacity:0.3}nv-loader.size-lg::after{content:\" \";border-top:calc(var(--loader-size-lg) / 10) solid transparent;border-left:calc(var(--loader-size-lg) / 10) solid transparent;border-right:calc(var(--loader-size-lg) / 10) solid transparent;border-bottom:calc(var(--loader-size-lg) / 10) solid;animation:rotation 1s linear infinite}nv-loader.size-xl{width:var(--loader-size-xl);height:var(--loader-size-xl)}nv-loader.size-xl::before,nv-loader.size-xl::after{content:\" \";position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%}nv-loader.size-xl::before{content:\" \";border:calc(var(--loader-size-xl) / 10) solid;opacity:0.3}nv-loader.size-xl::after{content:\" \";border-top:calc(var(--loader-size-xl) / 10) solid transparent;border-left:calc(var(--loader-size-xl) / 10) solid transparent;border-right:calc(var(--loader-size-xl) / 10) solid transparent;border-bottom:calc(var(--loader-size-xl) / 10) solid;animation:rotation 1s linear infinite}nv-loader.color-brand::before{border-color:var(--components-loader-brand-background);opacity:1}nv-loader.color-brand::after{border-bottom-color:var(--components-loader-brand-foreground)}nv-loader.color-white::before{border-color:var(--components-loader-white-background);opacity:1}nv-loader.color-white::after{border-bottom-color:var(--components-loader-white-foreground)}";
-
-const NvLoader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Choose the size of the loader to best fit your application’s needs, whether
-         * it’s a small spinner for subtle loading indicators or a large one for more
-         * prominent displays.
-         */
-        this.size = 'md';
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region RENDER
-    /* <slot> empty to force rendering change */
-    render() {
-        return (index.h(index.Host, { key: '049afa243c1ce99643408d86afa99e69c5468b8b', class: clsxChV9xqsO.clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
-    }
-};
-NvLoader.style = nvLoaderCss;
-
-exports.nv_iconbutton = NvIconbutton;
-exports.nv_loader = NvLoader;

package/dist/cjs/nv-menuitem.entry-mKMqCAdz.js

@@ -1,60 +0,0 @@
-'use strict';
-
-var index = require('./index-CtjeeUI-.js');
-require('@stencil/react-output-target/runtime');
-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 NvMenuitem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.menuitemSelected = index.createEvent(this, "menuitemSelected", 7);
-        /**
-         * Disables the item, preventing user interaction.
-         */
-        this.disabled = false;
-        /**
-         * If the menu item has a submenu, the a caret icon will be displayed.
-         */
-        this.hasSubmenu = false;
-    }
-    /* eslint-enable nova/event-bubbling */
-    handleMenuItemSelect(event) {
-        // If the element is disabled, stop propagation
-        if (this.disabled) {
-            event.stopPropagation();
-            return;
-        }
-        this.menuitemSelected.emit({
-            id: this.el.id,
-            name: this.name,
-            hasSubmenu: this.hasSubmenu,
-        });
-    }
-    handleClick(event) {
-        this.handleMenuItemSelect(event);
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-            const activeElement = document.activeElement;
-            if (activeElement &&
-                activeElement.tagName === 'NV-MENUITEM' &&
-                !activeElement.hasAttribute('has-submenu')) {
-                event.preventDefault();
-                this.el.click();
-            }
-        }
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '3c9a394f8af5ab7b57061ddfdd3e07b9fce17847', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '3f36901afb278a608f8eaeb423e8aca08c055187', name: this.icon }), index.h("slot", { key: 'a54ca41926c4f9374af669125529befc6ab454e2' }), this.label && index.h("span", { key: 'c83199ffd4e5559b22d06392edf5ad6c8e83cf96', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'c7a052d69c1d8cd33238f9f88405596a46649e3c' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: '57de548ca08d6fb045223f242dee568a29b6270f', name: "chevron-right" })));
-    }
-    get el() { return index.getElement(this); }
-};
-NvMenuitem.style = nvMenuitemCss;
-
-exports.nv_menuitem = NvMenuitem;

package/dist/cjs/nv-notification-bullet.entry-DtbjtFxs.js

@@ -1,77 +0,0 @@
-'use strict';
-
-var index = require('./index-CtjeeUI-.js');
-require('@stencil/react-output-target/runtime');
-require('react');
-require('react-dom');
-
-const nvNotificationBulletCss = "nv-notification-bullet{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-notification-bullet-size);max-width:var(--sidebar-notification-bullet-size);height:var(--sidebar-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-notification-bullet-font-size);font-weight:var(--sidebar-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0;position:relative;}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-notification-bullet-size);max-width:var(--sidebar-notification-bullet-size);height:var(--sidebar-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-notification-bullet-font-size);font-weight:var(--sidebar-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-brand-500);color:var(--color-feedback-neutral-high-contrast-title)}nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-brand-50);color:var(--color-brand-600);border:1px solid var(--color-brand-600)}nv-notification-bullet{}nv-notification-bullet.nv-notification-bullet-neutral{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sidebar-notification-bullet-size);max-width:var(--sidebar-notification-bullet-size);height:var(--sidebar-notification-bullet-size);padding:0 var(--spacing-1);border-radius:var(--radius-rounded-full);font-size:var(--sidebar-notification-bullet-font-size);font-weight:var(--sidebar-notification-bullet-font-weight);white-space:nowrap;flex-shrink:0}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-high{background-color:var(--color-feedback-neutral-high-contrast-background);color:var(--color-feedback-neutral-high-contrast-title)}nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-low{background-color:var(--color-feedback-neutral-low-background);color:var(--color-feedback-neutral-low-text);border-radius:var(--radius-rounded-full)}nv-notification-bullet{}nv-notification-bullet.nv-notification-bullet-with-cross-border::before{content:\"\";position:absolute;top:55%;left:45%;transform:translate(-50%, -50%);width:calc(var(--sidebar-notification-bullet-size) + 1.5px);height:calc(var(--sidebar-notification-bullet-size) * 1.5);border-radius:var(--radius-rounded-full);background-color:var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));z-index:-1;pointer-events:none}nv-notification-bullet{}nv-sidebar[collapsed] nv-notification-bullet.nv-notification-bullet-with-cross-border::before{width:calc(var(--sidebar-notification-bullet-size-reduced) * 1.5);height:calc(var(--sidebar-notification-bullet-size-reduced) * 1.5)}nv-notification-bullet{}nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced,nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet{width:var(--sidebar-notification-bullet-size-reduced);height:var(--sidebar-notification-bullet-size-reduced);min-width:var(--sidebar-notification-bullet-size-reduced);max-width:var(--sidebar-notification-bullet-size-reduced);min-height:var(--sidebar-notification-bullet-size-reduced);max-height:var(--sidebar-notification-bullet-size-reduced);padding:0;font-size:0}";
-
-const NvNotificationBullet = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Determines the size of the notification bullet.
-         * - default: Normal size with text visible
-         * - reduced: Smaller size, text hidden (just a dot)
-         */
-        this.size = 'default';
-        /**
-         * Allows to add a border to add contrast on background.
-         */
-        this.contrastingBorder = false;
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region METHODS
-    getIntention() {
-        if (this.intention) {
-            return this.intention;
-        }
-        // Inherit from parent nv-sidebar
-        const sidebar = this.el.closest('nv-sidebar');
-        if (sidebar) {
-            const sidebarIntention = sidebar.getAttribute('notification-intention');
-            if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {
-                return sidebarIntention;
-            }
-        }
-        return 'brand'; // Default fallback
-    }
-    getEmphasis() {
-        if (this.emphasis) {
-            return this.emphasis;
-        }
-        // Inherit from parent nv-sidebar
-        const sidebar = this.el.closest('nv-sidebar');
-        if (sidebar) {
-            const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');
-            if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {
-                return sidebarEmphasis;
-            }
-        }
-        return 'high'; // Default fallback
-    }
-    //#region RENDER
-    render() {
-        var _a;
-        const displayCount = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
-        const displayText = displayCount > 99 ? '99+' : String(displayCount);
-        if (displayCount <= 0) {
-            return index.h(index.Host, { style: { display: 'none' } });
-        }
-        const sizeClass = this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';
-        const intention = this.getIntention();
-        const emphasis = this.getEmphasis();
-        const intentionClass = `nv-notification-bullet-${intention}`;
-        const emphasisClass = `nv-notification-bullet-${emphasis}`;
-        const borderClass = this.contrastingBorder
-            ? 'nv-notification-bullet-with-border'
-            : '';
-        return (index.h(index.Host, { class: `${intentionClass} ${borderClass ? 'nv-notification-bullet-with-cross-border' : ''}` }, index.h("span", { class: `nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`, "aria-label": `${displayCount} notifications` }, displayText)));
-    }
-    get el() { return index.getElement(this); }
-};
-NvNotificationBullet.style = nvNotificationBulletCss;
-
-exports.nv_notification_bullet = NvNotificationBullet;

package/dist/cjs/nv-notification.entry-CLb0gNu3.js

@@ -1,262 +0,0 @@
-'use strict';
-
-var index = require('./index-CtjeeUI-.js');
-var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
-var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
-var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
-var styleValueTypes_esXlgmw4x8 = require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
-var timeline_animationCgHCo_Ho = require('./timeline.animation-CgHCo_Ho-KteJaZPb.js');
-var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
-require('@stencil/react-output-target/runtime');
-require('react');
-require('react-dom');
-
-const useSlide = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = fade_animationDcRL9lcm.index(node);
-    /**
-     * Will animate the translateX property.
-     *
-     * @param {object} options - The options for the animation.
-     * @param {number} options.from - The starting value for the translateX property.
-     * @param {number} options.to - The ending value for the translateX property.
-     * @returns {Promise<void>} - A promise that resolves when the animation is
-     * complete.
-     */
-    const slideX = (options = { from: 0, to: 100 }) => () => {
-        return new Promise(resolve => {
-            styleValueTypes_esXlgmw4x8.animate({
-                from: { x: options.from },
-                to: { x: options.to },
-                ease: styleValueTypes_esXlgmw4x8.easeOut,
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    };
-    /**
-     * Will animate the translateY property.
-     *
-     * @param {object} options - The options for the animation.
-     * @param {number} options.from - The starting value for the translateY property.
-     * @param {number} options.to - The ending value for the translateY property.
-     * @returns {Promise<void>} - A promise that resolves when the animation is
-     * complete.
-     */
-    const slideY = (options = { from: 0, to: 100 }) => () => {
-        return new Promise(resolve => {
-            styleValueTypes_esXlgmw4x8.animate({
-                from: { y: options.from },
-                to: { y: options.to },
-                ease: styleValueTypes_esXlgmw4x8.easeOut,
-                duration,
-                onUpdate(latest) {
-                    nodeStyler.set({ transform: `translateY(${latest.y}%)` });
-                },
-                onComplete() {
-                    resolve();
-                },
-            });
-        });
-    };
-    /**
-     * Applies the slideX styles without animating, useful when initial state
-     * is slid out.
-     *
-     * @param {number} amount - The amount to translate the element by.
-     * @returns {function} - A function that applies the slideX styles.
-     */
-    const setSlideX = (amount = 100) => nodeStyler.set({ transform: `translateX(${amount}%)` });
-    /**
-     * Applies the slideY styles without animating, useful when initial state
-     * is slid out.
-     *
-     * @param {number} amount - The amount to translate the element by.
-     * @returns {function} - A function that applies the slideY styles.
-     */
-    const setSlideY = (amount = 100) => nodeStyler.set({ transform: `translateY(${amount}%)` });
-    /**
-     * Applies the slideIn styles without animating, useful when initial state
-     * is slid in.
-     */
-    function setSlideReset() {
-        nodeStyler.set({ transform: `translateX(${0}%) translateY(${0}%)` });
-    }
-    return {
-        slideX,
-        slideY,
-        setSlideX,
-        setSlideY,
-        setSlideReset,
-    };
-};
-
-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:var(--font-weight-medium-emphasis);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:var(--font-weight-low-emphasis);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 NvNotification = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.hiddenChanged = index.createEvent(this, "hiddenChanged", 3);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Set a unique ID for the notification. Used for aria attributes and managing
-         * multiple notifications.
-         */
-        this.uid = v4BdYh22OP.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 = {
-            [constantsBReL3Lsa.FeedbackColors.Warning]: 'alert-circle',
-            [constantsBReL3Lsa.FeedbackColors.Information]: 'info-circle',
-            [constantsBReL3Lsa.FeedbackColors.Success]: 'circle-check',
-            [constantsBReL3Lsa.FeedbackColors.Error]: 'alert-triangle',
-            [constantsBReL3Lsa.FeedbackColors.Neutral]: 'help',
-        };
-        this.roleByFeedback = {
-            [constantsBReL3Lsa.FeedbackColors.Error]: 'alert',
-            [constantsBReL3Lsa.FeedbackColors.Warning]: 'alert',
-            [constantsBReL3Lsa.FeedbackColors.Information]: 'status',
-            [constantsBReL3Lsa.FeedbackColors.Success]: 'status',
-            [constantsBReL3Lsa.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_animationDcRL9lcm.useFade(this.container);
-        const { expand } = collapse_animationDZDm0vSK.useCollapse(this.el, {
-            duration: 300,
-            overflow: 'visible',
-        });
-        const { slideY, setSlideY } = useSlide(this.container, {
-            duration: 300,
-        });
-        setSlideY(-100);
-        setFadeIn();
-        await timeline_animationCgHCo_Ho.parallel(slideY({ from: -100, to: 0 }), expand).start();
-        this.hiddenChanged.emit(false);
-    }
-    getSlideDestination(pos) {
-        switch (pos) {
-            case constantsBReL3Lsa.NotificationPosition.TopRight:
-            case constantsBReL3Lsa.NotificationPosition.BottomRight:
-                return { axis: 'x', to: 100 }; // right
-            case constantsBReL3Lsa.NotificationPosition.TopLeft:
-            case constantsBReL3Lsa.NotificationPosition.BottomLeft:
-                return { axis: 'x', to: -100 }; // left
-            case constantsBReL3Lsa.NotificationPosition.TopCenter:
-                return { axis: 'y', to: -100 }; // up
-            case constantsBReL3Lsa.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_animationDcRL9lcm.useFade(this.container, { duration: 300 });
-        const { slideX, slideY, setSlideReset } = useSlide(this.container, {
-            duration: 500,
-        });
-        const { collapse } = collapse_animationDZDm0vSK.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_animationCgHCo_Ho.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: 'cf0f39e0565a264b676e0ca569ec79169771d269', 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: 'ed2a5e50f0a6975c652f658e62a271c0b476f7d2', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (index.h("button", { key: '9eccf1b9f29f581bf77255b9e2bebebfdc233302', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, index.h("nv-icon", { key: '73890097ad80af4d86646bb83f2ae99878164db4', name: "x", size: "sm" }))), index.h("nv-icon", { key: 'c852478c25ae05d5219453234db95a420b5c5a1e', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), index.h("div", { key: 'b06042bf55e8bedc07a60f23a27b07160776c0e0', "data-scope": "content" }, (this.heading || this.headingSlot) && (index.h("p", { key: '7666dfb18169cdfea8eb8c603b20a5ba7075824c', id: this.getHeadingId(), "data-scope": "heading" }, index.h("slot", { key: 'f6e651737cf630bb89d40b7664329596355a8ea0', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (index.h("p", { key: 'ae5d89db2b36c4c81c7b46aada5f50bd6eb4aa90', id: this.getMessageId(), "data-scope": "message" }, index.h("slot", { key: '24d01abd694f7f9a316345f9d88716d1c0a47234', name: "content" }, this.message))), this.actionsSlot && (index.h("div", { key: 'a1aa0bcc33a42d7b36bcd364a155d41f527cc96a', "data-scope": "actions" }, index.h("slot", { key: 'b09c21bed0fd559bf2f694f861385444c2ddbbf0', name: "actions" })))))));
-    }
-    get el() { return index.getElement(this); }
-};
-NvNotification.style = nvNotificationCss;
-
-exports.nv_notification = NvNotification;

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

@@ -1,41 +0,0 @@
-'use strict';
-
-var index = require('./index-CtjeeUI-.js');
-require('@stencil/react-output-target/runtime');
-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 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: 'bf0b7cd02e0d214516f352eb7016d6060d6959c5', class: `position-${this.position}` }, index.h("slot", { key: 'f042e3f11b4d2af4b47aadeba04a332c57889616' })));
-    }
-};
-NvNotificationContainer.style = nvNotificationcontainerCss;
-
-exports.nv_notificationcontainer = NvNotificationContainer;