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

package/dist/cjs/nv-badge_2.entry-5FShR2Ax.js

@@ -0,0 +1,218 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+var timeline_animationCgHCo_Ho = require('./timeline.animation-CgHCo_Ho-KteJaZPb.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvBadgeCss = () => `nv-badge{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.with-gap{padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge.with-gap.is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-badge:not(.with-gap){padding:var(--badge-padding-y) var(--badge-padding-x);display:inline-flex !important;gap:var(--badge-gap-x);vertical-align:middle;align-items:center;border-radius:var(--radius-rounded-full);border-style:solid;border-width:0.5px;height:fit-content;width:fit-content}nv-badge:not(.with-gap).is-icon-only{padding:var(--badge-padding-y) var(--badge-padding-icon-only-x);gap:var(--badge-gap-icon-only-x)}nv-badge.badge-1{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}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);border-color:var(--color-rainbow-2-border)}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);border-color:var(--color-rainbow-3-border)}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);border-color:var(--color-rainbow-4-border)}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);border-color:var(--color-rainbow-5-border)}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);border-color:var(--color-rainbow-6-border)}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);border-color:var(--color-rainbow-7-border)}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);border-color:var(--color-rainbow-8-border)}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);border-color:var(--color-rainbow-9-border)}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);border-color:var(--color-rainbow-10-border)}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.badge-error{color:var(--color-feedback-error-low-text);background-color:var(--color-feedback-error-low-background);border-color:var(--color-feedback-error-low-border)}nv-badge.badge-error .close:focus,nv-badge.badge-error .close:focus-within{outline:none}nv-badge.badge-error .close:focus-visible,nv-badge.badge-error .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-error-low-content, var(--color-feedback-error-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-error nv-icon{color:var(--color-feedback-error-low-icon)}nv-badge.badge-information{color:var(--color-feedback-information-low-text);background-color:var(--color-feedback-information-low-background);border-color:var(--color-feedback-information-low-border)}nv-badge.badge-information .close:focus,nv-badge.badge-information .close:focus-within{outline:none}nv-badge.badge-information .close:focus-visible,nv-badge.badge-information .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-information-low-content, var(--color-feedback-information-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-information nv-icon{color:var(--color-feedback-information-low-icon)}nv-badge.badge-neutral{color:var(--color-feedback-neutral-low-text);background-color:var(--color-feedback-neutral-low-background);border-color:var(--color-feedback-neutral-low-border)}nv-badge.badge-neutral .close:focus,nv-badge.badge-neutral .close:focus-within{outline:none}nv-badge.badge-neutral .close:focus-visible,nv-badge.badge-neutral .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-neutral-low-content, var(--color-feedback-neutral-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-neutral nv-icon{color:var(--color-feedback-neutral-low-icon)}nv-badge.badge-success{color:var(--color-feedback-success-low-text);background-color:var(--color-feedback-success-low-background);border-color:var(--color-feedback-success-low-border)}nv-badge.badge-success .close:focus,nv-badge.badge-success .close:focus-within{outline:none}nv-badge.badge-success .close:focus-visible,nv-badge.badge-success .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-success-low-content, var(--color-feedback-success-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-success nv-icon{color:var(--color-feedback-success-low-icon)}nv-badge.badge-warning{color:var(--color-feedback-warning-low-text);background-color:var(--color-feedback-warning-low-background);border-color:var(--color-feedback-warning-low-border)}nv-badge.badge-warning .close:focus,nv-badge.badge-warning .close:focus-within{outline:none}nv-badge.badge-warning .close:focus-visible,nv-badge.badge-warning .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-feedback-warning-low-content, var(--color-feedback-warning-low-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-warning nv-icon{color:var(--color-feedback-warning-low-icon)}nv-badge.badge-amber{color:var(--color-rainbow-1-text);background-color:var(--color-rainbow-1-background);border-color:var(--color-rainbow-1-border)}nv-badge.badge-amber .close:focus,nv-badge.badge-amber .close:focus-within{outline:none}nv-badge.badge-amber .close:focus-visible,nv-badge.badge-amber .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-amber-content, var(--color-rainbow-1-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-amber nv-icon{color:var(--color-rainbow-1-icon)}nv-badge.badge-orange{color:var(--color-rainbow-2-text);background-color:var(--color-rainbow-2-background);border-color:var(--color-rainbow-2-border)}nv-badge.badge-orange .close:focus,nv-badge.badge-orange .close:focus-within{outline:none}nv-badge.badge-orange .close:focus-visible,nv-badge.badge-orange .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-orange-content, var(--color-rainbow-2-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-orange nv-icon{color:var(--color-rainbow-2-icon)}nv-badge.badge-turquoise{color:var(--color-rainbow-5-text);background-color:var(--color-rainbow-5-background);border-color:var(--color-rainbow-5-border)}nv-badge.badge-turquoise .close:focus,nv-badge.badge-turquoise .close:focus-within{outline:none}nv-badge.badge-turquoise .close:focus-visible,nv-badge.badge-turquoise .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-turquoise-content, var(--color-rainbow-5-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-turquoise nv-icon{color:var(--color-rainbow-5-icon)}nv-badge.badge-crimson{color:var(--color-rainbow-6-text);background-color:var(--color-rainbow-6-background);border-color:var(--color-rainbow-6-border)}nv-badge.badge-crimson .close:focus,nv-badge.badge-crimson .close:focus-within{outline:none}nv-badge.badge-crimson .close:focus-visible,nv-badge.badge-crimson .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-crimson-content, var(--color-rainbow-6-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-crimson nv-icon{color:var(--color-rainbow-6-icon)}nv-badge.badge-lime{color:var(--color-rainbow-9-text);background-color:var(--color-rainbow-9-background);border-color:var(--color-rainbow-9-border)}nv-badge.badge-lime .close:focus,nv-badge.badge-lime .close:focus-within{outline:none}nv-badge.badge-lime .close:focus-visible,nv-badge.badge-lime .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-lime-content, var(--color-rainbow-9-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-lime nv-icon{color:var(--color-rainbow-9-icon)}nv-badge.badge-petrol{color:var(--color-rainbow-8-text);background-color:var(--color-rainbow-8-background);border-color:var(--color-rainbow-8-border)}nv-badge.badge-petrol .close:focus,nv-badge.badge-petrol .close:focus-within{outline:none}nv-badge.badge-petrol .close:focus-visible,nv-badge.badge-petrol .close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-petrol-content, var(--color-rainbow-8-text));outline-offset:calc(var(--focus-outline-offset) * 0.2)}nv-badge.badge-petrol nv-icon{color:var(--color-rainbow-8-icon)}nv-badge span{font-size:var(--font-size-xs);line-height:var(--line-height-xs) !important;text-align:center}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 NvBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closeClicked = index.createEvent(this, "closeClicked", 3);
+        this.hiddenChanged = index.createEvent(this, "hiddenChanged", 3);
+        this.hiddenChangedComplete = index.createEvent(this, "hiddenChangedComplete", 3);
+        /****************************************************************************/
+        //#region DEPRECATED
+        /**
+         * Whether the badge is dismissible.
+         * @deprecated use dismissible instead.
+         */
+        this.dismissal = false;
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The color of the badge.
+         * deprecated Use status values or named colors instead.
+         * Use a string between 1 to 10
+         * or one of the status values: error, information, neutral, success, warning
+         * or one of the color names: amber, orange, turquoise, crimson, lime
+         */
+        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
+        /**
+         * When true, the alert does not automatically close upon dismissing.
+         * Useful for externally controlled component behavior.
+         */
+        this.preventAutoClose = false;
+        /**
+         * When true, the badge will only display an icon without label.
+         * The label will be visually hidden but still accessible for screen readers.
+         */
+        this.isIconOnly = false;
+        //#endregion LIFECYCLE
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the close button click.
+         */
+        this.handleClose = () => {
+            if (!this.preventAutoClose) {
+                this.hidden = true;
+            }
+            this.closeClicked.emit();
+        };
+    }
+    //#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_animationDcRL9lcm.useFade(this.el, { duration: 150 });
+        const { collapse, expand } = collapse_animationDZDm0vSK.useCollapse(this.el, { duration: 150 });
+        if (hidden === true)
+            await timeline_animationCgHCo_Ho.timeline(fadeOut, collapse).start();
+        if (hidden === false)
+            await timeline_animationCgHCo_Ho.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) {
+            this._isHidden = true;
+            const { setCollapsed } = collapse_animationDZDm0vSK.useCollapse(this.el);
+            const { setFadeOut } = fade_animationDcRL9lcm.useFade(this.el);
+            setCollapsed();
+            setFadeOut();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'e47c85f80669870b4cd825fa29ebee7610751728', class: clsxChV9xqsO.clsx(`badge-${this.color}`, {
+                'has-close': this.dismissible,
+                'with-gap': this.dismissible || this.label,
+                'visually-hidden': this._isHidden,
+                'is-icon-only': this.isIconOnly,
+            }) }, index.h("slot", { key: '63909cdcb1edc9e685d1b60534d72ed3dd700d05', name: "leading-icon" }, this.leadIcon && index.h("nv-icon", { key: 'ca443b29509145863f0fc4a8f814c57669342d15', name: this.leadIcon, size: "sm" })), index.h("span", { key: 'fbae90db0aa23cf0d204b14002ca702ad3731b51', class: clsxChV9xqsO.clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, index.h("slot", { key: '93e818db9d012176d407b19097c7513d7d462053' })), this.dismissible && (index.h("button", { key: 'c48984564102d04914a967aa3f9a29defae62455', onClick: this.handleClose, class: "close", type: "button" }, index.h("nv-icon", { key: '849a32c60019a99909e0383ad593fc1daf00dc59', name: "x", size: "sm" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "dismissal": [{
+                "handleDismissalChange": 0
+            }],
+        "icon": [{
+                "handleIconChange": 0
+            }],
+        "hidden": [{
+                "handleHiddenChange": 0
+            }]
+    }; }
+};
+NvBadge.style = nvBadgeCss();
+
+const nvFielddropdownitemcheckCss = () => `nv-fielddropdownitemcheck slot-fb,nv-fielddropdownitemcheck span{all:unset}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:hover{background-color:var(--components-list-dropdown-item-background-hover)}`;
+
+const NvFielddropdownitemcheck = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemChecked = index.createEvent(this, "itemChecked", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Indicates whether the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * 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;
+            }
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '3d170ba455c58880f20590200decfde25224886f', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: 'b13310319d63346dcef8ee13f1bbc348617e5981', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, index.h("slot", { key: 'c936ae30f4fcf8073be1f1e3a3b0d79cf1532136' }), index.h("slot", { key: '0e6d7701da3d5d26141ce471fcd79b9693ca3e57', name: "main" }), index.h("slot", { key: '5be71b210a4b4fc49d772afd3bb0a7d1c778d870', name: "label" }), index.h("slot", { key: '4e5b81eefa8c3bc37763e0d3c7fc2828b5ece4bc', name: "description" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvFielddropdownitemcheck.style = nvFielddropdownitemcheckCss();
+
+exports.nv_badge = NvBadge;
+exports.nv_fielddropdownitemcheck = NvFielddropdownitemcheck;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+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:var(--font-weight-medium-emphasis);line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-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 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
+    componentDidRender() {
+        if (this.type === 'default' && this.tooltip) {
+            const trigger = this.defaultSlot?.nextSibling;
+            if (trigger && trigger !== this.toolTipRef)
+                this.toolTipRef.triggerElement = trigger;
+        }
+        if (this.type === 'collapsed') {
+            // <button ref={..}> does not rerender the component, so we need to
+            // manually assign the trigger
+            if (this.popoverRef)
+                this.popoverRef.triggerElement = this.popoverTrigger;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'b1cf4450a7e04d6a85c21c4003f02d1c5da47792', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsxChV9xqsO.clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (index.h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (index.h("slot", { ref: el => (this.defaultSlot = el) })), this.tooltip && (index.h("nv-tooltip", { key: '1459581acafe9ffcc20f85cb53618ad910c9c1df', ref: el => (this.toolTipRef = el), message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (index.h("nv-popover", { key: 'a49865bb2ee61632c68138f9cc3543bc4b5b0ef4', ref: el => (this.popoverRef = el), triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, index.h("ul", { key: '4b88fa9f43a51313b6e638afdfa011a2c4770b85', slot: "content" }, index.h("slot", { key: 'abbdd94a21de5d9edccbfa4ff5f3b087b465a3ef' })))), index.h("span", { key: '2ab42832f8c39e5ee53498f18828ee65da4958f3', "data-scope": "separator" }, "/")));
+    }
+    get el() { return index.getElement(this); }
+};
+NvBreadcrumb.style = nvBreadcrumbCss();
+
+exports.nv_breadcrumb = NvBreadcrumb;

package/dist/cjs/nv-breadcrumbs.entry-BSgn3KUO.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvBreadcrumbsCss = () => `nv-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--breadcrumb-padding-y)}nv-breadcrumbs nv-breadcrumb:last-child [data-scope=separator],nv-breadcrumbs nv-breadcrumb:last-child [slot=separator]{display:none}`;
+
+const NvBreadcrumbs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '4337fe5161c0ce444001e1b92221f3adac26e4bf', role: "navigation", "aria-label": "breadcrumbs" }, index.h("slot", { key: '03ea061b013a5fc927b0f7edca68195d0b01de2d' })));
+    }
+};
+NvBreadcrumbs.style = nvBreadcrumbsCss();
+
+exports.nv_breadcrumbs = NvBreadcrumbs;

package/dist/cjs/nv-button.entry-BdQQ_LE7.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvButtonCss = () => `nv-button{text-decoration:none;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;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[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-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[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-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[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-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[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-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[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-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[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-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]: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-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[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-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][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-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]: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-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[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-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}`;
+
+const NvButton = 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';
+        /**
+         * Use this prop to highlight the button when it represents the current page
+         * or active selection. This helps users understand their navigation context.
+         */
+        this.active = false;
+        /**
+         * Applies styling that visually indicates the button represents a dangerous
+         * action.
+         */
+        this.danger = false;
+        /**
+         * 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.
+         */
+        this.loading = false;
+        /**
+         * Disables the button, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Allows the button to stretch and fill the entire width of its container.
+         */
+        this.fluid = 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';
+        /**
+         * 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 button click events, managing form actions and disabled states.
+         * Prevents default behavior when button is disabled or loading, and
+         * processes form submissions/resets when appropriate.
+         * @param {Event} event - The click event.
+         */
+        this.handleButtonClick = (event) => {
+            if (this.loading || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.type !== constantsBReL3Lsa.ButtonType.Button &&
+                (this.form || this.internals?.form)) {
+                this.processFormAction();
+            }
+            else if (this.form && this.type === constantsBReL3Lsa.ButtonType.Button) {
+                console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
+            }
+        };
+        /**
+         * Processes form-related actions by finding the associated form element
+         * and triggering the appropriate action (submit/reset) based on button type.
+         * Falls back to ElementInternals form if no explicit form ID is provided.
+         */
+        this.processFormAction = () => {
+            const formElement = this.form
+                ? document.getElementById(this.form)
+                : this.internals?.form;
+            if (!formElement) {
+                console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, this.internals?.form);
+                return;
+            }
+            switch (this.type) {
+                case constantsBReL3Lsa.ButtonType.Submit:
+                    formElement.requestSubmit();
+                    break;
+                case constantsBReL3Lsa.ButtonType.Reset:
+                    formElement.reset();
+                    break;
+            }
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region EVENTS
+    handleKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.el.click();
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#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 LIFECYCLE
+    componentWillLoad() {
+        if (this.loading) {
+            this.disabled = this.loading;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'e1d1cf7060849d1a62ab93d332aaf757ca10ebec', role: "button", tabindex: this.disableTabindex ? -1 : 0, onClick: this.handleButtonClick }, this.loading && (index.h("nv-loader", { key: '36a582a1a411584f0a4705631dee7ffd5561d685', size: this.size === constantsBReL3Lsa.ButtonSize.Large ? 'sm' : 'xs' })), index.h("slot", { key: '1ed41830a7a819ecf4093558c53e7b07197152d3', name: "leading-icon" }), index.h("slot", { key: '37b513628d6b9b3c496af1f66bb08a98dce02cea' }), index.h("slot", { key: '6784df28842764fb32e8d882fa8410e29a115ac1', name: "trailing-icon" })));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "loading": [{
+                "handleLoadingChange": 0
+            }],
+        "disabled": [{
+                "handleDisabledChange": 0
+            }]
+    }; }
+};
+NvButton.style = nvButtonCss();
+
+exports.nv_button = NvButton;

