@nova-design-system/nova-react 3.0.0 → 3.1.0

package/dist/cjs/{nv-menuitem.entry-CFkXoZ_r.js → nv-menuitem.entry-B9cjy7O8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-Cn-oNJnW.js');
 require('react');
 
 const nvMenuitemCss = "nv-menuitem{display:flex;align-items:center;max-width:300px;width:100vw;font-size:var(--menu-contextual-item-font-size);font-weight:var(--menu-contextual-item-font-weight);color:var(--components-menu-contextual-item-content);border-radius:var(--menu-contextual-item-radius);gap:var(--menu-contextual-item-gap-x);padding:var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);transition:background-color 150ms ease-out;cursor:pointer}nv-menuitem:hover,nv-menuitem:focus,nv-menuitem:focus-within{background-color:var(--components-menu-contextual-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-menuitem *{pointer-events:none}nv-menuitem kbd{color:var(--components-menu-contextual-item-shortcut)}nv-menuitem [data-scope=text]{margin-right:auto}nv-menuitem[disabled]:not([disabled=false]){cursor:unset;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}";
@@ -49,7 +49,7 @@ const NvMenuitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd736bc00759cb97fe52d2d6dc091667057a5585c', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: 'cf29c75feedcb61d16d33433f834751c821a4256', name: this.icon }), index.h("slot", { key: '0ebe8b2faac9981023c224e3c5cd4f131e088c0e' }), this.label && index.h("span", { key: 'd2659aceb0ecc1cad794ae16d15432379677012c', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: '7d7772b6efda6faccafc425772c905d4aabd2ef5' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'c756d3ceffc907fa0c37338595a7fd09f8238a7b', name: "chevron-right" })));
+        return (index.h(index.Host, { key: 'c15d6ae403f8857bd133aa7d6b9ac8097927c0ae', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '8a334a5475bc748603865a3b824a6e247a53a8f9', name: this.icon }), index.h("slot", { key: 'fa496a548eb60ad8c61641d44d0a5ba7bf6969a6' }), this.label && index.h("span", { key: '9950f30fb73b2dda05c267e15046372aba70b662', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: '483c283196abe80ac62410b5eb2da71bf78efbeb' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'c0244efa7fde567b2d3852141c775d7d818e82b3', name: "chevron-right" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-popover.entry-KT1iQUJk.js → nv-popover.entry-ChLYZ3zY.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-Cn-oNJnW.js');
 var fade_animation2a077983 = require('./fade.animation-2a077983-aKN0EDTo.js');
 var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
 require('react');
@@ -1950,7 +1950,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '830051c35f7e10dfa4e31d401663bd5727ac988f' }, index.h("slot", { key: 'a49852a712bf6ab9c8557035ca4618d007939f03', name: "trigger" }), index.h("div", { key: '6d9cd4bd873cb92b1716a8ea88a3877a029cbe9c', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'f935c9248b602aa1c39e7d28c5503a24067fb744', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '6b682de05037b2d3b60c9139c448620fab963ea1', name: "content" }))));
+        return (index.h(index.Host, { key: 'a93404e4346c78d56a2c26f8ec2cb231ffb04523' }, index.h("slot", { key: '5c76fff7d2d99069986575c755955c2e76dbbd7b', name: "trigger" }), index.h("div", { key: '463ca161fbba6d558db76fb4a8f3eaaff901eed0', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'e87e53223fe5cef9bce9e6a4eac465c6aa684ce4', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '5e902c098d6ab1c91286bea5bdf621469591c3c0', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-row.entry-Cs2GDrcu.js → nv-row.entry-DiLY8Vbc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-Cn-oNJnW.js');
 require('react');
 
 const nvRowCss = "nv-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--spacing-4) * -1);margin-left:calc(var(--spacing-4) * -1);row-gap:var(--spacing-4)}";
@@ -13,7 +13,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7daaa109808165553e69707c72550f284e087011' }, index.h("slot", { key: 'a00fd8c81352b485d8508f9bd68af4dd81d959e1' })));
+        return (index.h(index.Host, { key: '09285cba691e1c35f0ddee48f391e4ab992d84f1' }, index.h("slot", { key: '7a2e8f4792e48928ce700ebbab99450ab3c57bd3' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/{nv-stack.entry-Ci7pxGSo.js → nv-stack.entry-MpPzmg5_.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-Cn-oNJnW.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 require('react');
 
@@ -22,7 +22,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '02e184fbc9e9ddd4b02b107baf093047fa3697b0', class: clsx297c1ffe.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '1a501fcc419f97f2714be822120072b49590e5ea' })));
+        return (index.h(index.Host, { key: '27ed60826e915488c5ee038efb8f96996d5109c7', class: clsx297c1ffe.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '944d7afda349c4a2cb3598009c210b6e8823e11c' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/cjs/{nv-table.entry-N4MV8Y6E.js → nv-table.entry-cME3Zuq2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-Cn-oNJnW.js');
 var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
 require('react');
 
@@ -314,14 +314,14 @@ const NvTable = class {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (index.h(index.Host, { key: 'b2962fba4d5a12aa660d0c0f69298c93947ef592' }, index.h("div", { key: 'f60e5c09d57c0ccf5cb9996ca85fcc8792270b85', class: "hidden" }, index.h("slot", { key: '9c4aefff542478535b3f342b1c75f68d717c3bf8' })), index.h("slot", { key: 'bfd0f5406187bcad69d9ed41e2f294314a3572f1', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
+        return (index.h(index.Host, { key: '60adbba864a3e654bdb5fa15fe2a248876121a55' }, index.h("div", { key: 'ee32010a50621ac0085adf4ee05ffdfe66dd1e37', class: "hidden" }, index.h("slot", { key: 'eb94efbff64a5d658d26854b296a0a724f274d30' })), index.h("slot", { key: 'fc3444819a51080d7418328179b2dcd32d0b9604', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (index.h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), index.h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (index.h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (index.h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), index.h("slot", { key: 'e0039c9af9506bc8f2ded8cc81bbd2667ee1f2c1', name: "after" })));
+        })))))))), index.h("slot", { key: 'e472198f042669aae6e5db36871421312bd1b02b', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-tablecolumn.entry-CTz4jsZl.js → nv-tablecolumn.entry-DSctDxCS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-Cn-oNJnW.js');
 require('react');
 
 const NvTablecolumn = class {

package/dist/cjs/{nv-toggle.entry-m10-ncYR.js → nv-toggle.entry-EBWm3Xy5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-Cn-oNJnW.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
@@ -65,8 +65,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e80390a43bab3d55373f6b05db1516210f90c3b5', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '66156f05cc18bb63a8625cdff72d9c177e4cf86b', class: "input-container" }, index.h("input", { key: 'db0c2c078c23431605befb8dd972a29bfdefb16f', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '576df464b48fa11bf8a46bede5f1d822db569636', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'f529b009876a5de5061747f78372a66ccfdcac61', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '3ace029242d920b783fe0038f8721b416f54633f', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '2eeb41266ee52ef40c1600750084fda0fac8dc6f', class: "description" }, index.h("slot", { key: '605541594fcc7f3192766a5395c5a81f42de7728', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '03338b677a603eaa4a6f0046f0df1e3dd007c532', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '753b8153db73d144fe1abd284c7c75d3d6a3c443', class: "input-container" }, index.h("input", { key: 'de3724f0d31bd568070a27d6276e2cd7d9fa8bf1', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '74a7b9114b6c9a0cb25abff79b0c789540e2f2d3', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '417e3d25d89310c051f6c1dfb23d6f7ff4ad393d', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '3c7b268641b84b94b7d8f0aebdc9f50276098650', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '330fd1706da4b20d132561cfa7080a2c8be2e6b7', class: "description" }, index.h("slot", { key: '7b64ecc949dd8ee781e67ef5aeb1949c8d10137a', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-tooltip.entry-B6aRDto3.js → nv-tooltip.entry-q6rJLq1C.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-Cn-oNJnW.js');
 require('react');
 
 const nvTooltipCss = "nv-tooltip{display:inline-block;position:relative}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip [data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip [data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}";
@@ -35,7 +35,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8309e08944469fad76997a6dfcb8b434461aa5a3' }, index.h("slot", { key: 'f3da94e2f2f581f7b8c93f4b3e70de67e305508a' }), index.h("nv-popover", { key: 'a28c50f59f9a781afd8a8ab60260d065dcadf96d', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '76f63a5f220de640f4eeada8aeba97e9ead73fc9', slot: "content" }, this.message), index.h("slot", { key: 'f55f71b357b23c29b40b9c022a5a1718c4c8c8fb', name: "content" }))));
+        return (index.h(index.Host, { key: '50e49ff4f1e6d310c0990fb7665aa6f3a2515b73' }, index.h("slot", { key: '27af73eb4b2f453eb9c18248985f7c4c9aa38d18' }), index.h("nv-popover", { key: 'b960bcef2d790d88634490cfc1e3ab87ab00468e', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '7870d90153248b7e7ace5d31a835dde30b5f36ba', slot: "content" }, this.message), index.h("slot", { key: '8f25395b817beaaa6653ce58fe17a8bf29ca2de0', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/generated/components.js

@@ -111,7 +111,10 @@ export const NvDatagrid = createComponent({
     tagName: 'nv-datagrid',
     elementClass: NvDatagridElement,
     react: React,
-    events: { onAction: 'action' },
+    events: {
+        onAction: 'action',
+        onSelectedRows: 'selectedRows'
+    },
     defineCustomElement: defineNvDatagrid
 });
 export const NvDatagridcolumn = createComponent({

package/dist/types/generated/components.d.ts

@@ -1,4 +1,4 @@
-import { type ActionEvent, type DateRange, type NvAlertCustomEvent, type NvBadgeCustomEvent, type NvCalendarCustomEvent, type NvDatagridCustomEvent, type NvFielddaterangeCustomEvent, type NvFielddropdownCustomEvent, type NvMenuCustomEvent, type NvMenuitemCustomEvent, type NvTableCustomEvent } from "@nova-design-system/nova-webcomponents";
+import { type NvCalendarCustomEvent, type NvFielddaterangeCustomEvent, type NvFielddropdownCustomEvent, type NvMenuCustomEvent, type NvMenuitemCustomEvent } from "@nova-design-system/nova-webcomponents";
 import { NvAlert as NvAlertElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-alert.js";
 import { NvAvatar as NvAvatarElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-avatar.js";
 import { NvBadge as NvBadgeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-badge.js";
@@ -42,13 +42,13 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
 type NvAlertEvents = {
     onHiddenChanged: EventName<CustomEvent<boolean>>;
     onHiddenChangedComplete: EventName<CustomEvent<boolean>>;
-    onCloseClicked: EventName<NvAlertCustomEvent<MouseEvent>>;
+    onCloseClicked: EventName<CustomEvent<void>>;
 };
 export declare const NvAlert: StencilReactComponent<NvAlertElement, NvAlertEvents>;
 type NvAvatarEvents = NonNullable<unknown>;
 export declare const NvAvatar: StencilReactComponent<NvAvatarElement, NvAvatarEvents>;
 type NvBadgeEvents = {
-    onCloseClicked: EventName<NvBadgeCustomEvent<MouseEvent>>;
+    onCloseClicked: EventName<CustomEvent<void>>;
     onHiddenChanged: EventName<CustomEvent<boolean>>;
     onHiddenChangedComplete: EventName<CustomEvent<boolean>>;
 };
@@ -61,13 +61,17 @@ type NvButtonEvents = NonNullable<unknown>;
 export declare const NvButton: StencilReactComponent<NvButtonElement, NvButtonEvents>;
 type NvCalendarEvents = {
     onSingleDateChange: EventName<CustomEvent<string>>;
-    onRangeDateChange: EventName<NvCalendarCustomEvent<DateRange>>;
+    onRangeDateChange: EventName<NvCalendarCustomEvent<HTMLNvCalendarElement['rangeValue']>>;
 };
 export declare const NvCalendar: StencilReactComponent<NvCalendarElement, NvCalendarEvents>;
 type NvColEvents = NonNullable<unknown>;
 export declare const NvCol: StencilReactComponent<NvColElement, NvColEvents>;
 type NvDatagridEvents = {
-    onAction: EventName<NvDatagridCustomEvent<ActionEvent>>;
+    onAction: EventName<CustomEvent<{
+        keyAction: string;
+        details: any;
+    }>>;
+    onSelectedRows: EventName<CustomEvent<any[]>>;
 };
 export declare const NvDatagrid: StencilReactComponent<NvDatagridElement, NvDatagridEvents>;
 type NvDatagridcolumnEvents = NonNullable<unknown>;
@@ -94,7 +98,7 @@ type NvFielddateEvents = {
 };
 export declare const NvFielddate: StencilReactComponent<NvFielddateElement, NvFielddateEvents>;
 type NvFielddaterangeEvents = {
-    onDateRangeChange: EventName<NvFielddaterangeCustomEvent<DateRange>>;
+    onDateRangeChange: EventName<NvFielddaterangeCustomEvent<HTMLNvCalendarElementEventMap['rangeDateChange']>>;
 };
 export declare const NvFielddaterange: StencilReactComponent<NvFielddaterangeElement, NvFielddaterangeEvents>;
 type NvFielddropdownEvents = {
@@ -177,7 +181,10 @@ export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
 type NvStackEvents = NonNullable<unknown>;
 export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
 type NvTableEvents = {
-    onAction: EventName<NvTableCustomEvent<ActionEvent>>;
+    onAction: EventName<CustomEvent<{
+        keyAction: string;
+        details: any;
+    }>>;
 };
 export declare const NvTable: StencilReactComponent<NvTableElement, NvTableEvents>;
 type NvTablecolumnEvents = NonNullable<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",

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

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