@mgdis/mg-components 6.3.0 → 6.4.0

package/dist/esm/mg-action-more_36.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-eb0e1053.js';
-import { q as qe, Y as Ye, X as Xe, m as me, t as tt, G as Ge, K as Ke, e as et, H as He, z as ze, f as ft, c as ct, p as pt, d as dt, u as ut, $ as $t, J as Je, Z as Ze, Q as Qe } from './index.es-940821a9.js';
-import { i as initLocales } from './index-f3d3fb70.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-1f32332a.js';
+import { z as ze, J as Je, G as Ge, y as ye, e as et, I as Ie, K as Ke, V as Ve, B as Be, P as Pe, c as ct, a as at, u as ut, $ as $t, d as dt, f as ft, X as Xe, Z as Ze, Q as Qe } from './index.es-a2587b72.js';
+import { i as initLocales } from './index-9bd10f5d.js';
 
 /**
  * Available menu item status values
@@ -73,7 +73,15 @@ const MgActionMore = class {
          ************/
         this.name = 'mg-action-more';
         this.classBase = 'mg-c-action-more';
-        this.mgPopoverIdentifier = qe(this.name);
+        this.mgPopoverIdentifier = ze(this.name);
+        /**
+         * Define button properties
+         */
+        this.button = { variant: 'flat', isIcon: true };
+        /**
+         * Menu expanded state
+         */
+        this.expanded = false;
         /************
          * Methods *
          ***********/
@@ -105,23 +113,18 @@ const MgActionMore = class {
             this.expanded = false;
             customHandler(event);
         };
-        this.items = undefined;
-        this.icon = undefined;
-        this.button = { variant: 'flat', isIcon: true };
-        this.displayChevron = undefined;
-        this.expanded = false;
     }
     validateItems(newValue) {
         if (!isMgActionMoreItems(newValue)) {
-            throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${Je(newValue)}.`);
         }
         else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
-            throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${Je(newValue)}.`);
         }
     }
     validateIcon(newValue) {
         if (newValue && !isMgActionMoreIcon(newValue)) {
-            throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${Je(newValue)}.`);
         }
         else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
             this.icon = { icon: 'ellipsis' };
@@ -129,7 +132,7 @@ const MgActionMore = class {
     }
     validateButton(newValue) {
         if (newValue && !isMgActionMoreButton(newValue)) {
-            throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${Je(newValue)}.`);
         }
     }
     validateDisplayChevron(newValue) {
@@ -163,7 +166,7 @@ const MgActionMore = class {
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
                 } }, h("mg-icon", { icon: "chevron-down" })));
         }