package/dist/cjs/{nv-buttongroup.entry-BZaTKN_n.js → nv-buttongroup.entry-BM8CwXFK.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-DUlunl9a.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -91,7 +91,7 @@ function forwardPropsToChildren(containerElement, props) {
     });
 }
 
-const nvButtongroupCss = "nv-buttongroup{display:flex}nv-buttongroup[emphasis=high]{gap:1px}nv-buttongroup[emphasis=low] .group-item,nv-buttongroup[emphasis=low] .group-item:hover{border:1px solid var(--components-button-low-text)}nv-buttongroup[emphasis=lower] .group-item,nv-buttongroup[emphasis=lower] .group-item:hover{border:1px solid var(--components-button-lower-text)}nv-buttongroup:not([orientation=vertical]) .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.first{border-top-right-radius:0;border-bottom-right-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.last{border-top-left-radius:0;border-bottom-left-radius:0}nv-buttongroup:not([orientation=vertical])[emphasis=medium] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.first){border-left:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.first){border-left:none}nv-buttongroup[orientation=vertical]{flex-direction:column;align-items:stretch;width:fit-content}nv-buttongroup[orientation=vertical] .group-item{width:unset;display:flex}nv-buttongroup[orientation=vertical] .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup[orientation=vertical] .group-item.first{border-bottom-left-radius:0;border-bottom-right-radius:0}nv-buttongroup[orientation=vertical] .group-item.last{border-top-left-radius:0;border-top-right-radius:0}nv-buttongroup[orientation=vertical][emphasis=medium] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.first){border-top:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.first){border-top:none}";
+const nvButtongroupCss = () => `nv-buttongroup{display:flex}nv-buttongroup[emphasis=high]{gap:1px}nv-buttongroup[emphasis=low] .group-item,nv-buttongroup[emphasis=low] .group-item:hover{border:1px solid var(--components-button-low-text)}nv-buttongroup[emphasis=lower] .group-item,nv-buttongroup[emphasis=lower] .group-item:hover{border:1px solid var(--components-button-lower-text)}nv-buttongroup:not([orientation=vertical]) .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.first{border-top-right-radius:0;border-bottom-right-radius:0}nv-buttongroup:not([orientation=vertical]) .group-item.last{border-top-left-radius:0;border-bottom-left-radius:0}nv-buttongroup:not([orientation=vertical])[emphasis=medium] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=low] .group-item:not(.first){border-left:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.last){border-right:none}nv-buttongroup:not([orientation=vertical])[emphasis=lower] .group-item:not(.first){border-left:none}nv-buttongroup[orientation=vertical]{flex-direction:column;align-items:stretch;width:fit-content}nv-buttongroup[orientation=vertical] .group-item{width:unset;display:flex}nv-buttongroup[orientation=vertical] .group-item:not(.last):not(.first){border-radius:0}nv-buttongroup[orientation=vertical] .group-item.first{border-bottom-left-radius:0;border-bottom-right-radius:0}nv-buttongroup[orientation=vertical] .group-item.last{border-top-left-radius:0;border-top-right-radius:0}nv-buttongroup[orientation=vertical][emphasis=medium] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=low] .group-item:not(.first){border-top:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.last){border-bottom:none}nv-buttongroup[orientation=vertical][emphasis=lower] .group-item:not(.first){border-top:none}`;
 
 const NvButtongroup = class {
     constructor(hostRef) {
@@ -182,15 +182,21 @@ const NvButtongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd0322897a0312e7b55b087e4abfc94fcaf9f7747' }, index.h("slot", { key: '70afccf10fe728482096d3fce42083e9931e06bd' })));
+        return (index.h(index.Host, { key: '69c273e6d25e9dfd3b60d35b4c34d9fa331f5a02' }, index.h("slot", { key: '2ee4b40f9b2026099e49a14705fdff72255ef777' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "emphasis": ["onEmphasisChange"],
-        "size": ["onSizeChange"],
-        "fluid": ["onFluidChange"]
+        "emphasis": [{
+                "onEmphasisChange": 0
+            }],
+        "size": [{
+                "onSizeChange": 0
+            }],
+        "fluid": [{
+                "onFluidChange": 0
+            }]
     }; }
 };
-NvButtongroup.style = nvButtongroupCss;
+NvButtongroup.style = nvButtongroupCss();
 
 exports.nv_buttongroup = NvButtongroup;