@nova-design-system/nova-webcomponents 3.0.0-beta.30 → 3.0.0-beta.33

package/dist/types/components.d.ts

@@ -5,19 +5,21 @@
  * 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 { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, FieldLabelPlacement, IconButtonShape, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
 import { Column } from "./interfaces/Column";
 import { DropdownItemSelectedEventDetail } from "./components/nv-fielddropdownitem/DropdownItemSelectedEventDetail";
 import { IconName } from "./components/nv-icon/nv-icons";
 import { Placement } from "@floating-ui/dom";
 import { MenuitemSelectedEventDetail } from "./components/nv-menuitem/nv-menuitem";
+import { MenuitemSelectedEventDetail as MenuitemSelectedEventDetail1 } 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 { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, FieldLabelPlacement, IconButtonShape, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
 export { Column } from "./interfaces/Column";
 export { DropdownItemSelectedEventDetail } from "./components/nv-fielddropdownitem/DropdownItemSelectedEventDetail";
 export { IconName } from "./components/nv-icon/nv-icons";
 export { Placement } from "@floating-ui/dom";
 export { MenuitemSelectedEventDetail } from "./components/nv-menuitem/nv-menuitem";
+export { MenuitemSelectedEventDetail as MenuitemSelectedEventDetail1 } from "./components/nv-menuitem/nv-menuitem";
 export { Element } from "./stencil-public-runtime";
 export namespace Components {
     interface NvAlert {
@@ -158,6 +160,22 @@ export namespace Components {
      */
     interface NvBase {
     }
+    interface NvBreadcrumb {
+        /**
+          * Use this to highlight the breadcrumb as the current page in your navigation. It also makes the page clearer to screen readers with aria-current="location".
+         */
+        "current": boolean;
+        /**
+          * Add an optional tooltip to provide extra information about the breadcrumb.
+         */
+        "tooltip": string;
+        /**
+          * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs in a dropdown. Use default for a single item. When passing multiple items as collapsed, make sure to wrap you links in list tags
+         */
+        "type": 'collapsed' | 'default';
+    }
+    interface NvBreadcrumbs {
+    }
     interface NvButton {
         /**
           * Applies styling that visually indicates the button represents a dangerous action.
@@ -414,131 +432,6 @@ export namespace Components {
          */
         "value"?: string;
     }
-    interface NvFielddropdownitemcheck {
-        /**
-          * Indicates whether the checkbox is selected.
-         */
-        "checked": boolean;
-        /**
-          * A description providing additional context or information about the checkbox.
-         */
-        "description"?: string;
-        /**
-          * Disables the item, preventing any user interaction.
-         */
-        "disabled": boolean;
-        /**
-          * The group this item belongs to, if applicable.
-         */
-        "group"?: string;
-        /**
-          * The label displayed alongside the checkbox.
-         */
-        "label"?: string;
-        /**
-          * The value associated with this item.
-         */
-        "value"?: string;
-    }
-    interface NvFieldmultiselect {
-        /**
-          * The autocomplete prop for faster input filling.
-         */
-        "autocomplete": `${TextInputAutocomplete}`;
-        /**
-          * Text for the badge showing the number of selected items.
-         */
-        "badgeLabel": string;
-        /**
-          * Delay in milliseconds before the search is triggered when typing in the filter input.
-          * @default 300
-         */
-        "debounceDelay": number;
-        /**
-          * Add helpful hints or extra information under the text input field.
-         */
-        "description": string;
-        /**
-          * Disables the input field.
-         */
-        "disabled": boolean;
-        /**
-          * The text to display when no items match the filter.
-         */
-        "emptyresult": string;
-        /**
-          * Alters the input field's appearance to indicate an error.
-         */
-        "error": boolean;
-        /**
-          * A description that appears when there is an error.
-         */
-        "errorDescription": string;
-        /**
-          * Enables or disables the filtering feature for the multiselect items.
-         */
-        "filterable": boolean;
-        /**
-          * Retrieves the current filter text entered by the user.
-          * @returns The filter text.
-         */
-        "getFilterText": () => Promise<string>;
-        /**
-          * Returns the list of selected values.
-          * @returns The selected values.
-         */
-        "getSelectedValues": () => Promise<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;
-        /**
-          * Defines the maximum height of the multiselect list when open.
-         */
-        "maxHeight": string;
-        /**
-          * Multiselect mode: 'options' (JSON data) or 'slots' (custom items). This property is now reflected in the modeState.
-         */
-        "mode": 'options' | 'slots';
-        /**
-          * 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;
-        /**
-          * State of the multiselect popover.
-         */
-        "open": boolean;
-        /**
-          * List of options available in the multiselect.
-          * @description The options are passed as a JSON string.
-          * @example options='[{"label": "Option 1", "value": "option1"}, {"label": "Option 2", "value": "option2"}]'
-         */
-        "options"?: string;
-        /**
-          * Display temporary text inside the input field.
-         */
-        "placeholder": string;
-        /**
-          * Display the input field's content without allowing users to change it.
-         */
-        "readonly": boolean;
-        /**
-          * Marks the input field as required.
-         */
-        "required": boolean;
-        /**
-          * Reset the filter and make all items visible.
-         */
-        "resetFilter": () => Promise<void>;
-        /**
-          * Specifies the value of the input field.
-         */
-        "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.
@@ -666,7 +559,7 @@ export namespace Components {
          */
         "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.
+          * 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 on form submission. the rules are applied to the input value via regexes.
          */
         "pattern": string;
         /**
@@ -771,6 +664,10 @@ export namespace Components {
           * @validator message
          */
         "errorDescription": string;
+        /**
+          * 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.
+         */
+        "inputId": 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.
          */
@@ -796,10 +693,6 @@ export namespace Components {
           * 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.
          */
@@ -867,7 +760,7 @@ export namespace Components {
          */
         "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.
+          * 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 after the form is submitted.
          */
         "pattern": string;
         /**
@@ -928,6 +821,10 @@ export namespace Components {
           * @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 textarea field. It’s a crucial element for making forms clear and user-friendly.
          */
@@ -973,10 +870,6 @@ export namespace Components {
           * 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.
@@ -1093,7 +986,7 @@ export namespace Components {
         /**
           * Sets the shape of the button. Choose between square and rounded.
          */
-        "shape": 'square' | 'rounded';
+        "shape": `${IconButtonShape}`;
         /**
           * Determines how large or small the button appears, allowing for customization of the button's dimensions to fit different design specifications and user needs.
          */
@@ -1152,6 +1045,10 @@ export namespace Components {
           * 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}`;
+        /**
+          * Represents the identifier or name associated with the menu item. This value will be emitted as part of the event data when the menu item is selected, enabling event handlers to identify the chosen item.
+         */
+        "name": string;
         /**
           * Show a shortcut key for the action represented in the menu item.
          */
@@ -1334,6 +1231,7 @@ export namespace Components {
           * 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;
+        "triggerElement": Element;
     }
 }
 export interface NvAlertCustomEvent<T> extends CustomEvent<T> {
@@ -1356,14 +1254,6 @@ export interface NvFielddropdownitemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvFielddropdownitemElement;
 }
-export interface NvFielddropdownitemcheckCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLNvFielddropdownitemcheckElement;
-}
-export interface NvFieldmultiselectCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLNvFieldmultiselectElement;
-}
 export interface NvFieldnumberCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvFieldnumberElement;
@@ -1396,6 +1286,10 @@ export interface NvMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvMenuElement;
 }
+export interface NvMenuitemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvMenuitemElement;
+}
 export interface NvPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvPopoverElement;
@@ -1454,6 +1348,18 @@ declare global {
         prototype: HTMLNvBaseElement;
         new (): HTMLNvBaseElement;
     };
+    interface HTMLNvBreadcrumbElement extends Components.NvBreadcrumb, HTMLStencilElement {
+    }
+    var HTMLNvBreadcrumbElement: {
+        prototype: HTMLNvBreadcrumbElement;
+        new (): HTMLNvBreadcrumbElement;
+    };
+    interface HTMLNvBreadcrumbsElement extends Components.NvBreadcrumbs, HTMLStencilElement {
+    }
+    var HTMLNvBreadcrumbsElement: {
+        prototype: HTMLNvBreadcrumbsElement;
+        new (): HTMLNvBreadcrumbsElement;
+    };
     interface HTMLNvButtonElement extends Components.NvButton, HTMLStencilElement {
     }
     var HTMLNvButtonElement: {
@@ -1557,55 +1463,6 @@ declare global {
         prototype: HTMLNvFielddropdownitemElement;
         new (): HTMLNvFielddropdownitemElement;
     };
-    interface HTMLNvFielddropdownitemcheckElementEventMap {
-        "itemChecked": {
-    /**
-     * The value associated with this item
-     */
-    value: string | undefined;
-    /**
-     * Whether the checkbox is currently checked
-     */
-    checked: boolean;
-    /**
-     * The group this item belongs to, if any
-     */
-    group?: string | undefined;
-  };
-    }
-    interface HTMLNvFielddropdownitemcheckElement extends Components.NvFielddropdownitemcheck, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLNvFielddropdownitemcheckElementEventMap>(type: K, listener: (this: HTMLNvFielddropdownitemcheckElement, ev: NvFielddropdownitemcheckCustomEvent<HTMLNvFielddropdownitemcheckElementEventMap[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 HTMLNvFielddropdownitemcheckElementEventMap>(type: K, listener: (this: HTMLNvFielddropdownitemcheckElement, ev: NvFielddropdownitemcheckCustomEvent<HTMLNvFielddropdownitemcheckElementEventMap[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 HTMLNvFielddropdownitemcheckElement: {
-        prototype: HTMLNvFielddropdownitemcheckElement;
-        new (): HTMLNvFielddropdownitemcheckElement;
-    };
-    interface HTMLNvFieldmultiselectElementEventMap {
-        "dropdownItemSelected": DropdownItemSelectedEventDetail;
-        "valueChanged": string;
-        "multiselectChange": string[];
-    }
-    interface HTMLNvFieldmultiselectElement extends Components.NvFieldmultiselect, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLNvFieldmultiselectElementEventMap>(type: K, listener: (this: HTMLNvFieldmultiselectElement, ev: NvFieldmultiselectCustomEvent<HTMLNvFieldmultiselectElementEventMap[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 HTMLNvFieldmultiselectElementEventMap>(type: K, listener: (this: HTMLNvFieldmultiselectElement, ev: NvFieldmultiselectCustomEvent<HTMLNvFieldmultiselectElementEventMap[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 HTMLNvFieldmultiselectElement: {
-        prototype: HTMLNvFieldmultiselectElement;
-        new (): HTMLNvFieldmultiselectElement;
-    };
     interface HTMLNvFieldnumberElementEventMap {
         "valueChanged": number;
     }
@@ -1760,7 +1617,18 @@ declare global {
         prototype: HTMLNvMenuElement;
         new (): HTMLNvMenuElement;
     };
+    interface HTMLNvMenuitemElementEventMap {
+        "menuitemSelected": MenuitemSelectedEventDetail1;
+    }
     interface HTMLNvMenuitemElement extends Components.NvMenuitem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvMenuitemElementEventMap>(type: K, listener: (this: HTMLNvMenuitemElement, ev: NvMenuitemCustomEvent<HTMLNvMenuitemElementEventMap[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 HTMLNvMenuitemElementEventMap>(type: K, listener: (this: HTMLNvMenuitemElement, ev: NvMenuitemCustomEvent<HTMLNvMenuitemElementEventMap[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 HTMLNvMenuitemElement: {
         prototype: HTMLNvMenuitemElement;
@@ -1845,6 +1713,8 @@ declare global {
         "nv-avatar": HTMLNvAvatarElement;
         "nv-badge": HTMLNvBadgeElement;
         "nv-base": HTMLNvBaseElement;
+        "nv-breadcrumb": HTMLNvBreadcrumbElement;
+        "nv-breadcrumbs": HTMLNvBreadcrumbsElement;
         "nv-button": HTMLNvButtonElement;
         "nv-col": HTMLNvColElement;
         "nv-datagrid": HTMLNvDatagridElement;
@@ -1856,8 +1726,6 @@ declare global {
         "nv-fieldcheckbox": HTMLNvFieldcheckboxElement;
         "nv-fielddropdown": HTMLNvFielddropdownElement;
         "nv-fielddropdownitem": HTMLNvFielddropdownitemElement;
-        "nv-fielddropdownitemcheck": HTMLNvFielddropdownitemcheckElement;
-        "nv-fieldmultiselect": HTMLNvFieldmultiselectElement;
         "nv-fieldnumber": HTMLNvFieldnumberElement;
         "nv-fieldpassword": HTMLNvFieldpasswordElement;
         "nv-fieldradio": HTMLNvFieldradioElement;
@@ -2046,6 +1914,22 @@ declare namespace LocalJSX {
      */
     interface NvBase {
     }
+    interface NvBreadcrumb {
+        /**
+          * Use this to highlight the breadcrumb as the current page in your navigation. It also makes the page clearer to screen readers with aria-current="location".
+         */
+        "current"?: boolean;
+        /**
+          * Add an optional tooltip to provide extra information about the breadcrumb.
+         */
+        "tooltip"?: string;
+        /**
+          * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs in a dropdown. Use default for a single item. When passing multiple items as collapsed, make sure to wrap you links in list tags
+         */
+        "type"?: 'collapsed' | 'default';
+    }
+    interface NvBreadcrumbs {
+    }
     interface NvButton {
         /**
           * Applies styling that visually indicates the button represents a dangerous action.
@@ -2315,147 +2199,6 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface NvFielddropdownitemcheck {
-        /**
-          * Indicates whether the checkbox is selected.
-         */
-        "checked"?: boolean;
-        /**
-          * A description providing additional context or information about the checkbox.
-         */
-        "description"?: string;
-        /**
-          * Disables the item, preventing any user interaction.
-         */
-        "disabled"?: boolean;
-        /**
-          * The group this item belongs to, if applicable.
-         */
-        "group"?: string;
-        /**
-          * The label displayed alongside the checkbox.
-         */
-        "label"?: string;
-        /**
-          * Event emitted when the checkbox is toggled. It provides details about the current state of the item.
-         */
-        "onItemChecked"?: (event: NvFielddropdownitemcheckCustomEvent<{
-    /**
-     * The value associated with this item
-     */
-    value: string | undefined;
-    /**
-     * Whether the checkbox is currently checked
-     */
-    checked: boolean;
-    /**
-     * The group this item belongs to, if any
-     */
-    group?: string | undefined;
-  }>) => void;
-        /**
-          * The value associated with this item.
-         */
-        "value"?: string;
-    }
-    interface NvFieldmultiselect {
-        /**
-          * The autocomplete prop for faster input filling.
-         */
-        "autocomplete"?: `${TextInputAutocomplete}`;
-        /**
-          * Text for the badge showing the number of selected items.
-         */
-        "badgeLabel"?: string;
-        /**
-          * Delay in milliseconds before the search is triggered when typing in the filter input.
-          * @default 300
-         */
-        "debounceDelay"?: number;
-        /**
-          * Add helpful hints or extra information under the text input field.
-         */
-        "description"?: string;
-        /**
-          * Disables the input field.
-         */
-        "disabled"?: boolean;
-        /**
-          * The text to display when no items match the filter.
-         */
-        "emptyresult"?: string;
-        /**
-          * Alters the input field's appearance to indicate an error.
-         */
-        "error"?: boolean;
-        /**
-          * A description that appears when there is an error.
-         */
-        "errorDescription"?: string;
-        /**
-          * Enables or disables the filtering feature for the multiselect items.
-         */
-        "filterable"?: 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;
-        /**
-          * Defines the maximum height of the multiselect list when open.
-         */
-        "maxHeight"?: string;
-        /**
-          * Multiselect mode: 'options' (JSON data) or 'slots' (custom items). This property is now reflected in the modeState.
-         */
-        "mode"?: 'options' | 'slots';
-        /**
-          * 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;
-        /**
-          * Event emitted when an item is selected.
-         */
-        "onDropdownItemSelected"?: (event: NvFieldmultiselectCustomEvent<DropdownItemSelectedEventDetail>) => void;
-        /**
-          * Event emitted when the selection changes in the multiselect. Emits the current list of selected values.
-         */
-        "onMultiselectChange"?: (event: NvFieldmultiselectCustomEvent<string[]>) => void;
-        /**
-          * Emitted when the input value changes.
-          * @bind value
-         */
-        "onValueChanged"?: (event: NvFieldmultiselectCustomEvent<string>) => void;
-        /**
-          * State of the multiselect popover.
-         */
-        "open"?: boolean;
-        /**
-          * List of options available in the multiselect.
-          * @description The options are passed as a JSON string.
-          * @example options='[{"label": "Option 1", "value": "option1"}, {"label": "Option 2", "value": "option2"}]'
-         */
-        "options"?: string;
-        /**
-          * Display temporary text inside the input field.
-         */
-        "placeholder"?: string;
-        /**
-          * Display the input field's content without allowing users to change it.
-         */
-        "readonly"?: boolean;
-        /**
-          * Marks the input field as required.
-         */
-        "required"?: boolean;
-        /**
-          * Specifies the value of the input field.
-         */
-        "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.
@@ -2593,7 +2336,7 @@ declare namespace LocalJSX {
          */
         "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.
+          * 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 on form submission. the rules are applied to the input value via regexes.
          */
         "pattern"?: string;
         /**
@@ -2703,6 +2446,10 @@ declare namespace LocalJSX {
           * @validator message
          */
         "errorDescription"?: string;
+        /**
+          * 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.
+         */
+        "inputId"?: 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.
          */
@@ -2733,10 +2480,6 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -2809,7 +2552,7 @@ declare namespace LocalJSX {
          */
         "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.
+          * 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 after the form is submitted.
          */
         "pattern"?: string;
         /**
@@ -2870,6 +2613,10 @@ declare namespace LocalJSX {
           * @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 textarea field. It’s a crucial element for making forms clear and user-friendly.
          */
@@ -2920,10 +2667,6 @@ declare namespace LocalJSX {
           * 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.
@@ -3045,7 +2788,7 @@ declare namespace LocalJSX {
         /**
           * Sets the shape of the button. Choose between square and rounded.
          */
-        "shape"?: 'square' | 'rounded';
+        "shape"?: `${IconButtonShape}`;
         /**
           * Determines how large or small the button appears, allowing for customization of the button's dimensions to fit different design specifications and user needs.
          */
@@ -3075,7 +2818,7 @@ declare namespace LocalJSX {
          */
         "nested"?: boolean;
         /**
-          * Emitted from nv-menuitem elements with the corresponding id when the menu item is selected.
+          * Emitted from nv-menuitem elements with the corresponding id and name when selected (via click or keyboard). This event listener can be attached to either the nv-menu or the nv-menuitem element.
          */
         "onMenuitemSelected"?: (event: NvMenuCustomEvent<MenuitemSelectedEventDetail>) => void;
         /**
@@ -3100,6 +2843,14 @@ declare namespace LocalJSX {
           * 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}`;
+        /**
+          * Represents the identifier or name associated with the menu item. This value will be emitted as part of the event data when the menu item is selected, enabling event handlers to identify the chosen item.
+         */
+        "name"?: string;
+        /**
+          * Fires when the menu item is selected (click or keypress). Will include the id and name of the menu item.
+         */
+        "onMenuitemSelected"?: (event: NvMenuitemCustomEvent<MenuitemSelectedEventDetail1>) => void;
         /**
           * Show a shortcut key for the action represented in the menu item.
          */
@@ -3280,6 +3031,8 @@ declare namespace LocalJSX {
         "nv-avatar": NvAvatar;
         "nv-badge": NvBadge;
         "nv-base": NvBase;
+        "nv-breadcrumb": NvBreadcrumb;
+        "nv-breadcrumbs": NvBreadcrumbs;
         "nv-button": NvButton;
         "nv-col": NvCol;
         "nv-datagrid": NvDatagrid;
@@ -3291,8 +3044,6 @@ declare namespace LocalJSX {
         "nv-fieldcheckbox": NvFieldcheckbox;
         "nv-fielddropdown": NvFielddropdown;
         "nv-fielddropdownitem": NvFielddropdownitem;
-        "nv-fielddropdownitemcheck": NvFielddropdownitemcheck;
-        "nv-fieldmultiselect": NvFieldmultiselect;
         "nv-fieldnumber": NvFieldnumber;
         "nv-fieldpassword": NvFieldpassword;
         "nv-fieldradio": NvFieldradio;
@@ -3328,6 +3079,8 @@ declare module "@stencil/core" {
              * @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-breadcrumb": LocalJSX.NvBreadcrumb & JSXBase.HTMLAttributes<HTMLNvBreadcrumbElement>;
+            "nv-breadcrumbs": LocalJSX.NvBreadcrumbs & JSXBase.HTMLAttributes<HTMLNvBreadcrumbsElement>;
             "nv-button": LocalJSX.NvButton & JSXBase.HTMLAttributes<HTMLNvButtonElement>;
             "nv-col": LocalJSX.NvCol & JSXBase.HTMLAttributes<HTMLNvColElement>;
             /**
@@ -3342,8 +3095,6 @@ declare module "@stencil/core" {
             "nv-fieldcheckbox": LocalJSX.NvFieldcheckbox & JSXBase.HTMLAttributes<HTMLNvFieldcheckboxElement>;
             "nv-fielddropdown": LocalJSX.NvFielddropdown & JSXBase.HTMLAttributes<HTMLNvFielddropdownElement>;
             "nv-fielddropdownitem": LocalJSX.NvFielddropdownitem & JSXBase.HTMLAttributes<HTMLNvFielddropdownitemElement>;
-            "nv-fielddropdownitemcheck": LocalJSX.NvFielddropdownitemcheck & JSXBase.HTMLAttributes<HTMLNvFielddropdownitemcheckElement>;
-            "nv-fieldmultiselect": LocalJSX.NvFieldmultiselect & JSXBase.HTMLAttributes<HTMLNvFieldmultiselectElement>;
             "nv-fieldnumber": LocalJSX.NvFieldnumber & JSXBase.HTMLAttributes<HTMLNvFieldnumberElement>;
             "nv-fieldpassword": LocalJSX.NvFieldpassword & JSXBase.HTMLAttributes<HTMLNvFieldpasswordElement>;
             "nv-fieldradio": LocalJSX.NvFieldradio & JSXBase.HTMLAttributes<HTMLNvFieldradioElement>;