@nova-design-system/nova-react 3.9.1 → 3.10.1-beta.0

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

@@ -7,6 +7,7 @@ import { NvBadge as NvBadgeElement } from "@nova-design-system/nova-webcomponent
 import { NvBreadcrumb as NvBreadcrumbElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-breadcrumb.js";
 import { NvBreadcrumbs as NvBreadcrumbsElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-breadcrumbs.js";
 import { NvButton as NvButtonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-button.js";
+import { NvButtongroup as NvButtongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-buttongroup.js";
 import { NvCalendar as NvCalendarElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-calendar.js";
 import { NvCol as NvColElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-col.js";
 import { NvDatagrid as NvDatagridElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-datagrid.js";
@@ -40,6 +41,8 @@ import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponent
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
 import { NvTablecolumn as NvTablecolumnElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablecolumn.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
+import { NvTogglebutton as NvTogglebuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
+import { NvTogglebuttongroup as NvTogglebuttongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
 import { NvTooltip as NvTooltipElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 export type NvAccordionEvents = {
@@ -72,6 +75,8 @@ export type NvBreadcrumbsEvents = NonNullable<unknown>;
 export declare const NvBreadcrumbs: StencilReactComponent<NvBreadcrumbsElement, NvBreadcrumbsEvents>;
 export type NvButtonEvents = NonNullable<unknown>;
 export declare const NvButton: StencilReactComponent<NvButtonElement, NvButtonEvents>;
+export type NvButtongroupEvents = NonNullable<unknown>;
+export declare const NvButtongroup: StencilReactComponent<NvButtongroupElement, NvButtongroupEvents>;
 export type NvCalendarEvents = {
     onSingleDateChange: EventName<CustomEvent<string>>;
     onRangeDateChange: EventName<NvCalendarCustomEvent<HTMLNvCalendarElement['rangeValue']>>;
@@ -221,6 +226,17 @@ export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvToggle: StencilReactComponent<NvToggleElement, NvToggleEvents>;
+export type NvTogglebuttonEvents = {
+    onToggled: EventName<CustomEvent<{
+        value: string;
+        active: boolean;
+    }>>;
+};
+export declare const NvTogglebutton: StencilReactComponent<NvTogglebuttonElement, NvTogglebuttonEvents>;
+export type NvTogglebuttongroupEvents = {
+    onValueChanged: EventName<CustomEvent<string[]>>;
+};
+export declare const NvTogglebuttongroup: StencilReactComponent<NvTogglebuttongroupElement, NvTogglebuttongroupEvents>;
 export type NvTooltipEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };

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

@@ -7,6 +7,7 @@ import { NvBadge as NvBadgeElement } from "@nova-design-system/nova-webcomponent
 import { NvBreadcrumb as NvBreadcrumbElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-breadcrumb.js";
 import { NvBreadcrumbs as NvBreadcrumbsElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-breadcrumbs.js";
 import { NvButton as NvButtonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-button.js";
+import { NvButtongroup as NvButtongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-buttongroup.js";
 import { NvCalendar as NvCalendarElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-calendar.js";
 import { NvCol as NvColElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-col.js";
 import { NvDatagrid as NvDatagridElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-datagrid.js";
@@ -40,6 +41,8 @@ import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponent
 import { NvTable as NvTableElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-table.js";
 import { NvTablecolumn as NvTablecolumnElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablecolumn.js";
 import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
+import { NvTogglebutton as NvTogglebuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebutton.js";
+import { NvTogglebuttongroup as NvTogglebuttongroupElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-togglebuttongroup.js";
 import { NvTooltip as NvTooltipElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
@@ -74,6 +77,8 @@ export type NvBreadcrumbsEvents = NonNullable<unknown>;
 export declare const NvBreadcrumbs: StencilReactComponent<NvBreadcrumbsElement, NvBreadcrumbsEvents>;
 export type NvButtonEvents = NonNullable<unknown>;
 export declare const NvButton: StencilReactComponent<NvButtonElement, NvButtonEvents>;
+export type NvButtongroupEvents = NonNullable<unknown>;
+export declare const NvButtongroup: StencilReactComponent<NvButtongroupElement, NvButtongroupEvents>;
 export type NvCalendarEvents = {
     onSingleDateChange: EventName<CustomEvent<string>>;
     onRangeDateChange: EventName<NvCalendarCustomEvent<HTMLNvCalendarElement['rangeValue']>>;
@@ -223,6 +228,17 @@ export type NvToggleEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };
 export declare const NvToggle: StencilReactComponent<NvToggleElement, NvToggleEvents>;
+export type NvTogglebuttonEvents = {
+    onToggled: EventName<CustomEvent<{
+        value: string;
+        active: boolean;
+    }>>;
+};
+export declare const NvTogglebutton: StencilReactComponent<NvTogglebuttonElement, NvTogglebuttonEvents>;
+export type NvTogglebuttongroupEvents = {
+    onValueChanged: EventName<CustomEvent<string[]>>;
+};
+export declare const NvTogglebuttongroup: StencilReactComponent<NvTogglebuttongroupElement, NvTogglebuttongroupEvents>;
 export type NvTooltipEvents = {
     onOpenChanged: EventName<CustomEvent<boolean>>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.9.1",
+  "version": "3.10.1-beta.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-BGWUswPo.js

@@ -1,206 +0,0 @@
-'use strict';
-
-var index = require('./index-BtjpbnUr.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
-var fade_animation71e8e34c = require('./fade.animation-71e8e34c-BAw_TYsB.js');
-require('./stylefire.es-74da334a-y0piPjlz.js');
-var timeline_animationAdf35ecb = require('./timeline.animation-adf35ecb-CE6Dsdxr.js');
-require('react');
-
-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;
-
-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.
-         * 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_animation71e8e34c.useFade(this.ref, { duration: 150 });
-        const { collapse, expand } = collapse_animation16e3af45.useCollapse(this.ref, { duration: 150 });
-        if (hidden === true)
-            await timeline_animationAdf35ecb.timeline(fadeOut, collapse).start();
-        if (hidden === false)
-            await timeline_animationAdf35ecb.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_animation16e3af45.useCollapse(this.ref);
-            const { setFadeOut } = fade_animation71e8e34c.useFade(this.ref);
-            setCollapsed();
-            setFadeOut();
-        }
-    }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (index.h(index.Host, { key: '435c5bb1f565c8bd95cca5c6828157c80f60aa39', class: clsx297c1ffe.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: '271dc833471e026af5088f48227639682e661e97', name: "leading-icon" }, this.leadIcon && index.h("nv-icon", { key: 'e578eabf4c5a09e61e28c3839b943804acdf88e8', name: this.leadIcon, size: "sm" })), index.h("span", { key: '24d16a21b2b4499be712f9b747c9ab63c5e6ca0c', class: clsx297c1ffe.clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, index.h("slot", { key: '3e3827620e6ade8be256ce7dd0b8bb949f36f2d5' })), this.dismissible && (index.h("button", { key: '90ed9ec1b71815554b963b0eafeb5536578700cf', onClick: this.handleClose, class: "close", type: "button" }, index.h("nv-icon", { key: 'df426e5d88c2bf02e7aa83c179c05db4795f03db', 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: '82abe79dd061f60e380f033027f799121769f89e', onClick: this.handleClick }, index.h("nv-fieldcheckbox", { key: '505181c56faacb09e55c428d91287d96e1c3b72a', 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 }, index.h("slot", { key: '95a53b7d4ec735fd3256505b57e2a497b475f511' }), index.h("slot", { key: '137d5e2b3046417bbc90c0bd2dd10b846d1dfd53', name: "main" }), index.h("slot", { key: '47d4a73e401186b7bc7a18aaad82018f0ccc1e2f', name: "label" }), index.h("slot", { key: 'ff5c752d386c282635a97ad2bcb8858571aff7e9', name: "description" }))));
-    }
-    get el() { return index.getElement(this); }
-};
-NvFielddropdownitemcheck.style = NvFielddropdownitemcheckStyle0;
-
-exports.nv_badge = NvBadge;
-exports.nv_fielddropdownitemcheck = NvFielddropdownitemcheck;