@nova-design-system/nova-react 3.0.0-beta.40 → 3.0.0-beta.42

package/dist/cjs/nv-badge_2.entry-wDuiCwys.js

@@ -0,0 +1,195 @@
+'use strict';
+
+var index = require('./index-CinzsZ8D.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var timeline_animation1b88f052 = require('./timeline.animation-1b88f052-B8-vCVrY.js');
+var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
+require('react');
+
+const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
+const NvBadgeStyle0 = nvBadgeCss;
+
+const NvBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closeClicked = index.createEvent(this, "closeClicked");
+        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
+        this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete");
+        /****************************************************************************/
+        //#region DEPRECATED
+        /**
+         * Whether the badge is dismissible.
+         * @deprecated use dismissible instead.
+         */
+        this.dismissal = false;
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The color of the badge. Use a string between 1 to 10
+         */
+        this.color = '1';
+        /**
+         * Main content of the badge.
+         */
+        this.label = null;
+        /**
+         * The lead icon of the badge.
+         */
+        this.leadIcon = null;
+        /**
+         * Whether the badge is dismissible.
+         */
+        this.dismissible = false;
+        /**
+         * Controls the visibility of the badge. Will animate with fade and collapse.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        this._isHidden = this.hidden;
+        /**
+         * When true, the alert does not automatically close upon dismissing.
+         * Useful for externally controlled component behavior.
+         */
+        this.preventAutoClose = false;
+        //#endregion LIFECYCLE
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the close button click.
+         * @param {MouseEvent} originalEvent - The original event.
+         */
+        this.handleClose = (originalEvent) => {
+            if (!this.preventAutoClose) {
+                this.hidden = true;
+            }
+            this.closeClicked.emit(originalEvent);
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Handles the dismissal prop change.
+     * @param {boolean} dismissal - The new dismissal value.
+     */
+    handleDismissalChange(dismissal) {
+        this.dismissible = dismissal;
+    }
+    /**
+     * Handles the icon prop change.
+     * @param {string} icon - The new icon value.
+     */
+    handleIconChange(icon) {
+        this.leadIcon = icon;
+    }
+    /**
+     * Handles the hidden prop change.
+     * @param {boolean} hidden - The new hidden value.
+     */
+    async handleHiddenChange(hidden) {
+        this.hiddenChanged.emit(hidden);
+        if (this._isHidden === true)
+            this._isHidden = hidden;
+        const { fadeIn, fadeOut } = fade_animation2a077983.useFade(this.ref, { duration: 150 });
+        const { collapse, expand } = timeline_animation1b88f052.useCollapse(this.ref, { duration: 150 });
+        if (hidden === true)
+            await timeline_animation1b88f052.timeline(fadeOut, collapse).start();
+        if (hidden === false)
+            await timeline_animation1b88f052.timeline(expand, fadeIn).start();
+        this.hiddenChangedComplete.emit(hidden);
+        if (this._isHidden === false)
+            this._isHidden = hidden;
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Component will load.
+     */
+    componentWillLoad() {
+        if (this.dismissal) {
+            this.dismissible = this.dismissal;
+        }
+        if (this.icon != null && this.icon != '') {
+            this.leadIcon = this.icon;
+        }
+        if (this.hidden) {
+            const { setCollapsed } = timeline_animation1b88f052.useCollapse(this.ref);
+            const { setFadeOut } = fade_animation2a077983.useFade(this.ref);
+            setCollapsed();
+            setFadeOut();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '63f256c6711546ca5304d46c2624e52f35dc2b46', class: clsx297c1ffe.clsx(`badge-${this.color}`, {
+                'has-close': this.dismissible,
+                'with-gap': this.dismissible || this.label,
+                'visually-hidden': this._isHidden,
+            }) }, index.h("slot", { key: '181e608d22c697517ef55dbc4432ac06cdf6892e', name: "leading-icon" }, this.leadIcon && (index.h("nv-icon", { key: '914d75ef9d54e2c8c94c9c99a4efeb59aa654f1c', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && index.h("span", { key: 'd32ff92840bba1cc983b24a4fee95af065ffef0e' }, this.label), this.dismissible && (index.h("button", { key: '1dbd1e432774e26936f93f7207e1f6eb93fa0819', onClick: this.handleClose, class: "close", type: "button" }, index.h("nv-icon", { key: '8372fb5ba1dafd5758807485a5be3880a009567d', name: "x", size: "sm" })))));
+    }
+    get ref() { return index.getElement(this); }
+    static get watchers() { return {
+        "dismissal": ["handleDismissalChange"],
+        "icon": ["handleIconChange"],
+        "hidden": ["handleHiddenChange"]
+    }; }
+};
+NvBadge.style = NvBadgeStyle0;
+
+const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck{cursor:pointer;display:flex;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);border-radius:var(--list-dropdown-item-radius)}nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck:hover{background-color:var(--components-list-dropdown-item-background-hover)}";
+const NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
+
+const NvFielddropdownitemcheck = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemChecked = index.createEvent(this, "itemChecked");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Indicates whether the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * when the child <nv-fieldcheckbox> change its `checked` state,
+         * update `this.checked` and emit `itemChecked`.
+         * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.
+         */
+        this.onFieldcheckboxChanged = (event) => {
+            if (this.disabled)
+                return;
+            // NvFieldcheckbox has emitted checkedChanged
+            this.checked = event.detail; // get the new state
+            this.itemChecked.emit({
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+        };
+        /** Make sure the checkbox is checked when clicked anywhere in the item. */
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.el.querySelector('input').checked) {
+                this.checked = false;
+            }
+            else {
+                this.checked = true;
+            }
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f9445369d2703e0a5fe4417b1968f9a25dc94743', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: 'a64195d14834b2a83d3b4c3f1451272fb97ff46a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitemcheck.style = NvFielddropdownitemcheckStyle0;
+
+exports.nv_badge = NvBadge;
+exports.nv_fielddropdownitemcheck = NvFielddropdownitemcheck;

package/dist/cjs/nv-badge_2.entry-xfXsesV0.js

@@ -0,0 +1,195 @@
+'use strict';
+
+var index = require('./index-C8UfzrMI.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+var timeline_animation1b88f052 = require('./timeline.animation-1b88f052-B8-vCVrY.js');
+var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
+require('react');
+
+const nvBadgeCss = "nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content;gap:var(--badge-gap-x)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);height:fit-content;width:fit-content}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background)}nv-badge.badge-1 .close:focus,nv-badge.badge-1 .close:focus-within{outline:none}nv-badge.badge-1 .close:focus-visible,nv-badge.badge-1 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-1-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-1 nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-2{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background)}nv-badge.badge-2 .close:focus,nv-badge.badge-2 .close:focus-within{outline:none}nv-badge.badge-2 .close:focus-visible,nv-badge.badge-2 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-2-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-2 nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-3{color:var(--color-rainbow-3-text);background-color:var(--color-rainbow-3-background)}nv-badge.badge-3 .close:focus,nv-badge.badge-3 .close:focus-within{outline:none}nv-badge.badge-3 .close:focus-visible,nv-badge.badge-3 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-3-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-3 nv-icon{color:var(--color-rainbow-3-icon)}nv-badge.badge-4{color:var(--color-rainbow-4-text);background-color:var(--color-rainbow-4-background)}nv-badge.badge-4 .close:focus,nv-badge.badge-4 .close:focus-within{outline:none}nv-badge.badge-4 .close:focus-visible,nv-badge.badge-4 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-4-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-4 nv-icon{color:var(--color-rainbow-4-icon)}nv-badge.badge-5{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background)}nv-badge.badge-5 .close:focus,nv-badge.badge-5 .close:focus-within{outline:none}nv-badge.badge-5 .close:focus-visible,nv-badge.badge-5 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-5-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-5 nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-6{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background)}nv-badge.badge-6 .close:focus,nv-badge.badge-6 .close:focus-within{outline:none}nv-badge.badge-6 .close:focus-visible,nv-badge.badge-6 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-6-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-6 nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-7{color:var(--color-rainbow-7-text);background-color:var(--color-rainbow-7-background)}nv-badge.badge-7 .close:focus,nv-badge.badge-7 .close:focus-within{outline:none}nv-badge.badge-7 .close:focus-visible,nv-badge.badge-7 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-7-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-7 nv-icon{color:var(--color-rainbow-7-icon)}nv-badge.badge-8{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background)}nv-badge.badge-8 .close:focus,nv-badge.badge-8 .close:focus-within{outline:none}nv-badge.badge-8 .close:focus-visible,nv-badge.badge-8 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-8-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-8 nv-icon{color:var(--color-rainbow-8-icon)}nv-badge.badge-9{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background)}nv-badge.badge-9 .close:focus,nv-badge.badge-9 .close:focus-within{outline:none}nv-badge.badge-9 .close:focus-visible,nv-badge.badge-9 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-9-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-9 nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-10{color:var(--color-rainbow-10-text);background-color:var(--color-rainbow-10-background)}nv-badge.badge-10 .close:focus,nv-badge.badge-10 .close:focus-within{outline:none}nv-badge.badge-10 .close:focus-visible,nv-badge.badge-10 .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-rainbow-10-content);outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-10 nv-icon{color:var(--color-rainbow-10-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important}nv-badge nv-icon>svg.icon-xs{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-sm{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-md{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-lg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge nv-icon>svg.icon-xl{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-badge .close{padding:0;line-height:0;border:none;background:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;aspect-ratio:1/1;border-radius:var(--radius-rounded-full)}";
+const NvBadgeStyle0 = nvBadgeCss;
+
+const NvBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closeClicked = index.createEvent(this, "closeClicked");
+        this.hiddenChanged = index.createEvent(this, "hiddenChanged");
+        this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete");
+        /****************************************************************************/
+        //#region DEPRECATED
+        /**
+         * Whether the badge is dismissible.
+         * @deprecated use dismissible instead.
+         */
+        this.dismissal = false;
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The color of the badge. Use a string between 1 to 10
+         */
+        this.color = '1';
+        /**
+         * Main content of the badge.
+         */
+        this.label = null;
+        /**
+         * The lead icon of the badge.
+         */
+        this.leadIcon = null;
+        /**
+         * Whether the badge is dismissible.
+         */
+        this.dismissible = false;
+        /**
+         * Controls the visibility of the badge. Will animate with fade and collapse.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        this._isHidden = this.hidden;
+        /**
+         * When true, the alert does not automatically close upon dismissing.
+         * Useful for externally controlled component behavior.
+         */
+        this.preventAutoClose = false;
+        //#endregion LIFECYCLE
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the close button click.
+         * @param {MouseEvent} originalEvent - The original event.
+         */
+        this.handleClose = (originalEvent) => {
+            if (!this.preventAutoClose) {
+                this.hidden = true;
+            }
+            this.closeClicked.emit(originalEvent);
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Handles the dismissal prop change.
+     * @param {boolean} dismissal - The new dismissal value.
+     */
+    handleDismissalChange(dismissal) {
+        this.dismissible = dismissal;
+    }
+    /**
+     * Handles the icon prop change.
+     * @param {string} icon - The new icon value.
+     */
+    handleIconChange(icon) {
+        this.leadIcon = icon;
+    }
+    /**
+     * Handles the hidden prop change.
+     * @param {boolean} hidden - The new hidden value.
+     */
+    async handleHiddenChange(hidden) {
+        this.hiddenChanged.emit(hidden);
+        if (this._isHidden === true)
+            this._isHidden = hidden;
+        const { fadeIn, fadeOut } = fade_animation2a077983.useFade(this.ref, { duration: 150 });
+        const { collapse, expand } = timeline_animation1b88f052.useCollapse(this.ref, { duration: 150 });
+        if (hidden === true)
+            await timeline_animation1b88f052.timeline(fadeOut, collapse).start();
+        if (hidden === false)
+            await timeline_animation1b88f052.timeline(expand, fadeIn).start();
+        this.hiddenChangedComplete.emit(hidden);
+        if (this._isHidden === false)
+            this._isHidden = hidden;
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Component will load.
+     */
+    componentWillLoad() {
+        if (this.dismissal) {
+            this.dismissible = this.dismissal;
+        }
+        if (this.icon != null && this.icon != '') {
+            this.leadIcon = this.icon;
+        }
+        if (this.hidden) {
+            const { setCollapsed } = timeline_animation1b88f052.useCollapse(this.ref);
+            const { setFadeOut } = fade_animation2a077983.useFade(this.ref);
+            setCollapsed();
+            setFadeOut();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '25a36133db083b5a02ade58a84650cc2d9f6e412', class: clsx297c1ffe.clsx(`badge-${this.color}`, {
+                'has-close': this.dismissible,
+                'with-gap': this.dismissible || this.label,
+                'visually-hidden': this._isHidden,
+            }) }, index.h("slot", { key: 'ca3afa597464e0266142aaf555552b1cc15335c6', name: "leading-icon" }, this.leadIcon && (index.h("nv-icon", { key: 'f85f55a086d0092057d498c01ec8d2e09e94a12d', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && index.h("span", { key: '7c2f5845789319ba3d7035aceccedab671d21f70' }, this.label), this.dismissible && (index.h("button", { key: 'aca006f50e839c83aa7fef766f4e45b6148c0c51', onClick: this.handleClose, class: "close", type: "button" }, index.h("nv-icon", { key: '0ad3c5fb85ee81bb820480612eac7b2e5e0a642a', name: "x", size: "sm" })))));
+    }
+    get ref() { return index.getElement(this); }
+    static get watchers() { return {
+        "dismissal": ["handleDismissalChange"],
+        "icon": ["handleIconChange"],
+        "hidden": ["handleHiddenChange"]
+    }; }
+};
+NvBadge.style = NvBadgeStyle0;
+
+const nvFielddropdownitemcheckCss = "nv-fielddropdownitemcheck{cursor:pointer;display:flex;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);border-radius:var(--list-dropdown-item-radius)}nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}nv-fielddropdownitemcheck:hover{background-color:var(--components-list-dropdown-item-background-hover)}";
+const NvFielddropdownitemcheckStyle0 = nvFielddropdownitemcheckCss;
+
+const NvFielddropdownitemcheck = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemChecked = index.createEvent(this, "itemChecked");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Indicates whether the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * when the child <nv-fieldcheckbox> change its `checked` state,
+         * update `this.checked` and emit `itemChecked`.
+         * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.
+         */
+        this.onFieldcheckboxChanged = (event) => {
+            if (this.disabled)
+                return;
+            // NvFieldcheckbox has emitted checkedChanged
+            this.checked = event.detail; // get the new state
+            this.itemChecked.emit({
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+        };
+        /** Make sure the checkbox is checked when clicked anywhere in the item. */
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.el.querySelector('input').checked) {
+                this.checked = false;
+            }
+            else {
+                this.checked = true;
+            }
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '7b292a5cf03a4b45090535f86dde4cec73a690dc', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '928fa9396e77a2f1e3beb8b48757c67f73bb9715', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option", onCheckedChanged: this.onFieldcheckboxChanged })));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitemcheck.style = NvFielddropdownitemcheckStyle0;
+
+exports.nv_badge = NvBadge;
+exports.nv_fielddropdownitemcheck = NvFielddropdownitemcheck;

package/dist/cjs/nv-base.entry-BO-6krwg.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var index = require('./index-C8UfzrMI.js');
+require('react');
+
+const classes = {
+    'w-full': 'w-full',
+    'wFull': 'w-full',
+    'is-active': 'is-active',
+    'is-selected': 'is-selected',
+};
+const NvBaseComponent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.applyClassesOnInitialRender();
+    }
+    componentDidLoad() {
+        this.mutationObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes') {
+                    const target = mutation.target;
+                    Object.keys(classes).forEach(attributeName => {
+                        if (target.hasAttribute(attributeName)) {
+                            target.classList.add(classes[attributeName]);
+                        }
+                        else {
+                            target.classList.remove(classes[attributeName]);
+                        }
+                    });
+                }
+            });
+        });
+        this.observeElements();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region METHODS
+    applyClassesOnInitialRender() {
+        Object.keys(classes).forEach(attributeName => {
+            const elements = this.el.querySelectorAll(`[${attributeName}]`);
+            elements.forEach(element => {
+                element.classList.add(classes[attributeName]);
+            });
+        });
+    }
+    observeElements() {
+        this.mutationObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: Object.keys(classes),
+            subtree: true,
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'ee2869bb42012e8c6b185e412503b14482f58af0', style: { display: 'block' } }, index.h("slot", { key: '2d89c30073a159339419bbec3f323abdcbf312cf' })));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.nv_base = NvBaseComponent;

package/dist/cjs/nv-base.entry-DwtTXK_n.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var index = require('./index-CinzsZ8D.js');
+require('react');
+
+const classes = {
+    'w-full': 'w-full',
+    'wFull': 'w-full',
+    'is-active': 'is-active',
+    'is-selected': 'is-selected',
+};
+const NvBaseComponent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.applyClassesOnInitialRender();
+    }
+    componentDidLoad() {
+        this.mutationObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes') {
+                    const target = mutation.target;
+                    Object.keys(classes).forEach(attributeName => {
+                        if (target.hasAttribute(attributeName)) {
+                            target.classList.add(classes[attributeName]);
+                        }
+                        else {
+                            target.classList.remove(classes[attributeName]);
+                        }
+                    });
+                }
+            });
+        });
+        this.observeElements();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region METHODS
+    applyClassesOnInitialRender() {
+        Object.keys(classes).forEach(attributeName => {
+            const elements = this.el.querySelectorAll(`[${attributeName}]`);
+            elements.forEach(element => {
+                element.classList.add(classes[attributeName]);
+            });
+        });
+    }
+    observeElements() {
+        this.mutationObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: Object.keys(classes),
+            subtree: true,
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '81da4e7fd653192079ab22a607d1f525b504f3e4', style: { display: 'block' } }, index.h("slot", { key: 'e766e4b073b16d367c473b02c94448cf835a4921' })));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.nv_base = NvBaseComponent;

