@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/types/components.d.ts

@@ -0,0 +1,2412 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, FieldLabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
+import { IconName } from "./components/nv-icon/nv-icons";
+import { Placement } from "@floating-ui/dom";
+import { MenuitemSelectedEventDetail } from "./components/nv-menuitem/nv-menuitem";
+import { Element } from "./stencil-public-runtime";
+export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, FieldLabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
+export { IconName } from "./components/nv-icon/nv-icons";
+export { Placement } from "@floating-ui/dom";
+export { MenuitemSelectedEventDetail } from "./components/nv-menuitem/nv-menuitem";
+export { Element } from "./stencil-public-runtime";
+export namespace Components {
+    interface NvAlert {
+        /**
+          * Defines color of the alert.
+          * @deprecated use feedback instead.
+         */
+        "color": `${DeprecatedSemanticColors}`;
+        /**
+          * Allows the alert to be dismissed via a close button (x). The alert is not dismissible unless explicitly enabled.
+         */
+        "dismissible": boolean;
+        /**
+          * Specifies the alert type which determines the color and default icon.
+         */
+        "feedback": `${FeedbackColors}`;
+        /**
+          * Short and concise text for the alert title.
+         */
+        "heading": string;
+        /**
+          * Controls the visibility of the alert. Will animate with fade and collapse.
+         */
+        "hidden": boolean;
+        /**
+          * Icon associated with the alert, defaults vary based on the feedback type.
+         */
+        "icon": string;
+        /**
+          * Main content of the alert. For more complex content, use the default slot instead.
+         */
+        "message": string;
+        /**
+          * When true, the alert does not automatically close upon dismissing. Useful for externally controlled component behavior.
+         */
+        "preventAutoClose": boolean;
+    }
+    interface NvAvatar {
+        /**
+          * If and image is provided, add an alt tag to describe it.
+         */
+        "alt": string;
+        /**
+          * You can apply different colors on the Avatar. Use a string number between 1 and 10.
+         */
+        "color": string;
+        /**
+          * Initials of the avatar. Usually use two letters When filled with the src parameter, the text will not be rendered.
+         */
+        "initials": string;
+        /**
+          * Set size to Large to the avatar.
+          * @deprecated use size instead.
+         */
+        "large": boolean;
+        /**
+          * Set size to Medium to the avatar.
+          * @deprecated use size instead.
+         */
+        "medium": boolean;
+        /**
+          * Define the size of the avatar. You can use t-shirt sizes.
+         */
+        "size": `${SemanticSizes}`;
+        /**
+          * Set size to Small to the avatar.
+          * @deprecated use size instead.
+         */
+        "small": boolean;
+        /**
+          * Will insert an image into the avatar.
+         */
+        "src": string;
+        /**
+          * Set initials to the avatar.
+          * @deprecated use initials instead.
+         */
+        "text": string;
+        /**
+          * Set src to the avatar.
+          * @deprecated use src instead.
+         */
+        "url": string;
+        /**
+          * Set size to ExtraLarge to the avatar.
+          * @deprecated use size instead.
+         */
+        "xlarge": boolean;
+        /**
+          * Set size to ExtraSmall to the avatar.
+          * @deprecated use size instead.
+         */
+        "xsmall": boolean;
+    }
+    interface NvBadge {
+        /**
+          * The color of the badge. Use a string between 1 to 5
+         */
+        "color"?: string;
+        /**
+          * Whether the badge is dismissible.
+          * @deprecated use dismissible instead.
+         */
+        "dismissal": boolean;
+        /**
+          * Whether the badge is dismissible.
+         */
+        "dismissible": boolean;
+        /**
+          * Controls the visibility of the badge. Will animate with fade and collapse.
+         */
+        "hidden": boolean;
+        /**
+          * The icon to display in the badge.
+          * @deprecated use leadIcon or slot="leading-icon" instead.
+         */
+        "icon": string;
+        /**
+          * The location of the icon in the badge.
+          * @deprecated only leadIcon now.
+         */
+        "iconLocation": 'left' | 'right';
+        /**
+          * Main content of the badge.
+         */
+        "label"?: string | null;
+        /**
+          * The lead icon of the badge.
+         */
+        "leadIcon"?: string | null;
+        /**
+          * When true, the alert does not automatically close upon dismissing. Useful for externally controlled component behavior.
+         */
+        "preventAutoClose": boolean;
+    }
+    /**
+     * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
+     */
+    interface NvBase {
+    }
+    interface NvButton {
+        /**
+          * Applies styling that visually indicates the button represents a dangerous action.
+         */
+        "danger": boolean;
+        /**
+          * Disables the button, preventing user interaction.
+         */
+        "disabled": boolean;
+        /**
+          * Adjusts the button's emphasis to make it more or less visually prominent to users. Use this to draw attention to important actions or reduce focus on less critical ones
+         */
+        "emphasis": `${ButtonEmphasis}`;
+        /**
+          * Allows the button to stretch and fill the entire width of its container.
+         */
+        "fluid": boolean;
+        /**
+          * Set this to true to show a spinner on the button, letting users know that their action is being processed. It helps improve user experience by indicating ongoing activities.
+         */
+        "loading": boolean;
+        /**
+          * Determines how large or small the button appears, allowing for customization of the button's dimensions to fit different design specifications and user needs.
+         */
+        "size": `${ButtonSize}`;
+        /**
+          * Sets the button type to control its function in forms. Use 'submit' to send form data, 'reset' to clear the form, or 'button' for a standard button that doesn’t interact with form submission by default.
+         */
+        "type": `${ButtonType}`;
+    }
+    interface NvCol {
+        /**
+          * Defines the column size based on a 12 column grid system.
+         */
+        "size": number;
+    }
+    interface NvFieldcheckbox {
+        /**
+          * Indicates whether the checkbox is checked or not.
+         */
+        "checked": boolean;
+        /**
+          * A description providing additional context or information about the checkbox.
+         */
+        "description"?: string;
+        /**
+          * Disables the checkbox, preventing user interaction.
+         */
+        "disabled": boolean;
+        /**
+          * Signals that there is an error associated with the checkbox, which can trigger visual cues.
+         */
+        "error": boolean;
+        /**
+          * A description that appears when there is an error related to the checkbox.
+         */
+        "errorDescription"?: string;
+        /**
+          * Hides the label visually while still keeping it available for screen readers.
+         */
+        "hideLabel": boolean;
+        /**
+          * Indicates whether the checkbox is in an indeterminate state, typically used for hierarchical checkboxes.
+         */
+        "indeterminate": boolean;
+        /**
+          * Sets the ID for the radio button’s input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId": string;
+        /**
+          * The label displayed next to the checkbox.
+         */
+        "label"?: string;
+        /**
+          * When true, the label will be placed before the checkbox.
+          * @deprecated Use `labelPlacement = end` instead.
+         */
+        "labelBefore"?: boolean;
+        /**
+          * Determines the position of the label relative to the checkbox, either 'start' (before) or 'end' (after).
+         */
+        "labelPlacement": `${FieldLabelPlacement}`;
+        /**
+          * Message define a 'hint ' message for the Field.
+          * @deprecated Use `description` instead.
+         */
+        "message"?: string;
+        /**
+          * The name attribute for the checkbox input, used to reference the form data after submission.
+         */
+        "name"?: string;
+        /**
+          * Sets the checkbox to read-only, preventing user changes but still allowing focus and selection of text.
+         */
+        "readonly": boolean;
+        /**
+          * Marks the checkbox as required, indicating that it must be checked for form submission.
+         */
+        "required": boolean;
+        /**
+          * The text for the validation message.
+          * @deprecated Use `errorDescription` instead.
+         */
+        "validation"?: string;
+        /**
+          * The value attribute of the checkbox input, representing the value sent on form submission when the checkbox is checked. When the form is submitted, the data will consist of a name=value pair.
+         */
+        "value"?: string;
+    }
+    interface NvFieldnumber {
+        /**
+          * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description": string;
+        /**
+          * The disabled prop lets you turn off the input field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to# clicks or touches.
+         */
+        "disabled": boolean;
+        /**
+          * Alters the input field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error": boolean;
+        /**
+          * Show a helpful message under the input field when there’s a problem. It explains what’s wrong and how users can fix it, making the error easier to understand and resolve.
+          * @validator message
+         */
+        "errorDescription": string;
+        /**
+          * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId": string;
+        /**
+          * Lets you define the text that explains what users should enter in the text input field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label": string;
+        /**
+          * The maximum value that the input field can accept. Use this in combination with min to create a range of valid values.
+         */
+        "max": number;
+        /**
+          * Message defines a 'hint ' message for the number field.
+          * @deprecated use description instead.
+         */
+        "message": string;
+        /**
+          * The minimum value that the input field can accept. Use this in combination with max to create a range of valid values.
+         */
+        "min": number;
+        /**
+          * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input’s data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name": string;
+        /**
+          * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing.
+         */
+        "placeholder": string;
+        /**
+          * Display the input field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything.
+         */
+        "readonly": boolean;
+        /**
+          * Marks the input field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required": boolean;
+        /**
+          * Define the increment value for the input field. It determines how much the value will increase or decrease when the user clicks the stepper buttons.
+         */
+        "step": number;
+        /**
+          * Changes the input field’s appearance to indicate successful input or validation.
+         */
+        "success": boolean;
+        /**
+          * Add the message to the validation state.
+          * @deprecated use errorDescription and set the error prop instead.
+         */
+        "validation": string;
+        /**
+          * The value of the input field. It’s the text that users type in or the value that you set programmatically. This is the main way to interact with the input field, and it’s essential for creating forms that users can fill out.
+         */
+        "value": number;
+    }
+    interface NvFieldpassword {
+        /**
+          * The autocomplete prop helps users fill out the input field faster by suggesting entries they’ve used before, like their email or address. You can turn it on to make forms more convenient or off to ensure users always type in fresh data.
+         */
+        "autocomplete": `${TextInputAutocomplete}`;
+        /**
+          * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description": string;
+        /**
+          * The disabled prop lets you turn off the input field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to# clicks or touches.
+         */
+        "disabled": boolean;
+        /**
+          * Alters the input field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error": boolean;
+        /**
+          * A description that appears when there is an error related to the password field.
+          * @validator message
+         */
+        "errorDescription": string;
+        /**
+          * Hide the button to show/hide the password.
+         */
+        "hidePasswordIcon": boolean;
+        /**
+          * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId": string;
+        /**
+          * Lets you define the text that explains what users should enter in the text input field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label": string;
+        /**
+          * Limits how many characters users can type into the input field. It’s helpful for making sure users don’t enter too much information, keeping their input within the allowed limit.
+         */
+        "maxlength": number;
+        /**
+          * Ensures that users type at least a certain number of characters into the input field. It’s a way to make sure users provide enough information before moving on.
+         */
+        "minlength": number;
+        /**
+          * Defines the type of the input.
+          * @default 'text'
+         */
+        "mode": 'text' | 'number';
+        /**
+          * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input’s data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name": string;
+        /**
+          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input. the rules are applied to the input value via regexes.
+         */
+        "pattern": string;
+        /**
+          * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing.
+         */
+        "placeholder": string;
+        /**
+          * Display the input field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything.
+         */
+        "readonly": boolean;
+        /**
+          * Marks the input field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required": boolean;
+        /**
+          * Show/hide the password programmatically.
+         */
+        "showPassword": boolean;
+        /**
+          * Changes the input field’s appearance to indicate successful input or validation.
+         */
+        "success": boolean;
+        /**
+          * Specifies the value of the input field, which determines the text displayed within the field. This prop is typically used in controlled components where the input’s value is managed by the component’s state.
+         */
+        "value": string;
+    }
+    interface NvFieldradio {
+        /**
+          * Controls whether the radio button is selected.
+         */
+        "checked": boolean;
+        /**
+          * Adds a helpful hint message below the label. This description provides extra information or context about the radio button option, assisting users in making more informed choices.
+         */
+        "description": string;
+        /**
+          * Disables the radio button, making it un-selectable.
+         */
+        "disabled": boolean;
+        /**
+          * Highlight the radio button with error styling. It helps users quickly identify which option needs attention, improving their form-filling experience by making issues more visible.
+          * @validator error
+         */
+        "error": boolean;
+        /**
+          * A description that appears when there is an error related to the radio button.
+          * @validator message
+         */
+        "errorDescription": string;
+        /**
+          * Sets the ID for the radio button’s input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId": string;
+        /**
+          * Sets the text content that is rendered next to the input element of type radio. This label is essential for accessibility and user clarity, as it describes the purpose or option of the radio button.
+         */
+        "label": string;
+        /**
+          * Set the label placement to before the input
+          * @deprecated use labelPlacement instead.
+         */
+        "labelBefore": boolean;
+        /**
+          * Defines the position of the label relative to the radio button.
+         */
+        "labelPlacement": `${FieldLabelPlacement}`;
+        /**
+          * Adds a helpful hint message below the label
+          * @deprecated use description instead.
+         */
+        "message": string;
+        /**
+          * Use this to assign a group name to your radio buttons. When you have multiple radio buttons with the same name, users will be able to select only one option within that group, making your forms more organized and user-friendly.
+         */
+        "name": string;
+        /**
+          * Defines what data will be sent when the radio button is selected. This helps you identify which option the user has chosen in your form, ensuring accurate data collection. When the form is submitted, the data will consist of a name=value pair.
+         */
+        "value": string;
+    }
+    interface NvFieldselect {
+        /**
+          * Add helpful hints or extra information under the select field. This is where you can clarify what users should choose or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description"?: string;
+        /**
+          * The disabled prop lets you turn off the select field so that users can’t choose something. When disabled, the field is grayed out and won’t respond to clicks or touches.
+         */
+        "disabled": boolean;
+        /**
+          * When enabled, displays the value element instead of the label when readonly. By default, the label is displayed in readonly mode. Also it automatically sets the component to readonly.
+         */
+        "displayValue": boolean;
+        /**
+          * Alters the select field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error": boolean;
+        /**
+          * Show a helpful message under the select field when there’s a problem. It explains what’s wrong and how users can fix it, making the error easier to understand and resolve.
+          * @validator message
+         */
+        "errorDescription": string;
+        /**
+          * Lets you define the text that explains what users should choose in the select field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label"?: string;
+        /**
+          * Message defines a 'hint ' message for the Select Field.
+          * @deprecated use description instead.
+         */
+        "message": string;
+        /**
+          * When enabled, allows the select to handle multiple selections.
+         */
+        "multiple": boolean;
+        /**
+          * Defines the name attribute of the select field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the selected data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name": string;
+        /**
+          * Display the select field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to change or delete anything.
+         */
+        "readonly": boolean;
+        /**
+          * Marks the select field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required": boolean;
+        /**
+          * Sets the ID for the select element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "selectId": string;
+        /**
+          * Changes the select field’s appearance to indicate successful input or validation.
+         */
+        "success": boolean;
+        /**
+          * Add the message to the validation state.
+          * @deprecated use errorDescription and set the error prop instead.
+         */
+        "validation": string;
+        /**
+          * The value of the select field. - If `multiple` is `false`, it's a single string. - If `multiple` is `true`, it's a comma-separated string of selected values.
+         */
+        "value": string;
+    }
+    interface NvFieldtext {
+        /**
+          * The autocomplete prop helps users fill out the input field faster by suggesting entries they’ve used before, like their email or address. You can turn it on to make forms more convenient or off to ensure users always type in fresh data.
+         */
+        "autocomplete": `${TextInputAutocomplete}`;
+        /**
+          * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description": string;
+        /**
+          * The disabled prop lets you turn off the input field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to clicks or touches.
+         */
+        "disabled": boolean;
+        /**
+          * Alters the input field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error": boolean;
+        /**
+          * A description that appears when there is an error related to the textfield field.
+          * @validator message
+         */
+        "errorDescription": string;
+        /**
+          * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId": string;
+        /**
+          * Lets you define the text that explains what users should enter in the text input field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label": string;
+        /**
+          * Limits how many characters users can type into the input field. It’s helpful for making sure users don’t enter too much information, keeping their input within the allowed limit.
+         */
+        "maxlength": number;
+        /**
+          * Message defines a 'hint ' message for the Text Field.
+          * @deprecated use description instead.
+         */
+        "message": string;
+        /**
+          * Ensures that users type at least a certain number of characters into the input field. It’s a way to make sure users provide enough information before moving on.
+         */
+        "minlength": number;
+        /**
+          * When used with the email input type, this prop enables the field to accept multiple email addresses. Users can enter several addresses, separating each one with a comma, allowing the form to handle multiple recipients.
+         */
+        "multiple": boolean;
+        /**
+          * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input’s data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name": string;
+        /**
+          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input.
+         */
+        "pattern": string;
+        /**
+          * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing.
+         */
+        "placeholder": string;
+        /**
+          * Display the input field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything.
+         */
+        "readonly": boolean;
+        /**
+          * Marks the input field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required": boolean;
+        /**
+          * Changes the input field’s appearance to indicate successful input or validation.
+         */
+        "success": boolean;
+        /**
+          * Type of the input.
+          * @deprecated use type instead.
+         */
+        "textInputType": 'text' | 'tel' | 'email';
+        /**
+          * The type prop lets you specify what kind of information the input field should accept. Choose 'text' for general words or sentences, 'tel' for phone numbers, or 'email' for email addresses. This makes sure users get the right keyboard and validation for what they need to enter.
+         */
+        "type": 'text' | 'tel' | 'email';
+        /**
+          * Add the message to the validation state.
+          * @deprecated use errorDescription and set the error prop instead.
+         */
+        "validation": string;
+        /**
+          * Specifies the value of the input field, which determines the text displayed within the field. This prop is typically used in controlled components where the input’s value is managed by the component’s state.
+         */
+        "value": string;
+    }
+    interface NvFieldtextarea {
+        /**
+          * Enable this to make the textarea automatically resize as the user types, adjusting the height to fit the content. For the best experience, avoid vertical resizing, as it’s controlled by this feature. Horizontal resizing can still be allowed if desired.
+         */
+        "autosize": boolean;
+        /**
+          * Add helpful hints or extra information under the text textarea field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description": string;
+        /**
+          * The disabled prop lets you turn off the textarea field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to# clicks or touches.
+         */
+        "disabled": boolean;
+        /**
+          * Alters the textarea field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error": boolean;
+        /**
+          * Show a helpful message under the textarea field when there’s a problem. It explains what’s wrong and how users can fix it, making the error easier to understand and resolve.
+          * @validator message
+         */
+        "errorDescription": string;
+        /**
+          * Lets you define the text that explains what users should enter in the text textarea field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label": string;
+        /**
+          * Limits how many characters users can type into the textarea field. It’s helpful for making sure users don’t enter too much information, keeping their textarea within the allowed limit.
+         */
+        "maxlength": number;
+        /**
+          * Message defines a 'hint ' message for the Text Field.
+          * @deprecated use description instead.
+         */
+        "message": string;
+        /**
+          * Ensures that users type at least a certain number of characters into the textarea field. It’s a way to make sure users provide enough information before moving on.
+         */
+        "minlength": number;
+        /**
+          * Defines the name attribute of the textarea field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the textarea’s data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name": string;
+        /**
+          * Display temporary text inside the textarea field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing.
+         */
+        "placeholder": string;
+        /**
+          * Display the textarea field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything.
+         */
+        "readonly": boolean;
+        /**
+          * Marks the textarea field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required": boolean;
+        /**
+          * Controls the resize property of a textarea. It can be set to none, both, horizontal, or vertical. The default is vertical.
+         */
+        "resize": 'none' | 'both' | 'horizontal' | 'vertical';
+        /**
+          * The number of visible text lines for the control. The default is 3. This can be useful when you want to limit the size of the textarea field or when you want to make the textarea field smaller to fit a specific layout. The textarea field will expand vertically to fit the text as the user types.
+         */
+        "rows": number;
+        /**
+          * Changes the textarea field’s appearance to indicate successful textarea or validation.
+         */
+        "success": boolean;
+        /**
+          * Sets the ID for the textarea element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "textareaId": string;
+        /**
+          * Add the message to the validation state.
+          * @deprecated use errorDescription and set the error prop instead.
+         */
+        "validation": string;
+        /**
+          * Specifies the value of the textarea field, which determines the text displayed within the field. This prop is typically used in controlled components where the textarea’s value is managed by the component’s state.
+         */
+        "value": string;
+    }
+    interface NvFieldtoggle {
+        /**
+          * Indicates whether the toggle is checked or not.
+         */
+        "checked": boolean;
+        /**
+          * A description providing additional context or information about the toggle.
+         */
+        "description"?: string;
+        /**
+          * Disables the toggle, preventing user interaction.
+         */
+        "disabled": boolean;
+        /**
+          * Hides the label visually while still keeping it available for screen readers.
+         */
+        "hideLabel": boolean;
+        /**
+          * Sets the ID for the radio button’s input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId": string;
+        /**
+          * The label displayed next to the toggle.
+         */
+        "label"?: string;
+        /**
+          * Determines the position of the label relative to the toggle, either 'start' (before) or 'end' (after).
+         */
+        "labelPlacement": `${FieldLabelPlacement}`;
+        /**
+          * The name attribute for the toggle input, used to reference the form data after submission.
+         */
+        "name"?: string;
+        /**
+          * Sets the toggle to read-only, preventing user changes but still allowing focus and selection of text.
+         */
+        "readonly": boolean;
+        /**
+          * The value attribute of the toggle input, representing the value sent on form submission when the toggle is checked.
+         */
+        "value"?: string;
+    }
+    interface NvIcon {
+        /**
+          * Set color of the icon.
+          * @deprecated use class names instead.
+         */
+        "color": `${DeprecatedSemanticColors}`;
+        /**
+          * Set size to Large.
+          * @deprecated use size instead.
+         */
+        "large": boolean;
+        /**
+          * Set size to Medium.
+          * @deprecated use size instead.
+         */
+        "medium": boolean;
+        /**
+          * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers.
+         */
+        "name": `${IconName}` | string;
+        /**
+          * Adjust the size of the icon to fit your design needs.
+         */
+        "size": `${SemanticSizes}`;
+        /**
+          * Set size to Small.
+          * @deprecated use size instead.
+         */
+        "small": boolean;
+        /**
+          * Set size to ExtraLarge.
+          * @deprecated use size instead.
+         */
+        "xlarge": boolean;
+        /**
+          * Set size to ExtraSmall.
+          * @deprecated use size instead.
+         */
+        "xsmall": boolean;
+    }
+    interface NvIconbutton {
+        /**
+          * Makes the button look active when it’s within a compatible component like a button group.
+         */
+        "active": boolean;
+        /**
+          * Disables the button, preventing user interaction.
+         */
+        "disabled": boolean;
+        /**
+          * Adjusts the button’s emphasis to make it more or less visually prominent to users. Use this to draw attention to important actions or reduce focus on less critical ones.
+         */
+        "emphasis": `${ButtonEmphasis}`;
+        /**
+          * Set this to true to show a spinner on the button, letting users know that their action is being processed. It helps improve user experience by indicating ongoing activities. The icon is not displayed when the button is loading. Also, the button is disabled. If you want to disable the button, it is not possible. It is automatically disabled when loading.
+         */
+        "loading": boolean;
+        /**
+          * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
+         */
+        "name": `${IconName}` | string;
+        /**
+          * Sets the shape of the button. Choose between square and rounded.
+         */
+        "shape": 'square' | 'rounded';
+        /**
+          * Determines how large or small the button appears, allowing for customization of the button's dimensions to fit different design specifications and user needs.
+         */
+        "size": `${ButtonSize}`;
+        /**
+          * Sets the button type to control its function in forms. Use 'submit' to send form data, 'reset' to clear the form, or 'button' for a standard button that doesn’t interact with form submission by default.
+         */
+        "type": `${ButtonType}`;
+    }
+    interface NvLoader {
+        /**
+          * Choose the color of the loader. Options are primary and white to keep the design consistent and ensure the loader stands out or blends in appropriately with your application’s interface.
+         */
+        "color": `${LoaderColors}`;
+        /**
+          * Choose the size of the loader to best fit your application’s needs, whether it’s a small spinner for subtle loading indicators or a large one for more prominent displays.
+         */
+        "size": `${SemanticSizes}`;
+    }
+    interface NvMenu {
+        /**
+          * Closes the menu.
+         */
+        "close": () => Promise<void>;
+        /**
+          * Use this to disable the menu from closing automatically when a menu item is selected.
+         */
+        "disableCloseOnSelect": boolean;
+        /**
+          * Use this if the menu is nested inside another menu. This will prevent the parent menu from closing when the child menu is opened.
+         */
+        "nested": boolean;
+        /**
+          * Use this to toggle the initial visibility of the menu, by default the menu is hidden.
+         */
+        "open": boolean;
+        /**
+          * Decides where the menu shows up next to the button it’s linked to (above, below, to the sides). If there isn’t enough room, it will adjust its position on the axis to fit on the screen, so users can always see it.
+         */
+        "placement": Placement;
+        /**
+          * Opens the menu.
+         */
+        "show": () => Promise<void>;
+    }
+    interface NvMenuitem {
+        /**
+          * Disables the item, preventing user interaction.
+         */
+        "disabled": boolean;
+        /**
+          * If the menu item has a submenu, the a caret icon will be displayed.
+         */
+        "hasSubmenu": boolean;
+        /**
+          * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
+         */
+        "icon": `${IconName}`;
+        /**
+          * Show a shortcut key for the action represented in the menu item.
+         */
+        "shortcut": string;
+    }
+    interface NvPopover {
+        /**
+          * Disables the automatic flipping of the popover when the trigger element is out of the viewport. The popover will flip automatically by default.
+         */
+        "disableFlip": boolean;
+        /**
+          * Use this to set a delay before the popover appears on hover. If the mouse leaves before this time, the popover won’t show. This only works when the trigger mode is set to `hover`.
+         */
+        "enterDelay": number;
+        /**
+          * Use this to group popovers together so that opening one will not animate the closing of another. This is helpful when popovers are placed close together, preventing animation overlap.
+         */
+        "groupName": string;
+        /**
+          * Use this to decide if the popover should include a small arrow pointing to the trigger element, making the connection between them more clear.
+         */
+        "hasArrow": boolean;
+        /**
+          * Use this method to hide the popover, making it disappear from view.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Use this to set the popover to be nested inside another popover. This will prevent the parent popover from closing when the child popover is opened.
+         */
+        "nested": boolean;
+        /**
+          * Adjust the gap between the popover and its trigger element by setting how many pixels they should be apart.
+         */
+        "offset": number;
+        /**
+          * Use this prop to toggle the visibility of the popover. Set to true to show the popover and false to hide it.
+         */
+        "open": boolean;
+        /**
+          * Defines where the popover appears relative to the trigger.
+         */
+        "placement": Placement;
+        /**
+          * Sets how many pixels the popover should stay from the edge of the viewport.
+         */
+        "shiftPadding": number;
+        /**
+          * Call this method to show the popover, making it visible on the screen.
+         */
+        "show": () => Promise<void>;
+        /**
+          * Call this method to toggle between showing and hiding the popover, based on its current state.
+         */
+        "toggle": () => Promise<void>;
+        "triggerElement": Element;
+        /**
+          * Sets the interaction mode for triggering the popover. Options include: - `hover`: The popover is shown on trigger hover. - `click`: The popover toggles on trigger click. - `controlled`: The visibility is managed manually through methods or the   open prop.
+         */
+        "triggerMode": 'hover' | 'click' | 'controlled';
+    }
+    interface NvRow {
+    }
+    /**
+     * @deprecated Please use tailwind classes instead
+     */
+    interface NvStack {
+        /**
+          * Fill will force the children to fill the stack depending of the direction of the stack. In horizontal position, the children take the height of the stack. In vertical position, the children take the width of the stack.
+         */
+        "fill": boolean;
+        /**
+          * Flex will force the children to share the stack between the children depending of the direction of the stack. In horizontal position, the children width will share the width of the stack. In vertical position, the children height will share the height of the stack.
+         */
+        "flex": boolean;
+        /**
+          * Full set the width of the stack to 100%. (same effect as WFull props)
+         */
+        "full": boolean;
+        /**
+          * Gutter refers to the space that exists between children components inside the stack container.
+         */
+        "gutter": number;
+        /**
+          * Display the element of the stack vertically.
+         */
+        "vertical": boolean;
+    }
+    interface NvTooltip {
+        /**
+          * Controls how long (in milliseconds) the tooltip waits to show after you hover over or focus on an element. If you move away before the delay is up, the tooltip won’t appear.
+         */
+        "enterDelay": number;
+        /**
+          * A string representing the text to be displayed inside the tooltip. This content is shown when the tooltip is activated by the user, such as on hover or focus events.
+         */
+        "message": string;
+        /**
+          * Decides where the tooltip shows up next to the element it’s linked to (above, below, to the sides). If there isn’t enough room, it will adjust it's position on the axis to fit on the screen, so users can always see it.
+         */
+        "placement": Placement;
+    }
+}
+export interface NvAlertCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvAlertElement;
+}
+export interface NvBadgeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvBadgeElement;
+}
+export interface NvFieldcheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFieldcheckboxElement;
+}
+export interface NvFieldnumberCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFieldnumberElement;
+}
+export interface NvFieldpasswordCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFieldpasswordElement;
+}
+export interface NvFieldradioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFieldradioElement;
+}
+export interface NvFieldselectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFieldselectElement;
+}
+export interface NvFieldtextCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFieldtextElement;
+}
+export interface NvFieldtextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFieldtextareaElement;
+}
+export interface NvFieldtoggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvFieldtoggleElement;
+}
+export interface NvMenuCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvMenuElement;
+}
+export interface NvPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvPopoverElement;
+}
+declare global {
+    interface HTMLNvAlertElementEventMap {
+        "hiddenChanged": boolean;
+        "hiddenChangedComplete": boolean;
+        "closeClicked": MouseEvent;
+    }
+    interface HTMLNvAlertElement extends Components.NvAlert, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvAlertElementEventMap>(type: K, listener: (this: HTMLNvAlertElement, ev: NvAlertCustomEvent<HTMLNvAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvAlertElementEventMap>(type: K, listener: (this: HTMLNvAlertElement, ev: NvAlertCustomEvent<HTMLNvAlertElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvAlertElement: {
+        prototype: HTMLNvAlertElement;
+        new (): HTMLNvAlertElement;
+    };
+    interface HTMLNvAvatarElement extends Components.NvAvatar, HTMLStencilElement {
+    }
+    var HTMLNvAvatarElement: {
+        prototype: HTMLNvAvatarElement;
+        new (): HTMLNvAvatarElement;
+    };
+    interface HTMLNvBadgeElementEventMap {
+        "closeClicked": MouseEvent;
+        "hiddenChanged": boolean;
+        "hiddenChangedComplete": boolean;
+    }
+    interface HTMLNvBadgeElement extends Components.NvBadge, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvBadgeElementEventMap>(type: K, listener: (this: HTMLNvBadgeElement, ev: NvBadgeCustomEvent<HTMLNvBadgeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvBadgeElementEventMap>(type: K, listener: (this: HTMLNvBadgeElement, ev: NvBadgeCustomEvent<HTMLNvBadgeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvBadgeElement: {
+        prototype: HTMLNvBadgeElement;
+        new (): HTMLNvBadgeElement;
+    };
+    /**
+     * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
+     */
+    interface HTMLNvBaseElement extends Components.NvBase, HTMLStencilElement {
+    }
+    var HTMLNvBaseElement: {
+        prototype: HTMLNvBaseElement;
+        new (): HTMLNvBaseElement;
+    };
+    interface HTMLNvButtonElement extends Components.NvButton, HTMLStencilElement {
+    }
+    var HTMLNvButtonElement: {
+        prototype: HTMLNvButtonElement;
+        new (): HTMLNvButtonElement;
+    };
+    interface HTMLNvColElement extends Components.NvCol, HTMLStencilElement {
+    }
+    var HTMLNvColElement: {
+        prototype: HTMLNvColElement;
+        new (): HTMLNvColElement;
+    };
+    interface HTMLNvFieldcheckboxElementEventMap {
+        "checkedChanged": boolean;
+    }
+    interface HTMLNvFieldcheckboxElement extends Components.NvFieldcheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFieldcheckboxElementEventMap>(type: K, listener: (this: HTMLNvFieldcheckboxElement, ev: NvFieldcheckboxCustomEvent<HTMLNvFieldcheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFieldcheckboxElementEventMap>(type: K, listener: (this: HTMLNvFieldcheckboxElement, ev: NvFieldcheckboxCustomEvent<HTMLNvFieldcheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFieldcheckboxElement: {
+        prototype: HTMLNvFieldcheckboxElement;
+        new (): HTMLNvFieldcheckboxElement;
+    };
+    interface HTMLNvFieldnumberElementEventMap {
+        "valueChanged": number;
+    }
+    interface HTMLNvFieldnumberElement extends Components.NvFieldnumber, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFieldnumberElementEventMap>(type: K, listener: (this: HTMLNvFieldnumberElement, ev: NvFieldnumberCustomEvent<HTMLNvFieldnumberElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFieldnumberElementEventMap>(type: K, listener: (this: HTMLNvFieldnumberElement, ev: NvFieldnumberCustomEvent<HTMLNvFieldnumberElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFieldnumberElement: {
+        prototype: HTMLNvFieldnumberElement;
+        new (): HTMLNvFieldnumberElement;
+    };
+    interface HTMLNvFieldpasswordElementEventMap {
+        "valueChanged": string;
+    }
+    interface HTMLNvFieldpasswordElement extends Components.NvFieldpassword, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFieldpasswordElementEventMap>(type: K, listener: (this: HTMLNvFieldpasswordElement, ev: NvFieldpasswordCustomEvent<HTMLNvFieldpasswordElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFieldpasswordElementEventMap>(type: K, listener: (this: HTMLNvFieldpasswordElement, ev: NvFieldpasswordCustomEvent<HTMLNvFieldpasswordElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFieldpasswordElement: {
+        prototype: HTMLNvFieldpasswordElement;
+        new (): HTMLNvFieldpasswordElement;
+    };
+    interface HTMLNvFieldradioElementEventMap {
+        "checkedChanged": boolean;
+    }
+    interface HTMLNvFieldradioElement extends Components.NvFieldradio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFieldradioElementEventMap>(type: K, listener: (this: HTMLNvFieldradioElement, ev: NvFieldradioCustomEvent<HTMLNvFieldradioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFieldradioElementEventMap>(type: K, listener: (this: HTMLNvFieldradioElement, ev: NvFieldradioCustomEvent<HTMLNvFieldradioElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFieldradioElement: {
+        prototype: HTMLNvFieldradioElement;
+        new (): HTMLNvFieldradioElement;
+    };
+    interface HTMLNvFieldselectElementEventMap {
+        "valueChanged": string;
+    }
+    interface HTMLNvFieldselectElement extends Components.NvFieldselect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFieldselectElementEventMap>(type: K, listener: (this: HTMLNvFieldselectElement, ev: NvFieldselectCustomEvent<HTMLNvFieldselectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFieldselectElementEventMap>(type: K, listener: (this: HTMLNvFieldselectElement, ev: NvFieldselectCustomEvent<HTMLNvFieldselectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFieldselectElement: {
+        prototype: HTMLNvFieldselectElement;
+        new (): HTMLNvFieldselectElement;
+    };
+    interface HTMLNvFieldtextElementEventMap {
+        "valueChanged": string;
+    }
+    interface HTMLNvFieldtextElement extends Components.NvFieldtext, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFieldtextElementEventMap>(type: K, listener: (this: HTMLNvFieldtextElement, ev: NvFieldtextCustomEvent<HTMLNvFieldtextElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFieldtextElementEventMap>(type: K, listener: (this: HTMLNvFieldtextElement, ev: NvFieldtextCustomEvent<HTMLNvFieldtextElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFieldtextElement: {
+        prototype: HTMLNvFieldtextElement;
+        new (): HTMLNvFieldtextElement;
+    };
+    interface HTMLNvFieldtextareaElementEventMap {
+        "valueChanged": string;
+    }
+    interface HTMLNvFieldtextareaElement extends Components.NvFieldtextarea, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFieldtextareaElementEventMap>(type: K, listener: (this: HTMLNvFieldtextareaElement, ev: NvFieldtextareaCustomEvent<HTMLNvFieldtextareaElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFieldtextareaElementEventMap>(type: K, listener: (this: HTMLNvFieldtextareaElement, ev: NvFieldtextareaCustomEvent<HTMLNvFieldtextareaElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFieldtextareaElement: {
+        prototype: HTMLNvFieldtextareaElement;
+        new (): HTMLNvFieldtextareaElement;
+    };
+    interface HTMLNvFieldtoggleElementEventMap {
+        "checkedChanged": boolean;
+    }
+    interface HTMLNvFieldtoggleElement extends Components.NvFieldtoggle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvFieldtoggleElementEventMap>(type: K, listener: (this: HTMLNvFieldtoggleElement, ev: NvFieldtoggleCustomEvent<HTMLNvFieldtoggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvFieldtoggleElementEventMap>(type: K, listener: (this: HTMLNvFieldtoggleElement, ev: NvFieldtoggleCustomEvent<HTMLNvFieldtoggleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvFieldtoggleElement: {
+        prototype: HTMLNvFieldtoggleElement;
+        new (): HTMLNvFieldtoggleElement;
+    };
+    interface HTMLNvIconElement extends Components.NvIcon, HTMLStencilElement {
+    }
+    var HTMLNvIconElement: {
+        prototype: HTMLNvIconElement;
+        new (): HTMLNvIconElement;
+    };
+    interface HTMLNvIconbuttonElement extends Components.NvIconbutton, HTMLStencilElement {
+    }
+    var HTMLNvIconbuttonElement: {
+        prototype: HTMLNvIconbuttonElement;
+        new (): HTMLNvIconbuttonElement;
+    };
+    interface HTMLNvLoaderElement extends Components.NvLoader, HTMLStencilElement {
+    }
+    var HTMLNvLoaderElement: {
+        prototype: HTMLNvLoaderElement;
+        new (): HTMLNvLoaderElement;
+    };
+    interface HTMLNvMenuElementEventMap {
+        "menuitemSelected": MenuitemSelectedEventDetail;
+    }
+    interface HTMLNvMenuElement extends Components.NvMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvMenuElementEventMap>(type: K, listener: (this: HTMLNvMenuElement, ev: NvMenuCustomEvent<HTMLNvMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvMenuElementEventMap>(type: K, listener: (this: HTMLNvMenuElement, ev: NvMenuCustomEvent<HTMLNvMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvMenuElement: {
+        prototype: HTMLNvMenuElement;
+        new (): HTMLNvMenuElement;
+    };
+    interface HTMLNvMenuitemElement extends Components.NvMenuitem, HTMLStencilElement {
+    }
+    var HTMLNvMenuitemElement: {
+        prototype: HTMLNvMenuitemElement;
+        new (): HTMLNvMenuitemElement;
+    };
+    interface HTMLNvPopoverElementEventMap {
+        "openChanged": boolean;
+    }
+    interface HTMLNvPopoverElement extends Components.NvPopover, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvPopoverElementEventMap>(type: K, listener: (this: HTMLNvPopoverElement, ev: NvPopoverCustomEvent<HTMLNvPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvPopoverElementEventMap>(type: K, listener: (this: HTMLNvPopoverElement, ev: NvPopoverCustomEvent<HTMLNvPopoverElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvPopoverElement: {
+        prototype: HTMLNvPopoverElement;
+        new (): HTMLNvPopoverElement;
+    };
+    interface HTMLNvRowElement extends Components.NvRow, HTMLStencilElement {
+    }
+    var HTMLNvRowElement: {
+        prototype: HTMLNvRowElement;
+        new (): HTMLNvRowElement;
+    };
+    /**
+     * @deprecated Please use tailwind classes instead
+     */
+    interface HTMLNvStackElement extends Components.NvStack, HTMLStencilElement {
+    }
+    var HTMLNvStackElement: {
+        prototype: HTMLNvStackElement;
+        new (): HTMLNvStackElement;
+    };
+    interface HTMLNvTooltipElement extends Components.NvTooltip, HTMLStencilElement {
+    }
+    var HTMLNvTooltipElement: {
+        prototype: HTMLNvTooltipElement;
+        new (): HTMLNvTooltipElement;
+    };
+    interface HTMLElementTagNameMap {
+        "nv-alert": HTMLNvAlertElement;
+        "nv-avatar": HTMLNvAvatarElement;
+        "nv-badge": HTMLNvBadgeElement;
+        "nv-base": HTMLNvBaseElement;
+        "nv-button": HTMLNvButtonElement;
+        "nv-col": HTMLNvColElement;
+        "nv-fieldcheckbox": HTMLNvFieldcheckboxElement;
+        "nv-fieldnumber": HTMLNvFieldnumberElement;
+        "nv-fieldpassword": HTMLNvFieldpasswordElement;
+        "nv-fieldradio": HTMLNvFieldradioElement;
+        "nv-fieldselect": HTMLNvFieldselectElement;
+        "nv-fieldtext": HTMLNvFieldtextElement;
+        "nv-fieldtextarea": HTMLNvFieldtextareaElement;
+        "nv-fieldtoggle": HTMLNvFieldtoggleElement;
+        "nv-icon": HTMLNvIconElement;
+        "nv-iconbutton": HTMLNvIconbuttonElement;
+        "nv-loader": HTMLNvLoaderElement;
+        "nv-menu": HTMLNvMenuElement;
+        "nv-menuitem": HTMLNvMenuitemElement;
+        "nv-popover": HTMLNvPopoverElement;
+        "nv-row": HTMLNvRowElement;
+        "nv-stack": HTMLNvStackElement;
+        "nv-tooltip": HTMLNvTooltipElement;
+    }
+}
+declare namespace LocalJSX {
+    interface NvAlert {
+        /**
+          * Defines color of the alert.
+          * @deprecated use feedback instead.
+         */
+        "color"?: `${DeprecatedSemanticColors}`;
+        /**
+          * Allows the alert to be dismissed via a close button (x). The alert is not dismissible unless explicitly enabled.
+         */
+        "dismissible"?: boolean;
+        /**
+          * Specifies the alert type which determines the color and default icon.
+         */
+        "feedback"?: `${FeedbackColors}`;
+        /**
+          * Short and concise text for the alert title.
+         */
+        "heading"?: string;
+        /**
+          * Controls the visibility of the alert. Will animate with fade and collapse.
+         */
+        "hidden"?: boolean;
+        /**
+          * Icon associated with the alert, defaults vary based on the feedback type.
+         */
+        "icon"?: string;
+        /**
+          * Main content of the alert. For more complex content, use the default slot instead.
+         */
+        "message"?: string;
+        /**
+          * Emitted when the close button is clicked.
+         */
+        "onCloseClicked"?: (event: NvAlertCustomEvent<MouseEvent>) => void;
+        /**
+          * Emits when the 'hidden' prop changes, reflecting a change in visibility. Passes hidden value to the detail.
+          * @bind hidden
+         */
+        "onHiddenChanged"?: (event: NvAlertCustomEvent<boolean>) => void;
+        /**
+          * Emitted when the animations complete, detail includes the hidden value.
+         */
+        "onHiddenChangedComplete"?: (event: NvAlertCustomEvent<boolean>) => void;
+        /**
+          * When true, the alert does not automatically close upon dismissing. Useful for externally controlled component behavior.
+         */
+        "preventAutoClose"?: boolean;
+    }
+    interface NvAvatar {
+        /**
+          * If and image is provided, add an alt tag to describe it.
+         */
+        "alt"?: string;
+        /**
+          * You can apply different colors on the Avatar. Use a string number between 1 and 10.
+         */
+        "color"?: string;
+        /**
+          * Initials of the avatar. Usually use two letters When filled with the src parameter, the text will not be rendered.
+         */
+        "initials"?: string;
+        /**
+          * Set size to Large to the avatar.
+          * @deprecated use size instead.
+         */
+        "large"?: boolean;
+        /**
+          * Set size to Medium to the avatar.
+          * @deprecated use size instead.
+         */
+        "medium"?: boolean;
+        /**
+          * Define the size of the avatar. You can use t-shirt sizes.
+         */
+        "size"?: `${SemanticSizes}`;
+        /**
+          * Set size to Small to the avatar.
+          * @deprecated use size instead.
+         */
+        "small"?: boolean;
+        /**
+          * Will insert an image into the avatar.
+         */
+        "src"?: string;
+        /**
+          * Set initials to the avatar.
+          * @deprecated use initials instead.
+         */
+        "text"?: string;
+        /**
+          * Set src to the avatar.
+          * @deprecated use src instead.
+         */
+        "url"?: string;
+        /**
+          * Set size to ExtraLarge to the avatar.
+          * @deprecated use size instead.
+         */
+        "xlarge"?: boolean;
+        /**
+          * Set size to ExtraSmall to the avatar.
+          * @deprecated use size instead.
+         */
+        "xsmall"?: boolean;
+    }
+    interface NvBadge {
+        /**
+          * The color of the badge. Use a string between 1 to 5
+         */
+        "color"?: string;
+        /**
+          * Whether the badge is dismissible.
+          * @deprecated use dismissible instead.
+         */
+        "dismissal"?: boolean;
+        /**
+          * Whether the badge is dismissible.
+         */
+        "dismissible"?: boolean;
+        /**
+          * Controls the visibility of the badge. Will animate with fade and collapse.
+         */
+        "hidden"?: boolean;
+        /**
+          * The icon to display in the badge.
+          * @deprecated use leadIcon or slot="leading-icon" instead.
+         */
+        "icon"?: string;
+        /**
+          * The location of the icon in the badge.
+          * @deprecated only leadIcon now.
+         */
+        "iconLocation"?: 'left' | 'right';
+        /**
+          * Main content of the badge.
+         */
+        "label"?: string | null;
+        /**
+          * The lead icon of the badge.
+         */
+        "leadIcon"?: string | null;
+        /**
+          * Emitted when the badge is dismissed.
+         */
+        "onCloseClicked"?: (event: NvBadgeCustomEvent<MouseEvent>) => void;
+        /**
+          * Emits when the 'hidden' prop changes, reflecting a change in visibility. Passes hidden value to the detail.
+         */
+        "onHiddenChanged"?: (event: NvBadgeCustomEvent<boolean>) => void;
+        /**
+          * Emitted when the animations complete, detail includes the hidden value.
+         */
+        "onHiddenChangedComplete"?: (event: NvBadgeCustomEvent<boolean>) => void;
+        /**
+          * When true, the alert does not automatically close upon dismissing. Useful for externally controlled component behavior.
+         */
+        "preventAutoClose"?: boolean;
+    }
+    /**
+     * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
+     */
+    interface NvBase {
+    }
+    interface NvButton {
+        /**
+          * Applies styling that visually indicates the button represents a dangerous action.
+         */
+        "danger"?: boolean;
+        /**
+          * Disables the button, preventing user interaction.
+         */
+        "disabled"?: boolean;
+        /**
+          * Adjusts the button's emphasis to make it more or less visually prominent to users. Use this to draw attention to important actions or reduce focus on less critical ones
+         */
+        "emphasis"?: `${ButtonEmphasis}`;
+        /**
+          * Allows the button to stretch and fill the entire width of its container.
+         */
+        "fluid"?: boolean;
+        /**
+          * Set this to true to show a spinner on the button, letting users know that their action is being processed. It helps improve user experience by indicating ongoing activities.
+         */
+        "loading"?: boolean;
+        /**
+          * Determines how large or small the button appears, allowing for customization of the button's dimensions to fit different design specifications and user needs.
+         */
+        "size"?: `${ButtonSize}`;
+        /**
+          * Sets the button type to control its function in forms. Use 'submit' to send form data, 'reset' to clear the form, or 'button' for a standard button that doesn’t interact with form submission by default.
+         */
+        "type"?: `${ButtonType}`;
+    }
+    interface NvCol {
+        /**
+          * Defines the column size based on a 12 column grid system.
+         */
+        "size"?: number;
+    }
+    interface NvFieldcheckbox {
+        /**
+          * Indicates whether the checkbox is checked or not.
+         */
+        "checked"?: boolean;
+        /**
+          * A description providing additional context or information about the checkbox.
+         */
+        "description"?: string;
+        /**
+          * Disables the checkbox, preventing user interaction.
+         */
+        "disabled"?: boolean;
+        /**
+          * Signals that there is an error associated with the checkbox, which can trigger visual cues.
+         */
+        "error"?: boolean;
+        /**
+          * A description that appears when there is an error related to the checkbox.
+         */
+        "errorDescription"?: string;
+        /**
+          * Hides the label visually while still keeping it available for screen readers.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * Indicates whether the checkbox is in an indeterminate state, typically used for hierarchical checkboxes.
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Sets the ID for the radio button’s input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId"?: string;
+        /**
+          * The label displayed next to the checkbox.
+         */
+        "label"?: string;
+        /**
+          * When true, the label will be placed before the checkbox.
+          * @deprecated Use `labelPlacement = end` instead.
+         */
+        "labelBefore"?: boolean;
+        /**
+          * Determines the position of the label relative to the checkbox, either 'start' (before) or 'end' (after).
+         */
+        "labelPlacement"?: `${FieldLabelPlacement}`;
+        /**
+          * Message define a 'hint ' message for the Field.
+          * @deprecated Use `description` instead.
+         */
+        "message"?: string;
+        /**
+          * The name attribute for the checkbox input, used to reference the form data after submission.
+         */
+        "name"?: string;
+        /**
+          * Emits when the checked state changes.
+          * @bind checked
+         */
+        "onCheckedChanged"?: (event: NvFieldcheckboxCustomEvent<boolean>) => void;
+        /**
+          * Sets the checkbox to read-only, preventing user changes but still allowing focus and selection of text.
+         */
+        "readonly"?: boolean;
+        /**
+          * Marks the checkbox as required, indicating that it must be checked for form submission.
+         */
+        "required"?: boolean;
+        /**
+          * The text for the validation message.
+          * @deprecated Use `errorDescription` instead.
+         */
+        "validation"?: string;
+        /**
+          * The value attribute of the checkbox input, representing the value sent on form submission when the checkbox is checked. When the form is submitted, the data will consist of a name=value pair.
+         */
+        "value"?: string;
+    }
+    interface NvFieldnumber {
+        /**
+          * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description"?: string;
+        /**
+          * The disabled prop lets you turn off the input field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to# clicks or touches.
+         */
+        "disabled"?: boolean;
+        /**
+          * Alters the input field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error"?: boolean;
+        /**
+          * Show a helpful message under the input field when there’s a problem. It explains what’s wrong and how users can fix it, making the error easier to understand and resolve.
+          * @validator message
+         */
+        "errorDescription"?: string;
+        /**
+          * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId"?: string;
+        /**
+          * Lets you define the text that explains what users should enter in the text input field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label"?: string;
+        /**
+          * The maximum value that the input field can accept. Use this in combination with min to create a range of valid values.
+         */
+        "max"?: number;
+        /**
+          * Message defines a 'hint ' message for the number field.
+          * @deprecated use description instead.
+         */
+        "message"?: string;
+        /**
+          * The minimum value that the input field can accept. Use this in combination with max to create a range of valid values.
+         */
+        "min"?: number;
+        /**
+          * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input’s data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input value changes.
+          * @bind value
+         */
+        "onValueChanged"?: (event: NvFieldnumberCustomEvent<number>) => void;
+        /**
+          * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing.
+         */
+        "placeholder"?: string;
+        /**
+          * Display the input field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything.
+         */
+        "readonly"?: boolean;
+        /**
+          * Marks the input field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required"?: boolean;
+        /**
+          * Define the increment value for the input field. It determines how much the value will increase or decrease when the user clicks the stepper buttons.
+         */
+        "step"?: number;
+        /**
+          * Changes the input field’s appearance to indicate successful input or validation.
+         */
+        "success"?: boolean;
+        /**
+          * Add the message to the validation state.
+          * @deprecated use errorDescription and set the error prop instead.
+         */
+        "validation"?: string;
+        /**
+          * The value of the input field. It’s the text that users type in or the value that you set programmatically. This is the main way to interact with the input field, and it’s essential for creating forms that users can fill out.
+         */
+        "value"?: number;
+    }
+    interface NvFieldpassword {
+        /**
+          * The autocomplete prop helps users fill out the input field faster by suggesting entries they’ve used before, like their email or address. You can turn it on to make forms more convenient or off to ensure users always type in fresh data.
+         */
+        "autocomplete"?: `${TextInputAutocomplete}`;
+        /**
+          * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description"?: string;
+        /**
+          * The disabled prop lets you turn off the input field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to# clicks or touches.
+         */
+        "disabled"?: boolean;
+        /**
+          * Alters the input field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error"?: boolean;
+        /**
+          * A description that appears when there is an error related to the password field.
+          * @validator message
+         */
+        "errorDescription"?: string;
+        /**
+          * Hide the button to show/hide the password.
+         */
+        "hidePasswordIcon"?: boolean;
+        /**
+          * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId"?: string;
+        /**
+          * Lets you define the text that explains what users should enter in the text input field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label"?: string;
+        /**
+          * Limits how many characters users can type into the input field. It’s helpful for making sure users don’t enter too much information, keeping their input within the allowed limit.
+         */
+        "maxlength"?: number;
+        /**
+          * Ensures that users type at least a certain number of characters into the input field. It’s a way to make sure users provide enough information before moving on.
+         */
+        "minlength"?: number;
+        /**
+          * Defines the type of the input.
+          * @default 'text'
+         */
+        "mode"?: 'text' | 'number';
+        /**
+          * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input’s data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input value changes.
+          * @bind value
+         */
+        "onValueChanged"?: (event: NvFieldpasswordCustomEvent<string>) => void;
+        /**
+          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input. the rules are applied to the input value via regexes.
+         */
+        "pattern"?: string;
+        /**
+          * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing.
+         */
+        "placeholder"?: string;
+        /**
+          * Display the input field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything.
+         */
+        "readonly"?: boolean;
+        /**
+          * Marks the input field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required"?: boolean;
+        /**
+          * Show/hide the password programmatically.
+         */
+        "showPassword"?: boolean;
+        /**
+          * Changes the input field’s appearance to indicate successful input or validation.
+         */
+        "success"?: boolean;
+        /**
+          * Specifies the value of the input field, which determines the text displayed within the field. This prop is typically used in controlled components where the input’s value is managed by the component’s state.
+         */
+        "value"?: string;
+    }
+    interface NvFieldradio {
+        /**
+          * Controls whether the radio button is selected.
+         */
+        "checked"?: boolean;
+        /**
+          * Adds a helpful hint message below the label. This description provides extra information or context about the radio button option, assisting users in making more informed choices.
+         */
+        "description"?: string;
+        /**
+          * Disables the radio button, making it un-selectable.
+         */
+        "disabled"?: boolean;
+        /**
+          * Highlight the radio button with error styling. It helps users quickly identify which option needs attention, improving their form-filling experience by making issues more visible.
+          * @validator error
+         */
+        "error"?: boolean;
+        /**
+          * A description that appears when there is an error related to the radio button.
+          * @validator message
+         */
+        "errorDescription"?: string;
+        /**
+          * Sets the ID for the radio button’s input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId"?: string;
+        /**
+          * Sets the text content that is rendered next to the input element of type radio. This label is essential for accessibility and user clarity, as it describes the purpose or option of the radio button.
+         */
+        "label"?: string;
+        /**
+          * Set the label placement to before the input
+          * @deprecated use labelPlacement instead.
+         */
+        "labelBefore"?: boolean;
+        /**
+          * Defines the position of the label relative to the radio button.
+         */
+        "labelPlacement"?: `${FieldLabelPlacement}`;
+        /**
+          * Adds a helpful hint message below the label
+          * @deprecated use description instead.
+         */
+        "message"?: string;
+        /**
+          * Use this to assign a group name to your radio buttons. When you have multiple radio buttons with the same name, users will be able to select only one option within that group, making your forms more organized and user-friendly.
+         */
+        "name"?: string;
+        /**
+          * Emits when the checked state changes.
+          * @bind checked
+         */
+        "onCheckedChanged"?: (event: NvFieldradioCustomEvent<boolean>) => void;
+        /**
+          * Defines what data will be sent when the radio button is selected. This helps you identify which option the user has chosen in your form, ensuring accurate data collection. When the form is submitted, the data will consist of a name=value pair.
+         */
+        "value"?: string;
+    }
+    interface NvFieldselect {
+        /**
+          * Add helpful hints or extra information under the select field. This is where you can clarify what users should choose or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description"?: string;
+        /**
+          * The disabled prop lets you turn off the select field so that users can’t choose something. When disabled, the field is grayed out and won’t respond to clicks or touches.
+         */
+        "disabled"?: boolean;
+        /**
+          * When enabled, displays the value element instead of the label when readonly. By default, the label is displayed in readonly mode. Also it automatically sets the component to readonly.
+         */
+        "displayValue"?: boolean;
+        /**
+          * Alters the select field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error"?: boolean;
+        /**
+          * Show a helpful message under the select field when there’s a problem. It explains what’s wrong and how users can fix it, making the error easier to understand and resolve.
+          * @validator message
+         */
+        "errorDescription"?: string;
+        /**
+          * Lets you define the text that explains what users should choose in the select field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label"?: string;
+        /**
+          * Message defines a 'hint ' message for the Select Field.
+          * @deprecated use description instead.
+         */
+        "message"?: string;
+        /**
+          * When enabled, allows the select to handle multiple selections.
+         */
+        "multiple"?: boolean;
+        /**
+          * Defines the name attribute of the select field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the selected data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name"?: string;
+        /**
+          * Emitted when the selected value changes.
+          * @bind value
+         */
+        "onValueChanged"?: (event: NvFieldselectCustomEvent<string>) => void;
+        /**
+          * Display the select field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to change or delete anything.
+         */
+        "readonly"?: boolean;
+        /**
+          * Marks the select field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required"?: boolean;
+        /**
+          * Sets the ID for the select element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "selectId"?: string;
+        /**
+          * Changes the select field’s appearance to indicate successful input or validation.
+         */
+        "success"?: boolean;
+        /**
+          * Add the message to the validation state.
+          * @deprecated use errorDescription and set the error prop instead.
+         */
+        "validation"?: string;
+        /**
+          * The value of the select field. - If `multiple` is `false`, it's a single string. - If `multiple` is `true`, it's a comma-separated string of selected values.
+         */
+        "value"?: string;
+    }
+    interface NvFieldtext {
+        /**
+          * The autocomplete prop helps users fill out the input field faster by suggesting entries they’ve used before, like their email or address. You can turn it on to make forms more convenient or off to ensure users always type in fresh data.
+         */
+        "autocomplete"?: `${TextInputAutocomplete}`;
+        /**
+          * Add helpful hints or extra information under the text input field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description"?: string;
+        /**
+          * The disabled prop lets you turn off the input field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to clicks or touches.
+         */
+        "disabled"?: boolean;
+        /**
+          * Alters the input field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error"?: boolean;
+        /**
+          * A description that appears when there is an error related to the textfield field.
+          * @validator message
+         */
+        "errorDescription"?: string;
+        /**
+          * Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId"?: string;
+        /**
+          * Lets you define the text that explains what users should enter in the text input field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label"?: string;
+        /**
+          * Limits how many characters users can type into the input field. It’s helpful for making sure users don’t enter too much information, keeping their input within the allowed limit.
+         */
+        "maxlength"?: number;
+        /**
+          * Message defines a 'hint ' message for the Text Field.
+          * @deprecated use description instead.
+         */
+        "message"?: string;
+        /**
+          * Ensures that users type at least a certain number of characters into the input field. It’s a way to make sure users provide enough information before moving on.
+         */
+        "minlength"?: number;
+        /**
+          * When used with the email input type, this prop enables the field to accept multiple email addresses. Users can enter several addresses, separating each one with a comma, allowing the form to handle multiple recipients.
+         */
+        "multiple"?: boolean;
+        /**
+          * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input’s data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input value changes.
+          * @bind value
+         */
+        "onValueChanged"?: (event: NvFieldtextCustomEvent<string>) => void;
+        /**
+          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input.
+         */
+        "pattern"?: string;
+        /**
+          * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing.
+         */
+        "placeholder"?: string;
+        /**
+          * Display the input field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything.
+         */
+        "readonly"?: boolean;
+        /**
+          * Marks the input field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required"?: boolean;
+        /**
+          * Changes the input field’s appearance to indicate successful input or validation.
+         */
+        "success"?: boolean;
+        /**
+          * Type of the input.
+          * @deprecated use type instead.
+         */
+        "textInputType"?: 'text' | 'tel' | 'email';
+        /**
+          * The type prop lets you specify what kind of information the input field should accept. Choose 'text' for general words or sentences, 'tel' for phone numbers, or 'email' for email addresses. This makes sure users get the right keyboard and validation for what they need to enter.
+         */
+        "type"?: 'text' | 'tel' | 'email';
+        /**
+          * Add the message to the validation state.
+          * @deprecated use errorDescription and set the error prop instead.
+         */
+        "validation"?: string;
+        /**
+          * Specifies the value of the input field, which determines the text displayed within the field. This prop is typically used in controlled components where the input’s value is managed by the component’s state.
+         */
+        "value"?: string;
+    }
+    interface NvFieldtextarea {
+        /**
+          * Enable this to make the textarea automatically resize as the user types, adjusting the height to fit the content. For the best experience, avoid vertical resizing, as it’s controlled by this feature. Horizontal resizing can still be allowed if desired.
+         */
+        "autosize"?: boolean;
+        /**
+          * Add helpful hints or extra information under the text textarea field. This is where you can clarify what users should enter or provide additional instructions, making the form easier to fill out correctly.
+         */
+        "description"?: string;
+        /**
+          * The disabled prop lets you turn off the textarea field so that users can’t type in it. When disabled, the field is grayed out and won’t respond to# clicks or touches.
+         */
+        "disabled"?: boolean;
+        /**
+          * Alters the textarea field’s appearance to indicate an error, helping users identify fields that need correction.
+          * @validator error
+         */
+        "error"?: boolean;
+        /**
+          * Show a helpful message under the textarea field when there’s a problem. It explains what’s wrong and how users can fix it, making the error easier to understand and resolve.
+          * @validator message
+         */
+        "errorDescription"?: string;
+        /**
+          * Lets you define the text that explains what users should enter in the text textarea field. It’s a crucial element for making forms clear and user-friendly.
+         */
+        "label"?: string;
+        /**
+          * Limits how many characters users can type into the textarea field. It’s helpful for making sure users don’t enter too much information, keeping their textarea within the allowed limit.
+         */
+        "maxlength"?: number;
+        /**
+          * Message defines a 'hint ' message for the Text Field.
+          * @deprecated use description instead.
+         */
+        "message"?: string;
+        /**
+          * Ensures that users type at least a certain number of characters into the textarea field. It’s a way to make sure users provide enough information before moving on.
+         */
+        "minlength"?: number;
+        /**
+          * Defines the name attribute of the textarea field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the textarea’s data in form submissions. It should be unique within the form to avoid conflicts
+         */
+        "name"?: string;
+        /**
+          * Emitted when the textarea value changes.
+          * @bind value
+         */
+        "onValueChanged"?: (event: NvFieldtextareaCustomEvent<string>) => void;
+        /**
+          * Display temporary text inside the textarea field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing.
+         */
+        "placeholder"?: string;
+        /**
+          * Display the textarea field’s content without allowing users to change it. Users can still click on it, select, and copy the text, but they won’t be able to type or delete anything.
+         */
+        "readonly"?: boolean;
+        /**
+          * Marks the textarea field as required, ensuring that the user must fill it out before submitting the form.
+         */
+        "required"?: boolean;
+        /**
+          * Controls the resize property of a textarea. It can be set to none, both, horizontal, or vertical. The default is vertical.
+         */
+        "resize"?: 'none' | 'both' | 'horizontal' | 'vertical';
+        /**
+          * The number of visible text lines for the control. The default is 3. This can be useful when you want to limit the size of the textarea field or when you want to make the textarea field smaller to fit a specific layout. The textarea field will expand vertically to fit the text as the user types.
+         */
+        "rows"?: number;
+        /**
+          * Changes the textarea field’s appearance to indicate successful textarea or validation.
+         */
+        "success"?: boolean;
+        /**
+          * Sets the ID for the textarea element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "textareaId"?: string;
+        /**
+          * Add the message to the validation state.
+          * @deprecated use errorDescription and set the error prop instead.
+         */
+        "validation"?: string;
+        /**
+          * Specifies the value of the textarea field, which determines the text displayed within the field. This prop is typically used in controlled components where the textarea’s value is managed by the component’s state.
+         */
+        "value"?: string;
+    }
+    interface NvFieldtoggle {
+        /**
+          * Indicates whether the toggle is checked or not.
+         */
+        "checked"?: boolean;
+        /**
+          * A description providing additional context or information about the toggle.
+         */
+        "description"?: string;
+        /**
+          * Disables the toggle, preventing user interaction.
+         */
+        "disabled"?: boolean;
+        /**
+          * Hides the label visually while still keeping it available for screen readers.
+         */
+        "hideLabel"?: boolean;
+        /**
+          * Sets the ID for the radio button’s input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId"?: string;
+        /**
+          * The label displayed next to the toggle.
+         */
+        "label"?: string;
+        /**
+          * Determines the position of the label relative to the toggle, either 'start' (before) or 'end' (after).
+         */
+        "labelPlacement"?: `${FieldLabelPlacement}`;
+        /**
+          * The name attribute for the toggle input, used to reference the form data after submission.
+         */
+        "name"?: string;
+        /**
+          * Emits when the checked state changes.
+          * @bind checked
+         */
+        "onCheckedChanged"?: (event: NvFieldtoggleCustomEvent<boolean>) => void;
+        /**
+          * Sets the toggle to read-only, preventing user changes but still allowing focus and selection of text.
+         */
+        "readonly"?: boolean;
+        /**
+          * The value attribute of the toggle input, representing the value sent on form submission when the toggle is checked.
+         */
+        "value"?: string;
+    }
+    interface NvIcon {
+        /**
+          * Set color of the icon.
+          * @deprecated use class names instead.
+         */
+        "color"?: `${DeprecatedSemanticColors}`;
+        /**
+          * Set size to Large.
+          * @deprecated use size instead.
+         */
+        "large"?: boolean;
+        /**
+          * Set size to Medium.
+          * @deprecated use size instead.
+         */
+        "medium"?: boolean;
+        /**
+          * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers.
+         */
+        "name"?: `${IconName}` | string;
+        /**
+          * Adjust the size of the icon to fit your design needs.
+         */
+        "size"?: `${SemanticSizes}`;
+        /**
+          * Set size to Small.
+          * @deprecated use size instead.
+         */
+        "small"?: boolean;
+        /**
+          * Set size to ExtraLarge.
+          * @deprecated use size instead.
+         */
+        "xlarge"?: boolean;
+        /**
+          * Set size to ExtraSmall.
+          * @deprecated use size instead.
+         */
+        "xsmall"?: boolean;
+    }
+    interface NvIconbutton {
+        /**
+          * Makes the button look active when it’s within a compatible component like a button group.
+         */
+        "active"?: boolean;
+        /**
+          * Disables the button, preventing user interaction.
+         */
+        "disabled"?: boolean;
+        /**
+          * Adjusts the button’s emphasis to make it more or less visually prominent to users. Use this to draw attention to important actions or reduce focus on less critical ones.
+         */
+        "emphasis"?: `${ButtonEmphasis}`;
+        /**
+          * Set this to true to show a spinner on the button, letting users know that their action is being processed. It helps improve user experience by indicating ongoing activities. The icon is not displayed when the button is loading. Also, the button is disabled. If you want to disable the button, it is not possible. It is automatically disabled when loading.
+         */
+        "loading"?: boolean;
+        /**
+          * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
+         */
+        "name"?: `${IconName}` | string;
+        /**
+          * Sets the shape of the button. Choose between square and rounded.
+         */
+        "shape"?: 'square' | 'rounded';
+        /**
+          * Determines how large or small the button appears, allowing for customization of the button's dimensions to fit different design specifications and user needs.
+         */
+        "size"?: `${ButtonSize}`;
+        /**
+          * Sets the button type to control its function in forms. Use 'submit' to send form data, 'reset' to clear the form, or 'button' for a standard button that doesn’t interact with form submission by default.
+         */
+        "type"?: `${ButtonType}`;
+    }
+    interface NvLoader {
+        /**
+          * Choose the color of the loader. Options are primary and white to keep the design consistent and ensure the loader stands out or blends in appropriately with your application’s interface.
+         */
+        "color"?: `${LoaderColors}`;
+        /**
+          * Choose the size of the loader to best fit your application’s needs, whether it’s a small spinner for subtle loading indicators or a large one for more prominent displays.
+         */
+        "size"?: `${SemanticSizes}`;
+    }
+    interface NvMenu {
+        /**
+          * Use this to disable the menu from closing automatically when a menu item is selected.
+         */
+        "disableCloseOnSelect"?: boolean;
+        /**
+          * Use this if the menu is nested inside another menu. This will prevent the parent menu from closing when the child menu is opened.
+         */
+        "nested"?: boolean;
+        /**
+          * Emitted from nv-menuitem elements with the corresponding id when the menu item is selected.
+         */
+        "onMenuitemSelected"?: (event: NvMenuCustomEvent<MenuitemSelectedEventDetail>) => void;
+        /**
+          * Use this to toggle the initial visibility of the menu, by default the menu is hidden.
+         */
+        "open"?: boolean;
+        /**
+          * Decides where the menu shows up next to the button it’s linked to (above, below, to the sides). If there isn’t enough room, it will adjust its position on the axis to fit on the screen, so users can always see it.
+         */
+        "placement"?: Placement;
+    }
+    interface NvMenuitem {
+        /**
+          * Disables the item, preventing user interaction.
+         */
+        "disabled"?: boolean;
+        /**
+          * If the menu item has a submenu, the a caret icon will be displayed.
+         */
+        "hasSubmenu"?: boolean;
+        /**
+          * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
+         */
+        "icon"?: `${IconName}`;
+        /**
+          * Show a shortcut key for the action represented in the menu item.
+         */
+        "shortcut"?: string;
+    }
+    interface NvPopover {
+        /**
+          * Disables the automatic flipping of the popover when the trigger element is out of the viewport. The popover will flip automatically by default.
+         */
+        "disableFlip"?: boolean;
+        /**
+          * Use this to set a delay before the popover appears on hover. If the mouse leaves before this time, the popover won’t show. This only works when the trigger mode is set to `hover`.
+         */
+        "enterDelay"?: number;
+        /**
+          * Use this to group popovers together so that opening one will not animate the closing of another. This is helpful when popovers are placed close together, preventing animation overlap.
+         */
+        "groupName"?: string;
+        /**
+          * Use this to decide if the popover should include a small arrow pointing to the trigger element, making the connection between them more clear.
+         */
+        "hasArrow"?: boolean;
+        /**
+          * Use this to set the popover to be nested inside another popover. This will prevent the parent popover from closing when the child popover is opened.
+         */
+        "nested"?: boolean;
+        /**
+          * Adjust the gap between the popover and its trigger element by setting how many pixels they should be apart.
+         */
+        "offset"?: number;
+        /**
+          * Emitted when the popover is toggled.
+          * @bind open
+         */
+        "onOpenChanged"?: (event: NvPopoverCustomEvent<boolean>) => void;
+        /**
+          * Use this prop to toggle the visibility of the popover. Set to true to show the popover and false to hide it.
+         */
+        "open"?: boolean;
+        /**
+          * Defines where the popover appears relative to the trigger.
+         */
+        "placement"?: Placement;
+        /**
+          * Sets how many pixels the popover should stay from the edge of the viewport.
+         */
+        "shiftPadding"?: number;
+        /**
+          * Sets the interaction mode for triggering the popover. Options include: - `hover`: The popover is shown on trigger hover. - `click`: The popover toggles on trigger click. - `controlled`: The visibility is managed manually through methods or the   open prop.
+         */
+        "triggerMode"?: 'hover' | 'click' | 'controlled';
+    }
+    interface NvRow {
+    }
+    /**
+     * @deprecated Please use tailwind classes instead
+     */
+    interface NvStack {
+        /**
+          * Fill will force the children to fill the stack depending of the direction of the stack. In horizontal position, the children take the height of the stack. In vertical position, the children take the width of the stack.
+         */
+        "fill"?: boolean;
+        /**
+          * Flex will force the children to share the stack between the children depending of the direction of the stack. In horizontal position, the children width will share the width of the stack. In vertical position, the children height will share the height of the stack.
+         */
+        "flex"?: boolean;
+        /**
+          * Full set the width of the stack to 100%. (same effect as WFull props)
+         */
+        "full"?: boolean;
+        /**
+          * Gutter refers to the space that exists between children components inside the stack container.
+         */
+        "gutter"?: number;
+        /**
+          * Display the element of the stack vertically.
+         */
+        "vertical"?: boolean;
+    }
+    interface NvTooltip {
+        /**
+          * Controls how long (in milliseconds) the tooltip waits to show after you hover over or focus on an element. If you move away before the delay is up, the tooltip won’t appear.
+         */
+        "enterDelay"?: number;
+        /**
+          * A string representing the text to be displayed inside the tooltip. This content is shown when the tooltip is activated by the user, such as on hover or focus events.
+         */
+        "message"?: string;
+        /**
+          * Decides where the tooltip shows up next to the element it’s linked to (above, below, to the sides). If there isn’t enough room, it will adjust it's position on the axis to fit on the screen, so users can always see it.
+         */
+        "placement"?: Placement;
+    }
+    interface IntrinsicElements {
+        "nv-alert": NvAlert;
+        "nv-avatar": NvAvatar;
+        "nv-badge": NvBadge;
+        "nv-base": NvBase;
+        "nv-button": NvButton;
+        "nv-col": NvCol;
+        "nv-fieldcheckbox": NvFieldcheckbox;
+        "nv-fieldnumber": NvFieldnumber;
+        "nv-fieldpassword": NvFieldpassword;
+        "nv-fieldradio": NvFieldradio;
+        "nv-fieldselect": NvFieldselect;
+        "nv-fieldtext": NvFieldtext;
+        "nv-fieldtextarea": NvFieldtextarea;
+        "nv-fieldtoggle": NvFieldtoggle;
+        "nv-icon": NvIcon;
+        "nv-iconbutton": NvIconbutton;
+        "nv-loader": NvLoader;
+        "nv-menu": NvMenu;
+        "nv-menuitem": NvMenuitem;
+        "nv-popover": NvPopover;
+        "nv-row": NvRow;
+        "nv-stack": NvStack;
+        "nv-tooltip": NvTooltip;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "nv-alert": LocalJSX.NvAlert & JSXBase.HTMLAttributes<HTMLNvAlertElement>;
+            "nv-avatar": LocalJSX.NvAvatar & JSXBase.HTMLAttributes<HTMLNvAvatarElement>;
+            "nv-badge": LocalJSX.NvBadge & JSXBase.HTMLAttributes<HTMLNvBadgeElement>;
+            /**
+             * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
+             */
+            "nv-base": LocalJSX.NvBase & JSXBase.HTMLAttributes<HTMLNvBaseElement>;
+            "nv-button": LocalJSX.NvButton & JSXBase.HTMLAttributes<HTMLNvButtonElement>;
+            "nv-col": LocalJSX.NvCol & JSXBase.HTMLAttributes<HTMLNvColElement>;
+            "nv-fieldcheckbox": LocalJSX.NvFieldcheckbox & JSXBase.HTMLAttributes<HTMLNvFieldcheckboxElement>;
+            "nv-fieldnumber": LocalJSX.NvFieldnumber & JSXBase.HTMLAttributes<HTMLNvFieldnumberElement>;
+            "nv-fieldpassword": LocalJSX.NvFieldpassword & JSXBase.HTMLAttributes<HTMLNvFieldpasswordElement>;
+            "nv-fieldradio": LocalJSX.NvFieldradio & JSXBase.HTMLAttributes<HTMLNvFieldradioElement>;
+            "nv-fieldselect": LocalJSX.NvFieldselect & JSXBase.HTMLAttributes<HTMLNvFieldselectElement>;
+            "nv-fieldtext": LocalJSX.NvFieldtext & JSXBase.HTMLAttributes<HTMLNvFieldtextElement>;
+            "nv-fieldtextarea": LocalJSX.NvFieldtextarea & JSXBase.HTMLAttributes<HTMLNvFieldtextareaElement>;
+            "nv-fieldtoggle": LocalJSX.NvFieldtoggle & JSXBase.HTMLAttributes<HTMLNvFieldtoggleElement>;
+            "nv-icon": LocalJSX.NvIcon & JSXBase.HTMLAttributes<HTMLNvIconElement>;
+            "nv-iconbutton": LocalJSX.NvIconbutton & JSXBase.HTMLAttributes<HTMLNvIconbuttonElement>;
+            "nv-loader": LocalJSX.NvLoader & JSXBase.HTMLAttributes<HTMLNvLoaderElement>;
+            "nv-menu": LocalJSX.NvMenu & JSXBase.HTMLAttributes<HTMLNvMenuElement>;
+            "nv-menuitem": LocalJSX.NvMenuitem & JSXBase.HTMLAttributes<HTMLNvMenuitemElement>;
+            "nv-popover": LocalJSX.NvPopover & JSXBase.HTMLAttributes<HTMLNvPopoverElement>;
+            "nv-row": LocalJSX.NvRow & JSXBase.HTMLAttributes<HTMLNvRowElement>;
+            /**
+             * @deprecated Please use tailwind classes instead
+             */
+            "nv-stack": LocalJSX.NvStack & JSXBase.HTMLAttributes<HTMLNvStackElement>;
+            "nv-tooltip": LocalJSX.NvTooltip & JSXBase.HTMLAttributes<HTMLNvTooltipElement>;
+        }
+    }
+}