@nova-design-system/nova-webcomponents 3.14.0-beta.0 → 3.14.0

package/dist/components/{p-368c8700.js → p-e5dff125.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
-import { u as useCollapse } from './p-3cd7a66f.js';
-import { u as useFade } from './p-a271e3be.js';
+import { u as useCollapse } from './p-31591941.js';
+import { u as useFade } from './p-ee0df37f.js';
 import './p-42ea6b74.js';
 import { t as timeline } from './p-a52cd849.js';
-import { d as defineCustomElement$1 } from './p-f4ae2239.js';
+import { d as defineCustomElement$1 } from './p-e0cd7e3a.js';
 
 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 NvBadgeStyle0 = nvBadgeCss;
@@ -98,8 +98,8 @@ const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
         this.hiddenChanged.emit(hidden);
         if (this._isHidden === true)
             this._isHidden = hidden;
-        const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });
-        const { collapse, expand } = useCollapse(this.el, { duration: 150 });
+        const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });
+        const { collapse, expand } = useCollapse(this.ref, { duration: 150 });
         if (hidden === true)
             await timeline(fadeOut, collapse).start();
         if (hidden === false)
@@ -123,8 +123,8 @@ const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
         }
         if (this.hidden) {
             this._isHidden = true;
-            const { setCollapsed } = useCollapse(this.el);
-            const { setFadeOut } = useFade(this.el);
+            const { setCollapsed } = useCollapse(this.ref);
+            const { setFadeOut } = useFade(this.ref);
             setCollapsed();
             setFadeOut();
         }
@@ -133,14 +133,14 @@ const NvBadge = /*@__PURE__*/ proxyCustomElement(class NvBadge extends H {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0e8a142c25a7cb078e8b953794f199135c11b616', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '435c5bb1f565c8bd95cca5c6828157c80f60aa39', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
                 'is-icon-only': this.isIconOnly,
-            }) }, h("slot", { key: 'a3862245400e63270443b78f21dad3571eb08e5b', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: '46b69a8544e01ff2f738a050cb2502528fa42b04', name: this.leadIcon, size: "sm" })), h("span", { key: '8b17eeb60dee162baa98c14ccd4d5aa52c01fffc', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: 'e7bad18f496e001acbdae89b93b8e614f4fcc914' })), this.dismissible && (h("button", { key: '66cdb2c94b7832ea8cd4612326e6399a9ea77bb7', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '399de04fb2fc7d5391c9ebf39e953b12e21fb219', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '271dc833471e026af5088f48227639682e661e97', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: 'e578eabf4c5a09e61e28c3839b943804acdf88e8', name: this.leadIcon, size: "sm" })), h("span", { key: '24d16a21b2b4499be712f9b747c9ab63c5e6ca0c', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: '3e3827620e6ade8be256ce7dd0b8bb949f36f2d5' })), this.dismissible && (h("button", { key: '90ed9ec1b71815554b963b0eafeb5536578700cf', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: 'df426e5d88c2bf02e7aa83c179c05db4795f03db', name: "x", size: "sm" })))));
     }
