@mgdis/mg-components 6.24.0 → 6.26.0

package/dist/types/components.d.ts

@@ -11,16 +11,20 @@ import { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 import { BreadcrumbItemType } from "./components/molecules/mg-breadcrumb/mg-breadcrumb.conf";
 import { ButtonType, SizeType, VariantType as VariantType1 } from "./components/atoms/mg-button/mg-button.conf";
 import { RadiusSizeType } from "./components/atoms/mg-card/mg-card.conf";
+import { DividerDirectionType } from "./components/atoms/mg-divider/mg-divider.conf";
 import { labelHeading, TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 import { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 import { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
-import { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
+import { IllustratedMessageAlignType, IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
+import { IllustrationType } from "./components/atoms/mg-illustration/mg-illustration.conf";
 import { CheckboxType, ICheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Direction, Option, Option as ToggleOption } from "./types";
+import { Placement } from "@popperjs/core";
 import { RequestMappingType, ResponseMappingType } from "./components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf";
 import { Format, NumericType } from "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { ButtonsOption } from "./components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf";
+import { RichTextEditorCustomAction, SelectionChange } from "./components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf";
 import { SanitizerOptions } from "@mgdis/sanitize-html";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 import { OptionType, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
@@ -32,7 +36,6 @@ import { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } fr
 import { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 import { PaginationMessagesType } from "./components/molecules/mg-pagination/mg-pagination.conf";
 import { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
-import { Placement } from "@popperjs/core";
 import { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 import { ColumnsType, TableSizeType } from "./components/molecules/mg-table/mg-table.conf";
@@ -44,16 +47,20 @@ export { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 export { BreadcrumbItemType } from "./components/molecules/mg-breadcrumb/mg-breadcrumb.conf";
 export { ButtonType, SizeType, VariantType as VariantType1 } from "./components/atoms/mg-button/mg-button.conf";
 export { RadiusSizeType } from "./components/atoms/mg-card/mg-card.conf";
+export { DividerDirectionType } from "./components/atoms/mg-divider/mg-divider.conf";
 export { labelHeading, TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 export { AriaRoleType, RequiredMessageStatusType } from "./components/molecules/mg-form/mg-form.conf";
 export { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
-export { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
+export { IllustratedMessageAlignType, IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
+export { IllustrationType } from "./components/atoms/mg-illustration/mg-illustration.conf";
 export { CheckboxType, ICheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 export { Direction, Option, Option as ToggleOption } from "./types";
+export { Placement } from "@popperjs/core";
 export { RequestMappingType, ResponseMappingType } from "./components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf";
 export { Format, NumericType } from "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf";
 export { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 export { ButtonsOption } from "./components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf";
+export { RichTextEditorCustomAction, SelectionChange } from "./components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.conf";
 export { SanitizerOptions } from "@mgdis/sanitize-html";
 export { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 export { OptionType, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
@@ -65,7 +72,6 @@ export { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } fr
 export { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 export { PaginationMessagesType } from "./components/molecules/mg-pagination/mg-pagination.conf";
 export { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
-export { Placement } from "@popperjs/core";
 export { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 export { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 export { ColumnsType, TableSizeType } from "./components/molecules/mg-table/mg-table.conf";
@@ -230,6 +236,11 @@ export namespace Components {
         "toggleOpened": string;
     }
     interface MgDivider {
+        /**
+          * Define component direction
+          * @default 'horizontal'
+         */
+        "direction": DividerDirectionType;
         /**
           * Define component size
           * @default false
@@ -368,6 +379,11 @@ export namespace Components {
         "variantStyle": IconVariantStyleType;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define the horizontal alignment of the message inside its container. The message is sized to its content, so `align` positions it in both the vertical and horizontal directions. When the content is wide enough to fill the container there is no room left, so `align` has no visible effect.
+          * @default 'center'
+         */
+        "align": IllustratedMessageAlignType;
         /**
           * Define component orientation
           * @default 'vertical'
@@ -379,6 +395,13 @@ export namespace Components {
          */
         "size": IllustratedMessageSizeType;
     }
+    interface MgIllustration {
+        /**
+          * Illustration to display, by name from
+          * @mgdis /img.
+         */
+        "illustration": IllustrationType;
+    }
     interface MgInput {
         /**
           * Define aria-describedby ids to link with
@@ -625,6 +648,11 @@ export namespace Components {
           * Define input placeholder. It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help combobox.
          */
         "placeholder"?: string;
+        /**
+          * Define the popover placement
+          * @default 'bottom-start'
+         */
+        "popoverPlacement": Placement;
         /**
           * Define if input is readonly
           * @default false
@@ -1182,6 +1210,10 @@ export namespace Components {
         "value": any;
     }
     interface MgInputRichTextEditor {
+        /**
+          * Inject custom action buttons in the toolbar (e.g. to insert merge fields or apply custom formatting). Buttons are appended after the built-in `modules`. Each action is an object `{ name, label, icon }`: - `name`: unique identifier, returned in the `custom-action` event detail on click. - `label`: accessible label used as the button tooltip and aria-label. - `icon`: design system `mg-icon` name rendered inside the button, unique across actions. The action behaviour is the consumer's responsibility: listen to `custom-action`, then read/write the selection with `getSelectedText()` / `getSelectedHTML()` / `replaceSelection()`.
+         */
+        "customActions"?: RichTextEditorCustomAction[];
         /**
           * Define if input is disabled
           * @default false
@@ -1201,6 +1233,16 @@ export namespace Components {
           * @returns Plain text content of the editor
          */
         "getEditorText": () => Promise<string>;
+        /**
+          * Get the current text selection as HTML. When a custom action is in progress, returns the selection snapshotted when the action was triggered.
+          * @returns Sanitized HTML of the selection (empty string if nothing is selected)
+         */
+        "getSelectedHTML": () => Promise<string>;
+        /**
+          * Get the current text selection as plain text. When a custom action is in progress, returns the selection snapshotted when the action was triggered.
+          * @returns Plain text of the selection (empty string if nothing is selected)
+         */
+        "getSelectedText": () => Promise<string>;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -1253,6 +1295,11 @@ export namespace Components {
           * @default false
          */
         "readonly": boolean;
+        /**
+          * Replace the current text selection with the given content. When a custom action is in progress, the selection snapshotted when the action was triggered is restored first, so the replacement targets the right range even after focus moved away (e.g. during an async network request). No-op when the editor is readonly or disabled.
+          * @param content - HTML (or plain text) content to insert in place of the selection. It is sanitized.
+         */
+        "replaceSelection": (content: string) => Promise<void>;
         /**
           * Define if input is required
           * @default false
@@ -1954,9 +2001,9 @@ export namespace Components {
     interface MgPopover {
         /**
           * Hide popover arrow
-          * @default false
+          * @deprecated this prop is deprecated and will be removed in future releases. The popover arrow has been removed.
          */
-        "arrowHide": boolean;
+        "arrowHide": never;
         /**
           * Define if popover has a cross button
           * @default false
@@ -1979,7 +2026,7 @@ export namespace Components {
         "identifier": string;
         /**
           * Popover placement
-          * @default 'bottom'
+          * @default 'bottom-start'
          */
         "placement": Placement;
     }
@@ -2121,6 +2168,10 @@ export interface MgAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgAlertElement;
 }
+export interface MgBreadcrumbCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgBreadcrumbElement;
+}
 export interface MgButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgButtonElement;
@@ -2245,7 +2296,18 @@ declare global {
         prototype: HTMLMgBadgeElement;
         new (): HTMLMgBadgeElement;
     };
+    interface HTMLMgBreadcrumbElementEventMap {
+        "item-click": BreadcrumbItemType;
+    }
     interface HTMLMgBreadcrumbElement extends Components.MgBreadcrumb, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLMgBreadcrumbElementEventMap>(type: K, listener: (this: HTMLMgBreadcrumbElement, ev: MgBreadcrumbCustomEvent<HTMLMgBreadcrumbElementEventMap[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 HTMLMgBreadcrumbElementEventMap>(type: K, listener: (this: HTMLMgBreadcrumbElement, ev: MgBreadcrumbCustomEvent<HTMLMgBreadcrumbElementEventMap[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 HTMLMgBreadcrumbElement: {
         prototype: HTMLMgBreadcrumbElement;
@@ -2340,6 +2402,12 @@ declare global {
         prototype: HTMLMgIllustratedMessageElement;
         new (): HTMLMgIllustratedMessageElement;
     };
+    interface HTMLMgIllustrationElement extends Components.MgIllustration, HTMLStencilElement {
+    }
+    var HTMLMgIllustrationElement: {
+        prototype: HTMLMgIllustrationElement;
+        new (): HTMLMgIllustrationElement;
+    };
     interface HTMLMgInputElement extends Components.MgInput, HTMLStencilElement {
     }
     var HTMLMgInputElement: {
@@ -2478,6 +2546,8 @@ declare global {
     interface HTMLMgInputRichTextEditorElementEventMap {
         "input-valid": boolean;
         "value-change": string;
+        "custom-action": string;
+        "selection-change": SelectionChange;
     }
     interface HTMLMgInputRichTextEditorElement extends Components.MgInputRichTextEditor, HTMLStencilElement {
         addEventListener<K extends keyof HTMLMgInputRichTextEditorElementEventMap>(type: K, listener: (this: HTMLMgInputRichTextEditorElement, ev: MgInputRichTextEditorCustomEvent<HTMLMgInputRichTextEditorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2780,6 +2850,7 @@ declare global {
         "mg-form": HTMLMgFormElement;
         "mg-icon": HTMLMgIconElement;
         "mg-illustrated-message": HTMLMgIllustratedMessageElement;
+        "mg-illustration": HTMLMgIllustrationElement;
         "mg-input": HTMLMgInputElement;
         "mg-input-checkbox": HTMLMgInputCheckboxElement;
         "mg-input-combobox": HTMLMgInputComboboxElement;
@@ -2851,11 +2922,11 @@ declare namespace LocalJSX {
          */
         "onComponent-close"?: (event: MgAlertCustomEvent<void>) => void;
         /**
-          * Emited event when alert is hidden
+          * Emitted event when alert is hidden
          */
         "onComponent-hide"?: (event: MgAlertCustomEvent<void>) => void;
         /**
-          * Emited event when alert is diplayed
+          * Emitted event when alert is diplayed
          */
         "onComponent-show"?: (event: MgAlertCustomEvent<void>) => void;
         /**
@@ -2894,6 +2965,10 @@ declare namespace LocalJSX {
           * Breadcrumb items (hierarchical order: root → current page).
          */
         "items": BreadcrumbItemType[];
+        /**
+          * Emitted event when item link is clicked
+         */
+        "onItem-click"?: (event: MgBreadcrumbCustomEvent<BreadcrumbItemType>) => void;
     }
     interface MgButton {
         /**
@@ -2994,6 +3069,11 @@ declare namespace LocalJSX {
         "toggleOpened": string;
     }
     interface MgDivider {
+        /**
+          * Define component direction
+          * @default 'horizontal'
+         */
+        "direction"?: DividerDirectionType;
         /**
           * Define component size
           * @default false
@@ -3127,6 +3207,11 @@ declare namespace LocalJSX {
         "variantStyle"?: IconVariantStyleType;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define the horizontal alignment of the message inside its container. The message is sized to its content, so `align` positions it in both the vertical and horizontal directions. When the content is wide enough to fill the container there is no room left, so `align` has no visible effect.
+          * @default 'center'
+         */
+        "align"?: IllustratedMessageAlignType;
         /**
           * Define component orientation
           * @default 'vertical'
@@ -3138,6 +3223,13 @@ declare namespace LocalJSX {
          */
         "size"?: IllustratedMessageSizeType;
     }
+    interface MgIllustration {
+        /**
+          * Illustration to display, by name from
+          * @mgdis /img.
+         */
+        "illustration": IllustrationType;
+    }
     interface MgInput {
         /**
           * Define aria-describedby ids to link with
@@ -3251,7 +3343,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputCheckboxCustomEvent<HTMLMgInputCheckboxElement['valid']>) => void;
         /**
@@ -3366,29 +3458,34 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when fetch API throw an error
+          * Emitted event when fetch API throw an error
          */
         "onFetch-error"?: (event: MgInputComboboxCustomEvent<Error>) => void;
         /**
-          * Emited event when filter change
+          * Emitted event when filter change
          */
         "onFilter-change"?: (event: MgInputComboboxCustomEvent<string>) => void;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputComboboxCustomEvent<HTMLMgInputComboboxElement['valid']>) => void;
         /**
-          * Emited event when `load-more` is called
+          * Emitted event when `load-more` is called
          */
         "onLoad-more"?: (event: MgInputComboboxCustomEvent<void>) => void;
         /**
-          * Emited event when value change
+          * Emitted event when value change
          */
         "onValue-change"?: (event: MgInputComboboxCustomEvent<HTMLMgInputComboboxElement['value']>) => void;
         /**
           * Define input placeholder. It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help combobox.
          */
         "placeholder"?: string;
+        /**
+          * Define the popover placement
+          * @default 'bottom-start'
+         */
+        "popoverPlacement"?: Placement;
         /**
           * Define if input is readonly
           * @default false
@@ -3464,11 +3561,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputDateCustomEvent<HTMLMgInputDateElement['valid']>) => void;
         /**
-          * Emited event when value change
+          * Emitted event when value change
          */
         "onValue-change"?: (event: MgInputDateCustomEvent<HTMLMgInputDateElement['value']>) => void;
         /**
@@ -3654,11 +3751,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputNumericCustomEvent<HTMLMgInputNumericElement['valid']>) => void;
         /**
-          * Emited event when value change
+          * Emitted event when value change
          */
         "onValue-change"?: (event: MgInputNumericCustomEvent<number>) => void;
         /**
@@ -3754,11 +3851,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputPasswordCustomEvent<HTMLMgInputPasswordElement['valid']>) => void;
         /**
-          * Emited event when value change
+          * Emitted event when value change
          */
         "onValue-change"?: (event: MgInputPasswordCustomEvent<HTMLMgInputPasswordElement['value']>) => void;
         /**
@@ -3840,7 +3937,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputRadioCustomEvent<HTMLMgInputRadioElement['valid']>) => void;
         /**
@@ -3876,6 +3973,10 @@ declare namespace LocalJSX {
         "value"?: any;
     }
     interface MgInputRichTextEditor {
+        /**
+          * Inject custom action buttons in the toolbar (e.g. to insert merge fields or apply custom formatting). Buttons are appended after the built-in `modules`. Each action is an object `{ name, label, icon }`: - `name`: unique identifier, returned in the `custom-action` event detail on click. - `label`: accessible label used as the button tooltip and aria-label. - `icon`: design system `mg-icon` name rendered inside the button, unique across actions. The action behaviour is the consumer's responsibility: listen to `custom-action`, then read/write the selection with `getSelectedText()` / `getSelectedHTML()` / `replaceSelection()`.
+         */
+        "customActions"?: RichTextEditorCustomAction[];
         /**
           * Define if input is disabled
           * @default false
@@ -3917,11 +4018,19 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when a custom action button is clicked. The detail contains the action `name`.
+         */
+        "onCustom-action"?: (event: MgInputRichTextEditorCustomEvent<string>) => void;
+        /**
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputRichTextEditorCustomEvent<boolean>) => void;
         /**
-          * Emited event when value change
+          * Emitted event when the text selection changes. The detail contains the selected `text`, sanitized `html` and whether the selection `isCollapsed`.
+         */
+        "onSelection-change"?: (event: MgInputRichTextEditorCustomEvent<SelectionChange>) => void;
+        /**
+          * Emitted event when value change
          */
         "onValue-change"?: (event: MgInputRichTextEditorCustomEvent<string>) => void;
         /**
@@ -4020,11 +4129,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputSelectCustomEvent<HTMLMgInputCheckboxElement['valid']>) => void;
         /**
-          * Emited event when value change
+          * Emitted event when value change
          */
         "onValue-change"?: (event: MgInputSelectCustomEvent<HTMLMgInputCheckboxElement['value']>) => void;
         /**
@@ -4130,11 +4239,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputTextCustomEvent<HTMLMgInputTextElement['valid']>) => void;
         /**
-          * Emited event when value change
+          * Emitted event when value change
          */
         "onValue-change"?: (event: MgInputTextCustomEvent<HTMLMgInputTextElement['value']>) => void;
         /**
@@ -4235,11 +4344,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputTextareaCustomEvent<HTMLMgInputTextareaElement['valid']>) => void;
         /**
-          * Emited event when value change
+          * Emitted event when value change
          */
         "onValue-change"?: (event: MgInputTextareaCustomEvent<HTMLMgInputTextareaElement['value']>) => void;
         /**
@@ -4359,11 +4468,11 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emited event when checking validity
+          * Emitted event when checking validity
          */
         "onInput-valid"?: (event: MgInputToggleCustomEvent<boolean>) => void;
         /**
-          * Emited event when value change
+          * Emitted event when value change
          */
         "onValue-change"?: (event: MgInputToggleCustomEvent<HTMLMgInputToggleElement['value']>) => void;
         /**
@@ -4449,11 +4558,11 @@ declare namespace LocalJSX {
          */
         "isIcon"?: boolean;
         /**
-          * Emited event when item is loaded
+          * Emitted event when item is loaded
          */
         "onItem-loaded"?: (event: MgMenuItemCustomEvent<void>) => void;
         /**
-          * Emited event when item is updated
+          * Emitted event when item is updated
          */
         "onItem-updated"?: (event: MgMenuItemCustomEvent<void>) => void;
         /**
@@ -4620,9 +4729,9 @@ declare namespace LocalJSX {
     interface MgPopover {
         /**
           * Hide popover arrow
-          * @default false
+          * @deprecated this prop is deprecated and will be removed in future releases. The popover arrow has been removed.
          */
-        "arrowHide"?: boolean;
+        "arrowHide"?: never;
         /**
           * Define if popover has a cross button
           * @default false
@@ -4648,12 +4757,12 @@ declare namespace LocalJSX {
          */
         "onComponent-close"?: (event: MgPopoverCustomEvent<void>) => void;
         /**
-          * Emited event when display value change
+          * Emitted event when display value change
          */
         "onDisplay-change"?: (event: MgPopoverCustomEvent<HTMLMgPopoverElement['display']>) => void;
         /**
           * Popover placement
-          * @default 'bottom'
+          * @default 'bottom-start'
          */
         "placement"?: Placement;
     }
@@ -4664,7 +4773,7 @@ declare namespace LocalJSX {
          */
         "closeButton"?: boolean;
         /**
-          * Emited event when close button is clicked
+          * Emitted event when close button is clicked
          */
         "onHide-content"?: (event: MgPopoverContentCustomEvent<void>) => void;
     }
@@ -4700,7 +4809,7 @@ declare namespace LocalJSX {
          */
         "links"?: SkipLink[];
         /**
-          * Emited event when link is clicked
+          * Emitted event when link is clicked
          */
         "onGo-to-anchor"?: (event: MgSkipLinksCustomEvent<string>) => void;
     }
@@ -4744,7 +4853,7 @@ declare namespace LocalJSX {
          */
         "label": string;
         /**
-          * Emited event when active tab change
+          * Emitted event when active tab change
          */
         "onActive-tab-change"?: (event: MgTabsCustomEvent<HTMLMgTabsElement['activeTab']>) => void;
         /**
@@ -4846,6 +4955,7 @@ declare namespace LocalJSX {
     }
     interface MgDividerAttributes {
         "fullWidth": boolean;
+        "direction": DividerDirectionType;
     }
     interface MgFieldsetAttributes {
         "identifier": string;
@@ -4880,6 +4990,10 @@ declare namespace LocalJSX {
     interface MgIllustratedMessageAttributes {
         "size": IllustratedMessageSizeType;
         "direction": IllustratedMessageDirectionType;
+        "align": IllustratedMessageAlignType;
+    }
+    interface MgIllustrationAttributes {
+        "illustration": IllustrationType;
     }
     interface MgInputAttributes {
         "identifier": string;
@@ -4930,6 +5044,7 @@ declare namespace LocalJSX {
         "readonly": boolean;
         "disabled": boolean;
         "mgWidth": string;
+        "popoverPlacement": Placement;
         "tooltip": string;
         "tooltipPosition": TooltipPosition;
         "helpText": string;
@@ -5197,7 +5312,6 @@ declare namespace LocalJSX {
     interface MgPopoverAttributes {
         "identifier": string;
         "placement": Placement;
-        "arrowHide": boolean;
         "closeButton": boolean;
         "display": boolean;
         "disabled": boolean;
@@ -5252,6 +5366,7 @@ declare namespace LocalJSX {
         "mg-form": Omit<MgForm, keyof MgFormAttributes> & { [K in keyof MgForm & keyof MgFormAttributes]?: MgForm[K] } & { [K in keyof MgForm & keyof MgFormAttributes as `attr:${K}`]?: MgFormAttributes[K] } & { [K in keyof MgForm & keyof MgFormAttributes as `prop:${K}`]?: MgForm[K] };
         "mg-icon": Omit<MgIcon, keyof MgIconAttributes> & { [K in keyof MgIcon & keyof MgIconAttributes]?: MgIcon[K] } & { [K in keyof MgIcon & keyof MgIconAttributes as `attr:${K}`]?: MgIconAttributes[K] } & { [K in keyof MgIcon & keyof MgIconAttributes as `prop:${K}`]?: MgIcon[K] } & OneOf<"icon", MgIcon["icon"], MgIconAttributes["icon"]>;
         "mg-illustrated-message": Omit<MgIllustratedMessage, keyof MgIllustratedMessageAttributes> & { [K in keyof MgIllustratedMessage & keyof MgIllustratedMessageAttributes]?: MgIllustratedMessage[K] } & { [K in keyof MgIllustratedMessage & keyof MgIllustratedMessageAttributes as `attr:${K}`]?: MgIllustratedMessageAttributes[K] } & { [K in keyof MgIllustratedMessage & keyof MgIllustratedMessageAttributes as `prop:${K}`]?: MgIllustratedMessage[K] };
+        "mg-illustration": Omit<MgIllustration, keyof MgIllustrationAttributes> & { [K in keyof MgIllustration & keyof MgIllustrationAttributes]?: MgIllustration[K] } & { [K in keyof MgIllustration & keyof MgIllustrationAttributes as `attr:${K}`]?: MgIllustrationAttributes[K] } & { [K in keyof MgIllustration & keyof MgIllustrationAttributes as `prop:${K}`]?: MgIllustration[K] } & OneOf<"illustration", MgIllustration["illustration"], MgIllustrationAttributes["illustration"]>;
         "mg-input": Omit<MgInput, keyof MgInputAttributes> & { [K in keyof MgInput & keyof MgInputAttributes]?: MgInput[K] } & { [K in keyof MgInput & keyof MgInputAttributes as `attr:${K}`]?: MgInputAttributes[K] } & { [K in keyof MgInput & keyof MgInputAttributes as `prop:${K}`]?: MgInput[K] } & OneOf<"identifier", MgInput["identifier"], MgInputAttributes["identifier"]> & OneOf<"label", MgInput["label"], MgInputAttributes["label"]>;
         "mg-input-checkbox": Omit<MgInputCheckbox, keyof MgInputCheckboxAttributes> & { [K in keyof MgInputCheckbox & keyof MgInputCheckboxAttributes]?: MgInputCheckbox[K] } & { [K in keyof MgInputCheckbox & keyof MgInputCheckboxAttributes as `attr:${K}`]?: MgInputCheckboxAttributes[K] } & { [K in keyof MgInputCheckbox & keyof MgInputCheckboxAttributes as `prop:${K}`]?: MgInputCheckbox[K] } & OneOf<"identifier", MgInputCheckbox["identifier"], MgInputCheckboxAttributes["identifier"]> & OneOf<"label", MgInputCheckbox["label"], MgInputCheckboxAttributes["label"]>;
         "mg-input-combobox": Omit<MgInputCombobox, keyof MgInputComboboxAttributes> & { [K in keyof MgInputCombobox & keyof MgInputComboboxAttributes]?: MgInputCombobox[K] } & { [K in keyof MgInputCombobox & keyof MgInputComboboxAttributes as `attr:${K}`]?: MgInputComboboxAttributes[K] } & { [K in keyof MgInputCombobox & keyof MgInputComboboxAttributes as `prop:${K}`]?: MgInputCombobox[K] } & OneOf<"itemsLabel", MgInputCombobox["itemsLabel"], MgInputComboboxAttributes["itemsLabel"]> & OneOf<"identifier", MgInputCombobox["identifier"], MgInputComboboxAttributes["identifier"]> & OneOf<"label", MgInputCombobox["label"], MgInputComboboxAttributes["label"]>;
@@ -5302,6 +5417,7 @@ declare module "@stencil/core" {
             "mg-form": LocalJSX.IntrinsicElements["mg-form"] & JSXBase.HTMLAttributes<HTMLMgFormElement>;
             "mg-icon": LocalJSX.IntrinsicElements["mg-icon"] & JSXBase.HTMLAttributes<HTMLMgIconElement>;
             "mg-illustrated-message": LocalJSX.IntrinsicElements["mg-illustrated-message"] & JSXBase.HTMLAttributes<HTMLMgIllustratedMessageElement>;
+            "mg-illustration": LocalJSX.IntrinsicElements["mg-illustration"] & JSXBase.HTMLAttributes<HTMLMgIllustrationElement>;
             "mg-input": LocalJSX.IntrinsicElements["mg-input"] & JSXBase.HTMLAttributes<HTMLMgInputElement>;
             "mg-input-checkbox": LocalJSX.IntrinsicElements["mg-input-checkbox"] & JSXBase.HTMLAttributes<HTMLMgInputCheckboxElement>;
             "mg-input-combobox": LocalJSX.IntrinsicElements["mg-input-combobox"] & JSXBase.HTMLAttributes<HTMLMgInputComboboxElement>;