package/dist/cjs/nv-breadcrumb.entry-B0hIeE83.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('./index-CinzsZ8D.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+require('react');
+
+const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
+const NvBreadcrumbStyle0 = nvBreadcrumbCss;
+
+const NvBreadcrumb = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs
+         * in a dropdown. Use default for a single item. When passing multiple items
+         * as collapsed, make sure to wrap you links in list tags
+         */
+        this.type = 'default';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        // Force a re-render to pass the popoverTrigger ref to the popovers
+        if (this.type === 'collapsed')
+            index.forceUpdate(this);
+    }
+    componentWillLoad() {
+        if (this.type === 'default' && this.tooltip) {
+            this.popoverTrigger = Array.from(this.el.children).find(child => child.getAttribute('slot') === null);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'c985863a0ffdcd051abd712c357110cfa056c382', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx297c1ffe.clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (index.h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (index.h("slot", null)), this.tooltip && (index.h("nv-tooltip", { key: '4f7ad5175285ea442cd42581e292d2d430eb8770', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (index.h("nv-popover", { key: '29aba9e64f0d1785852dc4b830959dcbbd7dfc8b', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, index.h("ul", { key: '0fde9dac023e6a77cb1524cbfcdf58d11e5a21f3', slot: "content" }, index.h("slot", { key: 'c263990647dc304a37971168669ced00bf46c588' })))), index.h("span", { key: 'f9f96fb13c67e4d3844007342c931ccd690ca7f5', "data-scope": "separator" }, "/")));
+    }
+    get el() { return index.getElement(this); }
+};
+NvBreadcrumb.style = NvBreadcrumbStyle0;
+
+exports.nv_breadcrumb = NvBreadcrumb;

package/dist/cjs/nv-breadcrumb.entry-DTwjCmMI.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('./index-C8UfzrMI.js');
+var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
+require('react');
+
+const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3)}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
+const NvBreadcrumbStyle0 = nvBreadcrumbCss;
+
+const NvBreadcrumb = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs
+         * in a dropdown. Use default for a single item. When passing multiple items
+         * as collapsed, make sure to wrap you links in list tags
+         */
+        this.type = 'default';
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        // Force a re-render to pass the popoverTrigger ref to the popovers
+        if (this.type === 'collapsed')
+            index.forceUpdate(this);
+    }
+    componentWillLoad() {
+        if (this.type === 'default' && this.tooltip) {
+            this.popoverTrigger = Array.from(this.el.children).find(child => child.getAttribute('slot') === null);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '88cc0ffe7aee64066946b3f2579d0ace70a56339', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx297c1ffe.clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (index.h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (index.h("slot", null)), this.tooltip && (index.h("nv-tooltip", { key: '1e1bb755b7a9466c5a174e57b562b718d7f2a78a', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (index.h("nv-popover", { key: '91b3238143defb7b5fd71b14bb31edb8093778d2', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, index.h("ul", { key: '4c1851c8988b7eb1f607e422ceac1dc6b04022c5', slot: "content" }, index.h("slot", { key: '11213bce3ff14309b0be7336f0022411a2e6721d' })))), index.h("span", { key: '3b97cd9edbb33196c85a29afbaf5b2ac647b0912', "data-scope": "separator" }, "/")));
+    }
+    get el() { return index.getElement(this); }
+};
+NvBreadcrumb.style = NvBreadcrumbStyle0;
+
+exports.nv_breadcrumb = NvBreadcrumb;