-    get el() { return this; }
+    get ref() { return this; }
     static get watchers() { return {
         "dismissal": ["handleDismissalChange"],
         "icon": ["handleIconChange"],
@@ -186,4 +186,4 @@ defineCustomElement();
 
 export { NvBadge as N, defineCustomElement as d };
 
-//# sourceMappingURL=p-368c8700.js.map
+//# sourceMappingURL=p-e5dff125.js.map

package/dist/components/{p-368c8700.js.map → p-e5dff125.js.map}

@@ -1 +1 @@
-{"file":"p-368c8700.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\n\n/* Variants */\n$badge-colors: (\n  '1',\n  '2',\n  '3',\n  '4',\n  '5',\n  '6',\n  '7',\n  '8',\n  '9',\n  '10',\n  'error',\n  'information',\n  'neutral',\n  'success',\n  'warning',\n  'amber',\n  'orange',\n  'turquoise',\n  'crimson',\n  'lime',\n  'petrol',\n);\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n  '1': var(--color-rainbow-1-text),\n  '2': var(--color-rainbow-2-text),\n  '3': var(--color-rainbow-3-text),\n  '4': var(--color-rainbow-4-text),\n  '5': var(--color-rainbow-5-text),\n  '6': var(--color-rainbow-6-text),\n  '7': var(--color-rainbow-7-text),\n  '8': var(--color-rainbow-8-text),\n  '9': var(--color-rainbow-9-text),\n  '10': var(--color-rainbow-10-text),\n  'error': var(--color-feedback-error-low-text),\n  'information': var(--color-feedback-information-low-text),\n  'neutral': var(--color-feedback-neutral-low-text),\n  'success': var(--color-feedback-success-low-text),\n  'warning': var(--color-feedback-warning-low-text),\n  'amber': var(--color-rainbow-1-text),\n  'orange': var(--color-rainbow-2-text),\n  'turquoise': var(--color-rainbow-5-text),\n  'crimson': var(--color-rainbow-6-text),\n  'lime': var(--color-rainbow-9-text),\n  'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n  '1': var(--color-rainbow-1-icon),\n  '2': var(--color-rainbow-2-icon),\n  '3': var(--color-rainbow-3-icon),\n  '4': var(--color-rainbow-4-icon),\n  '5': var(--color-rainbow-5-icon),\n  '6': var(--color-rainbow-6-icon),\n  '7': var(--color-rainbow-7-icon),\n  '8': var(--color-rainbow-8-icon),\n  '9': var(--color-rainbow-9-icon),\n  '10': var(--color-rainbow-10-icon),\n  'error': var(--color-feedback-error-low-icon),\n  'information': var(--color-feedback-information-low-icon),\n  'neutral': var(--color-feedback-neutral-low-icon),\n  'success': var(--color-feedback-success-low-icon),\n  'warning': var(--color-feedback-warning-low-icon),\n  'amber': var(--color-rainbow-1-icon),\n  'orange': var(--color-rainbow-2-icon),\n  'turquoise': var(--color-rainbow-5-icon),\n  'crimson': var(--color-rainbow-6-icon),\n  'lime': var(--color-rainbow-9-icon),\n  'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n  '1': var(--color-rainbow-1-background),\n  '2': var(--color-rainbow-2-background),\n  '3': var(--color-rainbow-3-background),\n  '4': var(--color-rainbow-4-background),\n  '5': var(--color-rainbow-5-background),\n  '6': var(--color-rainbow-6-background),\n  '7': var(--color-rainbow-7-background),\n  '8': var(--color-rainbow-8-background),\n  '9': var(--color-rainbow-9-background),\n  '10': var(--color-rainbow-10-background),\n  'error': var(--color-feedback-error-low-background),\n  'information': var(--color-feedback-information-low-background),\n  'neutral': var(--color-feedback-neutral-low-background),\n  'success': var(--color-feedback-success-low-background),\n  'warning': var(--color-feedback-warning-low-background),\n  'amber': var(--color-rainbow-1-background),\n  'orange': var(--color-rainbow-2-background),\n  'turquoise': var(--color-rainbow-5-background),\n  'crimson': var(--color-rainbow-6-background),\n  'lime': var(--color-rainbow-9-background),\n  'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n  '1': var(--color-rainbow-1-border),\n  '2': var(--color-rainbow-2-border),\n  '3': var(--color-rainbow-3-border),\n  '4': var(--color-rainbow-4-border),\n  '5': var(--color-rainbow-5-border),\n  '6': var(--color-rainbow-6-border),\n  '7': var(--color-rainbow-7-border),\n  '8': var(--color-rainbow-8-border),\n  '9': var(--color-rainbow-9-border),\n  '10': var(--color-rainbow-10-border),\n  'error': var(--color-feedback-error-low-border),\n  'information': var(--color-feedback-information-low-border),\n  'neutral': var(--color-feedback-neutral-low-border),\n  'success': var(--color-feedback-success-low-border),\n  'warning': var(--color-feedback-warning-low-border),\n  'amber': var(--color-rainbow-1-border),\n  'orange': var(--color-rainbow-2-border),\n  'turquoise': var(--color-rainbow-5-border),\n  'crimson': var(--color-rainbow-6-border),\n  'lime': var(--color-rainbow-9-border),\n  'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n  padding: var(--badge-padding-y) var(--badge-padding-x);\n  display: inline-flex !important; // override the display: none in [hidden] css\n  gap: var(--badge-gap-x);\n  vertical-align: middle;\n  align-items: center;\n  border-radius: var(--radius-rounded-full);\n  border-style: solid;\n  border-width: 0.5px;\n  height: fit-content;\n  width: fit-content;\n\n  &.is-icon-only {\n    padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n    gap: var(--badge-gap-icon-only-x);\n  }\n}\n\n@mixin root-styles-with-gap() {\n  @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n  color: map.get($color-rainbow-text, $color-key);\n  background-color: map.get($color-rainbow-background, $color-key);\n  border-color: map.get($color-rainbow-border, $color-key);\n  .close {\n    @include focus-ring(\n      if(\n        str-index('error information neutral success warning', $color-key),\n        var(\n          --color-feedback-#{$color-key}-low-content,\n          map.get($color-rainbow-text, $color-key)\n        ),\n        if(\n          type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n            and not\n            str-index('error information neutral success warning', $color-key),\n          var(\n            --color-#{$color-key}-content,\n            map.get($color-rainbow-text, $color-key)\n          ),\n          var(--color-rainbow-#{$color-key}-content)\n        )\n      ),\n      0.2\n    );\n  }\n}\n\n@mixin icon-color($color-key) {\n  color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n  @include root-styles();\n\n  //gap styles\n  &.with-gap {\n    @include root-styles-with-gap();\n  }\n\n  &.visually-hidden {\n    @include utils.visually-hidden();\n  }\n\n  &:not(.with-gap) {\n    @include root-styles();\n  }\n\n  // color styles\n  @each $i in $badge-colors {\n    &.badge-#{$i} {\n      @include badge-color($i);\n      nv-icon {\n        @include icon-color($i);\n      }\n    }\n  }\n\n  //label styles\n  & span {\n    @include type-settings(xs, xs);\n    text-align: center;\n  }\n\n  // nv-icon styles\n  & nv-icon > svg {\n    @each $size, $config in icon.$size-variants {\n      &.icon-#{$size} {\n        @include icon.icon-size-and-stroke(\n          map.get(map.get(icon.$size-variants, 'xs'), size),\n          map.get(map.get(icon.$size-variants, 'xs'), stroke)\n        );\n      }\n    }\n  }\n\n  .close {\n    padding: 0;\n    line-height: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    aspect-ratio: 1/1;\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() el: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop({ reflect: true })\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge.\n   * deprecated Use status values or named colors instead.\n   * Use a string between 1 to 10\n   * or one of the status values: error, information, neutral, success, warning\n   * or one of the color names: amber, orange, turquoise, crimson, lime\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * When true, the badge will only display an icon without label.\n   * The label will be visually hidden but still accessible for screen readers.\n   */\n  @Prop({ reflect: true })\n  readonly isIconOnly?: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.el, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      this._isHidden = true;\n      const { setCollapsed } = useCollapse(this.el);\n      const { setFadeOut } = useFade(this.el);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   */\n  private readonly handleClose = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n          'is-icon-only': this.isIconOnly,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n        </slot>\n\n        <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n          {this.label}\n          <slot></slot>\n        </span>\n\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"p-e5dff125.js","mappings":"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","names":[],"sources":["src/components/nv-badge/nv-badge.scss?tag=nv-badge","src/components/nv-badge/nv-badge.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../nv-icon/styles/mixins' as icon;\n@use '../../styles/utils' as utils;\n@import '../../styles/focus-ring';\n\n/* Variants */\n$badge-colors: (\n  '1',\n  '2',\n  '3',\n  '4',\n  '5',\n  '6',\n  '7',\n  '8',\n  '9',\n  '10',\n  'error',\n  'information',\n  'neutral',\n  'success',\n  'warning',\n  'amber',\n  'orange',\n  'turquoise',\n  'crimson',\n  'lime',\n  'petrol',\n);\n\n/* Define maps for color-related variables */\n$color-rainbow-text: (\n  '1': var(--color-rainbow-1-text),\n  '2': var(--color-rainbow-2-text),\n  '3': var(--color-rainbow-3-text),\n  '4': var(--color-rainbow-4-text),\n  '5': var(--color-rainbow-5-text),\n  '6': var(--color-rainbow-6-text),\n  '7': var(--color-rainbow-7-text),\n  '8': var(--color-rainbow-8-text),\n  '9': var(--color-rainbow-9-text),\n  '10': var(--color-rainbow-10-text),\n  'error': var(--color-feedback-error-low-text),\n  'information': var(--color-feedback-information-low-text),\n  'neutral': var(--color-feedback-neutral-low-text),\n  'success': var(--color-feedback-success-low-text),\n  'warning': var(--color-feedback-warning-low-text),\n  'amber': var(--color-rainbow-1-text),\n  'orange': var(--color-rainbow-2-text),\n  'turquoise': var(--color-rainbow-5-text),\n  'crimson': var(--color-rainbow-6-text),\n  'lime': var(--color-rainbow-9-text),\n  'petrol': var(--color-rainbow-8-text),\n);\n\n$color-rainbow-icon: (\n  '1': var(--color-rainbow-1-icon),\n  '2': var(--color-rainbow-2-icon),\n  '3': var(--color-rainbow-3-icon),\n  '4': var(--color-rainbow-4-icon),\n  '5': var(--color-rainbow-5-icon),\n  '6': var(--color-rainbow-6-icon),\n  '7': var(--color-rainbow-7-icon),\n  '8': var(--color-rainbow-8-icon),\n  '9': var(--color-rainbow-9-icon),\n  '10': var(--color-rainbow-10-icon),\n  'error': var(--color-feedback-error-low-icon),\n  'information': var(--color-feedback-information-low-icon),\n  'neutral': var(--color-feedback-neutral-low-icon),\n  'success': var(--color-feedback-success-low-icon),\n  'warning': var(--color-feedback-warning-low-icon),\n  'amber': var(--color-rainbow-1-icon),\n  'orange': var(--color-rainbow-2-icon),\n  'turquoise': var(--color-rainbow-5-icon),\n  'crimson': var(--color-rainbow-6-icon),\n  'lime': var(--color-rainbow-9-icon),\n  'petrol': var(--color-rainbow-8-icon),\n);\n\n$color-rainbow-background: (\n  '1': var(--color-rainbow-1-background),\n  '2': var(--color-rainbow-2-background),\n  '3': var(--color-rainbow-3-background),\n  '4': var(--color-rainbow-4-background),\n  '5': var(--color-rainbow-5-background),\n  '6': var(--color-rainbow-6-background),\n  '7': var(--color-rainbow-7-background),\n  '8': var(--color-rainbow-8-background),\n  '9': var(--color-rainbow-9-background),\n  '10': var(--color-rainbow-10-background),\n  'error': var(--color-feedback-error-low-background),\n  'information': var(--color-feedback-information-low-background),\n  'neutral': var(--color-feedback-neutral-low-background),\n  'success': var(--color-feedback-success-low-background),\n  'warning': var(--color-feedback-warning-low-background),\n  'amber': var(--color-rainbow-1-background),\n  'orange': var(--color-rainbow-2-background),\n  'turquoise': var(--color-rainbow-5-background),\n  'crimson': var(--color-rainbow-6-background),\n  'lime': var(--color-rainbow-9-background),\n  'petrol': var(--color-rainbow-8-background),\n);\n$color-rainbow-border: (\n  '1': var(--color-rainbow-1-border),\n  '2': var(--color-rainbow-2-border),\n  '3': var(--color-rainbow-3-border),\n  '4': var(--color-rainbow-4-border),\n  '5': var(--color-rainbow-5-border),\n  '6': var(--color-rainbow-6-border),\n  '7': var(--color-rainbow-7-border),\n  '8': var(--color-rainbow-8-border),\n  '9': var(--color-rainbow-9-border),\n  '10': var(--color-rainbow-10-border),\n  'error': var(--color-feedback-error-low-border),\n  'information': var(--color-feedback-information-low-border),\n  'neutral': var(--color-feedback-neutral-low-border),\n  'success': var(--color-feedback-success-low-border),\n  'warning': var(--color-feedback-warning-low-border),\n  'amber': var(--color-rainbow-1-border),\n  'orange': var(--color-rainbow-2-border),\n  'turquoise': var(--color-rainbow-5-border),\n  'crimson': var(--color-rainbow-6-border),\n  'lime': var(--color-rainbow-9-border),\n  'petrol': var(--color-rainbow-8-border),\n);\n\n@mixin root-styles() {\n  padding: var(--badge-padding-y) var(--badge-padding-x);\n  display: inline-flex !important; // override the display: none in [hidden] css\n  gap: var(--badge-gap-x);\n  vertical-align: middle;\n  align-items: center;\n  border-radius: var(--radius-rounded-full);\n  border-style: solid;\n  border-width: 0.5px;\n  height: fit-content;\n  width: fit-content;\n\n  &.is-icon-only {\n    padding: var(--badge-padding-y) var(--badge-padding-icon-only-x);\n    gap: var(--badge-gap-icon-only-x);\n  }\n}\n\n@mixin root-styles-with-gap() {\n  @include root-styles();\n}\n\n@mixin badge-color($color-key) {\n  color: map.get($color-rainbow-text, $color-key);\n  background-color: map.get($color-rainbow-background, $color-key);\n  border-color: map.get($color-rainbow-border, $color-key);\n  .close {\n    @include focus-ring(\n      if(\n        str-index('error information neutral success warning', $color-key),\n        var(\n          --color-feedback-#{$color-key}-low-content,\n          map.get($color-rainbow-text, $color-key)\n        ),\n        if(\n          type-of($color-key) == 'string' and not (str-length($color-key) <= 2)\n            and not\n            str-index('error information neutral success warning', $color-key),\n          var(\n            --color-#{$color-key}-content,\n            map.get($color-rainbow-text, $color-key)\n          ),\n          var(--color-rainbow-#{$color-key}-content)\n        )\n      ),\n      0.2\n    );\n  }\n}\n\n@mixin icon-color($color-key) {\n  color: map.get($color-rainbow-icon, $color-key);\n}\n\n@mixin type-settings($font-size, $line-height) {\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-xs) !important;\n}\n\nnv-badge {\n  @include root-styles();\n\n  //gap styles\n  &.with-gap {\n    @include root-styles-with-gap();\n  }\n\n  &.visually-hidden {\n    @include utils.visually-hidden();\n  }\n\n  &:not(.with-gap) {\n    @include root-styles();\n  }\n\n  // color styles\n  @each $i in $badge-colors {\n    &.badge-#{$i} {\n      @include badge-color($i);\n      nv-icon {\n        @include icon-color($i);\n      }\n    }\n  }\n\n  //label styles\n  & span {\n    @include type-settings(xs, xs);\n    text-align: center;\n  }\n\n  // nv-icon styles\n  & nv-icon > svg {\n    @each $size, $config in icon.$size-variants {\n      &.icon-#{$size} {\n        @include icon.icon-size-and-stroke(\n          map.get(map.get(icon.$size-variants, 'xs'), size),\n          map.get(map.get(icon.$size-variants, 'xs'), stroke)\n        );\n      }\n    }\n  }\n\n  .close {\n    padding: 0;\n    line-height: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    aspect-ratio: 1/1;\n    border-radius: var(--radius-rounded-full);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n * @slot default - for custom content, for pure text use label instead.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop({ reflect: true })\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge.\n   * deprecated Use status values or named colors instead.\n   * Use a string between 1 to 10\n   * or one of the status values: error, information, neutral, success, warning\n   * or one of the color names: amber, orange, turquoise, crimson, lime\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * When true, the badge will only display an icon without label.\n   * The label will be visually hidden but still accessible for screen readers.\n   */\n  @Prop({ reflect: true })\n  readonly isIconOnly?: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      this._isHidden = true;\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   */\n  private readonly handleClose = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n          'is-icon-only': this.isIconOnly,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && <nv-icon name={this.leadIcon} size=\"sm\"></nv-icon>}\n        </slot>\n\n        <span class={clsx({ 'visually-hidden': this.isIconOnly })}>\n          {this.label}\n          <slot></slot>\n        </span>\n\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-a823b8e9.js → p-e6c04562.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './p-54161bad.js';
+import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './p-68fa3890.js';
 
 var inputmask = {exports: {}};
 
@@ -3758,4 +3758,4 @@ const Inputmask = /*@__PURE__*/getDefaultExportFromCjs(inputmask.exports);
 
 export { Inputmask as I };
 
-//# sourceMappingURL=p-a823b8e9.js.map
+//# sourceMappingURL=p-e6c04562.js.map