-        return (h(Host, { key: '3653a59754e22bba9e476eeb2a92c663a048491c', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '3115bbd0586f5a301aa17d83cf2cc5ebab7d10ec', class: this.classBase }, h("mg-popover", { key: '1ab5bdf851875423a9af68e3d26c1d545e37aa0d', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: 'b5e25273f75d1f45a02d3fdec9d05573edfee1ad', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: '164320fd014593dbc7167bfc5d04136593351619' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '2be6989ce6ba7a8a830be0cd0b8e323b9178c8f5', slot: "content" }, h("mg-menu", { key: 'aa586ac5fdacea97967d1aac3ecbf77ca9ae41de', direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (h(Host, { key: '2255b4416986c17b4c51162e60f2d69599d730fe', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '06e117e65bd8bbe404478c657cd96709b83e9283', class: this.classBase }, h("mg-popover", { key: '3001fb13f7d6d43c40194698c3f6b081ad7e7ab4', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '7b1031a98bddbe7f1e567c42be7ce595512db2ce', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: '756b408413f748ad8bc32e1d573ab2d7f54a9ce1' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '623b5084381a0ff4e3b8ec06892dcb8d16cb060a', slot: "content" }, h("mg-menu", { key: '34bcf9213d4d076246270daaebbef75ec0f92b07', direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
             var _a, _b;
             return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider" })) : (h("mg-menu-item", { key: item.label, status: item.status || Status$1.VISIBLE, target: item.target, href: item.href,
                 // eslint-disable-next-line react/jsx-no-bind
@@ -196,25 +199,28 @@ const MgBadge = class {
          ************/
         // Classes
         this.classOutline = `mg-c-badge--outline`;
-        this.value = undefined;
-        this.label = undefined;
-        this.variant = variants$4[0];
-        this.outline = undefined;
-        this.classCollection = new Xe(['mg-c-badge']);
+        /**
+         * Define badge variant
+         */
+        this.variant = variants$4[0]; // info
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-badge']);
     }
     validateValue(newValue) {
         if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {
-            throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${Je(newValue)}.`);
         }
     }
     validateLabel(newValue) {
-        if (!me(newValue)) {
-            throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${Ye(newValue)}.`);
+        if (!ye(newValue)) {
+            throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${Je(newValue)}.`);
         }
     }
     validateVariant(newValue, oldValue) {
         if (!variants$4.includes(newValue)) {
-            throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -277,6 +283,38 @@ const MgButton = class {
         this.classDisabled = 'mg-c-button--disabled';
         this.classLoading = 'mg-c-button--loading';
         this.classFullWidth = 'mg-c-button--full-width';
+        /**
+         * Define button variant
+         */
+        this.variant = variants$3[0]; // Primary
+        /**
+         * Define button size
+         */
+        this.size = sizes$2[0]; // medium
+        /**
+         * Set button to full-width
+         */
+        this.fullWidth = false;
+        /**
+         * Define if button is round.
+         * Used for icon button.
+         */
+        this.isIcon = false;
+        /**
+         * Option to set input disable on click, in order to prevent multi-click.
+         * Parent component have to remove the attribute 'disabled' when the process ends.
+         */
+        this.disableOnClick = false;
+        /**
+         * Define if button is loading, default to false.
+         * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
+         * It's required to reset to false when action/promise in parent is done to stop the loading state
+         */
+        this.loading = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-button']);
         /**
          * Trigger actions onClick event
          * @param event - click event
@@ -325,17 +363,6 @@ const MgButton = class {
                 (_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
             }
         };
-        this.variant = variants$3[0];
-        this.label = undefined;
-        this.type = undefined;
-        this.size = sizes$2[0];
-        this.fullWidth = false;
-        this.form = undefined;
-        this.disabled = undefined;
-        this.isIcon = false;
-        this.disableOnClick = false;
-        this.loading = false;
-        this.classCollection = new Xe(['mg-c-button']);
     }
     validateVariant(newValue, oldValue) {
         // validate new value
@@ -345,7 +372,7 @@ const MgButton = class {
                 this.variant = variants$3[0];
                 return;
             }
-            throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -357,7 +384,7 @@ const MgButton = class {
     validateSize(newValue, oldValue) {
         // validate new value
         if (!sizes$2.includes(newValue)) {
-            throw new Error(`<mg-button> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-button> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -418,7 +445,7 @@ const MgButton = class {
         this.watchIsIcon();
         if (this.isIcon) {
             this.classCollection.add(`mg-c-button--icon`);
-            if (!me(this.label)) {
+            if (!ye(this.label)) {
                 throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
             }
         }
@@ -430,7 +457,7 @@ const MgButton = class {
      * Add listners
      */
     componentDidLoad() {
-        tt(() => {
+        et(() => {
             var _a;
             const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
             // submit buttons should trigger form submition;
@@ -476,7 +503,7 @@ const MgCard = class {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b8de627bd3018342b2e33f62e1779de8c53fa61e', class: "mg-c-card" }, h("slot", { key: '210e9b12485a345ab50d4ddb85d091cde58551a8' })));
+        return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
     }
 };
 MgCard.style = MgCardStyle0;
@@ -487,18 +514,19 @@ const MgCharacterLeftStyle0 = mgCharacterLeftCss;
 const MgCharacterLeft = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.identifier = undefined;
+        /**
+         * Sets the characters to count
+         */
         this.characters = '';
-        this.maxlength = undefined;
     }
     watchIdentifier(newValue) {
-        if (newValue !== undefined && !Ge(newValue)) {
-            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (newValue !== undefined && !Ie(newValue)) {
+            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
     }
     validateMaxlength(newValue) {
         if (typeof newValue !== 'number') {
-            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Je(newValue)}.`);
         }
     }
     /*************
@@ -517,7 +545,7 @@ const MgCharacterLeft = class {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: '2b0d8d920df6ec866670736d3ab0c686668befd8', id: this.identifier, "aria-live": "polite" }, h("span", { key: 'd620461fe31ae8845a497b0601be71b3347613db', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: '20b5e5624aaec2cb6b5cb73bc111dff351666521', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+        return (h("span", { key: '38d0a5617735f7f451d8f07f7e4840ccc2539d6b', id: this.identifier, "aria-live": "polite" }, h("span", { key: '382dc20170c5285afdc0c73a76f5797703ffdf9a', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: '8f57b75c08c3da4353f194dc174dff4a3f7e06e4', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -534,19 +562,23 @@ const MgDetails = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.expandedChange = createEvent(this, "expanded-change", 7);
+        /**
+         * Hide summary element
+         */
+        this.hideSummary = false;
+        /**
+         * Define if details are diplayed
+         */
+        this.expanded = false;
         /**
          * Handle details toggle
          */
         this.handleToggle = () => {
             this.expanded = this.details.open;
         };
-        this.toggleClosed = undefined;
-        this.toggleOpened = undefined;
-        this.hideSummary = false;
-        this.expanded = false;
     }
     validateTitles(newValue) {
-        if (!me(newValue)) {
+        if (!ye(newValue)) {
             throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
         }
     }
@@ -568,7 +600,7 @@ const MgDetails = class {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: 'd9bd05ca12f405dd25dda244ec0260691d340223', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2b7893cc0c54d94981d6500776eb22723e1fb5f2' }, h("slot", { key: '714054624ffc1b6b7261edd166bfd16a256e06ce', name: "summary" }), h("span", { key: 'a257d98ed1e8243eae76d259b09bf7fabbfa66e0', class: "mg-c-details__toggle" }, h("mg-icon", { key: '7afafc9c038cbb0d3b984564973776313b9c65c4', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'adaaa789315e3c70073087cce6e7ff2136786a38', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '466d0637025066728de423fc8cc3fa6e49dca70b', class: "mg-c-details__details" }, h("slot", { key: '2f4747fd80523a949f9bc55dab3ebbb5756aad24', name: "details" }))));
+        return (h("details", { key: '88fc8b0e86b70ba906ee85b41c2fcc3cb628a9e3', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '54b17765416f8f48df9dbdf845fd17b4512a6f8f' }, h("slot", { key: 'c6a873a83bb7a83ee056cb0d65d92f41241c4776', name: "summary" }), h("span", { key: '9cd5700ebfdd142c3b23ef603a2ee857c9361259', class: "mg-c-details__toggle" }, h("mg-icon", { key: '1d24c1a83a002f2a9cb8d61324ab7f46a189190f', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'ee3ac65c4dcf801183b786a739f99c00e90192e7', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '8c30ce444d7c83d022ac29ef5a2fcccfd9f534ea', class: "mg-c-details__details" }, h("slot", { key: 'cfefe3169934e4fd5e3c539e8f0482ad6a4e082b', name: "details" }))));
     }
     static get watchers() { return {
         "toggleClosed": ["validateTitles"],
@@ -584,6 +616,12 @@ const MgDividerStyle0 = mgDividerCss;
 const MgDivider = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**************
+         * Decorators *
+         **************/
+        /**
+         * Define component size
+         */
         this.fullWidth = false;
     }
     /**
@@ -591,7 +629,7 @@ const MgDivider = class {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b7d74c11f15700cbffa553bf4d688ad291473087', class: {
+        return (h("div", { key: '60b987cb329c6db14c2cc4a665e7f32b2696a3ee', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full-width': this.fullWidth,
             } }));
@@ -619,6 +657,28 @@ const MgForm = class {
         // Classes
         this.classAllRequired = 'mg-c-form--all-required';
         this.classLabelOnTop = 'mg-c-form--label-on-top';
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = ze('mg-form');
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if form is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if form is disabled
+         */
+        this.disabled = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-form']);
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -704,31 +764,20 @@ const MgForm = class {
                 }
             });
         };
-        this.identifier = qe('mg-form');
-        this.name = this.identifier;
-        this.readonly = false;
-        this.requiredMessage = undefined;
-        this.ariaRole = undefined;
-        this.labelOnTop = undefined;
-        this.disabled = false;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.classCollection = new Xe(['mg-c-form']);
-        this.requiredMessageText = undefined;
     }
     watchIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Ie(newValue)) {
+            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
     }
     validateRequiredMessage(newValue) {
         if (newValue && !requiredMessageStatus.includes(newValue)) {
-            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
     }
     validateAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
     }
     handlelabelOnTop(newValue) {
@@ -804,17 +853,20 @@ const MgForm = class {
      */
     componentDidLoad() {
         // Update mgInputs when mgForm content change
-        new MutationObserver(() => {
-            this.setMgInputs();
-            this.checkValidity();
-        }).observe(this.element, { childList: true });
+        const observerOptions = { childList: true, subtree: true };
+        new MutationObserver((mutations) => {
+            if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
+                this.setMgInputs();
+                this.checkValidity();
+            }
+        }).observe(this.element, observerOptions);
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: 'ecfaff2bb897ce2c48ed352167bb418703a56c98', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '4d4fa2ff3cf4f25ebe0b009ae1995734bfcafd3b', innerHTML: this.requiredMessageText }), h("slot", { key: 'dc0c7acadf6b744335852f847a8336b018e28cb5' }), !this.readonly && !this.disabled && h("slot", { key: 'ede3ace32f6a88067845013fa65e5414cae5fcea', name: "actions" })));
+        return (h("form", { key: 'e61304b43787fba050014fd223f82e36aa76a133', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '4ff8cc35336c0943584b717c6c5717fb517b4301', innerHTML: this.requiredMessageText }), h("slot", { key: '214cbf3473b2bb00534b315e4faae164e07a14a4' }), !this.readonly && !this.disabled && h("slot", { key: 'db314dd5d606da7dc5fce4c8663f4064586b34be', name: "actions" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -849,6 +901,18 @@ const MgIconStyle0 = mgIconCss;
 const MgIcon = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Define icon size
+         */
+        this.size = 'medium';
+        /**
+         * Make the icon spin
+         */
+        this.spin = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-icon']);
         /**
          * Method to set default varianStyle props
          * needeed has stencil doesn't know that props is mutated when updated in prop watcher
@@ -869,16 +933,10 @@ const MgIcon = class {
             this.svg.setAttribute('focusable', 'false');
             this.svg.setAttribute('class', this.classCollection.join());
         };
-        this.icon = undefined;
-        this.size = 'medium';
-        this.variant = undefined;
-        this.variantStyle = undefined;
-        this.spin = false;
-        this.classCollection = new Xe(['mg-c-icon']);
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue))
-            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${Je(newValue)}.`);
         else {
             if (oldValue !== undefined)
                 this.classCollection.delete(`mg-c-icon--${oldValue}`);
@@ -888,7 +946,7 @@ const MgIcon = class {
     }
     validateSize(newValue, oldValue) {
         if (!sizes$1.includes(newValue))
-            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${Je(newValue)}.`);
         else {
             if (oldValue !== undefined)
                 this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
@@ -898,7 +956,7 @@ const MgIcon = class {
     validateVariant(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variants$2.includes(newValue))
-                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${Ye(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${Je(newValue)}.`);
             else {
                 this.setDefaultVariantStyle();
                 if (oldValue !== undefined)
@@ -910,7 +968,7 @@ const MgIcon = class {
     validateVariantStyle(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variantStyles$1.includes(newValue))
-                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${Ye(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${Je(newValue)}.`);
             else {
                 if (oldValue !== undefined)
                     this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
@@ -955,13 +1013,19 @@ const MgIcon = class {
 };
 MgIcon.style = MgIconStyle0;
 
-const mgIllustratedMessageCss = "/*!\n * @prop --mg-c-illustrated-message-spacing-vertical: Defines the vertical padding of the illustrated message. Default value: `--mg-b-size-40`.\n */.mg-c-illustrated-message{display:flex;max-width:calc(60*var(--mg-b-size-8));box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-32) var(--mg-b-size-64);text-align:center}.mg-c-illustrated-message__illustration{max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:var(--mg-b-size-64)}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family) !important;font-size:var(--mg-b-font-size-h2) !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:var(--mg-b-size-16) 0 0}";
+const mgIllustratedMessageCss = "/*!\n * @prop --mg-c-illustrated-message-spacing-vertical: Defines the vertical padding of the illustrated message. Default value: `--mg-b-size-40`.\n */.mg-c-illustrated-message{display:flex;max-width:calc(60*var(--mg-b-size-8));box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-32) var(--mg-b-size-64);text-align:center}.mg-c-illustrated-message__illustration{max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:100%;max-width:100%;height:auto;max-height:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:var(--mg-b-size-64)}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family) !important;font-size:var(--mg-b-font-size-h2) !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:var(--mg-b-size-16) 0 0}";
 const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
 
 const MgIllustratedMessage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Define illustration size
+         */
         this.size = 'medium';
+        /**
+         * Define component orientation
+         */
         this.direction = 'vertical';
     }
     /*************
@@ -986,13 +1050,13 @@ const MgIllustratedMessage = class {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '475cdb177405fc41e5dde86d9a3884de5fb88bef', class: {
+        return (h("div", { key: 'ae59b32d798c888eef5f2b3464160177b7a2e9d8', class: {
                 'mg-c-illustrated-message': true,
                 'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
-            } }, h("div", { key: '0e007f09bcdcd85d50bd16ed37f9f4d399c14e28', class: {
+            } }, h("div", { key: '05d260716090d503dde8e0dddc79db0a5f553f0b', class: {
                 'mg-c-illustrated-message__illustration': true,
                 'mg-c-illustrated-message__illustration--small': this.size === 'small',
-            } }, h("slot", { key: '41190bb4bc5d13cecbf7b847c58af7975ffc0255', name: "illustration" })), h("div", { key: 'c338cba5ecac003b1642800441139e497f3c3769', class: "mg-c-illustrated-message__slots" }, h("div", { key: '804f5fc5a96d87d4e533d64eb80d275377dec0cf', class: "mg-c-illustrated-message__title" }, h("slot", { key: 'c5db8d1c61b0b85bc94905dc4b4bfe3ce44d48d1', name: "title" })), h("div", { key: 'e5be01c4e24a60a039a072946d12275bf46b681d', class: "mg-c-illustrated-message__details" }, h("slot", { key: '76eaf55622ed37c42f40ec832ec48ca6ab66e42c', name: "details" })))));
+            } }, h("slot", { key: '119f517d66d9d4fe1bbc84341fccab9db1070c06', name: "illustration" })), h("div", { key: 'cc00f05411b3d8103e566d01d48a6ab66438027c', class: "mg-c-illustrated-message__slots" }, h("div", { key: '1832b69ce391c8c018bfc3acad75ded56dc0d484', class: "mg-c-illustrated-message__title" }, h("slot", { key: 'd0dfb8c433246571c140797f99f434cb64c67e7e', name: "title" })), h("div", { key: '75b18511e74d1d4d049e698c3fb43ad4f00450c3', class: "mg-c-illustrated-message__details" }, h("slot", { key: '78e11fa31da149666973e03fe707e302d60f8989', name: "details" })))));
     }
     get element() { return getElement(this); }
 };
@@ -1025,31 +1089,45 @@ const MgInput = class {
         this.classHasError = 'mg-c-input--has-error';
         this.classLabelOnTop = 'mg-c-input--label-on-top';
         /**
-         * Get tooltip node
-         * @returns mg-tooltip
+         * Define if label is visible
          */
-        this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
-        this.identifier = undefined;
-        this.label = undefined;
-        this.labelOnTop = undefined;
         this.labelHide = false;
-        this.tooltip = undefined;
+        /**
+         * Define tooltip position
+         */
         this.tooltipPosition = 'input';
+        /**
+         * Define if input is required
+         */
         this.required = false;
-        this.errorMessage = undefined;
-        this.helpText = undefined;
-        this.ariaDescribedbyIDs = undefined;
+        /**
+         * Element is fieldset
+         */
         this.isFieldset = false;
+        /**
+         * Element is readonly
+         */
         this.isReadonly = false;
+        /**
+         * Element is disabled
+         */
         this.isDisabled = false;
+        /**
+         * Element is disabled
+         */
         this.isVerticalList = false;
+        /**
+         * Get tooltip node
+         * @returns mg-tooltip
+         */
+        this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
     }
     watchIdentifier(newValue) {
-        if (!me(newValue)) {
-            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${Ye(newValue)}.`);
+        if (!ye(newValue)) {
+            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${Je(newValue)}.`);
         }
-        else if (!Ge(newValue)) {
-            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        else if (!Ie(newValue)) {
+            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
         else {
             this.helpTextId = `${this.identifier}-help-text`;
@@ -1071,7 +1149,7 @@ const MgInput = class {
     }
     watchTooltipPosition(newValue) {
         if (!tooltipPositions.includes(newValue)) {
-            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
     }
     watchErrorMessage(newValue) {
@@ -1114,7 +1192,10 @@ const MgInput = class {
                 ariaDescribedbyIDs.add(this.helpTextErrorId);
         }
         this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
-            element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
+            if (ariaDescribedbyIDs.size)
+                element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
+            else
+                element.removeAttribute('aria-describedby');
         });
     }
     /**
@@ -1135,8 +1216,8 @@ const MgInput = class {
      */
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
-        if (!me(this.label)) {
-            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${Ye(this.label)}.`);
+        if (!ye(this.label)) {
+            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${Je(this.label)}.`);
         }
         else {
             this.watchAriaDescribedbyIDs();
@@ -1228,7 +1309,7 @@ const MgInput = class {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: '628e189d5e91c6146c2e8ab5b9374b5cc4132786', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '9471070c3810c71fe5335f31012fa9294dbcadde', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'd653ebdb538ba4325b76d92725a8192245b022ab', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '6c9d40fc0ae6b51581659470c14678474885bc0c', class: "mg-c-input__input-container" }, h("div", { key: '5f80ebc33f11151607322133f995374056321453', class: "mg-c-input__input" }, h("slot", { key: 'da67674bb91c4957c850cd50b0196f4aeaa8f4d0' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: '25be9fc701e42a4b2eb0ecc01d22ca0be271c1d9', class: "mg-c-input__help-text" }, h("slot", { key: 'fc6b29fdc35e52d90646cbf1d9f2f3e631371dc7', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '3ad2878abfa52fb5129cf773e907f75fac9a0985', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '1c72d4ab723c8c7805a1dcc8c6554ac24739f080', name: this.slotError }))))));
+        return (h(Host, { key: '2b69235bf675e431e61261d1a4465e216675bbb2', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '7cbe4343e2d6ebbad943b4562c69b8e2f583fe23', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'af2c9482dd4a66c62047edc8fecef17efeeb6537', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: 'b48eaa21ea25c08b3a04c1f0d22c9c59bd535e26', class: "mg-c-input__input-container" }, h("div", { key: '3f61784438dd63b5ccf7fd8cbb50b51ae3ac982e', class: "mg-c-input__input" }, h("slot", { key: '05bed4a07201b7fe65c82886ebf8ac63b004be4e' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'b27e2ae017422b7408780521a1d38f9b094c341c', class: "mg-c-input__help-text" }, h("slot", { key: '3798d38bcbdabfeec3b0e9f97c2074734ffd7149', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '70f4ea8fda4fb884934e3d3c9d34c67eb6db9ab9', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '90c13c82e7b7a9c820bcab5cdad7f09ce95b8512', name: this.slotError }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -1300,6 +1381,55 @@ const MgInputCheckbox = class {
         this.searchStart = 10;
         // popover variables
         this.hasOpenedPopover = false;
+        /**
+         * Define input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Define if inputs are display verticaly
+         */
+        this.inputVerticalList = false;
+        /**
+         * Define if mg-input-checkbox is required
+         */
+        this.required = false;
+        /**
+         * Define if mg-input-checkbox is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge([this.baseClassName, classFieldset]);
+        /**
+         * Formated value to display in list
+         */
+        this.checkboxItems = [];
+        /**
+         * Search value query
+         */
+        this.searchValue = '';
+        /**
+         * Search current page
+         */
+        this.searchResults = [];
+        /**
+         * Select values button text local key
+         */
+        this.selectValuesButtonKey = 'editButton';
         /**
          * Handle input event
          * @param event - input event
@@ -1401,7 +1531,7 @@ const MgInputCheckbox = class {
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => et(item.title).includes(et(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => Ve(item.title).includes(Ve(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -1433,13 +1563,13 @@ const MgInputCheckbox = class {
          * @returns message to display
          */
         this.getSelectValuesButtonMessage = () => {
-            if (this.selectValuesButtonKey === 'editButton' && me(this.editButtonMessage)) {
+            if (this.selectValuesButtonKey === 'editButton' && ye(this.editButtonMessage)) {
                 return this.editButtonMessage;
             }
-            else if (this.selectValuesButtonKey === 'showButton' && me(this.showButtonMessage)) {
+            else if (this.selectValuesButtonKey === 'showButton' && ye(this.showButtonMessage)) {
                 return this.showButtonMessage;
             }
-            else if (this.selectValuesButtonKey === 'selectButton' && me(this.selectButtonMessage)) {
+            else if (this.selectValuesButtonKey === 'selectButton' && ye(this.selectButtonMessage)) {
                 return this.selectButtonMessage;
             }
             else {
@@ -1488,33 +1618,6 @@ const MgInputCheckbox = class {
          * @returns The rendered MgInputCheckboxList component.
          */
         this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid }));
-        this.value = undefined;
-        this.type = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.labelOnTop = undefined;
-        this.labelHide = false;
-        this.inputVerticalList = false;
-        this.required = false;
-        this.readonly = false;
-        this.displaySelectedValues = undefined;
-        this.disabled = false;
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.helpText = undefined;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.editButtonMessage = undefined;
-        this.showButtonMessage = undefined;
-        this.selectButtonMessage = undefined;
-        this.classCollection = new Xe([this.baseClassName, classFieldset]);
-        this.errorMessage = undefined;
-        this.checkboxItems = [];
-        this.displaySearchInput = undefined;
-        this.searchValue = '';
-        this.searchResults = [];
-        this.selectValuesButtonKey = 'editButton';
     }
     validateValue(newValue) {
         if (isCheckboxItems(newValue)) {
@@ -1522,12 +1625,12 @@ const MgInputCheckbox = class {
             this.valueChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${Je(newValue)}.`);
         }
     }
     validateType(newValue) {
         if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
-            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${Je(newValue)}.`);
         }
         else if (newValue === undefined) {
             this.mode = 'auto';
@@ -1599,10 +1702,21 @@ const MgInputCheckbox = class {
     /**
      * Display input error if it exists.
      */
-    async displayError() {
-        this.checkValidity();
-        this.setErrorMessage();
-        this.hasDisplayedError = this.invalid;
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
     }
     /**
      * Set an error and display a custom error message.
@@ -1616,7 +1730,7 @@ const MgInputCheckbox = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!ye(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -1753,7 +1867,7 @@ const MgInputCheckbox = class {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '5a6c84d1f533159645c5aec09bb6e82a7cd30cc7', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: '08c3ca7708ff929696a83a8d7c4fe627e7651963', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -1779,6 +1893,18 @@ const MgInputCheckboxPaginated = class {
          * Constantes *
          *************/
         this.offset = 10;
+        /**
+         * Current page
+         */
+        this.currentPage = 1;
+        /**
+         * Define checkboxes to paginate
+         */
+        this.checkboxes = [];
+        /**
+         * Is checked items values expanded
+         */
+        this.expanded = true;
         /***********
          * Methods *
          ***********/
@@ -1814,14 +1940,6 @@ const MgInputCheckboxPaginated = class {
         this.handleCurrentPageChange = (event) => {
             this.currentPage = Number(event.detail);
         };
-        this.readonly = undefined;
-        this.disabled = undefined;
-        this.name = undefined;
-        this.invalid = undefined;
-        this.currentPage = 1;
-        this.checkboxes = [];
-        this.messages = undefined;
-        this.expanded = true;
     }
     watchCheckboxes(newValue, oldValue) {
         const pageCountNewValue = this.getPageCount(newValue);
@@ -1861,10 +1979,10 @@ const MgInputCheckboxPaginated = class {
      * @returns HTML Element
      */
     render() {
-        const getText = (checkboxes) => (h("em", { key: '05d577bded8e2602d1dedf9a36f695904d491242', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
+        const getText = (checkboxes) => (h("em", { key: '8f20e5be81047106e04cd101385b9c6555c0c38d', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
         const [from, to] = this.getFromToIndexes();
         const itemsContainerId = `items-${this.sectionKind}-container`;
-        return (h(Host, { key: '49b95a0882cc475aab4a810ccd8f292d83b59a9a', hidden: this.checkboxes.length < 1 }, h("div", { key: '2db5103f9784add1effb7a5dcafa8f8196601d14', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { key: '946506778c280928acd6e3e7256c828b7a7598b5', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: 'b71a4e10a764bfaf438430dd44b6f82785d0f5d4', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '06af47b1e9f0a6d0a11741dae03f75ce71e32666', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, h(MgInputCheckboxList, { key: 'aba29baa719288ad0b172326c669d146c803a4e4', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
+        return (h(Host, { key: '39d0fc41abe4b537b240bdc14e80fc42cb41033d', hidden: this.checkboxes.length < 1 }, h("div", { key: 'fec430cfffc005a217694f9a4ba68412a6a08c7b', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { key: 'e1b38d93875962af3024ac27e1892c040dbf9bdb', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: 'f593b3d5ca5bd8b3080253842a5c513709f16e3a', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '74c18984938188e2861cd79b56d919a94f32064f', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, h(MgInputCheckboxList, { key: '15c2f6fe98d772ce5b0a0d4ec448986e91592107', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
     }
     static get watchers() { return {
         "checkboxes": ["watchCheckboxes"]
@@ -1881,12 +1999,46 @@ const MgInputDate = class {
         this.inputValid = createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Define if input is required
+         */
+        this.required = false;
+        /**
+         * Define if input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define input maximum date
+         * format: yyyy-mm-dd
+         */
+        this.max = '9999-12-31';
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-input--date']);
         /**
          * Method to validate date pattern string
          * @param value - value to test
          * @returns truthy when value match the pattern
          */
-        this.isValidPattern = (value) => me(value) && He.test(value);
+        this.isValidPattern = (value) => ye(value) && Be.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -1894,10 +2046,10 @@ const MgInputDate = class {
          */
         this.formatHelpText = (helpText) => {
             const defaultHelpTextVariable = '{defaultHelpText}';
-            let text = me(helpText) ? helpText : this.messages.input.date.helpText;
+            let text = ye(helpText) ? helpText : this.messages.input.date.helpText;
             if (text.includes(defaultHelpTextVariable))
                 text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
-            return text.replace('{pattern}', this.renderPattern()).replace('{date}', ze(ft(new Date('2023-12-24')), this.systemLocale));
+            return text.replace('{pattern}', this.renderPattern()).replace('{date}', Pe(ct(new Date('2023-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -1928,7 +2080,7 @@ const MgInputDate = class {
             // when we reset the field we need to test a blank value.
             if (['Delete', 'Backspace'].includes(event.key)) {
                 event.preventDefault();
-                this.value = '';
+                this.value = null;
                 this.checkValidity();
                 if (this.hasDisplayedError) {
                     this.setErrorMessage();
@@ -1939,7 +2091,7 @@ const MgInputDate = class {
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (['', undefined].includes(this.value) || this.isValidPattern(this.value))));
+            this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (this.value === null || this.isValidPattern(this.value))));
         };
         /**
          * get input error code
@@ -1948,14 +2100,14 @@ const MgInputDate = class {
         this.getInputError = () => {
             var _a;
             let inputError = null;
+            // bad input or pattern
+            if (this.input.validity.badInput || (this.value && !this.isValidPattern(this.value))) {
+                inputError = 'badInput';
+            }
             // required
-            if (this.input.validity.valueMissing) {
+            else if (this.input.validity.valueMissing) {
                 inputError = 'required';
             }
-            // pattern
-            else if (this.value && !this.isValidPattern(this.value)) {
-                inputError = 'badInput';
-            }
             // min & max
             else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== '9999-12-31') {
                 inputError = 'minMax';
@@ -1989,8 +2141,8 @@ const MgInputDate = class {
                 // min, max & minMax
                 else if (['min', 'max', 'minMax'].includes(inputError)) {
                     this.errorMessage = this.messages.errors.date[inputError]
-                        .replace('{min}', ze(this.min, this.systemLocale))
-                        .replace('{max}', ze(this.max, this.systemLocale));
+                        .replace('{min}', Pe(this.min, this.systemLocale))
+                        .replace('{max}', Pe(this.max, this.systemLocale));
                 }
                 // wrong date format
                 // element.validity.badInput is default error message
@@ -2004,40 +2156,26 @@ const MgInputDate = class {
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = ct(this.systemLocale);
+            let patternLocal = at(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
             return `<span aria-hidden="true">${patternLocal}</span><span class="mg-u-visually-hidden">${[...patternLocal].join(' ')}</span>`;
         };
-        this.value = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.labelOnTop = undefined;
-        this.labelHide = false;
-        this.required = false;
-        this.readonly = false;
-        this.min = undefined;
-        this.max = '9999-12-31';
-        this.disabled = false;
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.helpText = undefined;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.classCollection = new Xe(['mg-c-input--date']);
-        this.errorMessage = undefined;
     }
     validateValue(newValue) {
         // When the input is not fully completed or has been cleared, the value becomes an empty string.
-        if (newValue === '')
-            newValue = null;
-        // check value validity
-        if (newValue && !me(newValue)) {
-            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${Ye(newValue)}.`);
+        if (['', undefined].includes(newValue)) {
+            // need to force value update to `null` to prevent extra render
+            // - `''` is not a valide value
+            // - `undefined` is not allowed in CustomEvent['detail']
+            this.value = null;
         }
-        else if ([null, undefined].includes(newValue) || this.isValidPattern(newValue)) {
+        else if (newValue && !ye(newValue)) {
+            // check value validity
+            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${Je(newValue)}.`);
+        }
+        else if (newValue === null || this.isValidPattern(newValue)) {
             this.valueChange.emit(newValue);
         }
         else {
@@ -2052,7 +2190,7 @@ const MgInputDate = class {
     }
     validateMinMax(newValue) {
         if (newValue && !this.isValidPattern(newValue)) {
-            throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${Je(newValue)}.`);
         }
     }
     handleValidityChange(newValue, _oldValue, prop) {
@@ -2074,10 +2212,21 @@ const MgInputDate = class {
     /**
      * Display input error if it exists.
      */
-    async displayError() {
-        this.checkValidity();
-        this.setErrorMessage();
-        this.hasDisplayedError = this.invalid;
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
     }
     /**
      * Set an error and display a custom error message.
@@ -2091,7 +2240,7 @@ const MgInputDate = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!ye(errorMessage)) {
             throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -2105,7 +2254,7 @@ const MgInputDate = class {
      */
     async reset() {
         if (!this.readonly) {
-            this.value = '';
+            this.value = null;
             this.checkValidity();
             this.invalid = false;
             this.errorMessage = undefined;
@@ -2157,7 +2306,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '33ffeaf0b7b07cc65081891709a73a44c9454092', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && ['', undefined].includes(this.value) ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, ze(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '09d07883b178cd1196c2be110c8fcfdde8fef01d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, Pe(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));
@@ -2190,6 +2339,62 @@ const MgInputNumeric = class {
         this.inputValid = createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Define if input is required
+         */
+        this.required = false;
+        /**
+         * Define if input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Define numeric type
+         */
+        this.type = 'decimal';
+        /**
+         * Set local formatting.
+         * Numbers are formatted based on the locale.
+         */
+        this.format = 'number';
+        /**
+         * Define currency
+         */
+        this.currency = 'EUR';
+        /**
+         * Define unit display format ('short', 'long', 'narrow')
+         */
+        this.unitDisplay = 'short';
+        /**
+         * Override integer length
+         * integer is the number before the decimal point
+         */
+        this.integerLength = 13;
+        /**
+         * Override decimal length
+         * decimal is the number after the decimal point
+         */
+        this.decimalLength = 2;
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-input--numeric']);
         /**
          * Handle input event
          */
@@ -2227,6 +2432,12 @@ const MgInputNumeric = class {
         this.checkValidity = () => {
             this.setValidity(this.readonly || this.disabled || this.getInputError() === null);
         };
+        /**
+         * Format min/max value for error message
+         * @param value - value to format
+         * @returns formatted value according to locale
+         */
+        this.formatErrorValue = (value) => ut(value, this.locale, !Number.isInteger(value) && this.type === 'decimal' ? this.decimalLength : 0);
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -2243,8 +2454,8 @@ const MgInputNumeric = class {
                     this.errorMessage = this.messages.errors[inputError];
                 }
                 else {
-                    const formattedMin = this.formatValue(this.min);
-                    const formattedMax = this.formatValue(this.max);
+                    const formattedMin = this.formatErrorValue(this.min);
+                    const formattedMax = this.formatErrorValue(this.max);
                     this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
                 }
             }
@@ -2283,13 +2494,13 @@ const MgInputNumeric = class {
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return $t(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return ut(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return ut(value, this.locale, this.currency);
+                    return ft(value, this.locale, this.currency);
                 case 'percent':
                     return dt(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'unit':
-                    return pt(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return $t(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'none':
                     return value.toString();
             }
@@ -2316,34 +2527,6 @@ const MgInputNumeric = class {
         this.renderReadonly = () => {
             return this.slotContent !== undefined ? (h("span", { class: "mg-c-input__readonly-value" }, h("b", null, this.readonlyValue), this.slotContent)) : (h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue));
         };
-        this.value = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.labelOnTop = undefined;
-        this.labelHide = false;
-        this.placeholder = undefined;
-        this.required = false;
-        this.readonly = false;
-        this.max = undefined;
-        this.min = undefined;
-        this.disabled = false;
-        this.mgWidth = undefined;
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.helpText = undefined;
-        this.type = 'decimal';
-        this.format = 'number';
-        this.currency = 'EUR';
-        this.unit = undefined;
-        this.unitDisplay = 'short';
-        this.integerLength = 13;
-        this.decimalLength = 2;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.classCollection = new Xe(['mg-c-input--numeric']);
-        this.errorMessage = undefined;
-        this.hasFocus = undefined;
     }
     validateValue(newValue) {
         // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
@@ -2396,31 +2579,42 @@ const MgInputNumeric = class {
     }
     validateType(newValue) {
         if (!types.includes(newValue)) {
-            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
     }
     watchFormat(newValue) {
         if (!formats.includes(newValue)) {
-            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
     }
     validateIntegerLength(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${Je(newValue)}.`);
         }
     }
     validateDecimalLength(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${Je(newValue)}.`);
         }
     }
     /**
      * Display input error if it exists.
      */
-    async displayError() {
-        this.checkValidity();
-        this.setErrorMessage();
-        this.hasDisplayedError = this.invalid;
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
     }
     /**
      * Set an error and display a custom error message.
@@ -2434,7 +2628,7 @@ const MgInputNumeric = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!ye(errorMessage)) {
             throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -2540,7 +2734,7 @@ const MgInputNumeric = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '6d34c2b7e9762cdefc5de3814ff4afd95fa4a6a6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: 'b3f1b0e8a78d2f61146f052db1636d98e89271d1', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
@@ -2577,6 +2771,43 @@ const MgInputPassword = class {
         this.inputValid = createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Define if input is required
+         */
+        this.required = false;
+        /**
+         * Define if input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define input width
+         */
+        this.mgWidth = 'full';
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-input--password']);
+        /**
+         * Indicates if password is displayed or not
+         */
+        this.displayPassword = false;
         /**
          * Handle input event
          */
@@ -2626,26 +2857,6 @@ const MgInputPassword = class {
                 }
             }
         };
-        this.value = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.labelOnTop = undefined;
-        this.labelHide = false;
-        this.placeholder = undefined;
-        this.maxlength = undefined;
-        this.required = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.mgWidth = 'full';
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.helpText = undefined;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.classCollection = new Xe(['mg-c-input--password']);
-        this.errorMessage = undefined;
-        this.displayPassword = false;
     }
     handleValue(newValue) {
         this.valueChange.emit(newValue);
@@ -2684,10 +2895,21 @@ const MgInputPassword = class {
     /**
      * Display input error if it exists.
      */
-    async displayError() {
-        this.checkValidity();
-        this.setErrorMessage();
-        this.hasDisplayedError = this.invalid;
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
     }
     /**
      * Set an error and display a custom error message.
@@ -2701,7 +2923,7 @@ const MgInputPassword = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!ye(errorMessage)) {
             throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -2758,7 +2980,7 @@ const MgInputPassword = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'af313cb20a94a9c8dcf2b944c31b7ea36b2d3feb', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '3c494aa50f437d261e7d006f395c5b7c3cbead5d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
@@ -2797,6 +3019,43 @@ const MgInputRadio = class {
         this.classVerticalList = 'mg-c-input--vertical-list';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is displayed on top
+         */
+        this.labelOnTop = false;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Define if inputs are display verticaly
+         */
+        this.inputVerticalList = false;
+        /**
+         * Define if input is required
+         */
+        this.required = false;
+        /**
+         * Define if input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-input--radio', classFieldset]);
         /**
          * Handle input event
          * @param event - input event
@@ -2843,31 +3102,11 @@ const MgInputRadio = class {
          * @returns element
          */
         this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
-        this.value = undefined;
-        this.items = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.labelOnTop = false;
-        this.labelHide = false;
-        this.inputVerticalList = false;
-        this.required = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.helpText = undefined;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.classCollection = new Xe(['mg-c-input--radio', classFieldset]);
-        this.errorMessage = undefined;
-        this.options = undefined;
-        this.readonlyValue = undefined;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     watchValue(newValue) {
         var _a;
-        if (Je(this.items) && typeof newValue === 'string') {
+        if (Xe(this.items) && typeof newValue === 'string') {
             this.readonlyValue = newValue;
         }
         else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
@@ -2881,10 +3120,10 @@ const MgInputRadio = class {
     validateItems(newValue) {
         // Validate if items have required min length
         if (typeof newValue === 'object' && newValue.length < 2) {
-            throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${Je(newValue)}.`);
         }
         // String array
-        else if (Je(newValue)) {
+        else if (Xe(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
         }
         // Object array
@@ -2892,7 +3131,7 @@ const MgInputRadio = class {
             this.options = newValue;
         }
         else {
-            throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${Je(newValue)}.`);
         }
     }
     watchInputVerticalList(newValue) {
@@ -2926,10 +3165,21 @@ const MgInputRadio = class {
     /**
      * Display input error if it exists.
      */
-    async displayError() {
-        this.checkValidity();
-        this.setErrorMessage();
-        this.hasDisplayedError = this.invalid;
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
     }
     /**
      * Set an error and display a custom error message.
@@ -2943,7 +3193,7 @@ const MgInputRadio = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!ye(errorMessage)) {
             throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -3003,7 +3253,7 @@ const MgInputRadio = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '1f27ea2672375c28b2b7afca66ebd09f8dfc2354', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (h("mg-input", { key: 'df8daa3c340c0410d092029685e195256a523b31', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index] = el;
             } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
@@ -3072,6 +3322,43 @@ const MgInputSelect = class {
         this.inputValid = createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Option to remove placeholder
+         */
+        this.placeholderHide = false;
+        /**
+         * Option to disable placeholder
+         */
+        this.placeholderDisabled = false;
+        /**
+         * Define if input is required
+         */
+        this.required = false;
+        /**
+         * Define if input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-input--select']);
         /**
          * Handle input event
          */
@@ -3101,7 +3388,7 @@ const MgInputSelect = class {
             if (this.input.value === '') {
                 this.setValue(null);
             }
-            else if (Je(this.items) && this.items.includes(this.input.value)) {
+            else if (Xe(this.items) && this.items.includes(this.input.value)) {
                 this.setValue(this.input.value);
             }
             else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
@@ -3156,34 +3443,10 @@ const MgInputSelect = class {
          * @returns render option
          */
         this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
-        this.value = undefined;
-        this.items = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.labelOnTop = undefined;
-        this.labelHide = false;
-        this.placeholder = undefined;
-        this.placeholderHide = false;
-        this.placeholderDisabled = false;
-        this.required = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.mgWidth = undefined;
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.helpText = undefined;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.classCollection = new Xe(['mg-c-input--select']);
-        this.errorMessage = undefined;
-        this.options = undefined;
-        this.valueExist = undefined;
-        this.readonlyValue = undefined;
     }
     validateValue(newValue) {
         var _a, _b;
-        if (Je(this.items) && typeof newValue === 'string') {
+        if (Xe(this.items) && typeof newValue === 'string') {
             this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
         }
         else if (allItemsAreOptions(this.items)) {
@@ -3200,7 +3463,7 @@ const MgInputSelect = class {
             this.options = [];
         }
         // String array
-        else if (Je(newValue)) {
+        else if (Xe(newValue)) {
             if (typeof this.value === 'string')
                 this.valueExist = newValue.includes(this.value);
             this.options = newValue.map(item => ({ title: item, value: item }));
@@ -3218,7 +3481,7 @@ const MgInputSelect = class {
             }
         }
         else {
-            throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${Je(newValue)}.`);
         }
     }
     watchReadonly(newValue) {
@@ -3255,10 +3518,21 @@ const MgInputSelect = class {
     /**
      * Display input error if it exists.
      */
-    async displayError() {
-        this.checkValidity();
-        this.setErrorMessage();
-        this.hasDisplayedError = this.invalid;
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
     }
     /**
      * Set an error and display a custom error message.
@@ -3272,7 +3546,7 @@ const MgInputSelect = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!ye(errorMessage)) {
             throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -3336,7 +3610,7 @@ const MgInputSelect = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '23ce3f91b4a5abdbd9b9731a895ca38d37b8c0a5', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '11584b2acab392278a9c26cb9ba49ae1e638a877', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -3368,7 +3642,7 @@ const isOption$1 = (option) => typeof option === 'object' && typeof option.title
  * @param options - Datalist options to check.
  * @returns True if datalist is well structured.
  */
-const isDatalistOptions = (options) => Je(options) || (Array.isArray(options) && options.every(isOption$1));
+const isDatalistOptions = (options) => Xe(options) || (Array.isArray(options) && options.every(isOption$1));
 const MgInputText = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -3385,6 +3659,51 @@ const MgInputText = class {
         this.classIsAppendInputSlotContent = 'mg-c-input--is-append-input-slot-content';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Input type
+         */
+        this.type = 'text';
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Input max length
+         */
+        this.maxlength = 400;
+        /**
+         * Define if input is required
+         */
+        this.required = false;
+        /**
+         * Define if input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define input width
+         */
+        this.mgWidth = 'full';
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Define if component should display character left
+         */
+        this.characterLeftHide = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-input--text']);
         /**
          * Handle input event
          */
@@ -3400,7 +3719,7 @@ const MgInputText = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new Xe(this.classCollection.classes);
+            this.classCollection = new Ge(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3408,7 +3727,7 @@ const MgInputText = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new Xe(this.classCollection.classes);
+            this.classCollection = new Ge(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -3473,31 +3792,6 @@ const MgInputText = class {
         this.renderReadonly = () => {
             return this.slotContent !== undefined ? (h("span", { class: "mg-c-input__readonly-value" }, h("b", null, this.value), this.slotContent)) : (h("b", { class: "mg-c-input__readonly-value" }, this.value));
         };
-        this.value = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.type = 'text';
-        this.icon = undefined;
-        this.labelOnTop = undefined;
-        this.labelHide = false;
-        this.placeholder = undefined;
-        this.datalistoptions = undefined;
-        this.maxlength = 400;
-        this.required = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.mgWidth = 'full';
-        this.pattern = undefined;
-        this.patternErrorMessage = undefined;
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.characterLeftHide = false;
-        this.helpText = undefined;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.classCollection = new Xe(['mg-c-input--text']);
-        this.errorMessage = undefined;
     }
     handleValue(newValue) {
         var _a, _b;
@@ -3518,7 +3812,7 @@ const MgInputText = class {
     }
     validateDatalistoptions(newValue) {
         if (Boolean(newValue) && !isDatalistOptions(newValue)) {
-            throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${Je(newValue)}.`);
         }
     }
     watchReadonly(newValue) {
@@ -3553,8 +3847,8 @@ const MgInputText = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(me(this.pattern) && me(this.patternErrorMessage))) {
-            throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${Ye(this.pattern)}'" and "patternErrorMessage='${Ye(this.patternErrorMessage)}'".`);
+        if (newValue !== undefined && !(ye(this.pattern) && ye(this.patternErrorMessage))) {
+            throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${Je(this.pattern)}'" and "patternErrorMessage='${Je(this.patternErrorMessage)}'".`);
         }
     }
     /**
@@ -3566,10 +3860,21 @@ const MgInputText = class {
     /**
      * Display input error if it exists.
      */
-    async displayError() {
-        this.checkValidity();
-        this.setErrorMessage();
-        this.hasDisplayedError = this.invalid;
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
     }
     /**
      * Set an error and display a custom error message.
@@ -3583,7 +3888,7 @@ const MgInputText = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!ye(errorMessage)) {
             throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -3648,7 +3953,7 @@ const MgInputText = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '6ed4f9339354571851d415755b989824f623d62d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '11cdf9ff3675c7e130a46bce025b7c8b5f4e0d02', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.value && this.renderReadonly()
             : [
                 h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
@@ -3693,6 +3998,55 @@ const MgInputTextarea = class {
         this.classDisplayCharacterLeft = 'mg-c-input--display-character-left';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Input max length
+         */
+        this.maxlength = 4000;
+        /**
+         * Define if input is required
+         */
+        this.required = false;
+        /**
+         * Define if input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define input width
+         */
+        this.mgWidth = 'full';
+        /**
+         * Define the number of visible text lines for the control
+         */
+        this.rows = 3;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Define if component should display character left
+         */
+        this.characterLeftHide = false;
+        /**
+         * Define if input is resizable
+         */
+        this.resizable = 'none';
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-input--textarea']);
         /**
          * Handle input event
          */
@@ -3708,7 +4062,7 @@ const MgInputTextarea = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new Xe(this.classCollection.classes);
+            this.classCollection = new Ge(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3716,7 +4070,7 @@ const MgInputTextarea = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new Xe(this.classCollection.classes);
+            this.classCollection = new Ge(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -3757,30 +4111,6 @@ const MgInputTextarea = class {
                 }
             }
         };
-        this.value = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.labelOnTop = undefined;
-        this.labelHide = false;
-        this.placeholder = undefined;
-        this.maxlength = 4000;
-        this.required = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.mgWidth = 'full';
-        this.pattern = undefined;
-        this.patternErrorMessage = undefined;
-        this.rows = 3;
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.characterLeftHide = false;
-        this.helpText = undefined;
-        this.valid = undefined;
-        this.invalid = undefined;
-        this.resizable = 'none';
-        this.classCollection = new Xe(['mg-c-input--textarea']);
-        this.errorMessage = undefined;
     }
     handleValue(newValue) {
         this.checkValidity();
@@ -3818,8 +4148,8 @@ const MgInputTextarea = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(me(this.pattern) && me(this.patternErrorMessage))) {
-            throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${Ye(this.pattern)}'" and "patternErrorMessage='${Ye(this.patternErrorMessage)}'".`);
+        if (newValue !== undefined && !(ye(this.pattern) && ye(this.patternErrorMessage))) {
+            throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${Je(this.pattern)}'" and "patternErrorMessage='${Je(this.patternErrorMessage)}'".`);
         }
     }
     validatecharacterLeftHide(newValue) {
@@ -3833,10 +4163,21 @@ const MgInputTextarea = class {
     /**
      * Display input error if it exists.
      */
-    async displayError() {
-        this.checkValidity();
-        this.setErrorMessage();
-        this.hasDisplayedError = this.invalid;
+    displayError() {
+        // Use `Promise` as requested for stencil method
+        // Use `requestAnimationFrame` to ensure:
+        // - DOM is fully updated before validation
+        // - Async operations are completed
+        // - No timing issues with Stencil's render cycle
+        // - Keep everything in sync both inside and outside the component
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                this.checkValidity();
+                this.setErrorMessage();
+                this.hasDisplayedError = this.invalid;
+                resolve();
+            });
+        });
     }
     /**
      * Set an error and display a custom error message.
@@ -3850,7 +4191,7 @@ const MgInputTextarea = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!ye(errorMessage)) {
             throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -3912,7 +4253,7 @@ const MgInputTextarea = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '311c9e0b36a6373aff8e3ca666dd4af93c2c1137', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
+        return (h("mg-input", { key: 'a7c6657511d21d8df9e11f7fb1bf3d2d42a01fa0', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
@@ -3943,18 +4284,21 @@ const MgInputTitleStyle0 = mgInputTitleCss;
 const MgInputTitle = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.identifier = undefined;
-        this.required = undefined;
-        this.readonly = undefined;
+        /**
+         * Switch from label to fieldset sementic
+         */
         this.isLegend = false;
+        /**
+         * Component parent tagname
+         */
         this.tagName = 'label';
     }
     validateIdentifier(newValue) {
-        if (!me(newValue)) {
+        if (!ye(newValue)) {
             throw new Error('<mg-input-title> prop "identifier" is required.');
         }
-        else if (!Ge(newValue)) {
-            console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        else if (!Ie(newValue)) {
+            console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
     }
     validateIsLegend(newValue) {
@@ -3977,7 +4321,7 @@ const MgInputTitle = class {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a &nbsp;
-        return (h(TagName, { key: '2185a08a69a1b749c7e36d430b83079cbce131de', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: 'eb7409f94e137a2dacd83fa7df27c6b2635bf660' }), this.required && !this.readonly && (h("span", { key: '6910dd3c0d87ea94ab3c07371e5ee55b212d9342', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: '45e9d38af05410888be0fc36e04d4641a41f367b', class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: 'f8f8baaeb87e7c2cc77e71781f4d33ea5a63f760', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '7f6c0f451dfe789d924e9f608813e03bc72ad88a' }), this.required && !this.readonly && (h("span", { key: 'a78c5191995399e3e2ad346fec8546277581ca9d', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: 'ae8df5f13d54a1b8419d0d01048ff91dda601ab6', class: "mg-u-is-asterisk" }, "*")))));
     }
     static get watchers() { return {
         "identifier": ["validateIdentifier"],
@@ -4007,6 +4351,43 @@ const MgInputToggle = class {
         this.classIsActive = 'mg-c-input--toggle-is-active';
         this.classOnOff = 'mg-c-input--toggle-on-off';
         this.classIcon = 'mg-c-input--toggle-icon';
+        /**
+         * Input name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if label is visible
+         */
+        this.labelHide = false;
+        /**
+         * Define if toggle have on/off style
+         */
+        this.isOnOff = false;
+        /**
+         * Define if toggle display icon
+         */
+        this.isIcon = false;
+        /**
+         * Define if input is readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Define tooltip position
+         */
+        this.tooltipPosition = 'input';
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-input--toggle']);
+        /**
+         * Checked internal value
+         */
+        this.checked = false;
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -4053,25 +4434,6 @@ const MgInputToggle = class {
                 return null;
             }
         };
-        this.value = undefined;
-        this.items = undefined;
-        this.identifier = undefined;
-        this.name = this.identifier;
-        this.label = undefined;
-        this.labelOnTop = undefined;
-        this.labelHide = false;
-        this.isOnOff = false;
-        this.isIcon = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.tooltip = undefined;
-        this.tooltipPosition = 'input';
-        this.helpText = undefined;
-        this.classCollection = new Xe(['mg-c-input--toggle']);
-        this.options = undefined;
-        this.errorMessage = undefined;
-        this.valid = undefined;
-        this.checked = false;
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handleValue(newValue) {
@@ -4082,10 +4444,10 @@ const MgInputToggle = class {
     }
     validateItems(newValue) {
         if (typeof newValue === 'object' && this.items.length !== 2) {
-            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${Je(newValue)}.`);
         }
         // String array
-        else if (Je(newValue)) {
+        else if (Xe(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -4093,7 +4455,7 @@ const MgInputToggle = class {
             this.options = newValue;
         }
         else {
-            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${Je(newValue)}.`);
         }
     }
     watchIsOnOff(newValue) {
@@ -4141,7 +4503,7 @@ const MgInputToggle = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!me(errorMessage)) {
+        else if (!ye(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -4208,7 +4570,7 @@ const MgInputToggle = class {
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: 'b47ba6e093e47f8405e12744576f2098943e5fbe', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
+        return (h("mg-input", { key: '769507fe4a474312d399cc356682221b5d8f3267', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4224,19 +4586,13 @@ const MgInputToggle = class {
 MgInputToggle.style = MgInputToggleStyle0;
 
 /**
- * MgItemMore type guard
- * @param element - element to control type
- * @returns truthy if element is mg-item-more
+ *
  */
-const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
-const OverflowBehaviorElements = {
-    BASE_INDEX: 'data-overflow-base-index',
-    PROXY_INDEX: 'data-overflow-proxy-index',
-};
 class OverflowBehavior {
-    constructor(element, render) {
-        this.element = element;
-        this.render = render;
+    constructor(parentElement, itemMoreElement, itemMoreContainerElement) {
+        this.parentElement = parentElement;
+        this.itemMoreElement = itemMoreElement;
+        this.itemMoreContainerElement = itemMoreContainerElement;
         /**********
          * Public *
          **********/
@@ -4250,116 +4606,59 @@ class OverflowBehavior {
          * Internal *
          ************/
         /**
-         * run overflow behavior
-         * @param width - width of the container. Optional.
-         */
-        this.run = (width) => {
-            if (this._moreElement === undefined) {
-                // set moreElement
-                this._moreElement = this.render();
-                // set children
-                this._baseChildren = this.getInteractiveItems(this.element);
-                if (isMgItemMore(this._moreElement)) {
-                    this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));
-                }
-                // update children
-                this._baseChildren.forEach((child, index) => {
-                    child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);
-                    // set moreElement children
-                    this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
-                });
-            }
-            if (width !== undefined)
-                this.updateDisplayedItems(width);
-        };
-        /**
-         * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-         * @param element - element to parse
-         * @returns children
-         */
-        this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
-        /**
-         * Update displayed items in container from a given available space
-         * @param availableWidth - available width in container to display child items
-         */
-        this.updateDisplayedItems = (availableWidth) => {
-            this.restoreItems();
-            const acc = { accWidth: 0, previousItem: null };
-            [...this._baseChildren, this._moreElement].forEach((child) => {
-                acc.accWidth += child.offsetWidth;
-                const hasPreviuosItem = acc.previousItem !== null;
-                const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.hasAttribute('hidden');
-                // if previous item is hidden AND is NOT more element we hide current
-                // OR if item has an overflow we hide current
-                // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
-                // ELSE current is a display item
-                this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
-                // update previous item with current item
-                acc.previousItem = child;
-            });
-        };
+         * Utility method to know if element is HTMLMgItemMoreElement
+         * @param element - element to match with 'MORE' element
+         * @returns truthy if element is the 'MORE' element
+         */
+        this.isMoreElement = (element) => element === this.itemMoreElement;
         /**
          * Utility method to know if item overflow partialy or totaly in the container
          * @param cumulateWidth - previous sibling elements cumulate width + item width
          * @param item - item HTML element
-         * @param availableWidth - container available width
          * @returns truthy if element is overflow
          */
-        this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
-            if (item.previousElementSibling === null || this.isMoreElement(item))
-                return false;
-            else if (!this.isMoreElement(item.nextElementSibling))
-                return cumulateWidth + this._moreElement.offsetWidth > availableWidth;
-            else
-                return cumulateWidth > availableWidth;
-        };
-        /**
-         * Utility method to know if a given element is the 'MORE' element
-         * @param element - element to match with 'MORE' element
-         * @returns truthy if element is the 'MORE' element
-         */
-        this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
-        /**
-         * Toggle display item element
-         * @param item - item to control
-         * @param isHidden - is item hidden
-         */
-        this.toggleItem = (item, isHidden) => {
-            const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
-            if (this.isMoreElement(item))
-                this.toggleElement(this._moreElement, isHidden);
-            else if (mgActionMenuindex >= 0) {
-                this.toggleElement(item, isHidden);
-                this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);
+        this.isOverflowElement = (cumulateWidth, item) => {
+            const displayMgItemMore = this.itemMoreContainerElement.children.length > 0;
+            if (!this.isMoreElement(item)) {
+                if (item.nextElementSibling.nodeName !== 'MG-ITEM-MORE' && !displayMgItemMore)
+                    return cumulateWidth + this.itemMoreElement.offsetWidth > this._availableWidth;
+                else
+                    return cumulateWidth > this._availableWidth;
             }
-        };
-        /**
-         * Toggle element's hide attribute
-         * @param element - element to toggle
-         * @param isHidden - element is hidden
-         */
-        this.toggleElement = (element, isHidden) => {
-            if (isHidden)
-                element.setAttribute('hidden', '');
             else
-                element.removeAttribute('hidden');
+                return !displayMgItemMore;
         };
         /**
-         * Remove hidden attributes on all items
+         * Toogle item from isHidden condition
+         * @param item - item to update
+         * @param isHidden - item is hidden
          */
-        this.restoreItems = () => {
-            [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
-        };
-        if (this._resizeObserver === undefined) {
-            // add resize observer
-            this._resizeObserver = new ResizeObserver(entries => {
-                entries.forEach(entry => {
-                    this.run(entry.contentRect.width);
-                });
+        this.toggleItem = (item, isHidden) => {
+            if (this.isMoreElement(item) && isHidden)
+                item.setAttribute('hidden', '');
+            else if (this.isMoreElement(item) && !isHidden)
+                item.removeAttribute('hidden');
+            else if (!this.isMoreElement(item) && isHidden)
+                this.itemMoreContainerElement.appendChild(item);
+            else if (!this.isMoreElement(item) && item.parentElement !== this.parentElement)
+                this.parentElement.insertBefore(item, this.itemMoreElement);
+        };
+        if (!this.parentElement || !this.itemMoreElement || !this.itemMoreContainerElement) {
+            throw new Error('OverflowBehavior - all construtor params are required');
+        }
+        const items = Array.from(this.parentElement.children);
+        this._resizeObserver = new ResizeObserver(entries => {
+            this._availableWidth = entries.map(entry => entry.contentRect.width).sort((a, b) => a - b).shift();
+            // reset items
+            items.forEach(item => this.toggleItem(item, false));
+            let accWidth = 0;
+            items.forEach((item, index) => {
+                accWidth += item.offsetWidth;
+                if (index)
+                    this.toggleItem(item, this.isOverflowElement(accWidth, item));
             });
-            this._resizeObserver.observe(this.element);
-        }
-        this.run();
+        });
+        this._resizeObserver.observe(this.parentElement);
     }
 }
 
@@ -4374,86 +4673,27 @@ const MgItemMore = class {
          ************/
         this.name = 'mg-item-more';
         /**
-         * Set proxy element properties and listeners
-         * @param proxified - element to proxify from
+         * Define icon
          */
-        this.setProxyElement = (proxified) => {
-            const proxy = this.moreElementMenuItem.querySelector(`[identifier="${proxified.identifier}"]`);
-            if (proxy === null) {
-                return;
-            }
-            // remove proxy id to prevent duplicate key. default html id is: '';
-            if (me(proxy.id))
-                proxy.id = '';
-            const proxyClickHandler = () => {
-                this.parentMenu
-                    .querySelector(`[identifier="${proxy.identifier}"]`)
-                    .shadowRoot.querySelector('a, button')
-                    .dispatchEvent(new MouseEvent('click', { bubbles: true }));
-            };
-            // Watch the `item-updated` event to keep element needeed properties and innerHTML in sync between the proxified and the proxy elements
-            const updateProxy = (element) => {
-                for (const key in element) {
-                    if (['identifier', 'href', 'targer', 'status', 'expanded'].includes(key))
-                        element[key] ? proxy.setAttribute(key, element[key]) : proxy.removeAttribute(key);
-                }
-                proxy.innerHTML = element.innerHTML;
-                // When `href` is updated we need to wait the full component re-render before update its handler
-                setTimeout(() => {
-                    const interactiveElement = proxy.shadowRoot.querySelector('a, button');
-                    interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.removeEventListener('click', proxyClickHandler);
-                    interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.addEventListener('click', proxyClickHandler);
-                });
-            };
-            updateProxy(proxified);
-            proxified.addEventListener('item-updated', event => {
-                updateProxy(event.target);
-            });
-            // update click event listener on proxy item and mirror the event on the main menu element
-            // we need to wait mg-menu-item to be loaded to ensure the shadowroot is rendered
-            proxy.addEventListener('item-loaded', () => {
-                updateProxy(proxified);
-            });
-        };
-        /***********
-         * Methods *
-         ***********/
-        /**
-         * render mg-item-more overflow element
-         * @returns mg-item-more element
-         */
-        this.renderMgMenuItemOverflowElement = () => {
-            this.parentMenuItems.forEach((child) => {
-                // create item-more menu items element from main menu-items clones
-                this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
-                // we need to get all `mg-menu-item` linked to the cloned one to set mirror process
-                tt(() => {
-                    this.setProxyElement(child);
-                    if (child.querySelector('mg-menu') !== null) {
-                        child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
-                    }
-                });
-            });
-            return this.element;
-        };
         this.icon = { icon: 'ellipsis-vertical' };
+        /**
+         * Define slot label element
+         */
         this.slotlabel = { display: false };
-        this.size = undefined;
-        this.parentMenu = undefined;
     }
     validateIcon(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
-            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${Je(newValue)}.`);
     }
     validateSlotLabel(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
-            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${Je(newValue)}.`);
         else if (typeof newValue.label !== 'string')
             this.slotlabel.label = this.messages.menuLabel;
     }
     validateSize(newValue) {
         if (newValue && !sizes$3.includes(newValue))
-            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${Je(newValue)}.`);
     }
     /*************
      * Lifecycle *
@@ -4484,8 +4724,7 @@ const MgItemMore = class {
      */
     componentDidUpdate() {
         if (this.parentMenu && this.overflowBehavior === undefined) {
-            this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
-            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
+            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.element, this.itemMoreContainer);
         }
     }
     /**
@@ -4500,11 +4739,11 @@ const MgItemMore = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '11c43154129c5756e80db0af3434c88cab2191f3', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: '38fc92410328c317fb046f4e1ec4f94175d484fb', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
-                if (el !== null) {
-                    this.moreElementMenuItem = el;
-                }
-            } }, h("mg-icon", { key: '90e21f30004e38a1a0938359276dccd7458e5e86', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '20f846c5718a19d39ad94abf59bab54658e1ff9c', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'b52f97129e736be9164ae18b717057d1bfc0cd0a', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+        const menuItemIdentifier = "mg-item-more";
+        return (h(Host, { key: '522fc142a992fa450b2d102e2c053fcd25704dcc', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: 'c05fb5c0379656b9634beca745b3b74d36c8e46c', "data-overflow-more": true, "data-size": this.parentMenu.size, "data-style-direction": Direction.HORIZONTAL, identifier: menuItemIdentifier }, h("mg-icon", { key: 'e40f07ce8c55c30ef79a42ddb973d884ab289427', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '3b38b9362a023df9e53733bf810c4f37a0016a93', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '4f20389326507261356d897dd25e676ac37ca5bb', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size, ref: (ref) => {
+                if (ref !== null)
+                    this.itemMoreContainer = ref;
+            } })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4515,7 +4754,7 @@ const MgItemMore = class {
 };
 MgItemMore.style = MgItemMoreStyle0;
 
-const mgMenuCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-menu-color-background: Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`.\n */:host{display:flex;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
+const mgMenuCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-menu-color-background: Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`.\n */:host{display:inline-flex;width:100%;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){display:flex;height:100%;flex-direction:column;overflow-y:auto}";
 const MgMenuStyle0 = mgMenuCss;
 
 const MgMenu = class {
@@ -4525,100 +4764,78 @@ const MgMenu = class {
          * Internal *
          ************/
         this.name = 'mg-menu';
-        this.menuItems = [];
-        this.focusedMenuItem = 0;
-        /*************
-         * Methods *
-         *************/
         /**
-         * Close matching menu-item
-         * @param item - menu-item to close
-         * @param condition - addionnal condition
+         * Component display direction.
          */
-        this.closeMenuItem = (item, condition) => {
-            if (!this.isChildMenu && condition) {
-                item.expanded = false;
-            }
-        };
+        this.direction = Direction.HORIZONTAL;
         /**
-         * get mg-item-more child mg-menu-item element
-         * @returns mg-menu-item element
+         * Define mg-menu size
          */
-        this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.itemMoreElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
+        this.size = 'medium';
+        /*************
+         * Methods *
+         *************/
         /**
-         * Set item listend
-         * @param item - mg-menu-item element
-         * @param index - number
+         * Test if menu is a child menu
+         * @returns truthy if menu is a child menu
          */
-        this.setItemListener = (item, index) => {
-            ['click', 'focus'].forEach(trigger => {
-                item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {
-                    this.focusedMenuItem = index;
-                    // reset expanded on previous active menu item
-                    const itemMoreMenuItem = this.getItemMoreMenuItem();
-                    (![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {
-                        this.closeMenuItem(item, index !== this.focusedMenuItem);
-                    });
-                });
-            });
-        };
+        this.isChildMenu = () => this.element.closest('mg-menu-item') !== null;
         /**
-         * Store menu-items on component init and add listeners
+         * Get menu children items
+         * @returns menu children mg-menu-item
          */
-        this.initMenuItemsListeners = () => {
-            // add listeners on menu item and edit index
-            this.menuItems.forEach((item, index) => {
-                this.setItemListener(item, index);
-            });
+        this.getMenuItems = (menu = this.element) => {
+            var _a, _b;
+            const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
+            const itemMoreMenuItem = (_b = (_a = menu.querySelector('mg-item-more')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item');
+            if (itemMoreMenuItem) {
+                menuItems.push(itemMoreMenuItem);
+            }
+            return menuItems;
         };
         /**
-         * Handle item-loaded event on mg-item-more element
+         * Update menu items
          */
-        this.handleItemLoaded = () => {
-            this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
+        this.updateMenuItems = () => {
+            this.getMenuItems().forEach((item) => {
+                item.dataset.styleDirection = this.direction;
+            });
+            // render mg-item-more to manage OverflowBehavior
+            this.renderMgItemMore();
         };
         /**
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
             var _a;
-            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
+            if (this.direction === Direction.VERTICAL || this.direction === Direction.HORIZONTAL && this.isChildMenu() || this.element.children.length <= 1) {
                 return;
             }
             // Insert mg-item-more outside the mg-menu shadowdom
-            if (this.itemMoreElement === undefined) {
-                this.itemMoreElement = document.createElement('mg-item-more');
-                this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
-                this.element.appendChild(this.itemMoreElement);
+            let itemMoreElement = this.element.querySelector('mg-item-more');
+            if (itemMoreElement === null) {
+                itemMoreElement = document.createElement('mg-item-more');
+                this.element.appendChild(itemMoreElement);
             }
             // update mg-item-more props
-            for (const attribute in this.itemmore) {
-                const newValue = this.itemmore[attribute];
-                // to improve rendering we use HTML attributes as much as possible
-                if (['string', 'number'].includes(typeof newValue)) {
-                    this.itemMoreElement.setAttribute(attribute, newValue);
-                }
-                else {
-                    this.itemMoreElement[attribute] = newValue;
-                }
+            for (const propertie in this.itemmore) {
+                itemMoreElement[propertie] = this.itemmore[propertie];
             }
             if (((_a = this.itemmore) === null || _a === void 0 ? void 0 : _a.size) === undefined)
-                this.itemMoreElement.size = this.size;
+                itemMoreElement.size = this.size;
         };
-        this.label = undefined;
-        this.direction = Direction.HORIZONTAL;
-        this.itemmore = undefined;
-        this.size = 'medium';
-        this.isChildMenu = undefined;
     }
     validateLabel(newValue) {
         if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
-            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${Je(newValue)}.`);
         }
     }
     validateDirection(newValue) {
         if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
-            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${Je(newValue)}.`);
+        }
+        else {
+            this.updateMenuItems();
         }
     }
     validateItemMore(newValue) {
@@ -4631,9 +4848,30 @@ const MgMenu = class {
     }
     validateSize(newValue) {
         if (!sizes$3.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$3.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
     }
+    /**
+     * Define mg-menu-item listener when they are loaded
+     * @param event - mg-item-loaded "item-loaded" custom event
+     */
+    updateItemListener(event) {
+        const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
+        ['click', 'focus'].forEach(trigger => {
+            itemToWatch.addEventListener(trigger, () => {
+                const focusedItem = event.target.closest('mg-menu').querySelector('[data-has-focus]');
+                // exit process if new focused item in the current menu children
+                if (focusedItem === itemToWatch)
+                    return;
+                // reset expanded on previous active menu item
+                if (focusedItem)
+                    focusedItem.removeAttribute("data-has-focus");
+                // update focusedMenuItem with new value
+                itemToWatch.setAttribute('data-has-focus', 'true');
+            });
+        });
+    }
+    ;
     /*************
      * Lifecycle *
      *************/
@@ -4648,37 +4886,38 @@ const MgMenu = class {
     }
     /**
      * Check if component slots configuration
-     * @returns timeout
      */
     componentDidLoad() {
-        // update props and states after componentDidLoad hook
-        // return a promise to process action only in the FIRST render().
-        // https://stenciljs.com/docs/component-lifecycle#componentwillload
-        return setTimeout(() => {
-            // store all menu-items
-            this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
-            this.isChildMenu = this.element.closest('mg-menu-item') !== null;
-            // add mg-item-more to manage OverflowBehavior
-            // when all props, states and DOM are already rendered we can render the mg-item-more
-            this.renderMgItemMore();
-            // then use mutation observer on children to improve reactivity
-            new MutationObserver(() => {
-                this.renderMgItemMore();
-            }).observe(this.element, { childList: true });
-        });
-    }
-    /**
-     * Add listeners to items
-     */
-    componentDidRender() {
-        this.initMenuItemsListeners();
+        // set menu-items
+        this.updateMenuItems();
+        // add listener to close main menu when focus leave it
+        if (!this.isChildMenu() && this.direction === Direction.HORIZONTAL) {
+            document.addEventListener('focusin', (event) => {
+                const isElementChild = (element) => {
+                    if (element === this.element)
+                        return true;
+                    else if (!element.parentElement)
+                        return false;
+                    else
+                        return isElementChild(element.parentElement);
+                };
+                if (!event.target.closest('mg-menu') || !isElementChild(event.target)) {
+                    const focusedItem = this.element.querySelector('[data-has-focus]');
+                    // reset expanded on previous active menu item
+                    if (focusedItem)
+                        focusedItem.removeAttribute('data-has-focus');
+                }
+            });
+        }
+        // add mutation observer to improve global reactivity
+        new MutationObserver(this.updateMenuItems).observe(this.element, { childList: true });
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '550624e40ec66eeb90f8bc4ac1590adcbaa20dfd', role: "list", "aria-label": this.label }, h("slot", { key: 'bf6f5ac748fd45e250c02d93cc7cf72e4580de3b' })));
+        return (h(Host, { key: 'eb78530a80f841391df90167523b6d446cd5405e', role: "list", "aria-label": this.label }, h("slot", { key: '1a8839c831a81915de8a5b03ebe1481a32762217' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -4696,7 +4935,6 @@ const MgMenuItemStyle0 = mgMenuItemCss;
 const MgMenuItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.statusChange = createEvent(this, "status-change", 7);
         this.itemLoaded = createEvent(this, "item-loaded", 7);
         this.itemUpdated = createEvent(this, "item-updated", 7);
         /************
@@ -4704,15 +4942,39 @@ const MgMenuItem = class {
          ************/
         this.name = 'mg-menu-item';
         this.navigationButton = 'mg-c-menu-item__navigation-button';
+        /************
+         * Props *
+         ************/
+        /**
+         * Identifier is used to control mg-popover
+         */
+        this.identifier = ze('mg-menu-item');
+        /**
+         * Define menu-item status.
+         */
+        this.status = Status$1.VISIBLE;
+        /**
+         * Define menu-item content expanded.
+         */
+        this.expanded = false;
+        /**********
+         * States *
+         *********/
+        /**
+         * Define menu-item size.
+         */
+        this.size = 'medium';
+        /**
+         * Component button classes
+         */
+        this.navigationButtonClassList = new Ge([this.navigationButton]);
+        /**
+         * Does component have children.
+         */
+        this.hasChildren = false;
         /***********
          * Methods *
          **********/
-        /**
-         * Toggle expanded prop value
-         */
-        this.toggleExpanded = () => {
-            this.expanded = !this.expanded;
-        };
         /**
          * Does an Element have given Status
          * @param mgMenuItemElement - to parse
@@ -4720,6 +4982,24 @@ const MgMenuItem = class {
          * @returns true if element with status is found
          */
         this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
+        /**
+         * Condition to know if component should display a mg-popover
+         * @returns truthy if component display popover
+         */
+        this.hasPopover = () => this.isDirection(Direction.HORIZONTAL) && (this.isInMainMenu && Array.from(this.element.children).some(element => !element.querySelector('[slot]')) || this.isItemMore) && this.href === undefined;
+        /**
+         * Method to control if one of component children have active status
+         * @returns truthy if component has active child
+         */
+        this.hasActiveChild = () => {
+            var _a;
+            return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status$1.ACTIVE) && !element.hasAttribute('hidden'));
+        };
+        /**
+         * Is component an interactive item
+         * @returns truthy if element is clickable
+         */
+        this.isInteractiveItem = () => this.hasChildren || !ye(this.href);
         /**
          * Is component contextual direction match the given direction
          * @param direction - in parent menu
@@ -4737,25 +5017,37 @@ const MgMenuItem = class {
                 childMenu !== null && Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
         };
         /**
-         * Method to control if one of component children have active status
-         * @returns truthy if component has active child
+         * Update expanded prop
+         * @param newValue - expanded new value
          */
-        this.hasActiveChild = () => {
-            var _a;
-            return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).some((element) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status$1.ACTIVE) && !element.hasAttribute('hidden'));
+        this.updateExpanded = (newValue) => {
+            if (this.isInteractiveItem()) {
+                // item is always expanded in vertical menu when has active child
+                this.expanded = this.isDirection(Direction.VERTICAL) && this.hasActiveChild() || newValue;
+            }
+        };
+        /**
+         * Update status
+         * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
+         */
+        this.updateStatus = (guard = []) => {
+            if (![Status$1.HIDDEN, Status$1.DISABLED, ...guard].includes(this.status)) {
+                this.status = this.hasActiveChild() ? Status$1.ACTIVE : Status$1.VISIBLE;
+            }
         };
         /**
-         * Validate slots
+         * Update slots
          * @param guard - prevent action with guard. Default: false.
          */
-        this.validateSlot = (guard = false) => {
+        this.updateSlot = (guard = false) => {
             // slot title AND metadata validation
             // add title on label AND metada slots due to text-overflow on these element
-            if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined)
+            if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {
                 throw new Error(`<${this.name}> slot "label" is required.`);
+            }
             ['label', 'metadata'].forEach(slot => {
                 Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
-                    if (!me(element.textContent))
+                    if (!ye(element.textContent))
                         throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
                     if ((guard && !element.hasAttribute('title')) || !guard)
                         element.setAttribute('title', element.textContent);
@@ -4763,39 +5055,23 @@ const MgMenuItem = class {
             });
         };
         /**
-         * Update status
-         * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
-         */
-        this.updateStatus = (guard = []) => {
-            if (![Status$1.HIDDEN, Status$1.DISABLED, ...guard].includes(this.status)) {
-                this.status = this.hasActiveChild() ? Status$1.ACTIVE : Status$1.VISIBLE;
-            }
-        };
-        /**
-         * Init event-listeners
+         * Update menu item
+         * @param guard - prevent action with guard
          */
-        this.initListeners = () => {
-            var _a;
-            // manage first sub-level menu-items
-            Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).forEach(item => {
-                if (item.nodeName === 'MG-MENU-ITEM') {
-                    // manage child menu listener
-                    item.addEventListener('status-change', () => {
-                        this.updateStatus();
-                    });
-                }
-            });
+        this.updateItem = (guard) => {
+            const menu = this.element.closest('mg-menu');
+            this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
+            // define element size
+            if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined && !this.isItemMore)
+                this.size = menu.size;
+            else if (this.isItemMore)
+                this.size = this.element.dataset.size;
+            // when vertical main menu item contain an active item we force expanded
+            this.updateExpanded(this.expanded);
+            this.updateStatus(guard);
+            this.updatePopoverGuard();
+            this.updateDisplayNotificationBadge();
         };
-        /**
-         * Get mg-popover identifier
-         * @returns generated mg-popover identifier
-         */
-        this.getPopoverIdentifier = () => `${this.identifier}-popover`;
-        /**
-         * Condition to know if component should display a mg-popover
-         * @returns truthy if component display popover
-         */
-        this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
         /************
          * Handlers *
          ************/
@@ -4804,106 +5080,123 @@ const MgMenuItem = class {
          * @param event - click on element
          */
         this.handleElementCLick = (event) => {
-            if ((this.hasChildren && !this.isInMainMenu) || this.status === Status$1.DISABLED) {
+            if (this.status === Status$1.DISABLED) {
                 event.preventDefault();
                 event.stopPropagation();
             }
-            // toggle expanded when mg-menu-item has child items
-            if (this.hasChildren)
-                this.toggleExpanded();
+            // for non "poperized" menu-item we toggle expanded manualy
+            this.updateExpanded(!this.expanded);
+            // when item is the last clickable item we close the parent popover
+            if (!this.isInteractiveItem()) {
+                const closePopover = (element) => {
+                    if (!element)
+                        return;
+                    else if (element !== this.element && element.expanded && element.shadowRoot.querySelector('mg-popover') !== null) {
+                        element.expanded = false;
+                    }
+                    else {
+                        closePopover(element.parentElement.closest('mg-menu-item'));
+                    }
+                };
+                closePopover(this.element);
+            }
         };
         /**
          * Handle popover element display-change event
          * @param event - popover display event
          */
         this.handlePopoverDisplay = (event) => {
-            this.expanded = event.detail;
+            this.updateExpanded(event.detail);
         };
         /**
          * Render slot
          * @returns HTML Element
          */
         this.renderSlot = () => h("slot", null);
-        this.identifier = qe('mg-menu-item');
-        this.href = undefined;
-        this.target = undefined;
-        this.status = Status$1.VISIBLE;
-        this.expanded = false;
-        this.size = 'medium';
-        this.navigationButtonClassList = new Xe([this.navigationButton]);
-        this.direction = undefined;
-        this.isInMainMenu = undefined;
-        this.isItemMore = undefined;
-        this.hasChildren = false;
-        this.displayNotificationBadge = undefined;
     }
     watchIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Ie(newValue)) {
+            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
+        }
+        else {
+            this.popoverIdentifier = `${this.identifier}-popover`;
         }
     }
     watchTarget(newValue) {
         if (newValue && !targets.includes(newValue)) {
-            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
     }
-    validateStatus(newValue, oldValue) {
-        if (oldValue !== undefined) {
+    watchStatus(newValue, oldValue) {
+        if (oldValue !== undefined)
             this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
-        }
         this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
-        this.statusChange.emit(newValue);
-    }
-    validateExpanded(newValue) {
-        if (typeof newValue !== 'boolean')
-            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${Ye(newValue)}.`);
-        // if menu-item has sub-menu we have to apply some updates:
-        if (this.hasChildren) {
-            const subItems = Array.from(this.element.querySelectorAll(this.name));
-            if (!newValue) {
-                // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content
-                subItems.forEach(item => {
-                    item.expanded = false;
-                });
-            }
-            else if (this.element.querySelector(`${this.name}[status="${Status$1.ACTIVE}"]`) !== null) {
-                // - when expanded and contain an active item parents are expended too
-                subItems.forEach(item => {
-                    if (this.hasStatus(item, Status$1.ACTIVE)) {
-                        item.expanded = true;
-                    }
-                });
-            }
+    }
+    watchExpanded(newValue) {
+        if (typeof newValue !== 'boolean') {
+            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${Je(newValue)}.`);
+        }
+        else {
+            this.updateExpanded(newValue);
+            // when expanded all actives sub-items need to be expanded and non active closed
+            Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+                if (item !== this.element)
+                    item.expanded = newValue ? this.hasStatus(item, Status$1.ACTIVE) : false;
+            });
         }
     }
-    validateSize(newValue, oldValue) {
-        this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
+    watchSize(newValue, oldValue) {
+        if (oldValue !== undefined)
+            this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);
         this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);
     }
-    validateDirection(newValue) {
-        // manage menu items style depending to parent menu horientation
-        this.element.setAttribute('data-style-direction', newValue);
+    validateDirection(newValue, oldValue) {
+        if (oldValue !== undefined)
+            this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);
         this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
         // manage all sub levels child menu-items level with data-level attribut
-        if (this.isDirection(Direction.VERTICAL, newValue)) {
-            Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+        Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+            if (this.isDirection(Direction.VERTICAL, newValue)) {
                 item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
-            });
-        }
+            }
+            else {
+                delete item.dataset.level;
+            }
+        });
     }
     validateHasChildren(newValue) {
         if (newValue && this.element.href !== undefined) {
             throw new Error(`<${this.name}> prop "href" is unauthorizied when element is a parent.`);
         }
     }
+    /**
+     * direction value in dataset
+     * @param newValue - new direction value
+     */
+    // eslint-disable-next-line @stencil-community/no-unused-watch
+    watchDataStyleDirection(newValue) {
+        this.direction = newValue;
+    }
+    /**
+     * has focus value in dataset
+     * @param newValue - new direction value
+     */
+    // eslint-disable-next-line @stencil-community/no-unused-watch
+    watchDataHasFocus(newValue) {
+        if (!newValue)
+            this.updateExpanded(Boolean(newValue));
+    }
     /**
      * Render popover clickoutside guard for content slot
      */
     updatePopoverGuard() {
-        if (this.displayPopover())
-            Array.from(this.element.children)
-                .filter((child) => !child.hasAttribute('slot') && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))
-                .forEach((slot) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));
+        const subItem = this.element.querySelector('*:not([slot])');
+        if (!subItem)
+            return;
+        if (this.hasPopover())
+            subItem.dataset.mgPopoverGuard = this.popoverIdentifier;
+        else
+            delete subItem.dataset.mgPopoverGuard;
     }
     /*************
      * Lifecycle *
@@ -4917,13 +5210,12 @@ const MgMenuItem = class {
         this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
         this.messages = initLocales(this.element).messages.menuItem;
         this.isItemMore = this.element.dataset.overflowMore !== undefined;
-        // Validate props
-        this.validateStatus(this.status);
-        this.validateExpanded(this.expanded);
+        // watchers
+        this.watchStatus(this.status);
+        this.watchExpanded(this.expanded);
         this.watchTarget(this.target);
         this.watchIdentifier(this.identifier);
-        // Validate states
-        this.validateSize(this.size);
+        this.watchSize(this.size);
     }
     /**
      * Check if component slots configuration
@@ -4931,40 +5223,36 @@ const MgMenuItem = class {
      */
     componentDidLoad() {
         // validation
-        this.validateSlot(true);
+        this.updateSlot(true);
         // update props and states after componentDidLoad hook
         // return a promise to process action only in the FIRST render().
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
-            // define menu-item context states
-            const menu = this.element.closest('mg-menu');
-            this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;
-            this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
-            if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined)
-                this.size = menu.size;
-            if (this.isItemMore)
-                this.size = this.element.dataset.size;
-            // when main menu item contain an active item it will get the active style
-            // AND if item is in vertical menu it will be expanded
-            if (this.hasActiveChild() && this.isInMainMenu)
-                this.expanded = this.isDirection(Direction.VERTICAL);
-            this.updateStatus([Status$1.ACTIVE]);
-            this.updateDisplayNotificationBadge();
-            this.updatePopoverGuard();
-            // manage child dom changes with mutationObserver and listners
-            this.initListeners();
+            this.watchDataStyleDirection(this.element.dataset.styleDirection);
+            this.watchDataHasFocus(this.element.dataset.hasFocus);
+            this.updateItem([Status$1.ACTIVE]);
             // emit loaded event when component is fully loaded
             this.itemLoaded.emit();
             new MutationObserver(mutationsList => {
-                if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
+                if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName)))
                     this.updateStatus(this.hasChildren ? undefined : [Status$1.ACTIVE]);
                 if (mutationsList.some(mutation => mutation.type === 'characterData'))
-                    this.validateSlot();
-                this.updateDisplayNotificationBadge();
+                    this.updateSlot();
+                if (mutationsList.some(mutation => mutation.type === 'childList'))
+                    this.updateItem();
                 this.itemUpdated.emit();
             }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
         }, 0);
     }
+    /**
+     * Emit event when component is updated
+     * @returns promise process wich emit the 'item-updated' event
+     */
+    componentShouldUpdate() {
+        return et(() => {
+            this.itemUpdated.emit();
+        });
+    }
     /**
      * Render ineractive element
      * @returns HTML Element
@@ -4979,15 +5267,6 @@ const MgMenuItem = class {
                 [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
             } }, h("mg-icon", { icon: "chevron-down" })))));
     }
-    /**
-     * Emit event when component is updated
-     * @returns promise process wich emit the 'item-updated' event
-     */
-    componentShouldUpdate() {
-        return tt(() => {
-            this.itemUpdated.emit();
-        });
-    }
     /**
      * Render
      * @returns HTML Element
@@ -4997,7 +5276,7 @@ const MgMenuItem = class {
             ['mg-c-menu-item__collapse-container']: true,
             ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
         });
-        return (h(Host, { key: '0705617f39133b4da491c150f4984cc57cafe085', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier(), "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
+        return (h(Host, { key: '1bfbcc26638508e5fff8d0a9b0bd1956e06cb9ae', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
         }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
@@ -5007,11 +5286,13 @@ const MgMenuItem = class {
     static get watchers() { return {
         "identifier": ["watchIdentifier"],
         "target": ["watchTarget"],
-        "status": ["validateStatus"],
-        "expanded": ["validateExpanded"],
-        "size": ["validateSize"],
+        "status": ["watchStatus"],
+        "expanded": ["watchExpanded"],
+        "size": ["watchSize"],
         "direction": ["validateDirection"],
-        "hasChildren": ["validateHasChildren"]
+        "hasChildren": ["validateHasChildren"],
+        "data-style-direction": ["watchDataStyleDirection"],
+        "data-has-focus": ["watchDataHasFocus"]
     }; }
 };
 MgMenuItem.style = MgMenuItemStyle0;
@@ -5035,6 +5316,22 @@ const MgMessage = class {
          * Internal *
          ************/
         this.classBase = 'mg-c-message';
+        /**
+         * Define variant
+         */
+        this.variant = 'info';
+        /**
+         * Define variant style
+         */
+        this.variantStyle = 'bar-left';
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-message']);
+        /**
+         * Define if component is using actions slot
+         */
+        this.hasActions = false;
         /**
          * Get icon corresponding to variant
          * @returns icon
@@ -5051,14 +5348,10 @@ const MgMessage = class {
                     return 'exclamation-circle';
             }
         };
-        this.variant = 'info';
-        this.variantStyle = 'bar-left';
-        this.classCollection = new Xe(['mg-c-message']);
-        this.hasActions = false;
     }
     watchVariant(newValue, oldValue) {
         if (!variants$1.includes(newValue)) {
-            throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
         else {
             if (newValue !== undefined)
@@ -5069,7 +5362,7 @@ const MgMessage = class {
     }
     watchVariantStyle(newValue, oldValue) {
         if (!variantStyles.includes(newValue)) {
-            throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
         else {
             if (newValue !== undefined)
@@ -5096,9 +5389,9 @@ const MgMessage = class {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '9ce1d7b25bf12d974a7b0b296d9d71b9b2c984e1', class: this.classCollection.join() }, h("mg-card", { key: '7c7c1d5891d988adc7c5090b02d809aab32565f8' }, this.variantStyle === 'bar-left' && h("span", { key: 'd6c291fcf93ab6e84ba0288a1a0c4ec405b57e78', class: "mg-c-message__bar" }), h("span", { key: 'afc3dcf95dbf4ee96ca1041c54c0d4c37d435601', class: "mg-c-message__icon" }, h("mg-icon", { key: 'd9b79cb3be22fedee6a04cf43c72641202cc80f7', icon: this.getIcon() })), h("div", { key: 'f70d488459d28a464a3714b122b7a708c3562741', class: "mg-c-message__content" }, h("span", { key: 'd24b0ed1c326cb04bc7944f0c4f1fe19efa3fc9c', class: "mg-c-message__content-slot" }, h("slot", { key: 'bb491533bc09600c04699d561c7af608ee1567e5' })), this.hasActions && [
+        return (h("div", { key: '851d97fde6f05799e1420f8825fcff986d9af1d6', class: this.classCollection.join() }, h("mg-card", { key: '40f85f1fb3240ab709b1ab46286e9a953f2d5dc8' }, this.variantStyle === 'bar-left' && h("span", { key: '50b078ec379c7774d2f409c64b56108041bf3053', class: "mg-c-message__bar" }), h("span", { key: 'bc6b1019e1103fc8cd5e4e92f95b62374207be2b', class: "mg-c-message__icon" }, h("mg-icon", { key: 'e461ddc1eb1ddcb7ecc673f59dc59f400efbe916', icon: this.getIcon() })), h("div", { key: 'edf836b375d7f1fd413b53711b99acbe2bef3e92', class: "mg-c-message__content" }, h("span", { key: 'c6ce4628e450b7e89ef3715126b3a2dee081224e', class: "mg-c-message__content-slot" }, h("slot", { key: '36ecf7417e61ab84695078e2fd4ebe829bd769a7' })), this.hasActions && [
             h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '43547919e1ec8b34f23ea1ad5e75d5b0da23c831', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '43be5769165cac1ab702b2ba80fb885c2ec1834f', name: "actions" })),
         ]))));
     }
     get element() { return getElement(this); }
@@ -5125,6 +5418,31 @@ const MgModal = class {
         this.componentClose = createEvent(this, "component-close", 7);
         // IDs
         this.titleId = '';
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = ze('mg-modal');
+        /**
+         * Modal dialog role.
+         */
+        this.dialogRole = dialogRoles[0];
+        /**
+         * Define if modal has a cross button
+         */
+        this.closeButton = false;
+        /**
+         * Define if modal is open
+         */
+        this.open = false;
+        /**
+         * Define if component is using actions slot
+         */
+        this.hasActions = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-modal']);
         /***********
          * Handles *
          ***********/
@@ -5135,26 +5453,19 @@ const MgModal = class {
             this.open = false;
             this.componentClose.emit();
         };
-        this.identifier = qe('mg-modal');
-        this.dialogRole = dialogRoles[0];
-        this.modalTitle = undefined;
-        this.closeButton = false;
-        this.open = false;
-        this.hasActions = false;
-        this.classCollection = new Xe(['mg-c-modal']);
     }
     watchIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Ie(newValue)) {
+            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
-            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${Je(newValue)}.`);
     }
     validateModalTitle(newValue) {
-        if (!me(newValue)) {
-            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${Ye(newValue)}.`);
+        if (!ye(newValue)) {
+            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${Je(newValue)}.`);
         }
     }
     watchOpen(newValue) {
@@ -5203,11 +5514,11 @@ const MgModal = class {
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: 'e4091c6fa70e4b7bccd24db2212e0d2b94ae3099', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: 'f927a4473e69d4034433e170b6279e027fc9c9d3', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: 'd674065eb361fbae99545e79840ee13779dff236' }, h("div", { key: 'f3c7464c97710c9b58db1e4ad5b3c80c43de5493', class: "mg-c-modal__dialog" }, h("header", { key: 'b6f714cdaf553e26ab1a8212608a50949cfc0395', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '95310b0c375e412da21487ae68cb3437afdf7537', class: "mg-c-modal__close-button" }, h("mg-button", { key: '29303f06b8db367aaa372196996b2ab074d799f2', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '153eb9f3039422b5e9c554a7878ebc9678b2a997', icon: "cross" })))), h("h1", { key: 'fae980d224a9947ac11ae6d7ddddcc7591ba695f', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'e5efb0df7f7726f454d7f4347c8f5cee7bac1f00', class: "mg-c-modal__content" }, h("slot", { key: '38eeb27cf83588402e6ebc0d674e3967c45576ea' })), this.hasActions && (h("footer", { key: 'c50c3bde92a3e6fae3a047ad7803a8f80f277eeb', class: "mg-c-modal__footer" }, h("slot", { key: '777984d09b3df311a2f6e30dda664dfe0771bfd4', name: "actions" })))))));
+            } }, h("mg-card", { key: '36e09b525447abd8b810c8d4b770597e354fc3c3' }, h("div", { key: '4e8188bd2f7c4db85b902b58079ea45a863929eb', class: "mg-c-modal__dialog" }, h("header", { key: 'bd0512246a56379a63d7be10fd9e7999d26b578a', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'f115aca533d59950c9b340f1e71d58cfe631b63d', class: "mg-c-modal__close-button" }, h("mg-button", { key: '691ed3f1b20978e302ebd7a793adeac23ccd87f4', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: 'aa1bc4cc8906234144fa2944ff5d2b7eab2df11e', icon: "cross" })))), h("h1", { key: 'cfab5ec91d14b904e68f4e8dfe973067f0e2af4e', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'c829f024a77f9c49d84cf7a05a34561b94fc6e47', class: "mg-c-modal__content" }, h("slot", { key: '4c2cf29eac6523b23e0d144fded17c38afab4a0a' })), this.hasActions && (h("footer", { key: 'e414e21afe1a4a3de720876b71d56efd267bd964', class: "mg-c-modal__footer" }, h("slot", { key: 'e71d2578822f3fbaf990fbb3e2878ab850bf4141', name: "actions" })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -5253,6 +5564,19 @@ const MgPagination = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.currentPageChange = createEvent(this, "current-page-change", 7);
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = ze('mg-pagination');
+        /**
+         * Component total pages
+         */
+        this.totalPages = 1;
+        /**
+         * Component current page
+         */
+        this.currentPage = 1;
         /**
          * Change current page from target
          * @param target - target page
@@ -5279,26 +5603,20 @@ const MgPagination = class {
         this.handleGoToPage = (action, disabled) => {
             !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
         };
-        this.identifier = qe('mg-pagination');
-        this.label = undefined;
-        this.hideNavigationLabels = undefined;
-        this.hidePageCount = undefined;
-        this.totalPages = 1;
-        this.currentPage = 1;
     }
     watchIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Ie(newValue)) {
+            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
     }
     validateTotalPages(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${Je(newValue)}.`);
         }
     }
     validateCurrentPage(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${Je(newValue)}.`);
         }
         else if (newValue > this.totalPages) {
             throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
@@ -5328,10 +5646,10 @@ const MgPagination = class {
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '271af13e1b68e4fd00f46e99466d3fb7656b7892', label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '223001cd79932ca02a46d6cc8be58346bd535f98', label: this.messages.pagination[`${action}Page`],
             // eslint-disable-next-line react/jsx-no-bind
-            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: 'fea9b12c882c49824eef9216dc1e934f5dc8ddab', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: 'c91f74667fbd297b1884b5406f3fe14604e943ce', icon: "chevron-right" })));
-        return (h(Host, { key: 'd3c8eb93a223c62239ea6e93f9848da697c93171', hidden: this.totalPages < 2 }, h("nav", { key: '91607b9155cd2194583b7548ae058cafbc495339', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { key: '2065b5f99eddc5e44e13dc1f03913003dcca44da', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: '405ff290c7ce715bdbc657e1a83aef1444e64cbe', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { key: '6daf535469f5672858d7ae63991ee4cb1f03e04a', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page)), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '6dd38be4df1a9c540c1e04567f6a6ff858805014', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '226f0fcd8ce73dbcae38300bc9e559968c6413d7', icon: "chevron-right" })));
+        return (h(Host, { key: '871b799015c76975770cc775c0a7c0a58551b491', hidden: this.totalPages < 2 }, h("nav", { key: 'faff3bc618af20b0273fe0272c3437198df0dc53', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { key: 'c4dabd89aa82b89436fdc3405090a635e51384aa', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: '6a3796ec81c0b862837750c6ecd71986fb77a9c1', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { key: '5e6555ab6fb9da09ebf4687c652177c5040c4f0d', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page)), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -5359,6 +5677,35 @@ const MgPanel = class {
         registerInstance(this, hostRef);
         this.titleChange = createEvent(this, "title-change", 7);
         this.expandedChange = createEvent(this, "expanded-change", 7);
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = ze('mg-panel');
+        /**
+         * Define if panel title is editable
+         */
+        this.titleEditable = false;
+        /**
+         * Define title position
+         */
+        this.titlePosition = titlePositions[0];
+        /**
+         * Panel is opened
+         */
+        this.expanded = false;
+        /**
+         * Define expand toggle button display
+         */
+        this.expandToggleDisplay = expandToggleDisplays[0];
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-panel']);
+        /**
+         * Title is in edition mode
+         */
+        this.isEditing = false;
         /************
          * Methods *
          ************/
@@ -5451,27 +5798,15 @@ const MgPanel = class {
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
         };
-        this.identifier = qe('mg-panel');
-        this.panelTitle = undefined;
-        this.titlePattern = undefined;
-        this.titlePatternErrorMessage = undefined;
-        this.titleEditable = false;
-        this.titlePosition = titlePositions[0];
-        this.expanded = false;
-        this.expandToggleDisplay = expandToggleDisplays[0];
-        this.expandToggleDisabled = undefined;
-        this.classCollection = new Xe(['mg-c-panel']);
-        this.isEditing = false;
-        this.updatedPanelTitle = undefined;
     }
     watchIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Ie(newValue)) {
+            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
     }
     validatePanelTitle(newValue) {
-        if (!me(newValue))
-            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${Ye(newValue)}.`);
+        if (!ye(newValue))
+            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${Je(newValue)}.`);
         this.titleChange.emit(newValue);
     }
     validateTitlePattern(newValue) {
@@ -5480,14 +5815,14 @@ const MgPanel = class {
     }
     validateTitlePosition(newValue) {
         if (!titlePositions.includes(newValue))
-            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${Je(newValue)}.`);
     }
     handleExpanded(newValue) {
         this.expandedChange.emit(newValue);
     }
     validateExpandToggleDisplay(newValue) {
         if (!expandToggleDisplays.includes(newValue))
-            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${Je(newValue)}.`);
         if (newValue === 'icon' && this.titleEditable)
             this.titleEditable = false;
     }
@@ -5522,7 +5857,7 @@ const MgPanel = class {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '22da4ba224a53f828c659fe8cddf23b911051ca3', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '1180c7e9e7d4e4601205abfa30a592bf93e88cf1' }, h("header", { key: 'db9489a40dceebfd7fed16be67faabf0dfee67bc', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'f25761138798e3965e9310da0e0cc90b1ac0cfe5', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '0c0aa51490734813a5a04e5aec40149c87766e5a' })))));
+        return (h("section", { key: 'b4471d72f38c4e6f5b21aef7cc08696f745fd6b7', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: 'f51e3e4c51d56b9019ed4a3bc91fbb4b9ffcb543' }, h("header", { key: '9cfcb8fb0e01b570cddee46b2ef9737440c7e192', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'b5f8c6cb02f97f24b45b567ca25c00cf6930ca2f', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '5efc9246ad9d6c457abc9a80705df00a5d9e1cb1' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7336,6 +7671,31 @@ const MgPopover = class {
         registerInstance(this, hostRef);
         this.displayChange = createEvent(this, "display-change", 7);
         this.componentClose = createEvent(this, "component-close", 7);
+        /**
+         * Sets an `id` attribute.
+         * Needed by the input for accessibility `aria-decribedby`.
+         */
+        this.identifier = ze('mg-popover');
+        /**
+         * Popover placement
+         */
+        this.placement = 'bottom';
+        /**
+         * Hide popover arrow
+         */
+        this.arrowHide = false;
+        /**
+         * Define if popover has a cross button
+         */
+        this.closeButton = false;
+        /**
+         * Display popover
+         */
+        this.display = false;
+        /**
+         * Disable popover
+         */
+        this.disabled = false;
         /**
          * Check if clicked outside of component
          * @param event - mouse event
@@ -7428,16 +7788,10 @@ const MgPopover = class {
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
-        this.identifier = qe('mg-popover');
-        this.placement = 'bottom';
-        this.arrowHide = false;
-        this.closeButton = false;
-        this.display = false;
-        this.disabled = false;
     }
     validateIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Ie(newValue)) {
+            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
         // use renderPopoverContent to update popover-content id
         this.renderPopoverContent();
@@ -7526,6 +7880,12 @@ const MgPopover = class {
             if (!this.disabled)
                 this.display = !this.display;
         });
+        this.element.addEventListener('click', (event) => {
+            const target = event.target.closest('[popovertargetaction]');
+            if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {
+                this.display = false;
+            }
+        });
         // Add events to hide popover
         this.element.addEventListener('keydown', e => {
             if (!this.disabled && e.code === 'Escape') {
@@ -7541,7 +7901,7 @@ const MgPopover = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '659148b3948900bbfe18d0d6898ad0c3a77ccd4d' }, h("slot", { key: 'd1fe9c5465fafd8e6a5c42476b2b6096f91ef3ee' }), h("slot", { key: 'ac905b983bd5bf55ceea4d7fb0a6de31875cd0ba', name: "content" })));
+        return (h(Host, { key: '29e8b74394c1a3f620b4119912d5038feb87b873' }, h("slot", { key: '8a3fc0141c2b48db2bf5bd526c1ce289797aaede' }), h("slot", { key: '32ef24ddf19e932ae40f1263da121244c969ce0c', name: "content" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7560,14 +7920,20 @@ const MgPopoverContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.hideContent = createEvent(this, "hide-content", 7);
+        /**
+         * Define if popover has a cross button
+         */
+        this.closeButton = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-popover-content']);
         /**
          * Handle action for close button
          */
         this.handleCloseButton = () => {
             this.hideContent.emit();
         };
-        this.closeButton = false;
-        this.classCollection = new Xe(['mg-c-popover-content']);
     }
     /*************
      * Lifecycle *
@@ -7618,10 +7984,9 @@ const MgSkipLinks = class {
             event.currentTarget.blur();
             this.goToAnchor.emit(event.currentTarget.getAttribute('href'));
         };
-        this.links = undefined;
     }
     validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !me(link.href) || !link.href.startsWith('#') || !me(link.label))) {
+        if (links === undefined || links.length === 0 || links.some(link => !ye(link.href) || !link.href.startsWith('#') || !ye(link.label))) {
             throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
         }
     }
@@ -7683,6 +8048,23 @@ const MgTabs = class {
         this.tabPanel = 'panel';
         this.buttonTabBaseClass = 'mg-c-tabs__navigation-button';
         this.startIndex = 1;
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = ze('mg-tabs');
+        /**
+         * Define tabs size
+         */
+        this.size = 'medium';
+        /**
+         * Component tabs
+         */
+        this.tabs = [];
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-tabs']);
         /**
          * Validate that new tab status can be `Status.ACTIVE`
          * @param tab - tab item
@@ -7780,7 +8162,7 @@ const MgTabs = class {
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            tt(() => {
+            et(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -7795,39 +8177,32 @@ const MgTabs = class {
             if (slots.length !== this.tabs.length)
                 throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
         };
-        this.identifier = qe('mg-tabs');
-        this.label = undefined;
-        this.size = 'medium';
-        this.items = undefined;
-        this.activeTab = undefined;
-        this.tabs = [];
-        this.classCollection = new Xe(['mg-c-tabs']);
     }
     watchIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Ie(newValue)) {
+            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
     }
     validateLabel(newValue) {
-        if (!me(newValue)) {
-            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Ye(newValue)}.`);
+        if (!ye(newValue)) {
+            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${Je(newValue)}.`);
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
         this.classCollection.add(`mg-c-tabs--size-${this.size}`);
     }
     validateItems(newValue) {
         // String array
-        if (Je(newValue))
+        if (Xe(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
             this.tabs = newValue;
         else
-            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${Je(newValue)}.`);
     }
     validateActiveTab(newValue) {
         // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
@@ -7852,7 +8227,7 @@ const MgTabs = class {
             this.activeTabChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${Je(newValue)}.`);
         }
     }
     /*************
@@ -7923,14 +8298,18 @@ const MgTag = class {
         // Classes
         this.classOutline = 'mg-c-tag--outline';
         this.classSoft = 'mg-c-tag--soft';
-        this.variant = variants[0];
-        this.outline = undefined;
-        this.soft = undefined;
-        this.classCollection = new Xe(['mg-c-tag']);
+        /**
+         * Define tag variant
+         */
+        this.variant = variants[0]; // primary
+        /**
+         * Component classes
+         */
+        this.classCollection = new Ge(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
-            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Ye(newValue)}.`);
+            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Je(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -7963,7 +8342,7 @@ const MgTag = class {
      * @param textContent - html element textContent property
      */
     validateTextContent(textContent) {
-        if (!me(textContent))
+        if (!ye(textContent))
             throw new Error('<mg-tag> slot must contain a text content.');
     }
     /*************
@@ -7983,7 +8362,7 @@ const MgTag = class {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: 'bb99306c07ea9ef4ee193a6e52c2c211378d34df', class: this.classCollection.join() }, h("slot", { key: '0e427b1189217e5d863daf9ed15d35de4832d8dd' })));
+        return (h("span", { key: 'b3269e3baec3a281bdbe65f8b62636b7ea2fa84c', class: this.classCollection.join() }, h("slot", { key: 'bcca2d8653dbcd6a96d322055a4e2773d85ca87d' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8013,6 +8392,23 @@ const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTT
 const MgTooltip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Sets an `id` attribute.
+         * Needed by the input for accessibility `aria-decribedby`.
+         */
+        this.identifier = ze('mg-tooltip');
+        /**
+         * Tooltip placement
+         */
+        this.placement = 'bottom';
+        /**
+         * Display tooltip
+         */
+        this.display = false;
+        /**
+         * Disable tooltip
+         */
+        this.disabled = false;
         /**
          * Show tooltip
          */
@@ -8022,7 +8418,7 @@ const MgTooltip = class {
             // Enable the event listeners
             this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
             // hide when click outside on nextTick to prevent event to trigger after creation
-            tt(() => {
+            et(() => {
                 this.windows.forEach((localWindow) => {
                     localWindow.addEventListener('click', this.handleClickOutside, false);
                     localWindow.addEventListener('keydown', this.handlePressEscape, false);
@@ -8218,22 +8614,17 @@ const MgTooltip = class {
                 element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);
             }
         };
-        this.identifier = qe('mg-tooltip');
-        this.message = undefined;
-        this.placement = 'bottom';
-        this.display = false;
-        this.disabled = false;
     }
     watchIdentifier(newValue) {
-        if (!Ge(newValue)) {
-            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${Ye(newValue)}.`);
+        if (!Ie(newValue)) {
+            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${Je(newValue)}.`);
         }
         // use renderTooltipContent to update tooltip-content id
         this.renderTooltipContent();
     }
     watchMessage(newValue) {
-        if (!me(newValue)) {
-            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${Ye(newValue)}.`);
+        if (!ye(newValue)) {
+            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${Je(newValue)}.`);
         }
         if (this.mgTooltipContent !== undefined)
             this.mgTooltipContent.message = newValue;
@@ -8352,7 +8743,7 @@ const MgTooltip = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '76fa15330f130c087376fd76188806dbd972fca9' }, h("slot", { key: '3ae6087202535e2855cda3b25bd8be886eb37d21' }), h("slot", { key: 'b2502789d5270a19b585c4e44b5d7e9f7fffc196', name: "content" })));
+        return (h(Host, { key: '7868f7704c0f1ccd9d0d67d45eac6aa8901f4d5d' }, h("slot", { key: '4f865f9e153c5d01259ca83b81772dce302f5c05' }), h("slot", { key: '2032e81f60a7b7818a7220f0b00cec81ca0a84ed', name: "content" })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -8370,7 +8761,6 @@ const MgTooltipContentStyle0 = mgTooltipContentCss;
 const MgTooltipContent = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.message = undefined;
     }
     /*************
      * Lifecycle *
@@ -8380,7 +8770,7 @@ const MgTooltipContent = class {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '2f94fdb8d48e172cc1d1f069ce12d1508e5e7896', role: "tooltip" }, h("span", { key: 'f075e8392eba2cd1256df7e89b7f20c832dc02e8', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: '5f840ac9a4c9c422dc6e012dd8fbb0637232bd5f', name: "arrow" })));
+        return (h(Host, { key: '2221de3ca0ef7c9d6e46e24b19c69007fababf81', role: "tooltip" }, h("span", { key: '9e14f7f5b3f5e5060ed9f42e8d7259b17575168e', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'bc083567d77e8f4ffccee98b96036ba8ac494fb6', name: "arrow" })));
     }
 };
 MgTooltipContent.style = MgTooltipContentStyle0;